/* Chevauche la fin de 05 (marge négative = 100vh, même technique qu'en
   01/02) : sa scène épinglée devient sticky exactement quand celle de 05
   finit de sortir par le haut (le sticky de 05 continue de défiler pendant
   tout un écran après que sa phrase a atteint sa position finale), donc 06
   recouvre pile à cet instant, sans trou ni superposition dans le flux.
   Le `background` reste sur `.s06-scene` ci-dessous, PAS sur `.sec--06` :
   `.sec--06` occupe déjà l'espace du flux normal pendant tout le
   chevauchement, avant d'être épinglée — un fond opaque posé ici masquerait
   la fin de 05 en dessous indépendamment de `--s06-visible` (vérifié : avec
   le fond sur `.sec--06`, la phrase de 05 disparaissait entièrement derrière
   ce fond noir, pas seulement derrière le texte de 06). */
.sec--06 {
  margin-top: -100vh;
}

.s06-scene {
  background: var(--noir);
  opacity: var(--s06-visible, 0);
}

.s06-code {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .6rem;
  overflow: hidden;
  pointer-events: none;
}

.s06-code-ligne {
  white-space: nowrap;
  font-family: var(--police-mono);
  font-size: var(--t-micro);
  letter-spacing: .02em;
  color: color-mix(in srgb, var(--clair) 26%, transparent);
  will-change: transform;
  animation-name: s06-defile;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.s06-code-ligne--inverse {
  animation-direction: reverse;
}

@keyframes s06-defile {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.s06-contenu {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(72px, 9vh, 112px) var(--gouttiere) clamp(24px, 4vh, 48px);
}

.s06-titre {
  --s06-titre-taille-raccord: clamp(1.4rem, 1.9vw, 1.75rem);
  display: grid;
  margin: 0;
  width: 100%;
  text-align: center;
  font-family: var(--police-mono);
  font-size: var(--t-mono-titre);
  letter-spacing: .02em;
  color: var(--clair);
}

/* Empilement grid (pas absolute) : la cellule se dimensionne sur la plus
   haute des phases superposées, le sous-texte suit toujours la vraie hauteur. */
.s06-titre-phase {
  grid-area: 1 / 1;
  display: block;
  opacity: 0;
  transition: opacity .5s var(--ease);
}

/* Raccord invisible avec la fin de 05 : même texte, même taille agrandie. */
.s06-titre-phase--raccord {
  font-size: var(--s06-titre-taille-raccord);
  opacity: 1;
}

.s06-titre-phase--raccord.s06-sorti {
  opacity: 0;
}

.s06-titre-phase--1.s06-actif {
  opacity: 1;
}

.s06-titre-phase--2.s06-actif {
  opacity: 1;
}

.s06-ok {
  color: var(--ok);
}

.s06-sous-texte {
  margin: .9rem 0 0;
  max-width: 46ch;
  text-align: center;
  font-family: var(--police-texte);
  font-size: var(--t-petit);
  color: var(--clair-doux);
}

.s06-plateau {
  position: relative;
  flex: 1;
  width: 100%;
  max-width: var(--conteneur);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4vw, 64px);
}

.s06-carte {
  position: relative;
  width: min(420px, 100%);
  background: var(--brume);
  color: var(--encre);
  border-radius: var(--rayon);
  padding: 1.5rem 1.75rem 1.75rem;
  box-shadow: 0 24px 60px color-mix(in srgb, var(--noir) 50%, transparent);
  transform: translateY(var(--s06-carte-montee, 0));
  will-change: transform;
}

.s06-carte-entete {
  padding-bottom: .9rem;
  margin-bottom: .4rem;
  border-bottom: var(--trait) solid color-mix(in srgb, var(--encre) 16%, transparent);
}

.s06-carte-titre {
  margin: 0;
  font-family: var(--police-mono);
  font-size: var(--t-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--encre) 65%, transparent);
}

.s06-carte-sous-titre {
  margin: .3rem 0 0;
  font-family: var(--police-texte);
  font-size: var(--t-petit);
  font-weight: 600;
  color: var(--encre);
}

.s06-lignes {
  list-style: none;
  margin: 0;
  padding: 0;
}

.s06-ligne {
  position: relative;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  padding: .6rem 0;
  border-top: var(--trait) solid color-mix(in srgb, var(--encre) 10%, transparent);
  font-family: var(--police-mono);
  font-size: var(--t-petit);
  transition: background-color .35s var(--ease), box-shadow .35s var(--ease);
}

.s06-ligne:first-child {
  border-top: none;
}

.s06-ligne-libelle {
  flex: 0 0 auto;
  letter-spacing: .04em;
  color: color-mix(in srgb, var(--encre) 65%, transparent);
}

.s06-ligne-avant,
.s06-ligne-apres {
  flex: 1 1 auto;
  text-align: right;
}

.s06-ligne-apres {
  display: none;
  /* `--ok` (clair, pensé pour un fond sombre) est illisible sur `.s06-carte`
     (fond `--brume`, mesuré : 1,29:1) : `--nuit`, déjà au jeton de couleurs,
     reste lisible sur cette carte claire (10,19:1) sans en ajouter une. */
  color: var(--nuit);
  font-weight: 600;
}

.s06-ligne-avant {
  display: inline;
  color: var(--encre);
}

.s06-ligne-avant::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: .5em;
  border-radius: 50%;
  background: var(--alerte);
  vertical-align: middle;
}

/* ligne passée (au-dessus de l'active) : état « après ». */
.s06-ligne--fait .s06-ligne-avant {
  display: none;
}

.s06-ligne--fait .s06-ligne-apres {
  display: inline;
}

/* ligne active : surlignée, déborde la carte. */
.s06-ligne--actif {
  margin: 0 -24px;
  padding-left: 24px;
  padding-right: 24px;
  background: var(--sable);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--noir) 35%, transparent);
  border-radius: var(--rayon);
}

.s06-ligne--actif .s06-ligne-avant {
  display: none;
}

.s06-ligne--actif .s06-ligne-apres {
  display: inline;
}

.s06-aparte {
  position: relative;
  width: 220px;
  flex: 0 0 auto;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}

.s06-aparte.s06-visible {
  opacity: 1;
  transform: translateY(0);
}

.s06-aparte::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -32px;
  width: 32px;
  height: var(--trait);
  background: color-mix(in srgb, var(--clair) 35%, transparent);
}

.s06-aparte-titre {
  margin: 0 0 .5rem;
  font-family: var(--police-mono);
  font-size: var(--t-micro);
  letter-spacing: .08em;
  color: var(--ok);
}

.s06-aparte-titre::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: .5em;
  background: var(--ok);
  vertical-align: middle;
}

.s06-aparte-libelle {
  margin: 0 0 .3rem;
  font-family: var(--police-mono);
  font-size: var(--t-petit);
  letter-spacing: .04em;
  color: var(--clair);
}

.s06-aparte-etat {
  margin: 0;
  font-family: var(--police-mono);
  font-size: var(--t-petit);
  color: var(--ok);
}

@media (prefers-reduced-motion: reduce) {
  .s06-code-ligne {
    animation: none;
  }

  .s06-titre-phase--2 {
    opacity: 1;
    position: static;
  }

  .s06-titre-phase--1,
  .s06-titre-phase--raccord {
    display: none;
  }

  .s06-ligne,
  .s06-aparte,
  .s06-carte {
    transition: none;
  }

  .s06-aparte {
    opacity: 1;
    transform: none;
  }

  .s06-carte {
    transform: none;
  }
}

@media (max-width: 760px) {
  .s06-code {
    gap: 1.4rem;
  }

  .s06-code-ligne {
    color: color-mix(in srgb, var(--clair) 20%, transparent);
  }

  .s06-contenu {
    padding-top: clamp(64px, 12vh, 96px);
  }

  .s06-titre {
    font-size: var(--t-petit);
  }

  .s06-plateau {
    flex-direction: column;
    gap: 1rem;
  }

  .s06-carte {
    width: 100%;
    padding: 1.25rem 1.25rem 1.5rem;
  }

  .s06-ligne {
    flex-direction: column;
    align-items: flex-start;
    gap: .2rem;
    font-size: var(--t-micro);
  }

  .s06-ligne-avant,
  .s06-ligne-apres {
    text-align: left;
  }

  .s06-ligne--actif {
    margin: 0 -16px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .s06-aparte {
    width: 100%;
  }

  .s06-aparte::before {
    display: none;
  }
}