/* ============================================================
   TAXI COTILLEAU : habillage de l'application.
   Bâti sur les jetons de jetons.css, mobile d'abord, une main,
   pouce en bas. L'ordinateur n'est qu'un grand écran.
   Les polices et les jetons sont chargés par le HTML, en
   parallèle de ce fichier : une chaîne d'@import coûterait un
   aller-retour réseau de plus avant le premier pixel.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; overflow-x: clip; overscroll-behavior-y: none; }

body {
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: var(--t-m);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--cible) + var(--e5) + env(safe-area-inset-bottom, 0px));
  min-height: 100vh;
}
body.sans-barre { padding-bottom: env(safe-area-inset-bottom, 0px); }

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--marque); color: #fff; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: var(--r-s); }

.pour-lecteur {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.zone { width: 100%; max-width: min(var(--largeur), 100%); margin: 0 auto; padding: 0 var(--marge); }

/* ============================================================
   En-tête
   ============================================================ */
.entete {
  position: sticky; top: 0; z-index: var(--z-barre);
  background: rgba(var(--fond-rgb), .86);
  backdrop-filter: saturate(140%) blur(18px); -webkit-backdrop-filter: saturate(140%) blur(18px);
  border-bottom: 1px solid var(--ligne);
  padding-top: env(safe-area-inset-top, 0px);
  isolation: isolate;
  /* La lueur déborde volontairement du cadre : on la coupe ici, sinon elle
     élargit la page de quelques dizaines de pixels. */
  overflow: hidden;
}
/* Lueur de marque, très diffuse : elle donne de la profondeur sans bruit. */
.entete .lueur {
  position: absolute; inset: -60% 0 auto 0; height: 260%;
  background: var(--lueur); pointer-events: none; z-index: -1;
}
.entete .dedans {
  display: flex; align-items: center; gap: var(--e3);
  min-height: 58px; padding: var(--e2) var(--marge);
  max-width: var(--largeur); margin: 0 auto;
}
.entete-large .dedans { min-height: 84px; align-items: flex-end; padding-bottom: var(--e4); }
.entete .titrage { flex: 1; min-width: 0; }
.entete .sur-titre {
  display: block; font-family: var(--police-chiffre); font-size: min(var(--t-xs), 3.2vw);
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin-bottom: 3px;
}
.entete h1 {
  font-family: var(--police-titre); font-size: min(var(--t-xl), 6.4vw); font-weight: 800;
  letter-spacing: .01em; line-height: 1.05; flex: 1; min-width: 0; overflow-wrap: anywhere;
}
.entete-large h1 { font-size: min(1.75rem, 7.4vw); }
.entete-large h1::first-letter { text-transform: uppercase; }

/* Bouton rond : retour, réglages. Cible de 44 px, dessin de 40. */
.rond {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--cible-min); height: var(--cible-min); flex: none;
  border-radius: var(--r-rond); border: 1px solid var(--ligne);
  background: var(--surface); color: var(--texte); cursor: pointer;
  transition: transform var(--d-court) var(--courbe), border-color var(--d-court);
}
.rond:active { transform: scale(.93); border-color: var(--ligne-2); }
.retour { margin-left: calc(var(--e1) * -1); }

/* ============================================================
   Titres de section
   ============================================================ */
.titre-section {
  display: flex; align-items: center; gap: var(--e3);
  font-family: var(--police-chiffre); font-size: min(var(--t-xs), 3.4vw);
  letter-spacing: .16em; text-transform: uppercase; color: var(--texte-3);
  margin: var(--e6) 0 var(--e3); overflow-wrap: anywhere;
}
.titre-section::after {
  content: ""; flex: 1; height: 1px; background: var(--ligne);
}
.titre-section span {
  font-size: var(--t-xs); letter-spacing: .06em; color: var(--accent);
  background: var(--fond-accent); border-radius: var(--r-rond); padding: 2px 9px; order: 3;
}

/* ============================================================
   Damier, signature de la marque
   ============================================================ */
.damier {
  height: 10px;
  background: conic-gradient(var(--marque) 25%, var(--damier-sombre) 0 50%, var(--marque) 0 75%, var(--damier-sombre) 0) 0 0/10px 10px;
}

/* ============================================================
   Cartes
   ============================================================ */
.carte, .course {
  position: relative;
  display: block;
  background: linear-gradient(180deg, var(--carte-haut), transparent 120px), var(--surface);
  border: 1px solid var(--ligne);
  border-radius: var(--r-m);
  padding: var(--e4);
  margin-bottom: var(--e3);
  overflow-wrap: anywhere;
  box-shadow: var(--ombre-carte);
}
/* Une carte casse les mots trop longs (adresses) pour ne jamais déborder,
   mais un montant ne se coupe pas : son symbole reste collé à ses chiffres. */
.montant {
  font-family: var(--police-chiffre); white-space: nowrap;
  overflow-wrap: normal; word-break: keep-all; flex: none;
}
.carte.cliquable, a.course { cursor: pointer; transition: transform var(--d-court) var(--courbe), border-color var(--d-moyen); }
.carte.cliquable:active, a.course:active { transform: scale(.985); border-color: var(--ligne-2); }

/* Apparition en cascade : courte, décalée, et supprimée si l'utilisateur
   a demandé moins d'animations. */
@media (prefers-reduced-motion: no-preference) {
  .course, .carte, .message, .tuile {
    animation: monte var(--d-long) var(--courbe) backwards;
    animation-delay: calc(var(--rang, 0) * 45ms);
  }
  @keyframes monte { from { opacity: 0; transform: translateY(10px); } }
}

/* ============================================================
   La carte d'une course : l'objet le plus regardé
   ============================================================ */
.course { padding: var(--e4) var(--e4) var(--e3); }
.course.vedette { border-color: color-mix(in srgb, var(--accent) 45%, var(--ligne)); }
.course.vedette::before {
  content: ""; position: absolute; inset: -1px -1px auto -1px; height: 3px;
  border-radius: var(--r-m) var(--r-m) 0 0;
  background: linear-gradient(90deg, var(--marque), var(--accent));
}

.course-tete { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--e3); }
.course .heure {
  font-family: var(--police-titre); font-size: min(2rem, 9vw); font-weight: 800;
  line-height: 1; letter-spacing: .01em; white-space: nowrap;
}
.course .heure .quand {
  display: block; font-family: var(--police-texte); font-size: var(--t-s);
  font-weight: 500; letter-spacing: 0; color: var(--texte-3); margin-top: 5px;
}

/* Le trajet se lit comme un trajet : deux points reliés par une ligne. */
.trajet { position: relative; margin: var(--e4) 0 var(--e3); padding-left: var(--e5); }
/* Le trait relie les deux points, et s'arrête au second : il part du bas de la
   puce de départ et descend jusqu'au centre de la puce d'arrivée. */
.etape.depart::after {
  content: ""; position: absolute; left: -19px; top: 18px; width: 2px;
  height: calc(100% - 12px + var(--e3)); border-radius: 2px;
  background: linear-gradient(var(--accent), var(--marque));
}
.etape { position: relative; min-width: 0; }
.etape + .etape { margin-top: var(--e3); }
.etape::before {
  content: ""; position: absolute; left: calc(var(--e5) * -1); top: 6px;
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--accent); background: var(--surface);
}
.etape.arrivee::before {
  border-color: var(--marque); background: var(--marque);
  box-shadow: 0 0 0 3px var(--fond-accent);
}
.etape b { display: block; font-size: var(--t-l); font-weight: 600; line-height: 1.3; }
.etape span { display: block; font-size: var(--t-s); color: var(--texte-3); margin-top: 1px; }

.course-pied {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
  padding-top: var(--e3); border-top: 1px solid var(--ligne); flex-wrap: wrap;
}
.course-pied .qui { color: var(--texte-2); font-size: var(--t-m); min-width: 0; }
.course-pied .ref { font-family: var(--police-chiffre); font-size: var(--t-xs); color: var(--texte-3); letter-spacing: .06em; }
.course-pied .prix {
  font-family: var(--police-chiffre); font-weight: 700; font-size: var(--t-l);
  white-space: nowrap;
}
.course .mot-client, .course .contexte {
  margin-top: var(--e3); color: var(--texte-2); font-size: var(--t-m); line-height: 1.45;
}
.course .contexte { color: var(--texte-3); font-size: var(--t-s); }

/* Les actions d'une carte, collées sous elle : même rythme, pas de carte vide. */
.course-actions { margin: calc(var(--e3) * -1) 0 var(--e5); }
.course-actions .paire { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--ecart-cible); }
.course-actions .paire .btn { padding: var(--e2) var(--e3); font-size: var(--t-m); white-space: normal; }

/* ============================================================
   Pastilles d'état : fond teinté, et toujours le mot écrit
   ============================================================ */
.statut {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  font-size: min(var(--t-xs), 3.4vw); font-weight: 700; letter-spacing: .02em;
  padding: 5px 11px; border-radius: var(--r-rond);
  background: var(--fond-neutre); color: var(--texte-3);
}
.statut::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.statut.attente   { color: var(--attention); background: var(--fond-attention); }
.statut.confirmee { color: var(--ok); background: var(--fond-ok); }
.statut.route     { color: var(--accent); background: var(--fond-accent); }
.statut.route::before { animation: battement 1.8s infinite; }
@keyframes battement { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .statut.route::before { animation: none; } }
.statut.terminee  { color: var(--texte-3); background: var(--fond-neutre); }
.statut.annulee, .statut.refusee { color: var(--danger); background: var(--fond-danger); }

/* ============================================================
   Boutons
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: var(--cible); padding: var(--e2) var(--e4); max-width: 100%;
  border: 0; border-radius: var(--r-rond); cursor: pointer;
  font-size: var(--t-l); font-weight: 600; white-space: nowrap;
  transition: transform var(--d-court) var(--courbe), background var(--d-court), box-shadow var(--d-court);
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-marque {
  background: linear-gradient(170deg, var(--marque-survol), var(--marque));
  color: var(--sur-marque); box-shadow: var(--ombre-marque);
}
.btn-marque:hover { filter: brightness(1.06); }
.btn-fantome { background: var(--surface); color: var(--texte); border: 1px solid var(--ligne-2); }
.btn-fantome:hover { border-color: var(--accent); }
.btn-danger { background: var(--fond-danger); color: var(--danger); border: 1px solid currentColor; }
.btn-plein { width: 100%; white-space: normal; }
.btn-grand { min-height: 58px; font-size: min(var(--t-xl), 5.6vw); font-family: var(--police-titre); letter-spacing: .02em; }
.boutons { display: grid; gap: var(--ecart-cible); margin-top: var(--e4); }
.boutons.deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.boutons.deux .btn { padding: var(--e2) var(--e3); font-size: var(--t-m); white-space: normal; }

/* Le bouton d'ajout est au centre de la barre, surélevé : toujours sous le
   pouce, et il ne passe jamais devant un bouton d'action d'une carte. */
.ajout-barre {
  display: flex; align-items: center; justify-content: center;
  margin: -16px auto 0; width: 54px; height: 54px; border-radius: var(--r-rond);
  background: linear-gradient(170deg, var(--marque-survol), var(--marque));
  color: var(--sur-marque); border: 3px solid var(--fond);
  box-shadow: 0 10px 22px -10px rgba(181,70,61,.6);
  transition: transform var(--d-moyen) var(--courbe);
}
.onglets a.ajout:active .ajout-barre { transform: scale(.9) rotate(90deg); }
.onglets a.ajout { padding-top: 0; justify-content: flex-start; }

/* ============================================================
   Barre d'onglets
   ============================================================ */
.onglets {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-barre);
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: rgba(var(--fond-rgb), .92);
  backdrop-filter: saturate(150%) blur(20px); -webkit-backdrop-filter: saturate(150%) blur(20px);
  border-top: 1px solid var(--ligne);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.onglets a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: var(--cible); padding: 6px 2px 4px; min-width: 0;
  color: var(--texte-3); font-size: min(var(--t-xs), 3.2vw); font-weight: 600;
  text-align: center;
}
.onglets .icone {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 30px; border-radius: var(--r-rond);
  transition: background var(--d-moyen) var(--courbe), color var(--d-moyen);
}
.onglets a[aria-current="page"] { color: var(--accent); }
.onglets a[aria-current="page"] .icone { background: var(--fond-accent); }
.onglets .nom { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onglets .pastille {
  position: absolute; top: -2px; right: 2px;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--r-rond); background: var(--marque); color: var(--sur-marque);
  font-family: var(--police-chiffre); font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--fond);
}

/* ============================================================
   Champs
   ============================================================ */
.champ { display: block; margin-bottom: var(--e4); }
.champ > span {
  display: block; font-size: var(--t-s); font-weight: 600; color: var(--texte-2);
  margin-bottom: 6px;
}
.champ input, .champ select, .champ textarea {
  width: 100%; min-width: 0; min-height: var(--cible);
  /* Jamais sous 16 px : en dessous, Safari sur iPhone zoome au moment où le
     champ prend le focus, et toute la page se décale sous le doigt. */
  font-size: max(16px, var(--t-m));
  padding: var(--e3); border-radius: var(--r-s);
  background: var(--surface); border: 1px solid var(--ligne-2); color: var(--texte);
  transition: border-color var(--d-court), box-shadow var(--d-court);
}
.champ textarea { min-height: 96px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--fond-accent); outline: none;
}
.champ .aide { display: block; font-size: var(--t-xs); color: var(--texte-3); margin-top: 5px; }
.champ.erreur input, .champ.erreur select { border-color: var(--danger); }
.champ .dit-erreur { display: block; font-size: var(--t-s); color: var(--danger); margin-top: 5px; font-weight: 600; }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); }

.choix { display: grid; gap: var(--ecart-cible); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choix label {
  display: flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: 56px; padding: var(--e3); cursor: pointer;
  background: var(--surface); border: 1px solid var(--ligne-2); border-radius: var(--r-m);
  font-weight: 600; text-align: center;
  transition: border-color var(--d-court), background var(--d-court), transform var(--d-court);
}
.choix label:active { transform: scale(.97); }
.choix label:has(input:checked) {
  border-color: var(--accent); background: var(--fond-accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.choix input[type="radio"], .choix input[type="checkbox"] {
  position: absolute; opacity: 0; width: 1px; height: 1px; border: 0; padding: 0;
}

input[type="checkbox"], input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  width: 28px; height: 28px; flex: none; margin: 0;
  border: 2px solid var(--ligne-2); border-radius: 8px;
  background: var(--surface); cursor: pointer;
  display: inline-grid; place-content: center;
  transition: border-color var(--d-court), background var(--d-court);
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]::before, input[type="radio"]::before {
  content: ""; width: 12px; height: 12px; transform: scale(0);
  transition: transform var(--d-court) var(--courbe);
  background: var(--sur-marque); border-radius: 2px;
  clip-path: polygon(14% 44%, 0 60%, 40% 100%, 100% 18%, 84% 2%, 38% 70%);
}
input[type="radio"]::before { border-radius: 50%; clip-path: none; width: 10px; height: 10px; }
input[type="checkbox"]:checked, input[type="radio"]:checked { background: var(--marque); border-color: var(--marque); }
input[type="checkbox"]:checked::before, input[type="radio"]:checked::before { transform: scale(1); }

/* ============================================================
   Messages
   ============================================================ */
.message {
  display: flex; gap: var(--e3); align-items: center;
  padding: var(--e3) var(--e4); border-radius: var(--r-m);
  border: 1px solid var(--ligne); background: var(--surface);
  margin-bottom: var(--e3); font-size: var(--t-m);
  box-shadow: var(--ombre-carte);
}
.message > div { flex: 1; min-width: 0; }
.message b { display: block; margin-bottom: 2px; }
.message .quoi-faire { color: var(--texte-2); font-size: var(--t-s); }
.message .chevron { color: var(--texte-3); font-size: var(--t-xl); }
.message.alerte { border-color: color-mix(in srgb, var(--attention) 55%, var(--ligne)); background: var(--fond-attention); }
.message.erreur { border-color: color-mix(in srgb, var(--danger) 55%, var(--ligne)); background: var(--fond-danger); }
.message.bien   { border-color: color-mix(in srgb, var(--ok) 55%, var(--ligne)); background: var(--fond-ok); }

.hors-ligne {
  display: none; align-items: center; gap: var(--e2);
  padding: var(--e2) var(--marge); background: var(--attention); color: #1a1205;
  font-size: var(--t-s); font-weight: 600;
}
body.sans-reseau .hors-ligne { display: flex; }

/* ============================================================
   Écran vide
   ============================================================ */
.vide { text-align: center; padding: var(--e7) var(--e4); color: var(--texte-2); }
.vide-signe {
  width: 84px; height: 84px; margin: 0 auto var(--e4);
  display: grid; place-content: center; border-radius: var(--r-rond);
  background: var(--fond-accent); color: var(--accent);
}
.vide .grand { font-family: var(--police-titre); font-size: var(--t-xl); color: var(--texte); margin-bottom: var(--e2); }
.vide .btn { margin-top: var(--e5); }

/* ============================================================
   Squelettes
   ============================================================ */
.sq { background: var(--surface-2); border-radius: var(--r-s); position: relative; overflow: hidden; }
.sq::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  animation: glisse 1.1s infinite;
}
@keyframes glisse { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .sq::after { animation: none; } }
.sq-ligne { height: 14px; margin-bottom: var(--e2); }
.sq-carte { height: 124px; margin-bottom: var(--e3); }

/* ============================================================
   Tuiles de chiffres
   ============================================================ */
.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: var(--e3); }
.tuile {
  background: linear-gradient(180deg, var(--carte-haut), transparent 90px), var(--surface);
  border: 1px solid var(--ligne); border-radius: var(--r-m); padding: var(--e4);
  box-shadow: var(--ombre-carte);
}
.tuile.accent { border-color: color-mix(in srgb, var(--accent) 40%, var(--ligne)); background: var(--fond-accent); }
.tuile .valeur {
  font-family: var(--police-chiffre); font-size: min(var(--t-xxl), 9vw); font-weight: 700;
  letter-spacing: -.03em; line-height: 1.05;
}
.tuile .valeur small { font-size: .5em; font-weight: 600; color: var(--texte-3); margin-left: 3px; }
.tuile .quoi { font-size: var(--t-s); color: var(--texte-3); margin-top: 6px; }

/* ============================================================
   Feuille montante
   ============================================================ */
.feuille {
  position: fixed; inset: auto 0 0 0; z-index: var(--z-feuille);
  background: var(--surface); border-radius: var(--r-l) var(--r-l) 0 0;
  border-top: 1px solid var(--ligne-2);
  padding: var(--e3) var(--marge) calc(var(--e5) + env(safe-area-inset-bottom, 0px));
  box-shadow: var(--ombre);
  transform: translateY(100%); transition: transform var(--d-long) var(--courbe);
  max-height: 92vh; overflow-y: auto;
}
.feuille[open], .feuille.ouverte { transform: translateY(0); }
.feuille .poignee { width: 42px; height: 5px; border-radius: 3px; background: var(--ligne-2); margin: 0 auto var(--e4); }
.feuille h2 { font-family: var(--police-titre); font-size: min(var(--t-xl), 6vw); margin-bottom: var(--e4); }
.voile {
  position: fixed; inset: 0; z-index: calc(var(--z-feuille) - 1);
  background: var(--voile); opacity: 0; pointer-events: none;
  backdrop-filter: blur(2px);
  transition: opacity var(--d-moyen);
}
.voile.vu { opacity: 1; pointer-events: auto; }

/* ============================================================
   Prix annoncé
   ============================================================ */
.prix-annonce { text-align: center; padding: var(--e5) 0 var(--e4); }
.prix-annonce .montant {
  font-family: var(--police-chiffre); font-size: min(var(--t-geant), 13vw); font-weight: 700;
  letter-spacing: -.04em; line-height: 1;
}
.prix-annonce .fourchette { color: var(--texte-2); font-size: var(--t-s); margin-top: var(--e2); }
.prix-annonce .lettre {
  display: inline-block; margin-top: var(--e3); font-size: var(--t-xs);
  font-family: var(--police-chiffre); letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); background: var(--fond-accent); border-radius: var(--r-rond); padding: 4px 12px;
}
.prix-annonce.calcul .montant { opacity: .35; transition: opacity var(--d-moyen); }
.detail-prix { list-style: none; margin-top: var(--e4); border-top: 1px solid var(--ligne); }
.detail-prix li {
  display: flex; justify-content: space-between; gap: var(--e3);
  padding: var(--e3) 0; border-bottom: 1px solid var(--ligne); font-size: var(--t-m);
}
.detail-prix li:last-child { border-bottom: 0; padding-bottom: 0; }
.detail-prix li span { color: var(--texte-2); }
.detail-prix b { font-family: var(--police-chiffre); font-weight: 600; white-space: nowrap; }

/* ============================================================
   Listes
   ============================================================ */
.liste { list-style: none; }
.liste > li { border-bottom: 1px solid var(--ligne); }
.liste > li:last-child { border-bottom: 0; }
.liste a, .liste button {
  display: flex; align-items: center; gap: var(--e3); width: 100%;
  min-height: 60px; padding: var(--e3) 0; background: none; border: 0; text-align: left; cursor: pointer;
  transition: padding-left var(--d-court) var(--courbe);
}
.liste a:active { padding-left: var(--e2); }
.liste .principal { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.liste .principal b { display: block; font-weight: 600; }
.liste .principal span { color: var(--texte-3); font-size: var(--t-s); }
.liste .cote { font-family: var(--police-chiffre); color: var(--texte-2); white-space: nowrap; }

/* ============================================================
   Tableau, sur grand écran
   ============================================================ */
.tableau { width: 100%; border-collapse: collapse; font-size: var(--t-m); }
.tableau th {
  text-align: left; font-size: var(--t-xs); letter-spacing: .1em; text-transform: uppercase;
  color: var(--texte-3); padding-bottom: var(--e2); border-bottom: 1px solid var(--ligne);
}
.tableau td { padding: var(--e3) var(--e2) var(--e3) 0; border-bottom: 1px solid var(--ligne); vertical-align: top; }
.tableau .nombre { font-family: var(--police-chiffre); text-align: right; white-space: nowrap; }
/* Une facture se lit d'un coup d'oeil : le montant ne part jamais hors champ,
   donc cette table se contente de la largeur disponible. */
.tableau-serre { table-layout: fixed; font-size: var(--t-s); }
.tableau-serre td, .tableau-serre th { word-break: break-word; }
.tableau-serre td:first-child, .tableau-serre th:first-child { width: 4.5em; }
.tableau-serre .nombre { width: 5.5em; font-size: var(--t-s); }
.defilant { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.defilant table { min-width: max-content; }

/* ============================================================
   Bandeau démonstration
   ============================================================ */
.demo {
  background: var(--attention); color: #1a1205; text-align: center;
  font-size: min(var(--t-xs), 3vw); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: calc(3px + env(safe-area-inset-top, 0px)) var(--e2) 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.demonstration .entete { padding-top: 0; }

/* ============================================================
   Peu de place : on empile plutôt que de serrer.
   Le seuil en em couvre le petit téléphone et la police système à 200 %.
   ============================================================ */
@media (max-width: 20em) {
  .boutons.deux, .duo, .choix, .course-actions .paire { grid-template-columns: 1fr; }
  .course .heure { font-size: var(--t-xl); }
  .btn svg { display: none; }
}

/* Place pour le bouton surélevé de la barre : il ne doit jamais recouvrir
   la dernière ligne utile ni un bouton d'action. */
#contenu { padding-bottom: var(--e7); }

/* ============================================================
   Grand écran : on étale, on ne refait pas
   ============================================================ */
@media (min-width: 900px) {
  body { padding-bottom: var(--e7); }
  .onglets {
    position: sticky; top: 0; bottom: auto;
    grid-template-columns: repeat(5, auto); justify-content: center; gap: var(--e5);
    border-top: 0; border-bottom: 1px solid var(--ligne);
  }
  .onglets a { flex-direction: row; gap: var(--e2); }
  .onglets .icone { width: 34px; }
  .flottant { bottom: var(--e6); }
  .duo-large { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e5); align-items: start; }
}

/* ============================================================
   Impression : la note et la facture sortent sans l'interface
   ============================================================ */
@media print {
  .onglets, .entete, .demo, .boutons, .message, .course-actions { display: none !important; }
  body { padding: 0; background: #fff; color: #000; }
  .carte, .course { border: 0; box-shadow: none; animation: none; }
}

/* ============================================================
   Détail d'une course : le prix prend la place qu'il mérite
   ============================================================ */
.course.detail { padding: var(--e5) var(--e4) var(--e4); }
.course.detail .heure { font-size: min(2.4rem, 11vw); }
.grand-prix {
  display: grid; justify-items: center; gap: 4px; text-align: center;
  margin: var(--e4) 0 var(--e2); padding: var(--e4) var(--e3);
  background: var(--fond-accent); border-radius: var(--r-m);
}
.grand-prix .combien {
  font-family: var(--police-chiffre); font-size: min(var(--t-geant), 12vw);
  font-weight: 700; letter-spacing: -.04em; line-height: 1;
}
.grand-prix .quoi { font-size: var(--t-s); color: var(--texte-2); }

/* ============================================================
   Pastilles d'identité et d'icône
   ============================================================ */
.jeton-nom {
  display: grid; place-content: center; flex: none;
  width: 42px; height: 42px; border-radius: var(--r-rond);
  font-family: var(--police-titre); font-size: 1.05rem; font-weight: 800; letter-spacing: .02em;
  color: hsl(var(--teinte, 10) 60% 29%);
  background: hsl(var(--teinte, 10) 62% 90%);
}
:root:not([data-theme="clair"]) .jeton-nom { color: hsl(var(--teinte, 10) 72% 78%); background: hsl(var(--teinte, 10) 38% 17%); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="sombre"]) .jeton-nom { color: hsl(var(--teinte, 10) 60% 29%); background: hsl(var(--teinte, 10) 62% 90%); }
}
.jeton-nom.pro { border-radius: var(--r-s); }

.jeton-icone {
  display: grid; place-content: center; flex: none;
  width: 40px; height: 40px; border-radius: 13px;
  background: var(--fond-neutre); color: var(--texte-2);
}
.jeton-icone.alerte { background: var(--fond-attention); color: var(--attention); }
.liste .chevron { color: var(--texte-3); font-size: var(--t-xl); line-height: 1; }

.tete-fiche { display: flex; align-items: center; gap: var(--e3); }
.tete-fiche .jeton-nom { width: 56px; height: 56px; font-size: 1.4rem; }
.tete-fiche b { font-size: min(var(--t-xl), 6vw); font-family: var(--police-titre); letter-spacing: .01em; }
.tete-fiche span { display: block; color: var(--texte-3); font-size: var(--t-s); }

/* ============================================================
   Écrans d'entrée : c'est le premier contact, il porte la marque
   ============================================================ */
.accueil {
  min-height: calc(100vh - 40px);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--e7) 0 var(--e6); position: relative;
}
.accueil::before {
  content: ""; position: absolute; inset: -20% 0 40% 0;
  background: var(--lueur); pointer-events: none; z-index: -1;
}
.marque-toit { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e3); margin-bottom: var(--e3); min-width: 0; }
.marque-toit .toit {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 7px 12px 6px 11px; border-radius: 8px 8px 4px 4px;
  background: linear-gradient(#fffaf3, #f1e3cf); color: #141414;
  font-family: var(--police-titre); font-weight: 900; font-size: min(1.1rem, 5.5vw);
  letter-spacing: .07em; line-height: 1;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 8px 24px -8px rgba(181,70,61,.5);
}
.marque-toit .toit i {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: #2fc777; box-shadow: 0 0 8px #46e08c;
  animation: clignote 2.6s infinite;
}
/* Tom ne roule pas : le témoin passe au rouge et cesse de clignoter.
   Un feu fixe se lit comme un arrêt, un feu qui bat comme une veille. */
.marque-toit .toit i.occupe {
  background: #d9413a; box-shadow: 0 0 8px rgba(217,65,58,.75); animation: none;
}
.marque-toit .nom-marque small.alerte { color: var(--danger); }
@keyframes clignote { 0%, 86%, 100% { opacity: 1; } 90% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .marque-toit .toit i { animation: none; } }
.marque-toit .nom-marque {
  font-family: var(--police-titre); font-weight: 800; font-size: min(1.6rem, 8vw);
  letter-spacing: .02em; line-height: 1; min-width: 0;
}
.marque-toit .nom-marque small {
  display: block; font-family: var(--police-chiffre); font-size: 10px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--texte-3);
  font-weight: 500; margin-top: 5px;
}
.accueil .accroche { color: var(--texte-2); font-size: var(--t-l); margin-bottom: var(--e6); }
.accueil form { margin-top: var(--e2); }

/* ============================================================
   Trajets habituels : un geste pour reprendre une course connue
   ============================================================ */
.habituels { display: grid; gap: var(--e3); }
.habituel {
  display: grid; gap: var(--e3); width: 100%; text-align: left; cursor: pointer;
  padding: var(--e4); border-radius: var(--r-m);
  background: linear-gradient(180deg, var(--carte-haut), transparent 100px), var(--surface);
  border: 1px solid var(--ligne); box-shadow: var(--ombre-carte);
  transition: transform var(--d-court) var(--courbe), border-color var(--d-court);
}
.habituel:active { transform: scale(.985); border-color: var(--accent); }
.mini-trajet { display: grid; gap: var(--e2); position: relative; padding-left: var(--e4); }
.mini-trajet span { font-weight: 600; font-size: var(--t-m); }
.mini-trajet span::before {
  content: ""; position: absolute; left: 0; width: 9px; height: 9px; border-radius: 50%;
  margin-top: 6px; border: 2px solid var(--accent); background: var(--surface);
}
.mini-trajet span:last-child::before { border-color: var(--marque); background: var(--marque); }
.mini-trajet::after {
  content: ""; position: absolute; left: 4px; top: 16px; bottom: 16px; width: 1px;
  background: var(--ligne-2);
}
.habituel-pied {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
  padding-top: var(--e3); border-top: 1px solid var(--ligne);
}
.habituel-pied .fois { font-size: var(--t-s); color: var(--texte-3); }
.habituel-pied .prix { font-family: var(--police-chiffre); font-weight: 700; }

/* ============================================================
   RÉSERVATION PUBLIQUE
   C'est l'écran qui transforme une visite en course : la marque
   en haut, le téléphone à portée, et le prix qui ne quitte
   jamais l'écran pendant la saisie.
   ============================================================ */
.entete-public {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e3);
  padding: calc(var(--e4) + env(safe-area-inset-top, 0px)) 0 var(--e4);
  position: relative;
}
.entete-public::after {
  content: ""; position: absolute; inset: -60% 0 auto 0; height: 300%;
  background: var(--lueur); pointer-events: none; z-index: -1;
}
.actions-publiques { display: flex; gap: var(--e2); flex: none; }
.actions-publiques .langue { font-family: var(--police-chiffre); font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.actions-publiques .appel { background: var(--marque); color: var(--sur-marque); border-color: transparent; }

/* Le demi-tour d'une page publique : discret, mais toujours là, et assez
   haut pour se toucher au pouce. */
.lien-retour {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--cible); margin-bottom: var(--e2);
  color: var(--texte-2); font-size: var(--t-s); font-weight: 600; text-decoration: none;
}
.lien-retour:active { color: var(--marque); }

.intro-publique { color: var(--texte-2); font-size: var(--t-l); line-height: 1.5; margin-bottom: var(--e3); }
.gages { list-style: none; display: flex; flex-wrap: wrap; gap: var(--e2); margin-bottom: var(--e6); }
.gages li {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t-s); font-weight: 600; color: var(--ok);
  background: var(--fond-ok); border-radius: var(--r-rond); padding: 6px 12px;
}

.sous-titre {
  font-family: var(--police-chiffre); font-size: min(var(--t-xs), 3.4vw);
  letter-spacing: .16em; text-transform: uppercase; color: var(--texte-3);
  margin: var(--e5) 0 var(--e3);
}

/* Le trajet se saisit dans un seul bloc, avec son rail et son échange. */
.bloc-trajet {
  position: relative; display: flex; gap: var(--e3); align-items: stretch;
  background: linear-gradient(180deg, var(--carte-haut), transparent 120px), var(--surface);
  border: 1px solid var(--ligne); border-radius: var(--r-m);
  padding: var(--e4) var(--e4) var(--e4) var(--e3);
  box-shadow: var(--ombre-carte);
}
/* Les deux points tombent au centre de leur champ : l'étiquette au-dessus
   fait 22 px, le champ 48 px, donc 46 px en haut et 24 px en bas. */
.bloc-trajet .rail { display: flex; flex-direction: column; align-items: center; padding: 46px 0 24px; flex: none; }
.bloc-trajet .pt { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--accent); background: var(--surface); flex: none; }
.bloc-trajet .pt.arrivee { border-color: var(--marque); background: var(--marque); }
.bloc-trajet .ligne { flex: 1; width: 2px; background: linear-gradient(var(--accent), var(--marque)); margin: 4px 0; border-radius: 2px; }
.bloc-trajet .champs { flex: 1; min-width: 0; display: grid; gap: var(--e3); }
.champ.sans-marge { margin-bottom: 0; }
.bloc-trajet .echanger {
  position: absolute; right: var(--e3); top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px;
}
.bloc-trajet .champs input { padding-right: 46px; }

/* Puces de raccourci : destinations fréquentes, créneaux. */
.puces { display: flex; flex-wrap: wrap; gap: var(--e2); }
.puce {
  min-height: var(--cible-min); padding: var(--e2) var(--e3); max-width: 100%;
  white-space: normal; text-align: left;
  border-radius: var(--r-rond); border: 1px solid var(--ligne-2);
  background: var(--surface); color: var(--texte); cursor: pointer;
  font-size: var(--t-s); font-weight: 600;
  transition: border-color var(--d-court), background var(--d-court), transform var(--d-court);
}
.puce:active { transform: scale(.96); }
.puce.choisie { border-color: var(--accent); background: var(--fond-accent); color: var(--accent); }

/* Compteurs : au doigt, on appuie, on ne tape pas. */
.compteur { margin-bottom: var(--e4); }
.compteur .etiquette { display: block; font-size: var(--t-s); font-weight: 600; color: var(--texte-2); margin-bottom: 6px; }
.boutons-compteur {
  display: flex; align-items: center; gap: var(--e2);
  background: var(--surface); border: 1px solid var(--ligne-2); border-radius: var(--r-rond);
  padding: 5px;
}
.boutons-compteur .rond { width: var(--cible-min); height: var(--cible-min); border: 0; background: var(--fond-neutre); font-size: 1.2rem; font-weight: 700; }
.boutons-compteur .rond:active { background: var(--fond-accent); color: var(--accent); }
.boutons-compteur input {
  flex: 1; min-width: 0; width: 100%; border: 0; background: none; text-align: center;
  /* Même raison : pas de zoom automatique sur iPhone. */
  font-family: var(--police-chiffre); font-size: var(--t-xl); font-weight: 700;
  min-height: var(--cible-min); padding: 0; -moz-appearance: textfield;
}
.boutons-compteur input::-webkit-outer-spin-button,
.boutons-compteur input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.mention { font-size: var(--t-xs); color: var(--texte-3); line-height: 1.5; margin: var(--e4) 0; }

/* La barre de prix ne quitte pas l'écran : elle colle en bas pendant
   toute la saisie, et porte le bouton de validation. */
.barre-prix {
  position: sticky; bottom: 0; z-index: var(--z-barre);
  display: flex; align-items: center; gap: var(--e3);
  margin: var(--e5) calc(var(--marge) * -1) 0;
  padding: var(--e3) var(--marge) calc(var(--e3) + env(safe-area-inset-bottom, 0px));
  background: rgba(var(--fond-rgb), .94);
  backdrop-filter: saturate(150%) blur(18px); -webkit-backdrop-filter: saturate(150%) blur(18px);
  border-top: 1px solid var(--ligne);
}
.barre-prix .chiffre { flex: 1 1 42%; min-width: 0; }
.barre-prix .montant {
  display: block; font-family: var(--police-chiffre); font-size: min(1.65rem, 8vw);
  font-weight: 700; letter-spacing: -.03em; line-height: 1.1;
}
.barre-prix .fourchette {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: var(--t-xs); color: var(--texte-3); margin-top: 2px; line-height: 1.3;
}
.barre-prix .lettre {
  display: block; font-size: var(--t-xs); color: var(--accent); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.barre-prix .btn { flex: none; }
.barre-prix.calcul .montant { opacity: .4; }

/* Écran de réussite : une coche, une carte, trois étapes. */
.reussite { text-align: center; padding: var(--e6) 0 var(--e5); }
.reussite .coche {
  width: 76px; height: 76px; margin: 0 auto var(--e4);
  display: grid; place-content: center; border-radius: var(--r-rond);
  background: var(--fond-ok); color: var(--ok);
  animation: pose var(--d-long) var(--courbe);
}
@keyframes pose { from { transform: scale(.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .reussite .coche { animation: none; } }
.reussite h2 { font-family: var(--police-titre); font-size: min(1.6rem, 8vw); margin-bottom: var(--e2); }
.reussite p { color: var(--texte-2); }

.etapes { list-style: none; margin: var(--e5) 0; display: grid; gap: var(--e3); }
.etapes li { display: flex; align-items: flex-start; gap: var(--e3); color: var(--texte-2); font-size: var(--t-m); }
.etapes .num {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-content: center;
  background: var(--fond-accent); color: var(--accent);
  font-family: var(--police-chiffre); font-size: 12px; font-weight: 700;
}

@media (min-width: 760px) {
  .barre-prix { border-radius: var(--r-m); border: 1px solid var(--ligne); margin-inline: 0; bottom: var(--e4); }
}

/* ============================================================
   ESPACE CLIENT
   ============================================================ */
.bonjour { font-family: var(--police-titre); font-size: min(1.5rem, 7.5vw); margin-bottom: var(--e4); }
.pied-client {
  text-align: center; color: var(--texte-3); font-size: var(--t-s);
  margin: var(--e7) 0 var(--e5);
}
.pied-client a {
  display: block; font-family: var(--police-chiffre); font-size: var(--t-l);
  font-weight: 700; color: var(--accent); margin-top: 6px;
}

/* La note de course et la facture sont présentées comme le reçu
   qu'elles sont : bande damier en tête, total détaché. */
.recu {
  overflow: hidden; border-radius: var(--r-m); border: 1px solid var(--ligne);
  background: var(--surface); box-shadow: var(--ombre-carte); margin-bottom: var(--e4);
}
.recu .damier { height: 8px; }
.recu-dedans { padding: var(--e4); }
.recu-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e3); }
.recu-tete b { font-family: var(--police-titre); font-size: min(var(--t-xl), 6vw); display: block; }
.recu-tete span { font-size: var(--t-xs); color: var(--texte-3); }
.recu-tete .numero { font-family: var(--police-chiffre); font-size: var(--t-s); color: var(--texte-3); white-space: nowrap; }
.recu .detail-prix { margin-top: var(--e4); }
.recu .detail-prix li.total {
  border-bottom: 0; padding-top: var(--e4); margin-top: var(--e2);
  border-top: 2px solid var(--ligne-2);
}
.recu .detail-prix li.total span { font-size: var(--t-l); font-weight: 600; color: var(--texte); }
.recu .detail-prix li.total b { font-size: var(--t-xl); }
.recu .mention { margin: var(--e4) 0 0; }

/* Un trajet habituel est aussi un lien dans l'espace client. */
a.habituel { text-decoration: none; color: inherit; }
a.habituel .habituel-pied .prix { color: var(--accent); font-family: var(--police-texte); font-size: var(--t-m); }

/* ============================================================
   ATELIER DE DÉMARRAGE
   ============================================================ */
.compte-etapes {
  font-family: var(--police-chiffre); font-size: min(var(--t-xs), 3.2vw); letter-spacing: .12em;
  text-transform: uppercase; color: var(--texte-3); flex: none;
}
.jauge { height: 4px; border-radius: 2px; background: var(--fond-neutre); overflow: hidden; margin-bottom: var(--e5); }
.jauge span {
  display: block; height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--marque), var(--accent));
  transition: width var(--d-long) var(--courbe);
}
.titre-atelier { font-family: var(--police-titre); font-size: min(1.7rem, 8.5vw); margin-bottom: var(--e2); }

/* ============================================================
   Élasticité : ce que la police système à 200 % met à l'épreuve
   ============================================================ */

/* Les contrôles natifs de date se dimensionnent sur leur police : sans
   plafond, un champ « datetime-local » réclame plus de 450 px. */
.champ input[type="date"], .champ input[type="datetime-local"], .champ input[type="month"] {
  font-size: max(16px, min(1rem, 4.4vw)); max-width: 100%;
}

/* Une ligne de détail passe à la ligne plutôt que d'élargir la page. */
.detail-prix li { flex-wrap: wrap; }
.detail-prix li span { min-width: 0; }

/* La barre de prix s'empile quand le bouton ne tient plus à côté du montant. */
.barre-prix { flex-wrap: wrap; }
.barre-prix .btn { flex: 1 1 52%; }

/* Un nom de client cliquable est une cible, pas une ligne de texte. */
.carte a:not(.btn):not(.rond) { min-height: var(--cible-min); display: inline-flex; align-items: center; }
.carte a.btn, .carte a.rond { min-height: var(--cible); }

/* Le titre d'un reçu et son total restent dans le cadre. */
.recu .detail-prix li.total b { font-size: min(var(--t-xl), 7vw); }
.recu .detail-prix li.total span { font-size: min(var(--t-l), 4.6vw); }

/* ============================================================
   SUIVI D'UNE COURSE
   ============================================================ */
.suivi-etat { text-align: center; padding: var(--e5) 0 var(--e4); }
.suivi-etat h1 { font-family: var(--police-titre); font-size: min(1.9rem, 9vw); line-height: 1.1; margin-bottom: var(--e2); }
.suivi-etat p { color: var(--texte-2); }
.pastille-vivante {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  background: var(--texte-3); margin-bottom: var(--e3);
}
.pastille-vivante.bat { background: var(--ok); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); animation: onde 2s infinite; }
@keyframes onde {
  70% { box-shadow: 0 0 0 14px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .pastille-vivante.bat { animation: none; } }

.carte-suivi {
  border-radius: var(--r-m); overflow: hidden; border: 1px solid var(--ligne);
  box-shadow: var(--ombre-carte);
}
#plan { height: 46vh; min-height: 240px; background: var(--surface-2); }
.leaflet-container { font-family: var(--police-texte); background: var(--surface-2); }
.leaflet-control-attribution { font-size: 10px; }

#etat-position { display: block; font-size: var(--t-s); color: var(--texte-3); margin-top: var(--e2); text-align: center; }
#etat-position.actif { color: var(--ok); font-weight: 600; }

.code-suivi {
  font-family: var(--police-chiffre); font-size: min(2.2rem, 11vw); font-weight: 700;
  letter-spacing: .22em; text-align: center; color: var(--accent);
  background: var(--fond-accent); border-radius: var(--r-m);
  padding: var(--e4) var(--e2); margin: var(--e4) 0;
}

.puce-jour { display: inline-flex; align-items: center; justify-content: center; min-width: 62px; cursor: pointer; }
.puce-jour:has(input:checked) { border-color: var(--accent); background: var(--fond-accent); color: var(--accent); }

/* Le fond de carte de l'IGN est clair : en thème sombre, on l'assombrit sans
   l'inverser, pour que les rues restent des rues. */
:root:not([data-theme="clair"]) .leaflet-tile { filter: brightness(.72) saturate(.85) contrast(1.06); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="sombre"]) .leaflet-tile { filter: none; }
}

/* Entrée de démonstration : visible seulement en local, avec le jeu fictif. */
.entree-demo {
  margin-top: var(--e6); padding: var(--e4);
  border: 1px dashed var(--ligne-2); border-radius: var(--r-m);
}
.entree-demo p {
  font-family: var(--police-chiffre); font-size: min(var(--t-xs), 3.2vw);
  letter-spacing: .12em; text-transform: uppercase; color: var(--texte-3);
  text-align: center; margin-bottom: var(--e3);
}
.entree-demo .boutons { margin-top: 0; }

/* ============================================================
   DISPONIBILITÉ
   Le même feu que sur le toit, en grand : Tom doit pouvoir le
   lire et le changer sans réfléchir, au feu rouge.
   ============================================================ */
.disponibilite {
  border-radius: var(--r-m); padding: var(--e4); margin-bottom: var(--e5);
  border: 1px solid var(--ligne); background: var(--surface);
  box-shadow: var(--ombre-carte);
}
.disponibilite.libre { border-color: color-mix(in srgb, var(--ok) 45%, var(--ligne)); background: var(--fond-ok); }
.disponibilite.occupe { border-color: color-mix(in srgb, var(--danger) 45%, var(--ligne)); background: var(--fond-danger); }
.disponibilite .dedans { display: flex; gap: var(--e3); align-items: flex-start; }
.disponibilite .feu {
  width: 16px; height: 16px; border-radius: 50%; flex: none; margin-top: 3px;
}
.disponibilite.libre .feu { background: var(--ok); box-shadow: 0 0 10px color-mix(in srgb, var(--ok) 60%, transparent); animation: clignote 2.6s infinite; }
.disponibilite.occupe .feu { background: var(--danger); box-shadow: 0 0 10px color-mix(in srgb, var(--danger) 60%, transparent); }
@media (prefers-reduced-motion: reduce) { .disponibilite.libre .feu { animation: none; } }
.disponibilite b { display: block; font-size: var(--t-l); }
.disponibilite span { color: var(--texte-2); font-size: var(--t-s); }
.disponibilite form { margin-top: var(--e4); }
.motif-arret {
  width: 100%; min-height: var(--cible); margin-bottom: var(--e3);
  padding: var(--e3); border-radius: var(--r-s); font-size: max(16px, var(--t-m));
  background: var(--surface); border: 1px solid var(--ligne-2); color: var(--texte);
}

/* Un montant reste d’une pièce : ni le symbole ni les centimes ne passent
   seuls à la ligne suivante. */
.tuile .valeur, .grand-prix .combien, .barre-prix .montant,
.detail-prix b, .course-pied .prix, .habituel-pied .prix,
.liste .cote, .tableau .nombre { white-space: nowrap; }

/* Le graphique des quinze jours : les barres tiennent dans leur carte, et
   une hauteur en pourcentage ne peut pas déborder du cadre. */
.barres { display: flex; align-items: flex-end; gap: 3px; height: 120px; }
.barre {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center; gap: 4px; height: 100%;
}
.barre .trait {
  width: 100%; background: var(--marque); border-radius: 3px 3px 0 0;
  min-height: 2px; max-height: calc(100% - 16px);
}
.barre .jour { font-size: 10px; color: var(--texte-3); line-height: 1; height: 11px; }

/* ============================================================
   Bandeau de semaine de l'agenda
   Sept jours sur une largeur de téléphone : le numéro porte le
   jour, et les courses se comptent en points plutôt qu'en
   chiffres collés au numéro.
   ============================================================ */
.semaine {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 2px; padding: var(--e2);
}
.semaine a {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-height: var(--cible); padding: var(--e2) 0 6px;
  border-radius: var(--r-s); color: var(--texte-2); min-width: 0;
  transition: background var(--d-court);
}
.semaine .jour {
  font-size: min(10px, 2.6vw); letter-spacing: .04em; text-transform: uppercase;
  color: var(--texte-3);
}
.semaine b { font-family: var(--police-chiffre); font-size: min(var(--t-m), 3.8vw); font-weight: 700; }
.semaine .points { display: flex; gap: 2px; align-items: center; height: 6px; }
.semaine .points i { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.semaine .points small { font-size: 8px; color: var(--accent); line-height: 1; }
.semaine a.hui b { color: var(--accent); }
.semaine a.ici { background: var(--marque); color: var(--sur-marque); }
.semaine a.ici .jour, .semaine a.ici b { color: var(--sur-marque); }
.semaine a.ici .points i, .semaine a.ici .points small { background: var(--sur-marque); color: var(--sur-marque); }