/* 1. LES MICRO-SCENES DE SECTION : voir notes/scenes.notes.md §1 */

/* --- Declenchement commun ------------------------------------------------- */
[data-scene] { --sc: 0; }
[data-scene].is-live { --sc: 1; }

/* voir notes/scenes.notes.md §2 */
.sc-vide { position: relative; margin-top: 22px; }
.sc-vide-piste {
  position: relative; height: 46px; border-radius: var(--radius-md);
  border: 1px solid var(--line); background: var(--page); overflow: hidden;
}
.sc-vide-plein {
  position: absolute; inset: 0; transform-origin: left center;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--accent) 26%, transparent),
    color-mix(in srgb, var(--accent) 8%, transparent));
}
.is-live .sc-vide-plein { animation: scVideDrain 4.2s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
@keyframes scVideDrain { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* voir notes/scenes.notes.md §3 */
/* Le lisere traverse en transform et non en `left`. L'astuce : la boite occupe
   TOUTE la piste et ne peint que son bord gauche, donc `translateX(100%)` la
   pose exactement ou `left: 100%` la posait, sans mise en page. La piste a
   `overflow: hidden`, donc rien ne depasse. */
.sc-vide-bord {
  position: absolute; inset: 0;
  border-left: 2px solid var(--accent); opacity: 0; pointer-events: none;
}
.is-live .sc-vide-bord { animation: scVideBord 4.2s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
@keyframes scVideBord {
  0% { transform: translateX(100%); opacity: 1; }
  99% { opacity: 1; }
  100% { transform: translateX(0); opacity: 0; }
}
.sc-vide-h {
  position: absolute; top: 50%; transform: translateY(-50%);
  font-family: var(--font-data); font-size: 12px; font-weight: 600; z-index: 2;
}
.sc-vide-h.a { left: 12px; color: var(--accent-strong); }
.sc-vide-h.b { right: 12px; color: var(--faint); }
.sc-vide-legende {
  display: flex; justify-content: space-between; gap: 12px;
  margin-top: 8px; font-size: 12px; color: var(--faint);
}
.sc-vide-legende b { color: var(--text); font-family: var(--font-data); }

/* voir notes/scenes.notes.md §4 */
.chrono { position: relative; }
.chrono::before {
  content: ''; position: absolute; left: 0; top: 0; width: 2px; bottom: 0;
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 10%, transparent));
  transform: scaleY(0); transform-origin: top center;
}
.is-live.chrono::before { animation: scRouteTrait 2.6s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
@keyframes scRouteTrait { to { transform: scaleY(1); } }
.chrono-row { position: relative; padding-left: 22px; }
.chrono-row::before {
  content: ''; position: absolute; left: -5px; top: 32px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--page); border: 2px solid var(--line);
  transition: border-color .3s var(--ease), background-color .3s var(--ease), transform .3s var(--ease);
}
.chrono-row.is-step::before { border-color: var(--accent); background: var(--accent); transform: scale(1.15); }
.chrono-row .chrono-when,
.chrono-row .chrono-what { opacity: .35; transition: opacity .45s var(--ease); }
.chrono-row.is-step .chrono-when,
.chrono-row.is-step .chrono-what { opacity: 1; }

/* voir notes/scenes.notes.md §5 */
.compar tbody tr { opacity: 0; transform: translateY(6px); }
.is-live .compar tbody tr { animation: scCompLigne .34s cubic-bezier(0.23, 1, 0.32, 1) forwards; }
@keyframes scCompLigne { to { opacity: 1; transform: none; } }
.is-live .compar tbody tr:nth-child(1) { animation-delay: .05s; }
.is-live .compar tbody tr:nth-child(2) { animation-delay: .13s; }
.is-live .compar tbody tr:nth-child(3) { animation-delay: .21s; }
.is-live .compar tbody tr:nth-child(4) { animation-delay: .29s; }
.is-live .compar tbody tr:nth-child(5) { animation-delay: .37s; }
.is-live .compar tbody tr:nth-child(6) { animation-delay: .45s; }
.is-live .compar tbody tr:nth-child(7) { animation-delay: .53s; }
.is-live .compar tbody tr:nth-child(8) { animation-delay: .61s; }
.is-live .compar tbody tr:nth-child(9) { animation-delay: .69s; }
.is-live .compar tbody tr:nth-child(10) { animation-delay: .77s; }
.compar td.is-us { position: relative; overflow: hidden; }
.is-live .compar td.is-us::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 25%,
    color-mix(in srgb, var(--accent) 22%, transparent) 50%, transparent 75%);
  background-size: 250% 100%;
  animation: scCompBalai 1.1s ease-in-out .9s 1;
  pointer-events: none;
}
@keyframes scCompBalai { from { background-position-x: 200%; } to { background-position-x: -100%; } }

/* voir notes/scenes.notes.md §6 */
.feat-demo { opacity: 0; transform: translateY(10px); }
.is-live .feat .feat-demo { animation: scDomEntre .42s cubic-bezier(0.23, 1, 0.32, 1) forwards; }
@keyframes scDomEntre { to { opacity: 1; transform: none; } }
.is-live .feat:nth-child(1) .feat-demo { animation-delay: .04s; }
.is-live .feat:nth-child(2) .feat-demo { animation-delay: .12s; }
.is-live .feat:nth-child(3) .feat-demo { animation-delay: .20s; }
.is-live .feat:nth-child(4) .feat-demo { animation-delay: .28s; }
.is-live .feat:nth-child(5) .feat-demo { animation-delay: .36s; }
.is-live .feat:nth-child(6) .feat-demo { animation-delay: .44s; }

/* voir notes/scenes.notes.md §7 */

@media (prefers-reduced-motion: reduce) {
  .sc-vide-plein, .sc-vide-bord,
  .is-live.chrono::before,
  .is-live .compar tbody tr, .is-live .compar td.is-us::after,
  .is-live .feat .feat-demo,
  .is-live .sect { animation: none !important; }
  .sc-vide-plein { transform: scaleX(0); }
  .chrono::before { transform: scaleY(1); }
  .compar tbody tr, .sect { opacity: 1; transform: none; }
  .chrono-row .chrono-when, .chrono-row .chrono-what { opacity: 1; }
  .chrono-row::before { border-color: var(--accent); background: var(--accent); }
}

/* voir notes/scenes.notes.md §8 */

/* voir notes/scenes.notes.md §9 */
.noir {
  --n-fond: #0b0d12;
  --n-carte: #14171f;
  --n-ligne: #262b36;
  --n-texte: #f4f5f7;
  --n-faible: #9aa1ae;
  --n-vide: #333846;
  background: var(--n-fond);
  color: var(--n-texte);
  border-block: 1px solid var(--n-ligne);
}
.noir h2, .noir .lead, .noir .eyebrow { color: var(--n-texte); }
.noir .lead { color: var(--n-faible); max-width: 62ch; }
.noir .eyebrow { color: color-mix(in srgb, var(--accent) 70%, white); }

.noir-in {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 40px; align-items: start; margin-top: 34px;
  padding: 30px 32px; border-radius: var(--radius-lg);
  background: var(--n-carte); border: 1px solid var(--n-ligne);
}
.noir-legende {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
  margin-bottom: 24px; font-size: 12.5px; color: var(--n-faible);
}
.noir-legende i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 7px; vertical-align: -1px; }
.noir-legende .l-sans i { background: var(--n-vide); }
.noir-legende .l-avec i { background: var(--accent); }
.noir-titre { margin-right: auto; font-family: var(--font-data); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }

.noir-bloc { margin-bottom: 22px; }
.noir-bloc:last-child { margin-bottom: 0; }
.noir-bloc h3 { margin: 0 0 9px; font-size: 14px; font-weight: 600; color: var(--n-texte); }
.noir-barre {
  position: relative; height: 30px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--n-vide) 40%, transparent); margin-bottom: 6px; overflow: hidden;
}
.noir-barre i {
  position: absolute; inset: 0 auto 0 0; width: var(--w, 0%);
  border-radius: var(--radius-sm); background: var(--n-vide);
  transform: scaleX(0); transform-origin: left center;
}
.noir-barre.est-avec i { background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 65%, white)); }
.is-live .noir-barre i { animation: scNoirBarre .95s cubic-bezier(0.23, 1, 0.32, 1) forwards; }
.is-live .noir-bloc:nth-child(2) .noir-barre i { animation-delay: .12s; }
.is-live .noir-bloc:nth-child(3) .noir-barre i { animation-delay: .24s; }
.is-live .noir-bloc:nth-child(4) .noir-barre i { animation-delay: .36s; }
.is-live .noir-barre.est-avec i { animation-delay: .30s; }
.is-live .noir-bloc:nth-child(3) .noir-barre.est-avec i { animation-delay: .42s; }
.is-live .noir-bloc:nth-child(4) .noir-barre.est-avec i { animation-delay: .54s; }
@keyframes scNoirBarre { to { transform: scaleX(1); } }
.noir-barre b {
  position: absolute; top: 50%; transform: translateY(-50%); right: 12px;
  font-family: var(--font-data); font-size: 13px; font-weight: 650; color: var(--n-texte);
  font-variant-numeric: tabular-nums; z-index: 2;
}
.noir-delta { font-size: 12.5px; font-weight: 600; color: color-mix(in srgb, var(--accent) 60%, white); }

.noir-cote { text-align: center; padding-left: 8px; }
.noir-cote label { display: block; font-size: 13px; color: var(--n-faible); margin-bottom: 14px; }
.noir-cote input[type="range"] { width: 100%; accent-color: var(--accent); height: 26px; cursor: pointer; }
.noir-cote .avant { font-family: var(--font-data); font-size: 26px; font-weight: 620; margin-top: 10px; }
.noir-cote .avant span { display: block; font-family: var(--font-ui); font-size: 12px; color: var(--n-faible); font-weight: 400; margin-top: 2px; }
.noir-cote .apres {
  font-family: var(--font-data); font-size: clamp(30px, 4.6vw, 46px); font-weight: 680;
  letter-spacing: -0.03em; margin-top: 20px; font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--accent) 55%, white);
}
.noir-cote .apres-sub { display: block; margin-top: 4px; font-size: 12.5px; color: var(--n-faible); }
.noir-cote .fine { display: block; margin-top: 18px; font-size: 11.5px; color: var(--n-faible); line-height: 1.6; }

@media (max-width: 900px) {
  .noir-in { grid-template-columns: 1fr; gap: 28px; padding: 24px 20px; }
  .noir-cote { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .is-live .noir-barre i { animation: none; transform: scaleX(1); }
}

/* voir notes/scenes.notes.md §10 */
.noir-cote input[type="range"] { -webkit-appearance: none; appearance: none; background: transparent; }
.noir-cote input[type="range"]::-webkit-slider-runnable-track {
  height: 5px; border-radius: 3px; background: var(--n-vide);
}
.noir-cote input[type="range"]::-moz-range-track { height: 5px; border-radius: 3px; background: var(--n-vide); }
.noir-cote input[type="range"]::-moz-range-progress { height: 5px; border-radius: 3px; background: var(--accent); }
.noir-cote input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; margin-top: -6px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--n-carte);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}
.noir-cote input[type="range"]::-moz-range-thumb {
  width: 17px; height: 17px; border-radius: 50%; border: 2px solid var(--n-carte);
  background: var(--accent);
}
.noir-cote input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
/* voir notes/scenes.notes.md §11 */
.noir-cote { text-align: left; }
.noir-cote label { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.noir-cote label output { font-family: var(--font-data); color: var(--n-texte); font-weight: 600; }
.noir-cote .apres, .noir-cote .apres-sub, .noir-cote .fine { text-align: center; }
.noir-cote .apres { margin-top: 26px; }