/* 1. LES MICRO-SCENES, DEUXIEME LOT : voir notes/scenes2.notes.md §1 */

/* 2. LA CASCADE DE RESOLUTION (section « L agent marketing ») : voir notes/scenes2.notes.md §2 */
.casc {
  margin-top: 26px; padding: 22px 24px;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface);
}
.casc-tete {
  display: flex; align-items: center; gap: 10px; padding-bottom: 14px;
  margin-bottom: 4px; border-bottom: 1px solid var(--line);
  font-size: 13px; font-weight: 600;
}
.casc-tete .horo { margin-left: auto; font-family: var(--font-data); font-size: 11.5px; color: var(--faint); font-weight: 400; }
.casc-ligne {
  display: flex; align-items: center; gap: 11px; padding: 11px 0;
  border-bottom: 1px solid var(--line); font-size: 13.5px;
  opacity: 0; transform: translateY(6px);
}
.casc-ligne:last-of-type { border-bottom: 0; }
.casc-ligne.is-in { animation: scCascEntre .34s cubic-bezier(0.23, 1, 0.32, 1) forwards; }
@keyframes scCascEntre { to { opacity: 1; transform: none; } }
.casc-ico {
  flex: none; width: 26px; height: 26px; border-radius: var(--radius-sm);
  background: var(--subtle); display: grid; place-items: center; font-size: 13px;
}
.casc-nom { flex: 1; min-width: 0; font-weight: 550; }
.casc-etat {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: var(--radius-full);
  background: var(--subtle); color: var(--faint);
}
.casc-etat.is-ok { background: color-mix(in srgb, var(--ok) 13%, transparent); color: var(--ok); }
.casc-etat.is-warm { background: color-mix(in srgb, #d97706 14%, transparent); color: #b45309; }
.casc-verdict {
  margin-top: 16px; padding: 13px 15px; border-radius: var(--radius-md);
  background: var(--accent-soft); color: var(--accent-strong);
  font-size: 13.5px; font-weight: 600;
  opacity: 0; transform: translateY(8px);
}
.casc-verdict.is-in { animation: scCascEntre .42s cubic-bezier(0.23, 1, 0.32, 1) forwards; }

/* 3. LE FLUX QUI SE PROPAGE (section « Comment ca marche ») : voir notes/scenes2.notes.md §3 */
.steps { position: relative; }
.flux-trait {
  position: absolute; left: 6%; right: 6%; top: 50%; height: 2px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 22%, transparent));
  transform: scaleX(0); transform-origin: left center; z-index: 0;
}
.is-live .flux-trait { animation: scFluxTrait 1.5s cubic-bezier(0.4, 0, 0.2, 1) .2s forwards; }
@keyframes scFluxTrait { to { transform: scaleX(1); } }
/* CELUI-CI GARDE `left`, ET C'EST UNE CONVERSION ABANDONNEE APRES MESURE. Faire
   voyager le paquet en transform demande une unite relative au PARENT (un
   pourcentage de translate se mesure sur l'element), donc `cqw`, donc
   `container-type: inline-size` sur `.steps`. Or `container-type` entraine le
   confinement de style, et le confinement de style casse le compteur CSS des
   trois etapes : les pastilles affichaient 1, 1, 1 au lieu de 1, 2, 3 (vu a la
   capture, comparaison au pixel des deux versions). L'autre voie, une boite
   large de toute la piste qui se translate, sortirait de 1 082 px hors du
   conteneur a 1440, et `.steps` ne peut pas clipper sans couper les ombres des
   cartes. Cout conserve : 2,6 s jouees deux fois, bureau seulement (le paquet
   est `display: none` sous 861 px). */
.flux-paquet {
  position: absolute; top: 50%; left: 6%; width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 20%, transparent);
  transform: translate(-50%, -50%); opacity: 0; z-index: 1;
}
.is-live .flux-paquet { animation: scFluxPaquet 2.6s cubic-bezier(0.4, 0, 0.2, 1) .6s 2; }
@keyframes scFluxPaquet {
  0% { left: 6%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { left: 94%; opacity: 0; }
}
/* Les cartes passent AU-DESSUS du trait : sinon le trait les barre. */
.step-card { position: relative; z-index: 2; background: var(--surface); }
@media (max-width: 860px) { .flux-trait, .flux-paquet { display: none; } }

/* 4. LE GRAPHE QUI SE DESSINE (section « Ou on en est ») : voir notes/scenes2.notes.md §4 */
.courbe { margin-top: 22px; padding: 18px 20px 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.courbe svg { display: block; width: 100%; height: 120px; overflow: visible; }
.courbe .trace {
  fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1200; stroke-dashoffset: 1200;
}
.is-live.courbe .trace, .is-live .courbe .trace { animation: scCourbeTrace 2.2s cubic-bezier(0.4, 0, 0.2, 1) .2s forwards; }
@keyframes scCourbeTrace { to { stroke-dashoffset: 0; } }
.courbe .aire { fill: color-mix(in srgb, var(--accent) 11%, transparent); opacity: 0; }
.is-live.courbe .aire, .is-live .courbe .aire { animation: scCourbeAire .9s ease-out 1.4s forwards; }
@keyframes scCourbeAire { to { opacity: 1; } }
.courbe .pt { fill: var(--accent); opacity: 0; }
.is-live.courbe .pt, .is-live .courbe .pt { animation: scCourbePoint .3s cubic-bezier(0.23, 1, 0.32, 1) forwards; }
@keyframes scCourbePoint { to { opacity: 1; } }

/* 5. LE COMMUTATEUR DE SECTION (section « Pour qui ») : voir notes/scenes2.notes.md §5 */
.mtx { margin-top: 26px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.mtx-tabs { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--line); background: var(--subtle); overflow-x: auto; scrollbar-width: none; }
.mtx-tabs::-webkit-scrollbar { display: none; }
.mtx-tab {
  border: 0; background: transparent; cursor: pointer; white-space: nowrap;
  padding: 7px 14px; border-radius: var(--radius-sm);
  font-family: var(--font-ui); font-size: 13px; font-weight: 550; color: var(--muted);
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.mtx-tab:hover { color: var(--text); }
.mtx-tab[aria-selected="true"] { background: var(--page); color: var(--accent-strong); font-weight: 620; box-shadow: 0 1px 3px rgba(10, 12, 24, .08); }
.mtx-corps { padding: 20px 22px; }
.mtx-quoi { font-size: 13.5px; color: var(--muted); margin: 0 0 14px; }
.mtx-quoi b { color: var(--text); font-weight: 620; }
.mtx-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(94px, 100%), 1fr)); gap: 8px; }
.mtx-res {
  padding: 12px 10px; border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--page); text-align: center;
  opacity: 0; transform: translateY(8px) scale(.97);
  animation: scMtxPose .34s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
@keyframes scMtxPose { to { opacity: 1; transform: none; } }
.mtx-res b { display: block; font-size: 12.5px; font-weight: 620; }
.mtx-res span { display: block; margin-top: 3px; font-size: 10.5px; color: var(--faint); font-family: var(--font-data); }
.mtx-res.est-pris { border-color: color-mix(in srgb, var(--accent) 40%, transparent); background: var(--accent-soft); }
.mtx-res.est-pris b, .mtx-res.est-pris span { color: var(--accent-strong); }

/* 6. LES SECTIONS QUI N AVAIENT ENCORE AUCUNE SCENE : voir notes/scenes2.notes.md §6 */
/* voir notes/scenes2.notes.md §7 */
.vs-col li { opacity: 0; transform: translateX(-8px); }
.is-live .vs-col li { animation: scVsEntre .32s cubic-bezier(0.23, 1, 0.32, 1) forwards; }
@keyframes scVsEntre { to { opacity: 1; transform: none; } }
.is-live .vs-col.is-before li:nth-child(1) { animation-delay: .05s; }
.is-live .vs-col.is-before li:nth-child(2) { animation-delay: .13s; }
.is-live .vs-col.is-before li:nth-child(3) { animation-delay: .21s; }
.is-live .vs-col.is-before li:nth-child(4) { animation-delay: .29s; }
.is-live .vs-col.is-after li:nth-child(1) { animation-delay: .48s; }
.is-live .vs-col.is-after li:nth-child(2) { animation-delay: .58s; }
.is-live .vs-col.is-after li:nth-child(3) { animation-delay: .68s; }
.is-live .vs-col.is-after li:nth-child(4) { animation-delay: .78s; }
.is-live .vs-col.is-after { animation: scVsSouligne 1.2s cubic-bezier(0.23, 1, 0.32, 1) .48s 1; }
@keyframes scVsSouligne {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
  40% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 20%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* LE PRIX : les lignes se cochent, puis les montants de comparaison montent. */
.prix-list li { opacity: 0; transform: translateX(-6px); }
.is-live .prix-list li { animation: scVsEntre .3s cubic-bezier(0.23, 1, 0.32, 1) forwards; }
.is-live .prix-list li:nth-child(1) { animation-delay: .06s; }
.is-live .prix-list li:nth-child(2) { animation-delay: .14s; }
.is-live .prix-list li:nth-child(3) { animation-delay: .22s; }
.is-live .prix-list li:nth-child(4) { animation-delay: .30s; }
.is-live .prix-list li:nth-child(5) { animation-delay: .38s; }
.is-live .prix-bench b { animation: scPrixNombre .5s cubic-bezier(0.23, 1, 0.32, 1) .5s both; }
@keyframes scPrixNombre { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* LES DONNEES : chaque garantie se pose, son icone arrive en pivotant. */

/* LA FAQ : seize lignes identiques qui apparaissent d un bloc, personne n en lit
   une seule. Elles se posent. */
.qa { opacity: 0; transform: translateY(8px); }
.is-live .qa { animation: scVsEntre .3s cubic-bezier(0.23, 1, 0.32, 1) forwards; }
.is-live .qa:nth-child(1) { animation-delay: .02s; }
.is-live .qa:nth-child(2) { animation-delay: .06s; }
.is-live .qa:nth-child(3) { animation-delay: .10s; }
.is-live .qa:nth-child(4) { animation-delay: .14s; }
.is-live .qa:nth-child(5) { animation-delay: .18s; }
.is-live .qa:nth-child(6) { animation-delay: .22s; }
.is-live .qa:nth-child(7) { animation-delay: .26s; }
.is-live .qa:nth-child(8) { animation-delay: .30s; }

@media (prefers-reduced-motion: reduce) {
  .casc-ligne, .casc-verdict, .vs-col li, .prix-list li, .trust, .qa, .mtx-res {
    opacity: 1 !important; transform: none !important; animation: none !important;
  }
  .flux-trait, .flux-paquet { display: none; }
  .courbe .trace { stroke-dashoffset: 0; animation: none; }
  .courbe .aire, .courbe .pt { opacity: 1; animation: none; }
  .is-live .vs-col.is-after, .is-live .trust-ico, .is-live .prix-bench b { animation: none; }
}