/* ==========================================================================
   Oui Oui Car's — pages statiques v5 « nuit seule » (lot SOCLE)
   Devis, partenaires, mentions légales, CGV, confidentialité, accessibilité,
   lycéens, établissements, paiement, facture, 404.
   En-têtes photo : .tete-photo (base.css). Uniquement des jetons de tokens.css.
   Tout est en nuit à l'écran : les « papiers » (devis, note, facture, tarif) sont
   des documents sombres posés sur une surface plus haute ; à l'impression, les
   jetons s'inversent (tokens.css) et ils sortent sur papier blanc.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. En-tête de page sans photo (pages juridiques, devis, paiement)
   -------------------------------------------------------------------------- */
/* Nuit : bandeau un cran plus profond que la page, avec une lueur verte très basse du côté opposé au titre
   et un court filet vert signal posé sur la couture avec la section suivante, à l'aplomb du logo.
   La lueur est une ellipse « closest-side » : elle s'éteint exactement avant le haut, le bas et le bord droit
   du bandeau (aucun bord rectangulaire visible), avec une décroissance adoucie. */
.page-tete {
  position: relative;
  isolation: isolate;
  padding: clamp(56px, 8vw, 120px) 0 clamp(48px, 6vw, 88px);
  border-bottom: 1px solid var(--trait);
  background:
    radial-gradient(closest-side at 80% 50%, var(--lueur-verte), var(--lueur-verte-mi) 42%, transparent),
    linear-gradient(180deg, var(--nuit), var(--noir));
}
.page-tete::after {
  content: "";
  position: absolute;
  left: max(var(--bord-conteneur), env(safe-area-inset-left));
  bottom: -1px;
  width: 56px;
  height: 2px;
  background: var(--vert-signal);
}
.page-tete__grille { display: grid; gap: var(--s-6); align-items: end; }
.page-tete__texte { display: grid; justify-items: start; gap: var(--s-5); max-width: 860px; }
.page-tete h1 { max-width: 18ch; }
.page-tete .chapeau { color: var(--texte-2); }
.page-tete__meta {
  display: grid;
  gap: 0;
  margin: 0;
  border-top: 1px solid var(--trait);
  font-size: var(--fs-s);
}
.page-tete__meta > div { display: flex; justify-content: space-between; gap: var(--s-4); padding: 12px 0; border-bottom: 1px solid var(--trait); }
.page-tete__meta dt { color: var(--texte-2); }
.page-tete__meta dd { margin: 0; text-align: right; font-weight: 700; }
.page-tete__actions { margin-top: var(--s-2); }
.page-tete--compacte { padding-bottom: clamp(32px, 5vw, 56px); }
@media (min-width: 1000px) {
  .page-tete__grille { grid-template-columns: minmax(0, 1fr) 300px; column-gap: var(--s-8); }
}
.page-tete > *, .page-tete__texte > * { animation: page-tete-entree var(--d-revele) var(--e-cinema) both; }
.page-tete__texte > :nth-child(2) { animation-delay: 70ms; }
.page-tete__texte > :nth-child(n+3) { animation-delay: 140ms; }
@keyframes page-tete-entree { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Tête de section commune aux pages statiques */
.section-tete { display: grid; gap: var(--s-4); max-width: 760px; margin-bottom: clamp(32px, 5vw, 64px); }
.section-tete h2 { max-width: 20ch; }
.section-tete > p:not(.surtitre) { color: var(--texte-2); max-width: 62ch; }
.section-tete--large { max-width: none; }
@media (min-width: 1000px) {
  .section-tete--cote { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; max-width: none; column-gap: var(--s-8); }
  .section-tete--cote > .surtitre { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   2. Corps des pages juridiques : sommaire collant + prose
   -------------------------------------------------------------------------- */
.page-corps { padding-block: clamp(48px, 7vw, 112px); }
.page-corps__grille { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 1000px) {
  .page-corps__grille { grid-template-columns: 260px minmax(0, 1fr); gap: var(--s-9); }
  .sommaire { position: sticky; top: calc(var(--h-entete) + var(--s-6)); max-height: calc(100vh - var(--h-entete) - 64px); overflow: auto; }
}
.sommaire__replier > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 48px;
  padding: 0 var(--s-4);
  border-radius: var(--r-bouton);
  border: 1px solid var(--trait);
  background: var(--surface);
  font-family: var(--police-affichage);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.sommaire__replier > summary::-webkit-details-marker { display: none; }
.sommaire__replier > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform var(--d-moyen) var(--e-cinema);
}
.sommaire__replier[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
@media (min-width: 1000px) {
  .sommaire__replier > summary {
    min-height: 0;
    padding: 0 0 var(--s-3);
    border: 0;
    border-bottom: 1px solid var(--trait);
    border-radius: 0;
    background: none;
    font-size: var(--fs-mention);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--texte-2);
    pointer-events: none;
  }
  .sommaire__replier > summary::after { display: none; }
}
.sommaire ol { display: grid; gap: 0; margin-top: var(--s-2); padding: 0; list-style: none; counter-reset: sommaire; }
.sommaire a {
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: baseline;
  gap: 8px;
  min-height: 40px;
  padding: 9px 0;
  border-bottom: 1px solid var(--trait);
  color: var(--texte-2);
  font-size: var(--fs-s);
  line-height: 1.35;
  text-decoration: none;
  transition: color var(--d-court) var(--e-douce);
}
.sommaire a::before {
  counter-increment: sommaire;
  content: counter(sommaire, decimal-leading-zero);
  font-family: var(--police-affichage);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: var(--texte-2);
}
.sommaire a:hover { color: var(--texte); }
.sommaire a:focus-visible { outline-offset: -2px; border-radius: var(--r-petit); }
.sommaire a[aria-current="true"] { color: var(--texte); font-weight: 700; }
.sommaire a[aria-current="true"]::before { color: var(--lien); }

.juridique { max-width: 74ch; }
.juridique > section { scroll-margin-top: calc(var(--h-entete) + var(--s-5)); }
.juridique > section + section { margin-top: clamp(40px, 6vw, 72px); padding-top: clamp(32px, 5vw, 56px); border-top: 1px solid var(--trait); }
.juridique h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); margin-bottom: var(--s-4); }
.juridique h3 { font-family: var(--police-affichage); font-weight: 600; font-size: var(--fs-l); line-height: 1.3; margin-top: var(--s-6); margin-bottom: var(--s-2); }
.juridique p + p, .juridique p + ul, .juridique ul + p, .juridique p + ol, .juridique ol + p, .juridique dl + p, .juridique p + dl,
.juridique .tableau + p, .juridique p + .tableau, .juridique .encart + p, .juridique p + .encart, .juridique ul + ul { margin-top: 1em; }
.juridique :is(ul, ol) { padding-left: 1.4em; }
.juridique li + li { margin-top: .5em; }
.juridique ul { list-style: none; padding-left: 1.5em; }
.juridique ul > li { position: relative; }
.juridique ul > li::before {
  content: "";
  position: absolute;
  left: -1.3em;
  top: .8em;
  width: .7em;
  height: 1px;
  background: currentColor;
  opacity: .55;
}
.juridique .tableau { margin-top: var(--s-4); }
.bandeau-modele { margin-bottom: var(--s-7); max-width: 74ch; }
.bandeau-modele p { margin: 0; }

/* Fin de page juridique */
.page-fin { padding: 0 0 clamp(48px, 8vw, 96px); }
@media (min-width: 1000px) {
  .page-fin .conteneur { padding-left: calc(max(var(--gouttiere), env(safe-area-inset-left)) + 260px + var(--s-9)); }
}

/* --------------------------------------------------------------------------
   3. Document (devis partagé, récapitulatif avant paiement) : papier blanc
   -------------------------------------------------------------------------- */
.devis-page { padding-block: clamp(40px, 6vw, 88px) clamp(64px, 9vw, 128px); }
.devis-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); align-items: start; }
.devis-grille > * { min-width: 0; }
@media (min-width: 1000px) { .devis-grille { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: var(--s-8); } }

.devis-etat { display: grid; justify-items: start; gap: var(--s-4); max-width: 60ch; }
.devis-etat__titre { font-size: var(--fs-h3); }
.devis-etat[data-ton="attente"] .devis-etat__titre::after {
  content: "";
  display: inline-block;
  width: .4em;
  height: .4em;
  margin-left: .4em;
  border-radius: 50%;
  background: var(--vert-signal);
  vertical-align: middle;
  animation: clignotant 1.6s var(--e-douce) infinite;
}

.ticket-ombre { filter: none; }
/* Document (devis, note avant paiement) : surface plus haute, filet fin, liseré vert en tête */
.ticket {
  --fond: var(--surface-2); --surface: var(--surface-3); --texte: var(--blanc-chaud); --texte-2: var(--gris-texte);
  --trait: var(--filet-2); --lien: var(--vert-signal); --anneau: var(--vert-signal);
  position: relative;
  padding: clamp(28px, 5vw, 48px);
  border-radius: var(--r-carte);
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2) 220px);
  color: var(--texte);
  color-scheme: dark;
  box-shadow: inset 0 0 0 1px var(--filet-2), inset 0 2px 0 var(--vert-signal), var(--ombre-haute);
}
.ticket__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3) var(--s-4);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--trait);
}
.ticket__marque { display: inline-flex; align-items: center; }
.ticket__marque ooc-logo { font-size: 14px; }
.ticket__ref { font-size: var(--fs-s); color: var(--texte-2); font-variant-numeric: tabular-nums; }
.ticket__formule { margin-top: var(--s-6); font-size: clamp(26px, 1rem + 2vw, 38px); line-height: 1.05; }
.ticket__details { margin-top: var(--s-2); color: var(--texte-2); }
.ticket__lignes { display: grid; gap: 12px; margin: var(--s-6) 0 0; padding: 0; list-style: none; }
.ticket__ligne { display: grid; grid-template-columns: minmax(0, auto) 1fr auto; align-items: baseline; gap: 10px; line-height: 1.4; }
.ticket__pointilles { align-self: end; margin-bottom: .34em; border-bottom: 1px dotted var(--filet-fort); }
.ticket__montant { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ticket__total {
  display: grid;
  gap: 6px;
  margin-top: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--texte);
}
.ticket__total-libelle { font-family: var(--police-affichage); font-weight: 600; font-size: var(--fs-mention); letter-spacing: .14em; text-transform: uppercase; color: var(--texte-2); }
.ticket__total-valeur {
  font-family: var(--police-affichage);
  font-stretch: var(--largeur-titre);
  font-weight: 600;
  font-size: clamp(44px, 2rem + 3vw, 64px);
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.ticket__total-valeur ooc-odometre { font-size: inherit; }
.ticket__hors { font-size: var(--fs-s); line-height: 1.45; color: var(--texte-2); }
.ticket__note { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--trait); font-size: var(--fs-mention); line-height: 1.5; color: var(--texte-2); }
.tampon { margin-top: var(--s-3); }

.devis-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
.devis-actions > * { min-width: 0; }
.devis-actions__carte { display: grid; gap: var(--s-4); }
.devis-actions__titre { font-size: var(--fs-h3); }
.devis-actions .grappe .btn { flex: 1 1 200px; }
.devis-actions .grappe .btn--fantome { flex: 0 1 auto; }
.liste-non-compris { display: grid; gap: 12px; padding: 0; list-style: none; }
.liste-non-compris li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start; line-height: 1.5; }
.liste-non-compris li::before { content: ""; width: 12px; height: 1px; margin-top: .78em; background: currentColor; opacity: .6; }
.retour-copie { min-height: 1.5em; font-weight: 600; color: var(--texte); }

@media print {
  .devis-actions, .page-tete { display: none !important; }
  .devis-grille { display: block; }
  .ticket { background: var(--papier); box-shadow: 0 0 0 1px var(--trait-papier); }
}

/* --------------------------------------------------------------------------
   4. Partenaires
   -------------------------------------------------------------------------- */
.trois-reponses { display: grid; gap: var(--s-4); }
@media (min-width: 860px) { .trois-reponses { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.trois-reponses .carte { display: grid; align-content: start; gap: var(--s-3); }
.trois-reponses h3 { font-size: var(--fs-l); }
.carte__index {
  font-family: var(--police-affichage);
  font-weight: 500;
  font-size: var(--fs-mention);
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
  color: var(--texte-2);
}

.sorties-liste { display: grid; gap: var(--s-5); }
@media (min-width: 900px) { .sorties-liste { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }
.sortie-bloc {
  display: grid;
  align-content: start;
  gap: var(--s-4);
  scroll-margin-top: calc(var(--h-entete) + var(--s-5));
}
.sortie-bloc:target { box-shadow: var(--ombre), 0 0 0 2px var(--anneau); }
.panneau-sortie { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; padding-bottom: var(--s-4); border-bottom: 1px solid var(--trait); }
.panneau-sortie__numero {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-bouton);
  background: var(--bleu-sortie);
  color: var(--blanc);
  font-family: var(--police-affichage);
  font-weight: 700;
  font-size: 16px;
}
.panneau-sortie__nom { display: grid; font-size: var(--fs-l); line-height: 1.2; }
.panneau-sortie__sous { font-family: var(--police-texte); font-weight: 400; font-size: var(--fs-s); color: var(--texte-2); }
.panneau-sortie__km { display: none; }
.sortie-bloc__partenaires { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.sortie-bloc__vide { color: var(--texte-2); }
.sortie-bloc .btn--sortie { justify-self: start; }

.panneau-parking { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; padding-bottom: var(--s-4); border-bottom: 1px solid var(--trait); }
.panneau-parking__p {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-bouton);
  background: var(--brun-parking);
  color: var(--blanc);
  font-family: var(--police-affichage);
  font-weight: 700;
  font-size: 18px;
}
.panneau-parking__nom { font-size: var(--fs-l); line-height: 1.2; }
.bloc-parking { display: grid; gap: var(--s-4); max-width: 880px; }

/* Étapes numérotées (01, 02, 03) */
.etapes, .etapes-clic { display: grid; gap: var(--s-5); padding: 0; list-style: none; counter-reset: etape; }
@media (min-width: 860px) { .etapes, .etapes-clic { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); } }
.etapes > li, .etapes-clic > li { position: relative; display: grid; align-content: start; gap: var(--s-2); padding-top: var(--s-5); border-top: 1px solid var(--texte); line-height: 1.55; }
.etapes > li::before, .etapes-clic > li::before {
  counter-increment: etape;
  content: counter(etape, decimal-leading-zero);
  font-family: var(--police-affichage);
  font-weight: 500;
  font-size: var(--fs-mention);
  letter-spacing: .1em;
  color: var(--texte-2);
}
.etapes strong, .etapes-clic strong { display: block; font-family: var(--police-affichage); font-weight: 600; font-size: var(--fs-l); line-height: 1.25; }
.note-bas { margin-top: var(--s-6); max-width: 70ch; color: var(--texte-2); }
.encart--pedago { margin-top: var(--s-7); max-width: 76ch; }
.encart--pedago h3 + p { margin-top: .6em; }
.encart--pedago p + p { margin-top: .8em; }

/* Bandeau photo pleine largeur entre deux sections ; légende en bas à droite, sur le bord du conteneur,
   comme partout ailleurs (.tete-photo__legende). --titre : titre posé en bas à gauche. */
.bandeau-photo { position: relative; height: clamp(280px, 48vw, 620px); }
.bandeau-photo .media__voile { background: linear-gradient(to top, var(--noir-a50), var(--noir-a0) 50%); }
.bandeau-photo__legende {
  position: absolute;
  right: max(var(--bord-conteneur), env(safe-area-inset-right));
  bottom: var(--s-4);
  z-index: 1;
  max-width: 40ch;
  font-size: 12px;
  line-height: 1.4;
  color: var(--creme-a70);
  text-align: right;
}
.bandeau-photo--titre {
  display: grid;
  align-items: end;
  height: auto;
  min-height: clamp(460px, 62vw, 760px);
  padding-block: clamp(56px, 7vw, 104px);
  color: var(--blanc-chaud);
}
.bandeau-photo--titre .media__voile {
  background: linear-gradient(to top, var(--noir-a86) 0%, var(--noir-a50) 36%, var(--noir-a0) 64%);
}
@media (min-width: 900px) {
  .bandeau-photo--titre .media__voile {
    background: linear-gradient(to top, var(--noir-a80) 0%, var(--noir-a30) 40%, var(--noir-a0) 62%),
                linear-gradient(90deg, var(--noir-a60) 0%, var(--noir-a0) 55%);
  }
}
.bandeau-photo__texte { position: relative; z-index: 1; display: grid; justify-items: start; gap: var(--s-4); }
.bandeau-photo__texte .surtitre { color: var(--creme-a70); }
.bandeau-photo__texte h2 { max-width: 15ch; }
.bandeau-photo__chapeau { max-width: 46ch; font-size: var(--fs-l); line-height: 1.5; color: var(--blanc-chaud); }
@media (max-width: 699.98px) {
  .bandeau-photo--titre { padding-bottom: 64px; }
  .bandeau-photo__legende { left: var(--gouttiere); right: var(--gouttiere); text-align: left; max-width: none; bottom: var(--s-4); }
}

/* --------------------------------------------------------------------------
   5. 404 : écran scindé (texte sur noir, photo verticale du Vieux-Port), liens utiles
   Téléphone : la photo d'abord (la voiture et Notre-Dame de la Garde), le texte dessous.
   Dès 900 px : la photo occupe la moitié droite, fondue dans le noir ; le texte reste sur la verticale
   du conteneur, comme le logo.
   -------------------------------------------------------------------------- */
.erreur-tete { position: relative; isolation: isolate; background: var(--noir); color: var(--blanc-chaud); overflow: clip; }
.erreur-tete__media { position: relative; height: min(56svh, 520px); margin: 0; background: var(--noir); }
.erreur-tete__media picture, .erreur-tete__media img { width: 100%; height: 100%; }
.erreur-tete__media img { object-fit: cover; object-position: 50% 78%; animation: tete-photo-approche 2400ms var(--e-cinema) both; transform-origin: 50% 78%; }
.erreur-tete__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, var(--noir) 0%, var(--noir-a0) 34%);
}
.erreur-tete__legende {
  position: absolute;
  right: max(var(--gouttiere), env(safe-area-inset-right));
  bottom: var(--s-4);
  z-index: 1;
  max-width: 34ch;
  font-size: 12px;
  line-height: 1.4;
  color: var(--creme-a70);
  text-align: right;
}
.erreur-tete__conteneur { position: relative; z-index: 1; }
.erreur-tete__texte { display: grid; justify-items: start; gap: var(--s-5); padding-block: var(--s-6) clamp(64px, 9vw, 120px); }
.erreur-tete__texte > * { animation: tete-photo-texte var(--d-revele) var(--e-cinema) both; }
.erreur-tete__texte > :nth-child(2) { animation-delay: 80ms; }
.erreur-tete__texte > :nth-child(3) { animation-delay: 160ms; }
.erreur-tete__texte > :nth-child(n+4) { animation-delay: 240ms; }
.erreur-tete__titre { max-width: 12ch; font-size: var(--fs-h1); }
.erreur-tete__chapeau { max-width: 44ch; font-size: var(--fs-l); line-height: 1.5; color: var(--blanc-chaud); }
.erreur-tete__actions { margin-top: var(--s-2); }
@media (max-width: 599.98px) { .erreur-tete__actions { width: 100%; } .erreur-tete__actions .btn { flex: 1 1 100%; } }
@media (min-width: 900px) {
  .erreur-tete { display: grid; align-items: center; min-height: calc(100svh - var(--h-entete)); }
  /* La photo se fond dans la nuit par un MASQUE (pas un dégradé posé dessus) : aucune arête à sa gauche.
     Courbe en S très douce (transparent → opaque sur 54 % de la largeur, départ presque nul) ; le voile du bas garde la légende lisible. */
  .erreur-tete__media {
    position: absolute; inset: 0 0 0 50%; height: auto;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgb(0 0 0 / .02) 6%, rgb(0 0 0 / .07) 12%, rgb(0 0 0 / .16) 18%, rgb(0 0 0 / .3) 24%, rgb(0 0 0 / .48) 30%, rgb(0 0 0 / .68) 36%, rgb(0 0 0 / .85) 42%, rgb(0 0 0 / .96) 48%, #000 54%);
    mask-image: linear-gradient(to right, transparent 0%, rgb(0 0 0 / .02) 6%, rgb(0 0 0 / .07) 12%, rgb(0 0 0 / .16) 18%, rgb(0 0 0 / .3) 24%, rgb(0 0 0 / .48) 30%, rgb(0 0 0 / .68) 36%, rgb(0 0 0 / .85) 42%, rgb(0 0 0 / .96) 48%, #000 54%);
  }
  .erreur-tete__media::after { background: linear-gradient(to top, var(--noir-a60) 0%, var(--noir-a0) 24%); }
  .erreur-tete__media img { object-position: 50% 82%; }
  .erreur-tete__legende { right: max(var(--gouttiere), env(safe-area-inset-right), (100vw - var(--largeur-max)) / 2); }
  .erreur-tete__texte { max-width: min(600px, 50vw - var(--gouttiere) - 56px); padding-block: var(--s-8); }
}
.erreur-code { font-family: var(--police-affichage); font-weight: 600; font-size: var(--fs-mention); letter-spacing: .14em; text-transform: uppercase; color: var(--creme-a70); }
.autres-routes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
  gap: 0 var(--s-5);
  width: 100%;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--creme-a12);
}
.autres-routes li { border-bottom: 1px solid var(--creme-a12); }
.autres-routes a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 48px;
  color: var(--blanc-chaud);
  font-family: var(--police-affichage);
  font-weight: 500;
  font-size: 15.5px;
  text-decoration: none;
}
.autres-routes a::after { content: "→"; content: "→" / ""; color: var(--creme-a70); transition: transform var(--d-moyen) var(--e-cinema); }
.autres-routes a:hover { text-decoration: underline; text-underline-offset: .22em; }
.autres-routes a:hover::after { transform: translateX(3px); color: var(--blanc-chaud); }
.erreur-nav { display: grid; gap: var(--s-3); width: 100%; margin-top: var(--s-5); }

/* ==========================================================================
   Lycéens, établissements, paiement du parent, facture, rétractation
   ========================================================================== */

/* --------------------------------------------------------------------------
   6. Éléments communs
   -------------------------------------------------------------------------- */
.ticket__hors { font-size: var(--fs-s); }
/* Pas d'affiliation au milieu d'un paiement ou d'une facture, ni sur la page des établissements scolaires
   (personnels de l'Éducation nationale : aucune promotion, SPEC-EVOLUTIONS §D) */
html:is([data-page="paiement"], [data-page="facture"], [data-page="etablissements"]) .pastille-sorties,
html:is([data-page="paiement"], [data-page="facture"], [data-page="etablissements"]) .barre-bas__lien--sorties { display: none !important; }

.section-lycee { padding-block: clamp(72px, 10vw, 144px); }
/* Section qui prolonge la précédente dans la même teinte : moins d'air au-dessus, un filet pour séparer */
.section-lycee--suite { padding-top: 0; }
.section-lycee--suite > .conteneur { position: relative; padding-top: clamp(56px, 7vw, 104px); }
.section-lycee--suite > .conteneur::before {
  content: "";
  position: absolute;
  top: 0;
  left: max(var(--gouttiere), env(safe-area-inset-left));
  right: max(var(--gouttiere), env(safe-area-inset-right));
  height: 1px;
  background: var(--trait);
}
/* Textes secondaires : 14 px au moins sur cette page (lecture par des lycéens et des parents) */
html[data-page="lyceens"] main .mention { font-size: var(--fs-s); }
.section-lycee__tete { display: grid; gap: var(--s-4); max-width: 760px; margin-bottom: clamp(32px, 5vw, 64px); }
.section-lycee__tete > p:not(.surtitre) { color: var(--texte-2); }
.section-lycee__source { margin-top: var(--s-6); max-width: 72ch; }
.section-lycee__suite { margin-top: var(--s-6); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; color: var(--texte-2); }
.grille-deux { display: grid; gap: var(--s-7); align-items: start; }
.grille-deux > * { min-width: 0; }
@media (min-width: 960px) {
  .grille-deux { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: var(--s-8); }
  .grille-deux--formulaire { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
}

/* Plier / déplier (details) */
.plier { border-top: 1px solid var(--trait); padding-top: var(--s-2); }
.plier > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 44px;
  font-family: var(--police-affichage);
  font-weight: 600;
  color: var(--texte);
  list-style: none;
  cursor: pointer;
}
.plier > summary::-webkit-details-marker { display: none; }
.plier > summary::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform var(--d-moyen) var(--e-cinema);
}
.plier[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.plier > p { margin-top: var(--s-2); color: var(--texte-2); }

/* Mentions légales d'une page d'offre (nom, adresse, agrément, prix TTC) */
.mentions-offre {
  display: grid;
  gap: 4px;
  margin-top: var(--s-8);
  padding-top: var(--s-4);
  border-top: 1px solid var(--trait);
  font-size: var(--fs-mention);
  line-height: 1.55;
  color: var(--texte-2);
}
.mentions-offre strong { color: var(--texte); }

/* --------------------------------------------------------------------------
   7. Lycéens
   -------------------------------------------------------------------------- */
.ages { display: grid; gap: var(--s-5); padding: 0; list-style: none; }
@media (min-width: 900px) { .ages { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.age { display: grid; align-content: start; gap: var(--s-3); }
.age__chiffre {
  display: flex;
  align-items: baseline;
  gap: .18em;
  font-family: var(--police-affichage);
  font-stretch: var(--largeur-titre);
  font-weight: 600;
  font-size: clamp(56px, 2rem + 4vw, 88px);
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--texte);
}
.age__chiffre span { font-size: .28em; letter-spacing: 0; color: var(--texte-2); font-weight: 500; }
.age h3 { font-size: var(--fs-l); line-height: 1.25; padding-top: var(--s-3); border-top: 1px solid var(--trait); }
.age p { color: var(--texte-2); }
.age p strong { color: var(--texte); }

.creneaux-lycee { display: grid; gap: var(--s-4); padding: 0; list-style: none; }
@media (min-width: 800px) { .creneaux-lycee { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.creneau-lycee {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--s-4);
  row-gap: 2px;
  align-items: center;
  padding: var(--s-5);
  border-radius: var(--r-carte);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--trait);
}
.creneau-lycee .i { grid-row: 1 / 3; width: 28px; height: 28px; color: var(--lien); }
.creneau-lycee__quand { font-family: var(--police-affichage); font-weight: 600; font-size: clamp(17px, 1rem + .4vw, 20px); line-height: 1.2; }
.creneau-lycee__texte { color: var(--texte-2); line-height: 1.45; font-size: var(--fs-s); }
.depart-lycee { display: grid; gap: var(--s-4); margin-top: var(--s-5); }
.depart-lycee__tete { display: flex; align-items: center; gap: var(--s-3); }
.depart-lycee__tete .i { width: 26px; height: 26px; color: var(--lien); }
.depart-lycee__corps { display: grid; gap: var(--s-3); color: var(--texte-2); }
@media (min-width: 900px) {
  .depart-lycee { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; column-gap: var(--s-7); }
  .depart-lycee__corps { padding-top: 2px; }
}
.depart-lycee__liste { display: grid; gap: var(--s-3); padding: 0; list-style: none; }
.depart-lycee__lycee { display: grid; gap: 2px; padding-left: var(--s-4); border-left: 2px solid var(--lien); }
.depart-lycee__lieu { font-size: var(--fs-s); color: var(--texte-2); font-weight: 700; }

.centres-code { display: grid; gap: var(--s-3); padding: var(--s-5); border-radius: var(--r-carte); background: var(--surface); box-shadow: inset 0 0 0 1px var(--trait); }
.centres-code__liste { display: grid; gap: var(--s-3); padding: 0; list-style: none; }
.centres-code__centre { display: grid; gap: 2px; line-height: 1.4; }
.centres-code__adresse { color: var(--texte-2); }
.info-ville { display: grid; gap: var(--s-3); align-content: start; }
.info-ville a { font-weight: 700; }

.tarif-lyceen { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 900px) { .tarif-lyceen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); } }
.tarif-lyceen__ticket {
  --texte: var(--blanc-chaud); --texte-2: var(--gris-texte); --trait: var(--filet-2);
  display: grid;
  gap: var(--s-3);
  justify-items: start;
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--r-carte);
  background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  color: var(--texte);
  color-scheme: dark;
  box-shadow: inset 0 0 0 1px var(--filet-2), inset 0 2px 0 var(--vert-signal), var(--ombre-haute);
}
.tarif-lyceen__nom { font-family: var(--police-affichage); font-weight: 600; font-size: var(--fs-mention); letter-spacing: .14em; text-transform: uppercase; color: var(--texte-2); }
.tarif-lyceen__prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
.tarif-lyceen__attente { font-family: var(--police-affichage); font-stretch: var(--largeur-titre); font-weight: 600; font-size: clamp(24px, 1rem + 1.2vw, 32px); line-height: 1.15; letter-spacing: -.01em; color: var(--texte); }
.tarif-lyceen__montant { font-family: var(--police-affichage); font-stretch: var(--largeur-titre); font-weight: 600; font-size: clamp(48px, 2rem + 3vw, 72px); line-height: 1; letter-spacing: -.03em; }
.tarif-lyceen__detail { color: var(--texte-2); }
.tarif-lyceen__mention { font-size: var(--fs-s); color: var(--texte-2); padding-top: var(--s-3); border-top: 1px solid var(--trait); width: 100%; }
.tarif-lyceen__points { display: grid; gap: 0; padding: 0; list-style: none; border-top: 1px solid var(--trait); }
.tarif-lyceen__points li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--trait); line-height: 1.5; }
.tarif-lyceen__points li::before {
  content: "";
  width: 14px;
  height: 8px;
  margin-top: .45em;
  border-left: 1.5px solid var(--lien);
  border-bottom: 1.5px solid var(--lien);
  transform: rotate(-45deg);
}

.financements-lycee { display: grid; gap: var(--s-4); }
@media (min-width: 900px) { .financements-lycee { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.financement-lycee { display: grid; align-content: start; gap: var(--s-3); }
.financement-lycee p { color: var(--texte-2); }

.fin-lycee { display: grid; justify-items: start; gap: var(--s-5); }
.fin-lycee h2 { max-width: 18ch; }

/* --------------------------------------------------------------------------
   8. Établissements scolaires
   -------------------------------------------------------------------------- */
.engagements { display: grid; gap: var(--s-4); }
.engagements__bloc { padding: var(--s-6); border-radius: var(--r-carte); background: var(--surface); box-shadow: inset 0 0 0 1px var(--trait); }
.engagements__bloc h3 { margin-bottom: var(--s-4); }
.engagements__bloc ul { display: grid; gap: var(--s-3); padding: 0; list-style: none; }
.engagements__bloc li { display: grid; grid-template-columns: 24px 1fr; gap: 10px; line-height: 1.5; }
.engagements__bloc li::before { content: ""; justify-self: center; }
.engagements__bloc--oui li::before {
  width: 12px;
  height: 7px;
  margin-top: .5em;
  border-left: 1.5px solid var(--lien);
  border-bottom: 1.5px solid var(--lien);
  transform: rotate(-45deg);
}
.engagements__bloc--non li::before { width: 12px; height: 1.5px; margin-top: .75em; background: var(--texte-2); }
.citation-convention { margin-top: var(--s-7); max-width: 80ch; }

.formulaire-carte { padding: clamp(24px, 4vw, 48px); }
.formulaire .champ:last-of-type { margin-bottom: var(--s-4); }
.formulaire .resume-erreurs { margin-bottom: var(--s-5); }
.formulaire .resume-erreurs:focus { outline: none; box-shadow: inset 3px 0 0 var(--orange-alerte), 0 0 0 2px var(--anneau); }
.formulaire .mention { margin-bottom: var(--s-5); }
.formulaire__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.formulaire-merci { display: grid; justify-items: start; gap: var(--s-4); }
/* Sans JavaScript, le formulaire des établissements n'envoie rien : il laisse la place à l'adresse de l'agence */
.formulaire-sansjs { display: none; }
html:not([data-js="1"]) [data-form-etablissement] { display: none; }
html:not([data-js="1"]) .formulaire-sansjs { display: grid; gap: var(--s-3); }
.formulaire-merci:focus { outline: none; }

/* --------------------------------------------------------------------------
   9. Paiement du parent : récapitulatif + validation
   -------------------------------------------------------------------------- */
.paiement { padding-block: clamp(40px, 6vw, 88px) clamp(64px, 9vw, 128px); }
.paiement-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); align-items: start; }
.paiement-grille > * { min-width: 0; }
@media (min-width: 1000px) { .paiement-grille { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--s-8); } }
.note .ticket__formule { font-size: clamp(24px, 1rem + 1.6vw, 32px); }
.note__lignes { width: 100%; margin-top: var(--s-6); border-collapse: collapse; font-variant-numeric: tabular-nums; }
.note__lignes thead th {
  padding: 0 0 10px;
  font-family: var(--police-affichage);
  font-size: var(--fs-mention);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texte-2);
  text-align: left;
  border-bottom: 1px solid var(--texte);
}
.note__lignes tbody :is(th, td) { padding: 12px 0; vertical-align: top; border-bottom: 1px solid var(--trait); text-align: left; font-weight: 400; }
.note__lignes .num { text-align: right; white-space: nowrap; padding-left: 12px; }
.note__nom { display: block; font-weight: 700; }
.note__detail { display: block; font-size: var(--fs-s); color: var(--texte-2); }
.note__tva { font-size: var(--fs-s); color: var(--texte-2); }
.note__conditions { display: grid; gap: 12px; margin: var(--s-6) 0 0; padding-top: var(--s-5); border-top: 1px solid var(--trait); font-size: var(--fs-s); line-height: 1.5; }
.note__conditions > div { display: grid; gap: 2px; }
.note__conditions dt { font-weight: 700; }
.note__conditions dd { margin: 0; color: var(--texte-2); }
.paiement-actions { display: grid; gap: var(--s-5); }
.paiement-carte { display: grid; gap: var(--s-4); }
.paiement-carte .case { font-weight: 400; }
.paiement-moyen { display: flex; gap: 10px; align-items: flex-start; font-size: var(--fs-s); line-height: 1.5; color: var(--texte-2); margin-bottom: var(--s-4); }
.paiement-moyen .i { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--texte); }
.paiement-carte [data-statut-titre]:focus { outline: none; }
.retractation { display: grid; gap: var(--s-3); justify-items: start; margin-top: var(--s-3); padding-top: var(--s-4); border-top: 1px solid var(--trait); }
.retractation [role="alert"] { font-weight: 700; }
.retractation-accuse { display: grid; gap: 6px; padding: var(--s-4) var(--s-5); border-left: 3px solid var(--lien); border-radius: 0 var(--r-bouton) var(--r-bouton) 0; background: var(--vert-profond-a10); }
.retractation-accuse:focus { outline: none; box-shadow: 0 0 0 2px var(--anneau); }
.retractation-accuse__titre { font-weight: 700; }
.paiement-aide { margin-top: var(--s-2); }

/* --------------------------------------------------------------------------
   10. Facture imprimable
   -------------------------------------------------------------------------- */
.facture-page { padding-block: clamp(32px, 5vw, 72px) clamp(56px, 8vw, 112px); }
.facture-barre { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); max-width: 880px; margin: 0 auto var(--s-5); }
.facture-page .devis-etat { margin-inline: auto; max-width: 880px; }
.facture {
  --fond: var(--surface-2); --surface: var(--surface-3); --texte: var(--blanc-chaud); --texte-2: var(--gris-texte);
  --trait: var(--filet-2); --lien: var(--vert-signal); --anneau: var(--vert-signal);
  display: grid;
  gap: var(--s-6);
  max-width: 880px;
  margin-inline: auto;
  padding: clamp(24px, 5vw, 64px);
  border-radius: var(--r-carte);
  background: var(--surface-2);
  color: var(--texte);
  box-shadow: inset 0 0 0 1px var(--filet-2), inset 0 2px 0 var(--vert-signal), var(--ombre-haute);
  color-scheme: dark;
  font-size: 15px;
  line-height: 1.5;
}
.facture__tete { display: grid; gap: var(--s-5); }
@media (min-width: 700px) { .facture__tete { grid-template-columns: 1fr auto; align-items: start; } }
.facture__emetteur { display: grid; gap: 2px; }
.facture__marque { display: flex; align-items: center; margin-bottom: var(--s-3); }
.facture__marque ooc-logo { font-size: 16px; }   /* logo B vectoriel : 150 px de large ; version claire à l’impression */
.facture__titre { font-size: clamp(30px, 1rem + 2.4vw, 44px); line-height: 1; color: var(--texte); }
.facture__infos { display: grid; gap: 4px; margin: var(--s-3) 0 0; }
.facture__infos > div { display: flex; gap: 8px; }
.facture__infos dt { color: var(--texte-2); }
.facture__infos dd { margin: 0; font-weight: 700; }
.facture__parties { display: grid; gap: var(--s-5); padding-block: var(--s-4); border-block: 1px solid var(--trait); }
@media (min-width: 700px) { .facture__parties { grid-template-columns: 1fr 1fr; } }
.facture__sous-titre { font-family: var(--police-affichage); font-stretch: 100%; font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-2); margin-bottom: 4px; }
.facture__lignes { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.facture__lignes thead th { padding: 0 0 8px; font-family: var(--police-affichage); font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--texte-2); text-align: left; border-bottom: 1px solid var(--texte); }
.facture__lignes tbody :is(th, td) { padding: 10px 0; border-bottom: 1px solid var(--trait); text-align: left; vertical-align: top; font-weight: 400; }
.facture__lignes .num { text-align: right; white-space: nowrap; padding-left: 12px; }
.facture__designation { display: block; font-weight: 700; }
.facture__detail { display: block; font-size: 13px; color: var(--texte-2); }
@media (max-width: 599.98px) {
  .facture__lignes thead th:nth-child(3), .facture__lignes thead th:nth-child(4),
  .facture__lignes tbody td:nth-child(3), .facture__lignes tbody td:nth-child(4) { display: none; }
}
.facture__bas { display: grid; gap: var(--s-5); align-items: start; }
@media (min-width: 700px) { .facture__bas { grid-template-columns: 1fr minmax(260px, auto); } }
.facture__totaux { display: grid; gap: 6px; margin: 0; font-variant-numeric: tabular-nums; }
.facture__totaux > div { display: flex; justify-content: space-between; gap: var(--s-5); }
.facture__totaux dd { margin: 0; font-weight: 700; }
.facture__total { padding-top: 8px; border-top: 1px solid var(--texte); font-size: 18px; }
.facture__total :is(dt, dd) { font-weight: 700; }
.facture__pied { display: grid; gap: 4px; padding-top: var(--s-4); border-top: 1px solid var(--trait); }
.facture__mentions { display: grid; gap: 4px; }
.facture__mention { font-size: 13px; color: var(--texte-2); }

/* --------------------------------------------------------------------------
   11. CGV : formulaire type de rétractation (annexe)
   -------------------------------------------------------------------------- */
.formulaire-type {
  display: grid;
  gap: var(--s-3);
  margin-top: var(--s-4);
  padding: clamp(24px, 4vw, 40px);
  border-radius: var(--r-carte);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--trait);
  font-size: var(--fs-base);
}
.formulaire-type__titre { font-family: var(--police-affichage); font-weight: 600; font-size: var(--fs-l); }
.formulaire-type__consigne { font-style: italic; color: var(--texte-2); }
.formulaire-type__ligne { display: grid; gap: 4px; }
.formulaire-type__ligne--vide::after { content: ""; display: block; height: 28px; border-bottom: 1px dotted var(--texte-2); }
.formulaire-type__renvoi { font-size: var(--fs-s); color: var(--texte-2); }
.formulaire-type__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-3); }

/* --------------------------------------------------------------------------
   12. Impression : facture seule ; formulaire de rétractation seul
   -------------------------------------------------------------------------- */
@media print {
  @page { size: A4; margin: 14mm 14mm 16mm; }
  html[data-page="facture"] :is(.pied, .facture-barre, .evitement, .devis-etat) { display: none !important; }
  html[data-page="facture"] body > main { padding: 0; }
  html[data-page="facture"] .facture-page { padding: 0; }
  html[data-page="facture"] .facture { max-width: none; padding: 0; background: var(--papier); box-shadow: none; border-radius: 0; font-size: 11pt; }
  html[data-page="facture"] .facture__lignes :is(th, td) { display: table-cell !important; }
  html[data-page="facture"] .facture__lignes tr { break-inside: avoid; }
  html[data-page="facture"] .a-completer { outline: none; background: none; padding: 0; }
  html[data-page="paiement"] :is(.pied, .paiement-actions, .page-tete) { display: none !important; }
  html[data-page="paiement"] .paiement-grille { display: block; }
  html[data-page="paiement"] .ticket { background: var(--papier); box-shadow: 0 0 0 1px var(--trait-papier); }
  html.impression-formulaire body > :not(main) { display: none !important; }
  html.impression-formulaire main > * { display: none !important; }
  html.impression-formulaire main > .page-corps { display: block !important; }
  html.impression-formulaire .page-corps__grille > :not(.juridique),
  html.impression-formulaire .juridique > :not(#formulaire-retractation) { display: none !important; }
  html.impression-formulaire .formulaire-type__actions { display: none !important; }
  html.impression-formulaire .formulaire-type { box-shadow: none; padding: 0; }
}