/* HOP, site vitrine. Chargé après tokens.css et bundle.css : la charte reste la source. */

:root {
  --gouttiere: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-long: cubic-bezier(.65, 0, .35, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-size: 16px; line-height: 1.55; font-feature-settings: "kern", "liga"; overflow-x: clip; }
img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ol, ul, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }

.conteneur { width: 100%; max-width: calc(1200px + 2 * var(--gouttiere)); margin-inline: auto; padding-inline: var(--gouttiere); }
.section { padding-block: clamp(64px, 10vw, 136px); }
.section-serree { padding-block: 0 clamp(64px, 10vw, 136px); }

:focus-visible { outline: 3px solid var(--texte); outline-offset: 3px; }

.lien-contenu { position: absolute; left: var(--space-4); top: -100px; padding: var(--space-2) var(--space-4); background: var(--nuit); color: var(--papier); z-index: 10; }
.lien-contenu:focus { top: var(--space-4); }

/* Titres : mêmes familles et graisses que les tokens, tailles adaptées au téléphone. */
.titre-ouverture, .titre-section, .titre-principe, .titre-fin {
  font-family: var(--font-display); font-weight: 700; color: inherit; text-wrap: balance;
}
.titre-ouverture { font-size: clamp(38px, 5.4vw, 72px); line-height: 1.04; letter-spacing: -.03em; max-width: 15em; }
.titre-section { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; letter-spacing: -.025em; }
.titre-principe { font-size: clamp(36px, 6vw, 76px); line-height: 1.06; letter-spacing: -.03em; }
.titre-fin { font-size: clamp(38px, 6vw, 72px); line-height: 1.04; letter-spacing: -.03em; }
.chapo { font-size: clamp(18px, 1.8vw, 22px); line-height: 1.45; text-wrap: pretty; }
.bloc-texte, .hop-bloc .bloc-texte { font-size: 16px; line-height: 1.55; text-wrap: pretty; }
.petit { font-size: 13px; line-height: 1.5; }
.note, .hop-bloc .note { color: var(--texte-discret); margin-top: var(--space-6); }

/* Liens et bouton */
.lien { color: inherit; font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-thickness .2s; }
.lien:hover { text-decoration-thickness: 2px; }

.bouton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: var(--space-3) var(--space-6);
  background: var(--vert-hop); color: var(--nuit); font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background-color .25s, color .25s;
}
.bouton:hover { background: var(--nuit); color: var(--papier); }
[data-theme="dark"] .bouton:hover { background: var(--lime); color: var(--encre); }

/* En-tête */
.tete { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-6); }
.tete-logo { display: block; flex: none; }
.tete-logo img { width: clamp(150px, 16vw, 180px); }

/* Ouverture et vidéo */
.ouverture { padding-top: clamp(8px, 3vw, 40px); }
.video { margin-top: clamp(24px, 3.5vw, 48px); }
.video video { width: 100%; aspect-ratio: 16 / 9; background: var(--papier-soft); border: var(--filet) solid var(--trait); }
.video figcaption { margin-top: var(--space-3); color: var(--texte-discret); }

.transcription { margin-top: var(--space-2); }
.transcription summary { display: inline-block; cursor: pointer; font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; padding-block: var(--space-2); }
.transcription ol { counter-reset: scene; display: grid; gap: var(--space-4); margin-top: var(--space-3); padding: var(--space-6); background: var(--surface-carte); }
.transcription-texte { font-weight: 500; }
.transcription .petit { color: var(--texte-discret); margin-top: var(--space-1); }

.ouverture-suite { display: grid; gap: var(--space-6); justify-items: start; padding-block: clamp(32px, 5vw, 64px) clamp(64px, 9vw, 120px); }
.ouverture-suite .chapo { max-width: 38em; }

/* Blocs juxtaposés */
.duo { display: grid; gap: var(--space-4); }
.bloc-grand { padding: clamp(24px, 4vw, 48px); gap: var(--space-4); min-height: clamp(380px, 40vw, 540px); overflow: hidden; }
.bloc-grand .hop-surtitre { margin-bottom: 0; }
.decor { margin-top: auto; width: 100%; max-width: 420px; padding-top: var(--space-6); }

.bloc-idee { border-top: var(--lisere) solid var(--vert-hop); } /* même hauteur de départ que le bloc encre voisin */
.bloc-idee .hop-surtitre { color: var(--nuit); }
.bloc-idee .hop-surtitre::after { background: var(--nuit); }

/* Principe : la ligne reste horizontale, même sur téléphone. */
.principe .masque { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.principe .masque > span { display: block; }

.ligne-zone { position: relative; margin-top: clamp(48px, 7vw, 88px); }
.ligne { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); }
.ligne li { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; padding-inline: var(--space-1); }
.ligne-nom { font-weight: 600; font-size: clamp(14px, 1.6vw, 17px); line-height: 1.3; }
.ligne-trait { position: absolute; left: 16.667%; right: 16.667%; top: 13px; height: 6px; background: var(--vert-hop); transform-origin: left; }
.ligne-voiture { position: absolute; z-index: 1; top: 4px; left: calc(50% + 24px); width: 44px; }

/* Écrans de l'app : défilement horizontal sur téléphone. */
.ecrans { display: flex; gap: var(--space-4); margin-inline: calc(-1 * var(--gouttiere)); padding: var(--space-1) var(--gouttiere); overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--gouttiere); scrollbar-width: thin; }
.ecrans > * { flex: 0 0 min(68vw, 280px); scroll-snap-align: start; }
.ecran { width: 100%; }
.etape { display: flex; align-items: center; gap: var(--space-3); min-height: 56px; margin-bottom: var(--space-3); font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.2; letter-spacing: -.02em; }
.etape .hop-pastille { flex: none; }

.colonne-tete .hop-surtitre, .territoire-tete .hop-surtitre { margin-bottom: var(--space-3); }
.colonne-tete { margin-bottom: var(--space-8); }
.colonne-tete .bloc-texte { margin-top: var(--space-4); }

/* Conducteur */
/* Fond papier et non papier-soft : le surtitre vert-texte n'y atteindrait pas 4,5:1. */
.conducteur { display: grid; gap: var(--space-8); padding: clamp(24px, 4vw, 56px); background: var(--papier); }
.conducteur-ecran { order: 2; justify-self: center; width: min(68vw, 300px); }
.etapes { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
.etapes li { display: flex; align-items: center; gap: var(--space-3); font-family: var(--font-display); font-weight: 700; font-size: clamp(19px, 2vw, 24px); line-height: 1.2; letter-spacing: -.02em; }
.etapes .hop-pastille { flex: none; }

/* Territoire */
.territoire-tete { margin-bottom: var(--space-8); }
.territoire-blocs { display: grid; gap: var(--space-4); }
.territoire-blocs .hop-bloc { padding: var(--space-8); min-height: 220px; }
.territoire-blocs h3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; }
.territoire-blocs .bloc-texte { margin-top: auto; }

/* Fin */
.fin { background: var(--nuit); color: var(--papier); padding-block: clamp(64px, 10vw, 128px) clamp(48px, 7vw, 96px); }
.fin-grille { display: grid; gap: var(--space-12); align-items: end; }
.fin-logo { width: 200px; margin-bottom: var(--space-12); }
.fin .hop-surtitre { margin-bottom: var(--space-3); }
.fin .chapo { margin-block: var(--space-6) var(--space-8); max-width: 34em; color: var(--texte-discret); }
.fin-motif { width: 100%; max-width: 480px; }

/* Pied de page */
.pied { background: var(--nuit); color: var(--texte-discret); border-top: var(--filet) solid var(--trait); padding-block: var(--space-6); font-size: 14px; }
.pied-grille { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-8); justify-content: space-between; }

/* Page légale */
.legal { max-width: calc(760px + 2 * var(--gouttiere)); padding-block: clamp(24px, 5vw, 64px) clamp(64px, 9vw, 112px); }
.legal section { margin-top: var(--space-12); }
.legal h2 { font-family: var(--font-display); font-size: 22px; line-height: 1.25; font-weight: 700; letter-spacing: -.02em; margin-bottom: var(--space-3); }
.legal li + li { margin-top: var(--space-2); }
.legal > p:last-child { margin-top: var(--space-12); }
.a-completer { background: var(--lime); color: var(--encre); padding-inline: var(--space-1); font-weight: 600; white-space: nowrap; }

/* Page d'erreur */
.erreur { padding-block: clamp(32px, 7vw, 96px) clamp(64px, 9vw, 112px); }
.erreur .chapo { margin-block: var(--space-6) var(--space-8); }
.erreur-motif { width: 100%; max-width: 480px; margin-top: clamp(48px, 7vw, 88px); }

/* Tablette et ordinateur */
@media (min-width: 800px) {
  .ouverture-suite { grid-template-columns: 1fr auto; align-items: end; column-gap: var(--space-16); }
  .transcription ol { grid-template-columns: repeat(3, 1fr); }
  .duo { grid-template-columns: 1fr 1fr; }

  .passager, .inscription { display: grid; grid-template-columns: 4fr 8fr; column-gap: var(--space-12); align-items: start; }
  .colonne-tete { margin-bottom: 0; position: sticky; top: var(--space-8); }
  .ecrans { margin-inline: 0; padding: 0; overflow: visible; scroll-snap-type: none; }
  .ecrans--3 > * { flex: 1 1 0; min-width: 0; }
  .ecrans--2 > * { flex: 0 1 280px; min-width: 0; }

  .conducteur { grid-template-columns: minmax(0, 300px) 1fr; column-gap: clamp(32px, 6vw, 96px); align-items: center; }
  .conducteur-ecran { order: 0; width: 100%; }

  .territoire-blocs { grid-template-columns: repeat(3, 1fr); }
  .fin-grille { grid-template-columns: 7fr 5fr; }
}

/* Sur téléphone, la vidéo occupe toute la largeur pour rester lisible. */
@media (max-width: 799px) {
  .video video { width: calc(100% + 2 * var(--gouttiere)); max-width: none; margin-inline: calc(-1 * var(--gouttiere)); border-inline: 0; }
}

/* Animations : uniquement si le visiteur les accepte et si le script tourne. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  .js [data-reveal=""] { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
  .js [data-reveal=""].vu { opacity: 1; transform: none; }

  /* Titre révélé par masque, comme dans la vidéo. */
  .js [data-reveal="masque"] .masque > span { transform: translateY(110%); transition: transform 1s var(--ease); transition-delay: calc(var(--i, 0) * 110ms); }
  .js [data-reveal="masque"].vu .masque > span { transform: none; }

  /* La ligne se trace, les arrêts s'allument, la voiture passe. */
  .js [data-reveal="ligne"] .ligne-trait { transform: scaleX(0); transition: transform 1.5s var(--ease-long); }
  .js [data-reveal="ligne"].vu .ligne-trait { transform: none; }
  .js [data-reveal="ligne"] .hop-pastille { transform: scale(0); transition: transform .6s var(--ease); transition-delay: calc(.1s + var(--i, 0) * .6s); }
  .js [data-reveal="ligne"].vu .hop-pastille { transform: none; }
  .js [data-reveal="ligne"] .ligne-voiture { left: calc(16.667% + 24px); opacity: 0; transition: left 2.4s var(--ease-long) 1.1s, opacity .3s linear 1.1s; }
  .js [data-reveal="ligne"].vu .ligne-voiture { left: calc(50% + 24px); opacity: 1; }

  /* Le trajet pointillé se dessine de gauche à droite. */
  .js [data-reveal="trace"] .fin-motif { clip-path: inset(0 100% 0 0); transition: clip-path 1.8s var(--ease-long) .2s; }
  .js [data-reveal="trace"].vu .fin-motif { clip-path: inset(0 -1% 0 0); }

  /* La voiture arrive quand le bloc apparaît. */
  .js .bloc-idee .voiture-idee { transform: translateX(-300px); transition: transform 1.6s var(--ease) .25s; }
  .js .bloc-idee.vu .voiture-idee { transform: none; }
}

@media print {
  .lien-contenu, .ecrans { overflow: visible; }
}