/* getdriver-pro : la page des chauffeurs, en récit par chapitres.
   Même thème que l'app (DriverDesign.swift, thème nuit) et que la page
   passagers : fond #0A0B0D, accent #5AC8FA, espèces #34C759, verre fumé,
   boutons blancs. Le fond s'éclaircit d'un cran à chaque heure : l'aube monte
   sur la matinée de Karim, par paliers (jamais un dégradé continu).
   Chaque chapitre a sa propre mise en page : planche, appareil annoté, bande
   cinéma, détail, registre, liste à définitions, bandeau. */

:root {
  --sc-canvas:     #0A0B0D;
  --sc-surface:    #14161A;
  --sc-ink:        #F5F6F8;
  --sc-ink-soft:   #A3A9B3;
  --sc-accent:     #5AC8FA;
  --sc-accent-ink: #0A0B0D;
  --cash:          #34C759;

  --sc-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --sc-font-text:    -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --verre:        color-mix(in oklab, #14161A 84%, transparent);
  --verre-bord:   color-mix(in oklab, #FFFFFF 9%, transparent);
  --verre-champ:  color-mix(in oklab, #FFFFFF 5%, transparent);
  --r-media:      22px;

  /* Les fonds des heures : de la nuit à l'aube, par paliers. */
  --fond-0540: #0B0D10;
  --fond-0602: #0C1016;
  --fond-0634: #0E131A;
  --fond-0649: #10161E;
  --fond-0700: #121922;
  --fond-securite: #0F141B;
}

body { background: var(--sc-canvas); color: var(--sc-ink); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a:focus-visible, button:focus-visible, input:focus-visible + * { outline: 2px solid var(--sc-accent); outline-offset: 3px; }

/* Caché au-dessus de l'écran, pas sur le côté : décalé de côté, il élargit la
   page en arabe. */
.skip { position: absolute; top: 8px; inset-inline-start: 8px; z-index: 100; translate: 0 -300%; background: #fff; color: #000; padding: 8px 14px; border-radius: 10px; }
.skip:focus { translate: none; }

/* ------------------------------------------------------------- folio --- */
/* La marge d'un reportage : la marque, l'heure et le titre du chapitre en
   cours, les langues, et l'inscription en simple lien. Pas de barre. */
.folio {
  position: fixed; z-index: var(--sc-z-chrome);
  top: calc(14px + env(safe-area-inset-top, 0px)); inset-inline: var(--sc-gutter);
  display: flex; align-items: center; gap: var(--sc-3);
  pointer-events: none;
}
.folio > * { pointer-events: auto; }
/* Un fondu sous le folio : le texte qui défile s'efface en passant dessous, au lieu
   de se glisser entre les pastilles. Il prend le fond de la section qui passe
   dessous (page.js), sinon il ferait une bande plus sombre que l'heure.
   Deux couches : une bande pleine collée au bord, puis le fondu. Sur iPhone,
   Safari 26 montre la page qui défile sous la barre d'état, sauf si un élément
   fixe touche le bord : il prolonge alors sa couleur. La bande est donc un vrai
   élément (.folio-fond) ; un pseudo-élément, Safari ne le voit pas, et la photo
   réapparaissait au-dessus du fondu. */
@property --fond-folio { syntax: "<color>"; inherits: true; initial-value: #0A0B0D; }
html { transition: --fond-folio 450ms var(--sc-ease-out); }
.folio-fond, body::after {
  content: ""; position: fixed; z-index: calc(var(--sc-z-chrome) - 1); inset-inline: 0;
  pointer-events: none; background: var(--fond-folio, var(--sc-canvas));
}
.folio-fond { top: 0; height: calc(12px + env(safe-area-inset-top, 0px)); }
body::after {
  top: calc(12px + env(safe-area-inset-top, 0px)); height: 4.5rem;
  -webkit-mask-image: linear-gradient(to bottom, #000, rgb(0 0 0 / 0.72) 40%, transparent);
  mask-image: linear-gradient(to bottom, #000, rgb(0 0 0 / 0.72) 40%, transparent);
}
/* Un chapitre sans heure (la sécurité) : sur téléphone, la pastille serait vide. */
.folio__chapitre--sans-heure .folio__heure { display: none; }
.folio__marque, .folio__chapitre, .langues, .folio__inscription {
  border-radius: 999px; background: var(--verre); border: 1px solid var(--verre-bord);
  backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
}
.folio__marque { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 12px; color: var(--sc-ink); text-decoration: none; font-weight: 650; font-size: var(--sc-t-sm); }
.folio__marque img { width: 18px; height: auto; }
.folio__chapitre { margin: 0; display: inline-flex; align-items: baseline; gap: 10px; padding: 9px 14px; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.folio__heure { color: var(--sc-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.folio__inscription { margin-inline-start: auto; padding: 9px 16px; color: var(--sc-ink); text-decoration: none; font-weight: 600; font-size: var(--sc-t-sm); transition: color 160ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .folio__inscription:hover { color: var(--sc-accent); } }
.folio__inscription:active { translate: 0 1px; }

.langues { display: flex; gap: 2px; padding: 3px; }
.langues button { min-width: 32px; min-height: 32px; padding: 0 8px; border: 0; border-radius: 999px; background: transparent; color: var(--sc-ink-soft); font: 600 var(--sc-t-xs)/1 var(--sc-font-text); cursor: pointer; transition: color 160ms var(--sc-ease-out), background-color 160ms var(--sc-ease-out); }
.langues button[aria-pressed="true"] { background: color-mix(in oklab, #fff 16%, transparent); color: var(--sc-ink); }
@media (hover: hover) and (pointer: fine) { .langues button:hover { color: var(--sc-ink); } }

/* ----------------------------------------------------- page de titre --- */
.titre { min-height: 100svh; display: grid; align-items: center; background: var(--sc-canvas); }
.titre__bloc { padding-block: 18vh 12vh; }
.surtitre { margin: 0 0 var(--sc-5); font-size: var(--sc-t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-accent); }
.titre__h1 { margin: 0; max-width: 12ch; font: 650 clamp(3.2rem, 9vw, 8.5rem)/0.95 var(--sc-font-display); letter-spacing: -0.04em; text-wrap: balance; }
.titre__chapo { margin: var(--sc-6) 0 0; max-width: 44ch; font-size: var(--sc-t-lg); line-height: 1.55; color: color-mix(in oklab, var(--sc-ink) 80%, transparent); text-wrap: pretty; }
.sommaire { list-style: none; margin: var(--sc-8) 0 0; padding: 0; max-width: 34rem; display: grid; }
.sommaire li { display: flex; gap: var(--sc-5); padding: 12px 0; border-top: 1px solid var(--verre-bord); font-size: var(--sc-t-sm); color: var(--sc-ink-soft); }
.sommaire li span:first-child { min-width: 3.4em; color: var(--sc-ink); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------- éléments communs --- */
.chapitre { padding-block: clamp(5rem, 14vh, 10rem); }
.ch1 { background: var(--fond-0540); }
.ch2 { background: var(--fond-0602); padding-block: 0; }
.ch3 { background: var(--fond-0634); padding-block: 0; }
.ch4 { background: var(--fond-0649); }
.ch5 { background: var(--fond-0700); }
.ch6 { background: var(--fond-securite); }

.heure { margin: 0 0 var(--sc-4); font: 200 clamp(3rem, 6.4vw, 6rem)/0.9 var(--sc-font-display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: color-mix(in oklab, var(--sc-ink) 34%, transparent); }
.texte { min-width: 0; }
.texte__h2 { margin: 0; max-width: 16ch; font: 650 clamp(1.9rem, 3.6vw, 3.1rem)/1.06 var(--sc-font-display); letter-spacing: -0.025em; text-wrap: balance; }
.texte__corps { margin: var(--sc-5) 0 0; max-width: 40ch; font-size: var(--sc-t-base); line-height: 1.66; color: color-mix(in oklab, var(--sc-ink) 78%, transparent); text-wrap: pretty; }

/* L'image vit dans son cadre ; la légende est dessous, jamais posée dessus. */
.media { position: relative; margin: 0; min-width: 0; }
.media__cadre { position: relative; overflow: clip; border-radius: var(--r-media); background: #000; }
.media__cadre img, .media__cadre video { display: block; width: 100%; height: 100%; object-fit: cover; }
.media figcaption { margin-top: 12px; font-size: var(--sc-t-xs); line-height: 1.5; color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; }

/* --------------------------------------- 1 · 05:40, la planche --- */
.planche { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: center; }
.media__cadre--haute { aspect-ratio: 4 / 5; }
.media__cadre--haute img { height: 112%; margin-top: -6%; }
/* Le médaillon chevauche la photo : un peu de profondeur, sans ombre portée en halo. */
.media__cadre--medaillon {
  position: absolute; width: 42%; aspect-ratio: 4 / 3; inset-inline-end: -11%; bottom: 13%;
  border-radius: 16px; outline: 6px solid var(--fond-0540);
  box-shadow: 0 24px 50px hsl(220 30% 2% / 0.55);
}

/* ------------------------------------ 2 · 06:02, l'appareil annoté (le pic) --- */
.ch2 {
  /* La demande monte entre 16 et 30 % de l'acte ; l'anneau se vide de 30 à 82 %. */
  --k: clamp(0, calc((var(--sc-p, 0) - 0.16) / 0.14), 1);
  --d: clamp(0, calc((var(--sc-p, 0) - 0.3) / 0.52), 1);
}
.ch2__scene, .ch3__scene { display: grid; align-items: center; }
.pic { display: grid; grid-template-columns: minmax(0, 4fr) auto minmax(0, 3fr); gap: clamp(2rem, 4.5vw, 4.5rem); align-items: center; padding-top: 3.5rem; }
.tel { margin: 0; padding: 8px; border-radius: 46px; background: #050607; box-shadow: inset 0 0 0 1.5px color-mix(in oklab, #fff 12%, transparent), var(--sc-edge), 0 30px 80px hsl(220 30% 2% / 0.65); }
.pic__tel { width: min(clamp(270px, 25vw, 350px), calc((100svh - 7rem) / 2.22)); }

.ecran-pro { position: relative; container-type: inline-size; aspect-ratio: 804 / 1746; overflow: hidden; border-radius: 38px; background: #101317; color: #F5F6F8; font-family: var(--sc-font-text); line-height: 1.2; }
.ecran-pro::before { content: ""; position: absolute; z-index: 5; top: 2.6cqw; left: 50%; translate: -50% 0; width: 29cqw; height: 8.4cqw; border-radius: 99px; background: #000; }
.ecran-pro p { margin: 0; }
.ecran-pro__statut { position: absolute; z-index: 4; inset: 0 0 auto; height: 6.4%; display: flex; align-items: center; justify-content: space-between; padding-inline: 8cqw 7cqw; font-size: 3.8cqw; font-weight: 650; font-variant-numeric: tabular-nums; direction: ltr; }
.ecran-pro__batterie { position: relative; width: 6.4cqw; height: 3cqw; border-radius: 1cqw; border: 0.4cqw solid hsl(0 0% 100% / 0.85); }
.ecran-pro__batterie::after { content: ""; position: absolute; inset: 0.4cqw; width: 70%; border-radius: 0.4cqw; background: var(--cash); }
/* Les vraies cartes de Driver Pro : en ligne, puis l'itinéraire vers la passagère. */
.ecran-pro__carte { position: absolute; z-index: 0; top: 6.4%; left: 0; width: 100%; height: 28.6%; object-fit: cover; }
.ecran-pro__carte--route { opacity: 0; transition: opacity 320ms var(--sc-ease-out); }
.ecran-pro__feuille { position: absolute; left: 2cqw; right: 2cqw; display: flex; flex-direction: column; border-radius: 9cqw; background: #1B1D21; border: 1px solid hsl(0 0% 100% / 0.08); box-shadow: 0 -2cqw 6cqw hsl(220 30% 2% / 0.5); }
.ecran-pro__feuille--enligne { z-index: 1; top: 33.5%; bottom: 2cqw; gap: 3.2cqw; padding: 2.4cqw 4.4cqw 4.4cqw; }
.ecran-pro__poignee { align-self: center; width: 9cqw; height: 1.1cqw; border-radius: 99px; background: hsl(0 0% 100% / 0.25); }
.ecran-pro__ligne { display: flex; align-items: center; gap: 2.4cqw; font-size: 4.4cqw; }
.ecran-pro__vert { width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: var(--cash); box-shadow: 0 0 0 1cqw color-mix(in oklab, var(--cash) 22%, transparent); }
.ecran-pro__type { margin-inline-start: auto; font-size: 3cqw; color: var(--sc-ink-soft); }
.ecran-pro__bascule { display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; font-size: 3.4cqw; font-weight: 600; text-align: center; }
.ecran-pro__bascule span { padding: 3cqw 0; border-radius: 99px; background: hsl(0 0% 100% / 0.07); color: var(--sc-ink-soft); }
.ecran-pro__bascule .actif { background: #fff; color: #0A0B0D; }
.ecran-pro__etiquette { font-size: 2.6cqw; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-ink-soft); font-weight: 600; }
/* En attente : deux lignes vides qui respirent. */
.ecran-pro__attente { display: block; height: 15cqw; border-radius: 5cqw; background: hsl(0 0% 100% / 0.05); border: 1px solid hsl(0 0% 100% / 0.06); animation: respire 2.4s var(--sc-ease-out) infinite alternate; }
.ecran-pro__attente--courte { height: 11cqw; width: 70%; animation-delay: 0.6s; }
@keyframes respire { from { opacity: 0.5; } to { opacity: 1; } }
/* Le voile de la modale d'une course entrante, comme dans l'app (ModalVeil). */
.ecran-pro__voile { position: absolute; z-index: 2; inset: 0; background: hsl(220 25% 3% / 0.62); opacity: var(--k); }
.ecran-pro__feuille--demande { z-index: 3; bottom: 2cqw; gap: 3cqw; padding: 2.4cqw 4.2cqw 4.6cqw; transform: translateY(calc((1 - var(--k)) * 118%)); }
.ecran-pro__entete { display: flex; align-items: center; gap: 3.4cqw; }
.ecran-pro__entete > div { flex: 1; min-width: 0; }
.ecran-pro__feuille--demande .ecran-pro__etiquette { color: var(--sc-accent); }
/* L'anneau se vide sous la molette : 15 secondes pour répondre (ringCount de l'app). */
.anneau { position: relative; flex: none; display: grid; place-items: center; width: 13cqw; height: 13cqw; border-radius: 50%;
  background: conic-gradient(var(--sc-accent) calc((1 - var(--d) * 0.6) * 360deg), hsl(0 0% 100% / 0.12) 0); }
.anneau::before { content: ""; position: absolute; inset: 0.9cqw; border-radius: 50%; background: #1B1D21; }
.anneau span { position: relative; font-weight: 700; font-size: 4.4cqw; font-variant-numeric: tabular-nums; }
.ecran-pro__nom { margin-top: 0.8cqw !important; font-size: 4.8cqw; font-weight: 650; }
.ecran-pro__prix { display: flex; flex-direction: column; align-items: flex-end; gap: 0.8cqw; }
.ecran-pro__prix strong { font-size: 5.6cqw; color: var(--cash); font-variant-numeric: tabular-nums; }
.ecran-pro__prix small { font-size: 2.5cqw; color: var(--sc-ink-soft); }
.ecran-pro__bloc { display: flex; flex-direction: column; gap: 2.6cqw; padding: 3.4cqw 4cqw; border-radius: 5.6cqw; background: hsl(0 0% 100% / 0.05); border: 1px solid hsl(0 0% 100% / 0.08); font-size: 3.4cqw; }
.ecran-pro__bloc > p { display: flex; align-items: center; gap: 3cqw; }
.point { flex: none; width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: #fff; }
.point--depart { background: var(--sc-accent); box-shadow: 0 0 0 1cqw color-mix(in oklab, var(--sc-accent) 25%, transparent); }
.ecran-pro__infos { margin-inline-start: auto; font-size: 2.8cqw; color: var(--sc-ink-soft); white-space: nowrap; }
.ecran-pro__actions { display: flex; align-items: center; gap: 2.4cqw; }
.ecran-pro__actions > span { display: grid; place-items: center; height: 11cqw; border-radius: 99px; font-size: 3.4cqw; font-weight: 650; }
.ecran-pro__refus { flex: none; width: 11cqw; background: hsl(0 0% 100% / 0.08); color: #FF453A; }
.ecran-pro__contre { flex: 1; padding-inline: 3cqw; color: #FFD60A; background: color-mix(in oklab, #FFD60A 14%, transparent); border: 1px solid color-mix(in oklab, #FFD60A 40%, transparent); transition: opacity 240ms var(--sc-ease-out); }
.ecran-pro__accepter { flex: 1.3; display: flex !important; gap: 2cqw; padding-inline: 3cqw; background: #fff; color: #0A0B0D; transition: background-color 240ms var(--sc-ease-out), color 240ms var(--sc-ease-out); }
.ecran-pro__coche { width: 3.4cqw; height: 3.4cqw; border-radius: 50%; border: 0.5cqw solid currentColor; }
/* À la fin du pic : la course est acceptée, l'itinéraire apparaît sur la vraie carte. */
.demande--acceptee .ecran-pro__accepter { background: var(--cash); color: #04140A; }
.demande--acceptee .ecran-pro__contre, .demande--acceptee .ecran-pro__refus { opacity: 0.35; }
.demande--acceptee .anneau { background: var(--cash); }
.demande--acceptee .ecran-pro__carte--route { opacity: 1; }
/* Acceptée : la modale se ferme, comme dans l'app ; le voile part et l'itinéraire se voit. */
.ecran-pro__voile { transition: opacity 320ms var(--sc-ease-out); }
.demande--acceptee .ecran-pro__voile { opacity: 0; }

/* Les annotations : ce que chaque partie de l'écran fait. Elles arrivent avec la demande. */
.annotations { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.4rem, 4vh, 2.4rem); align-self: end; margin-bottom: 14vh; opacity: var(--k); }
.annotation { position: relative; max-width: 19ch; padding-inline-start: 46px; font-size: var(--sc-t-sm); line-height: 1.45; color: color-mix(in oklab, var(--sc-ink) 82%, transparent); }
.annotation::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.72em; width: 34px; height: 1px; background: color-mix(in oklab, var(--sc-accent) 70%, transparent); }
.annotation::after { content: ""; position: absolute; inset-inline-start: 0; top: calc(0.72em - 2.5px); width: 6px; height: 6px; border-radius: 50%; background: var(--sc-accent); translate: -3px 0; }

/* -------------------------------------- 3 · 06:34, la bande cinéma --- */
.plaque { display: grid; gap: clamp(1.2rem, 3vh, 2rem); padding-top: 3.5rem; }
.media__cadre--cinema { aspect-ratio: 21 / 9; max-height: 58svh; }
.plaque__texte { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: end; }
.plaque__texte .heure { font-size: clamp(2.6rem, 4.6vw, 4.2rem); margin-bottom: var(--sc-3); }
.plaque__texte .texte__corps { margin: 0; }

/* -------------------------------------------- 4 · 06:49, le détail --- */
.detail { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.detail__montant { margin: 0 0 var(--sc-6); display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 var(--sc-4); font: 700 clamp(3rem, 6.4vw, 5.6rem)/1 var(--sc-font-display); letter-spacing: -0.03em; color: var(--cash); font-variant-numeric: tabular-nums; }
.detail__montant small { font: 500 var(--sc-t-base) var(--sc-font-text); letter-spacing: 0; color: var(--sc-ink-soft); }
.media__cadre--carre { aspect-ratio: 1 / 1; }
.recu-ligne { margin: var(--sc-6) 0 0; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 999px; background: var(--verre-champ); border: 1px solid var(--verre-bord); font-size: var(--sc-t-sm); color: var(--cash); font-weight: 600; }
.cash { width: 10px; height: 10px; border-radius: 50%; background: var(--cash); box-shadow: 0 0 0 4px color-mix(in oklab, var(--cash) 22%, transparent); }

/* ------------------------------- 5 · 07:00, ta matinée en vrais tarifs --- */
.ch5__bloc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.courses { grid-column: 2; margin: 0; padding: 0; border: 0; display: grid; gap: 8px; min-width: 0; }
.course { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 16px; background: var(--verre-champ); border: 1px solid var(--verre-bord); cursor: pointer; transition: background-color 160ms var(--sc-ease-out), border-color 160ms var(--sc-ease-out); }
.course:active { translate: 0 1px; }
.course input { width: 20px; height: 20px; margin: 0; accent-color: var(--sc-accent); }
.course:has(input:checked) { background: color-mix(in oklab, var(--sc-accent) 9%, transparent); border-color: color-mix(in oklab, var(--sc-accent) 38%, transparent); }
@media (hover: hover) and (pointer: fine) { .course:hover { border-color: color-mix(in oklab, var(--sc-accent) 30%, transparent); } }
.course__heure { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.course__trajet { min-width: 0; display: flex; flex-wrap: wrap; gap: 0 8px; font-size: var(--sc-t-sm); }
.fleche { color: var(--sc-ink-soft); }
.course__infos { font-size: var(--sc-t-xs); color: var(--sc-ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
.course__prix { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.total { grid-column: 2; margin-top: 6px; padding: 18px 20px; border-radius: 20px; background: var(--verre); border: 1px solid var(--verre-bord); box-shadow: var(--sc-edge); }
.total__libelle { margin: 0; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; }
.total__montant { margin: 6px 0 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 14px; font: 700 clamp(2.4rem, 5vw, 3.6rem)/1 var(--sc-font-display); letter-spacing: -0.02em; color: var(--cash); font-variant-numeric: tabular-nums; }
.total__montant small { font: 500 var(--sc-t-sm) var(--sc-font-text); color: var(--sc-ink-soft); letter-spacing: 0; }
.total__source { margin: 12px 0 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
/* La frise de la matinée, de 6 h à 9 h 30 : les courses cochées à leur heure. */
.frise { margin-bottom: 18px; }
.frise__piste { position: relative; height: 10px; border-radius: 99px; background: hsl(0 0% 100% / 0.06); }
.frise__course { position: absolute; top: 0; bottom: 0; inset-inline-start: calc(var(--debut, 0) * 100%); width: max(4px, calc(var(--duree, 0) * 100%)); border-radius: 99px; background: hsl(0 0% 100% / 0.16); transition: background-color 200ms var(--sc-ease-out); }
.frise__course.choisie { background: var(--sc-accent); }
.frise__heures { position: relative; height: 1.3em; margin: 8px 0 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); font-variant-numeric: tabular-nums; }
.frise__heures span { position: absolute; inset-inline-start: calc(var(--m, 0) * 100%); translate: -50% 0; }
.frise__heures span:first-child { translate: none; }
[dir="rtl"] .frise__heures span { translate: 50% 0; }
[dir="rtl"] .frise__heures span:first-child { translate: none; }

/* ------------------------------------ 6 · la sécurité, liste à définitions --- */
.securite { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.securite__titre { max-width: 14ch; }
.securite__liste { margin: 0; display: grid; }
.securite__ligne { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: clamp(1rem, 3vw, 2.5rem); padding-block: 1.4rem; border-top: 1px solid var(--verre-bord); }
.securite__ligne:last-child { border-bottom: 1px solid var(--verre-bord); }
.securite__ligne dt { font: 650 var(--sc-t-lg)/1.25 var(--sc-font-display); }
.securite__ligne dd { margin: 0; max-width: 42ch; line-height: 1.6; color: color-mix(in oklab, var(--sc-ink) 78%, transparent); }

/* ---------------------------------------------------------- colophon --- */
.colophon { padding-block: clamp(4rem, 10vh, 7rem) clamp(3rem, 8vh, 5rem); background: var(--sc-canvas); border-top: 1px solid var(--verre-bord); }
.colophon__bandeau { margin: 0 auto clamp(2.5rem, 7vh, 4.5rem); }
.media__cadre--bandeau { aspect-ratio: 21 / 8; }
.media__cadre--bandeau img { object-position: 70% 45%; }
.colophon__bloc { max-width: calc(52rem + 2 * var(--sc-gutter)); margin-inline: 0 auto; }
.colophon__appel { margin: 0; font: 600 clamp(1.6rem, 3.4vw, 2.6rem)/1.25 var(--sc-font-display); letter-spacing: -0.015em; text-wrap: pretty; }
.colophon__appel a { color: var(--sc-ink); text-decoration: underline; text-decoration-color: var(--sc-accent); text-decoration-thickness: 2px; text-underline-offset: 6px; transition: color 160ms var(--sc-ease-out); }
@media (hover: hover) and (pointer: fine) { .colophon__appel a:hover { color: var(--sc-accent); } }
.colophon__note, .colophon__mention { margin: var(--sc-5) 0 0; max-width: 52ch; font-size: var(--sc-t-sm); color: var(--sc-ink-soft); line-height: 1.6; }
.colophon__mention { margin-top: var(--sc-3); }
.colophon__pied { margin: var(--sc-8) 0 0; display: flex; flex-wrap: wrap; gap: var(--sc-2) var(--sc-5); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); }
.colophon__pied a { color: inherit; text-underline-offset: 3px; }

/* Sous mouvement réduit : la demande apparaît sur place, rien ne glisse ni ne respire. */
@media (prefers-reduced-motion: reduce) {
  .ecran-pro__feuille--demande { transform: none; opacity: var(--k); }
  .ecran-pro__attente { animation: none; }
}

/* ----------------------------------------------------------- mobile --- */
@media (max-width: 860px) {
  .folio { gap: 6px; }
  .folio__marque span { display: none; }
  .folio__marque { padding: 8px 10px; }
  .folio__chapitre { padding: 8px 11px; font-size: var(--sc-t-xs); }
  /* Sur téléphone, l'heure suffit : le titre tronqué gênait plus qu'il n'aidait. */
  .folio__chapitre #folio-titre { display: none; }
  .folio__chapitre--sans-heure { display: none; }
  .langues button { min-width: 30px; min-height: 30px; padding: 0 6px; }
  .folio__inscription { padding: 8px 12px; font-size: var(--sc-t-xs); }

  .titre__bloc { padding-block: 16vh 10vh; }
  .planche, .detail, .ch5__bloc, .securite, .plaque__texte { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .courses, .total { grid-column: 1; }
  .media__cadre--haute { aspect-ratio: 4 / 3; }
  .media__cadre--medaillon { width: 38%; inset-inline-end: 4%; bottom: -8%; outline-width: 4px; }
  /* Le médaillon descend sur la ligne de la légende : elle s'arrête avant lui. */
  .ch1__media figcaption { max-width: 52%; }
  .ch1__media { margin-bottom: 2.5rem; }

  .pic { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; align-content: center; justify-items: center; padding-top: 4.2rem; }
  .pic__texte { justify-self: stretch; }
  .pic__texte .texte__corps, .annotations { display: none; }
  .ch2 .heure { font-size: 2.4rem; margin-bottom: 0.3rem; }
  .ch2 .texte__h2 { font-size: 1.7rem; }
  .pic__tel { width: min(66vw, calc((100svh - 15rem) / 2.22)); }

  .plaque { padding-top: 4.2rem; }
  .media__cadre--cinema { aspect-ratio: 16 / 10; }
  .plaque__texte { gap: 1rem; }
  .plaque__texte .heure { font-size: 2.4rem; }

  .detail__media { order: -1; }
  .media__cadre--carre { aspect-ratio: 4 / 3; }

  .course { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "case trajet prix" "case infos heure"; gap: 4px 12px; }
  .course input { grid-area: case; }
  .course__trajet { grid-area: trajet; }
  .course__prix { grid-area: prix; }
  .course__infos { grid-area: infos; }
  .course__heure { grid-area: heure; justify-self: end; font-size: var(--sc-t-xs); }

  .securite__ligne { grid-template-columns: minmax(0, 1fr); gap: 0.5rem; }
  .media__cadre--bandeau { aspect-ratio: 16 / 10; }
}

/* ------------------------------------------- l'arabe, de droite à gauche --- */
[dir="rtl"] .fleche { display: inline-block; scale: -1 1; }
html[lang="ar"] * { letter-spacing: 0 !important; }
html[lang="ar"] .titre__h1, html[lang="ar"] .texte__h2 { line-height: 1.25; }
html[lang="ar"] .surtitre { text-transform: none; }