/* Ligne 125 — la scène (ordinateur) où la caméra entre dans les mots, et les chapitres du téléphone. */
.chapitre__barre { display: none; }
.mot {
  display: block; padding: 0; border: 0; background: none; color: var(--blanc);
  font-weight: var(--wg); font-stretch: calc(var(--wd-l, 100) * 1%); line-height: .9; white-space: nowrap;
  transform-origin: 0 50%;
}
.mot.contour { color: var(--asphalte); -webkit-text-fill-color: var(--asphalte); text-shadow: var(--cerne); }
.mot.photo-on {
  color: transparent; -webkit-text-fill-color: transparent;
  background-image: url("img/scooter-jaune-800.webp"); background-size: cover; background-position: 50% 40%;
  -webkit-background-clip: text; background-clip: text; filter: var(--lisere);
}
.mot__reste { font-size: 18px; font-weight: 600; white-space: nowrap; }
.legende { font-size: 17px; font-weight: 500; line-height: 1.4; color: var(--blanc); max-width: 30em; }

.nombres { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.nombre { display: flex; flex-direction: column; }
.nombre__v { font-weight: 800; font-stretch: 125%; line-height: .9; white-space: nowrap; font-size: var(--taille, 40px); transform-origin: 0 100%; }
.n1 .nombre__v { --taille: max(120px, 36vw); }
.n2 .nombre__v { --taille: 16.3vw; }
.n3 .nombre__v { --taille: 40px; }
.nombre__l { margin-top: 8px; font-size: 15px; font-weight: 500; color: var(--gris); }
.faits4 { display: grid; gap: 8px; margin-top: 28px; font-size: 17px; line-height: 1.45; max-width: 30em; }
.ouvre-grille { display: none; }

.marches { display: grid; gap: 6px; margin-top: 8px; }
.marche { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, auto); align-items: baseline; column-gap: 14px; }
.marche button { min-height: 44px; padding: 0; border: 0; background: none; color: inherit; text-align: left; }
.marche__palier { display: grid; font-size: 22px; font-weight: 700; line-height: 1.05; font-stretch: calc(var(--w) * 1%); }
.marche__palier > span:first-child { justify-self: start; }
.marche__palier.est-choisi > span:first-child {
  background: var(--m-plein) no-repeat 0 .96em / 100% max(4px, .1em);
}
.marche__km { font-size: 15px; font-weight: 500; font-stretch: 100%; color: var(--gris); }
.marche__p { font-size: 18px; font-weight: 500; color: var(--gris); text-align: right !important; font-variant-numeric: lining-nums; min-width: 3.4ch; }
.marche__p.est-choisi { font-size: 24px; font-weight: 800; color: var(--blanc); }
.marches__tete { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, auto); column-gap: 14px; font-size: 15px; color: var(--gris); }
.marches__tete span { text-align: right; min-width: 3.4ch; }
.grille__notes { display: grid; gap: 8px; margin-top: 22px; font-size: 16px; line-height: 1.45; color: var(--gris); max-width: 30em; }
.grille__fermer { display: none; }

.permis { font-size: 8.4vw; font-weight: 700; line-height: 1; }
.lettrine { float: left; font-size: 230px; line-height: .66; font-weight: 800; font-stretch: 125%; margin: .03em .05em 0 0; padding-top: .02em; --photo-pos: 30% 30%; }
.peut { clear: both; display: flex; flex-wrap: wrap; gap: 0 .4em; margin-top: 28px; font-size: 12vw; font-weight: 800; font-stretch: 110%; line-height: 1.05; }
.peut__m { position: relative; }
.peut__m.non { color: var(--gris2); }
.peut__m::after {
  content: ""; position: absolute; left: -.04em; right: -.04em; top: 52%; height: .07em; background: var(--blanc);
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--courbe);
}
.peut__m.non::after { transform: scaleX(1); }
.raison { margin-top: 18px; font-size: 17px; line-height: 1.45; max-width: 30em; min-height: 2.9em; }

/* ---- Téléphone : les trois tiers sont trois chapitres plein écran ---- */
@media (max-width: 1023px) {
  .js .scene { display: none; }
  .tiers { padding: 0 var(--marge) calc(48px + env(safe-area-inset-bottom)); }
  .chapitres .tiers {
    position: fixed; z-index: 60; top: var(--demobar-offset, 0px); left: 0; right: 0; bottom: 0;
    background: var(--asphalte) url("img/enrobe.webp") repeat; background-size: 512px 512px;
    overflow-y: auto; overflow-x: clip; overscroll-behavior: contain;
    visibility: hidden; transform: translateY(100%);
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), visibility 0s .45s;
  }
  .chapitres .tiers.est-ouvert { visibility: visible; transform: none; transition-delay: 0s; }
  .chapitre__barre {
    position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between;
    height: 64px; margin: 0 calc(var(--marge) * -1) 8px; padding: 0 var(--marge);
    background: var(--asphalte); border-bottom: 1px solid rgb(255 255 255 / .1);
  }
  .chapitre__barre h2 { font-size: 16px; font-weight: 600; font-stretch: 110%; color: var(--gris); }
  .chapitre__fermer {
    min-height: 48px; padding: 0 18px; border: 0; border-radius: 8px;
    background: var(--blanc); color: var(--asphalte); font-size: 16px; font-weight: 700;
  }
  .flotte { padding: 22svh 0 38svh; overflow-x: clip; }
  .flotte__l { margin-bottom: 10svh; }
  .flotte__l .mot { font-size: 44vw; line-height: .86; }
  .flotte__l[data-cat="e"] .mot { font-size: 14.5vw; line-height: 1; }
  .flotte__l .legende { margin-top: 10px; }
  .mot__reste { display: block; margin-top: 4px; }
  .nombres { padding-top: 12px; }
  .grille { margin-top: 36px; }
  .grille::before { content: "Toute la grille"; display: block; font-size: 26px; font-weight: 800; font-stretch: 110%; margin-bottom: 6px; }
  .t3 { padding-top: 0; }
  .t3 .peut { margin-top: 36px; }
  .t3 .permis { margin-top: 16px; }
}
@media (max-width: 1023px) and (min-width: 600px) {
  .flotte__l .mot { font-size: 30vw; }
  .permis { font-size: 6vw; }
  .peut { font-size: 9vw; }
}

/* ---- Ordinateur : une scène collante de 100 svh dans une piste de 400 svh ---- */
@media (min-width: 1024px) {
  .piste { position: relative; height: 400svh; }
  .ancre { position: absolute; left: 0; width: 1px; height: 1px; scroll-margin-top: 0; }
  #scooters { top: 66svh; } #prix { top: 172svh; } #permis { top: 262svh; }
  .scene { position: sticky; top: 0; height: 100svh; overflow: clip; }
  .fond {
    position: absolute; left: var(--marge); top: 150px; margin: 0;
    font-weight: 700; line-height: .92; --fs: min(7.6vw, 9.6svh); font-stretch: calc(var(--wd) * 1%);
    opacity: .2; pointer-events: none; transform-origin: 0 0;
  }
  .fond .champ__sel, .fond .champ__btn, .fond .lien-court { display: none; }
  .fond .remplie { color: var(--blanc); -webkit-text-fill-color: var(--blanc); background: none; -webkit-text-stroke: 0; }
  .plongee { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; visibility: hidden; }
  .plongee text { font-family: "Anek Latin", system-ui, sans-serif; }
  .plongee__c { display: none; }
  .tiers { position: absolute; inset: 0; padding: 112px var(--marge) 44px; visibility: hidden; opacity: 0; }

  .t1 .flotte { display: flex; flex-direction: column; justify-content: center; height: 100%; padding-bottom: 40px; }
  .flotte__l { display: flex; align-items: baseline; gap: 28px; }
  .flotte__l .mot { font-size: min(24svh, 14.5vw); }
  .flotte__l .legende {
    position: absolute; left: auto; right: var(--marge); bottom: 44px; width: min(30em, 40vw); font-size: 18px;
    opacity: 0; transition: opacity .12s linear;
  }
  .flotte__l.est-actif .legende { opacity: 1; }
  .mot__reste { opacity: 0; }
  .flotte__l.est-actif .mot__reste { opacity: 1; }
  .mot.photo-on { background-image: url("img/scooter-jaune-1920.webp"); }

  .t2, .t3 { display: flex; flex-direction: column; justify-content: center; }
  .nombres { flex-direction: row; align-items: baseline; gap: clamp(28px, 3.2vw, 64px); }
  .n1 .nombre__v { --taille: 16vw; }
  .n2 .nombre__v { --taille: 7.25vw; }
  .n3 .nombre__v { --taille: max(40px, 2.25vw); }
  .nombre__l { font-size: 15px; }
  .faits4 { margin-top: clamp(22px, 4svh, 48px); font-size: 18px; gap: 4px; }
  .ouvre-grille {
    display: inline-block; align-self: flex-start; margin-top: 8px; padding: 10px 0; line-height: 1.1;
    border: 0; color: var(--blanc); font-size: 22px; font-stretch: 110%; background-position: 0 calc(10px + .96em), 0 calc(10px + .96em);
  }
  .grille {
    position: fixed; z-index: 5; top: 96px; right: max(16px, calc((100vw - 1180px) / 2)); bottom: 16px;
    width: min(680px, 52vw); padding: 24px 32px 32px; border-radius: 12px;
    background: var(--repli); border: 1px solid rgb(255 255 255 / .12); box-shadow: 0 30px 60px -20px rgb(0 0 0 / .8);
    overflow-y: auto; overscroll-behavior: contain;
    visibility: hidden; transform: translateX(calc(100% + 40px));
    transition: transform .45s var(--courbe), visibility 0s .45s;
  }
  .grille.est-ouverte { visibility: visible; transform: none; transition-delay: 0s; }
  .grille__fermer {
    display: block; margin: 0 0 8px auto; min-height: 44px; padding: 0 16px; border: 0; border-radius: 8px;
    background: var(--blanc); color: var(--asphalte); font-weight: 700;
  }
  .marche__palier { font-size: 28px; }
  .marche__p { font-size: 20px; }
  .marche__p.est-choisi { font-size: 28px; }

  .permis { font-size: min(7vw, 10.5svh); line-height: .95; max-width: 30em; }
  .lettrine { font-size: 2.62em; line-height: .725; margin: .015em .06em 0 -.02em; }
  .peut { font-size: min(4.6vw, 7svh); margin-top: clamp(24px, 5svh, 56px); }
  .raison { font-size: 18px; }
}

/* Mouvement réduit, ou sans script : les tiers s'enchaînent, sans caméra */
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) {
  .piste { height: auto; }
  .scene { position: static; height: auto; overflow: visible; }
  .fond, .plongee { display: none; }
  .tiers { position: relative; inset: auto; min-height: 100svh; visibility: visible; opacity: 1; }
}
@media (min-width: 1024px) {
  .sans-js .piste { height: auto; }
  .sans-js .scene { position: static; height: auto; }
  .sans-js .fond, .sans-js .plongee { display: none; }
  .sans-js .tiers { position: relative; min-height: 100svh; visibility: visible; opacity: 1; }
}