@font-face{
font-family:"Archivo Black";
src:url("/polices/archivo-black.woff2") format("woff2");
font-weight:400;font-style:normal;
/* optional : jamais bloquante. Sur 3G lente la pile systeme s'affiche et la page
   ne bouge plus ensuite. La police arrive au chargement suivant, depuis le cache. */
font-display:optional;
unicode-range:U+0000-00FF,U+0152-0153,U+2000-206F,U+20AC,U+2212;
}

:root{
/* ---- Neutres : la base. Sobre, sans dominante, c'est ce qui porte la lisibilite.
   Tous les couples visent AAA 7:1 sur le texte et 4,5:1 sur les elements
   d'interface, soit un cran au-dessus des minimums WCAG (4,5 et 3).
   Remesure a chaque execution des tests, voir src/vues/contraste.test.ts. */
--n-0:#ffffff;--n-50:#f7f7f5;--n-100:#eeeeea;--n-200:#e3e3de;
--n-600:#4b5054;--n-900:#16181a;

/* ---- Drapeau guineen : accents uniquement, jamais un fond de page.
   Trois teintes, employees avec parcimonie : le vert pour l'action, le rouge pour
   l'alerte, le jaune reserve aux touches du guichet. */
--vert-500:#00c080;--vert-600:#00613e;
--rouge-300:#f58795;--rouge-500:#aa0e20;
--jaune-500:#fcd116;

--fond:var(--n-50);--papier:var(--n-0);--texte:var(--n-900);
--texte-faible:var(--n-600);--trait:var(--n-200);--trait-fort:var(--n-900);
--accent:var(--vert-600);--sur-accent:#fff;--signal:var(--rouge-500);
--ombre:var(--n-900);--grain:.04;
/* Ambre derive du jaune du drapeau, assombri jusqu'a etre lisible (4,53:1).
   Sert uniquement a signaler un prix qui date. */
--ambre:#655201;

--pas-0:.68rem;--pas-1:.8rem;--pas-2:1rem;--pas-3:1.25rem;--pas-4:1.5rem;
--pas-5:2rem;--pas-6:2.75rem;--pas-7:4rem;--pas-8:5.5rem;
--e-1:4px;--e-2:8px;--e-3:12px;--e-4:16px;--e-5:24px;--e-6:32px;--e-7:48px;--e-8:72px;
--r-1:2px;--r-2:4px;
--pile:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--mono:ui-monospace,"SF Mono",Consolas,"Liberation Mono",monospace;
--display:"Archivo Black",var(--pile);
--large:min(72rem,100% - 2 * var(--e-4));
--lisible:min(38rem,100% - 2 * var(--e-4));
}
@media (prefers-color-scheme:dark){:root{
--fond:#131517;--papier:#1b1e21;--texte:#eceef0;--texte-faible:#aab1b8;
--trait:#2d3236;--trait-fort:#748089;--ombre:#000;
--n-100:#22262a;--n-200:#2d3236;
/* Le vert clair est trop lumineux pour porter du texte blanc (2,72:1) :
   sur fond accent, le texte passe en sombre. */
--accent:var(--vert-500);--sur-accent:#131517;--signal:var(--rouge-300);--grain:.06;
/* Sur fond sombre, le jaune du drapeau passe tel quel : 12,71:1. */
--ambre:var(--jaune-500);
}}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
background:var(--fond);color:var(--texte);
font:var(--pas-2)/1.6 var(--pile);
font-synthesis-weight:none;
min-height:100vh;display:flex;flex-direction:column;
}
/* Grain : une texture, pas un aplat mort. ~300 octets, zero requete. */
body::before{
content:"";position:fixed;inset:0;pointer-events:none;z-index:9;
opacity:var(--grain);
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
a{color:inherit}
/* Cibles tactiles. Mesure sur la page d'une ligne : des liens de navigation a 15,
   20 et 27 px de haut, alors que la documentation annoncait 48 px.
   Les liens d'action et de navigation prennent 44 px, seuil AAA. Les liens au fil
   du texte se contentent de 24 px, seuil AA : leur imposer 44 px disloquerait le
   paragraphe pour un gain nul, le doigt visant la ligne entiere. */
.cartouche,.retour,.hero__sur a,.pied a,.depart__agir,.bouton{
min-height:44px;display:inline-flex;align-items:center}
.aide a,p a,small a,.lignes__villes a{
display:inline-block;padding-block:4px;min-height:24px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
::selection{background:var(--jaune-500);color:#000}

.large{width:var(--large);margin-inline:auto}
.lisible{width:var(--lisible);margin-inline:auto}
main{flex:1;padding-bottom:var(--e-8)}

/* ---------------------------------------------------------------- galon */
/* Un seul filet tricolore, en haut de page et nulle part ailleurs.
   Degrade continu plutot que bandes repetees : le motif raye lisait comme un
   ruban de chantier. Le jaune reste entre le rouge et le vert, qui ne se
   distinguent qu'a 1,45:1 l'un de l'autre. */
.galon{height:2px;background:linear-gradient(90deg,
var(--rouge-500),var(--jaune-500) 50%,var(--vert-500))}

/* ---------------------------------------------------------------- entete */
.entete{border-bottom:1px solid var(--trait)}
.entete__in{display:flex;justify-content:space-between;align-items:center;
gap:var(--e-4);padding-block:var(--e-4)}
.cartouche{display:inline-flex;align-items:center;gap:.5ch;text-decoration:none;
font-family:var(--display);font-size:var(--pas-3);letter-spacing:-.02em;
text-transform:uppercase;line-height:1}
.cartouche i{display:inline-block;width:1.1em;height:1.1em;font-style:normal;
background:linear-gradient(var(--rouge-500) 0 33.3%,var(--jaune-500) 33.3% 66.6%,var(--vert-500) 66.6%);
border:2px solid var(--trait-fort);margin-right:.35ch}
.cartouche b{font-weight:inherit}
.cartouche s{text-decoration:none;color:var(--accent)}
.nav{display:flex;gap:var(--e-2);flex-wrap:wrap}
.mini{font-size:var(--pas-0);letter-spacing:.18em;text-transform:uppercase;
color:var(--texte-faible);font-weight:600}

/* ------------------------------------------------------------------ hero */
.hero{padding-block:var(--e-6) var(--e-5);position:relative;overflow:hidden}
.hero__sur{font-size:var(--pas-0);letter-spacing:.34em;text-transform:uppercase;
color:var(--texte-faible);font-weight:700;margin-bottom:var(--e-4)}
.hero h1{font-family:var(--display);font-weight:400;line-height:.86;
font-size:clamp(2.25rem,7.5vw,4.5rem);letter-spacing:-.045em;text-transform:uppercase;
text-wrap:balance}
.hero h1 em{font-style:normal;display:block;color:var(--accent)}
.hero p{margin-top:var(--e-4);max-width:52ch;font-size:var(--pas-2);
color:var(--texte-faible);text-wrap:pretty}
/* filets de fond, evoquent un tableau d'affichage */
.hero::after{content:"";position:absolute;inset:0;z-index:-1;
background:repeating-linear-gradient(to bottom,transparent 0 39px,var(--trait) 39px 40px);
opacity:.55;mask-image:linear-gradient(to bottom,transparent,#000 40%,transparent)}

/* ------------------------------------------------------------- plaque ---- */
.plaque{font-family:var(--display);font-weight:400;line-height:.9;
text-transform:uppercase;letter-spacing:-.04em;
font-size:clamp(2rem,9vw,4.25rem);text-wrap:balance}
.plaque .vers{display:flex;align-items:center;gap:var(--e-3);
font-family:var(--pile);font-size:var(--pas-0);font-weight:700;
letter-spacing:.32em;color:var(--texte-faible);margin-block:var(--e-2);
text-transform:uppercase}
.plaque .vers::after{content:"";flex:1;height:1px;background:var(--trait)}
.plaque--petite{font-size:clamp(1.5rem,6vw,2.25rem)}

/* ------------------------------------------------------- liste de lignes */
.lignes{list-style:none;display:grid;gap:var(--e-3);margin-top:var(--e-6)}
.lignes a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;
gap:var(--e-4);padding:var(--e-5);text-decoration:none;
background:var(--papier);border:1px solid var(--trait);
box-shadow:5px 5px 0 var(--trait);
transition:transform .18s cubic-bezier(.2,.9,.3,1.1),box-shadow .18s,border-color .18s}
.lignes a:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--accent);
border-color:var(--trait-fort)}
.lignes a:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--accent)}
.lignes__villes{font-family:var(--display);font-size:clamp(1.1rem,4.5vw,1.6rem);
text-transform:uppercase;letter-spacing:-.025em;line-height:1.05}
.lignes__villes span{color:var(--texte-faible);font-size:.62em;letter-spacing:.2em;
display:block;font-family:var(--pile);font-weight:700}
.lignes__cpt{text-align:right;font-family:var(--mono);font-size:var(--pas-1);
color:var(--texte-faible);font-variant-numeric:tabular-nums;white-space:nowrap}
.lignes__cpt b{display:block;font-family:var(--display);font-size:var(--pas-5);
color:var(--texte);line-height:1}

/* --------------------------------------------------- tableau des departs */
.tableau{margin-top:var(--e-6);border-top:3px solid var(--trait-fort)}
.tableau__tete{display:flex;justify-content:space-between;align-items:baseline;
padding-block:var(--e-3);border-bottom:1px solid var(--trait)}
.departs{list-style:none}
.depart{display:grid;grid-template-columns:auto 1fr auto;gap:var(--e-3) var(--e-4);
align-items:start;padding:var(--e-5) var(--e-2);border-bottom:1px solid var(--trait);
position:relative;transition:background .16s}
.depart:hover{background:var(--n-100)}
.depart::before{content:"";position:absolute;left:calc(var(--e-2) * -1);top:0;bottom:0;
width:4px;background:var(--accent)}
.depart[data-etat="PRESQUE_PLEIN"]::before{background:var(--signal)}
.depart[data-etat="PARTI"]::before,.depart[data-etat="ANNULE"]::before{background:var(--trait)}
.depart[data-etat="PARTI"],.depart[data-etat="ANNULE"]{opacity:.5}
.classe{font-family:var(--display);font-size:var(--pas-1);text-transform:uppercase;
letter-spacing:.04em;padding:var(--e-2) var(--e-3);border:2px solid var(--trait-fort);
white-space:nowrap;line-height:1}
.depart__mid{min-width:0}
.etat{display:inline-flex;align-items:center;gap:.6ch;font-size:var(--pas-1);
font-weight:700;letter-spacing:.02em}
.etat::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent);
box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.etat--chaud{color:var(--signal)}
.etat--chaud::before{background:var(--signal);
box-shadow:0 0 0 3px color-mix(in srgb,var(--signal) 25%,transparent);
animation:pulse 1.8s ease-in-out infinite}
.etat--froid{color:var(--texte-faible)}
.etat--froid::before{background:var(--texte-faible);box-shadow:none}
.depart__note{display:block;font-size:var(--pas-1);color:var(--texte-faible);
margin-top:var(--e-1)}
/* Bouton d'action par ligne, comme sur tout comparateur de trajets. */
.depart__agir{display:inline-flex;align-items:center;justify-content:center;
font-family:var(--display);font-size:var(--pas-1);text-transform:uppercase;
letter-spacing:.02em;background:var(--accent);color:var(--sur-accent);text-decoration:none;
padding:var(--e-3) var(--e-4);min-height:48px;white-space:nowrap;
border:2px solid var(--trait-fort);box-shadow:4px 4px 0 var(--trait-fort);
transition:transform .14s,box-shadow .14s}
.depart__agir:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--trait-fort)}
.depart__agir:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--trait-fort)}
.depart__clos{font-size:var(--pas-0);letter-spacing:.14em;text-transform:uppercase;
color:var(--texte-faible);text-align:center;white-space:nowrap}

/* ------------------------------------------------------------- prix date */
.prix{text-align:right;white-space:nowrap}
.prix b{font-family:var(--display);font-size:clamp(1.35rem,5.5vw,2rem);
letter-spacing:-.03em;font-variant-numeric:tabular-nums;display:block;line-height:1}
.prix i{font-style:normal;font-size:var(--pas-0);letter-spacing:.14em;
color:var(--texte-faible);text-transform:uppercase}
.prix small{display:block;font-size:var(--pas-0);color:var(--texte-faible);
margin-top:var(--e-2);white-space:normal;max-width:26ch;margin-left:auto;
line-height:1.4;text-wrap:pretty}
.prix .ancien{color:var(--ambre);font-weight:700}
.prix--absent{text-align:right;font-size:var(--pas-1);color:var(--texte-faible);
max-width:16ch;margin-left:auto}

/* ---------------------------------------------------------------- billet */
.billet{position:relative;margin-block:var(--e-6);background:var(--papier);
border:1px solid var(--trait);box-shadow:10px 10px 0 var(--trait)}
.billet::before{content:"";position:absolute;inset:0;pointer-events:none;
border:1px dashed var(--trait);margin:6px}
.billet__haut{padding:var(--e-6) var(--e-5) var(--e-5)}
.billet__bas{padding:var(--e-5);background:
linear-gradient(var(--n-100),var(--n-100)) padding-box}
.g-fiche__quand{font-size:var(--pas-0);color:var(--texte-faible);
margin-top:calc(var(--e-2) * -1);margin-bottom:var(--e-3)}
.g-fiche__quand b{color:var(--texte);font-variant-numeric:tabular-nums}
.billet__releve{margin-top:var(--e-4);padding-top:var(--e-3);
border-top:1px dashed var(--trait);font-size:var(--pas-0);
color:var(--texte-faible);font-weight:500}
.dechirure{position:relative;height:0;border-top:2px dashed var(--trait);
margin-inline:var(--e-5)}
.dechirure::before,.dechirure::after{content:"";position:absolute;top:50%;
width:22px;height:22px;background:var(--fond);border-radius:50%;
transform:translateY(-50%);border:1px solid var(--trait)}
.dechirure::before{left:calc(var(--e-5) * -1 - 12px);clip-path:inset(0 0 0 50%)}
.dechirure::after{right:calc(var(--e-5) * -1 - 12px);clip-path:inset(0 50% 0 0)}
.code{font-family:var(--mono);font-size:clamp(2rem,11vw,3.25rem);font-weight:700;
letter-spacing:.22em;padding-left:.22em;color:var(--accent);line-height:1.1;
font-variant-numeric:tabular-nums}
.tampon{position:absolute;top:var(--e-5);right:var(--e-5);
font-family:var(--display);font-size:var(--pas-2);letter-spacing:.1em;
text-transform:uppercase;color:var(--signal);border:4px double var(--signal);
padding:var(--e-3) var(--e-4);transform:rotate(-8deg);opacity:.9;line-height:1;
max-width:9em;text-align:center}

/* ------------------------------------------------------------- bandeaux */
.avis{display:block;border-left:5px solid var(--texte-faible);background:var(--n-100);
padding:var(--e-4);font-size:var(--pas-1);margin-block:var(--e-5)}
.avis--erreur{border-left-color:var(--signal)}
.avis b{display:block;font-family:var(--display);font-size:var(--pas-2);
text-transform:uppercase;letter-spacing:.02em;margin-bottom:var(--e-1)}
.vide{text-align:center;padding:var(--e-8) var(--e-4);border:2px dashed var(--trait);
color:var(--texte-faible);margin-top:var(--e-6)}
.vide b{display:block;font-family:var(--display);font-size:var(--pas-5);
text-transform:uppercase;color:var(--trait);margin-bottom:var(--e-3);letter-spacing:-.02em}

/* ------------------------------------------------------- tableaux de bord */
.stats{display:grid;gap:var(--e-3);margin-top:var(--e-6);
grid-template-columns:repeat(auto-fit,minmax(9rem,1fr))}
.stat{background:var(--papier);border:1px solid var(--trait);padding:var(--e-4);
box-shadow:4px 4px 0 var(--trait)}
.stat b{display:block;font-family:var(--display);font-size:var(--pas-6);line-height:1;
letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.stat span{display:block;font-size:var(--pas-0);letter-spacing:.14em;
text-transform:uppercase;color:var(--texte-faible);margin-top:var(--e-2)}
.stat i{display:block;font-style:normal;font-size:var(--pas-0);
color:var(--texte-faible);margin-top:var(--e-1);opacity:.8}
body.guichet .stat{border-left:4px solid var(--jaune-500)}

/* -------------------------------------------------------- recherche ----- */
.recherche{display:grid;gap:var(--e-3);margin-top:var(--e-5);
grid-template-columns:1fr;align-items:end;max-width:44rem}
.recherche label{margin-top:0}
.recherche .bouton{width:100%;justify-content:center}
@media (min-width:40rem){
.recherche{grid-template-columns:1fr 1fr auto;gap:var(--e-4)}
.recherche .bouton{width:auto}
}

/* ---------------------------------------------------- suivi par code ---- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.suivi{margin-top:var(--e-8);padding:var(--e-6);background:var(--n-100);
border:1px solid var(--trait);display:grid;gap:var(--e-4);align-items:end;
grid-template-columns:1fr}
.suivi__t{font-family:var(--display);font-size:var(--pas-4);text-transform:uppercase;
letter-spacing:-.02em;font-weight:400}
.suivi__f{display:flex;gap:var(--e-3);margin:0;flex-wrap:wrap}
.suivi__f input{flex:1;min-width:11rem;font-family:var(--mono);letter-spacing:.16em;
text-transform:uppercase}
.suivi__f .bouton{flex:0 0 auto}
@media (min-width:46rem){.suivi{grid-template-columns:1fr 1.1fr;gap:var(--e-6)}}

/* recapitulatif au dessus d'un formulaire */
.recap{display:flex;flex-wrap:wrap;align-items:center;gap:var(--e-3) var(--e-4);
padding:var(--e-4) 0;border-block:1px solid var(--trait);margin-top:var(--e-5)}
.recap .prix{margin-left:auto;text-align:right}
.recap .prix small{margin-left:auto}

/* ------------------------------------------------- historique des prix --- */
.serie{margin-top:var(--e-6)}
.barres{list-style:none;counter-reset:none}
.barres li{display:grid;gap:var(--e-1) var(--e-4);padding:var(--e-4) 0;
border-bottom:1px solid var(--trait);grid-template-columns:1fr;align-items:center}
.barres__date{font-size:var(--pas-0);letter-spacing:.1em;text-transform:uppercase;
color:var(--texte-faible)}
/* Jauge en pur CSS : aucune bibliotheque de graphe, aucun script. */
.barres__piste{position:relative;display:flex;align-items:center;gap:var(--e-3);
min-height:2.4rem}
.barres__jauge{position:absolute;inset-block:0;left:0;background:var(--accent);
opacity:.16;border-left:3px solid var(--accent)}
.barres__piste b{position:relative;font-family:var(--display);font-size:var(--pas-4);
font-variant-numeric:tabular-nums;padding-left:var(--e-3)}
.barres__note{font-size:var(--pas-1);color:var(--texte-faible);
display:flex;gap:var(--e-3);align-items:baseline}
.barres__note em{font-style:normal;font-weight:700}
.barres__note .hausse{color:var(--signal)}
.barres__note .baisse{color:var(--accent)}
@media (min-width:46rem){
.barres li{grid-template-columns:10rem 1fr 14rem}
}

/* --------------------------------------------------------- renoncement -- */
.renoncer{margin-top:var(--e-6);border:1px solid var(--trait);padding:var(--e-4)}
.renoncer summary{cursor:pointer;font-weight:700;font-size:var(--pas-1)}
.renoncer[open] summary{margin-bottom:var(--e-3)}
.bouton--danger{background:var(--signal)}

/* -------------------------------------------------------------- promesse */
.promesse{margin-top:var(--e-8);border-top:3px solid var(--trait-fort);
padding-top:var(--e-5);display:grid;gap:var(--e-5);
grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.promesse div{position:relative;padding-left:var(--e-5)}
.promesse div::before{content:"×";position:absolute;left:0;top:-2px;
font-family:var(--display);font-size:var(--pas-4);color:var(--signal);line-height:1}
.promesse h3{font-family:var(--display);font-size:var(--pas-2);text-transform:uppercase;
letter-spacing:.01em;margin-bottom:var(--e-1);font-weight:400}
.promesse p{font-size:var(--pas-1);color:var(--texte-faible)}

/* ------------------------------------------------------------ formulaire */
form{margin-block:var(--e-6)}
label{display:block;font-size:var(--pas-0);font-weight:700;letter-spacing:.16em;
text-transform:uppercase;color:var(--texte-faible);margin-bottom:var(--e-2);
margin-top:var(--e-5)}
input,select{width:100%;min-height:52px;font:var(--pas-3) var(--pile);
padding:var(--e-3) var(--e-4);border:2px solid var(--trait-fort);border-radius:0;
background:var(--papier);color:var(--texte)}
input:focus,select:focus{border-color:var(--accent);outline:none;
box-shadow:4px 4px 0 var(--accent)}
.aide{font-size:var(--pas-1);color:var(--texte-faible);margin-top:var(--e-2)}

.bouton{display:inline-flex;align-items:center;gap:.8ch;
font-family:var(--display);font-size:var(--pas-3);text-transform:uppercase;
letter-spacing:.01em;background:var(--accent);color:var(--sur-accent);
padding:var(--e-4) var(--e-6);border:2px solid var(--trait-fort);border-radius:0;
box-shadow:6px 6px 0 var(--trait-fort);text-decoration:none;cursor:pointer;
min-height:56px;transition:transform .14s,box-shadow .14s}
.bouton:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--trait-fort)}
.bouton:active{transform:translate(6px,6px);box-shadow:0 0 0 var(--trait-fort)}
/* Reste une cible tactile : mesure a 38 px, sous le seuil, alors que ces liens
   sont ceux que le vendeur touche le plus souvent au guichet. */
.bouton--discret{background:transparent;color:var(--texte);box-shadow:none;
border-width:1px;font-size:var(--pas-1);padding:var(--e-2) var(--e-4);min-height:44px}
.bouton--discret:hover{background:var(--texte);color:var(--fond);transform:none}
.retour{display:inline-block;margin-top:var(--e-6);font-size:var(--pas-1);
font-weight:700;letter-spacing:.06em}

/* ------------------------------------------------------------------ pied */
.pied{border-top:1px solid var(--trait);padding-block:var(--e-5);
font-size:var(--pas-0);color:var(--texte-faible);line-height:1.6}


/* -------------------------------------------------------------- guichet */
/* Un poste de travail, pas une page vitrine : de la densite, une hierarchie
   claire, et l'objet central visible sans faire defiler. */
.g-console{padding-top:var(--e-5)}
.g-entete{display:flex;flex-wrap:wrap;gap:var(--e-4);align-items:flex-end;
justify-content:space-between;border-bottom:3px solid var(--trait-fort);
padding-bottom:var(--e-4)}
.g-entete h1{margin:var(--e-1) 0 0}
.g-chiffres{display:flex;gap:var(--e-5)}
.g-chiffres div{text-align:right}
.g-chiffres b{display:block;font-family:var(--display);font-size:var(--pas-5);
line-height:1;font-variant-numeric:tabular-nums}
.g-chiffres span{font-size:var(--pas-0);letter-spacing:.12em;text-transform:uppercase;
color:var(--texte-faible)}

.g-colonnes{display:grid;gap:var(--e-6);margin-top:var(--e-5)}
@media (min-width:64rem){.g-colonnes{grid-template-columns:1fr 22rem;align-items:start}}
.g-principal h2,.g-lateral h2{margin-top:var(--e-5)}
.g-principal h2:first-child,.g-lateral h2:first-child{margin-top:0}

/* Fiche de depart : l'unite de travail du vendeur. */
.g-fiche{border:1px solid var(--trait);border-left:5px solid var(--accent);
background:var(--papier);padding:var(--e-4);margin-bottom:var(--e-3)}
.g-fiche[data-etat="PRESQUE_PLEIN"]{border-left-color:var(--signal)}
.g-fiche[data-etat="PARTI"],.g-fiche[data-etat="ANNULE"]{border-left-color:var(--trait);opacity:.65}
.g-fiche__tete{display:flex;justify-content:space-between;align-items:baseline;
gap:var(--e-3);flex-wrap:wrap}
.g-fiche__ligne{font-family:var(--display);font-size:var(--pas-3);
text-transform:uppercase;letter-spacing:-.02em}
.g-fiche__classe{font-size:var(--pas-0);letter-spacing:.12em;text-transform:uppercase;
border:1px solid var(--trait-fort);padding:2px var(--e-2)}
.g-fiche__etat{display:flex;justify-content:space-between;gap:var(--e-3);
margin:var(--e-3) 0;font-size:var(--pas-1)}
.g-fiche__etat span{color:var(--texte-faible)}
.g-fiche .g-grille{gap:var(--e-2)}
.g-touche[disabled]{opacity:1;background:var(--trait-fort);color:var(--papier);cursor:default}

.g-replie{margin-top:var(--e-4);border-top:1px solid var(--trait);padding-top:var(--e-3)}
.g-replie summary{cursor:pointer;font-size:var(--pas-1);font-weight:700;
min-height:44px;display:flex;align-items:center}
.g-vide{border:2px dashed var(--trait);padding:var(--e-5);color:var(--texte-faible)}

.g-duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--e-3)}
.g-duo label{margin-top:var(--e-3)}
.g-code{font-family:var(--mono);font-size:var(--pas-4);letter-spacing:.2em;
text-transform:uppercase}
.g-releves{padding-block:var(--e-2)}
.g-releve{display:flex;justify-content:space-between;gap:var(--e-3);
padding:var(--e-2) 0;border-bottom:1px solid var(--trait);font-size:var(--pas-1)}
.g-releve:last-child{border-bottom:0}
.g-releve small{display:block;color:var(--texte-faible);font-size:var(--pas-0)}
.g-releve span:last-child{text-align:right}
.g-releve b{font-variant-numeric:tabular-nums}

/* La console garde la base neutre. Le jaune du drapeau ne sert qu'aux touches :
   c'est ce qu'on frappe sans regarder qui doit ressortir, pas le fond de l'ecran.
   Un aplat jaune plein ecran est illisible en interieur et n'a jamais ete valide
   en exterieur : le mode plein soleil reste a mesurer sur le terrain. */
body.guichet .entete{border-bottom-width:2px}
body.guichet h1{font-family:var(--display);font-size:clamp(1.75rem,7vw,2.75rem);
text-transform:uppercase;letter-spacing:-.03em;line-height:1}
body.guichet h2{font-family:var(--display);font-size:var(--pas-2);
text-transform:uppercase;letter-spacing:.14em;margin:var(--e-6) 0 var(--e-3);
border-bottom:2px solid var(--trait-fort);padding-bottom:var(--e-2)}
.g-bloc{border:1px solid var(--trait);border-left:4px solid var(--trait-fort);
padding:var(--e-5);margin-block:var(--e-4);background:var(--papier)}
.g-ligne{display:flex;justify-content:space-between;align-items:center;gap:var(--e-3);
border-bottom:1px solid var(--trait);padding:var(--e-3) 0;font-weight:600}
.g-ligne:last-child{border-bottom:0}
.g-ligne b{font-family:var(--display);text-transform:uppercase;font-weight:400}
.g-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:var(--e-3)}
/* Cible tactile large et couleur franche : frappable sans regarder. */
.g-touche{min-height:64px;display:flex;flex-direction:column;justify-content:center;
align-items:center;background:var(--jaune-500);color:#000;
border:2px solid var(--trait-fort);
font:var(--pas-2)/1 var(--display);text-transform:uppercase;letter-spacing:.02em;
cursor:pointer;transition:none;text-decoration:none;text-align:center;padding:var(--e-2)}
.g-touche small{font-size:var(--pas-0);font-weight:600;letter-spacing:.12em;
margin-top:var(--e-1);opacity:.7;font-family:var(--pile)}
.g-touche:active{background:var(--rouge-500);color:#fff}
.g-touche[aria-pressed="true"]{background:var(--trait-fort);color:var(--papier)}

/* ------------------------------------------------------------ animations */
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:no-preference){
@view-transition{navigation:auto}
.hero h1,.hero__sur,.hero p,.lignes li,.depart,.billet,.promesse div{
animation:entree .5s cubic-bezier(.2,.9,.3,1.05) both}
.hero h1{animation-delay:.04s}
.hero p{animation-delay:.1s}
.lignes li:nth-child(1),.depart:nth-child(1){animation-delay:.06s}
.lignes li:nth-child(2),.depart:nth-child(2){animation-delay:.12s}
.lignes li:nth-child(3),.depart:nth-child(3){animation-delay:.18s}
.lignes li:nth-child(n+4),.depart:nth-child(n+4){animation-delay:.24s}
.promesse div:nth-child(2){animation-delay:.08s}
.promesse div:nth-child(3){animation-delay:.16s}
@keyframes entree{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.billet{animation:tampon .42s cubic-bezier(.2,.9,.3,1.25) both}
@keyframes tampon{from{opacity:0;transform:scale(.96) rotate(-.6deg)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ------------------------------------------------------------ impression */
/* Le billet est fait pour etre presente au vendeur. Beaucoup de gens n'ont pas
   de smartphone : pouvoir l'imprimer, ou le faire imprimer, est un vrai usage.
   On ne garde que le billet et le code, sur fond blanc, sans decor. */
@media print{
/* Les jetons neutres doivent etre redefinis eux aussi : sans cela, un lecteur en
   theme sombre imprimait la souche du billet sur fond fonce, avec un code
   pratiquement illisible et beaucoup d'encre gaspillee. */
:root{--fond:#fff;--papier:#fff;--texte:#000;--texte-faible:#333;
--trait:#999;--trait-fort:#000;--accent:#000;--sur-accent:#fff;--grain:0;
--n-0:#fff;--n-50:#fff;--n-100:#f2f2f2;--n-200:#ccc;--n-600:#333;--n-900:#000;
--ambre:#000;--signal:#000}
.galon,.entete,.pied,.promesse,.renoncer,.suivi,.retour,.hero__sur{display:none}
body::before{display:none}
.billet{box-shadow:none;border:2px solid #000;page-break-inside:avoid}
.billet::before{border-color:#000}
.code{color:#000}
.tampon{color:#000;border-color:#000}
.aide,.billet__releve{color:#333}
.billet__releve{border-top-color:#000}
a[href]::after{content:""}
}

/* ------------------------------------------------------------ responsive */
@media (min-width:56rem){
.depart{grid-template-columns:7.5rem 1fr 17.5rem auto;padding-inline:var(--e-4)}
.lignes a{padding:var(--e-6)}
.hero{padding-block:var(--e-8)}
}
@media (max-width:56rem){
.depart{grid-template-columns:auto 1fr}
.classe{grid-column:1;grid-row:1;justify-self:start}
.depart__mid{grid-column:2;grid-row:1}
.prix{grid-column:1/-1;grid-row:2;text-align:left}
.prix small{margin-left:0;max-width:38ch}
.depart__agir,.depart__clos{grid-column:1/-1;grid-row:3;justify-self:stretch}
}