:root {
  --navy-900: #0b1f3a;
  --navy-800: #122a4d;
  --navy-700: #1b3a66;
  --navy-050: #e8edf7;
  --gold-500: #c8a24a;
  --gold-100: #f4ead0;
  --ink: #0f1620;
  --ink-soft: #4a5568;
  --paper: #ffffff;
  --paper-alt: #f6f4ee;
  --line: #e2ded2;
  --danger: #b3261e;
  --danger-bg: #fbeceb;
  --med-green: #1e8e3e;
  --amber-500: #c2760a;
  --amber-100: #fbebd3;
  /* Boutons "premium" (raccourcis + fleches de date, voir .outil-icone-rond
     et .bouton-chevron) : blanc casse legerement bleute, fine bordure
     beige/doree, ombre douce - meme habillage partage entre les deux, pour
     une identite visuelle coherente. */
  --premium-degrade: linear-gradient(180deg, #fdfeff 0%, #f5f4fa 100%);
  --premium-bordure: rgba(200, 162, 74, 0.4);
  --premium-ombre: 0 3px 6px rgba(11, 31, 58, 0.14), 0 1px 2px rgba(11, 31, 58, 0.06);
  --premium-ombre-enfonce: 0 1px 2px rgba(11, 31, 58, 0.1);
  --med-green-light: #e7f6ec;
  --radius: 12px;
  --shadow: 0 10px 26px -14px rgba(11, 31, 58, 0.35);
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper-alt);
}

/* --- Page de connexion (et "compte en attente", meme carte - voir
   en-attente.html) --- */

.page-connexion {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  /* Meme degrade que les icones/en-tetes "premium" ailleurs dans l'appli
     (voir .apercu-horaires-icone, .nav-bouton-central) : un fond uni
     paper-alt rendait cet ecran plus "generique" que le reste de l'appli,
     alors que c'est le tout premier ecran vu par chaque chauffeur. */
  background: linear-gradient(160deg, #0b1f3a 0%, #14294b 45%, #1c3d6b 100%);
}

.carte-connexion {
  position: relative;
  background: var(--paper);
  border-radius: 20px;
  box-shadow: 0 30px 70px -25px rgba(0, 0, 0, 0.55);
  padding: 36px 32px 32px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  overflow: hidden;
}

/* Fin liseré doré en tête de carte : seul accent de couleur repris du
   reste de l'appli sur cet ecran, sinon entierement navy/blanc. */
.carte-connexion::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--gold-500), #eecf8e, var(--gold-500));
}

.connexion-bandeau {
  display: block;
  width: 100%;
  max-width: 240px;
  margin: 4px auto 22px;
}

.carte-connexion h1 {
  margin: 0 0 8px;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--navy-900);
}

.sous-titre {
  margin: 0 0 28px;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.bouton-google {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  width: 100%;
  padding: 13px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 8px 18px -10px rgba(11, 31, 58, 0.3);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.bouton-google:hover { box-shadow: 0 10px 22px -8px rgba(11, 31, 58, 0.35); transform: translateY(-1px); }
.bouton-google:active { transform: translateY(0); box-shadow: 0 4px 10px -6px rgba(11, 31, 58, 0.3); }

.formulaire-connexion { display: flex; flex-direction: column; text-align: left; gap: 6px; }
.formulaire-connexion label { font-size: 0.85rem; font-weight: 600; color: var(--ink); margin-top: 6px; }
.formulaire-connexion input {
  width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 10px;
  border: 1.5px solid var(--line); background: var(--paper-alt); font: inherit; color: var(--ink);
}
.formulaire-connexion input:focus { outline: none; border-color: var(--navy-700); background: var(--paper); }
.bouton-connexion {
  margin-top: 14px; padding: 13px 18px; border: none; border-radius: 999px;
  background: var(--navy-900); color: #fff; font: inherit; font-weight: 700; cursor: pointer;
  box-shadow: 0 8px 18px -10px rgba(11, 31, 58, 0.5);
}
.bouton-connexion:disabled { opacity: 0.6; cursor: default; }
.connexion-erreur { margin: 8px 0 0; padding: 10px 12px; border-radius: 10px; background: #fbeceb; color: #b3261e; font-size: 0.85rem; font-weight: 600; }
.lien-connexion { margin-top: 14px; background: none; border: none; color: var(--navy-700); font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.separateur-connexion { display: flex; align-items: center; gap: 10px; margin: 18px 0; color: var(--ink-soft); font-size: 0.8rem; }
.separateur-connexion::before, .separateur-connexion::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.mention {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 24px 0 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--paper-alt);
  border: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--ink-soft);
  line-height: 1.5;
  text-align: left;
}

.mention-icone { flex-shrink: 0; margin-top: 2px; color: var(--navy-700); }

/* --- Connexion, version soignee (index.html) : bandeau EasyTaxi plein
   cadre en tete de carte, champs a icone, boutons en relief. Limitee a
   .carte-connexion-v2 pour ne pas toucher la page "compte en attente". */

.page-connexion:has(.carte-connexion-v2) {
  background:
    radial-gradient(120% 60% at 85% 0%, rgba(200, 162, 74, 0.22), transparent 60%),
    radial-gradient(90% 50% at 0% 100%, rgba(28, 61, 107, 0.9), transparent 70%),
    linear-gradient(165deg, #06121f 0%, #0b1f3a 45%, #14294b 100%);
}

.carte-connexion-v2 {
  padding: 0;
  max-width: 400px;
  border-radius: 26px;
  box-shadow:
    0 40px 80px -30px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(200, 162, 74, 0.35),
    0 0 60px -20px rgba(200, 162, 74, 0.35);
  animation: connexion-arrivee 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}

.carte-connexion-v2::before { display: none; }

@keyframes connexion-arrivee {
  from { opacity: 0; transform: translateY(18px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.connexion-entete {
  position: relative;
  aspect-ratio: 3 / 1;
  background: #0b1f3a;
  overflow: hidden;
}

.connexion-entete-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Liseré doré sous le bandeau, comme une plaque gravee. */
.connexion-entete::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold-500) 20%, #f3d99a 50%, var(--gold-500) 80%, transparent);
}

.connexion-corps { padding: 26px 28px 28px; }

.connexion-surtitre {
  margin: 0 0 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #a07f2c;
}

.carte-connexion-v2 h1 {
  margin: 0 0 6px;
  font-size: 1.45rem;
  letter-spacing: 0.04em;
}

.carte-connexion-v2 .sous-titre { margin-bottom: 22px; }

.carte-connexion-v2 .formulaire-connexion label {
  font-size: 0.78rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 10px;
}

.champ-connexion {
  position: relative;
  display: flex;
  align-items: center;
}

.champ-connexion[hidden] { display: none; }

.champ-connexion-icone {
  position: absolute;
  left: 14px;
  width: 20px;
  height: 20px;
  color: #8a94a6;
  pointer-events: none;
  transition: color 0.15s ease;
}

.carte-connexion-v2 .formulaire-connexion input {
  padding: 14px 44px 14px 44px;
  border-radius: 14px;
  border: 1.5px solid #e6e1d3;
  background: #f8f6f0;
  font-size: 1rem;
  box-shadow: inset 0 2px 4px rgba(11, 31, 58, 0.06);
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.carte-connexion-v2 .formulaire-connexion input::placeholder { color: #b3b8c2; }

.carte-connexion-v2 .formulaire-connexion input:focus {
  border-color: var(--gold-500);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(200, 162, 74, 0.18);
}

.champ-connexion:focus-within .champ-connexion-icone { color: var(--navy-900); }

.champ-connexion-oeil {
  position: absolute;
  right: 6px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: #8a94a6;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.champ-connexion-oeil svg { width: 20px; height: 20px; }
.champ-connexion-oeil.actif { color: var(--navy-900); background: rgba(200, 162, 74, 0.15); }

/* Bouton principal bombe (meme relief que le bouton + de la barre du bas) :
   s'enfonce a l'appui. */
.carte-connexion-v2 .bouton-connexion {
  position: relative;
  margin-top: 20px;
  padding: 15px 18px;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
  background: linear-gradient(160deg, #1c3d6b 0%, var(--navy-900) 55%, #071427 100%);
  box-shadow:
    0 12px 22px -10px rgba(11, 31, 58, 0.6),
    inset 0 1.5px 1.5px rgba(255, 255, 255, 0.3),
    inset 0 -3px 5px rgba(0, 0, 0, 0.3);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease;
}

.carte-connexion-v2 .bouton-connexion::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
  opacity: 0.8;
}

.carte-connexion-v2 .bouton-connexion:active:not(:disabled) {
  transform: translateY(2px) scale(0.98);
  box-shadow:
    0 4px 8px -4px rgba(11, 31, 58, 0.5),
    inset 0 2px 5px rgba(0, 0, 0, 0.45),
    inset 0 -1px 1px rgba(255, 255, 255, 0.12);
  transition: transform 0.06s ease-out, box-shadow 0.06s ease-out;
}

.carte-connexion-v2 .lien-connexion { margin-top: 16px; }

.carte-connexion-v2 .bouton-google {
  padding: 14px 18px;
  border-color: #e6e1d3;
  background: linear-gradient(180deg, #ffffff 0%, #f7f5ef 100%);
  box-shadow: 0 8px 18px -12px rgba(11, 31, 58, 0.35), inset 0 -2px 0 rgba(11, 31, 58, 0.05);
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease;
}

.carte-connexion-v2 .bouton-google:active {
  transform: translateY(2px) scale(0.98);
  box-shadow: inset 0 2px 5px rgba(11, 31, 58, 0.12);
  transition: transform 0.06s ease-out, box-shadow 0.06s ease-out;
}

.carte-connexion-v2 .mention {
  background: linear-gradient(180deg, #fbf8f0, #f6f1e4);
  border-color: rgba(200, 162, 74, 0.3);
}

.carte-connexion-v2 .mention-icone { color: #a07f2c; }

@media (max-width: 420px) {
  .page-connexion:has(.carte-connexion-v2) { padding: 16px; }
  .connexion-corps { padding: 22px 20px 24px; }
}

/* --- Tableau de bord --- */

.entete {
  color: var(--paper);
  padding: 0 20px;
  /* Reduit d'environ 20% (70px -> 56px) pour une interface plus compacte -
     coincide avec la hauteur deja utilisee pour la page "bons" (voir
     override juste en dessous, devenu inutile mais laisse pour ne rien
     casser si les deux valeurs devaient un jour re-diverger). */
  height: 56px;
  display: flex;
  align-items: center;
  /* "flex-end" et non "space-between" : le bandeau est desormais en
     position absolute (sorti du flux), .entete-actions est donc le seul
     enfant restant dans le flux flex - avec un seul enfant,
     "space-between" le colle au bord GAUCHE (rien a "espacer entre"),
     ce qui cachait le bouton profil derriere le bandeau a gauche. */
  justify-content: flex-end;
  /* Espace de securite demande entre le bandeau et le bouton profil. */
  gap: 20px;
  /* Ombre allegee (premium mais discrete) : la precedente, plus marquee,
     detonnait avec le reste de la refonte compacte. */
  box-shadow: 0 3px 10px -6px rgba(11, 31, 58, 0.4);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Bandeau plein cadre (bord a bord, plus de logo isole sur un fond bleu
   separe - un seul et meme bleu, celui de l'image) : couvre tout
   l'en-tete, recadre pour deborder proprement plutot que d'etre deforme
   (object-fit: cover). "left center" garde le logo cale a gauche quel
   que soit le rognage vertical necessaire pour remplir la hauteur. */
.bandeau-entete {
  position: absolute;
  /* Deborde d'1px de chaque cote (au lieu d'un simple "inset: 0") :
     sans ca, un arrondi de sous-pixel selon l'ecran laissait parfois
     passer un fin trait clair (fond de page visible) tout en haut du
     bandeau, entre le bord de l'image et celui de l'en-tete. */
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  object-fit: cover;
  object-position: left center;
  z-index: 0;
}

.entete-actions {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
}

.bouton-profil {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--paper);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
}

.bouton-profil svg { width: 20px; height: 20px; }

.bouton-profil:hover { background: rgba(255, 255, 255, 0.2); }

/* Pastille de compte sur un rond d'en-tete (ex: nombre de bons de
   transport actifs) - meme esprit que .nav-onglet-badge, positionnee pour
   un rond de 40px plutot qu'une pastille de la barre de navigation. */
.badge-header {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  border: 1.5px solid var(--navy-900);
}

.reglages-compte-info {
  margin: -4px 0 12px;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

#choix-calendrier {
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: var(--navy-800);
  color: var(--paper);
  font-size: 0.85rem;
}

/* Boutons ronds "premium" du selecteur de date (voir --premium-* plus haut)
   - 52px : assez grand pour une zone tactile confortable (largement au-dessus
   du minimum de 44px) sans dominer la capsule de date entre les deux. */
.bouton-chevron {
  position: relative;
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border: 1px solid var(--premium-bordure);
  background: var(--premium-degrade);
  color: var(--navy-800);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--premium-ombre);
  transition: transform 0.08s ease, box-shadow 0.08s ease, border-color 0.1s ease;
}

.bouton-chevron svg { width: 20px; height: 20px; }
.bouton-chevron:hover { border-color: var(--gold-500); }
.bouton-chevron:active {
  transform: translateY(2px) scale(0.96);
  box-shadow: var(--premium-ombre-enfonce);
}

/* Capsule centrale : meme habillage premium, legerement plus compact que
   les boutons ronds (padding reduit) pour rester visuellement secondaire
   par rapport aux fleches. */
.capsule-date {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--premium-degrade);
  border: 1px solid var(--premium-bordure);
  color: var(--navy-800);
  box-shadow: var(--premium-ombre);
}

.capsule-date .icone-capsule { width: 17px; height: 17px; flex-shrink: 0; }

.capsule-date input[type="date"] {
  border: none;
  background: transparent;
  padding: 0;
  font-family: var(--font-body);
  color: var(--navy-900);
  font-weight: 600;
}

/* Sur sa propre ligne, SOUS la nav fleche/capsule/fleche (voir
   .ligne-aujourdhui plus bas, app.html/dispatch.html) - jamais partage
   avec elle : y ecrire "position: absolute" pour le sortir du flux (essaye
   d'abord) le faisait chevaucher la fleche "Jour suivant" plutot que de
   trouver une vraie place libre a cote (le trio fleche/capsule/fleche
   remplit deja toute la largeur de sa ligne). Cette ligne separee reste
   toujours parfaitement centree, et n'existe (en hauteur) que lorsque le
   bouton est visible - jamais d'espace reserve pour rien le reste du
   temps, cas de tres loin le plus frequent. */
.ligne-aujourdhui {
  display: flex;
  justify-content: center;
  padding: 0 16px;
}

.bouton-aujourdhui {
  margin-top: 6px;
  border: none;
  background: var(--navy-050);
  color: var(--navy-900);
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.bouton-aujourdhui:hover { background: #dbe4f2; }

/* Rangee compacte au-dessus de la liste des courses : PDF multi, Bons de
   transport, Mon equipe, Facture, repartis regulierement sur toute la
   largeur (space-evenly) - remplace les deux cartes empilees d'avant (PDF
   multi/Mon equipe, puis Bons/Facture) qui prenaient trop de hauteur une
   fois beaucoup de courses dans la journee (validation explicite du
   chauffeur : "voir mieux les courses"). Une seule ligne, quatre boutons
   carres arrondis "premium" identiques (.outil-icone-rond ci-dessous),
   jamais de texte : l'icone (+ le petit trait dore dessous) suffit, y
   compris pour "PDF multi" (bascule un mode) face aux trois autres
   (ouvrent une page) - validation explicite egalement. */
.barre-outils-feuille {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 6px;
  padding: 8px 16px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.outils-feuille-date {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
}

/* Correctif mobile du selecteur de date (fleche gauche / capsule / fleche
   droite) : sur un ecran etroit, le "flex-wrap: wrap" ci-dessus faisait
   passer les deux fleches au-dessus et en dessous de la capsule au lieu de
   rester sur la meme ligne (la capsule, avec son input date natif, est a
   elle seule plus large que la place disponible des lors qu'elle partage
   sa ligne avec d'autres elements). Sur app.html, le selecteur a ete sorti
   de .barre-outils-feuille (qui ne contient plus que les 4 icones) pour
   vivre seul sur sa propre ligne pleine largeur - voir .feuille-barre-date
   ci-dessous et son pendant .dispatch-barre-date (dispatch.css) : les deux
   pages ont donc desormais toute la largeur de l'ecran pour ce composant,
   d'ou un seul traitement, sans cas particulier par page. */
@media (max-width: 600px) {
  .outils-feuille-date {
    flex-wrap: nowrap;
    gap: 5px;
    min-width: 0;
  }

  .outils-feuille-date .capsule-date {
    min-width: 0;
    flex: 1 1 auto;
    justify-content: center;
  }

  .outils-feuille-date .capsule-date input[type="date"] {
    /* Un <input type="date"> a une largeur minimale intrinseque (ses
       champs jour/mois/annee) que flexbox respecte par defaut (min-width:
       auto herite du contenu) meme quand son parent a retreci - sans ce
       min-width:0 explicite, le champ deborderait de la capsule au lieu de
       s'adapter a la place disponible. */
    min-width: 0;
    flex: 1 1 auto;
  }
}

/* Ligne pleine largeur du selecteur de date sur la page Feuille (app.html) :
   meme trio fleche/capsule/fleche que sur Dispatch, meme habillage que
   .dispatch-barre-date (dispatch.css) - desormais sous la rangee d'icones
   (.barre-outils-feuille), plus a cote, pour lui laisser toute la largeur
   de l'ecran (voir note mobile ci-dessus). */
.feuille-barre-date {
  padding: 8px 16px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

/* La case "PDF multi" (toggle) et les liens (Bons/Equipe/Facture) partagent
   exactement le meme carre arrondi "premium" - seul l'etat coche du
   premier le distingue (fond navy plein), jamais leur forme ni leur
   taille. Meme habillage (degrade/bordure/ombre) que les fleches de date
   (.bouton-chevron, --premium-*), pour une identite visuelle coherente
   sur toute cette rangee d'outils. */
.outil-icone-toggle { position: relative; display: inline-flex; flex-shrink: 0; }

.outil-icone-case {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.outil-icone-rond {
  position: relative;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  background: var(--premium-degrade);
  border: 1px solid var(--premium-bordure);
  color: var(--navy-800);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  box-shadow: var(--premium-ombre);
  transition: transform 0.08s ease, box-shadow 0.08s ease, background-color 0.1s ease, color 0.1s ease, border-color 0.1s ease;
}

.outil-icone-rond svg { width: 19px; height: 19px; flex-shrink: 0; }

/* "outil-icone-rond" n'habillait jusqu'ici que des <a>/<span> : le bouton
   "Aperçu horaires" est le premier vrai <button>, qui herite sinon un
   padding/police par defaut du navigateur (variable d'un navigateur a
   l'autre) - remis a plat pour rester identique aux icones voisines. */
button.outil-icone-rond {
  padding: 0;
  font: inherit;
}

/* Petit trait dore decoratif sous chaque icone (voir app.html) - purement
   visuel (aria-hidden), toujours dore que le bouton soit au repos ou
   coche (bon contraste sur fond clair comme sur fond navy plein). */
.outil-icone-trait {
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold-500);
  flex-shrink: 0;
}

.outil-icone-rond:active {
  transform: translateY(2px) scale(0.96);
  box-shadow: var(--premium-ombre-enfonce);
}

/* Etat actif/coche : fond champagne tres clair + bordure doree (au lieu du
   navy plein d'avant) - identite visuelle partagee avec l'onglet actif de
   la barre de navigation du bas (voir .nav-onglet.actif, navbar.css). */
.outil-icone-case:checked ~ .outil-icone-rond {
  background: var(--gold-100);
  border-color: var(--gold-500);
  color: var(--navy-900);
}

/* Nombre de courses disponibles proposees par des collegues, pas encore
   repondues (voir /api/envois/compte, disponibles.html) - meme info que le
   badge de la carte "Courses disponibles" sur la page Equipe elle-meme
   (equipe.css), juste visible plus tot, directement depuis la Feuille. Pas
   de "display" ici : le centrage du chiffre passe par line-height, pas
   flex, pour ne jamais entrer en conflit avec l'attribut [hidden] natif
   (meme piege deja rencontre ailleurs dans l'appli). */
.outil-icone-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  border: 1.5px solid var(--paper);
}

.interrupteur {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 26px;
  flex-shrink: 0;
}

.interrupteur input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
  z-index: 1;
}

.interrupteur-piste {
  position: absolute;
  inset: 0;
  background: #d7dde5;
  border-radius: 999px;
  transition: background-color 0.2s ease;
}

.interrupteur-bouton {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(11, 31, 58, 0.4);
  transition: transform 0.2s ease;
}

.interrupteur input:checked ~ .interrupteur-piste { background: var(--navy-700); }
.interrupteur input:checked ~ .interrupteur-piste .interrupteur-bouton { transform: translateX(18px); }

/* Deploiement anime du "Jusqu'au" : max-height plutot que "hidden" pour
   une transition douce a l'activation/desactivation de la case "PDF multi"
   (voir .barre-outils-feuille plus haut - ce bloc n'est plus imbrique dans
   une carte, d'ou la marge horizontale posee ici directement). */
.bloc-date-fin {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 16px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.25s ease, margin-top 0.3s ease;
}

.bloc-date-fin.ouvert {
  max-height: 120px;
  opacity: 1;
  margin-top: 12px;
}

.bloc-date-fin input[type="date"] {
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: var(--font-body);
}

.aide-periode {
  font-size: 0.82rem;
  color: var(--ink-soft);
  flex-basis: 100%;
}

/* Raccourci "+15 min" sous "Heure de depose" (voir bouton-heure-depose-plus-15,
   app.js) : meme habillage discret que .lien-mappy-course juste en dessous
   dans le formulaire, pour rester coherent - mais un vrai <button>, pas un
   lien, puisqu'il declenche une action plutot que d'ouvrir une page. */
.bouton-heure-depose-rapide {
  display: inline-flex;
  align-items: center;
  margin-top: 6px;
  padding: 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--navy-700);
  cursor: pointer;
}
.bouton-heure-depose-rapide:active { opacity: 0.7; }

.sous-titre-page {
  max-width: 760px;
  margin: 16px auto 0;
  padding: 0 16px;
  font-weight: 700;
  color: var(--navy-900);
}

/* Reservation : meme structure a cartes numerotees que le formulaire du
   site public (taxi-conventionne-nice), repris avec les couleurs et la
   police de l'appli chauffeur (navy plutot que or, vert pour le medical
   comme sur le site). */
.zone-reservation {
  max-width: 560px;
  margin: 0 auto;
  padding: 16px 16px 40px;
}

.reserve-card-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rcard {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 22px 18px;
  box-shadow: var(--shadow);
}

.rcard-title { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.rcard-num {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--navy-900); color: var(--paper); font-weight: 700; font-size: 0.8rem;
  display: flex; align-items: center; justify-content: center; flex: none;
}
.rcard-title h3 { margin: 0; font-size: 0.95rem; color: var(--navy-900); font-weight: 700; }

.rcard label { display: block; font-weight: 600; font-size: 0.85rem; color: var(--navy-900); margin: 14px 0 6px; }
.rcard label:first-of-type { margin-top: 0; }

.rline { display: flex; gap: 10px; }
.rline > div { flex: 1; min-width: 0; }

.rfield { position: relative; }
.rfield svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #8a95a3; pointer-events: none; }
.rfield input {
  width: 100%; font: inherit; padding: 9px 14px 9px 42px;
  border-radius: 10px; border: 1.5px solid var(--line);
  background: var(--paper-alt); color: var(--ink);
}
.rfield input:focus { outline: none; border-color: var(--navy-700); background: var(--paper); }

/* Barre de recherche client de la Feuille de route (voir #champ-recherche-
   client, app.html) : texte/placeholder centre, a la demande du chauffeur -
   scope a ce seul champ, jamais aux autres usages de .rfield input
   (adresses de reservation...). Padding droit remonte a 42px (identique au
   gauche, reserve a l'icone loupe) : sans ca, "text-align: center" centre
   le texte dans une boite de contenu plus etroite a gauche qu'a droite,
   donc visiblement decale vers la droite par rapport au champ entier. */
#champ-recherche-client { text-align: center; padding-right: 42px; }

/* Suggestions d'adresse (Base Adresse Nationale, voir GET /api/adresses) :
   ancree sur .rfield (deja position:relative), au-dessus du reste grace au
   z-index - la valeur cliquee n'est jamais un lien, juste du texte insere
   dans le champ, donc aucune inquietude XSS a la lecture (textContent). */
.radresse-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 5;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  max-height: 220px;
  overflow-y: auto;
}

.radresse-suggestion {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.88rem;
  color: var(--ink);
  cursor: pointer;
}

.radresse-suggestion + .radresse-suggestion { border-top: 1px solid var(--line); }
.radresse-suggestion:hover, .radresse-suggestion:focus { background: var(--paper-alt); }

.rchoix { display: flex; gap: 10px; margin: 6px 0 4px; }
.rchoix label {
  flex: 1; margin: 0 !important; display: flex; align-items: center; gap: 8px; padding: 12px;
  border: 1.5px solid var(--line); border-radius: 10px; font-weight: 600; font-size: 0.88rem;
  color: var(--ink); cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.rchoix input { display: none; }
.rchoix-texte { flex: 1; }
.rchoix-coche {
  display: none; width: 20px; height: 20px; border-radius: 50%; flex: none;
  align-items: center; justify-content: center; color: var(--paper);
}
.rchoix label:has(#rsv-type-prive:checked) { border-color: var(--navy-900); background: var(--navy-050); color: var(--navy-900); }
.rchoix label:has(#rsv-type-prive:checked) .rchoix-coche { display: inline-flex; background: var(--navy-900); }
.rchoix label:has(#rsv-type-medical:checked) { border-color: var(--med-green); background: var(--med-green-light); color: var(--med-green); }
.rchoix label:has(#rsv-type-medical:checked) .rchoix-coche { display: inline-flex; background: var(--med-green); }

.roptions-medical[hidden] { display: none; }
.roptions-medical { margin-top: 8px; }

.rswitch { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 0.88rem; color: var(--ink); font-weight: 500; cursor: pointer; }
.rswitch input { display: none; }
.rswitch-track { display: inline-block; width: 38px; height: 22px; border-radius: 20px; background: var(--line); position: relative; flex: none; transition: background 0.2s ease; }
.rswitch-thumb { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--paper); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.2s ease; }
.rswitch input:checked ~ .rswitch-track { background: var(--med-green); }
.rswitch input:checked ~ .rswitch-track .rswitch-thumb { transform: translateX(16px); }
.rswitch-icone { color: var(--med-green); flex: none; }

.rbloc-repetition[hidden] { display: none; }
.rbloc-repetition { margin-top: 4px; }
.rchamp-simple input { padding-left: 14px; max-width: 100px; }

/* "Coller un planning" (voir #rsv-coller-planning) : meme habillage que
   .rfield input (border/radius/fond), sans le padding reserve a une icone
   qui n'existe pas ici. Police monospace : aide a reperer d'un coup d'oeil
   les colonnes d'un texte de tableau colle (dates/heures alignees). */
.rzone-texte {
  display: block;
  width: 100%;
  font: inherit;
  font-family: ui-monospace, "SF Mono", "Courier New", monospace;
  font-size: 0.82rem;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1.5px solid var(--line);
  background: var(--paper-alt);
  color: var(--ink);
  resize: vertical;
}
.rzone-texte:focus { outline: none; border-color: var(--navy-700); background: var(--paper); }

.rjours { display: flex; gap: 6px; margin: 6px 0 4px; }
.rjours label {
  flex: 1; margin: 0 !important; text-align: center; padding: 9px 2px;
  border: 1.5px solid var(--line); border-radius: 8px; cursor: pointer;
  font-weight: 700; font-size: 0.78rem; color: var(--ink-soft);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.rjours input { display: none; }
.rjours label:has(input:checked) { border-color: var(--navy-900); background: var(--navy-050); color: var(--navy-900); }

.radresses { position: relative; margin-top: 8px; }
.rbouton-inverser {
  position: absolute; right: 14px; top: 66px; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--line);
  box-shadow: 0 2px 6px -2px rgba(11, 31, 58, 0.25);
  display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; color: var(--navy-900);
}

.renvoyer {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px; font-size: 1rem; font-weight: 800; font-family: var(--font-body);
  background: var(--navy-900); color: var(--paper); border: none; border-radius: 12px;
  cursor: pointer; box-shadow: var(--shadow);
  transition: background 0.15s ease, transform 0.15s ease;
}
.renvoyer:hover { background: var(--navy-800); transform: translateY(-1px); }
.renvoyer:disabled { opacity: 0.65; cursor: default; transform: none; }

.rform-status {
  margin-top: 4px;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: center;
}
.rsv-client-trouve {
  margin: 8px 0 0;
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--med-green-light);
  color: var(--med-green);
  font-size: 0.74rem;
  line-height: 1.35;
  font-weight: 600;
}

/* Bandeau "Course dupliquée" (voir preremplirDepuisDuplication,
   reservation.js) : rappelle explicitement de choisir la nouvelle date/
   heure, jamais pre-remplies automatiquement - voir le commentaire sur
   .bouton-dupliquer (app.js) pour le pourquoi. */
.rsv-duplication-info {
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: rgba(200, 162, 74, 0.14);
  border: 1px solid rgba(200, 162, 74, 0.4);
  color: var(--navy-900);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.4;
}

.rform-status-pending { background: var(--paper-alt); color: var(--navy-800); }
.rform-status-success { background: var(--med-green-light); color: var(--med-green); }
.rform-status-error { background: var(--danger-bg); color: var(--danger); }

/* Ajout rapide (page Reserver) : toujours visible (pas repliee comme
   .rlien-carte/.rrecues juste en dessous) puisque c'est le raccourci le
   plus utilise - memes tokens visuels que .rcard/.rlien-carte. */
.rapide-carte {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px;
  margin-bottom: 16px;
}
.rapide-titre {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font-weight: 700;
  color: var(--navy-900);
}
.rapide-form { display: flex; gap: 8px; }
.rapide-form input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 0.95rem;
}
.rapide-form input:focus { outline: none; border-color: var(--navy-700); }
#rapide-bouton {
  flex: 0 0 auto;
  padding: 10px 18px;
  border: none;
  border-radius: 10px;
  background: var(--navy-900);
  color: var(--paper);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
}
#rapide-bouton:disabled { opacity: 0.65; cursor: default; }
#rapide-resultat { margin-top: 10px; }

/* Lien de reservation public (page Reserver) : carte repliee par defaut
   (le QR code n'interesse pas la majorite des chauffeurs a chaque visite),
   memes tokens visuels que .rcard mais hors du formulaire. */
.rlien-carte {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 16px;
  overflow: hidden;
}
.rlien-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: none;
  border: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}
.rlien-toggle-icone {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--navy-050);
  color: var(--navy-900);
  display: flex;
  align-items: center;
  justify-content: center;
}
.rlien-toggle-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rlien-toggle-texte strong { font-size: 0.92rem; color: var(--navy-900); }
.rlien-toggle-texte span { font-size: 0.78rem; color: var(--ink-soft); line-height: 1.35; }
.rlien-chevron { flex: none; color: var(--ink-soft); transition: transform 0.2s ease; }
.rlien-toggle[aria-expanded="true"] .rlien-chevron { transform: rotate(180deg); }

.rlien-contenu[hidden] { display: none; }
.rlien-contenu {
  padding: 4px 18px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
.rlien-qr {
  width: 176px;
  height: 176px;
  padding: 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
}
.rlien-qr svg { display: block; width: 100%; height: 100%; }
.rlien-url {
  margin: 0;
  max-width: 100%;
  word-break: break-all;
  text-align: center;
  font-size: 0.8rem;
  color: var(--ink-soft);
  background: var(--paper-alt);
  border-radius: 8px;
  padding: 8px 12px;
}
.rlien-actions { display: flex; gap: 10px; width: 100%; }
.rlien-bouton {
  flex: 1;
  padding: 11px;
  border-radius: 10px;
  border: none;
  background: var(--navy-900);
  color: var(--paper);
  font: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}
.rlien-bouton-secondaire { background: var(--navy-050); color: var(--navy-900); }
.rlien-note { margin: 0; font-size: 0.74rem; color: var(--ink-soft); text-align: center; line-height: 1.4; }

/* Reservations recues via le lien public : repliee par defaut, comme
   .rlien-carte (meme structure de carte + bouton toggle, reutilise ses
   classes .rlien-toggle-icone/.rlien-toggle-texte/.rlien-chevron) - le
   chauffeur ne les voit qu'apres avoir appuye dessus, jamais affichees
   d'office a l'ouverture de la page. */
.rrecues-carte {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-bottom: 16px;
  overflow: hidden;
}
.rrecues-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px;
  background: none;
  border: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}
.rrecues-toggle[aria-expanded="true"] .rlien-chevron { transform: rotate(180deg); }
.rrecues-badge {
  flex: none;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
/* Defilement interne (pas la page entiere) des qu'il y en a plus de 2-3 :
   sinon un chauffeur avec beaucoup de reservations recues n'atteindrait le
   formulaire qu'apres un long scroll. Hauteur choisie pour couper une carte
   a mi-hauteur (jamais pile sur une bordure) : ca se voit qu'il y en a
   d'autres en dessous, sans avoir besoin d'un indice visuel en plus. */
.rrecues-liste[hidden] { display: none; }
.rrecues-liste {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 270px;
  overflow-y: auto;
  padding: 14px 18px 18px;
  border-top: 1px solid var(--line);
  margin-top: 4px;
}
.rrecue-carte {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: var(--shadow);
  position: relative;
}
.rrecue-carte.rrecue-non-vue::before {
  content: "";
  position: absolute;
  top: 14px;
  right: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold-500);
}
.rrecue-ligne-haut { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.rrecue-nom { font-weight: 700; font-size: 0.9rem; color: var(--navy-900); }
.rrecue-quand { font-size: 0.74rem; color: var(--ink-soft); flex: none; }
.rrecue-trajet { font-size: 0.82rem; color: var(--ink); margin: 0 0 4px; }
.rrecue-details { font-size: 0.76rem; color: var(--ink-soft); }
.rrecue-actions { display: flex; justify-content: flex-end; margin-top: 10px; }
/* Envoie le SMS de confirmation via le relais de la centrale (voir POST
   /api/sms/envoyer) d'un tap - un vrai <button>, plus un lien "sms:". */
.rrecue-sms {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: none;
  border-radius: 999px;
  background: var(--navy-050);
  color: var(--navy-900);
  font: inherit;
  font-size: 0.74rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}
.rrecue-sms:disabled { opacity: 0.6; cursor: default; }
.rrecues-vide { font-size: 0.82rem; color: var(--ink-soft); text-align: center; padding: 16px; }

.zone-provisoire {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50vh;
  padding: 24px 16px;
}

.carte-provisoire {
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px 24px;
  max-width: 360px;
  width: 100%;
  text-align: center;
}

.carte-provisoire-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--navy-050);
  color: var(--navy-700);
  margin-bottom: 12px;
}

.carte-provisoire-icone svg { width: 24px; height: 24px; }

.carte-provisoire h2 {
  margin: 0 0 6px;
  color: var(--navy-900);
  font-size: 1.1rem;
}

.carte-provisoire p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.section-jour {
  padding: 12px 16px 2px;
  max-width: 760px;
  margin: 0 auto;
}

/* Recherche de client (voir rechercherClientsFeuille dans app.js) :
   toujours visible au-dessus de la liste du jour, pas cachee derriere une
   icone - reutilise .rfield/.radresse-suggestions (meme habillage que
   "Retrouver un client" sur Reservation). */
.section-recherche-client {
  padding: 10px 16px 0;
  max-width: 760px;
  margin: 0 auto;
}

/* Texte lisible ("vendredi 18 septembre") affiche dans la capsule de date a
   la place du format numerique natif de l'input - voir app.html/app.js.
   "pointer-events: none" : les taps doivent traverser jusqu'a l'input
   (positionne juste en dessous dans le DOM, etire sur toute la capsule -
   voir .capsule-date input[type="date"] plus bas), jamais s'arreter sur ce
   texte. */
.capsule-date-texte {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--navy-900);
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  pointer-events: none;
}

/* Input natif rendu invisible mais etire sur toute la capsule (voir
   .capsule-date-texte ci-dessus) : un tap n'importe ou sur la capsule
   ouvre donc le vrai selecteur de date natif, sans plus jamais montrer ses
   chiffres bruts ("18/09/2026"), tout en gardant le champ pleinement
   fonctionnel et accessible (clavier, lecteur d'ecran). Uniquement sur la
   Feuille de route (.feuille-barre-date) : Dispatch reutilise la meme
   .capsule-date sans texte de repli (voir dispatch.html) - y appliquer ce
   masquage rendrait sa date entierement invisible.  */
.feuille-barre-date .capsule-date { position: relative; }
.feuille-barre-date .capsule-date input[type="date"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  opacity: 0;
  cursor: pointer;
}

/* Oeil "masquer les infos du jour" (nombre de courses, fiches a completer,
   montant estime) : utile quand un client peut voir l'ecran du chauffeur -
   positionne en absolu dans le coin haut-droit de la carte, ne masque que
   #resume-jour-contenu (voir .resume-cache plus bas) et reste donc toujours
   lui-meme visible/cliquable, quel que soit l'etat. Etat retenu en
   localStorage (voir app.js) : reste masque meme apres avoir change de jour
   ou rafraichi la page. */
.bloc-resume-jour .bouton-oeil {
  position: absolute;
  top: 10px;
  right: 10px;
}
.bouton-oeil {
  border: none;
  background: none;
  padding: 4px;
  margin: 0;
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.bouton-oeil svg { width: 18px; height: 18px; }

.resume-jour-contenu.resume-cache { display: none; }

/* Carte resume du jour : titre ("N courses aujourd'hui", icone + texte
   centres comme un seul groupe) + trois blocs de statistiques de meme
   largeur/hauteur (fiches a completer, chevauchements, montant estime) -
   toujours les trois, pour garder un bloc parfaitement stable et centre. */
.bloc-resume-jour {
  position: relative;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px 12px;
}

.resume-jour-titre {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--navy-900);
}

.resume-jour-icone {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--gold-500);
}
.resume-jour-icone svg { width: 17px; height: 17px; }

.pilules-resume {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

/* Bouton "Masquer les courses partagees" (voir #bouton-masquer-partages,
   app.html) : hors de #resume-jour-contenu expres, pour rester visible
   meme quand l'oeil masque le reste du resume (deux reglages independants -
   l'un pour la discretion devant un client, l'autre pour s'y retrouver dans
   une longue liste a deux). */
.bouton-masquer-partages {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin: 8px auto 0;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}
.bouton-masquer-partages svg { flex-shrink: 0; }
.bouton-masquer-partages[hidden] { display: none; }
/* Etat actif (courses partenaires actuellement masquees) : meme accent
   dore que l'onglet actif de la barre de navigation, pour signaler un
   filtre en cours plutot qu'un etat neutre. */
.bouton-masquer-partages.actif {
  border-color: var(--gold-500);
  background: var(--gold-100);
  color: var(--navy-900);
}

/* Filtre purement visuel : ne retire rien des donnees, juste l'affichage
   des cartes des collegues (voir .course-partagee, rendreCourse) le temps
   que ce mode est actif. */
body.masquer-partages-actif .course.course-partagee { display: none; }

.stat-resume {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1px;
  padding: 6px 4px;
  border-radius: 10px;
}

.stat-resume-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1px;
}
.stat-resume-icone svg { width: 15px; height: 15px; }

.stat-resume-valeur {
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.1;
}

.stat-resume-libelle {
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1.15;
}

.stat-resume-bleue { background: var(--navy-050); color: var(--navy-800); }
.stat-resume-orange { background: var(--amber-100); color: var(--amber-500); }
.stat-resume-verte { background: var(--med-green-light); color: var(--med-green); }

/* Bandeau "hors ligne" (voir sw.js / api(), app.js) : affiche seulement
   quand une reponse a du etre servie depuis le cache faute de reseau, avec
   l'heure de la derniere synchro reussie - couleur orange (alerte discrete,
   pas une erreur bloquante puisque la page reste utilisable). */
.bandeau-hors-ligne {
  margin: 8px 16px 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: #fff4e0;
  border: 1px solid #f0b429;
  color: #7a4a00;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
}
.bandeau-hors-ligne[hidden] { display: none; }

/* Rappel discret mais visible qu'il y a deja des courses le lendemain
   (voir chargerApercuLendemain, dispatch.js) : sans lui, rien n'incite a
   regarder plus loin que le jour affiche, d'ou le risque d'oublier une
   course ajoutee pour demain. Tapable : saute directement au jour
   suivant, comme la fleche ">" (voir #jour-suivant). */
.lien-demain {
  display: block;
  margin: 8px auto 0;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--premium-bordure);
  background: var(--gold-100);
  color: var(--navy-900);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-body);
}

.lien-demain:active { opacity: 0.7; }
/* Sans cette regle, le "display: block" ci-dessus l'emporte toujours sur
   le "display: none" natif de l'attribut [hidden] (meme piege deja
   rencontre ailleurs dans l'appli, ex : .choix-delai-sms, .course-corps). */
.lien-demain[hidden] { display: none; }

#zone-resultat {
  max-width: 760px;
  margin: 0 auto;
  padding: 8px 16px 60px;
}

.etat-info, .etat-erreur {
  text-align: center;
  padding: 24px;
  color: var(--ink-soft);
}

.etat-erreur {
  color: var(--danger);
  background: var(--danger-bg);
  border-radius: var(--radius);
}

.liste-courses {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}

.course {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 6px 12px;
  border-left: 4px solid var(--gold-500);
  /* Padding et espacement volontairement serres (une journee chargee peut
     compter 15-20 courses) : garde quand meme au moins 44px de hauteur sur
     .course-sommaire repliee (voir pastille-heure ci-dessous), la zone de
     toucher minimale usuelle - jamais en dessous. Hauteur toujours dictee
     par le contenu (aucune hauteur fixe/min-height posee sur .course ni ses
     enfants) : une fiche deja completee, avec moins d'actions a afficher,
     reste donc naturellement plus compacte qu'une fiche a completer. */
}

.course.type-medical { border-left-color: var(--navy-700); }

.course.course-exclue {
  /* Contraste remonte d'environ 18% (0.55 -> 0.65) pour rester lisible en
     plein soleil, tout en gardant une difference nette avec une course
     active (opacity: 1). */
  opacity: 0.65;
  border-left-color: var(--line);
}

.course.course-chevauchement { border-left-color: var(--danger); }

/* Course deja confiee a un collegue et acceptee par lui (voir
   course.envoiAccepte, rapproche cote serveur dans coursesAnnoteesPeriode) :
   prime sur les autres couleurs de bordure (medical/exclue), d'ou la regle
   placee en dernier ici. */
.course.course-affectee { border-left-color: var(--danger); }

/* Repere temporaire sur la course ciblee par le defilement automatique a
   l'ouverture du jour (voir chargerFeuilleDeRoute/idCourseAPrivilegier dans
   app.js) : un halo qui s'estompe tout seul, jamais une couleur permanente
   (deja prises par medical/conflit/affectee ci-dessus). */
@media (prefers-reduced-motion: no-preference) {
  .course.course-ciblee { animation: halo-course-ciblee 2.2s ease-out; }
}
@media (prefers-reduced-motion: reduce) {
  .course.course-ciblee { box-shadow: 0 0 0 3px var(--gold-500); }
}
@keyframes halo-course-ciblee {
  0% { box-shadow: 0 0 0 3px var(--gold-500), var(--shadow); }
  100% { box-shadow: var(--shadow); }
}

/* Rappel "a donner a un collegue" jamais confirmee, heure imminente ou deja
   passee (voir rendreCourse/mettreAJourRappelsADonner, app.js) : reprend le
   dessus sur l'estompage habituel d'une course masquee (.course-exclue plus
   haut), sinon ce rappel se noierait exactement dans le fond qu'il doit
   percer. Pulsation continue (jamais un simple fondu comme .course-ciblee) -
   ce repere doit rester voyant tant que la course n'est pas reglee, pas
   juste le temps d'attirer l'oeil une fois. */
.course.course-rappel-imminent {
  opacity: 1;
  border-left-color: var(--danger);
  background: var(--danger-bg);
}
.course.course-rappel-imminent::before {
  background: var(--danger);
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.25), 0 0 10px -1px rgba(179, 38, 30, 0.55);
}
@media (prefers-reduced-motion: no-preference) {
  .course.course-rappel-imminent { animation: pulse-rappel-a-donner 1.6s ease-in-out infinite; }
}
@keyframes pulse-rappel-a-donner {
  0%, 100% { box-shadow: var(--shadow); }
  50% { box-shadow: 0 0 0 4px rgba(179, 38, 30, 0.4), var(--shadow); }
}

.course-rappel-bandeau {
  display: none;
  align-items: center;
  gap: 7px;
  margin: 0 0 6px;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--danger);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
}
.course-rappel-bandeau svg { width: 16px; height: 16px; flex-shrink: 0; }
.course.course-rappel-imminent .course-rappel-bandeau { display: flex; }

/* Bandeau pleine largeur, encore utilise par la liste "Fiches a
   completer" de la page Activite (public/js/activite.js), pas concernee
   par la refonte compacte des cartes de la feuille de route ci-dessous. */
.alerte-chevauchement-carte {
  margin: 0;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--danger-bg);
  color: var(--danger);
  font-weight: 700;
  font-size: 0.82rem;
}

/* Detail du conflit (texte complet), replie par defaut sur la feuille de
   route - voir .badge-conflit ci-dessous, qui bascule son attribut
   "hidden" au toucher. Le gros bandeau pleine largeur, systematique, est
   remplace par cette ligne compacte qui ne s'affiche que si le chauffeur
   la demande. */
.alerte-chevauchement-detail {
  margin: 0;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--danger-bg);
  color: var(--danger);
  font-weight: 700;
  font-size: 0.82rem;
}

/* Sommaire toujours visible (heure + nom + statut), carte repliee ou non -
   c'est un <button>, jamais un simple <div> : toute la ligne est la zone de
   toucher qui replie/deplie la carte (voir rendreCourse dans app.js). */
.course-sommaire {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  font-family: var(--font-body);
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: opacity 0.1s ease;
}

.course-sommaire:active { opacity: 0.6; }

.course-sommaire-nom {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  text-transform: capitalize;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 30 minutes avant la prise en charge (voir mettreAJourNomsImminents,
   app.js) : seul le nom passe en rouge, rien d'autre sur la carte. */
.course-sommaire-nom-imminente { color: var(--danger); }

/* Repere aller-retour, juste apres le nom (voir rendreCourse) - couleur
   discrete (pas la couleur d'accent or/bleu), volontairement flex-shrink: 0
   pour ne jamais disparaitre meme si le nom, lui, est tronque. */
.course-sommaire-ar {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--ink-soft);
}

.course-sommaire-ar svg {
  width: 15px;
  height: 15px;
}

/* Repere "en dispatch, pas encore prise", meme emplacement/logique que
   .course-sommaire-ar ci-dessus mais en couleur d'accent (or) pour se
   distinguer au premier coup d'oeil - c'est une info a ne pas manquer,
   contrairement au simple repere aller-retour. */
.course-sommaire-dispatch {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--gold-500);
}

.course-sommaire-dispatch svg {
  width: 15px;
  height: 15px;
}

/* Repere "reçue d'un collègue" (voir course.confiePar/priseDispatchPar,
   app.js) : meme emplacement/logique que .course-sommaire-dispatch
   ci-dessus mais couleur distincte (bleu) pour ne pas la confondre avec
   "envoyée, pas encore prise", qui a un sens oppose. */
.course-sommaire-recue {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--navy-700);
}

.course-sommaire-recue svg {
  width: 15px;
  height: 15px;
}

.course-sommaire-droite {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Bouton d'appel rapide sur la carte repliee (voir rendreCourse, app.js) -
   memes proportions que l'ancien bouton "Terminé maintenant" qu'il
   remplace au meme endroit. */
.bouton-appel-sommaire {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--navy-050);
  color: var(--navy-800);
  flex-shrink: 0;
}
.bouton-appel-sommaire svg { width: 13px; height: 13px; }
.bouton-appel-sommaire:active { opacity: 0.65; }

.pastille-statut {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pastille-statut-complete { background: var(--gold-500); }
.pastille-statut-attente { background: var(--ink-soft); }
/* Confiee a un collegue et acceptee par lui - voir .course-affectee. */
.pastille-statut-affectee { background: var(--danger); }
/* Course masquee ("hors planning") : orange tant qu'elle n'a pas encore
   ete donnee a quelqu'un, vert une fois confirmee (auto ou d'un tap) -
   voir rendreCourse dans app.js. */
.pastille-statut-a-donner { background: var(--amber-500); }
.pastille-statut-donnee { background: var(--med-green); }
/* Le rond peut etre un vrai <button> (bascule manuelle) : la zone
   cliquable s'agrandit (10px -> 18px) pour rester facilement "tapable" sur
   mobile, mais le rond colore visible reste a la meme taille que les
   autres (10px, via le padding + background-clip ci-dessous) - sinon ce
   rond ressortait plus gros que tous les autres, comme s'il y avait une
   incoherence de taille au lieu d'un simple repere "cliquable ici". */
button.pastille-statut {
  width: 18px;
  height: 18px;
  padding: 4px;
  background-clip: content-box;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
button.pastille-statut:active { opacity: 0.7; }
button.pastille-statut:disabled { opacity: 0.5; cursor: default; }

.course-sommaire-chevron {
  display: inline-flex;
  color: var(--ink-soft);
}

.course-sommaire-chevron svg {
  width: 18px;
  height: 18px;
  transition: transform 0.15s ease;
}

.course-sommaire[aria-expanded="true"] .course-sommaire-chevron svg {
  transform: rotate(180deg);
}

/* Contenu deplie : badges medical/doublette/conflit en tete, une seule
   ligne alignee a GAUCHE, juste sous le nom (comme un sous-titre du nom,
   voir la maquette validee par le chauffeur). */
.course-entete-droite {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: -4px;
}

.pastille-heure {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 3px 9px;
  border: none;
  border-radius: 999px;
  background: var(--navy-050);
  color: var(--navy-900);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}
/* Remplace la pastille le temps de la saisie (voir ouvrirEditionHeureRapide,
   app.js) : meme gabarit general, mais un vrai <input type="time"> garde
   forcement l'habillage natif du systeme a l'interieur (impossible a
   uniformiser completement entre navigateurs). */
.pastille-heure-edition {
  padding: 1px 6px;
  border: 1.5px solid var(--navy-700);
  background: var(--paper);
  color: var(--ink);
}

.badge-medical {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--gold-100);
  color: var(--navy-900);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Meme gabarit que .badge-medical, couleur neutre (bleu clair) distincte du
   dore/rouge : confirme un chevauchement voulu (voir
   champ-abattement-partage) sans alarmer comme le badge conflit. */
.badge-doublette {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--navy-050);
  color: var(--navy-900);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Pastille de conflit compacte (remplace l'ancien bandeau rouge pleine
   largeur, systematique) : la grande bordure laterale rouge (voir
   .course.course-chevauchement plus haut) reste le seul signal fort,
   reserve aux vrais conflits - cette pastille reste discrete a cote de
   l'heure. Bouton (pas juste un badge) : le detail complet s'affiche au
   toucher, voir alerte-chevauchement-detail. */
.badge-conflit {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--danger-bg);
  color: var(--danger);
  font-size: 0.82rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
}

.course-corps { min-width: 0; display: flex; flex-direction: column; gap: 10px; padding-top: 2px; }
/* Sans cette regle, "display: flex" ci-dessus l'emporte toujours sur le
   "display: none" natif de l'attribut [hidden] (meme bug deja rencontre sur
   .choix-delai-sms) : la carte resterait visuellement depliee malgre
   corps.hidden = true. */
.course-corps[hidden] { display: none; }

/* --- Annonces posees par un administrateur (Activite) --- */

.liste-annonces {
  max-width: 760px;
  margin: 16px auto 0;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.carte-annonce {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px 14px;
  border-left: 4px solid var(--navy-900);
}

.carte-annonce-date { font-size: 0.75rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.02em; }

.carte-annonce-texte { margin: 0; color: var(--ink); white-space: pre-wrap; }

/* --- Bouton "Signaler un problème / proposer une amélioration" (Activite) --- */

.section-ticket {
  max-width: 760px;
  margin: 20px auto 0;
  padding: 0 16px;
  text-align: center;
}

.section-ticket .bouton-secondaire-clair { display: block; width: 100%; max-width: 420px; margin: 0 auto; }

/* --- Courses proposees par un collegue (Activite) --- */

.titre-section-secondaire {
  max-width: 760px;
  margin: 24px auto 8px;
  padding: 0 16px;
  font-weight: 700;
  color: var(--navy-900);
  font-size: 0.95rem;
}

.envoi-expediteur {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--navy-700);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Carte compacte en lecture seule (+ bouton Annuler tant que rien n'est
   accepte) pour "Vos envois recents" (page Activite) - plus legere que les
   cartes .course pleine taille utilisees pour les envois recus, mais assez
   detaillee pour reconnaitre de quelle course il s'agit (voir detailEnvoi
   dans activite.js : deux envois au meme nom, ex. deux "Tony Polla",
   restent indiscernables sans l'heure et le trajet). */
.envoi-envoye {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px 14px;
  border-left: 4px solid var(--ink-soft);
}

.envoi-envoye.statut-envoi-acceptee { border-left-color: var(--med-green); }
.envoi-envoye.statut-envoi-refusee { border-left-color: var(--danger); }

.envoi-envoye-haut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.envoi-envoye-nom {
  font-weight: 600;
  color: var(--ink);
  text-transform: capitalize;
}

.envoi-envoye-detail {
  margin: 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.bouton-annuler-envoi {
  align-self: flex-start;
  margin-top: 4px;
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid rgba(179, 38, 30, 0.25);
  background: var(--danger-bg);
  color: var(--danger);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

.bouton-annuler-envoi:disabled { opacity: 0.6; cursor: default; }

.statut-envoi {
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.statut-envoi-attente { background: var(--paper-alt); color: var(--ink-soft); }
.statut-envoi-acceptee { background: var(--med-green-light); color: var(--med-green); }
.statut-envoi-refusee { background: var(--danger-bg); color: var(--danger); }

/* --- Bons de transport (page bons.html, partagee entre chauffeurs) --- */

/* En-tete et haut de page un peu plus compacts sur cette page precise
   (plus de place pour la liste) : scope par data-page pour ne pas toucher
   aux memes regles .entete/#zone-resultat partagees par les autres pages. */
body[data-page="bons"] .entete { height: 56px; }
body[data-page="bons"] #zone-resultat { padding-top: 4px; }

.bt-entete-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 10px 16px 6px;
}

.bt-titre-page { margin: 0; font-weight: 700; color: var(--navy-900); font-size: 1.1rem; }

.bt-recherche-zone {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 16px 10px;
  position: relative;
}

.bt-recherche-icone {
  position: absolute;
  left: 28px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--ink-soft);
  pointer-events: none;
}

.bt-champ-recherche {
  width: 100%;
  min-height: 44px;
  padding: 8px 14px 8px 40px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--ink);
}

.bt-champ-recherche::-webkit-search-cancel-button { -webkit-appearance: none; }

.bt-liste { display: flex; flex-direction: column; gap: 12px; }

/* <details> natif (voir rendreBon dans bons.js) : replie par defaut, un tap
   sur .bt-resume deplie .bt-detail sur place - charge a la demande, jamais
   recupere pour tous les bons d'un coup. */
.bt-carte {
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 16px;
  border-left: 4px solid var(--gold-500);
}

/* Bon epuise (0 trajet restant, voir majResume dans bons.js) : bordure et
   compteur en rouge plutot que dore, pour reperer d'un coup d'oeil dans la
   liste les bons a renouveler - meme couleur "danger" que le reste de
   l'appli (ex : .envoi-envoye.statut-envoi-refusee). */
.bt-carte.bt-carte-epuise { border-left-color: var(--danger); }
.bt-carte-epuise .bt-compteur-court { color: var(--danger); }

/* Encore utilisable mais plus pour longtemps (serie a 2 trajets ou moins,
   voir majResume dans bons.js) : amber plutot que rouge, reserve a "vraiment
   epuise" ci-dessus - une simple anticipation, pas une alerte bloquante. */
.bt-carte.bt-carte-bas { border-left-color: var(--amber-500); }
.bt-carte-bas .bt-compteur-court { color: var(--amber-500); }

/* Ligne repliee : nom + badge + compteur court + chevron, une seule ligne
   pour gagner de la place quand plusieurs bons sont actifs. Marqueur natif
   du <summary> masque, remplace par .bt-chevron (qui pivote a l'ouverture). */
.bt-resume {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
}
.bt-resume::-webkit-details-marker { display: none; }
.bt-resume::marker { content: ""; }

.bt-compteur-court { flex-shrink: 0; font-weight: 800; font-size: 0.86rem; color: var(--navy-900); }

.bt-carte[open] .bt-chevron { transform: rotate(90deg); }

.bt-detail { padding-top: 14px; display: flex; flex-direction: column; gap: 12px; }

.bt-detail-chargement { padding: 4px 0; }

/* Partie haute du detail (photos + nom + progression) : les vignettes
   menent a la fiche publique deja existante du bon (voir /bon/:token,
   bon.js). */
.bt-detail-haut {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.bt-lien-fiche { display: flex; text-decoration: none; color: inherit; }

/* Deux volets toujours affiches : vraie vignette photo quand disponible
   (chargee a la demande a la premiere ouverture du detail), sinon un
   emplacement vide "Volet 1"/"Volet 2". */
.bt-vignette-photos { display: flex; gap: 4px; flex-shrink: 0; }

.bt-photo-vignette {
  width: 42px;
  height: 56px;
  border-radius: 8px;
  flex-shrink: 0;
  overflow: hidden;
}

.bt-photo-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bt-photo-vignette.bt-volet-vide {
  background: var(--paper-alt);
  border: 1px dashed rgba(11, 31, 58, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
}

.bt-photo-vignette-label {
  font-size: 0.52rem;
  font-weight: 700;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-align: center;
  line-height: 1.2;
}

.bt-contenu { flex: 1; min-width: 0; }

.bt-nom {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 800;
  color: var(--navy-900);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Repere discret indiquant que la ligne repliee peut se deplier - pivote a
   l'ouverture, voir .bt-carte[open] plus haut. */
.bt-chevron { flex-shrink: 0; width: 14px; height: 14px; color: var(--ink-soft); opacity: 0.55; transition: transform 0.15s ease; }

.bt-type-badge {
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--navy-050);
  color: var(--navy-900);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Badge "Série" : traitement premium distinct (fin, fond dore tres clair,
   texte bleu marine) - le badge "Unique" garde son style d'origine. */
.bt-type-badge-serie {
  padding: 2px 9px;
  background: rgba(200, 162, 74, 0.14);
  color: var(--navy-900);
  border: 1px solid rgba(200, 162, 74, 0.35);
}

.bt-progression { margin: 6px 0 0; font-size: 0.86rem; color: var(--ink-soft); }
.bt-progression strong { color: var(--navy-900); font-weight: 800; font-size: 0.95rem; }
.bt-progression-bas { color: var(--amber-500); font-weight: 700; }
.bt-progression-bas strong { color: var(--amber-500); }
.bt-destination { margin: 2px 0 0; font-size: 0.8rem; color: var(--ink-soft); }

.bt-barre {
  margin-top: 8px;
  height: 7px;
  border-radius: 999px;
  background: var(--navy-050);
  overflow: hidden;
}

.bt-barre-remplie { height: 100%; background: var(--gold-500); border-radius: 999px; }
.bt-barre-remplie-basse { background: var(--amber-500); }

/* Vrai suivi d'usage : date de chaque trajet retire (voir
   bons_transport_utilisations, obtenirUtilisationsBonTransport dans db.js). */
.bt-historique { border-top: 1px solid var(--line); padding-top: 10px; }

.bt-historique-titre {
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.bt-historique-vide { margin: 0; font-size: 0.82rem; color: var(--ink-soft); }

.bt-historique-liste {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.bt-historique-liste li {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--navy-900);
  background: var(--paper-alt);
  border-radius: 999px;
  padding: 3px 10px;
}

.bt-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; row-gap: 10px; }

.bt-groupe-gauche { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.bt-groupe-droite { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Decompte manuel (voir rendreBon dans bons.js) : pour un trajet fait par
   quelqu'un en dehors de l'appli, qui ne declenchera jamais le decompte
   automatique via une fiche. Largeur/hauteur/rayon/typo identiques pour
   les deux boutons, seule la couleur les distingue (gris = retrait, vert
   = ajout) - zone tactile de 44px conforme aux recommandations mobiles. */
.bt-bouton-utiliser,
.bt-bouton-ajouter {
  width: 112px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: 10px;
  border: 1px solid rgba(11, 31, 58, 0.12);
  background: #f1f2f5;
  color: var(--navy-900);
  cursor: pointer;
}

.bt-bouton-utiliser:disabled,
.bt-bouton-ajouter:disabled { opacity: 0.6; cursor: default; }

/* Correction inverse : rattrape un decompte fait par erreur - distincte
   visuellement (vert, "+") de "-1 trajet" (neutre). */
.bt-bouton-ajouter { border-color: rgba(30, 142, 62, 0.25); background: var(--med-green-light); color: var(--med-green); }

/* Partager/Supprimer : memes dimensions exactement (44x44, zone tactile
   conforme), seule la couleur les distingue (bleu tres clair / rouge tres
   clair). */
.bt-bouton-partager,
.bt-bouton-supprimer,
.bt-bouton-modifier,
.bt-bouton-visualiser {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  cursor: pointer;
}

.bt-bouton-partager,
.bt-bouton-modifier,
.bt-bouton-visualiser {
  border: 1px solid rgba(11, 31, 58, 0.12);
  background: var(--navy-050);
  color: var(--navy-700);
}

.bt-bouton-partager svg,
.bt-bouton-modifier svg,
.bt-bouton-visualiser svg { width: 18px; height: 18px; }

.bt-bouton-supprimer {
  border: 1px solid rgba(179, 38, 30, 0.25);
  background: var(--danger-bg);
  color: var(--danger);
}

.bt-bouton-supprimer svg { width: 18px; height: 18px; }
.bt-bouton-supprimer:disabled { opacity: 0.6; cursor: default; }

/* --- Formulaire "Nouveau bon" (dialog #modale-bon) --- */

.bt-photos-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }

.bt-photo-volet {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 8px;
  border: 1.5px dashed var(--line);
  border-radius: 12px;
  text-align: center;
}

.bt-photo-volet.bt-volet-pris { border-style: solid; border-color: var(--med-green); background: var(--med-green-light); }

.bt-photo-volet-label { font-size: 0.72rem; font-weight: 700; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.03em; }

.bt-bouton-photo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--gold-100);
  color: var(--navy-900);
  border: none;
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: 700;
  font-size: 0.8rem;
  cursor: pointer;
}

.bt-photo-volet.bt-volet-pris .bt-bouton-photo { background: transparent; color: var(--med-green); }

.bt-bouton-photo:disabled { opacity: 0.7; cursor: default; }

.bt-photo-info { margin: 6px 0 0; font-size: 0.78rem; color: var(--ink-soft); }
.bt-photo-info-scan { margin: 4px 0 0; }

/* Miniature du volet une fois scanne (recadre/redresse/contraste) + repere
   sur la fiabilite du cadrage automatique - voir configurerVolet, bons.js. */
.bt-photo-apercu {
  width: 100%;
  max-height: 110px;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--line);
}

.bt-scan-badge {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--med-green);
  line-height: 1.25;
}

.bt-scan-badge-manuel { color: var(--amber-500); }

.bt-scan-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid rgba(11, 31, 58, 0.25);
  border-top-color: var(--navy-900);
  border-radius: 50%;
  animation: bt-scan-spin 0.7s linear infinite;
}

@keyframes bt-scan-spin {
  to { transform: rotate(360deg); }
}

/* --- Repere automatique sur une carte de course (rattachement par
   telephone, voir rendreCourse dans app.js) --- */
.bt-repere-course {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--gold-100);
  font-size: 0.82rem;
  color: var(--navy-900);
  font-weight: 600;
}

.bt-repere-course svg { flex-shrink: 0; width: 16px; height: 16px; }
.bt-repere-texte { flex: 1; min-width: 0; }

/* Bon de transport bientot a sec (voir bonTransportEstBas, app.js) : amber
   plutot que le or habituel, pour se distinguer d'un simple repere
   informatif sans etre aussi alarmant qu'un rouge "epuise"/conflit. */
.bt-repere-course.bt-repere-bas { background: var(--amber-100); color: var(--amber-500); }

/* Repere "confie a" (voir rendreCourse dans app.js) : meme forme que
   .bt-repere-course, teinte navy plutot que or pour ne pas se confondre
   avec le bon de transport, et surtout pas rouge (reserve au point de
   statut "confiee a un collegue via l'appli", un mecanisme different). */
.confie-repere-course {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--navy-050);
  font-size: 0.82rem;
  color: var(--navy-900);
  font-weight: 600;
}
.confie-repere-course svg { flex-shrink: 0; width: 16px; height: 16px; }

/* Partage direct depuis la carte de course (voir rendreCourse dans
   app.js), sans repasser par la page Bons de transport. */
.bt-repere-bouton-partager {
  flex-shrink: 0;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: none;
  background: rgba(11, 31, 58, 0.08);
  color: var(--navy-900);
  cursor: pointer;
}
.bt-repere-bouton-partager svg { width: 15px; height: 15px; }

/* Variante bouton (modale "Fiche transport", voir ouvrirModaleCourse dans
   app.js) : meme repere, mais cliquable pour partager directement le lien
   du bon sans repasser par la page Bons de transport. */
.bt-repere-course-bouton {
  width: 100%;
  min-height: 44px;
  border: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
  margin-bottom: 10px;
}
/* Sans ca, le "display: flex" hérité de .bt-repere-course l'emporte sur le
   "display: none" natif de l'attribut [hidden] (meme bug deja rencontre sur
   .roptions-medical/.rbloc-repetition/.course-corps/.choix-delai-sms
   ci-dessus) - bouton "Partager" visible et vide meme sans bon de transport. */
.bt-repere-course-bouton[hidden] { display: none; }

.bt-repere-course-bouton span:not(.bt-repere-partager-icone) { flex: 1; min-width: 0; }

.bt-repere-partager-icone { flex-shrink: 0; width: 16px; height: 16px; opacity: 0.65; }

/* Choix du bon de transport quand plusieurs sont actifs pour ce patient a
   la fois (voir bloc-choix-bon-transport dans app.html/app.js) - meme teinte
   que .bt-repere-course pour rester dans le meme "univers" visuel bon de
   transport, mais bordure pour bien marquer que c'est une action requise. */
.bloc-choix-bon-transport {
  margin-bottom: 12px;
  padding: 10px;
  border-radius: 10px;
  background: var(--gold-100);
  border: 1px solid rgba(11, 31, 58, 0.12);
}
.bloc-choix-bon-transport label { margin-top: 0 !important; font-size: 0.82rem; }
.bloc-choix-bon-transport select { margin-top: 6px; }

/* --- Page publique de partage d'un bon (bon.html, sans authentification) --- */

.bt-public-page { max-width: 420px; margin: 0 auto; padding: 24px 18px; }

/* Meme largeur que .bt-public-carte (aucun des deux n'a de marge
   horizontale dans .bt-public-page) : les bords gauche/droit s'alignent
   naturellement avec l'encadrement du bon juste en dessous. */
.bt-public-merci { margin-bottom: 18px; }
.bt-public-merci img { display: block; width: 100%; height: auto; border-radius: var(--radius); }

.bt-public-carte { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; background: var(--paper); }

.bt-public-nom { font-size: 1.2rem; font-weight: 700; color: var(--navy-900); margin: 0 0 4px; text-transform: capitalize; }
.bt-public-sous { color: var(--ink-soft); font-size: 0.9rem; margin: 0 0 16px; }

.bt-public-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bt-public-photo { width: 100%; border-radius: 10px; border: 1px solid var(--line); }

.bt-public-bouton-telecharger-groupe {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 12px;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 11px 0;
  border-radius: 10px;
  border: none;
  background: var(--navy-900);
  color: #fff;
  cursor: pointer;
}

.bt-public-bouton-telecharger-groupe:disabled { opacity: 0.6; cursor: default; }

.bt-public-note { text-align: center; margin-top: 18px; font-size: 0.78rem; color: var(--ink-soft); }

/* Selection generique (bt-type-unique/bt-type-serie) : les regles
   :has(#rsv-type-...) plus haut restent prioritaires (specificite par ID)
   pour les couleurs semantiques de la page Reservation - celle-ci sert de
   repli neutre a toute autre utilisation de .rchoix. */
.rchoix label:has(input:checked) { border-color: var(--navy-900); background: var(--navy-050); color: var(--navy-900); }
.rchoix label:has(input:checked) .rchoix-coche { display: inline-flex; background: var(--navy-900); }

.bouton-accepter {
  background: var(--med-green);
  color: var(--paper);
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.bouton-accepter:hover { background: #17752f; }
.bouton-accepter:disabled { opacity: 0.6; cursor: default; }

.bouton-refuser {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid rgba(179, 38, 30, 0.25);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.bouton-refuser:hover { background: #f6d9d7; }
.bouton-refuser:disabled { opacity: 0.6; cursor: default; }

.course-nom {
  margin: 0;
  font-size: 1.05rem;
  color: var(--ink);
  word-break: break-word;
  text-transform: capitalize;
}

/* Bloc adresses de la carte depliee : encadre (fond tres clair, fine
   bordure, coins arrondis) avec le point bleu nuit du depart, un trait
   pointille, puis le repere dore de la destination - voir la maquette
   validee par le chauffeur. Les deux lignes sont separees par un filet. */
.course-trajet {
  display: grid;
  grid-template-columns: 20px 1fr;
  column-gap: 12px;
  row-gap: 0;
  background: #fdfdfb;
  border: 1px solid #e6e2d8;
  border-radius: 16px;
  padding: 8px 10px;
}

.trajet-point {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-top: 6px;
  justify-self: center;
}

.trajet-point-depart { background: var(--navy-700); }
/* Destination : repere de carte (goutte) dore plutot qu'un simple rond,
   dessine en CSS (rond + pointe) pour rester dans le meme markup. */
.trajet-point-arrivee {
  position: relative;
  background: var(--gold-500);
  margin-top: 4px;
}
.trajet-point-arrivee::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 9px;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid var(--gold-500);
}

/* Rangee intermediaire de la grille : trait pointille continu (colonne
   des reperes) + filet horizontal (colonne du texte, via le <span> vide
   qui suit le connecteur dans le markup, centre verticalement). */
.trajet-connecteur {
  width: 0;
  min-height: 16px;
  border-left: 2px dotted #6b7a94;
  justify-self: center;
}
.trajet-connecteur + span {
  align-self: center;
  border-top: 1px solid #e6e2d8;
}

.trajet-texte {
  display: flex;
  flex-direction: column;
  gap: 2px;
  word-break: break-word;
}

.trajet-libelle {
  font-size: 0.86rem;
  font-weight: 600;
  color: #5a76a3;
}

/* La casse de l'adresse est deja geree par formaterAdresse() cote JS (rue
   en minuscules sauf son dernier mot, ville en Capitales) : pas de
   text-transform ici, qui l'ecraserait en remettant une majuscule a
   chaque mot ("De La" au lieu de "de la"). */
.trajet-adresse-ligne {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Largeur reservee (flex: 1, min-width: 0) : le texte peut passer sur
   deux lignes sans jamais glisser sous le bouton Waze, qui garde sa
   taille et sa position (flex-shrink: 0 ci-dessous) quelle que soit la
   longueur de l'adresse. */
.trajet-adresse {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.79rem;
  line-height: 1.2;
  font-weight: 500;
  color: var(--ink);
}

/* Bouton Waze : ouvre l'adresse directement dans l'appli (ou son site en
   repli) - meme recette "premium" que les autres boutons (bouton-premium),
   en ivoire assorti au bouton "Appeler". */
.bouton-waze {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 13px;
  background: linear-gradient(180deg, #fdf8ec 0%, #f2e5c4 100%);
  border: 1px solid rgba(200, 162, 74, 0.45);
  text-decoration: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 0 rgba(146, 120, 74, 0.16),
    0 5px 10px -4px rgba(11, 31, 58, 0.28);
}

/* Zone tactile invisible de 48x48 (40 + 8 de marge de chaque cote) sans
   toucher a la taille ni aux espacements visibles de la carte. */
.bouton-waze::before {
  content: "";
  position: absolute;
  inset: -4px;
}

.bouton-waze.bouton-premium:active {
  transform: translateY(2px) scale(0.96);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(146, 120, 74, 0.12);
}

.bouton-waze svg { width: 27px; height: 27px; }

.course-brut {
  margin: 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.course-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.course-details p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.course-details p.detail-telephone {
  margin: 2px 0;
}

/* Numero de telephone en badge cliquable (voir formaterTelephoneAffiche,
   rendreCourse) - meme gabarit "chip" que .bt-repere-course/
   .confie-repere-course juste au-dessus, teinte doree assortie au bouton
   d'appel de l'en-tete pour bien signaler une action d'appel. */
.badge-telephone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fdf8ec 0%, #f3e8cd 100%);
  border: 1px solid rgba(200, 162, 74, 0.4);
  color: var(--navy-900);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}
.badge-telephone svg { width: 15px; height: 15px; flex-shrink: 0; }
.badge-telephone:active { transform: translateY(1px); }

/* === Composant bouton "premium" (toutes les cartes) ===
   Meme recette geometrique/comportementale pour tous les boutons
   d'action : coins a 17px, transition douce, animation d'enfoncement
   identique au clic (translateY + scale, ombre qui se retracte). Seules
   les couleurs/le degrade changent d'un bouton a l'autre (voir chaque
   classe specifique plus bas), pour un rendu premium mais coherent. */
.bouton-premium {
  border-radius: 17px;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}

.bouton-premium:active { transform: translateY(2px) scale(0.985); }

.bouton-premium:disabled {
  opacity: 0.55;
  cursor: default;
  transform: none;
}

/* Bouton message de l'en-tete (voir boutonSmsSommaire, rendreCourse) :
   meme rond que le bouton d'appel juste a cote, mais visible seulement
   carte depliee - la carte repliee reste minimale (heure, nom, appel,
   statut, fleche). */
.course-sommaire[aria-expanded="false"] .bouton-sms-sommaire { display: none; }
.bouton-sms-sommaire { border: none; padding: 0; cursor: pointer; font-family: inherit; }

/* Choix du delai avant d'ouvrir l'app SMS (5/10/15 min ou "Arrivé") :
   petit menu compact qui s'ouvre/se ferme au clic sur le bouton message,
   sans modale ni page dediee. */
.choix-delai-sms {
  display: flex;
  gap: 6px;
}

/* "display: flex" ci-dessus est une regle auteur, qui l'emporte toujours
   sur la regle navigateur "[hidden] { display: none }" (regle du
   navigateur, de priorite plus faible dans la cascade quelle que soit la
   specificite) : sans cette ligne, l'attribut "hidden" pose par app.js
   n'avait donc AUCUN effet visuel et le menu restait affiche en
   permanence, rendant le bouton message inutile au clic. */
.choix-delai-sms[hidden] { display: none; }

.pastille-delai-sms {
  flex: 1 1 0;
  min-width: 0;
  min-height: 36px;
  padding: 6px 4px;
  border-radius: 999px;
  background: var(--paper-alt);
  border: 1px solid var(--line);
  color: var(--navy-800);
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
}

.pastille-delai-sms:hover { border-color: var(--navy-700); background: #dbe4f2; }
.pastille-delai-sms:active { transform: scale(0.96); }

/* Ligne 2 (actions principales) : fiche (dominante, plus large) + copier
   (compacte) - meme hauteur, largeurs desequilibrees (voir le ratio flex
   ci-dessous), meme relief. */
.ligne-actions-principales {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ligne-actions-principales > button { min-width: 0; }
.ligne-actions-principales .bouton-modifier { flex: 1.5 1 0; }
.ligne-actions-principales .bouton-copier-aller,
.ligne-actions-principales .bouton-copier-retour { flex: 1 1 0; }

.bouton-copier-aller,
.bouton-copier-retour {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
  background: linear-gradient(180deg, #f4f8fd 0%, #e4edf8 100%);
  border: 1px solid rgba(94, 124, 163, 0.4);
  color: var(--navy-800);
  padding: 8px 10px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -2px 0 rgba(70, 95, 130, 0.14),
    0 3px 8px -3px rgba(30, 50, 80, 0.2);
}

.bouton-copier-aller:active,
.bouton-copier-retour:active {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(70, 95, 130, 0.1);
}

.bouton-copier-aller svg,
.bouton-copier-retour svg { width: 16px; height: 16px; flex-shrink: 0; }

.bouton-modifier {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  background: linear-gradient(180deg, #1c3d6b 0%, var(--navy-900) 100%);
  color: var(--paper);
  border: 1px solid rgba(0, 0, 0, 0.35);
  padding: 8px 14px;
  font-size: 0.86rem;
  cursor: pointer;
  font-weight: 700;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -3px 0 rgba(0, 0, 0, 0.32),
    0 6px 14px -6px rgba(11, 31, 58, 0.55);
}

.bouton-modifier:active {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.bouton-modifier svg { width: 17px; height: 17px; flex-shrink: 0; }

/* "Plus" : meme relief que Aller/Retour, plus etroit, contenu sur deux
   lignes (trois points au-dessus du mot) - deplie .menu-plus juste en
   dessous (voir rendreCourse). */
.ligne-actions-principales .bouton-plus { flex: 0.62 1 0; }
.bouton-plus {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-height: 48px;
  padding: 6px 4px;
  background: linear-gradient(180deg, #f4f8fd 0%, #e4edf8 100%);
  border: 1px solid rgba(94, 124, 163, 0.4);
  color: var(--navy-800);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-body);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -2px 0 rgba(70, 95, 130, 0.14),
    0 3px 8px -3px rgba(30, 50, 80, 0.2);
}
.bouton-plus-points { font-size: 1rem; line-height: 1; letter-spacing: 1px; font-weight: 800; }
.bouton-plus[aria-expanded="true"] { background: linear-gradient(180deg, #e4edf8 0%, #d6e2f2 100%); }

/* Actions secondaires depliees par "Plus" (dupliquer, facture, supprimer) :
   les memes boutons pleine largeur qu'avant, simplement ranges ici. */
.menu-plus { display: flex; flex-direction: column; gap: 8px; }
.menu-plus[hidden] { display: none; }

/* Ligne de pastilles de la carte depliee (RDV / Retirer / Montant) : trois
   reperes de meme largeur, bords alignes sur la ligne de boutons juste en
   dessous - voir lignePilules dans rendreCourse. */
.ligne-pilules {
  display: flex;
  gap: 8px;
}

.pilule-fiche {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: 0 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f6f8fc 0%, #eaeff7 100%);
  border: 1px solid #dde4ef;
  color: var(--navy-900);
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 3px 7px -3px rgba(11, 31, 58, 0.18);
}
.pilule-fiche svg { width: 17px; height: 17px; flex-shrink: 0; }
.pilule-fiche > span { overflow: hidden; text-overflow: ellipsis; }
.pilule-fiche-rdv span { font-weight: 500; }
.pilule-fiche-rdv strong { font-weight: 700; }

/* RDV et montant ont besoin d'un peu plus de place que "Retirer"/
   "Réintégrer" (texte plus court) - largeurs inegales mais espacement et
   hauteur identiques (voir .ligne-pilules), pour eviter toute coupure
   ("..."). */
.pilule-fiche-rdv,
.pilule-fiche-montant {
  flex-grow: 1.3;
}

/* Retirer/Reintegrer : un vrai bouton, meme habillage que les deux autres
   pastilles (voir boutonExclure, rendreCourse). */
.pilule-fiche-bouton {
  flex-grow: 0.75;
  cursor: pointer;
  font-family: var(--font-body);
  -webkit-tap-highlight-color: transparent;
}
.pilule-fiche-bouton:active { transform: translateY(1px); }
.pilule-fiche-bouton:disabled { opacity: 0.55; cursor: default; }

/* Montant estime : fond creme + pile de pieces dorees (ICONE_PIECES). */
.pilule-fiche-montant {
  background: linear-gradient(180deg, #fdf8ec 0%, #f3e8cd 100%);
  border-color: rgba(200, 162, 74, 0.4);
}
.pilule-fiche-montant svg { width: 20px; height: 20px; }

.course-actions {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

/* Ligne 3 (attribution) : visible mais moins dominante que la fiche -
   pleine largeur, style premium clair (bleu perle) avec leger relief.
   Pastille circulaire bleu nuit pour l'icone avion en papier. */
.ligne-envoyer .bouton-envoyer {
  width: 100%;
  justify-content: center;
}

.bouton-envoyer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  background: linear-gradient(180deg, #f4f8fd 0%, #e4edf8 100%);
  border: 1px solid rgba(94, 124, 163, 0.4);
  color: var(--navy-800);
  padding: 8px 16px;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -2px 0 rgba(70, 95, 130, 0.14),
    0 3px 8px -3px rgba(30, 50, 80, 0.2);
}

.bouton-envoyer:active {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -1px 0 rgba(70, 95, 130, 0.1);
}

.pastille-icone-envoyer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--navy-900);
  color: #fff;
  flex-shrink: 0;
}

.pastille-icone-envoyer svg { width: 13px; height: 13px; }

/* "Dupliquer cette course" : meme forme/relief que .bouton-envoyer
   (partagee via .bouton-envoyer, voir rendreCourse dans app.js), teinte
   doree plutot que bleue pour la distinguer visuellement du bouton
   "Envoyer" juste au-dessus - deux actions differentes malgre la meme
   ligne pleine largeur. */
.bouton-dupliquer {
  background: linear-gradient(180deg, #fdf9f0 0%, #f4ead0 100%);
  border-color: rgba(200, 162, 74, 0.5);
}

.pastille-icone-dupliquer {
  background: var(--gold-500);
  color: #fff;
}

/* "Creer la facture" : meme forme/relief que .bouton-envoyer, teinte verte
   (argent/facturation) pour la distinguer de "Envoyer" (bleu) et
   "Dupliquer" (dore) - voir donneesFactureDepuisCourse dans app.js. */
.bouton-facture {
  background: linear-gradient(180deg, #f1faf4 0%, #dcf0e2 100%);
  border-color: rgba(60, 140, 90, 0.4);
}

.pastille-icone-facture {
  background: #2f8a54;
  color: #fff;
}

/* Ligne 4 (action sensible) : bouton fantome compact et centre,
   delibérément plus discret pour ne pas concurrencer les actions
   principales - meme icone, meme comportement (et meme confirmation) au
   clic, juste un habillage plus sobre (fond blanc, contour tres fin,
   aucune ombre portee, largeur adaptee au texte plutot qu'etiree). */
.ligne-retirer {
  display: flex;
  justify-content: center;
}

.bouton-discret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  background: var(--paper);
  border: 1px solid rgba(150, 163, 182, 0.45);
  color: var(--ink-soft);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 8px 16px;
  cursor: pointer;
  box-shadow: none;
}

.bouton-discret:active { background: var(--paper-alt); }
.bouton-discret svg { width: 15px; height: 15px; flex-shrink: 0; }
.bouton-discret:hover { background: var(--paper-alt); border-color: rgba(150, 163, 182, 0.7); }

/* "Supprimer definitivement" (voir app.js) : rouge pour bien le distinguer
   de "Retirer de la feuille de route" juste au-dessus, un simple masquage
   reversible - meme codage couleur que .admin-bouton-danger (Administration). */
.bouton-supprimer-course {
  color: var(--danger);
  border-color: rgba(179, 38, 30, 0.25);
  background: var(--danger-bg);
}
.bouton-supprimer-course:hover { background: var(--danger-bg); border-color: rgba(179, 38, 30, 0.45); }

@media (max-width: 370px) {
  /* Avec "Modifier" + Aller + Retour + Plus, 4 boutons ne tiennent plus
     sur une seule ligne a cette largeur : Modifier prend sa propre ligne,
     les trois autres se partagent celle du dessous. */
  .ligne-actions-principales .bouton-modifier { flex: 1 1 100%; }
  .ligne-actions-principales .bouton-copier-aller,
  .ligne-actions-principales .bouton-copier-retour {
    flex: 1 1 0;
    font-size: 0.78rem;
    padding: 8px 6px;
  }
  .pilule-fiche { font-size: 0.78rem; gap: 5px; padding: 0 5px; }
}

/* --- Modale "Envoyer à un chauffeur" --- */

/* Choix "Individuellement" (destinataires cibles, voir liste-collegues
   ci-dessous) vs "Au dispatch" (pool commun du groupe, voir dispatch.html)
   - meme pilule a deux segments que la bascule Aujourd'hui/Demain de la
   page Equipe (.equipe-toggle-jour), dupliquee ici car app.html ne charge
   pas equipe.css. */
.envoi-mode-toggle {
  display: flex;
  margin-bottom: 14px;
  padding: 3px;
  background: var(--paper-alt);
  border-radius: 999px;
  gap: 3px;
}

.envoi-mode-bouton {
  flex: 1 1 0;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  padding: 8px 10px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.envoi-mode-bouton.actif {
  background: var(--navy-900);
  color: #fff;
}

.envoi-dispatch-info {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.4;
}

/* "flex-shrink: 0" est le vrai correctif ici (pas les cases a cocher) :
   .modale form (voir plus haut) est un conteneur flex en colonne qui
   defile deja lui-meme (overflow-y: auto) - un enfant qui a LUI AUSSI
   overflow-y: auto (cette liste) voit par defaut sa taille minimale
   automatique retombee a 0 en flexbox (regle CSS peu connue :
   "min-height: auto" ne vaut le contenu que si overflow reste "visible").
   Resultat : des que le formulaire manquait de place, cette liste se
   faisait ecraser jusqu'a une hauteur ridicule (une ligne coupee en deux,
   noms visibles seulement en scrollant un par un dans cette mini-fenetre) -
   pendant que le reste du formulaire, lui, gardait sa taille normale. Avec
   flex-shrink: 0, elle garde toujours sa hauteur naturelle (jusqu'a
   max-height), et c'est le formulaire entier qui defile a la place. */
.liste-collegues {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 2px;
  margin-top: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px 12px;
  max-height: 220px;
  overflow-y: auto;
}

.collegue-ligne {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}

/* La vraie case <input> reste dans le DOM (accessibilite/clavier) mais
   visuellement masquee - jamais display:none, qui la sortirait de l'ordre
   de tabulation. Redimensionner/recolorer la case NATIVE (width/height/
   accent-color) rendait carrement toute la ligne invisible sur certains
   telephones Android (bug reel signale par un chauffeur) - voir
   .case-visuelle juste en dessous, qui prend le relai visuel avec un
   simple <span>. Superposee en position absolute EXACTEMENT sur cette
   case visuelle (meme taille 22x22, plutot qu'un habituel "1px carre
   invisible") : un pave de 1px, bien que hors ecran visuellement, reste un
   element focusable de taille normale pour le navigateur - cocher la case
   au clavier/toucher declenchait alors un "defiler cet element dans la
   vue" qui deformait la modale entiere (bande blanche en trop signalee par
   un chauffeur, uniquement au moment de cocher). Un pave de la bonne
   taille, au bon endroit, n'a plus cette raison de faire defiler quoi que
   ce soit. */
.collegue-ligne input[type="checkbox"] {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.case-visuelle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border: 2px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
}
.case-visuelle svg { width: 14px; height: 14px; color: #fff; opacity: 0; }
.collegue-ligne input[type="checkbox"]:checked + .case-visuelle {
  background: var(--navy-900);
  border-color: var(--navy-900);
}
.collegue-ligne input[type="checkbox"]:checked + .case-visuelle svg { opacity: 1; }
.collegue-ligne input[type="checkbox"]:focus-visible + .case-visuelle {
  outline: 2px solid var(--navy-700);
  outline-offset: 2px;
}

.collegue-ligne + .collegue-ligne { border-top: 1px solid var(--line); }

/* Selecteur de couleur "vue combinee" (voir afficherPaletteCouleurPartage,
   app.js) : une rangee de pastilles pleines, meme palette que
   PALETTE_COULEURS_PARTAGE (server.js) - la couleur choisie porte un
   contour marque, les autres restent nues. */
.palette-couleur-partage {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 4px 2px 2px;
}
.swatch-couleur-partage {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  box-shadow: var(--shadow);
}
.swatch-couleur-partage-choisie {
  border-color: var(--navy-900);
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--navy-900);
}

.envoi-etat {
  margin-top: 10px;
  font-size: 0.85rem;
  font-weight: 600;
}

.envoi-etat.envoi-etat-erreur { color: var(--danger); }
.envoi-etat.envoi-etat-succes { color: var(--med-green); }

.badges {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.badge {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--gold-100);
  color: var(--navy-900);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* --- Modales (réglages, fiche transport) --- */

.modale {
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0;
  width: min(480px, calc(100vw - 32px));
  /* "dvh" (hauteur de viewport DYNAMIQUE) apres le repli "vh" classique :
     sur mobile, "100vh" reste calcule sur la plus GRANDE hauteur possible
     (barre d'adresse/clavier replies), meme une fois le clavier ferme ou la
     barre revenue - la modale gardait alors une reserve de hauteur bien
     plus grande que le viewport reellement visible, laissant une bande
     blanche vide en bas (bug signale par un chauffeur). "dvh" suit la
     vraie hauteur visible en temps reel. Repli ignore silencieusement sur
     un navigateur trop ancien pour "dvh" (garde alors la valeur "vh"). */
  max-height: calc(100vh - 64px);
  max-height: calc(100dvh - 64px);
}

.modale::backdrop { background: rgba(11, 31, 58, 0.55); }

.modale form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px;
  overflow-y: auto;
  max-height: calc(100vh - 64px);
  max-height: calc(100dvh - 64px);
}

.modale h2 {
  margin: 0 0 8px;
  color: var(--navy-900);
  font-size: 1.15rem;
}

.modale label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-top: 8px;
}

.modale input[type="text"],
.modale input[type="number"],
.modale input[type="time"],
.modale input[type="tel"],
.modale select,
.modale textarea {
  font-family: var(--font-body);
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.95rem;
  width: 100%;
}

/* Sans ca, quand le clavier reduit la hauteur visible (formulaire en
   flex-column avec overflow-y:auto), le textarea se fait ecraser par
   l'algorithme de retrecissement flex avant que le formulaire ne se mette
   a defiler - la case "Observations" se retrouvait haute d'une seule
   ligne au lieu des 5 prevues. */
.modale textarea {
  min-height: 110px;
  flex-shrink: 0;
  resize: vertical;
}

/* Messages SMS personnalisables (Reglages) : 4 champs a la suite, la
   hauteur par defaut de 110px les rendrait beaucoup trop longs a faire
   defiler pour un texte de quelques lignes. "resize: none" (le "vertical"
   herite de .modale textarea desactive ici) : la poignee de redimensionnement
   tenait trop peu de place entre 4 champs aussi rapproches sur mobile, un
   chauffeur a signale un rendu visuel casse en tapant dedans (probablement
   la poignee accrochee par erreur au doigt). Ces champs n'ont de toute
   facon pas besoin d'etre agrandis a la main pour un texte de quelques
   lignes. */
.modale textarea.champ-sms-court {
  min-height: 70px;
  resize: none;
}

.modale-grille-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Reserve la meme hauteur a chaque etiquette de la paire (2 lignes), quel
   que soit le nombre de lignes que son propre texte occupe : sans ca,
   "Heure PEC retour" (une ligne) et "Heure de dépose retour" (deux lignes)
   decalaient verticalement leurs champs l'un par rapport a l'autre. */
.modale-grille-2 > div > label {
  min-height: 2.4em;
  display: flex;
  align-items: flex-end;
}

.etiquette-case {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 16px;
}

/* "Aperçu horaires du jour" (#modale-apercu-horaires) : une ligne compacte
   par course (plage prise en charge -> depose + nom), triees par heure -
   voir rendreApercuHoraires, app.js. */
.apercu-horaires-entete {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.apercu-horaires-icone {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(155deg, #1c3d6b 0%, var(--navy-900) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px -6px rgba(11, 31, 58, 0.5);
}
.apercu-horaires-icone svg { width: 20px; height: 20px; }

.apercu-horaires-entete h2 { margin: 0; }

.apercu-horaires-sous-titre {
  margin: 1px 0 0;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.apercu-horaires-alerte-compte { color: var(--danger); font-weight: 700; }

.apercu-horaires-liste {
  display: flex;
  flex-direction: column;
  margin-top: 6px;
}

.apercu-horaires-separateur {
  height: 1px;
  background: var(--line);
  margin: 0 6px;
}

.apercu-horaires-ligne {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 6px;
  border-radius: 10px;
}
.apercu-horaires-ligne-alt { background: var(--paper-alt); }

.apercu-horaires-point {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--navy-700);
}

.apercu-horaires-plage {
  flex: 0 0 auto;
  /* "min-width" (pas "width" fixe) : le champ <input type="time"> d'edition
     a besoin d'un peu plus de place que le texte affiche normalement - la
     pastille peut alors s'elargir, jamais retrecir en dessous de sa largeur
     habituelle. */
  min-width: 116px;
  /* Sans ca, "07:15 -> 07:30" retombait sur deux lignes des que la police
     Inter n'etait pas encore chargee (police systeme de repli plus large) -
     repere sur capture utilisateur, pastille devenue haute et illisible. */
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 3px;
  font-weight: 700;
  font-size: 0.76rem;
  color: var(--navy-900);
  font-variant-numeric: tabular-nums;
}

/* Heure PEC/depose tapable pour la modifier directement depuis cette liste
   (voir ouvrirEditionHeureApercu, app.js), sans passer par la fiche - meme
   principe que la pastille-heure de la liste principale. */
.apercu-horaires-heure {
  border: none;
  background: none;
  padding: 1px 2px;
  font: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: 4px;
}
.apercu-horaires-heure:active { background: rgba(11, 31, 58, 0.1); }

.apercu-horaires-heure-edition {
  border: 1.5px solid var(--navy-700);
  background: var(--paper);
  border-radius: 6px;
  padding: 0 2px;
  width: 58px;
}

.apercu-horaires-fleche { flex-shrink: 0; }

.apercu-horaires-nom {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.88rem;
  font-weight: 600;
}

/* Ligne dont la prise en charge tombe a moins de 15 min de la depose
   precedente (SEUIL_APERCU_HORAIRES_MINUTES, app.js) : meme rouge que
   .course-chevauchement pour rester coherent avec l'alerte deja connue du
   chauffeur ailleurs dans l'appli. */
.apercu-horaires-alerte {
  margin: 2px 0 2px 22px;
  align-self: flex-start;
  padding: 4px 8px;
  border-radius: 7px;
  background: var(--danger-bg);
  color: var(--danger);
  font-size: 0.7rem;
  font-weight: 700;
}
.apercu-horaires-ligne-alerte { background: var(--danger-bg); }
.apercu-horaires-ligne-alerte .apercu-horaires-point { background: var(--danger); }
.apercu-horaires-ligne-alerte .apercu-horaires-plage { border-color: #f3c9c5; color: var(--danger); background: var(--paper); }

.modale-actions-centrees { justify-content: center; }

.bouton-secondaire-clair.bouton-pilule {
  border-radius: 999px;
  padding: 10px 28px;
}

/* --- Facturation (voir facture.html/facture.js) --- */
.modale-facture { width: min(520px, calc(100vw - 24px)); }

.fac-case {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--ink);
  margin-top: 12px;
  cursor: pointer;
}
.fac-case input[type="checkbox"] { flex-shrink: 0; width: 18px; height: 18px; }
.fac-case-alignee { margin-top: 9px; }

.reglages-section-titre-premiere { margin-top: 0; padding-top: 0; border-top: none; }

/* flex-shrink:0 indispensable : dans le formulaire (flex-direction:column,
   overflow-y:auto), un enfant avec overflow-x:auto voit sa taille minimale
   automatique tomber a 0 (regle CSS flexbox) et peut se faire ecraser a
   hauteur 0 par l'algorithme flex - verifie en pratique (tableau invisible
   sans cette regle, alors que son contenu se rend correctement). */
.fac-tableau-scroll { margin-top: 10px; overflow-x: auto; flex-shrink: 0; }

.fac-tableau { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 0.78rem; }
.fac-tableau th, .fac-tableau td { border: 1px solid var(--line); padding: 6px; text-align: left; }
.fac-tableau th { background: var(--navy-050); font-weight: 700; color: var(--navy-900); }
.fac-tableau td input[type="number"] {
  width: 100%;
  border: none;
  font-family: var(--font-body);
  font-size: 0.8rem;
  padding: 2px;
}
.fac-tableau td input[type="number"]:focus { outline: 1px solid var(--gold-500); }

/* Carte facture "glissante" (voir rendreFacture dans facture.js) : seuls
   le nom et la date restent visibles par defaut, les 4 actions (voir/
   modifier/partager/supprimer) se decouvrent en faisant glisser la carte
   vers la gauche plutot que d'occuper de la place en permanence. Meme
   principe que les cartes "bons" (.bt-carte), mais horizontal :
   .fac-resume et .bt-bas sont deux "pages" cote a cote dans une bande
   defilante (overflow-x + scroll-snap), pas une seule ligne empilee. */
.fac-carte { padding: 0; overflow: hidden; }
.fac-glissiere {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.fac-glissiere .fac-resume {
  flex: 0 0 100%;
  scroll-snap-align: start;
  padding: 9px 16px;
  min-height: 34px;
  cursor: default;
}
.fac-glissiere .bt-bas {
  flex: 0 0 auto;
  scroll-snap-align: end;
  flex-wrap: nowrap;
  padding: 8px 16px;
}
/* .fac-glissiere a "align-items: stretch" par defaut (herite, non
   redefini) : .fac-resume s'etire toujours a la hauteur de .bt-bas, donc
   c'est la taille des boutons d'action ci-dessous qui pilote reellement
   la hauteur de toute la carte - reduire seulement le padding plus haut
   ne suffisait pas tant que les boutons restaient a 44x44 (zone tactile
   des bons de transport, beaucoup plus genereuse que necessaire pour 4
   icones sans texte cote a cote). 36x36 reste une cible confortable et
   permet des cartes nettement plus fines dans la liste. */
.fac-glissiere .bt-bas .bt-bouton-visualiser,
.fac-glissiere .bt-bas .bt-bouton-modifier,
.fac-glissiere .bt-bas .bt-bouton-partager,
.fac-glissiere .bt-bas .bt-bouton-supprimer {
  width: 36px;
  height: 36px;
}
.fac-glissiere .bt-bas .bt-bouton-visualiser svg,
.fac-glissiere .bt-bas .bt-bouton-modifier svg,
.fac-glissiere .bt-bas .bt-bouton-partager svg,
.fac-glissiere .bt-bas .bt-bouton-supprimer svg {
  width: 16px;
  height: 16px;
}

/* Repere visuel ("voici des actions cachees, glissez") + alternative
   cliquable pour la souris/le clavier, qui n'ont pas de geste de
   glissement tactile. */
.fac-glisser-indice {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  opacity: 0.55;
  cursor: pointer;
  padding: 0;
}
.fac-glisser-indice svg { width: 16px; height: 16px; }

.bloc-retour {
  margin-top: 12px;
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: 8px;
}

.lien-mappy-course {
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--navy-900);
  text-decoration: none;
  min-height: 32px;
}
.lien-mappy-course:active { opacity: 0.7; }

.bloc-retour legend {
  font-weight: 700;
  color: var(--navy-900);
  padding: 0 4px;
}

.reglages-section-titre {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-weight: 700;
  color: var(--navy-900);
  font-size: 0.9rem;
}

/* Section "Messages (SMS)" repliable (voir #reglages-sms-toggle, app.js) :
   meme gabarit que .reglages-section-titre juste au-dessus, mais un vrai
   <button> (chevron qui tourne selon aria-expanded) plutot qu'un <p> fixe. */
.reglages-section-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
  margin: 18px 0 0;
  padding: 14px 0 0;
  border: none;
  border-top: 1px solid var(--line);
  background: none;
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--navy-900);
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}
.reglages-section-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--ink-soft);
  transition: transform 0.15s ease;
}
.reglages-section-toggle[aria-expanded="true"] .reglages-section-chevron { transform: rotate(180deg); }
.reglages-section-contenu { padding-top: 6px; }

.reglage-ligne-interrupteur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}

.aide-reglage {
  margin: 6px 0 0;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--ink-soft);
  line-height: 1.35;
}

.modale-actions {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.modale-actions-espacees {
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.modale-actions-boutons {
  display: flex;
  gap: 10px;
}

/* Visible uniquement pour un admin (voir utilisateurs.est_admin, JS
   app.js) : gestion des groupes de chauffeurs. */
.lien-administration {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--navy-900);
  background: var(--navy-050);
  border: 1px solid rgba(11, 31, 58, 0.15);
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  margin-top: 8px;
}

.lien-administration:hover { background: #dde5f2; }

.lien-deconnexion {
  display: inline-flex;
  align-items: center;
  color: var(--danger);
  background: var(--danger-bg);
  border: 1px solid rgba(179, 38, 30, 0.25);
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}

.lien-deconnexion:hover { background: #f6d9d7; }

.bouton-principal {
  background: var(--navy-900);
  color: var(--paper);
  border: none;
  padding: 10px 18px;
  border-radius: 8px;
  font-weight: 700;
  cursor: pointer;
}

.modale-texte { margin: 0; color: var(--ink); line-height: 1.4; }

.modale-texte-attenuee {
  margin-top: 6px;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* Confirmation "reservation pour aujourd'hui" (voir reservation.html/js) :
   icone doree centree en tete de modale, meme esprit visuel qu'un
   badge-medical/pilule-fiche-montant plutot qu'une simple alerte texte. */
.modale-icone-ronde {
  width: 44px;
  height: 44px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(180deg, #fdf8ec 0%, #f3e8cd 100%);
  border: 1px solid rgba(200, 162, 74, 0.4);
  color: var(--gold-500);
}

.modale-confirmation-jour-meme h2 { text-align: center; }

.badge-jour-meme {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--amber-100);
  color: var(--amber-500);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

/* Confirmation de suppression definitive d'une course (voir app.js,
   #modale-suppression-course) : bouton plein rouge (jamais la couleur
   habituelle de .bouton-principal) pour qu'une action aussi grave se
   distingue visuellement de toutes les autres confirmations de l'appli.
   Desactive le temps du petit compte a rebours (voir ouvrirModaleSuppression-
   Course, app.js) - marge de securite contre un appui reflexe/accidentel
   sur un bouton qui, sinon, serait immediatement cliquable. */
.bouton-danger-plein {
  background: var(--danger);
}
.bouton-danger-plein:disabled {
  background: var(--ink-soft);
  cursor: not-allowed;
  opacity: 0.7;
}

.bouton-secondaire-clair {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  padding: 10px 18px;
  border-radius: 8px;
  cursor: pointer;
}

/* --- Administration (page admin.html, groupes de chauffeurs) --- */

.admin-section {
  max-width: 760px;
  margin: 0 auto 24px;
  padding: 0 16px;
}

.admin-section-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.admin-section h2 { margin: 0 0 4px; font-size: 1.05rem; color: var(--navy-900); }

.admin-aide { margin: 4px 0 12px; font-size: 0.82rem; color: var(--ink-soft); }

.admin-liste-groupes,
.admin-liste-chauffeurs { display: flex; flex-direction: column; gap: 8px; }

.admin-ligne-groupe,
.admin-ligne-chauffeur {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px 14px;
}

.admin-nom-groupe { font-weight: 700; color: var(--ink); }

.admin-ligne-groupe .bouton-discret { color: var(--danger); border-color: rgba(179, 38, 30, 0.25); background: var(--danger-bg); }

.admin-ligne-chauffeur {
  /* Nom + (badge) + boutons + selecteur ne tiennent pas toujours sur une
     seule ligne sur mobile : sans ce wrap, le nom (min-width:0 ci-dessous)
     se retrouvait ecrase a largeur 0 - invisible mais toujours dans le DOM -
     par les elements a largeur fixe. On force le nom sur sa propre ligne
     pleine largeur, le reste (toujours a droite) en dessous au besoin. */
  flex-wrap: wrap;
  row-gap: 10px;
}

.admin-infos-chauffeur {
  font-weight: 600;
  color: var(--ink);
  min-width: 0;
  flex: 1 1 100%;
  white-space: normal;
}

.admin-ligne-chauffeur.admin-en-attente {
  border: 1px solid rgba(200, 162, 74, 0.5);
  background: rgba(200, 162, 74, 0.08);
}

.admin-badge-attente {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: #8a6a1f;
  background: rgba(200, 162, 74, 0.2);
  border-radius: 999px;
  padding: 3px 10px;
}

.admin-bouton-approuver,
.admin-bouton-refuser,
.admin-bouton-supprimer { flex-shrink: 0; padding: 8px 14px; font-size: 0.85rem; }

.admin-bouton-danger { color: var(--danger); border-color: rgba(179, 38, 30, 0.25); background: var(--danger-bg); }

.admin-select-groupe {
  min-height: 44px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 0.85rem;
  padding: 6px 10px;
  flex-shrink: 0;
}

.admin-liste-annonces { display: flex; flex-direction: column; gap: 8px; }

.admin-carte-annonce {
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px 14px;
}

.admin-annonce-texte { margin: 0 0 10px; color: var(--ink); white-space: pre-wrap; }

/* "flex-wrap: wrap" + le span date en "flex: 1 1 auto" : sur un ticket, la
   ligne du bas porte le nom/date ET deux boutons ("Marquer traité",
   "Supprimer") - trop pour tenir sur une seule ligne en largeur mobile.
   Sans ce wrap, le contenu debordait purement et simplement de la carte
   (boutons coupes hors ecran) plutot que de passer a la ligne. Les annonces
   (nom/date + un seul bouton "Supprimer") continuent de tenir sur une ligne
   la plupart du temps, ce wrap ne s'y declenche que si besoin. */
.admin-annonce-bas { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

.admin-annonce-date { font-size: 0.78rem; color: var(--ink-soft); flex: 1 1 auto; min-width: 0; }

.admin-liste-tickets { display: flex; flex-direction: column; gap: 8px; }

/* Ticket non encore traite : mis en avant (bordure or, meme codage couleur
   que "En attente" sur les chauffeurs) pour attirer l'oeil en priorite sur
   ceux qui restent a traiter (voir listerTicketsAdmin, db.js : non traites
   en tete de liste). Une fois "traite", la carte redevient neutre et le
   texte grise legerement - toujours visible, mais clairement classe. */
.admin-carte-ticket { border-left: 4px solid var(--gold-500); }
.admin-carte-ticket.admin-ticket-traite { border-left-color: var(--line); }
.admin-carte-ticket.admin-ticket-traite .admin-annonce-texte { color: var(--ink-soft); }

.admin-ticket-boutons { display: flex; gap: 8px; flex-wrap: wrap; flex-shrink: 0; }

@media print {
  .no-print { display: none !important; }
  body { background: var(--paper); }
  .entete { background: none; color: var(--ink); padding: 0 0 12px; }
  .course { box-shadow: none; border: 1px solid var(--line); break-inside: avoid; }
  /* Le contenu deplie (trajet, details...) reste replie par defaut a
     l'ecran (voir .course-corps dans rendreCourse, app.js) mais doit
     toujours apparaitre a l'impression, quelle que soit la carte que le
     chauffeur avait ouverte ou non au moment d'imprimer. */
  .course-corps[hidden] { display: flex; }
  .course-sommaire-chevron { display: none; }
  #zone-resultat { padding: 0; max-width: none; }
}

/* Repere lumineux le long des courses (timeline) : seul element conserve
   de l'habillage "cockpit" propose puis ecarte par l'utilisateur (qui
   preferait l'apparence precedente pour le reste - carte, en-tete, barre
   de date... tous revenus a leur etat d'avant). Ligne dessinee une seule
   fois derriere toute la liste (pas de calcul par carte), stable de 1 a
   30+ courses. */
.liste-courses {
  position: relative;
  padding-left: 22px;
}

.liste-courses::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 22px;
  bottom: 22px;
  width: 2px;
  background: linear-gradient(to bottom, rgba(27, 58, 102, 0.32), rgba(27, 58, 102, 0.08));
  border-radius: 2px;
}

.course { position: relative; }

/* Repere par course : bleu-gris par defaut, rouge pour un conflit
   (.course-chevauchement, deja calcule cote serveur), bleu lumineux pour
   la prochaine course a traiter (.course-prochaine, meme fonction
   idCourseAPrivilegier que le defilement automatique - aucune nouvelle
   regle de selection, voir app.js). */
.course::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 19px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #9aa9c4;
  border: 2px solid var(--paper-alt);
  box-shadow: 0 0 0 2px rgba(27, 58, 102, 0.15);
}
.course.course-prochaine::before {
  background: #4f8ef7;
  box-shadow: 0 0 0 3px rgba(79, 142, 247, 0.3), 0 0 12px -1px rgba(79, 142, 247, 0.75);
}
.course.course-chevauchement::before {
  background: var(--danger);
  box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.25), 0 0 10px -1px rgba(179, 38, 30, 0.55);
}

/* Course partagee par un collegue (voir partages_feuille, estPartagee dans
   rendreCourse) : couleur du proprietaire posee en variable inline sur la
   carte (--couleur-partage, voir app.js) plutot que codee en dur ici -
   chaque chauffeur partage garde SA couleur, deterministe, sans classe CSS
   par personne. Reprend le dessus sur .course-chevauchement/.course-
   affectee ci-dessus si jamais les deux se combinaient (peu probable, une
   course partagee n'a normalement ni chevauchement ni statut affecte
   calcules chez le beneficiaire), d'ou l'ordre : placee apres. */
.course.course-partagee {
  border-left-color: var(--couleur-partage, #9aa9c4);
}
.course.course-partagee::before {
  background: var(--couleur-partage, #9aa9c4);
  box-shadow: 0 0 0 2px rgba(27, 58, 102, 0.15);
}
/* Une course partagee ET masquee ("a donner", voir coursesPartageesPourMoi,
   server.js) peut devenir "imminente" (.course-rappel-imminent, plus haut)
   chez le beneficiaire aussi - l'alerte rouge doit alors reprendre le
   dessus sur la couleur du partageur, sinon le repere d'urgence se
   confondrait avec la couleur "juste indicative" de qui est le partageur. */
.course.course-partagee.course-rappel-imminent { border-left-color: var(--danger); }

/* Petite pastille pleine, carte fermee (voir pointPartage, rendreCourse) :
   meme couleur que le repere de la frise a gauche, pour reconnaitre au
   premier coup d'oeil de qui est la course sans avoir a l'ouvrir. */
.course-sommaire-point-partage {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--couleur-partage, #9aa9c4);
}

/* Repere "Course de <nom>" en tete du detail deplie (voir reperePartage,
   rendreCourse) : meme gabarit que .confie-repere-course, teinte du
   proprietaire plutot que le bleu nuit habituel. */
.course-repere-partage {
  background: var(--navy-050);
  background: color-mix(in srgb, var(--couleur-partage, #9aa9c4) 14%, var(--paper));
  color: var(--couleur-partage, #9aa9c4);
}

/* Bouton "Prendre en charge" (voir estPartagee, rendreCourse) : seule action
   disponible sur une course partagee, pleine largeur, meme relief "premium"
   que les autres boutons d'action de la fiche. */
.bouton-prendre-en-charge {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 17px;
  background: var(--couleur-partage, var(--navy-900));
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
}
.bouton-prendre-en-charge svg { width: 19px; height: 19px; flex-shrink: 0; }
.bouton-prendre-en-charge:disabled { opacity: 0.55; cursor: default; }

/* Banniere d'inscription aux notifications push (voir
   notifications-push.js) : fixee en haut, au-dessus de tout le reste
   (z-index eleve car injectee sur des pages tres variees), padding-top
   incluant l'encoche eventuelle (env(safe-area-inset-top)). */
.notif-push-banniere {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px 10px;
  background: var(--navy-900);
  color: var(--paper);
  box-shadow: var(--shadow);
  font-size: 0.85rem;
}
.notif-push-texte { flex: 1; min-width: 200px; line-height: 1.35; }
.notif-push-actions { display: flex; gap: 8px; flex: none; }
.notif-push-bouton {
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.notif-push-oui { background: var(--gold-500); color: var(--navy-900); }
.notif-push-non { background: rgba(255, 255, 255, 0.12); color: var(--paper); }

/* --- Page Statistiques (voir statistiques.html/js) --- */

.stats-periode {
  max-width: 760px;
  margin: 2px auto 0;
  padding: 0 16px;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.stats-note {
  max-width: 760px;
  margin: 4px auto 0;
  padding: 0 16px;
  font-size: 0.8rem;
  color: var(--ink-soft);
  line-height: 1.4;
}

/* Deux colonnes fixes (jamais une seule sur mobile etroit) : quatre cartes
   courtes restent lisibles cote a cote plutot qu'empilees sur toute la
   hauteur de l'ecran. */
.grille-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 760px;
  margin: 0 auto;
  padding: 4px 16px 16px;
}

.carte-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding: 14px 10px;
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.carte-stat-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--navy-050);
  color: var(--navy-800);
  margin-bottom: 2px;
}
.carte-stat-icone svg { width: 16px; height: 16px; }

.carte-stat-verte .carte-stat-icone { background: var(--med-green-light); color: var(--med-green); }

.carte-stat-valeur {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--navy-900);
  line-height: 1.1;
}

.carte-stat-libelle {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-soft);
}

/* Carte occupant les deux colonnes de .grille-stats (voir "estimés depuis
   cette date" du compteur ci-dessous) - le montant reste la valeur la plus
   importante du bloc, jamais coincee dans une seule colonne etroite. */
.carte-stat-pleine-largeur { grid-column: 1 / -1; }

/* Compteur "depuis ma derniere facturation" (voir schema.sql,
   releves_facturation) : separe visuellement du tableau de bord mensuel
   au-dessus par une bordure haute, jamais confondu avec lui (periodes
   differentes - calendaire pour l'un, libre pour l'autre). */
.bloc-compteur {
  max-width: 760px;
  margin: 24px auto 0;
  padding: 20px 16px 28px;
  border-top: 1px solid var(--line);
}
.grille-stats-compteur { padding: 4px 0 16px; }

.bouton-remise-a-zero {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  border: none;
  border-radius: 17px;
  background: var(--navy-900);
  color: #fff;
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
}
.bouton-remise-a-zero:disabled { opacity: 0.5; cursor: default; }

.historique-releves { margin-top: 16px; }
.historique-releves-titre {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 0 0 6px;
}
.releve-ligne {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 9px 2px;
  font-size: 0.85rem;
  border-top: 1px solid var(--line);
}
.releve-date { color: var(--ink); }
.releve-montant { font-weight: 700; color: var(--navy-900); flex-shrink: 0; }

/* Page publique de reservation (/r/:token) : nouveau bandeau EasyTaxi
   (meme image que l'appli), en-tete plus haut pour afficher tout le logo. */
.entete.entete-haute { height: 84px; }