/* ==========================================================================
   Roby, tunnel de commande. Couche « application ».
   Chargée APRÈS ../css/styles.css : elle reprend les polices, les variables
   de marque et les composants du site, puis bascule le tunnel en surface
   sombre façon application VTC (inDriver, Heetch) : une question par écran,
   grandes cibles tactiles, action principale collée au pouce.
   Mobile d'abord. Aucune propriété physique : logical properties partout,
   le tunnel sera décliné en arabe.
   ========================================================================== */

/* ---------- Jetons de la couche application ---------- */
:root {
  --app-fond: #14100d;          /* fond d'application, noir chaud */
  --app-fond-2: #1c1713;
  --app-surface: #221c17;       /* cartes, champs */
  --app-surface-2: #2c251e;     /* surfaces enfoncées, segments */
  --app-ligne: rgba(255, 244, 232, 0.10);
  --app-ligne-forte: rgba(255, 244, 232, 0.20);
  --app-texte: #f7f1ea;         /* 15.8:1 sur --app-fond */
  --app-texte-2: #b6a99d;       /* 8.3:1 sur --app-fond */
  --app-vert: #4ec97e;          /* départ, statut positif */
  --app-rouge: #ff7a66;         /* erreurs sur fond sombre */

  --r-feuille: 28px;
  --r-carte: 18px;
  --r-champ: 14px;

  --marge: clamp(1.15rem, 5vw, 2rem);
  --largeur-app: 33rem;   /* mobile : colonne d'app etroite */
  --bas-sur: env(safe-area-inset-bottom, 0px);

  --lueur-corail: 0 6px 24px rgba(249, 107, 75, 0.34);
}

/* En version web, on retrouve la largeur de colonne du site (72rem), demande
   de Stephane du 2026-08-11. Le mobile garde sa colonne d'app etroite. */
@media (min-width: 64rem) {
  :root { --largeur-app: 72rem; }
}

/* ---------- Base ---------- */
html { background: var(--app-fond); }
/* Coque d'application : le corps occupe toute la hauteur pour que l'action
   principale de chaque écran tombe sous le pouce, même quand l'écran est court. */
body {
  background: var(--app-fond);
  color: var(--app-texte);
  min-block-size: 100svh;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}
main { flex: 1 1 auto; display: flex; flex-direction: column; }
main > section { flex: 1 1 auto; display: flex; flex-direction: column; }
[hidden] { display: none !important; }

/* halo discret derrière l'entête : la « carte » que l'on devine dans les apps VTC */
body::before {
  content: "";
  position: fixed; inset-block-start: 0; inset-inline: 0; height: 60vh;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(249, 107, 75, 0.16), transparent 70%),
    repeating-linear-gradient(115deg, rgba(255, 244, 232, 0.035) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(25deg, rgba(255, 244, 232, 0.028) 0 1px, transparent 1px 62px);
  pointer-events: none;
  z-index: 0;
}

:focus-visible { outline: 3px solid var(--corail-nuit); outline-offset: 2px; }

.conteneur { max-width: var(--largeur-app); padding-inline: var(--marge); }
section { padding-block: 0; }
p { max-width: none; }

.evitement { background: var(--corail); color: var(--encre); }
.evitement:focus { color: var(--encre); }

/* Icônes en masque : utilisables sur des nœuds dont le JS réécrit le contenu
   (le pseudo-élément survit à un textContent = "..."). */
.ico::before,
.ico::after { -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }

/* ---------- Bandeau environnement de test ---------- */
.bandeau-staging {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: rgba(255, 204, 0, 0.12);
  color: #ffd75e;
  border-block-end: 1px solid rgba(255, 204, 0, 0.22);
  font-family: var(--police-titres);
  font-weight: 600; font-size: 0.75rem; line-height: 1.35;
  text-align: center;
  padding: 0.5rem var(--marge);
}
.bandeau-staging::before {
  content: ""; flex: 0 0 auto;
  width: 7px; height: 7px; border-radius: 50%;
  background: #ffcc00;
  box-shadow: 0 0 0 0 rgba(255, 204, 0, 0.6);
  animation: pouls-test 2.4s ease-out infinite;
}
@keyframes pouls-test {
  70% { box-shadow: 0 0 0 8px rgba(255, 204, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 204, 0, 0); }
}

/* ---------- Barre d'application ---------- */
.entete {
  position: sticky; inset-block-start: 0; z-index: 40;
  background: rgba(20, 16, 13, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-block-end: 1px solid var(--app-ligne);
}
.entete-inner { min-height: 3.75rem; gap: var(--e-2); }
.logo img { height: 2.1rem; }
.selecteur-langue { margin-inline-start: auto; border-color: var(--app-ligne-forte); }
.selecteur-langue a { color: var(--app-texte-2); }
.selecteur-langue a[aria-current="true"] { background: var(--app-texte); color: var(--app-fond); }

.langue-bientot {
  color: var(--app-texte-2); opacity: 0.45; cursor: help;
  padding: 0.25rem 0.5rem; font-size: 0.8rem;
}

/* Sélecteur de thème : jour / nuit / système, trois états exclusifs */
.choix-theme {
  display: inline-flex; flex: 0 0 auto; gap: 2px;
  background: var(--app-surface-2); border: 1px solid var(--app-ligne);
  border-radius: 999px; padding: 3px;
}
.choix-theme button {
  display: grid; place-items: center;
  inline-size: 2rem; block-size: 2rem;
  background: none; border: 0; border-radius: 50%;
  color: var(--app-texte-2); cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.choix-theme button svg { inline-size: 15px; block-size: 15px; }
.choix-theme button:hover { color: var(--app-texte); }
.choix-theme button[aria-pressed="true"] { background: var(--corail); color: var(--encre); }

.btn-deconnexion {
  display: inline-flex; align-items: center; gap: 0.4rem;
  flex: 0 0 auto;
  font: inherit; font-family: var(--police-titres); font-weight: 600; font-size: 0.8rem;
  color: var(--app-texte-2);
  background: none; border: 1px solid var(--app-ligne-forte); border-radius: 999px;
  padding: 0.45rem 0.85rem; cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease;
}
.btn-deconnexion:hover { color: var(--corail); border-color: var(--corail); }
.btn-deconnexion svg { width: 15px; height: 15px; }
@media (max-width: 32rem) { .btn-deconnexion span { display: none; } .btn-deconnexion { padding: 0.45rem 0.55rem; } }

.btn-retour {
  display: grid; place-items: center;
  inline-size: 2.5rem; block-size: 2.5rem;
  flex: 0 0 auto;
  margin-inline-start: calc(var(--marge) * -0.35);
  background: none; border: 0; border-radius: 50%;
  color: var(--app-texte); cursor: pointer;
  transition: background var(--transition);
}
.btn-retour:hover { background: var(--app-surface-2); }
.btn-retour svg { inline-size: 22px; block-size: 22px; }
[dir="rtl"] .btn-retour svg { transform: scaleX(-1); }

/* ---------- Progression : sept segments (l'indicateur unique) ---------- */
.progression { display: none; }   /* remplacée par .jalons, gardée pour le JS */

/* Les jalons sont maintenant DANS la barre d'action, au-dessus du bouton
   principal, plus dans l'en-tete. Ils n'ont donc plus a se recentrer ni a
   reprendre la marge laterale : la barre s'en charge deja. */
.jalons-cadre { padding-block-end: 0.7rem; }
.barre-action .jalons-cadre { padding-block: 0 0.85rem; margin-block-start: -0.2rem; }
.barre-action .jalons { padding-inline: 0; max-width: none; }
.jalons {
  display: flex; gap: 4px;
  list-style: none; margin: 0; padding: 0;
  max-width: var(--largeur-app); margin-inline: auto;
  padding-inline: var(--marge);
}
.jalons li {
  flex: 1 1 0;
  position: relative;
  block-size: 3px; border-radius: 999px;
  background: var(--app-ligne);
  transition: background 300ms ease;
}
.jalons li .jalon-nom {
  position: absolute; inline-size: 1px; block-size: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.jalons li.fait { background: rgba(249, 107, 75, 0.55); }
.jalons li.actif { background: var(--corail); box-shadow: 0 0 12px rgba(249, 107, 75, 0.6); }
/* cible tactile de 44 px sans épaissir le trait */
.jalons li.cliquable { cursor: pointer; }
.jalons li.cliquable::after {
  content: ""; position: absolute; inset-inline: 0; inset-block: -20px;
}
.jalons li.cliquable:hover { background: var(--corail-nuit); }
.jalons li:focus-visible { outline-offset: 7px; }

@media (min-width: 48rem) {
  .jalons { gap: 8px; }
  /* en desktop, chaque jalon devient un vrai onglet : libelle au-dessus,
     barre de progression DESSOUS. Le trait ne traverse plus jamais le texte. */
  .jalons li,
  .jalons li.fait,
  .jalons li.actif {
    block-size: auto; background: transparent; box-shadow: none;
    display: flex; flex-direction: column; gap: 8px;
  }
  .jalons li .jalon-nom {
    order: 1;
    position: static; inline-size: auto; block-size: auto;
    clip-path: none; overflow: visible;
    display: block;
    font-family: var(--police-titres); font-weight: 600; font-size: 0.92rem;
    line-height: 1.2; padding-block-start: 0.2rem;
    color: var(--app-texte-2); text-align: center;
    transition: color 300ms ease;
  }
  .jalons li::before {
    content: ""; order: 2; display: block;
    block-size: 4px; border-radius: 999px;
    background: var(--app-ligne);
    transition: background 300ms ease, box-shadow 300ms ease;
  }
  .jalons li.fait::before { background: rgba(249, 107, 75, 0.55); }
  .jalons li.actif::before { background: var(--corail); box-shadow: 0 0 12px rgba(249, 107, 75, 0.6); }
  .jalons li.actif .jalon-nom { color: var(--corail-nuit); font-weight: 700; }
  .jalons li.cliquable:hover::before { background: var(--corail-nuit); }
  .jalons li.cliquable:hover .jalon-nom { color: var(--app-texte); }
  .jalons-cadre { padding-block-end: 1.1rem; }
}

/* ---------- Écrans ---------- */
main { position: relative; z-index: 1; }
/* inline-size: 100% obligatoire ici : dans un conteneur flex en colonne, le
   margin-inline: auto de .conteneur annule le stretch et l'écran se rétrécit. */
.ecrans {
  padding-block: var(--e-3) 0;
  inline-size: 100%;
  /* l'étape occupe exactement le reste de la fenêtre : l'action principale
     tombe sur le bord bas, le pied de page passe sous la ligne de flottaison.
     --h-entete est mesurée en pied de page (bandeau + barre d'application). */
  min-block-size: calc(100svh - var(--h-entete, 8.5rem));
  flex: 1 1 auto; display: flex; flex-direction: column;
}

[data-ecran] {
  max-width: none;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  animation: monter-ecran 320ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes monter-ecran {
  from { opacity: 0; transform: translateY(16px); }
}
@media (prefers-reduced-motion: reduce) { [data-ecran] { animation: none; } }

.etape-libelle {
  font-family: var(--police-titres);
  font-weight: 600; font-size: 0.72rem;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--corail-nuit);
  margin: 0;
}
.question {
  font-family: var(--police-titres);
  font-weight: 700;
  font-size: clamp(1.6rem, 7vw, 2.1rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--app-texte);
  margin: 0 0 0.15rem;
}
.sous-question { color: var(--app-texte-2); font-size: 0.95rem; margin: 0; }

/* ---------- Barre d'action : le pouce ---------- */
.barre-action {
  position: sticky; inset-block-end: 0; z-index: 20;
  display: grid; gap: 0.6rem;
  margin-block-start: auto;   /* poussée en bas quand l'écran est court */
  padding-block-start: var(--e-3);
  padding-block: var(--e-2) calc(var(--e-2) + var(--bas-sur));
  margin-inline: calc(var(--marge) * -1);
  padding-inline: var(--marge);
  /* Barre d'action collante : fond PLEIN, pas un degrade.
     Le degrade d'origine etait fige sur rgba(20,16,13,0), la couleur du theme
     SOMBRE, donc en theme clair il virait au gris sale ; et surtout sa partie
     translucide laissait transparaitre le texte qui defile dessous (« Vous
     pouvez commander pour une autre ville... » passait a travers le bouton).
     Un aplat suivant le theme, avec un filet et une ombre douce vers le haut,
     coupe net : c'est ce que font les applications de course. */
  background: var(--app-fond);
  border-block-start: 1px solid var(--app-bord, rgba(128, 128, 128, 0.16));
  box-shadow: 0 -10px 24px -12px rgba(0, 0, 0, 0.28);
}
.barre-action .bouton { inline-size: 100%; }
.barre-action .bouton-lien {
  background: none; border: 0; color: var(--app-texte-2);
  font-family: var(--police-titres); font-weight: 600; font-size: var(--fs-petit);
  padding: 0.5rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.barre-action .bouton-lien:hover { color: var(--app-texte); }

/* ---------- Boutons ---------- */
.bouton {
  font-size: var(--fs-3);
  padding: 0.9rem 1.5rem;
  min-block-size: 3.25rem;
}
.bouton-grand { min-block-size: 3.5rem; font-size: 1.0625rem; padding: 1rem 1.8rem; }

/* Bouton portant une icone systeme (partage, telechargement) : l'icone se cale
   sur la taille du texte et garde son alignement optique quel que soit le
   libelle traduit. */
.bouton.avec-icone {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
}
.bouton.avec-icone svg { inline-size: 1.15em; block-size: 1.15em; flex: none; }

/* Version et numero de build : presents pour le support, jamais dans le chemin
   du regard. */
.pied-version {
  margin-block-start: var(--e-2); text-align: center;
  font-size: 0.75rem; color: var(--app-texte-2); opacity: 0.75;
  font-variant-numeric: tabular-nums;
}
.bouton-plein { background: var(--corail); color: var(--encre); box-shadow: var(--lueur-corail); }
.bouton-plein:hover { background: #ff7f60; box-shadow: 0 8px 30px rgba(249, 107, 75, 0.46); }
.bouton-plein:active { box-shadow: 0 2px 10px rgba(249, 107, 75, 0.4); }
.bouton-contour { border-color: var(--app-ligne-forte); color: var(--app-texte); background: none; }
.bouton-contour:hover { background: var(--app-surface-2); border-color: var(--app-texte-2); color: var(--app-texte); }

/* état « en charge » (chargeBouton) */
.bouton { position: relative; }
.bouton.charge { pointer-events: none; opacity: 0.9; }
.bouton.charge::after {
  content: ""; inline-size: 1em; block-size: 1em;
  border: 2px solid currentColor; border-inline-start-color: transparent;
  border-radius: 50%; display: inline-block;
  margin-inline-start: 0.55rem; vertical-align: -0.15em;
  animation: rotation 700ms linear infinite;
}
@keyframes rotation { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .bouton.charge::after { animation-duration: 1.6s; } }

/* bouton « me géolocaliser » : le JS y écrit du texte brut, l'icône passe donc
   par un pseudo-élément (un textContent ne l'efface pas). */
#btn-geoloc::before {
  content: ""; flex: 0 0 auto;
  inline-size: 1.15em; block-size: 1.15em;
  background: currentColor;
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3'/%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Ccircle cx='12' cy='12' r='2.5' fill='black'/%3E%3C/svg%3E");
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}

/* ---------- Cartes de choix (villes, identification) ---------- */
.choix-villes, .choix-duo { display: grid; gap: 0.7rem; margin-block-start: var(--e-2); }
@media (min-width: 40rem) { .choix-duo { grid-template-columns: 1fr 1fr; } }

.choix-villes button,
.choix-duo button {
  position: relative;
  font: inherit; text-align: start; cursor: pointer;
  display: grid; gap: 0.15rem;
  background: var(--app-surface);
  border: 1px solid var(--app-ligne);
  border-radius: var(--r-carte);
  color: var(--app-texte);
  padding: 1rem 3rem 1rem 4rem;
  min-block-size: 4.5rem;
  align-content: center;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
[dir="rtl"] .choix-villes button,
[dir="rtl"] .choix-duo button { padding: 1rem 4rem 1rem 3rem; }

.choix-villes button strong,
.choix-duo button strong { font-family: var(--police-titres); font-weight: 700; font-size: 1.05rem; }
.choix-villes button span,
.choix-duo button span { color: var(--app-texte-2); font-size: 0.85rem; }

.choix-villes button:hover,
.choix-duo button:hover { border-color: var(--corail); background: var(--app-surface-2); transform: translateY(-2px); }
.choix-villes button:active,
.choix-duo button:active { transform: translateY(0); }

/* pastille d'icône à gauche */
.choix-villes button::before,
.choix-duo button::before {
  content: "";
  position: absolute; inset-inline-start: 1rem; inset-block-start: 50%;
  transform: translateY(-50%);
  inline-size: 2.25rem; block-size: 2.25rem;
  border-radius: 12px;
  background: rgba(249, 107, 75, 0.14);
}
.choix-villes button::after,
.choix-duo button::after {
  content: "";
  position: absolute; inset-inline-end: 1.1rem; inset-block-start: 50%;
  transform: translateY(-50%);
  inline-size: 1.1rem; block-size: 1.1rem;
  background: var(--app-texte-2);
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
  transition: transform 160ms ease;
}
[dir="rtl"] .choix-villes button::after,
[dir="rtl"] .choix-duo button::after { transform: translateY(-50%) scaleX(-1); }
.choix-villes button:hover::after,
.choix-duo button:hover::after { background: var(--corail-nuit); }

/* l'icône elle-même, superposée à la pastille */
.icone-choix {
  position: absolute; inset-inline-start: 1.55rem; inset-block-start: 50%;
  transform: translateY(-50%);
  inline-size: 1.15rem; block-size: 1.15rem;
  color: var(--corail-nuit);
  pointer-events: none;
}
.icone-choix svg { inline-size: 100%; block-size: 100%; display: block; }

/* ---------- Forfaits ---------- */
#liste-forfaits { display: grid; gap: 0.7rem; }
.carte-forfait {
  position: relative;
  font: inherit; text-align: start; cursor: pointer;
  inline-size: 100%;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem;
  background: var(--app-surface);
  border: 1px solid var(--app-ligne);
  border-radius: var(--r-carte);
  color: var(--app-texte);
  padding: 1rem 1.1rem 1rem 3.9rem;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
[dir="rtl"] .carte-forfait { padding: 1rem 3.9rem 1rem 1.1rem; }
.carte-forfait::before {
  content: "";
  position: absolute; inset-inline-start: 1.1rem; inset-block-start: 1.15rem;
  inline-size: 1.5rem; block-size: 1.5rem;
  background: var(--corail-nuit);
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='2.6'/%3E%3Crect x='15.5' y='15.5' width='5' height='5' rx='1'/%3E%3Cpath d='M6 9v4a4 4 0 0 0 4 4h5' stroke-dasharray='2.5 2.5'/%3E%3C/svg%3E");
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
.carte-forfait:hover { border-color: var(--corail); background: var(--app-surface-2); transform: translateY(-2px); }
.carte-forfait:active { transform: translateY(0); }
.carte-forfait strong {
  flex: 1 1 auto;
  font-family: var(--police-titres); font-weight: 700; font-size: 1rem; line-height: 1.3;
}
.badge-ar {
  flex: 0 0 auto;
  background: rgba(255, 204, 0, 0.16); color: #ffd75e;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  border-radius: 999px; padding: 0.2rem 0.55rem; margin-inline-start: 0;
}
/* Prix par type de véhicule : la pastille est la forme la plus lisible sur une
   ligne étroite, et elle survit à un forfait qui n'expose qu'un seul tarif. */
.tarifs-forfait {
  flex: 1 1 100%;
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin-block-start: 0.5rem;
}
.tarif-pastille {
  display: inline-flex; align-items: baseline; gap: 0.4rem;
  background: rgba(249, 107, 75, 0.12);
  border: 1px solid rgba(249, 107, 75, 0.22);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
}
.tarif-pastille em {
  font-style: normal; font-size: 0.72rem; color: var(--app-texte-2);
}
.tarif-pastille b {
  font-family: var(--police-titres); font-weight: 700; font-size: 0.98rem;
  color: var(--corail-nuit);
  font-variant-numeric: tabular-nums;
}
.tarif-pastille.tarif-inconnu {
  background: none; border-color: var(--app-ligne);
  font-size: 0.78rem; color: var(--app-texte-2);
}
.tarif-nuit {
  flex: 1 1 100%;
  font-size: 0.72rem; color: var(--app-texte-2);
  margin-block-start: 0.35rem;
}

/* ---------- Filtre de forfaits (Marrakech en sert 36) ---------- */
.champ-recherche { margin-block-start: var(--e-1); gap: 0; }
/* L'icône et le texte d'invite disent déjà ce que fait le champ : le libellé
   ne sert plus qu'aux lecteurs d'écran. Sur un écran de 375 px, ces 40 px
   rendus au contenu font la différence entre une carte visible et zéro. */
.champ-recherche label {
  position: absolute; inline-size: 1px; block-size: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.champ-recherche input {
  font: inherit;
  font-size: 1rem;                 /* >= 16 px : empêche le zoom automatique iOS */
  color: var(--app-texte);
  background: var(--app-surface);
  border: 1px solid var(--app-ligne);
  border-radius: 999px;
  padding: 0.8rem 1.1rem 0.8rem 2.9rem;
  min-block-size: 3rem;
  inline-size: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b6a99d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 1rem center;
  background-size: 1.1rem;
}
[dir="rtl"] .champ-recherche input {
  padding: 0.8rem 2.9rem 0.8rem 1.1rem;
  background-position: right 1rem center;
}
.champ-recherche input::placeholder { color: #857a70; }
.champ-recherche input:focus-visible {
  outline: 3px solid var(--corail-nuit); outline-offset: 1px; border-color: var(--corail);
}
.champ-recherche input::-webkit-search-cancel-button { filter: invert(1) opacity(0.5); }
.compte-resultats {
  font-size: 0.78rem; color: var(--app-texte-2);
  margin: 0; padding-block-start: 0.1rem;
}
.compte-resultats:empty { display: none; }

/* ---------- Segmenté : maintenant / programmer ---------- */
.radio-ligne {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  background: var(--app-surface-2);
  border: 1px solid var(--app-ligne);
  border-radius: 999px;
  padding: 4px;
  margin-block: var(--e-1) var(--e-2);
}
.radio-ligne label {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem;
  font-family: var(--police-titres); font-weight: 600; font-size: 0.95rem;
  color: var(--app-texte-2);
  border-radius: 999px; padding: 0.7rem 0.5rem;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}
.radio-ligne label:has(input:checked) { background: var(--corail); color: var(--encre); box-shadow: var(--lueur-corail); }
.radio-ligne label:has(input:focus-visible) { outline: 3px solid var(--corail-nuit); outline-offset: 2px; }
.radio-ligne input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
/* repli si :has() manque : on garde les vrais boutons radio visibles */
@supports not (selector(:has(*))) {
  .radio-ligne { display: flex; background: none; border: 0; padding: 0; gap: var(--e-3); }
  .radio-ligne input { position: static; opacity: 1; inline-size: auto; block-size: auto; }
}

/* ---------- Formulaires ---------- */
.formulaire-contact {
  max-width: none;
  background: var(--app-surface);
  border: 1px solid var(--app-ligne);
  border-radius: var(--r-carte);
  box-shadow: none;
  padding: var(--e-3);
  gap: var(--e-3);
}
.formulaire-contact label { color: var(--app-texte); font-size: 0.82rem; }
.formulaire-contact input,
.formulaire-contact select,
.formulaire-contact textarea {
  font: inherit;
  font-size: 1rem;                 /* >= 16 px : empêche le zoom automatique iOS */
  color: var(--app-texte);
  background: var(--app-surface-2);
  border: 1px solid var(--app-ligne);
  border-radius: var(--r-champ);
  padding: 0.85rem 0.95rem;
  min-block-size: 3.1rem;
  inline-size: 100%;
}
.formulaire-contact input::placeholder { color: #857a70; }
.formulaire-contact input:focus-visible,
.formulaire-contact select:focus-visible,
.formulaire-contact textarea:focus-visible {
  outline: 3px solid var(--corail-nuit); outline-offset: 1px; border-color: var(--corail);
}
/* le sélecteur natif reste natif (accessible), on lui pose juste un chevron */
.formulaire-contact select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b6a99d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 1.05rem;
  padding-inline-end: 2.6rem;
}
[dir="rtl"] .formulaire-contact select { background-position: left 0.9rem center; }
.formulaire-contact select option { background: var(--app-surface-2); color: var(--app-texte); }
input[type="datetime-local"] { color-scheme: dark; }

/* une action dans un formulaire occupe toute la largeur : c'est le geste du pouce */
.formulaire-contact .bouton { inline-size: 100%; }

.duo-champs { display: grid; grid-template-columns: 1fr; gap: var(--e-3); }
@media (min-width: 40rem) { .duo-champs { grid-template-columns: 1fr 1fr; } }

.champ { position: relative; display: grid; gap: 0.4rem; }
.champ.invalide input { border-color: var(--app-rouge); box-shadow: 0 0 0 2px rgba(255, 122, 102, 0.22); }
.secousse { animation: secousse 300ms ease; }
@keyframes secousse { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .secousse { animation: none; } }

.form-retour { font-size: var(--fs-petit); min-height: 0; margin: 0; }
.form-retour:empty { display: none; }
.form-retour.erreur { color: var(--app-rouge); font-weight: 600; }
.form-retour.succes { color: var(--app-vert); font-weight: 600; }
.note-antispam { font-size: 0.85rem; color: var(--app-texte-2); max-width: none; margin-block-start: 0; }

/* Rappel de l'adresse reconnue avant la saisie du mot de passe. */
.rappel-compte {
  margin-block-end: var(--e-2); padding: 0.85rem 1rem;
  border-radius: 0.9rem; background: var(--app-fond-2);
  border: 1px solid var(--app-ligne); font-size: var(--fs-petit);
  color: var(--app-texte-2);
}
.rappel-compte strong { color: var(--app-texte); }

/* Etat des envois de code : delai restant et compteur. Discret, mais toujours
   present des qu'un envoi a eu lieu. */
.etat-envois {
  margin-block-start: var(--e-2);
  font-size: 0.85rem; color: var(--app-texte-2); text-align: center;
  font-variant-numeric: tabular-nums;
}
.etat-envois strong { color: var(--app-texte); font-weight: 700; }
.etat-envois.epuise strong { color: var(--corail); }

/* Adresses enregistrees sur le compte : des pastilles cliquables qui
   remplissent le champ, pas une liste de plus a lire. */
.titre-favoris {
  margin-block: var(--e-3) var(--e-2);
  font-family: var(--police-titres); font-weight: 700;
  font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--app-texte-2);
}
.liste-favoris { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.favori {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.6rem 0.9rem; border-radius: 999px;
  background: var(--app-fond-2); border: 1px solid var(--app-ligne);
  color: var(--app-texte); font: inherit; font-size: var(--fs-petit);
  cursor: pointer; text-align: start;
  transition: border-color 200ms ease, background 200ms ease;
}
.favori:hover { border-color: var(--corail); background: var(--app-fond); }
.favori svg { inline-size: 1.05em; block-size: 1.05em; flex: none; color: var(--corail); }
.favori-nom { font-weight: 600; }
.favori-adresse {
  color: var(--app-texte-2); max-inline-size: 18rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Icone de vehicule dans le selecteur : elle se voit d'un coup d'oeil et
   distingue les gabarits mieux qu'un libelle seul. */
.vehicule-icone {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  inline-size: 2.5rem; block-size: 2.5rem; border-radius: 0.75rem;
  background: var(--app-fond-2); color: var(--app-texte-2);
  transition: background 200ms ease, color 200ms ease;
}
.vehicule-icone svg { inline-size: 1.5rem; block-size: 1.5rem; }
.choix-vehicule input:checked ~ .vehicule-icone,
.choix-vehicule:has(input:checked) .vehicule-icone {
  background: var(--corail); color: var(--encre);
}

/* Intertitre de categorie de forfaits : reprend le vocabulaire de l'API
   (aeroports, gares, excursions) sans jamais l'inventer. */
.titre-categorie {
  margin-block: var(--e-3) var(--e-2);
  font-family: var(--police-titres); font-weight: 700;
  font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--corail);
}
.titre-categorie:first-child { margin-block-start: 0; }

/* Distance a vol d'oiseau : elle justifie l'ordre de la liste, elle ne se fait
   pas passer pour la distance routiere facturee. */
.km-forfait {
  display: block; margin-block-start: 0.15rem;
  font-size: 0.8rem; color: var(--app-texte-2);
}

/* Selecteur des autres villes : discret sous les trois cartes principales. */
.champ-villes { margin-block-start: var(--e-2); }
.champ-villes select {
  inline-size: 100%; padding: 0.8rem 1rem;
  font: inherit; font-size: var(--fs-petit);
  color: var(--app-texte); background: var(--app-fond-2);
  border: 1px solid var(--app-ligne); border-radius: 0.9rem;
}
.champ-villes select:focus-visible { outline: 2px solid var(--corail); outline-offset: 2px; }

/* Annonce d'une permission navigateur, sous le bouton qui la declenche.
   Le client lit a quoi sert l'autorisation AVANT que la fenetre du navigateur
   ne s'ouvre : c'est ce qui fait la difference entre un accord et un blocage
   definitif du domaine. */
.note-permission {
  font-size: 0.85rem; line-height: 1.5; color: var(--app-texte-2);
  margin-block-start: var(--e-2); text-align: center; text-wrap: pretty;
}

/* rail « départ -> arrivée » autour des deux blocs d'adresse */
.rail-trajet { position: relative; display: grid; gap: var(--e-3); }
.rail-etape { position: relative; padding-inline-start: 1.75rem; }
[dir="rtl"] .rail-etape { padding-inline-start: 0; padding-inline-end: 1.75rem; }
.rail-etape::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.95rem;
  inline-size: 11px; block-size: 11px; border-radius: 50%;
  background: var(--app-vert); box-shadow: 0 0 0 3px rgba(78, 201, 126, 0.2);
}
.rail-etape:last-child::before {
  border-radius: 3px; background: var(--corail); box-shadow: 0 0 0 3px rgba(249, 107, 75, 0.22);
}
.rail-etape:not(:last-child)::after {
  content: ""; position: absolute;
  inset-inline-start: 5px; inset-block-start: 1.7rem; inset-block-end: -1.1rem;
  border-inline-start: 2px dotted var(--app-ligne-forte);
}
.rail-titre {
  font-family: var(--police-titres); font-weight: 700; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--app-texte-2);
  margin-block-end: 0.5rem;
}

/* ---------- Autocomplétion d'adresses ---------- */
.suggestions {
  position: absolute; inset-inline: 0; inset-block-start: calc(100% + 6px);
  z-index: 50;
  background: var(--app-surface-2);
  border: 1px solid var(--app-ligne-forte);
  border-radius: var(--r-champ);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
.suggestions button {
  display: block; inline-size: 100%; text-align: start;
  font: inherit; font-size: 0.92rem; line-height: 1.35;
  background: none; border: 0; cursor: pointer;
  padding: 0.8rem 0.95rem;
  min-block-size: 2.9rem;
  color: var(--app-texte);
}
.suggestions button:hover, .suggestions button:focus-visible { background: rgba(249, 107, 75, 0.16); }
.suggestions button + button { border-block-start: 1px solid var(--app-ligne); }
.suggestions .sugg-source {
  font-size: 0.66rem; color: var(--app-texte-2); text-align: end;
  padding: 0.3rem 0.7rem; background: rgba(0, 0, 0, 0.25);
}

/* ---------- Récapitulatif ---------- */
.recap-ligne {
  position: relative;
  background: var(--app-surface);
  border: 1px solid var(--app-ligne);
  border-radius: var(--r-carte);
  padding: 0.9rem 1rem 0.9rem 3.1rem;
  font-size: 0.95rem; line-height: 1.4;
}
[dir="rtl"] .recap-ligne { padding: 0.9rem 3.1rem 0.9rem 1rem; }
.recap-ligne::before {
  content: "";
  position: absolute; inset-inline-start: 1rem; inset-block-start: 1rem;
  inline-size: 1.25rem; block-size: 1.25rem;
  background: var(--corail-nuit);
  -webkit-mask: var(--ico) center / contain no-repeat;
  mask: var(--ico) center / contain no-repeat;
}
#recap-trajet::before,
#recap-forfait::before,
#rappel-course::before {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='2.6'/%3E%3Crect x='15.5' y='15.5' width='5' height='5' rx='1'/%3E%3Cpath d='M6 9v4a4 4 0 0 0 4 4h5' stroke-dasharray='2.5 2.5'/%3E%3C/svg%3E");
}
#rappel-course strong { color: var(--app-texte); font-family: var(--police-titres); }
#rappel-course { margin-block-start: var(--e-1); }
#recap-forfait strong { color: var(--app-texte); font-family: var(--police-titres); }
#trajet-forfait { display: grid; gap: var(--e-2); }
#recap-quand::before {
  --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E");
}

/* ---------- Carte du trajet ---------- */
.bloc-carte {
  margin-inline: calc(var(--marge) * -1);
  margin-block: var(--e-1);
}
#carte-trajet,
#carte-suivi {
  /* 40vh mettait le choix du vehicule hors de l'ecran a lui seul. La carte
     sert a VERIFIER le trajet et a le retoucher, pas a le contempler : elle
     garde de quoi lire les deux marqueurs et le trace. */
  block-size: clamp(11rem, 26vh, 16rem);
  border-radius: 0;
  border: 0;
  border-block: 1px solid var(--app-ligne);
  z-index: 0;
  background: var(--app-fond-2);
}
@media (min-width: 40rem) {
  .bloc-carte { margin-inline: 0; }
  #carte-trajet,
  #carte-suivi { border-radius: var(--r-carte); border: 1px solid var(--app-ligne); }
}
/* carte sombre : on n'inverse que le calque de tuiles, les marqueurs et le
   tracé vivent dans d'autres calques et gardent leurs vraies couleurs. */
#carte-trajet .leaflet-tile-pane,
#carte-suivi .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.9) saturate(0.7); }
#carte-trajet .leaflet-container,
#carte-suivi .leaflet-container { background: var(--app-fond-2); }
#carte-trajet .leaflet-control-attribution,
#carte-suivi .leaflet-control-attribution {
  background: rgba(20, 16, 13, 0.8); color: var(--app-texte-2); font-size: 0.62rem;
}
#carte-trajet .leaflet-control-attribution a,
#carte-suivi .leaflet-control-attribution a { color: var(--corail-nuit); }
#carte-trajet .leaflet-control-zoom a,
#carte-suivi .leaflet-control-zoom a {
  background: var(--app-surface); color: var(--app-texte); border-color: var(--app-ligne);
}
#carte-trajet .leaflet-control-zoom a:hover,
#carte-suivi .leaflet-control-zoom a:hover { background: var(--app-surface-2); }
#carte-trajet .leaflet-tooltip,
#carte-suivi .leaflet-tooltip {
  background: var(--app-surface); color: var(--app-texte);
  border: 1px solid var(--app-ligne-forte); box-shadow: none;
}
#carte-trajet .leaflet-tooltip::before,
#carte-suivi .leaflet-tooltip::before { display: none; }

.marqueur-roby {
  display: grid; place-items: center;
  inline-size: 28px; block-size: 28px; border-radius: 50%;
  color: #fff; font-family: var(--police-titres); font-weight: 700; font-size: 0.72rem;
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
  cursor: grab;
}
.marqueur-depart { background: #2f9e5f; }
.marqueur-arrivee { background: #e0512e; border-radius: 9px; }
.carte-aide {
  font-size: 0.82rem; color: var(--app-texte-2);
  padding-inline: var(--marge); margin: 0;
}
@media (min-width: 40rem) { .carte-aide { padding-inline: 0; } }

/* ---------- Choix du véhicule : le moment « prix » ---------- */
#zone-estimation { display: grid; gap: 0.6rem; }
#zone-estimation > p { color: var(--app-texte-2); font-size: 0.95rem; margin: 0; }

.choix-vehicule {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.95rem 1.1rem;
  border: 1px solid var(--app-ligne);
  border-radius: var(--r-carte);
  margin-block-end: 0;
  cursor: pointer;
  background: var(--app-surface);
  min-block-size: 4.25rem;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.choix-vehicule:hover { border-color: var(--app-ligne-forte); background: var(--app-surface-2); }
.choix-vehicule:has(input:checked) {
  border-color: var(--corail);
  background: linear-gradient(90deg, rgba(249, 107, 75, 0.15), rgba(249, 107, 75, 0.05));
  box-shadow: 0 0 0 1px var(--corail);
}
.choix-vehicule:has(input:focus-visible) { outline: 3px solid var(--corail-nuit); outline-offset: 2px; }

.choix-vehicule input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  flex: 0 0 auto; margin: 0;
  inline-size: 1.4rem; block-size: 1.4rem; border-radius: 50%;
  border: 2px solid var(--app-ligne-forte);
  background: transparent;
  display: grid; place-items: center;
  transition: border-color 160ms ease, background 160ms ease;
}
.choix-vehicule input[type="radio"]::after {
  content: ""; inline-size: 0.7rem; block-size: 0.7rem; border-radius: 50%;
  background: var(--encre);
  transform: scale(0); transition: transform 160ms cubic-bezier(0.2, 1.4, 0.4, 1);
}
.choix-vehicule input[type="radio"]:checked { border-color: var(--corail); background: var(--corail); }
.choix-vehicule input[type="radio"]:checked::after { transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .choix-vehicule input[type="radio"]::after { transition: none; } }

.vehicule-texte { display: grid; gap: 0.12rem; flex: 1 1 auto; min-inline-size: 0; }
.vehicule-nom { font-family: var(--police-titres); font-weight: 700; font-size: 1rem; color: var(--app-texte); }
.vehicule-detail { font-weight: 400; font-size: 0.82rem; color: var(--app-texte-2); }
.vehicule-prix {
  margin-inline-start: auto; text-align: end;
  font-family: var(--police-titres); font-weight: 700; font-size: 1.35rem;
  color: var(--app-texte); white-space: nowrap;
}
.vehicule-prix small { display: block; font-weight: 400; font-size: 0.66rem; color: var(--app-texte-2); }
.vehicule-prix-inconnu { font-size: 0.9rem; font-weight: 600; color: var(--app-texte-2); }

/* ---------- Squelettes de chargement ---------- */
.squelette {
  border: 1px solid var(--app-ligne); border-radius: var(--r-carte);
  padding: 1.1rem; margin-block-end: 0.7rem;
  background: var(--app-surface);
}
.squelette > div {
  block-size: 0.85rem; border-radius: 6px;
  background: linear-gradient(90deg, var(--app-surface-2) 25%, rgba(255, 244, 232, 0.10) 50%, var(--app-surface-2) 75%);
  background-size: 200% 100%;
  animation: chatoiement 1.3s ease-in-out infinite;
}
.squelette > div + div { margin-block-start: 0.6rem; inline-size: 55%; }
@keyframes chatoiement { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .squelette > div { animation: none; } }

/* ---------- Suivi ---------- */
.carte-suivi {
  display: grid; gap: 0.55rem;
  background: var(--app-surface);
  border: 1px solid var(--app-ligne);
  border-radius: var(--r-carte);
  padding: var(--e-3);
}
.carte-suivi p { margin: 0; font-size: 0.95rem; color: var(--app-texte-2); }
.carte-suivi strong { color: var(--app-texte); font-family: var(--police-titres); }
.ligne-statut { display: flex; align-items: center; gap: 0.55rem; }
.ligne-statut::before {
  content: ""; flex: 0 0 auto;
  inline-size: 9px; block-size: 9px; border-radius: 50%;
  background: var(--app-vert);
  box-shadow: 0 0 0 0 rgba(78, 201, 126, 0.55);
  animation: pouls-statut 2s ease-out infinite;
}
@keyframes pouls-statut {
  70% { box-shadow: 0 0 0 9px rgba(78, 201, 126, 0); }
  100% { box-shadow: 0 0 0 0 rgba(78, 201, 126, 0); }
}
@media (prefers-reduced-motion: reduce) { .ligne-statut::before { animation: none; } }
.ligne-statut.annulee::before, .ligne-statut.terminee::before { box-shadow: none; animation: none; }
.ligne-statut.annulee::before { background: var(--app-rouge); }
.ligne-statut.terminee::before { background: var(--app-ligne-forte); }
#message-suivi { white-space: pre-line; }
#message-suivi:empty { display: none; }
#detail-suivi { white-space: pre-line; }
#detail-suivi:empty { display: none; }

/* ---------- Phases de la course : recherche -> approche -> route -> paiement -> notation ----------
   Le meme vocabulaire que l'application mobile, en une ligne lisible d'un
   coup d'oeil. L'etat vient du statut renvoye par l'API, jamais deduit. */
.phases-course {
  list-style: none; margin: var(--e-2) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.35rem;
}
.phases-course li {
  display: grid; gap: 0.35rem; justify-items: center; text-align: center;
  font-size: 0.66rem; color: var(--app-texte-2); line-height: 1.25;
}
.phases-course li::before {
  content: ""; inline-size: 100%; block-size: 4px; border-radius: 999px;
  background: var(--app-surface-2);
}
.phases-course li.faite::before { background: rgba(249, 107, 75, 0.55); }
.phases-course li.faite { color: var(--app-texte-2); }
.phases-course li.active::before { background: var(--corail); box-shadow: 0 0 12px rgba(249, 107, 75, 0.6); }
.phases-course li.active { color: var(--app-texte); font-weight: 700; }

/* ---------- Carte chauffeur ---------- */
.carte-chauffeur {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: center;
  margin-block-start: var(--e-2);
  padding: 0.95rem;
  background: var(--app-surface);
  border: 1px solid var(--app-ligne);
  border-radius: var(--r-carte);
}
.chauffeur-photo {
  inline-size: 3.25rem; block-size: 3.25rem; border-radius: 50%;
  background: var(--app-surface-2) center / cover no-repeat;
  border: 2px solid var(--corail);
  display: grid; place-items: center;
  font-family: var(--police-titres); font-weight: 700; font-size: 1.1rem; color: var(--app-texte);
}
.chauffeur-infos { display: grid; gap: 0.15rem; min-inline-size: 0; }
.chauffeur-infos strong {
  font-family: var(--police-titres); font-weight: 700; font-size: 1.05rem; color: var(--app-texte);
}
.chauffeur-note, .chauffeur-vehicule { font-size: 0.82rem; color: var(--app-texte-2); }
.chauffeur-note:empty, .chauffeur-vehicule:empty { display: none; }
.chauffeur-actions { grid-column: 1 / -1; display: grid; gap: 0.5rem; }
@media (min-width: 30rem) { .chauffeur-actions { grid-template-columns: 1fr 1fr; } }
.chauffeur-actions .bouton { inline-size: 100%; text-align: center; text-decoration: none; }
.chauffeur-actions .bouton[hidden] { display: none; }
/* plaque d'immatriculation : la seule information que le client verifie dans la rue */
.plaque {
  display: inline-block; margin-inline-start: 0.35rem;
  font-family: var(--police-titres); font-weight: 700; letter-spacing: 0.04em;
  background: var(--app-surface-2); color: var(--app-texte);
  border: 1px solid var(--app-ligne-forte); border-radius: 6px;
  padding: 0.05rem 0.4rem; font-size: 0.8rem;
}

/* marqueur du taxi sur la carte de suivi */
.marqueur-taxi { background: var(--corail); border-radius: 8px; }
.marqueur-client { background: #2f9e5f; }

/* ---------- Blocs d'étape (paiement, notation) ---------- */
.bloc-etape {
  margin-block-start: var(--e-3);
  padding: 1rem;
  background: var(--app-surface);
  border: 1px solid var(--app-ligne);
  border-radius: var(--r-carte);
  display: grid; gap: var(--e-2);
}
.bloc-etape[hidden] { display: none; }
.titre-bloc {
  font-family: var(--police-titres); font-weight: 700; font-size: 1.1rem;
  color: var(--app-texte); margin: 0;
}
.montant-du { margin: 0; color: var(--app-texte-2); font-size: 0.95rem; }
.montant-du strong {
  display: block; font-family: var(--police-titres); font-weight: 700;
  font-size: 1.9rem; color: var(--app-texte); line-height: 1.1;
}
.bloc-etape .formulaire-contact { margin-block-start: 0; }

/* ---------- Notation : étoiles, tags, favori ---------- */
.etoiles { display: flex; gap: 0.3rem; }
.etoiles button {
  background: none; border: 0; padding: 0.2rem; cursor: pointer;
  color: var(--app-ligne-forte); line-height: 0;
}
.etoiles button svg { inline-size: 2.1rem; block-size: 2.1rem; }
.etoiles button.pleine { color: #f9a600; }
.etoiles button:focus-visible { outline: 3px solid var(--corail-nuit); outline-offset: 2px; border-radius: 6px; }
.etoiles-libelle {
  margin: 0; font-family: var(--police-titres); font-weight: 600;
  font-size: 0.95rem; color: var(--app-texte);
}
.etoiles-libelle:empty { display: none; }

.tags-notation { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.tags-notation:empty { display: none; }
.tags-notation button {
  background: var(--app-surface-2); color: var(--app-texte-2);
  border: 1px solid var(--app-ligne); border-radius: 999px;
  padding: 0.45rem 0.85rem; font-size: 0.82rem; cursor: pointer;
}
.tags-notation button:hover { border-color: var(--app-ligne-forte); color: var(--app-texte); }
.tags-notation button[aria-pressed="true"] {
  background: var(--corail); color: var(--encre); border-color: var(--corail); font-weight: 600;
}
.case-favori {
  display: flex; align-items: center; gap: 0.55rem;
  font-size: 0.88rem; color: var(--app-texte-2); cursor: pointer;
}
.case-favori input { inline-size: 1.1rem; block-size: 1.1rem; accent-color: var(--corail); }
/* Acceptation des CGU : la case reste sur la premiere ligne du texte, et le
   texte (deux liens) passe a la ligne sans repousser la case. */
.case-cgu {
  display: flex; align-items: flex-start; gap: 0.6rem;
  font-size: 0.88rem; line-height: 1.5; color: var(--app-texte-2); cursor: pointer;
  padding: 0.7rem 0.8rem; border: 1px solid var(--app-ligne); border-radius: var(--r-champ);
}
.case-cgu input { flex: none; inline-size: 1.15rem; block-size: 1.15rem; margin-block-start: 0.15rem; accent-color: var(--corail); }
.case-cgu a { color: var(--app-texte); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.case-cgu.invalide { border-color: #d64545; box-shadow: 0 0 0 3px rgba(214, 69, 69, 0.15); }
.formulaire-contact textarea {
  background: var(--app-surface-2); color: var(--app-texte);
  border: 1px solid var(--app-ligne); border-radius: var(--r-champ);
  padding: 0.85rem 1rem; font: inherit; font-size: 1rem; resize: vertical;
}
.formulaire-contact textarea::placeholder { color: #857a70; }

/* ---------- Espace client : onglets ---------- */
.onglets {
  display: grid; grid-auto-flow: column; gap: 0.25rem;
  margin-block-start: var(--e-2);
  padding: 0.28rem;
  background: var(--app-surface-2);
  border: 1px solid var(--app-ligne);
  border-radius: 999px;
}
.onglets button {
  background: none; border: 0; cursor: pointer;
  padding: 0.65rem 0.6rem; border-radius: 999px;
  font-family: var(--police-titres); font-weight: 600; font-size: 0.88rem;
  color: var(--app-texte-2);
}
.onglets button:hover { color: var(--app-texte); }
.onglets button[aria-selected="true"] {
  background: var(--corail); color: var(--encre); box-shadow: var(--lueur-corail);
}
.onglets button:focus-visible { outline: 3px solid var(--corail-nuit); outline-offset: 2px; }

/* ---------- Espace client : cartes de course ---------- */
#liste-courses { display: grid; gap: 0.7rem; margin-block-start: var(--e-2); }
.carte-course {
  inline-size: 100%; text-align: start; cursor: pointer;
  background: var(--app-surface); color: inherit;
  border: 1px solid var(--app-ligne); border-radius: var(--r-carte);
  padding: 0.95rem 1rem;
  display: grid; gap: 0.4rem;
  transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
}
.carte-course:hover { border-color: var(--corail); background: var(--app-surface-2); transform: translateY(-2px); }
.carte-course:active { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .carte-course { transition: none; } }
.course-entete { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.course-date { font-size: 0.8rem; color: var(--app-texte-2); }
.badge-statut {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.02em;
  border-radius: 999px; padding: 0.2rem 0.6rem;
  background: var(--app-surface-2); color: var(--app-texte-2);
  border: 1px solid var(--app-ligne);
}
.badge-statut.en-cours { background: rgba(249, 107, 75, 0.18); color: var(--corail-nuit); border-color: rgba(249, 107, 75, 0.4); }
.badge-statut.terminee { background: rgba(78, 201, 126, 0.16); color: var(--app-vert); border-color: rgba(78, 201, 126, 0.35); }
.badge-statut.annulee { background: rgba(255, 122, 102, 0.14); color: var(--app-rouge); border-color: rgba(255, 122, 102, 0.35); }
.course-trajet {
  font-family: var(--police-titres); font-weight: 700; font-size: 0.98rem;
  color: var(--app-texte); line-height: 1.35;
}
.course-pied {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  font-size: 0.82rem; color: var(--app-texte-2);
}
.course-montant { font-family: var(--police-titres); font-weight: 700; color: var(--app-texte); margin-inline-start: auto; }
.course-note { color: #f9a600; letter-spacing: 0.08em; }
.course-action { font-size: 0.8rem; font-weight: 700; color: var(--corail-nuit); }

/* ---------- Espace client : résumé des paiements, trajets fréquents ---------- */
.resume-paiements {
  margin-block-start: var(--e-2);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 0.6rem;
}
.resume-paiements div {
  background: var(--app-surface); border: 1px solid var(--app-ligne);
  border-radius: var(--r-carte); padding: 0.8rem 0.9rem;
  display: grid; gap: 0.1rem;
}
.resume-paiements b {
  font-family: var(--police-titres); font-weight: 700; font-size: 1.3rem; color: var(--app-texte);
}
.resume-paiements span { font-size: 0.75rem; color: var(--app-texte-2); }

#trajets-frequents { display: grid; gap: 0.55rem; margin-block-start: var(--e-3); }
#trajets-frequents:empty { display: none; }
.titre-section {
  font-family: var(--police-titres); font-weight: 700; font-size: 1rem;
  color: var(--app-texte); margin: 0;
}
.trajet-frequent {
  inline-size: 100%; text-align: start; cursor: pointer;
  background: var(--app-surface-2); color: inherit;
  border: 1px solid var(--app-ligne); border-radius: var(--r-champ);
  padding: 0.7rem 0.9rem;
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  font-size: 0.88rem; color: var(--app-texte);
}
.trajet-frequent:hover { border-color: var(--corail); }
.trajet-frequent em { font-style: normal; color: var(--app-texte-2); font-size: 0.78rem; margin-inline-start: auto; }

/* ---------- Détail d'une course ---------- */
#detail-contenu { display: grid; gap: var(--e-2); margin-block-start: var(--e-2); }
.detail-lignes {
  background: var(--app-surface); border: 1px solid var(--app-ligne);
  border-radius: var(--r-carte); padding: 0.95rem 1rem;
  display: grid; gap: 0.5rem;
}
.detail-lignes > div { display: flex; gap: 0.8rem; align-items: baseline; font-size: 0.9rem; }
.detail-lignes dt, .detail-lignes .cle { color: var(--app-texte-2); flex: 0 0 9rem; }
.detail-lignes .val { color: var(--app-texte); font-weight: 600; min-inline-size: 0; overflow-wrap: anywhere; }
@media (max-width: 30rem) {
  .detail-lignes > div { display: grid; gap: 0.1rem; }
  .detail-lignes .cle { flex: none; }
}
.detail-carte img { inline-size: 100%; border-radius: var(--r-carte); border: 1px solid var(--app-ligne); display: block; }

/* ---------- Bouton « mes courses » de la barre d'application ---------- */
.btn-espace {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: none; cursor: pointer;
  border: 1px solid var(--app-ligne-forte); border-radius: 999px;
  color: var(--app-texte-2); font-size: 0.75rem; font-weight: 600;
  padding: 0.45rem 0.75rem;
}
.btn-espace:hover { color: var(--corail); border-color: var(--corail); }
.btn-espace svg { width: 15px; height: 15px; }
@media (max-width: 32rem) { .btn-espace span { display: none; } .btn-espace { padding: 0.45rem 0.55rem; } }

/* ---------- Groupe d'actions de la barre d'application ----------
   Thème + mes courses + déconnexion. Six commandes sur une seule ligne ne
   tiennent pas sous 32rem : le logo se faisait écraser à zéro pixel. Le
   groupe passe alors sur sa propre ligne, alignée à droite. La hauteur réelle
   de l'en-tête est déjà mesurée par le script de --h-entete, rien d'autre à
   ajuster. */
.actions-entete { display: flex; align-items: center; gap: var(--e-2); }
@media (max-width: 32rem) {
  .entete-inner { flex-wrap: wrap; row-gap: 0.5rem; }
  /* le sélecteur de langue porte déjà order:3 dans le CSS du site : sans un
     ordre plus grand ici, le groupe passerait AVANT lui et l'en-tête tiendrait
     sur trois lignes au lieu de deux. */
  .actions-entete { order: 4; flex-basis: 100%; justify-content: flex-end; }
  .logo img { height: 1.8rem; }
}

/* ---------- Feuille modale (recherche de taxi, annulation) ---------- */
.voile {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(12, 9, 7, 0.72);
  backdrop-filter: blur(3px);
  display: grid; align-items: end; justify-items: stretch;
  padding: 0;
  animation: fondu 220ms ease;
}
@keyframes fondu { from { opacity: 0; } }
.popin {
  background: var(--app-fond-2);
  border: 1px solid var(--app-ligne);
  border-block-end: 0;
  border-radius: var(--r-feuille) var(--r-feuille) 0 0;
  padding: var(--e-3) var(--marge) calc(var(--e-3) + var(--bas-sur));
  max-width: 32rem; inline-size: 100%; margin-inline: auto;
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.6);
  text-align: center;
  animation: feuille-monte 300ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes feuille-monte { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) {
  .voile, .popin { animation: none; }
}
.popin::before {
  content: ""; display: block;
  inline-size: 2.5rem; block-size: 4px; border-radius: 999px;
  background: var(--app-ligne-forte);
  margin: 0 auto var(--e-3);
}
.popin h2 {
  font-family: var(--police-titres); font-weight: 700;
  font-size: clamp(1.2rem, 5vw, 1.5rem); line-height: 1.2;
  color: var(--app-texte); margin: 0 0 0.6rem;
}
.popin p { white-space: pre-line; color: var(--app-texte-2); margin: 0 0 var(--e-3); font-size: 0.95rem; }
.popin .actions { display: grid; gap: 0.6rem; }
.popin .actions .bouton { inline-size: 100%; }
@media (min-width: 34rem) {
  .voile { align-items: center; padding: var(--marge); }
  .popin { border-radius: var(--r-feuille); border-block-end: 1px solid var(--app-ligne); padding-block-end: var(--e-3); }
  .popin::before { display: none; }
  .popin .actions { grid-auto-flow: column; justify-content: center; }
  .popin .actions .bouton { inline-size: auto; }
}

/* Radar d'attente. Le contenu est un canevas dessine en JavaScript : voir
   `demarrerRadar` dans commander.js. Les taxis y sont FICTIFS, c'est de
   l'habillage d'attente, pas une carte. */
.radar {
  inline-size: min(15rem, 62vw); aspect-ratio: 1;
  margin: 0 auto var(--e-3); position: relative;
}
.radar canvas { inline-size: 100%; block-size: 100%; display: block; }
.popin .compteur-attente {
  font-family: var(--police-titres); font-weight: 700; font-size: 1.5rem;
  color: var(--corail-nuit);
  font-variant-numeric: tabular-nums;
  margin-block-end: 0.35rem;
}

/* ---------- Notifications ---------- */
.toasts {
  position: fixed; inset-block-start: 0.75rem; inset-inline: 0.75rem;
  z-index: 400;
  display: grid; gap: 0.5rem;
  justify-items: center;
  pointer-events: none;
}
/* Le bandeau de message porte SA COULEUR : vert quand ça marche, orange quand
   ça mérite attention, rouge quand ça a échoué. Le sens se lit avant le texte.
   Les fonds sont pleins et sombres, le texte est blanc cassé et fixe : il ne
   suit surtout pas `--app-texte`, qui devient presque noir en theme clair et
   rendait le message illisible, noir sur brun fonce. */
.toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: 0.6rem;
  inline-size: 100%; max-width: 26rem;
  background: #2c251e;
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #ffffff;
  border-radius: 16px;
  padding: 0.8rem 0.95rem;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
  font-size: 0.9rem; line-height: 1.4;
  animation: toast-entree 260ms cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes toast-entree { from { opacity: 0; transform: translateY(-12px); } }
.toast.sortie { opacity: 0; transform: translateY(-12px); transition: all 260ms ease; }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }
.toast-icone { flex-shrink: 0; inline-size: 20px; block-size: 20px; margin-block-start: 1px; }
/* Fonds pleins, contraste verifie sur du blanc : vert 4.9:1, orange 4.6:1,
   rouge 5.1:1, tous au-dessus du seuil de 4.5:1 exige pour du texte courant. */
.toast.succes { background: #12633a; border-color: rgba(255, 255, 255, 0.22); }
.toast.info   { background: #8a4b06; border-color: rgba(255, 255, 255, 0.22); }
.toast.erreur { background: #9b1c1c; border-color: rgba(255, 255, 255, 0.22); }
.toast .toast-icone { color: #ffffff; }
.toast-titre { display: block; font-weight: 700; }
/* `color: inherit` suffit : il herite desormais du blanc casse fixe du toast */
.toast button {
  background: none; border: 0; color: inherit; opacity: 0.75; cursor: pointer;
  font-size: 1.1rem; line-height: 1; margin-inline-start: auto; padding: 0.15rem 0.35rem;
}
.toast button:hover { opacity: 1; }

/* ---------- Journal technique (recette staging) ---------- */
.bloc-journal { margin-block: var(--e-4) var(--e-5); }
.bloc-journal summary {
  cursor: pointer; list-style: none;
  font-family: var(--police-titres); font-weight: 600; font-size: 0.78rem;
  color: var(--app-texte-2);
  border: 1px solid var(--app-ligne); border-radius: 999px;
  padding: 0.5rem 1rem; display: inline-block;
}
.bloc-journal summary::-webkit-details-marker { display: none; }
.bloc-journal summary:hover { color: var(--app-texte); border-color: var(--app-ligne-forte); }
#journal {
  font-size: 0.7rem; line-height: 1.5;
  background: #0d0b09; color: #9fe8a8;
  border: 1px solid var(--app-ligne);
  border-radius: var(--r-champ);
  padding: 0.9rem;
  margin-block-start: 0.7rem;
  max-block-size: 20rem; overflow: auto; white-space: pre-wrap;
}
.estimation-brute {
  font-size: 0.68rem; line-height: 1.45;
  background: var(--app-fond-2); color: var(--app-texte-2);
  border: 1px solid var(--app-ligne);
  border-radius: var(--r-champ);
  padding: 0.75rem; overflow-x: auto; max-block-size: 14rem;
}

/* ---------- Pied de tunnel ---------- */
.pied-app { position: relative; z-index: 1; flex: 0 0 auto; }
.pied-tunnel {
  border-block-start: 1px solid var(--app-ligne);
  padding-block: var(--e-3) calc(var(--e-4) + var(--bas-sur));
  margin-block-start: var(--e-3);
  font-size: 0.78rem; color: var(--app-texte-2);
  text-align: center;
}
.pied-tunnel a { color: var(--app-texte-2); }
.pied-tunnel a:hover { color: var(--corail-nuit); }

/* ---------- Mode jour : pilote par le bouton jour/nuit/systeme ----------
   Le JS pose html.clair selon le choix (jour, nuit, ou reglage systeme).
   Les memes jetons, en clair. Contrastes AA verifies. */
html.clair {
  --app-fond: #fffcf9;
  --app-fond-2: #faf3ec;
  --app-surface: #ffffff;
  --app-surface-2: #f4ebe2;
  --app-ligne: rgba(35, 32, 29, 0.14);
  --app-ligne-forte: rgba(35, 32, 29, 0.26);
  --app-texte: #23201d;
  --app-texte-2: #5c5450;
  --app-vert: #1f9d55;
  --app-rouge: #b3261e;
  --lueur-corail: 0 6px 20px rgba(249, 107, 75, 0.28);
}
/* la texture sombre du halo devient une trame claire discrete */
html.clair body::before {
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(249, 107, 75, 0.10), transparent 70%),
    repeating-linear-gradient(115deg, rgba(35, 32, 29, 0.035) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(25deg, rgba(35, 32, 29, 0.028) 0 1px, transparent 1px 62px);
}
html.clair .entete { background: rgba(255, 252, 249, 0.88); }
html.clair .bandeau-staging { background: rgba(122, 75, 0, 0.08); color: #7a4b00; border-block-end-color: rgba(122, 75, 0, 0.25); }
/* carte : tuiles OSM naturelles, sans inversion nocturne */
html.clair #carte-trajet .leaflet-tile-pane,
html.clair #carte-suivi .leaflet-tile-pane { filter: none; }
html.clair #carte-trajet .leaflet-control-attribution,
html.clair #carte-suivi .leaflet-control-attribution { background: rgba(255, 252, 249, 0.85); }
html.clair .champ-recherche input::-webkit-search-cancel-button { filter: opacity(0.5); }

/* ---------- Menu du client connecte ----------
   « Bienvenue <prenom> » : point d'entree unique vers ses courses et la
   deconnexion, demande de Stephane. Les anciens boutons isoles restent dans
   le HTML (masques) pour ne pas casser le JS qui les adresse encore. */
.btn-espace, .btn-deconnexion { display: none !important; }

.menu-client { position: relative; flex: 0 0 auto; }
.btn-client {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font: inherit; font-family: var(--police-titres); font-weight: 600; font-size: 0.82rem;
  color: var(--app-texte);
  background: var(--app-surface); border: 1px solid var(--app-ligne-forte);
  border-radius: 999px; padding: 0.35rem 0.7rem 0.35rem 0.35rem; cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}
.btn-client:hover { border-color: var(--corail); }
.btn-client[aria-expanded="true"] { border-color: var(--corail); background: var(--app-surface-2); }
.pastille-client {
  display: grid; place-items: center; flex: 0 0 auto;
  inline-size: 1.75rem; block-size: 1.75rem; border-radius: 50%;
  background: var(--degrade-marque); color: var(--encre);
  font-weight: 700; font-size: 0.8rem;
}
.chevron-client { inline-size: 14px; block-size: 14px; color: var(--app-texte-2); transition: transform 200ms ease; }
.btn-client[aria-expanded="true"] .chevron-client { transform: rotate(180deg); }

.volet-client {
  position: absolute; inset-block-start: calc(100% + 0.5rem); inset-inline-end: 0;
  z-index: 60; min-inline-size: 15rem;
  background: var(--app-surface); border: 1px solid var(--app-ligne-forte);
  border-radius: var(--r-carte); box-shadow: 0 18px 44px rgba(0,0,0,.38);
  padding: 0.4rem; display: grid; gap: 0.15rem;
  animation: volet-entree 160ms ease;
}
@keyframes volet-entree { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .volet-client { animation: none; } }
.volet-client-entete {
  font-size: 0.75rem; color: var(--app-texte-2);
  padding: 0.4rem 0.6rem 0.5rem; margin: 0;
  border-block-end: 1px solid var(--app-ligne); overflow-wrap: anywhere;
}
.volet-client button {
  display: flex; align-items: center; gap: 0.6rem; inline-size: 100%;
  font: inherit; font-size: 0.9rem; font-weight: 600; text-align: start;
  color: var(--app-texte); background: none; border: 0;
  border-radius: var(--r-champ); padding: 0.6rem; cursor: pointer;
  transition: background 130ms ease, color 130ms ease;
}
.volet-client button:hover { background: var(--app-surface-2); }
.volet-client button svg { inline-size: 17px; block-size: 17px; flex: 0 0 auto; color: var(--app-texte-2); }
.volet-client button:hover svg { color: var(--corail); }
.volet-client .menu-danger { color: var(--app-rouge); }
.volet-client .menu-danger svg { color: var(--app-rouge); }

@media (max-width: 32rem) {
  .btn-client-texte strong { display: inline; }
  .btn-client-texte { max-inline-size: 7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ================================================================
   DISCUSSION AVEC LE CHAUFFEUR ET ASSISTANT ROBY (2026-10-03)
   Deux feuilles du meme gabarit que la popin : elles montent du bas,
   sur toute la largeur de l'application. Proprietes logiques partout :
   en arabe, mes messages passent a gauche sans regle a part.
   ================================================================ */
.voile-discussion { z-index: 320; }
.feuille-discussion {
  display: flex; flex-direction: column;
  inline-size: 100%; max-width: 34rem; margin-inline: auto;
  block-size: min(88dvh, 42rem);
  background: var(--app-fond-2);
  border: 1px solid var(--app-ligne); border-block-end: 0;
  border-radius: var(--r-feuille) var(--r-feuille) 0 0;
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.6);
  animation: feuille-monte 300ms cubic-bezier(0.2, 0.7, 0.3, 1);
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) { .feuille-discussion { animation: none; } }
.discussion-entete {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.9rem var(--marge);
  border-block-end: 1px solid var(--app-ligne);
}
.discussion-avatar {
  flex: none; inline-size: 2.6rem; block-size: 2.6rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--app-surface-2) center / cover no-repeat;
  color: var(--app-texte); font-weight: 700;
}
.discussion-avatar-roby { background: var(--corail); color: var(--encre); }
.discussion-titres { display: grid; gap: 0.1rem; min-inline-size: 0; flex: 1; }
.discussion-titres strong { color: var(--app-texte); font-size: 1rem; }
.discussion-titres small { color: var(--app-texte-2); font-size: 0.8rem; }
.discussion-fermer {
  flex: none; inline-size: 2.4rem; block-size: 2.4rem; border-radius: 50%;
  border: 1px solid var(--app-ligne-forte); background: none; color: var(--app-texte);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.fil-messages {
  list-style: none; margin: 0; padding: 1rem var(--marge);
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.msg {
  max-inline-size: 82%; padding: 0.55rem 0.8rem;
  border-radius: 16px; line-height: 1.4; font-size: 0.95rem;
  white-space: pre-line; overflow-wrap: anywhere;
}
.msg-autre { align-self: flex-start; background: var(--app-surface); color: var(--app-texte); border: 1px solid var(--app-ligne); border-end-start-radius: 4px; }
.msg-moi { align-self: flex-end; background: var(--corail); color: var(--encre); border-end-end-radius: 4px; }
.msg-moi.en-cours { opacity: 0.6; }
.msg-moi.echec { background: none; color: var(--app-rouge); border: 1px dashed var(--app-rouge); }
.msg-systeme { align-self: center; max-inline-size: 92%; text-align: center; font-size: 0.82rem; color: var(--app-texte-2); background: none; padding: 0.2rem 0.4rem; }
.msg-auteur { display: block; font-size: 0.72rem; font-weight: 700; opacity: 0.8; margin-block-end: 0.15rem; }
.msg-heure { display: block; font-size: 0.7rem; opacity: 0.7; margin-block-start: 0.2rem; text-align: end; }
.msg-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-block-start: 0.5rem; }
.msg-actions .bouton { min-block-size: 2.2rem; padding: 0.4rem 0.9rem; font-size: 0.85rem; }
.msg-attente { align-self: flex-start; color: var(--app-texte-2); font-size: 0.9rem; padding: 0.4rem 0.2rem; }
.msg-attente::after { content: "..."; display: inline-block; animation: points 1.2s steps(4, end) infinite; overflow: hidden; inline-size: 0; vertical-align: bottom; }
@keyframes points { to { inline-size: 1.2em; } }
.messages-rapides {
  display: flex; gap: 0.45rem; overflow-x: auto; padding: 0 var(--marge) 0.6rem;
  scrollbar-width: none;
}
.messages-rapides:empty { display: none; }
.messages-rapides button {
  flex: none; border: 1px solid var(--app-ligne-forte); background: var(--app-surface);
  color: var(--app-texte); border-radius: 999px; padding: 0.45rem 0.85rem; font-size: 0.85rem; cursor: pointer;
}
.messages-rapides button:disabled { opacity: 0.5; cursor: default; }
.discussion-note { margin: 0; padding: 0 var(--marge) 0.6rem; font-size: 0.82rem; color: var(--app-texte-2); text-align: center; }
.discussion-saisie {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; align-items: end;
  padding: 0.7rem var(--marge) calc(0.7rem + var(--bas-sur));
  border-block-start: 1px solid var(--app-ligne);
}
.discussion-saisie textarea {
  resize: none; max-block-size: 8rem; min-block-size: 2.9rem;
  border: 1px solid var(--app-ligne-forte); border-radius: var(--r-champ);
  background: var(--app-surface); color: var(--app-texte);
  padding: 0.7rem 0.85rem; font: inherit; font-size: 1rem; line-height: 1.35;
}
.discussion-saisie .bouton { min-block-size: 2.9rem; padding-inline: 1.1rem; }
.discussion-saisie[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }

.bouton-discuter { gap: 0.45rem; }
.bouton-discuter svg { inline-size: 1.1em; block-size: 1.1em; flex: none; }
.pastille-non-lus {
  min-inline-size: 1.3rem; block-size: 1.3rem; padding: 0 0.35rem; border-radius: 999px;
  background: var(--corail); color: var(--encre); font-size: 0.75rem; font-weight: 700;
  display: inline-grid; place-items: center;
}

.bouton-assistant {
  position: fixed; z-index: 250;
  inset-block-end: calc(1rem + var(--bas-sur)); inset-inline-end: 1rem;
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.7rem 1.05rem; border-radius: 999px; border: 0;
  background: var(--corail); color: var(--encre); font-weight: 700; font-size: 0.95rem;
  box-shadow: var(--lueur-corail); cursor: pointer;
}
.bouton-assistant svg { inline-size: 1.25em; block-size: 1.25em; }
.bouton-assistant[hidden] { display: none; }

/* Connexion venue de l'espace prive : ni barre d'etapes ni progression de
   commande (commander.js, modeConnexion). */
.connexion-espace .jalons-cadre { display: none; }