/* =========================================================================
   VITRINE — page d'accueil publique (refonte du 2026-09-24).
   Ce qui ne s'écrit pas proprement en classes Tailwind compilées dans le
   navigateur : le fondu du héros, le fil du parcours et le panoramique mobile.
   Couleurs = jetons de la charte (DESIGN.md), recopiés ici en littéral.
   ========================================================================= */

/* Le héros : la capture s'efface vers le bas, elle continue sous le pli. */
.vitrine-fondu {
  -webkit-mask-image: linear-gradient(to bottom, #000 52%, transparent 90%);
  mask-image: linear-gradient(to bottom, #000 52%, transparent 90%);
}

/* Sur téléphone, une capture de 1 300 px ramenée à 340 px ne se lit plus :
   elle garde une largeur lisible et se parcourt du doigt. */
.vitrine-pan { overflow-x: auto; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
.dark .vitrine-pan { scrollbar-color: #334155 transparent; }
@media (max-width: 767px) {
  .vitrine-pan > .vitrine-plan { min-width: 760px; }
}

/* Le fil du parcours : un filet gris, et par-dessus sa part déjà parcourue,
   en bleu nuit. --vitrine-avance (0 → 1) est posée par le défilement. */
.vitrine-fil, .vitrine-fil-plein {
  position: absolute; top: 20px; bottom: 20px; width: 2px; border-radius: 2px;
}
.vitrine-fil { background: #e2e8f0; }
.dark .vitrine-fil { background: #1e293b; }
.vitrine-fil-plein {
  background: #21374f;
  transform-origin: top;
  transform: scaleY(var(--vitrine-avance, 0));
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.dark .vitrine-fil-plein { background: #a9c2e2; }

/* Le nœud d'une étape s'allume quand son écran entre dans la page. */
.vitrine-noeud {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.vitrine-noeud[data-actif="true"] {
  background: #21374f; border-color: #21374f; color: #fff;
  box-shadow: 0 0 0 5px rgb(33 55 79 / .12);
}
.dark .vitrine-noeud[data-actif="true"] {
  background: #a9c2e2; border-color: #a9c2e2; color: #0a0f1c;
  box-shadow: 0 0 0 5px rgb(169 194 226 / .14);
}

/* L'écran d'une étape se lève d'un cran quand il arrive — contenu visible
   par défaut : sans script, ou en mouvement réduit, il est déjà en place. */
.vitrine-ecran { transition: transform .7s cubic-bezier(.22, 1, .36, 1), opacity .7s ease; }
.vitrine-anime .vitrine-ecran[data-actif="false"] { transform: translateY(24px); opacity: .35; }

/* Les trois faits d'une étape : une ligne qui défile sur téléphone. */
@media (max-width: 639px) {
  .vitrine-faits { overflow-x: auto; scrollbar-width: none; }
  .vitrine-faits::-webkit-scrollbar { display: none; }
}

.vitrine ::selection { background: #eef1f5; color: #0f172a; }
.dark .vitrine ::selection { background: #22314a; color: #f1f5f9; }

@media (prefers-reduced-motion: reduce) {
  .vitrine-fil-plein, .vitrine-noeud, .vitrine-ecran { transition: none; }
  .vitrine-fil-plein { transform: none; }
  .vitrine-anime .vitrine-ecran[data-actif="false"] { transform: none; opacity: 1; }
}