/* Simulateur facturation : passages entre les sections. La page se lit comme un
   seul fond : plus de filets entre les sections, les bandes teintées se fondent
   dans le blanc, la grille du héros s'efface en descendant. De légers halos de
   couleur relient les coutures, la carte du simulateur mord sur le héros et les
   blocs apparaissent en cascade (version B, choisie sur aperçu le 29/09/2026). */
:root { --fondu: clamp(64px, 10svh, 120px); --morsure: clamp(32px, 5svh, 56px); }

.hero { border-bottom: 0; background-image: none; padding-bottom: calc(clamp(20px, 4svh, 64px) + var(--morsure)); }
.s { border-top: 0; }
/* La grille passe sur un calque masqué : elle s'efface sans estomper le texte. */
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--grille) 1px, transparent 1px), linear-gradient(90deg, var(--grille) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: linear-gradient(180deg, #000 35%, transparent 90%);
  mask-image: linear-gradient(180deg, #000 35%, transparent 90%);
}
/* Bas du héros fondu vers la teinte du simulateur, avec un halo lilas (au-dessus des mosaïques, sous le texte). */
.hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: clamp(90px, 18svh, 200px); pointer-events: none;
  background:
    radial-gradient(50% 70% at 50% 100%, color-mix(in srgb, var(--lilas) 16%, transparent), transparent 70%),
    linear-gradient(180deg, transparent, var(--soft));
}
/* La carte du simulateur mord sur le bas du héros : l'œil comprend qu'il y a une suite. */
.sim {
  position: relative; z-index: 2; margin-top: calc(-1 * var(--morsure)); padding-top: 0;
  background: linear-gradient(180deg, transparent, transparent var(--morsure), var(--soft) var(--morsure), var(--soft) calc(100% - var(--fondu)), var(--fond));
}
.carte, .verdict { box-shadow: 0 18px 44px rgb(33 26 51 / .09); }
#a-savoir { background: radial-gradient(40% 55% at 88% 45%, color-mix(in srgb, var(--orange-sig) 6%, transparent), transparent 70%); }
.s--doux {
  background:
    radial-gradient(45% 40% at 12% 30%, color-mix(in srgb, var(--lilas) 12%, transparent), transparent 70%),
    linear-gradient(180deg, var(--fond), var(--soft) var(--fondu), var(--soft) calc(100% - var(--fondu)), var(--fond));
}
/* Bas de la FAQ teinté de lilas : le pied de page sombre arrive moins sec. */
#faq { background: linear-gradient(180deg, var(--fond) 55%, color-mix(in srgb, var(--lilas) 13%, #fff)); }

/* Apparitions : posées par apparitions.js, jamais sans JavaScript. Une animation et
   non une transition, pour ne pas écraser les transitions de survol des questions. */
.ap:not(.ap--vu) { opacity: 0; }
.ap--vu { animation: ap-monte .6s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes ap-monte { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .ap:not(.ap--vu) { opacity: 1; }
  .ap--vu { animation: none; }
}