/* AutoParcBenin — feuille de style
   Direction artistique « Ardoise & Ambre » : une ardoise profonde, réchauffée
   par un ambre discret, sur un fond craie. Titres et chiffres en Outfit,
   textes en Manrope. Angles arrondis de 8 à 12 px, bordures fines, pas
   d'ombres lourdes.
   Statuts : acier (en route), ambre (en préparation), vert (en vente),
   gris (vendu). Toujours accompagnés de leur libellé, jamais la couleur
   seule.
   Contrastes : tout texte tient au moins 4,5:1 sur son fond, les bordures de
   champs au moins 3:1. */

/* Polices servies avec l'application (vendor/polices, licence OFL) : aucune
   requête vers un tiers, et elles restent lisibles hors ligne. Fichiers
   variables : une seule graisse couvre 100 à 900. */
@font-face {
  font-family: "Outfit Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(vendor/polices/outfit-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Outfit Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(vendor/polices/outfit-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Manrope Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(vendor/polices/manrope-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Manrope Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(vendor/polices/manrope-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root {
  /* Palette de la DA */
  --ardoise: #1b2230;
  --ambre: #e0a63a;
  --craie: #f6f4ef;
  --acier: #3c4a63;
  --vert-da: #2e8b57;
  --alerte: #c64b3c;

  /* Rôles. Les anciens noms restent : ils portent les teintes de la DA. */
  --marine: var(--ardoise);
  --marine-2: #262f40;
  --principal: var(--ardoise);
  --principal-fonce: #111722;
  --principal-clair: #edeff1;
  --fond: var(--craie);
  --surface: #ffffff;
  --surface-2: #f1efe9;
  --bordure: #e4e1d9;
  --bordure-forte: #868a90;
  --texte: var(--ardoise);
  --texte-2: #4a5162;
  --texte-3: #646b78;
  --danger: var(--alerte);
  --danger-fonce: #b23f31;
  --danger-fond: #f8e9e8;
  --succes: #287a4d;
  --succes-fond: #e4f0e9;

  /* Accent ambre : aplats, pistes et jauges ; en texte, la version foncée. */
  --ambre-fonce: #ca9534;
  --ambre-texte: #8b6724;
  --ambre-fond: #f9efdc;

  /* Statuts des véhicules */
  --bleu: var(--acier);  --bleu-texte: var(--acier);  --bleu-fond: #edeff1;
  --orange: var(--ambre); --orange-texte: var(--ambre-texte); --orange-fond: var(--ambre-fond);
  --vert: var(--vert-da); --vert-texte: #287a4d;      --vert-fond: #e4f0e9;
  --gris: #9ea0a3;        --gris-texte: #525760;      --gris-fond: #e7e5e2;

  /* Graphiques : une seule série → l'acier, l'ambre reste une mise en avant. */
  --serie-1: var(--acier);
  --serie-1-survol: #2a3446;
  --grille: #e4e1d9;

  /* Rôles des composants, tous tirés de la palette ci-dessus. Les trois
     seules valeurs propres sont des aplats pleins : un vert et deux rouges
     assez sombres pour porter un texte blanc (5,86:1, 5,76:1 et 7,39:1). */
  --lien: var(--acier);                /* lien de texte : acier + soulignement */
  --focus: var(--ardoise);             /* repère de focus sur fond clair (15,9:1) */
  --focus-clair: var(--surface);       /* le même sur un aplat sombre (15,9:1) */
  --succes-plein: #25724a;
  --succes-plein-survol: #1d5a3a;
  --danger-plein: var(--danger-fonce);
  --danger-plein-survol: #97342a;
  --image-fond: var(--gris-fond);      /* vignettes et zones d'image */
  /* Voiles d'ardoise : étiquette posée sur une photo, fond d'une boîte de
     dialogue, fond de la visionneuse. */
  --voile: rgb(27 34 48 / 78%);
  --voile-leger: rgb(27 34 48 / 55%);
  --voile-fort: rgb(27 34 48 / 96%);

  --rayon: 12px;
  --rayon-petit: 8px;
  --ombre: 0 1px 2px rgb(27 34 48 / 6%);
  --police: "Manrope Variable", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --police-titres: "Outfit Variable", "Manrope Variable", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --police-code: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

/* L'attribut `hidden` doit toujours l'emporter : un sélecteur de classe
   portant un `display` neutralise sinon la règle du navigateur, et un
   écran « masqué » reste affiché. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--police);
  font-size: 15px;
  line-height: 1.5;
  color: var(--texte);
  background: var(--fond);
}

/* Échelle de la DA : H1 32/600, H2 22/600, corps 15/400 ; titres et chiffres
   en Outfit, textes en Manrope. */
h1, h2, h3 { margin: 0; line-height: 1.2; font-family: var(--police-titres); font-weight: 600; letter-spacing: -0.01em; }
h1 { font-size: 32px; }
h2 { font-size: 22px; }
h3 { font-size: 17px; }
p { margin: 0; }
/* Un lien de texte ne doit pas se confondre avec le texte courant : l'acier
   le distingue de l'ardoise, le soulignement du navigateur est conservé. */
a { color: var(--lien); text-underline-offset: 2px; }

/* Libellé de la DA : capitales espacées, 12 / 600, pour les intitulés courts. */
.libelle { font-family: var(--police); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texte-3); }

/* Marque : un P dont le ventre est une roue (img/icone.svg pour le favicon).
   La tige suit la couleur du texte, la roue reste ambre. */
.marque-mark { width: 1.3em; height: 1.3em; }
.marque-mark .roue { fill: none; stroke: var(--ambre); stroke-width: 3; }
.marque-mark .tige { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.marque-mark .moyeu { fill: currentColor; stroke: none; }
code { font-family: var(--police-code); font-size: 0.92em; background: var(--gris-fond); padding: 1px 5px; border-radius: 5px; }

svg {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.aide { color: var(--texte-2); font-size: 14px; }
.aide-champ { color: var(--texte-3); font-size: 12.5px; }
.attenue { color: var(--texte-3); font-weight: 500; }
.requis { color: var(--danger); }
.police-code { font-family: var(--police-code); letter-spacing: 0.02em; }
.nombre { font-variant-numeric: tabular-nums; }
.droite { text-align: right; }

/* ---------- Messages ---------- */
/* Fond teinté, filet fin de la même famille : le type du message se lit au
   texte, jamais à la seule couleur. */
.message {
  border-radius: var(--rayon-petit);
  padding: 10px 12px;
  font-size: 14px;
}
.message.erreur { color: var(--danger-fonce); background: var(--danger-fond); border: 1px solid var(--danger); }
.message.succes { color: var(--succes); background: var(--succes-fond); border: 1px solid var(--vert-da); }
.message.info { color: var(--bleu-texte); background: var(--bleu-fond); border: 1px solid var(--acier); }
.message.attention { color: var(--orange-texte); background: var(--orange-fond); border: 1px solid var(--ambre); }

.erreur-fatale {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: var(--danger-plein); color: #fff; padding: 12px 16px; font-size: 14px;
}

/* ---------- Écrans centrés (chargement, connexion…) ---------- */
.ecran-centre { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.carte-centre {
  width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--bordure);
  border-radius: var(--rayon); padding: 32px; box-shadow: var(--ombre);
  display: grid; gap: 12px;
}
/* Les boutons ne se replient pas (.bouton), et la carte est une grille : son
   enfant le plus long lui impose sa largeur. « Créer un compte · 14 jours
   d'essai gratuit » mesure 299 px, la carte en prenait 365 et poussait le bord
   du document à 389 px — la page entière défilait sous 414 px. Ce libellé-là
   est une phrase, pas une commande : il peut tenir sur deux lignes. */
.carte-centre .bouton.large { white-space: normal; }
/* Code de connexion : « Se déconnecter », « Renvoyer un code » et « Entrer »
   sur une seule ligne. À 420 px, la carte n'en laissait que 354 : le dernier
   passait dessous. Sur un petit écran, chaque libellé peut tenir sur deux
   lignes plutôt qu'un bouton descende. */
#ecran-second-facteur .carte-centre { max-width: 500px; }
#ecran-second-facteur .actions-formulaire { flex-wrap: nowrap; }
#ecran-second-facteur .actions-formulaire .bouton { white-space: normal; text-align: center; flex: 0 1 auto; }
/* Sur un téléphone, marges resserrées pour que les trois tiennent encore
   (« déconnecter », le mot le plus long, ne se coupe pas) ; en dessous de
   360 px, il n'y a plus la place : ils reprennent deux lignes. */
@media (max-width: 520px) {
  #ecran-second-facteur { padding: 16px; }
  #ecran-second-facteur .carte-centre { padding: 24px 18px; }
  #ecran-second-facteur .actions-formulaire { gap: 8px; }
  #ecran-second-facteur .actions-formulaire .bouton { flex: 1 1 auto; padding-inline: 10px; }
}
@media (max-width: 359px) {
  #ecran-second-facteur .actions-formulaire { flex-wrap: wrap; }
}
.carte-connexion label { font-size: 13px; font-weight: 600; color: var(--texte-2); margin-top: 4px; }
.carte-connexion .sous-titre { color: var(--texte-2); margin-top: -6px; margin-bottom: 8px; }
.logo-grand {
  width: 56px; height: 56px; border-radius: 16px; background: var(--marine); color: #fff;
  display: grid; place-items: center; font-size: 30px;
}

.chargeur {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--bordure); border-top-color: var(--principal);
  animation: tourner 0.8s linear infinite;
}
@keyframes tourner { to { transform: rotate(360deg); } }
.chargement-vue { display: grid; place-items: center; padding: 80px 0; }

/* ---------- Champs ---------- */
input, select, textarea, button { font: inherit; color: inherit; }

input:not([type=radio]):not([type=checkbox]), select, textarea {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--bordure-forte);
  border-radius: var(--rayon-petit);
  background: var(--surface);
  font-size: 15px;
  min-height: 40px;
}
textarea { resize: vertical; }
/* Repère de focus en ardoise, posé à 2 px du champ : il tient le 3:1 sur le
   blanc comme sur la craie, là où un halo pâle disparaissait. */
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--focus);
}
input.invalide, select.invalide, textarea.invalide { border-color: var(--danger-plein); outline-color: var(--danger-plein); }
/* VIN ou châssis déjà enregistré (controle-identifiants.js) : une classe à
   part, que la saisie et l'envoi du formulaire n'effacent pas l'un pour
   l'autre ; le message, sous le champ, plus serré que celui du formulaire. */
input.identifiant-refuse { border-color: var(--danger-plein); outline-color: var(--danger-plein); }
.message.controle-identifiant { font-size: 13px; padding: 8px 10px; overflow-wrap: anywhere; }
input[readonly] { background: var(--surface-2); color: var(--texte-2); }

.champ { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 0; border: 0; }
.champ > label, .champ > legend { font-size: 13px; font-weight: 600; color: var(--texte-2); padding: 0; }
.champ > legend { margin-bottom: 6px; }
.compteur { font-weight: 500; color: var(--texte-3); margin-left: 4px; }
.compteur.complet { color: var(--vert-texte); }

.grille-champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.grille-champs.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plein { grid-column: 1 / -1; }

.champ-avec-bouton, .champ-avec-unite, .champ-avec-suffixe { display: flex; gap: 8px; align-items: stretch; }
.champ-avec-unite select { width: auto; flex: 0 0 96px; }
.champ-avec-bouton .bouton { flex: 0 0 auto; }
.suffixe { align-self: center; white-space: nowrap; color: var(--texte-3); font-size: 13px; }

.case { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.case input { width: 18px; height: 18px; accent-color: var(--principal); }

/* Choix segmentés (devise) */
.segments { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--bordure-forte); border-radius: 10px; overflow: hidden; background: var(--surface); }
.segment { position: relative; }
.segment input { position: absolute; opacity: 0; pointer-events: none; }
.segment span { display: block; padding: 8px 13px; font-size: 14px; font-weight: 600; color: var(--texte-2); cursor: pointer; border-right: 1px solid var(--bordure); }
.segment:last-child span { border-right: 0; }
.segment input:checked + span { background: var(--principal); color: #fff; }
/* Anneau posé à l'intérieur (les segments se touchent) : ardoise sur le
   segment blanc, blanc sur le segment choisi, qui est ardoise. */
.segment input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: -3px; }
.segment input:checked:focus-visible + span { outline-color: var(--focus-clair); }

/* Choix en cartes (type d'achat, nature de dépense) */
.choix-cartes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.choix-carte { position: relative; cursor: pointer; }
.choix-carte input { position: absolute; opacity: 0; pointer-events: none; }
.choix-carte > span {
  display: flex; flex-direction: column; gap: 2px; height: 100%;
  border: 1.5px solid var(--bordure-forte); border-radius: 12px; padding: 11px 13px; background: var(--surface);
}
.choix-carte strong { font-size: 15px; }
.choix-carte small { color: var(--texte-3); font-size: 12.5px; }
.choix-carte input:checked + span { border-color: var(--principal); background: var(--principal-clair); box-shadow: inset 0 0 0 1px var(--principal); }
.choix-carte input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Conversion devise → FCFA */
.bloc-conversion {
  margin-top: 16px; padding: 14px 16px 12px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--bordure);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px;
}
.ligne-conversion { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: flex-end; }
.ligne-conversion [data-bloc-taux] { flex: 1 1 220px; max-width: 320px; }
.grille-conversion { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.montant-fcfa { font-weight: 600; }
.total-conversion {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  border-top: 1px solid var(--bordure); padding-top: 10px; color: var(--texte-2);
}
.total-conversion strong { color: var(--texte); font-size: 17px; }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 40px; padding: 8px 14px; border-radius: 10px;
  border: 1px solid var(--bordure-forte); background: var(--surface); color: var(--texte);
  font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.bouton:hover { background: var(--surface-2); border-color: var(--texte-3); }
.bouton:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.bouton.principal { background: var(--principal); border-color: var(--principal); color: #fff; }
.bouton.principal:hover { background: var(--principal-fonce); border-color: var(--principal-fonce); }
/* Aplats pleins : verts et rouges choisis pour qu'un texte blanc y tienne
   le 4,5:1 (5,86:1 et 5,76:1). */
.bouton.succes { background: var(--succes-plein); border-color: var(--succes-plein); color: #fff; }
.bouton.succes:hover { background: var(--succes-plein-survol); border-color: var(--succes-plein-survol); }
.bouton.danger { background: var(--danger-plein); border-color: var(--danger-plein); color: #fff; }
.bouton.danger:hover { background: var(--danger-plein-survol); border-color: var(--danger-plein-survol); }
.bouton.discret-danger { color: var(--danger-fonce); }
.bouton.petit { min-height: 32px; padding: 5px 10px; font-size: 13px; border-radius: var(--rayon-petit); }
.bouton.large { width: 100%; }
.bouton:disabled { opacity: 0.55; cursor: not-allowed; }

/* Action tertiaire : l'ambre en texte, seule teinte ambrée qui tienne le
   4,5:1 sur le blanc (5,17:1) et sur la craie (4,70:1). */
.lien {
  background: none; border: 0; padding: 0; color: var(--ambre-texte); font-weight: 600; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.lien:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
.lien.clair { color: rgb(255 255 255 / 75%); font-size: 13px; }
.lien.clair:focus-visible { outline-color: var(--focus-clair); }

.icone-bouton {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--rayon-petit);
  border: 0; background: transparent; color: var(--texte-2); cursor: pointer;
}
.icone-bouton:hover { background: var(--gris-fond); color: var(--texte); }
.icone-bouton:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.icone-bouton.clair { color: #fff; }
.icone-bouton.clair:hover { background: rgb(255 255 255 / 12%); }
.icone-bouton.clair:focus-visible { outline-color: var(--focus-clair); }

.lien-retour {
  display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px;
  color: var(--texte-2); font-size: 14px; font-weight: 600; text-decoration: none;
}
.lien-retour:hover { color: var(--principal); }

/* ---------- Structure de l'application ---------- */
.application { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }

.barre-laterale {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 22px;
  padding: 20px 14px; background: var(--marine); color: #fff;
}
.marque {
  display: flex; align-items: center; gap: 10px; padding: 4px 8px;
  color: #fff; text-decoration: none; font-weight: 700; font-size: 16px;
}
.logo {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: rgb(255 255 255 / 12%); font-size: 20px;
}
.navigation { display: flex; flex-direction: column; gap: 4px; }
.navigation a {
  display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 10px;
  color: rgb(255 255 255 / 72%); text-decoration: none; font-weight: 600; font-size: 14.5px;
}
.navigation a:hover { background: rgb(255 255 255 / 7%); color: #fff; }
/* L'élément courant porte un trait ambre en plus du fond et du texte plus
   clairs : le repère ne tient pas qu'à la couleur du texte (7,35:1 sur l'ardoise). */
.navigation a.actif { background: rgb(255 255 255 / 13%); color: #fff; box-shadow: inset 3px 0 0 var(--ambre); }
.navigation a:focus-visible { outline: 2px solid var(--focus-clair); outline-offset: -2px; }
.compte { margin-top: auto; display: grid; gap: 4px; padding: 12px 10px 0; border-top: 1px solid rgb(255 255 255 / 12%); }
.compte-nom { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compte .lien { justify-self: start; }

.entete-mobile { display: none; }

.contenu { padding: 28px 32px 48px; min-width: 0; outline: none; }
.page { max-width: 1180px; margin: 0 auto; }
.page-etroite { max-width: 880px; margin: 0 auto; }

.entete-page { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.entete-page .aide { margin-top: 4px; }

.carte { background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); box-shadow: var(--ombre); }
.carte-section { padding: 18px 20px; }
.carte-section > h2, .carte-section > header { margin-bottom: 14px; }
.carte-section > header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.carte-section > header h2 { margin: 0; }

.section-formulaire { padding: 20px 22px; margin-bottom: 16px; }
.section-formulaire > h2 { margin-bottom: 16px; }

.actions-formulaire { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
/* Un formulaire à deux boutons « submit » (stock initial : « Enregistrer » et
   « Enregistrer et saisir le suivant ») met le principal en premier dans le
   code, pour que la touche Entrée le déclenche ; il s'affiche en dernier. */
.actions-formulaire .bouton-en-dernier { order: 1; }
.formulaire > .message { margin-top: 4px; }

.etat-vide { padding: 40px 24px; text-align: center; display: grid; gap: 10px; justify-items: center; }
.etat-vide p { color: var(--texte-2); }
.etat-vide-icone { font-size: 40px; color: var(--texte-3); }

/* ---------- Statuts ---------- */
/* Badge de la DA : libellé en capitales espacées, angle de 6 px, fond teinté
   et pastille à la couleur du statut. Le libellé est toujours écrit. */
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px;
  border-radius: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; white-space: nowrap;
  background: var(--gris-fond); color: var(--gris-texte);
}
.pastille { width: 8px; height: 8px; border-radius: 50%; background: var(--gris); flex-shrink: 0; }
.bleu .pastille { background: var(--bleu); }
.orange .pastille { background: var(--orange); }
.vert .pastille { background: var(--vert); }
.gris .pastille { background: var(--gris); }
.badge.bleu { background: var(--bleu-fond); color: var(--bleu-texte); }
.badge.orange { background: var(--orange-fond); color: var(--orange-texte); }
.badge.vert { background: var(--vert-fond); color: var(--vert-texte); }
.badge.gris { background: var(--gris-fond); color: var(--gris-texte); }
.badge.grand { font-size: 12.5px; padding: 5px 13px 5px 10px; }
.badge.grand .pastille { width: 10px; height: 10px; }

/* ---------- Liste des véhicules ---------- */
.barre-filtres { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puce {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 8px 6px 12px; border-radius: 999px;
  border: 1px solid var(--bordure-forte); background: var(--surface); font-size: 14px; font-weight: 600;
  color: var(--texte-2); cursor: pointer;
}
.puce:hover { border-color: var(--texte-3); }
.puce:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.puce[aria-pressed=true] { background: var(--principal); border-color: var(--principal); color: #fff; }
.puce-compte {
  min-width: 24px; padding: 1px 7px; border-radius: 999px; background: var(--gris-fond);
  color: var(--texte-2); font-size: 12.5px; text-align: center;
}
.puce[aria-pressed=true] .puce-compte { background: rgb(255 255 255 / 18%); color: #fff; }
.outils-liste { display: flex; gap: 8px; flex-wrap: wrap; }
.outils-liste select { width: auto; }
.champ-recherche {
  display: flex; align-items: center; gap: 8px; padding: 0 10px; min-width: 260px;
  border: 1px solid var(--bordure-forte); border-radius: var(--rayon-petit); background: var(--surface); color: var(--texte-3);
}
.champ-recherche:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--focus); }
.champ-recherche input { border: 0 !important; outline: 0 !important; padding-left: 0 !important; min-height: 38px; }

.grille-vehicules { display: grid; grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); gap: 16px; }
.grille-vehicules > .etat-vide { grid-column: 1 / -1; }

.carte-vehicule {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); box-shadow: var(--ombre);
  transition: border-color 0.15s, transform 0.15s;
}
/* Au survol, la bordure se renforce : une seule ombre discrète dans toute
   l'application, jamais d'ombre portée au survol. */
.carte-vehicule:hover { border-color: var(--bordure-forte); transform: translateY(-1px); }
.carte-vehicule:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.vignette { position: relative; aspect-ratio: 4 / 3; background: var(--image-fond); overflow: hidden; }
.vignette img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.25s; }
.vignette img.chargee { opacity: 1; }
.vignette-icone { position: absolute; inset: 0; display: grid; place-items: center; color: var(--gris); font-size: 58px; }
.vignette-icone svg { stroke-width: 1.1; }
/* Posé sur une photo, le badge passe en aplat plein : la teinte du statut
   porte le libellé, avec un texte vérifié (blanc sur acier 8,93:1, sur vert
   5,86:1, sur rouge 5,76:1 ; ardoise sur ambre 7,35:1, sur gris 6,08:1). */
.vignette .badge { position: absolute; top: 10px; left: 10px; background: var(--ardoise); color: #fff; box-shadow: var(--ombre); }
.vignette .badge .pastille { background: currentColor; }
.vignette .badge.bleu { background: var(--acier); color: #fff; }
.vignette .badge.orange { background: var(--ambre); color: var(--ardoise); }
.vignette .badge.vert { background: var(--succes-plein); color: #fff; }
.vignette .badge.gris { background: var(--gris); color: var(--ardoise); }
.vignette .badge.rouge { background: var(--danger-plein); color: #fff; }

.carte-corps { padding: 12px 14px 14px; display: flex; flex-direction: column; flex: 1; }
.carte-surtitre { font-size: 12.5px; color: var(--texte-3); }
.carte-titre { font-size: 16px; font-weight: 650; margin: 2px 0 10px; }
.carte-chiffres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.carte-chiffres dt { font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texte-3); }
/* Coût d'achat, prix de revient, prix de vente : des chiffres mis en avant,
   donc en Outfit comme les tuiles et les totaux. */
.carte-chiffres dd { margin: 0; font-family: var(--police-titres); font-weight: 650; font-size: 14px; font-variant-numeric: tabular-nums; }
.carte-pied { margin-top: auto; padding-top: 10px; font-size: 12.5px; color: var(--texte-2); }
.carte-chiffres + .carte-pied { margin-top: 12px; border-top: 1px solid var(--bordure); }
.carte-pied.a-completer { color: var(--orange-texte); }
.carte-pied.pret, .carte-pied.gain { color: var(--vert-texte); }
.carte-pied.perte { color: var(--danger-fonce); }

/* ---------- Fiche véhicule ---------- */
.fiche-entete { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 0; overflow: hidden; margin-bottom: 16px; }
.fiche-photo { position: relative; aspect-ratio: 4 / 3; background: var(--image-fond); }
.fiche-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.25s; }
.fiche-photo img.chargee { opacity: 1; }
.fiche-photo .vignette-icone { font-size: 72px; }
.fiche-infos { padding: 18px 22px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fiche-titre-ligne { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.fiche-surtitre { font-size: 13px; color: var(--texte-3); font-weight: 600; }
.fiche-titre { font-size: 24px; }
.fiche-sous-titre { color: var(--texte-2); }
.fiche-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* La carte d'en-tête rogne ce qui dépasse (overflow: hidden) : un libellé
   long (« Receipts · balance 4,000,000 FCFA » sur un téléphone de 320 px) se
   replie sur deux lignes au lieu d'être coupé. */
.fiche-actions .bouton { white-space: normal; text-align: center; }

.chiffres-cles { display: grid; gap: 10px; }
.chiffre-cle { background: var(--surface-2); border: 1px solid var(--bordure); border-radius: 10px; padding: 9px 12px; }
/* Libellé court au-dessus d'un chiffre : 12 / 600 en capitales espacées ;
   le chiffre lui-même en Outfit. La précision entre parenthèses (« · marge
   … »), elle, reste en bas de casse : c'est une phrase, pas une étiquette. */
.chiffre-cle dt { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texte-3); }
.chiffre-cle dt .attenue { letter-spacing: normal; text-transform: none; }
.chiffre-cle dd { margin: 2px 0 0; font-family: var(--police-titres); font-size: 17px; font-weight: 700; }
.chiffre-cle dd.gain { color: var(--vert-texte); }
.chiffre-cle dd.perte { color: var(--danger-fonce); }
/* Avec le droit de voir les coûts : coût d'achat, revient, prix de vente et bénéfice. */
.chiffres-cles.quatre dd { font-size: 15.5px; }
.carte-chiffres > .pleine { grid-column: 1 / -1; }

.frise { display: flex; flex-wrap: wrap; gap: 12px 0; margin: 2px 0 0; padding: 0; list-style: none; }
/* Une date est d'un seul tenant : dans une étape plus étroite qu'elle, elle
   empiète sur la date voisine (« 24/06/202630/07/2026 » entre 861 et 882 px,
   où la photo garde ses 260 px, et sous 328 px). La plus large, « 06/06/2066 »,
   vaut 5,66 fois le corps de l'étape (mesurée en 12,5 et 11,5 px), et il lui
   faut en plus un blanc avant la suivante : 0,4 em, deux espaces. Sans ce
   blanc, juste au-dessus de la bascule, deux dates se touchent
   (« 06/06/206606/06/2066 », 0,03 px d'écart). Quatre étapes demandent donc
   4 × 6,06 = 24,24 em. Tant qu'elles les ont, la base reste 0 %, quatre
   parts égales, rien ne change. Sinon, la base saute à 34 % (le facteur
   10 000 rend la bascule franche) : deux étapes par ligne, deux rangées de
   deux, jamais trois et une. */
.frise li { flex: 1 1 clamp(0%, (24.24em - 100%) * 10000, 34%); position: relative; padding-top: 16px; font-size: 12.5px; color: var(--texte-3); min-width: 0; }
.frise li::before { content: ""; position: absolute; top: 5px; left: 0; right: 0; height: 2px; background: var(--bordure); }
.frise li:first-child::before { left: 5px; }
.frise li::after {
  content: ""; position: absolute; top: 0; left: 0; width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--bordure-forte);
}
.frise li.faite { color: var(--texte-2); }
.frise li.faite::before { background: var(--principal); }
.frise li.faite::after { background: var(--principal); border-color: var(--principal); }
/* Le même blanc de 0,4 em après le libellé. Sans lui, « Mise en vente »
   tenait sur une ligne, à moins d'un demi-pixel du libellé suivant : on
   lisait « Mise en venteVente » vers 408 et 967 px, « Put up for saleSale »
   vers 421 et 981 px. Là où le blanc manque, le libellé passe sur deux
   lignes ; rien d'autre de la frise ne bouge. */
.frise strong { display: block; color: var(--texte); font-size: 13px; padding-inline-end: 0.4em; }

.onglets { display: flex; gap: 2px; border-bottom: 1px solid var(--bordure); margin-bottom: 16px; overflow-x: auto; scrollbar-width: thin; }
.onglet {
  padding: 10px 14px; border: 0; background: none; color: var(--texte-2); font-weight: 600; font-size: 14.5px;
  border-bottom: 2.5px solid transparent; text-decoration: none; white-space: nowrap; cursor: pointer;
}
.onglet:hover { color: var(--texte); }
.onglet.actif { color: var(--principal); border-bottom-color: var(--principal); }
.onglet .puce-compte { margin-left: 4px; }

.grille-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
/* minmax(0, 1fr) et pas la colonne automatique : celle-ci s'élargit à la
   largeur minimale de son contenu — un tableau, même défilable — et fait
   déborder toute la page sur téléphone. */
.pile { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }

.details { display: grid; grid-template-columns: minmax(120px, 40%) minmax(0, 1fr); gap: 8px 14px; margin: 0; font-size: 14px; }
.details dt { color: var(--texte-3); }
.details dd { margin: 0; font-weight: 550; overflow-wrap: anywhere; }

.decomposition { display: grid; gap: 0; margin: 0; }
.decomposition > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--bordure); font-size: 14.5px; }
.decomposition dt { color: var(--texte-2); }
.decomposition dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.decomposition .sous-total { border-bottom-width: 2px; border-bottom-color: var(--texte-3); }
.decomposition .sous-total dt, .decomposition .sous-total dd { color: var(--texte); font-weight: 700; }
.decomposition .total { border-bottom: 0; }
.decomposition .total dt, .decomposition .total dd { font-family: var(--police-titres); font-size: 17px; font-weight: 750; color: var(--texte); }
.decomposition .signe { color: var(--texte-3); margin-right: 6px; }

/* Tableaux */
/* position: relative : un texte masqué en position absolue (.visuellement-cache)
   reste dans le cadre défilant au lieu d'élargir toute la page. */
.tableau-enveloppe { position: relative; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
/* En-tête de tableau : le libellé de la DA, 12 / 600 en capitales espacées.
   Les colonnes, elles, restent en Manrope avec des chiffres tabulaires. */
th {
  text-align: left; font-size: 12px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--texte-3);
  padding: 8px 10px; border-bottom: 1px solid var(--bordure); white-space: nowrap;
}
td { padding: 10px; border-bottom: 1px solid var(--bordure); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
td.nombre, th.nombre { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.actions { text-align: right; white-space: nowrap; width: 1%; }
tfoot td { font-weight: 700; border-top: 2px solid var(--bordure); border-bottom: 0; }
.sous-ligne { display: block; color: var(--texte-3); font-size: 12.5px; }

/* Liste de contrôle (mise en vente) */
.controle { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.controle li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.controle .etat { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: 14px; flex-shrink: 0; }
.controle .ok .etat { background: var(--vert-fond); color: var(--vert-texte); }
.controle .manque .etat { background: var(--orange-fond); color: var(--orange-texte); }
.controle .manque { color: var(--texte-2); }
.controle svg { stroke-width: 2.4; }

.prix-vente-bloc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; align-items: end; }
.resume-vente { font-size: 15px; color: var(--texte-2); }
.resume-vente strong { color: var(--texte); }

/* ---------- Photos et vidéos ---------- */
.jauges { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; }
.jauge-entete { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; margin-bottom: 6px; }
.jauge-entete strong { font-variant-numeric: tabular-nums; }
.jauge-piste { height: 8px; border-radius: 999px; background: var(--orange-fond); overflow: hidden; }
.jauge-remplie { height: 100%; border-radius: 999px; background: var(--orange); }
.jauge.atteinte .jauge-piste { background: var(--vert-fond); }
.jauge.atteinte .jauge-remplie { background: var(--vert); }
.jauge-note { font-size: 12.5px; color: var(--texte-3); margin-top: 5px; }
.jauge.atteinte .jauge-note { color: var(--vert-texte); }

.zones-depot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.zone-depot {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px;
  border: 1.5px dashed var(--bordure-forte); background: var(--surface-2); cursor: pointer; color: var(--texte-2);
}
.zone-depot:hover, .zone-depot.survol { border-color: var(--principal); background: var(--principal-clair); color: var(--principal); }
/* Champ de fichier masqué mais accessible au clavier. Sélecteur aussi
   précis que la règle générale des champs (plus haut), qui l'étirait sinon
   à toute la largeur de la fenêtre et faisait déborder la page. */
.zone-depot input[type=file] {
  position: absolute; left: 0; top: 0; width: 1px; height: 1px; min-height: 0;
  padding: 0; margin: 0; border: 0; opacity: 0; overflow: hidden; pointer-events: none;
}
.zone-depot svg { font-size: 26px; }
.zone-depot strong { display: block; color: var(--texte); }
.zone-depot small { font-size: 12.5px; }
.zone-depot:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Zone de dépôt des photos de l'annonce (medias.js) : mise en avant. */
.zone-depot.annonce { border-color: var(--vert); background: var(--vert-fond); }
.zone-depot.annonce:hover, .zone-depot.annonce.survol { border-color: var(--principal); background: var(--principal-clair); }

.envois { display: grid; gap: 8px; }
.envoi { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; font-size: 13.5px; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--bordure); }
.envoi-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.envoi-etat { color: var(--texte-3); font-variant-numeric: tabular-nums; }
.envoi-piste { grid-column: 1 / -1; height: 5px; border-radius: 999px; background: var(--principal-clair); overflow: hidden; }
.envoi-remplie { height: 100%; width: 0; background: var(--principal); transition: width 0.2s; }
.envoi.echec { background: var(--danger-fond); border-color: var(--danger); }
.envoi.echec .envoi-etat { color: var(--danger-fonce); grid-column: 1 / -1; }
.envoi.fini .envoi-remplie { background: var(--vert); }

.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.media { position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: var(--image-fond); }
/* Empilement : icône d'attente, image par-dessus, puis le bouton
   transparent qui reçoit le clic, puis les actions. */
.media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 0.25s; }
.media img.chargee { opacity: 1; }
.media .vignette-icone { font-size: 38px; pointer-events: none; }
.media > button.media-ouvrir {
  position: absolute; inset: 0; z-index: 1; border: 0; padding: 0; background: none; cursor: zoom-in; border-radius: inherit;
}
.media > button.media-ouvrir:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.media-lecture {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 42px; height: 42px;
  border-radius: 50%; background: var(--voile); color: #fff; display: grid; place-items: center; pointer-events: none;
}
.media-lecture svg { fill: currentColor; stroke: none; }
.media-principale {
  position: absolute; top: 7px; left: 7px; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; background: var(--voile); color: #fff; pointer-events: none;
}
.media-actions { position: absolute; right: 6px; bottom: 6px; z-index: 2; display: flex; gap: 4px; }
/* Posés sur une photo : un filet ardoise clair remplace l'ombre portée, et
   tient sur une image claire comme sombre. */
.media-actions button {
  width: 32px; height: 32px; border-radius: var(--rayon-petit); border: 1px solid var(--bordure-forte);
  display: grid; place-items: center; cursor: pointer;
  background: rgb(255 255 255 / 92%); color: var(--texte); box-shadow: var(--ombre);
}
.media-actions button:hover { background: #fff; color: var(--principal); }
.media-actions button.supprimer:hover { color: var(--danger); }
@media (hover: hover) {
  .media-actions { opacity: 0; transition: opacity 0.15s; }
  .media:hover .media-actions, .media:focus-within .media-actions { opacity: 1; }
}

.visionneuse {
  width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--voile-fort); color: #fff;
}
.visionneuse::backdrop { background: var(--voile-leger); }
.visionneuse-cadre { position: absolute; inset: 56px 64px; display: grid; place-items: center; }
.visionneuse-cadre img, .visionneuse-cadre video { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
.visionneuse-haut { position: absolute; top: 0; left: 0; right: 0; height: 56px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 20px; font-size: 14px; }
.visionneuse-haut .outils { display: flex; gap: 4px; }
.visionneuse .icone-bouton { color: #fff; width: 44px; height: 44px; font-size: 22px; }
.visionneuse .icone-bouton:hover { background: rgb(255 255 255 / 12%); }
.visionneuse .icone-bouton:focus-visible { outline-color: var(--focus-clair); }
.visionneuse .precedent, .visionneuse .suivant { position: absolute; top: 50%; transform: translateY(-50%); }
.visionneuse .precedent { left: 10px; }
.visionneuse .suivant { right: 10px; }

/* ---------- Boîtes de dialogue ---------- */
.dialogue {
  width: min(600px, calc(100vw - 24px)); max-height: calc(100vh - 32px); padding: 0;
  border: 1px solid var(--bordure); border-radius: var(--rayon); box-shadow: var(--ombre); color: var(--texte);
}
.dialogue.large { width: min(780px, calc(100vw - 24px)); }
.dialogue.etroit { width: min(440px, calc(100vw - 24px)); }
.dialogue::backdrop { background: var(--voile-leger); }
.dialogue-formulaire { display: flex; flex-direction: column; max-height: calc(100vh - 32px); }
.dialogue-entete { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 16px 0 22px; }
.dialogue-corps { padding: 16px 22px; overflow-y: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.dialogue-formulaire > .message { margin: 0 22px 12px; }
/* Passe à la ligne quand les libellés sont longs (« Enregistrer comme nouvel achat ») au lieu de déborder. */
.dialogue-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 14px 22px 18px; border-top: 1px solid var(--bordure); }
.texte-confirmation { font-size: 15px; color: var(--texte-2); }
.dialogue .bloc-conversion { margin-top: 0; }

.ajout-en-ligne { display: flex; gap: 8px; }
.ajout-en-ligne input { flex: 1; }

/* ---------- Notification ---------- */
.notification {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 90;
  max-width: min(560px, calc(100vw - 24px)); padding: 11px 16px; border-radius: var(--rayon);
  background: var(--ardoise); color: #fff; font-size: 14.5px; box-shadow: var(--ombre);
}
.notification.erreur { background: var(--danger-plein); }

/* ---------- Tableau de bord ---------- */
.section-tableau { margin-bottom: 26px; }
.titre-section { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.titre-section h2 { font-size: 18px; }

.tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.tuile {
  display: grid; gap: 4px; padding: 14px 16px; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); box-shadow: var(--ombre);
  border-top: 3px solid var(--gris);
}
/* Le survol ne renforce que les trois côtés neutres : le liseré haut porte le
   statut de la tuile, la notation abrégée `border-color` l'effacerait. */
a.tuile:hover { border-right-color: var(--bordure-forte); border-bottom-color: var(--bordure-forte); border-left-color: var(--bordure-forte); }
.tuile.bleu { border-top-color: var(--bleu); }
.tuile.orange { border-top-color: var(--orange); }
.tuile.vert { border-top-color: var(--vert); }
.tuile.neutre { border-top-color: var(--principal); }
.tuile-libelle { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texte-2); }
.tuile-valeur { font-family: var(--police-titres); font-size: 30px; font-weight: 700; line-height: 1.15; }
.tuile-detail { font-size: 13px; color: var(--texte-3); }

.filtre-periode { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.filtre-periode label { font-weight: 600; color: var(--texte-2); font-size: 14px; }
.filtre-periode select { width: auto; }
.filtre-periode input[type=date] { width: auto; }
.en-rechargement { opacity: 0.5; transition: opacity 0.15s; pointer-events: none; }

.bloc-periode { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.hero-libelle { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texte-2); }
/* Interlettrage neutre : l'espace fine insécable des montants (« 793 751 FCFA »)
   se referme sous un interlettrage négatif, et le nombre se lit collé. */
.hero-valeur { font-family: var(--police-titres); font-size: 48px; font-weight: 700; line-height: 1.1; margin: 4px 0 2px; }
.hero-valeur.perte { color: var(--danger-fonce); }
.hero-note { font-size: 13.5px; color: var(--texte-3); }
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--bordure); }
.stats dt { font-size: 12.5px; color: var(--texte-3); }
.stats dd { margin: 2px 0 0; font-family: var(--police-titres); font-size: 18px; font-weight: 650; }

/* Barres horizontales : une seule série, fines, arrondies côté valeur,
   carrées côté ligne de base. Le montant se lit au bout de la barre. */
.barres { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.barre-groupe { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texte-3); margin: 10px 0 2px; }
.barre-groupe:first-child { margin-top: 0; }
.barre-ligne {
  display: grid; grid-template-columns: minmax(96px, 32%) minmax(0, 1fr); align-items: center; gap: 12px;
  padding: 5px 6px; border-radius: 8px; position: relative; outline: none;
}
.barre-ligne:hover, .barre-ligne:focus-visible { background: var(--surface-2); }
.barre-ligne:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.barre-nom { font-size: 14px; color: var(--texte-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barre-zone { display: flex; align-items: center; gap: 8px; min-width: 0; border-left: 1px solid var(--grille); }
.barre-remplie { height: 12px; min-width: 2px; border-radius: 0 4px 4px 0; background: var(--serie-1); }
.barre-ligne:hover .barre-remplie, .barre-ligne:focus-visible .barre-remplie { background: var(--serie-1-survol); }
.barre-valeur { font-size: 13.5px; color: var(--texte); font-variant-numeric: tabular-nums; white-space: nowrap; }
.info-bulle {
  position: fixed; z-index: 80; pointer-events: none; padding: 8px 10px; border-radius: var(--rayon-petit);
  background: var(--ardoise); color: #fff; font-size: 13px; box-shadow: var(--ombre); max-width: 260px;
}
.info-bulle strong { display: block; font-family: var(--police-titres); font-size: 15px; }
.info-bulle span { color: rgb(255 255 255 / 75%); }

.liste-simple { list-style: none; margin: 0; padding: 0; }
.liste-simple li + li { border-top: 1px solid var(--bordure); }
.liste-simple a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 2px; text-decoration: none; color: inherit; }
.liste-simple a:hover .liste-titre { color: var(--principal); }
.liste-titre { font-weight: 600; }
.liste-note { font-size: 13px; color: var(--orange-texte); }

/* ---------- Réglages ---------- */
.reglages-grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.liste-elements { list-style: none; margin: 0; padding: 0; }
.element { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--bordure); }
.element:last-child { border-bottom: 0; }
.element-texte { flex: 1; min-width: 0; }
.element-nom { font-weight: 600; }
.element-note { font-size: 12.5px; color: var(--texte-3); overflow-wrap: anywhere; }
.element.inactif .element-nom { color: var(--texte-3); text-decoration: line-through; }
.element-actions { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.formulaire-ajout { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.formulaire-ajout input { flex: 1 1 180px; }
.formulaire-ajout .message { flex-basis: 100%; }

/* ---------- Coque : parc affiché, navigation, bandeau ---------- */
.barre-laterale { overflow-y: auto; }
.marque-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.logo.avec-image { background: #fff; padding: 3px; overflow: hidden; }
.logo.avec-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.compte-role { font-size: 12.5px; color: rgb(255 255 255 / 60%); }

.choix-parc { display: grid; gap: 5px; padding: 0 8px; font-size: 12px; font-weight: 600; color: rgb(255 255 255 / 62%); }
.choix-parc select, .entete-mobile .choix-parc-mobile {
  min-height: 36px; padding: 6px 10px; font-size: 14px;
  background-color: rgb(255 255 255 / 10%); color: #fff; border-color: rgb(255 255 255 / 24%);
}
.choix-parc select:focus, .entete-mobile .choix-parc-mobile:focus { outline-color: var(--focus-clair); border-color: #fff; }
.choix-parc option, .choix-parc-mobile option { color: var(--texte); background: #fff; }

.navigation a svg { flex-shrink: 0; }
.nav-court { display: none; }
.navigation .nav-plus { display: none; }

.bandeau { margin: -28px -32px 22px; padding: 10px 32px; font-size: 14px; border-bottom: 1px solid transparent; }
.bandeau.info { background: var(--bleu-fond); color: var(--bleu-texte); border-bottom-color: var(--acier); }
.bandeau.alerte { background: var(--danger-fond); color: var(--danger-fonce); border-bottom-color: var(--danger); }
.bandeau .lien { color: inherit; margin-left: 4px; }
/* Messages cumulés (abonnement, stock initial) : une ligne chacun. */
.bandeau p + p { margin-top: 5px; }

.menu-mobile { display: grid; gap: 2px; }
.menu-mobile a, .menu-mobile button {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px; border: 0; border-radius: 10px;
  background: none; color: var(--texte); font-size: 15px; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer;
}
.menu-mobile a:hover, .menu-mobile button:hover { background: var(--surface-2); }
.menu-mobile svg { font-size: 20px; color: var(--texte-2); }

/* Cartes posées l'une après l'autre dans une page, sans conteneur. */
.page > .carte + .carte, .page > .carte + .message, .page > .message + .carte,
.page > .carte + .aide, .page > .liste-membres + .aide { margin-top: 16px; }

/* ---------- Petits éléments communs ---------- */
.actions-gauche { justify-content: flex-start; }
.centre { text-align: center; }
.badge.rouge { background: var(--danger-fond); color: var(--danger-fonce); }
.rouge .pastille { background: var(--danger); }
.tuile.rouge { border-top-color: var(--danger); }
.unite-tuile { font-size: 14px; font-weight: 600; color: var(--texte-3); }
.stats-serrees { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin: 0 0 12px; padding-top: 0; border-top: 0; }
.section-par-parc { margin-top: 16px; }
.filtre-periode .filtre-dates { margin-bottom: 0; }
.chargeur.petit { width: 20px; height: 20px; border-width: 2.5px; flex-shrink: 0; }
.decomposition dd.gain { color: var(--vert-texte); }
.decomposition dd.perte, td.perte { color: var(--danger-fonce); }
/* Même aplat vert que les autres boutons d'accord : texte blanc à 5,86:1. */
.bouton.whatsapp { background: var(--succes-plein); border-color: var(--succes-plein); color: #fff; }
.bouton.whatsapp:hover { background: var(--succes-plein-survol); border-color: var(--succes-plein-survol); }
.intertitre { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texte-3); margin: 14px 0 2px; }
.carte-section > h2 + .intertitre { margin-top: 0; }
.lien-ligne { font-weight: 650; color: var(--texte); text-decoration: none; }
.lien-ligne:hover { color: var(--principal); text-decoration: underline; }
table.tableau-cliquable tbody tr, tr.tableau-cliquable { cursor: pointer; }
table.tableau-cliquable tbody tr:hover td, tr.tableau-cliquable:hover td { background: var(--surface-2); }

/* ---------- Connexion, inscription ---------- */
.separateur-connexion { display: flex; align-items: center; gap: 10px; margin-top: 6px; color: var(--texte-3); font-size: 13px; }
.separateur-connexion::before, .separateur-connexion::after { content: ""; flex: 1; height: 1px; background: var(--bordure); }
.actions-refus { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.ecran-inscription { place-items: start center; }
.carte-inscription { max-width: 760px; }
.formulaire-inscription { display: grid; gap: 18px; }
.formulaire-inscription .actions-formulaire { margin-top: 0; }
.entete-inscription { display: flex; align-items: center; gap: 14px; }
.entete-inscription h1 { font-size: 22px; }
.section-inscription { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid var(--bordure); }
.section-inscription h2 { font-size: 16px; }
.choix-logo { display: flex; align-items: center; gap: 12px; }
.choix-logo input[type=file] { flex: 1; min-width: 0; min-height: 0; padding: 7px; }
.apercu-logo {
  display: grid; place-items: center; flex-shrink: 0; width: 56px; height: 56px; overflow: hidden;
  border: 1px dashed var(--bordure-forte); border-radius: 12px; background: var(--surface-2); color: var(--texte-3); font-size: 24px;
}
.apercu-logo img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.apercu-logo.grand { width: 88px; height: 88px; font-size: 32px; }

/* ---------- Réglages : logo ---------- */
.bloc-logo { display: flex; align-items: center; gap: 16px; padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--bordure); }
.bloc-logo-texte { display: grid; gap: 6px; min-width: 0; }
.bouton-fichier { position: relative; overflow: hidden; }
.bouton-fichier input[type=file] {
  position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer;
}
.bouton-fichier:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- Parcs ---------- */
.situation-parcs { margin-bottom: 16px; }
.situation-parcs .message { margin: 4px 0 10px; }
.grille-parcs, .grille-bureaux, .grille-partenaires { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.carte-parc, .carte-bureau, .carte-partenaire { display: grid; gap: 12px; align-content: start; padding: 16px 18px; }
.carte-parc > header, .carte-bureau > header, .carte-partenaire > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.carte-parc h2, .carte-bureau h2, .carte-partenaire h2 { font-size: 16px; }
.carte-parc .aide, .carte-bureau .aide, .carte-partenaire .aide { font-size: 13px; overflow-wrap: anywhere; }
.carte-parc .element-actions, .carte-bureau .element-actions, .carte-partenaire .element-actions { justify-content: flex-start; }
.carte-parc.inactif, .carte-bureau.inactif, .carte-partenaire.inactif { background: var(--surface-2); }
.carte-parc.inactif h2, .carte-bureau.inactif h2, .carte-partenaire.inactif h2 { color: var(--texte-2); }

/* ---------- Bureaux et partenaires ---------- */
.solde-bureau { display: grid; gap: 2px; margin: 0; }
.entete-page .solde-bureau { margin-top: 10px; }
.solde-bureau-montant { font-family: var(--police-titres); font-size: 22px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.solde-bureau-montant.perte { color: var(--danger-fonce); }
/* Les deux comptes d'un bureau, sous son solde total. */
.soldes-comptes { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 4px; font-size: 13px; color: var(--texte-2); }
.soldes-comptes strong { font-variant-numeric: tabular-nums; color: var(--texte); }
.soldes-comptes strong.perte { color: var(--danger-fonce); }
.tuiles-trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tuiles-deux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tuiles + .tableau-bureaux { margin-top: 12px; }
tr.ligne-report td { background: var(--surface-2); }

/* ---------- Équipe ---------- */
.liste-membres { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.carte-membre { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 16px; padding: 14px 16px; }
.carte-membre .element-actions { grid-column: 1 / -1; justify-content: flex-start; }
.carte-membre.inactif { background: var(--surface-2); }
.carte-membre.inactif .membre-nom { color: var(--texte-3); }
.membre-identite { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.membre-identite > div { min-width: 0; }
.membre-identite .aide { font-size: 13.5px; overflow-wrap: anywhere; }
.membre-initiale, .avatar-societe {
  display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; overflow: hidden;
  border-radius: 50%; background: var(--principal-clair); color: var(--principal); font-size: 16px; font-weight: 700;
}
.membre-nom { font-weight: 650; }
.membre-etat { justify-self: end; }
.cases-parcs {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 14px; max-height: 240px; overflow-y: auto;
  padding: 10px 12px; border: 1px solid var(--bordure); border-radius: 10px;
}
.identifiants {
  margin: 0; padding: 12px 14px; border: 1px solid var(--bordure); border-radius: 10px; background: var(--surface-2);
  font-family: var(--police-code); font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere; user-select: all;
}

/* ---------- Abonnement et paiement ---------- */
.etat-abonnement { border-top: 3px solid var(--gris); }
.etat-abonnement.bleu { border-top-color: var(--bleu); }
.etat-abonnement.vert { border-top-color: var(--vert); }
.etat-abonnement.orange { border-top-color: var(--orange); }
.etat-abonnement.rouge { border-top-color: var(--danger); }
.etat-abonnement .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.etat-abonnement > .aide-champ { margin-top: 12px; }
.etat-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.etat-ligne p { font-size: 15px; }
.durees { display: grid; gap: 10px; margin-top: 12px; }
.duree {
  display: grid; gap: 2px; padding: 14px 12px; text-align: left; cursor: pointer;
  border: 1.5px solid var(--bordure-forte); border-radius: 12px; background: var(--surface);
}
.duree:hover { border-color: var(--principal); background: var(--principal-clair); }
.duree:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--focus); }
.duree-mois { font-size: 15px; font-weight: 700; }
.duree-montant { font-family: var(--police-titres); font-size: 18px; font-weight: 750; color: var(--principal); font-variant-numeric: tabular-nums; }
.duree-detail { font-size: 12.5px; color: var(--texte-3); }
.ligne-tentative { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 2px; font-size: 14px; }

.suivi-paiement { display: grid; justify-items: center; gap: 12px; padding: 8px 0; text-align: center; }
.suivi-paiement .message { text-align: left; }
/* Sous la fenêtre KkiaPay (qui passe devant tant qu'elle est ouverte), au-dessus de la page. */
.panneau-paiement {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 85;
  display: flex; align-items: center; gap: 12px; width: max-content; max-width: min(560px, calc(100vw - 24px));
  padding: 10px 14px; border-radius: var(--rayon); background: var(--ardoise); color: #fff; font-size: 14px; box-shadow: var(--ombre);
}
.panneau-paiement p { flex: 1; min-width: 0; }
.panneau-paiement .lien { color: rgb(255 255 255 / 85%); flex-shrink: 0; }
/* Sur l'aplat sombre du panneau, et sur ses variantes verte et rouge, le
   repère de focus passe au blanc : l'anneau ardoise y serait invisible
   (blanc à 15,93:1 sur l'ardoise, 5,86:1 sur le vert, 5,76:1 sur le rouge). */
.panneau-paiement .lien:focus-visible { outline-color: var(--focus-clair); }
.panneau-paiement .chargeur { border-color: rgb(255 255 255 / 25%); border-top-color: #fff; }
.panneau-paiement.succes { background: var(--succes-plein); }
.panneau-paiement.erreur { background: var(--danger-plein); }

/* ---------- Partage ---------- */
.bloc-partage-photos { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--bordure); border-radius: 12px; background: var(--surface-2); }
.bloc-partage-photos .bouton { justify-self: start; }

/* ---------- Vente et factures ---------- */
.bloc-formulaire { min-width: 0; margin: 0; padding: 12px 16px 16px; border: 1px solid var(--bordure); border-radius: 12px; }
.bloc-formulaire > legend { padding: 0 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texte-2); }
.recap-facture { padding: 2px 14px; border: 1px solid var(--bordure); border-radius: 12px; background: var(--surface-2); }
.recap-facture > .aide { padding: 10px 0; }
.recap-facture .decomposition > div:last-child { border-bottom: 0; }
.actions-facture { display: flex; flex-wrap: wrap; gap: 8px; }
.barre-actions-facture { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 10px; margin-bottom: 16px; }
.barre-actions-facture > .aide-champ { order: 3; flex-basis: 100%; }
.actions-secondaires { display: flex; flex-wrap: wrap; gap: 8px; }
.page-facture { max-width: 880px; margin: 0 auto; }
.page-facture > .message { margin-bottom: 14px; }
.apercu-facture { overflow-x: auto; }
.dialogue .apercu-facture .facture { padding: 26px 24px; }

.totaux-registre { display: grid; gap: 10px; margin: 0 0 14px; }
.totaux-registre > div { padding: 10px 14px; border: 1px solid var(--bordure); border-radius: 10px; background: var(--surface); }
.totaux-registre dt { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texte-3); }
.totaux-registre dd { margin: 2px 0 0; font-family: var(--police-titres); font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ligne-annulee td { color: var(--texte-3); }
.ligne-annulee td strong { text-decoration: line-through; }

/* La facture elle-même : un document, lisible à l'écran comme imprimé. */
.facture {
  position: relative; overflow: hidden; max-width: 820px; margin: 0 auto; padding: 40px 44px;
  background: #fff; color: var(--ardoise); border: 1px solid var(--bordure); border-radius: 6px; font-size: 14px; line-height: 1.5;
}
.facture p { margin: 0; }
.facture-entete { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px 28px; padding-bottom: 20px; border-bottom: 2px solid var(--principal); }
.facture-vendeur { display: flex; align-items: flex-start; gap: 14px; font-size: 13px; color: var(--texte-2); min-width: 0; }
.facture-logo { width: 84px; height: 84px; object-fit: contain; flex-shrink: 0; }
.facture-societe { font-family: var(--police-titres); font-size: 18px; font-weight: 700; color: var(--ardoise); }
.facture-titre { text-align: right; font-size: 13px; color: var(--texte-2); }
.facture-titre h1 { font-size: 21px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--principal); }
.facture-numero { margin: 4px 0 !important; font-family: var(--police-titres); font-size: 16px; font-weight: 700; color: var(--ardoise); }
.facture-client { max-width: 360px; margin: 22px 0 22px auto; padding: 12px 16px; border: 1px solid var(--bordure); border-radius: var(--rayon-petit); font-size: 13.5px; }
.facture-client h2 { margin-bottom: 4px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texte-3); }
.facture-client-nom { font-size: 16px; font-weight: 700; }
.facture-lignes th { background: var(--surface-2); color: var(--texte-2); }
.facture-lignes td { border-bottom: 1px solid var(--bordure); }
.facture-bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 28px; margin-top: 18px; }
.facture-infos { flex: 1 1 260px; display: grid; gap: 6px; align-content: start; font-size: 13.5px; }
.facture-lettres { margin-top: 4px !important; }
.facture-totaux { flex: 0 1 300px; min-width: 240px; margin: 0; }
/* Un total ne se coupe pas et ne se replie pas : passé huit chiffres il ne
   tenait plus à côté de son libellé dans l'aperçu du reçu sous 375 px, et
   .facture, qui coupe ce qui dépasse (overflow: hidden), en retirait la fin.
   Il descend donc sous son libellé, en gardant son bord droit. Le `flex: 1 1 0`
   du libellé retarde ce repli au dernier moment : le libellé se resserre
   d'abord, et la ligne ne se rompt que si le montant seul ne tient plus. Son
   `max-width` lui rend sa largeur naturelle dès qu'il a la place : sur une
   page A4 la ligne ne rompt jamais, et la feuille imprimée ne bouge pas. */
.facture-totaux > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding: 6px 0; border-bottom: 1px solid var(--bordure); }
.facture-totaux dt { flex: 1 1 0; max-width: max-content; color: var(--texte-2); }
.facture-totaux dd { margin: 0 0 0 auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.facture-totaux .total { margin-top: 2px; padding-top: 8px; border-top: 2px solid var(--ardoise); border-bottom: 0; }
.facture-totaux .total dt, .facture-totaux .total dd { font-family: var(--police-titres); font-size: 17px; font-weight: 800; color: var(--ardoise); }
.facture-totaux .facture-sans-tva { border-bottom: 0; }
.facture-sans-tva dt { font-size: 12.5px; font-style: italic; }
.facture-annulation { margin-top: 16px !important; font-weight: 700; color: var(--danger-fonce); }
.facture-pied { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; margin-top: 34px; }
.facture-mentions { flex: 1 1 300px; font-size: 12px; color: var(--texte-2); white-space: pre-line; }
.facture-signature { margin-left: auto !important; min-width: 200px; padding-bottom: 58px; border-bottom: 1px solid var(--bordure-forte); text-align: center; font-size: 13px; color: var(--texte-2); }
/* Facture de vente : les versements d'une vente en plusieurs fois, en pleine
   largeur sous le tableau. La liste peut être longue : elle passe d'une page
   à l'autre entre deux lignes, jamais au milieu d'une ligne. */
.facture-versements { margin-top: 18px; font-size: 13.5px; }
.facture-versements li { break-inside: avoid; }
/* Bas de la facture de vente (mode de paiement, note, montant en lettres,
   totaux, annulation, mentions, signatures) : un seul bloc à l'impression.
   Le client signe sous le montant ; sans cela, la zone de signature peut
   partir seule en haut de la page suivante. La note est limitée à 500
   caractères, les mentions à 500 caractères ET 12 lignes : c'est la limite de
   lignes qui garantit que le bloc tient sur une page, car 500 caractères en
   lignes courtes (36 lignes) le rendaient plus haut qu'une page A4, et
   break-inside ne tient plus au-delà. La liste des versements reste
   hors du bloc : incluse, elle le rendait plus haut qu'une page. */
.facture-fin { break-inside: avoid; page-break-inside: avoid; }
.facture-signatures {
  flex: 1 1 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
  gap: 20px 40px; break-inside: avoid;
}
.facture-signatures .facture-signature { flex: 0 1 240px; }
/* .facture-signature pousse sa ligne à droite (margin-left: auto) : celle du
   vendeur y reste, celle du client revient à gauche. */
.facture-signatures .facture-signature-client { margin-left: 0 !important; }
/* Filigrane « ANNULÉE » : la teinte de refus, posée à faible opacité pour
   rester derrière le texte, à l'écran comme à l'impression. */
.facture-filigrane {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  font-size: 110px; font-weight: 900; letter-spacing: 0.08em; color: var(--danger); opacity: 0.14; transform: rotate(-24deg);
}
#zone-impression { display: none; }

/* ---------- Facture normalisée e-MECeF : le document ----------
   Légende du groupe (taux relevés auprès de la DGI, figés avec la pièce) et
   bloc « Code MECeF / DGI » : dans .facture-fin, le bas insécable de la
   facture, pour qu'aucun ne parte seul sur une autre page. Le QR a sa taille
   écrite À L'APPEL (qr.js, 88 px) : une règle de feuille ne la reprendrait
   pas, @media print compris. Absents pour une société qui ne normalise pas. */
.facture-legende { margin-top: 10px !important; font-size: 12px; color: var(--texte-2); }
.facture-mecef {
  margin-top: 14px; padding: 10px 12px; border: 1px solid var(--bordure-forte); border-radius: var(--rayon-petit);
  font-size: 12.5px; break-inside: avoid; page-break-inside: avoid;
}
/* « SIMULATION e-MECeF — sans valeur fiscale » : en toutes lettres, lisible aussi en noir et blanc. */
.mecef-mention { margin-bottom: 6px !important; font-weight: 800; letter-spacing: 0.04em; color: var(--danger-fonce); }
.mecef-corps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.mecef-qr { flex-shrink: 0; line-height: 0; }
.mecef-textes { display: grid; gap: 2px; min-width: 0; flex: 1 1 220px; }
.mecef-titre { font-weight: 700; }
.mecef-code { font-family: var(--police-code); font-size: 14px; font-weight: 800; letter-spacing: 0.02em; overflow-wrap: anywhere; }
.mecef-attente { font-weight: 600; }
.mecef-sans-qr { color: var(--texte-3); font-style: italic; }
/* Facture d'avoir : la « Réf. MECeF d'origine » (29 caractères sans espace)
   se replie sous son libellé au lieu de pousser le titre sous le vendeur. */
.facture.avoir .facture-titre { flex: 0 1 280px; min-width: 200px; }
.mecef-reference { white-space: nowrap; }

/* ---------- Facture normalisée e-MECeF : les écrans ---------- */
.section-mecef { margin-bottom: 16px; display: grid; gap: 10px; }
.section-mecef > header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.section-mecef .actions-formulaire { margin-top: 0; }
.mecef-avoir { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--bordure); }
.mecef-avoir > p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; }
.mecef-avoir .bouton { justify-self: start; }
.bloc-normaliser { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--bordure); border-radius: 10px; background: var(--surface-2); }
.choix-mecef { grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }
.choix-carte input:disabled + span { opacity: 0.5; cursor: not-allowed; }
.section-reglages-mecef .details { margin-top: 12px; }
/* Alertes de la carte (simulation, jeton refusé…) : détachées du formulaire qui suit. */
.section-reglages-mecef > .message { margin-bottom: 12px; }
.totaux-note { margin: -4px 0 12px; }
.section-avoirs { margin-top: 16px; }
/* Supervision de la plateforme : sur téléphone, le tableau défile dans son
   cadre au lieu d'écraser ses colonnes mot par mot. */
.tableau-supervision-mecef { min-width: 640px; }
/* Plateforme › VIN et châssis : même parti (les VIN de 17 caractères ne se
   coupent pas) ; chaque identifiant en double titre son tableau. */
.tableau-identifiants { min-width: 760px; }
.tableau-identifiants .police-code { white-space: nowrap; }
/* Le champ garde la place d'un VIN entier : sur téléphone, le bouton passe
   dessous plutôt que de le réduire à quelques caractères. */
.recherche-identifiant .champ-avec-bouton { flex-wrap: wrap; }
.recherche-identifiant input { flex: 1 1 240px; min-width: 0; }
.resultat-identifiant { margin: 14px 0 8px; }
.doublon-identifiant { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 16px 0 6px; font-size: 15px; overflow-wrap: anywhere; }
.doublon-identifiant:first-of-type { margin-top: 0; }
.section-avoirs > header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
/* « Trace sur facture » : tentative par tentative, les erreurs surlignées. */
.trace-piece { display: grid; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--bordure); }
.trace-piece h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 15px; }
.trace-tentative h4 { margin: 6px 0 4px; font-size: 13px; color: var(--texte-2); }
.trace-lignes { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 12.5px; }
.trace-ligne { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 10px; padding: 4px 8px; border-left: 3px solid var(--bordure); }
.trace-ligne.alerte { border-left-color: var(--ambre); background: var(--ambre-fond); }
.trace-ligne.erreur { border-left-color: var(--danger); background: var(--danger-fond); }
.trace-heure { font-family: var(--police-code); color: var(--texte-3); white-space: nowrap; }
.trace-etape { font-weight: 600; overflow-wrap: anywhere; }
.trace-detail { grid-column: 2; white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--police-code); font-size: 12px; color: var(--texte-2); }
.trace-demande > summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--principal); }
.trace-demande pre {
  max-height: 260px; overflow: auto; margin: 6px 0 0; padding: 8px; border-radius: 8px; background: var(--surface-2);
  font-family: var(--police-code); font-size: 12px; white-space: pre-wrap; overflow-wrap: anywhere;
}
@media (max-width: 520px) {
  .trace-ligne { grid-template-columns: minmax(0, 1fr); }
  .trace-detail { grid-column: 1; }
}

/* ---------- Rapports imprimés (statistiques) ---------- */
/* Rapport imprimé : encre ardoise, filets fins, aucun aplat lourd — il doit
   rester lisible en noir et blanc (l'ardoise passe à 15,9:1 en gris). */
.rapport { font-size: 10.5px; color: var(--ardoise); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.rapport-entete { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding-bottom: 6px; margin-bottom: 10px; border-bottom: 2px solid var(--ardoise); }
.rapport-societe { font-family: var(--police-titres); font-size: 16px; font-weight: 700; }
.rapport-titre { font-size: 13px; font-weight: 700; }
.rapport-sous-titre, .rapport-edition { color: var(--texte-3); }
.rapport-bloc { margin-bottom: 12px; }
.rapport-bloc > h2 { margin: 0 0 5px; font-size: 12px; break-after: avoid; }
.rapport-chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.rapport-chiffres > div { padding: 5px 7px; border: 1px solid var(--bordure); border-radius: 4px; break-inside: avoid; }
.rapport-chiffres span { display: block; color: var(--texte-3); font-size: 9.5px; }
.rapport-chiffres strong { display: block; font-family: var(--police-titres); font-size: 13px; font-variant-numeric: tabular-nums; }
.rapport-chiffres small { display: block; color: var(--texte-3); font-size: 9px; }
.rapport-tableau { width: 100%; border-collapse: collapse; font-size: 9.5px; }
.rapport-tableau thead { display: table-header-group; }
.rapport-tableau tr { break-inside: avoid; }
.rapport-tableau th {
  padding: 4px 5px; background: var(--surface-2); border-bottom: 1px solid var(--bordure-forte);
  color: var(--ardoise); font-size: 9.5px; font-weight: 700; letter-spacing: normal; text-transform: none; text-align: left; white-space: normal;
}
.rapport-tableau strong, .rapport-tableau tfoot td { font-weight: 700; }
.rapport > .rapport-note { margin: 0 0 10px; }
.rapport-tableau td { padding: 3px 5px; border-bottom: 1px solid var(--bordure); vertical-align: top; }
.rapport-tableau .droite { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rapport-tableau tfoot td { border-top: 1.5px solid var(--ardoise); border-bottom: 0; }
.rapport-tableau small { display: block; color: var(--texte-3); font-size: 8.5px; white-space: normal; }
.rapport .negatif { color: var(--danger-fonce); }
.rapport-note { margin: 4px 0 0; color: var(--texte-3); font-size: 9px; }
.rapport-avertissement { margin: 0 0 5px; color: var(--danger-fonce); font-size: 9px; font-weight: 600; }
.actions-rapport { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.page-publique { background: var(--fond); }
.facture-publique { max-width: 880px; margin: 0 auto; padding: 24px 16px 40px; }
.facture-publique .facture { box-shadow: var(--ombre); }
.barre-publique { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.pied-publique { margin-top: 18px; text-align: center; font-size: 12.5px; color: var(--texte-3); }

/* ---------- Plateforme ---------- */
.grille-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.petit-total { margin: 2px 0 10px; font-family: var(--police-titres); font-size: 28px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.graphique { display: grid; gap: 6px; }
.graphique-echelle { font-size: 12px; color: var(--texte-3); }
/* Colonnes fines d'une seule série : 2 px d'écart, bout arrondi, base carrée. */
.colonnes { display: flex; align-items: stretch; gap: 2px; height: 128px; border-top: 1px dashed var(--grille); border-bottom: 1px solid var(--bordure-forte); }
.colonne { display: flex; flex: 1 1 0; align-items: flex-end; justify-content: center; min-width: 0; border-radius: 4px 4px 0 0; }
.colonne:hover { background: var(--surface-2); }
.colonne-remplie { width: 100%; max-width: 22px; border-radius: 4px 4px 0 0; background: var(--serie-1); }
.colonne:hover .colonne-remplie { background: var(--serie-1-survol); }
.colonnes-axe { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--texte-3); }
.details-tableau { margin-top: 12px; }
.details-tableau > summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--principal); }
.details-tableau[open] > summary { margin-bottom: 8px; }
.details-tableau .tableau-enveloppe { max-height: 360px; overflow: auto; border: 1px solid var(--bordure); border-radius: 10px; background: var(--surface); }
.ligne-societe { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
/* Date d'inscription et badge d'abonnement : le badge ne se replie pas
   (.badge), et « Essai gratuit » (123 px) poussait le document à 352 px pour
   une fenêtre de 320. Il passe sous la date, dans sa colonne, plutôt que
   dehors. `:has` : les autres .ligne-societe (logo et nom) ne sont pas
   concernées — le nom s'y replie très bien à côté du logo. */
.ligne-societe:has(> .badge) { flex-wrap: wrap; justify-content: flex-end; }
.avatar-societe { width: 36px; height: 36px; border-radius: 10px; font-size: 15px; }
.avatar-societe img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.ligne-societe.grande .avatar-societe { width: 56px; height: 56px; border-radius: 14px; font-size: 22px; }
.notes-point { display: grid; gap: 4px; margin: 12px 0 0; padding-left: 18px; font-size: 13px; color: var(--texte-2); }
.pile-formulaire { display: grid; gap: 16px; }
.pile-formulaire .actions-formulaire { margin-top: 0; }
.bloc-agregateur { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 12px 14px 14px; border: 1px solid var(--bordure); border-radius: 12px; }
.bloc-agregateur > legend { padding: 0 6px; font-size: 14px; font-weight: 700; }
.section-parametres { margin-top: 16px; }

/* ---------- Droits des employés ---------- */
.droits-groupes {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px 22px; margin-top: 8px;
  padding: 12px 14px; border: 1px solid var(--bordure); border-radius: 10px;
}
.droits-groupe { display: grid; gap: 8px; align-content: start; }
.droits-titre { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texte-3); }
.droits-groupe .case { align-items: flex-start; }
.droits-groupe .case input { flex-shrink: 0; margin-top: 1px; }
.droits-groupe .case small { display: block; font-size: 12px; color: var(--texte-3); }

/* Véhicule vendu : fiche figée */
.fiche-fige { display: flex; align-items: flex-start; gap: 6px; margin-top: 12px; }
.fiche-fige svg { flex-shrink: 0; margin-top: 1px; font-size: 15px; }

/* Véhicule accidenté, réparations et pièces (onglet Dépenses) */
.mention-accident { color: var(--danger-fonce); font-weight: 650; }
input[readonly] { background: var(--surface-2); color: var(--texte-2); }
.choix-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.actions-entete { display: flex; flex-wrap: wrap; gap: 8px; }
.texte-attente { color: var(--danger-fonce); font-weight: 600; }
/* Tableaux de suivi des réparations et des pièces : filet rouge tant que rien
   n'est soldé (réparation en attente, pièce en attente d'achat), ambre pour une
   pièce payée en partie, vert une fois soldé. */
.tableau-suivi tr.suivi-attente > td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.tableau-suivi tr.suivi-partiel > td:first-child { box-shadow: inset 3px 0 0 var(--ambre); }
.tableau-suivi tr.suivi-solde > td:first-child { box-shadow: inset 3px 0 0 var(--vert); }
/* Le statut se replie sur deux lignes (« En attente / d’achat ») plutôt que de
   prendre la place du détail, qui garde une largeur lisible ; un numéro de
   téléphone ne se coupe pas. Mesuré à 1280 px : le tableau des pièces tient
   encore dans sa carte, ses lignes passent de 157-178 px à 98-141 px. */
.tableau-suivi .badge { white-space: normal; }
.tableau-suivi tr[data-suivi] > td:first-child { min-width: 8rem; }
.tableau-suivi tr[data-suivi] > td:nth-child(3) { min-width: 10rem; }
.numero-telephone { white-space: nowrap; }
.ligne-versement td { padding-top: 5px; padding-bottom: 6px; font-size: 13px; color: var(--texte-2); background: var(--surface-2); }
.versement { display: inline-flex; align-items: center; gap: 6px; }
.versement svg { width: 14px; height: 14px; color: var(--vert-texte); stroke-width: 2.4; flex-shrink: 0; }
.tableau-suivi tr[data-suivi] { cursor: pointer; }
.tableau-suivi tr[data-suivi]:hover > td,
.tableau-suivi tr[data-suivi].ouverte > td { background: var(--surface-2); }
.depliant {
  display: flex; justify-content: flex-end; align-items: center; gap: 3px; width: 100%; margin-top: 3px; padding: 0;
  border: 0; background: none; font: inherit; font-size: 12.5px; color: var(--principal); cursor: pointer; white-space: nowrap;
}
.depliant svg { width: 13px; height: 13px; transition: transform 0.15s ease; }
.depliant[aria-expanded="true"] svg { transform: rotate(90deg); }
.depliant:focus-visible { outline: 2px solid var(--principal); outline-offset: 2px; border-radius: 4px; }
.choix-reparations {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px 14px;
  margin: 12px 0 4px; padding: 12px 14px; border: 1px solid var(--bordure); border-radius: 12px;
}
.bloc-accident { margin-top: 12px; border-color: var(--ambre); background: var(--orange-fond); }
.bloc-accident > legend { color: var(--orange-texte); }
.controle .conseil .etat, .controle .fenetre .etat { background: var(--gris-fond); color: var(--gris-texte); }
.controle .conseil, .controle .fenetre { color: var(--texte-2); }
/* Lien d'une ligne (« Compléter », « Saisir les prix ») : d'un seul tenant, le texte se replie à sa place. */
.controle li > a.lien { white-space: nowrap; }
/* Coût de revient incomplet (pièce sans prix), dans les cartes de l'onglet Prix et vente. */
.carte-section .note-cout-incomplet { margin-bottom: 14px; }
/* « i » : signalé seulement (pièces encore dues au fournisseur), ne bloque pas. */
.controle .signal .etat { background: var(--bleu-fond); color: var(--bleu-texte); font-weight: 700; font-style: italic; font-family: var(--police-titres); }
.controle .signal { color: var(--texte-2); }

/* Vente payée en plusieurs fois : suivi et reçus */
.suivi-paiements { display: grid; gap: 14px; }
.liste-versements { margin: 2px 0 4px; padding-left: 18px; display: grid; gap: 2px; }
.recu-objet { margin-top: 18px !important; font-size: 14px; line-height: 1.6; }
.recu-vehicule { margin-top: 10px !important; padding: 10px 14px; border: 1px solid var(--bordure); border-radius: var(--rayon-petit); font-size: 13.5px; }
.recu-note { margin-top: 8px !important; font-size: 13px; }
.recu-solde { font-weight: 700; color: var(--vert-texte); }
.recu-attente { font-weight: 600; color: var(--orange-texte); }
/* Date limite de paiement dépassée sans solde : en gras, lisible aussi en noir et blanc. */
.recu-retard { font-weight: 700; color: var(--danger-fonce); }
.echeance-vente { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; }
.reports-date-limite { margin: 0; padding-left: 18px; display: grid; gap: 2px; font-size: 13px; color: var(--texte-2); }
.badges-fiche { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: flex-start; gap: 6px; }
.formulaire-prix-vente { display: grid; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--bordure); }

/* Statistiques */
.tuile-montant { font-family: var(--police-titres); font-size: 22px; font-variant-numeric: tabular-nums; }
.tuile-montant.perte, .stats dd.perte { color: var(--danger-fonce); }
td.entree { color: var(--vert-texte); }
td.sortie { color: var(--danger-fonce); }
tr.ligne-vide td { color: var(--texte-3); }
/* Pastille du sens d'une opération : même traitement que les badges de statut,
   avec lesquels elle cohabite dans les mêmes tableaux. Contrastes inchangés
   (gris-texte sur gris-fond 5,78:1, vert-texte sur vert-fond 4,51:1). */
.type-operation {
  display: inline-block; padding: 2px 9px; border-radius: 6px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
}
.type-operation.entree, .type-operation.versement { background: var(--vert-fond); color: var(--vert-texte); }
.type-operation.sortie, .type-operation.commission, .type-operation.remboursement { background: var(--gris-fond); color: var(--gris-texte); }
.formulaire-prix-vente .intertitre { margin: 0; font-size: 15px; }
.aide-champ.perte { color: var(--danger-fonce); }
/* Avertissement sous un champ : n'empêche rien, signale (date limite passée). */
.aide-champ.attention { color: var(--orange-texte); font-weight: 600; }
.bloc-suivi-vente { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--bordure); }
.tuiles-suivi { margin-top: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.section-suivi { margin-bottom: 16px; }
/* .tuiles-suivi n'est pas ici : les paliers de .tuiles plus bas (1080 et
   520 px) l'emportaient, la règle ne s'appliquait jamais. Son passage à une
   colonne se règle sous 340 px, avec les montants. */
@media (max-width: 640px) {
  .choix-3 { grid-template-columns: minmax(0, 1fr); }
}
/* Tableau de bord sans les coûts : une seule carte pour la période */
.bloc-periode.seul { grid-template-columns: minmax(0, 1fr); }

/* ---------- Écrans étroits ---------- */
@media (max-width: 1080px) {
  .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bloc-periode { grid-template-columns: minmax(0, 1fr); }
  .fiche-entete { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); }
}

@media (max-width: 860px) {
  .application { display: block; }
  .entete-mobile {
    position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
    padding: 8px 10px 8px 12px; background: var(--marine); color: #fff;
  }
  .entete-mobile .marque { padding: 0; font-size: 15px; }
  .entete-mobile .logo { width: 30px; height: 30px; font-size: 18px; }
  .barre-laterale {
    position: fixed; inset: auto 0 0 0; height: auto; z-index: 30; padding: 4px 6px calc(4px + env(safe-area-inset-bottom));
    flex-direction: row; gap: 0; box-shadow: var(--ombre);
  }
  .barre-laterale .marque, .barre-laterale .compte { display: none; }
  .navigation { flex-direction: row; flex: 1; gap: 2px; }
  .navigation a { flex: 1; flex-direction: column; gap: 2px; padding: 6px 2px; font-size: 11.5px; text-align: center; }
  .navigation a svg { font-size: 22px; }
  /* Barre du bas : le trait ambre passe au-dessus de l'élément courant. */
  .navigation a.actif { box-shadow: inset 0 3px 0 var(--ambre); }
  .contenu { padding: 16px 14px calc(88px + env(safe-area-inset-bottom)); }
  .notification { bottom: calc(80px + env(safe-area-inset-bottom)); }
  h1 { font-size: 22px; }
  .grille-champs, .grille-champs.trois, .grille-2, .grille-conversion, .prix-vente-bloc { grid-template-columns: minmax(0, 1fr); }
  .fiche-entete { grid-template-columns: minmax(0, 1fr); }
  .champ-recherche { min-width: 0; flex: 1; }
  .outils-liste { width: 100%; }
  .zones-depot, .jauges { grid-template-columns: minmax(0, 1fr); }
  .section-formulaire { padding: 16px; }
  .actions-formulaire .bouton { flex: 1; }
}

@media (max-width: 520px) {
  .tuiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .tuile { padding: 12px; }
  .tuile-valeur { font-size: 24px; }
  .choix-cartes { grid-template-columns: minmax(0, 1fr); }
  .stats { grid-template-columns: minmax(0, 1fr); }
  .frise li { font-size: 11.5px; }
  .frise strong { font-size: 12px; }
  .visionneuse-cadre { inset: 56px 8px; }
}

@media print {
  .barre-laterale, .entete-mobile, .fiche-actions, .onglets, .notification { display: none !important; }
  .application { display: block; }
  body { background: #fff; }
}

/* ---------- Écrans étroits : écrans de la version SaaS ---------- */
@media (max-width: 860px) {
  .navigation a.nav-secondaire, .nav-long { display: none; }
  .nav-court { display: inline; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .navigation .nav-plus {
    display: flex; flex: 1; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px;
    border: 0; border-radius: 10px; background: none; color: rgb(255 255 255 / 72%); font-size: 11.5px; font-weight: 600; cursor: pointer;
  }
  .navigation .nav-plus svg { font-size: 22px; }
  .choix-parc { display: none; }
  .entete-mobile { gap: 10px; }
  .entete-mobile .marque { min-width: 0; }
  .entete-mobile .choix-parc-mobile { width: auto; max-width: 46vw; min-height: 34px; padding: 4px 8px; font-size: 13.5px; flex-shrink: 0; }
  .bandeau { margin: -16px -14px 14px; padding: 9px 14px; }
  .grille-3, .carte-membre { grid-template-columns: minmax(0, 1fr); }
  .membre-etat { justify-self: start; }
  .barre-actions-facture { flex-direction: column; align-items: stretch; }
  .ecran-inscription { padding: 12px; }
  .carte-inscription { padding: 20px 16px; }
}

@media (max-width: 520px) {
  .etat-abonnement .stats { grid-template-columns: minmax(0, 1fr); }
  .bloc-logo { flex-direction: column; align-items: flex-start; }
  .ligne-tentative { flex-direction: column; align-items: flex-start; }
  .facture { padding: 20px 14px; font-size: 13px; }
  .facture-titre { text-align: left; }
  .facture-client { max-width: none; margin-left: 0; }
  .facture-totaux { flex-basis: 100%; min-width: 0; }
  .facture-filigrane { font-size: 60px; }
}

/* ---------- Montants : la boîte se règle sur le montant ----------
   Un montant sort de `formatFcfa` d'un seul tenant : ses groupes et son
   « FCFA » sont liés par une espace fine INSÉCABLE (outils.js:4). Il ne se
   replie pas, il ne se coupe pas, et n'a donc aucune largeur minimale plus
   petite que lui-même. Ce n'est pas à lui de céder : c'est à sa boîte de lui
   faire de la place. Toute grille qui porte des montants se règle donc sur
   une largeur PLANCHER — l'encre d'un montant de dix chiffres à la taille de
   la boîte, plus ses marges intérieures et ses filets — et déduit d'elle-même
   son nombre de colonnes, au lieu de le tenir d'un palier d'écran. Même
   écriture que la grille des annonces (plus bas) : le min(…, 100%) évite
   qu'un plancher plus large que la carte ne fasse déborder la page.
   Planchers mesurés, pas choisis : dans l'Outfit des chiffres,
   « 1 234 567 890 FCFA » vaut 8,81 fois la taille de la police. Changer une
   taille de police, une marge intérieure ou la famille des chiffres demande
   de refaire ce calcul, sinon le défaut se rouvre en silence.
   Les règles viennent APRÈS les écrans étroits : c'est l'ordre qui tranche
   les égalités de spécificité avec les @media ci-dessus. */
:root {
  --plancher-montant: 232px;  /* .tuile-montant 22 px : 194 + 32 de marges + 2 de filets */
  --plancher-chiffre: 176px;  /* .chiffre-cle dd 17 px : 150 + 24 + 2 */
  --plancher-total: 176px;    /* .totaux-registre dd 16 px : 141 + 28 + 2 */
  --plancher-duree: 192px;    /* .duree-montant 18 px : 159 + 24 + 3 */
}
/* `:has` : la grille des tuiles sert aussi à des comptages (tableau de bord,
   plateforme), qui n'ont pas besoin de cette largeur. Le montant se désigne
   lui-même, sans classe nouvelle ni balisage à retoucher. */
.tuiles:has(.tuile-montant) { grid-template-columns: repeat(auto-fit, minmax(min(var(--plancher-montant), 100%), 1fr)); }
.chiffres-cles, .chiffres-cles.quatre { grid-template-columns: repeat(auto-fit, minmax(min(var(--plancher-chiffre), 100%), 1fr)); }
.totaux-registre { grid-template-columns: repeat(auto-fit, minmax(min(var(--plancher-total), 100%), 1fr)); }
.durees { grid-template-columns: repeat(auto-fit, minmax(min(var(--plancher-duree), 100%), 1fr)); }
/* Aucune boîte n'est élargie par le montant qu'elle porte : .tuile et .duree
   sont elles-mêmes des grilles, et leur colonne implicite prenait la largeur
   du montant (180,9 px, mesurés identiques à 320, 360, 375 et 414 px),
   étirait avec elle le libellé et le détail, et poussait le bord droit du
   document — la page entière se mettait à défiler. */
.tuile, .duree { grid-template-columns: minmax(0, 1fr); }
/* Un montant ne grossit jamais quand la place diminue : .tuile-valeur repasse
   à 24 px sous 520 px (plus haut) et l'emportait sur les 22 px de
   .tuile-montant, là où la place manque le plus. */
.tuile-valeur.tuile-montant { font-size: 22px; }
/* Là où il n'y a plus de colonne à donner — un montant seul, en gros corps,
   dans une carte pleine largeur — c'est la taille qui cède, et elle se mesure
   sur la CARTE, jamais sur l'écran : la même carte fait 292 px sur un
   téléphone de 320 px et 410 px sur un écran de 1100 px, où la fenêtre, elle,
   a plus que triplé. */
.bloc-periode > .carte-section:has(> .hero-valeur) { container-type: inline-size; }
/* Deux bornes, mesurées elles aussi. En bas, 24 px : c'est le corps des
   tuiles de comptage sous 520 px, et le chiffre de tête ne saurait être plus
   petit qu'elles — au pire cas il y tient encore (203 px d'encre pour 250 px
   de carte à 320 px). En haut, 40 px sous 860 px : la valeur que la maison
   donnait à ce corps sur les écrans étroits, où la carte a pourtant toute la
   largeur. Au-dessus de 1080 px les deux cartes se partagent la ligne : le
   montant y rapetisse avec la sienne, c'est voulu. */
.hero-valeur { font-size: max(24px, min(48px, calc(10.5cqi - 4px))); }
@media (max-width: 860px) {
  .hero-valeur { font-size: max(24px, min(40px, calc(10.5cqi - 4px))); }
}
/* Le détail d'une tuile de suivi porte un montant au milieu d'une phrase
   (« Reste … à encaisser ») : la phrase se replie, le montant non. À dix
   chiffres il demande 120 px ; à 320 px deux colonnes n'en laissent que 116
   (109 dans une fenêtre de bureau, dont la barre de défilement prend 15 px, et
   encore 119 à 340 px). Sous ce seuil, une tuile par ligne. Règle placée ici,
   après le palier de 520 px qui remet .tuiles à deux colonnes, sans quoi elle
   ne s'appliquerait pas. */
@media (max-width: 340px) {
  .tuiles-suivi { grid-template-columns: minmax(0, 1fr); }
}
/* Le nom de la catégorie cède sa place au montant, qui ne se replie pas. */
@media (max-width: 400px) {
  .barre-ligne { grid-template-columns: minmax(72px, 28%) minmax(0, 1fr); }
}

/* ---------- Impression d'une facture ---------- */
@media print {
  @page { size: A4; margin: 12mm; }
  body.impression-facture > *:not(#zone-impression) { display: none !important; }
  body.impression-facture #zone-impression { display: block; }
  .facture {
    max-width: none; padding: 0; border: 0; border-radius: 0; box-shadow: none; font-size: 12.5px;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .facture .tableau-enveloppe { overflow: visible; }
  .page-publique { background: #fff; }
  .facture-publique { max-width: none; padding: 0; }
  .facture-publique .facture { box-shadow: none; }
  .barre-publique, .pied-publique, .bandeau, .panneau-paiement { display: none !important; }
}

/* ---------- Vitrine publique (accueil, annonces) ----------
   Écran #ecran-vitrine d'index.html, rendu par vitrine.js. Reprend les
   cartes de véhicules, les vignettes, les boutons et les états vides de
   l'application. */
.vitrine { display: flex; flex-direction: column; min-height: 100vh; background: var(--fond); }
.entete-vitrine {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px max(32px, calc((100% - 1180px) / 2)); background: var(--marine); color: #fff;
}
.entete-vitrine .marque { min-width: 0; padding: 0; }
.entete-vitrine .bouton { flex-shrink: 0; }
.vitrine-contenu { flex: 1; padding: 24px 32px 48px; outline: none; }
.pied-vitrine {
  padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--bordure);
  text-align: center; font-size: 12.5px; color: var(--texte-3);
}
/* Clavier : un repère net sur chaque lien et bouton ; blanc sur l'en-tête sombre. */
.vitrine a:focus-visible, .vitrine button:focus-visible, .lien-vitrine:focus-visible { outline: 3px solid var(--principal); outline-offset: 2px; }
.entete-vitrine a:focus-visible, .entete-vitrine button:focus-visible { outline-color: #fff; }
.vitrine [tabindex="-1"]:focus { outline: none; }
.lien-vitrine { justify-self: start; margin-bottom: 0; }
.visuellement-cache {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Liste et filtres */
.entete-vitrine-page { margin-bottom: 16px; }
/* Appel à l'action de l'accueil : une action principale, une phrase d'appui. */
.actions-accueil { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
/* Sentinelle du défilement infini : invisible, observée sous la grille. */
.sentinelle-suite { height: 1px; margin: 0; }
.filtres-vitrine { display: grid; gap: 14px; margin-bottom: 14px; padding: 14px 16px; }
.filtres-vitrine-haut { display: flex; gap: 8px; }
.filtres-vitrine-haut .champ-recherche { flex: 1; min-width: 0; }
.bouton-filtres { display: none; }
.bouton-filtres .puce-compte { background: var(--principal); color: #fff; }
/* Libellés sur une ou deux lignes : les champs s'alignent par le bas. */
.grille-filtres { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px 14px; align-items: end; }
.actions-filtres { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.compte-annonces { min-height: 1.45em; margin: 0 0 12px; }
.vitrine .grille-vehicules { grid-template-columns: repeat(auto-fill, minmax(min(262px, 100%), 1fr)); }
.grille-vehicules > .chargement-vue { grid-column: 1 / -1; }
.suite-annonces { display: grid; justify-items: center; gap: 10px; margin-top: 20px; }
.suite-annonces:empty { display: none; }

/* Carte d'annonce : photo de couverture, puis jusqu'à trois vignettes */
.vignettes-annonce { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; padding-top: 2px; }
.mini-annonce .vignette-icone { font-size: 22px; }
.compte-photos {
  position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
  border-radius: 6px; background: var(--voile); color: #fff; font-size: 12px; font-weight: 650;
}
.compte-photos svg { font-size: 14px; }
.prix-annonce { margin: -4px 0 10px; font-family: var(--police-titres); font-size: 19px; font-weight: 750; color: var(--principal); font-variant-numeric: tabular-nums; }
.prix-annonce small { font-size: 12px; font-weight: 650; color: var(--texte-3); }
.caracteristiques { margin-bottom: 12px; }
/* Mêmes `dd` que la carte véhicule (`.carte-chiffres`), mais du texte
   (« Blanc », « Automatique ») : ils reviennent à Manrope, l'Outfit reste
   réservé aux chiffres. */
.caracteristiques dd { font-family: var(--police); font-size: 13.5px; font-weight: 600; overflow-wrap: anywhere; }
.extrait-annonce {
  margin: -2px 0 12px; font-size: 13.5px; color: var(--texte-2); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.vendeur-annonce {
  display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 10px;
  border-top: 1px solid var(--bordure); font-size: 12.5px; color: var(--texte-2);
}
.vendeur-annonce span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Page d'une annonce : galerie et description à gauche, prix, contact et vendeur à droite */
.annonce { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.annonce-colonne { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.annonce-galerie { display: grid; gap: 8px; min-width: 0; }
.galerie-principale { position: relative; aspect-ratio: 4 / 3; max-width: 100%; overflow: hidden; border-radius: var(--rayon); background: var(--image-fond); }
.galerie-principale img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.25s; }
.galerie-principale img.chargee { opacity: 1; }
.galerie-principale .vignette-icone { font-size: 80px; }
.galerie-principale .vignette-icone svg { stroke-width: 1.1; }
/* Posée sur la photo : pastille blanche cerclée d'un filet, lisible sur une
   image claire (3,47:1) comme sombre ; la flèche reste en ardoise. */
.galerie-fleche {
  position: absolute; top: 50%; z-index: 1; transform: translateY(-50%); display: grid; place-items: center;
  width: 42px; height: 42px; border: 1px solid var(--bordure-forte); border-radius: 50%; background: rgb(255 255 255 / 90%); color: var(--texte);
  box-shadow: var(--ombre); font-size: 20px; cursor: pointer;
}
.galerie-fleche:hover { background: #fff; color: var(--principal); }
.galerie-fleche.precedente { left: 10px; }
.galerie-fleche.suivante { right: 10px; }
.legende-photo {
  position: absolute; right: 10px; bottom: 10px; z-index: 1; padding: 2px 9px; border-radius: 6px;
  background: var(--voile); color: #fff; font-size: 12.5px; font-weight: 650; font-variant-numeric: tabular-nums;
}
.miniatures-annonce { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.mini-galerie { padding: 0; border: 2px solid transparent; border-radius: 9px; cursor: pointer; }
.mini-galerie[aria-current="true"] { border-color: var(--principal); }
.mini-galerie .vignette-icone { font-size: 24px; }

.annonce-infos { display: grid; gap: 14px; min-width: 0; padding: 18px 20px; }
.annonce-infos .fiche-titre { overflow-wrap: anywhere; }
.prix-annonce.grand { margin: 0; font-size: 28px; line-height: 1.2; }
.prix-annonce.grand small { font-size: 14px; }
.actions-contact { display: grid; gap: 8px; }
.actions-contact .bouton { min-height: 46px; font-size: 15px; white-space: normal; text-align: center; }
.annonce-infos .details { padding-top: 14px; border-top: 1px solid var(--bordure); }
.description-annonce { white-space: pre-line; overflow-wrap: anywhere; }
.annonce-vendeur .aide, .annonce-vendeur .membre-nom { overflow-wrap: anywhere; }
.annonce-vendeur .intertitre { margin-top: 16px; }
.vitrine .etat-vide h1 { font-size: 22px; }

/* Slider des publicités (slider-publicites.js) : en haut de la liste de
   l'accueil, et en aperçu dans la plateforme. Bandeau 16:5 sur toute la
   largeur du contenu, image recadrée sans déformation ; étiquette
   « Publicité » et bouton pause au-dessus, flèches sur l'image, points
   dessous. Les diapositives sont empilées : seule la courante (et la
   sortante, le temps de l'animation) est visible. */
.slider-pub { min-width: 0; margin-bottom: 18px; }
/* Slider d'aperçu posé dans une carte (plateforme) : pas de marge sous le bandeau. */
.carte-section .slider-pub:last-child { margin-bottom: 0; }
/* Plateforme · Publicités (plateforme-publicites.js) : vignette 16:5 dans la liste. */
.vignette-pub {
  display: block; flex-shrink: 0; width: 128px; height: auto; aspect-ratio: 16 / 5;
  object-fit: cover; border-radius: 6px; border: 1px solid var(--bordure); background: var(--image-fond);
}
.slider-pub-haut { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 30px; margin-bottom: 6px; }
.slider-pub-etiquette { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texte-2); }
.slider-pub-pause {
  display: grid; place-items: center; flex-shrink: 0; width: 30px; height: 30px; padding: 0;
  border: 1px solid var(--bordure-forte); border-radius: 50%; background: var(--surface); color: var(--texte-2); cursor: pointer;
}
.slider-pub-pause:hover { border-color: var(--principal); color: var(--principal); }
.slider-pub-pause svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.slider-pub-pause span { display: grid; place-items: center; }
.slider-pub-cadre {
  position: relative; aspect-ratio: 16 / 5; width: 100%; max-width: 100%; overflow: hidden; isolation: isolate;
  border-radius: var(--rayon); background: var(--image-fond); box-shadow: var(--ombre);
  /* Le glissement horizontal revient au slider ; défilement vertical et zoom restent au navigateur. */
  touch-action: pan-y pinch-zoom;
}
.slider-pub-diapositives { position: absolute; inset: 0; }
.slider-pub-diapositive { position: absolute; inset: 0; visibility: hidden; }
.slider-pub-diapositive.actuelle, .slider-pub-diapositive.sortante { visibility: visible; }
.slider-pub-lien { position: relative; display: block; width: 100%; height: 100%; }
.slider-pub-lien img {
  display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.25s;
  -webkit-user-drag: none; user-select: none;
}
.slider-pub-lien img.chargee { opacity: 1; }
.slider-pub-fleche {
  position: absolute; top: 50%; z-index: 2; transform: translateY(-50%); display: grid; place-items: center;
  width: 42px; height: 42px; padding: 0; border: 1px solid var(--bordure-forte); border-radius: 50%; background: rgb(255 255 255 / 90%); color: var(--texte);
  box-shadow: var(--ombre); font-size: 20px; cursor: pointer;
}
.slider-pub-fleche:hover { background: #fff; color: var(--principal); }
.slider-pub-fleche.precedente { left: 10px; }
.slider-pub-fleche.suivante { right: 10px; }
/* Points : zone cliquable de 24 px ; le point courant s'allonge, repère qui ne tient pas qu'à la couleur. */
.slider-pub-points { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; margin-top: 6px; }
.slider-pub-point {
  display: grid; place-items: center; width: 24px; height: 24px; padding: 0;
  border: 0; border-radius: 999px; background: none; cursor: pointer;
}
.slider-pub-point::before {
  content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--texte-3);
  transition: width 0.2s, background-color 0.2s;
}
.slider-pub-point:hover::before { background: var(--texte-2); }
/* Point courant : l'ambre de la DA, qui ne tient que 1,97:1 sur la craie —
   un filet d'ardoise lui rend le 3:1, et sa longueur dit l'état sans couleur. */
.slider-pub-point[aria-current="true"]::before { width: 20px; background: var(--ambre); box-shadow: 0 0 0 1px var(--ardoise); }
/* Place réservée pendant la première lecture des publicités (htmlAttenteSlider) :
   mêmes classes, donc mêmes dimensions que le slider à plusieurs publicités ;
   la rangée des points, vide, garde la hauteur de ses boutons. Sans animation. */
.slider-pub-attente .slider-pub-points { min-height: 24px; }

/* Clavier : repère net hors de l'image ; sur l'image, double anneau lisible sur fond clair comme sombre. */
.slider-pub .slider-pub-pause:focus-visible, .slider-pub .slider-pub-point:focus-visible { outline: 3px solid var(--principal); outline-offset: 1px; }
.slider-pub .slider-pub-fleche:focus-visible { outline: 2px solid transparent; box-shadow: 0 0 0 3px var(--principal), 0 0 0 5px #fff; }
.slider-pub .slider-pub-lien:focus-visible { outline: 2px solid transparent; }
.slider-pub .slider-pub-lien:focus-visible::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 3px var(--principal), inset 0 0 0 5px #fff;
}

@media (max-width: 860px) {
  .slider-pub { margin-bottom: 14px; }
  .slider-pub-cadre { border-radius: 10px; }
  .slider-pub-fleche { width: 38px; height: 38px; font-size: 18px; }
  .slider-pub-fleche.precedente { left: 8px; }
  .slider-pub-fleche.suivante { right: 8px; }
}
@media (max-width: 400px) {
  .slider-pub-fleche { width: 34px; height: 34px; font-size: 17px; }
  .slider-pub-fleche.precedente { left: 6px; }
  .slider-pub-fleche.suivante { right: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .slider-pub-lien img, .slider-pub-point::before { transition: none; }
}
@media (forced-colors: active) {
  .slider-pub-point::before { background: CanvasText; }
  .slider-pub-point[aria-current="true"]::before { background: Highlight; }
}

@media (max-width: 860px) {
  .entete-vitrine { padding: 8px 14px; }
  .entete-vitrine .marque { font-size: 15px; }
  .entete-vitrine .logo { width: 30px; height: 30px; font-size: 18px; }
  .vitrine-contenu { padding: 16px 14px 28px; }
  .bouton-filtres { display: inline-flex; }
  .filtres-vitrine:not(.ouvert) .grille-filtres { display: none; }
  .grille-filtres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .actions-filtres .bouton { flex: 1; }
  /* Une seule colonne : photos, prix et contact, description, vendeur. */
  /* stretch : sans lui, l'« align-items: start » de la grille rétrécit la galerie et les cartes à leur contenu. */
  .annonce { display: flex; flex-direction: column; align-items: stretch; }
  .annonce-colonne { display: contents; }
  .annonce-galerie { order: 1; }
  .annonce-infos { order: 2; padding: 16px; }
  .annonce-description { order: 3; }
  .annonce-vendeur { order: 4; }
  .galerie-principale { border-radius: 10px; }
}

@media (max-width: 400px) {
  .grille-filtres { grid-template-columns: minmax(0, 1fr); }
  .entete-vitrine .bouton { padding: 8px 10px; }
  .prix-annonce.grand { font-size: 24px; }
  .galerie-fleche { width: 36px; height: 36px; }
}

@media print {
  .entete-vitrine, .filtres-vitrine, .suite-annonces, .pied-vitrine, .galerie-fleche, .slider-pub { display: none !important; }
}

/* Choix de la langue, dans l'en-tête public : discret, à hauteur des
   boutons, et jamais plus large que son contenu. */
.choix-langue select { padding: 6px 8px; border: 1px solid var(--bordure-forte); border-radius: var(--rayon-petit); background: var(--surface); color: var(--texte); font: inherit; font-size: 14px; cursor: pointer; }
.choix-langue select:focus-visible { outline: 2px solid var(--principal); outline-offset: 1px; }
.entete-vitrine .choix-langue { margin-left: auto; }
.entete-vitrine .choix-langue + .bouton { margin-left: 8px; }
/* Dans l'espace connecté : au pied du menu latéral, sur l'ardoise, comme le
   choix du parc ; dans le menu du téléphone, une ligne du menu. */
.compte .choix-langue { display: flex; align-items: center; gap: 8px; margin: 2px 0; font-size: 13px; color: rgb(255 255 255 / 75%); }
.compte .choix-langue select {
  min-height: 30px; padding: 3px 8px; font-size: 13px;
  background-color: rgb(255 255 255 / 10%); color: #fff; border-color: rgb(255 255 255 / 24%);
}
.compte .choix-langue select:focus-visible { outline-color: var(--focus-clair); border-color: #fff; }
.compte .choix-langue option { color: var(--texte); background: #fff; }
.menu-mobile .choix-langue { display: flex; align-items: center; gap: 12px; padding: 7px 12px; font-size: 15px; font-weight: 600; }
.menu-mobile .choix-langue select { margin-left: auto; }

/* ---------- Comptes qui publient des annonces (« neuf », « immatricule ») ----------
   Classes neuves seulement : rien de ce qui précède ne change pour un
   importateur. */

/* Publier une voiture : les trois temps (enregistrer, photos, mise en vente) */
.etapes-publication { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.etape-publication { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: start; color: var(--texte-3); }
.etape-publication strong { display: block; color: var(--texte); font-size: 14.5px; }
.etape-texte { display: block; font-size: 13.5px; overflow-wrap: anywhere; }
.etape-numero {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--bordure-forte); background: var(--surface); color: var(--texte-2);
  font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums;
}
.etape-numero svg { stroke-width: 2.4; font-size: 15px; }
.etape-publication.en_cours .etape-numero { border-color: var(--principal); box-shadow: inset 0 0 0 1px var(--principal); color: var(--principal); }
.etape-publication.faite .etape-numero { border-color: var(--vert); background: var(--vert-fond); color: var(--vert-texte); }
.etape-publication.echec .etape-numero { border-color: var(--danger); background: var(--danger-fond); color: var(--danger-fonce); }
.etape-publication.echec .etape-texte { color: var(--danger-fonce); }
.etape-publication .envoi-piste { display: block; margin-top: 6px; }
.etape-publication .envoi-remplie { display: block; }

/* Photos choisies pour l'annonce, avant et pendant l'envoi. La zone de dépôt
   n'emprunte pas la classe « annonce », prise par la page d'une annonce de
   l'accueil (grille). */
.zone-depot.zone-annonce { border-color: var(--vert); background: var(--vert-fond); }
.zone-depot.zone-annonce:hover, .zone-depot.zone-annonce.survol { border-color: var(--principal); background: var(--principal-clair); }
.photos-annonce { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.photo-annonce {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 6px 8px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--bordure);
}
.photo-annonce .vignette { border-radius: 6px; }
.photo-annonce-texte { display: grid; gap: 2px; min-width: 0; font-size: 13.5px; }
.photo-annonce-actions { display: flex; gap: 4px; }
.photo-annonce.envoyee { border-color: var(--vert); background: var(--vert-fond); }
.photo-annonce.envoyee .envoi-etat { color: var(--vert-texte); }
.photo-annonce.echec { border-color: var(--danger); background: var(--danger-fond); }
.photo-annonce.echec .envoi-etat { color: var(--danger-fonce); white-space: normal; }

/* Fiche d'une annonce : le prix de vente seul (pas de marge au-dessus) */
.formulaire-prix-annonce { display: grid; gap: 10px; }

/* Accueil public : badge « Neuf » ou « Occasion », déclaré par le vendeur */
.badge-offre {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4;
}
.badge-offre.neuf { background: var(--succes-plein); color: #fff; }
.badge-offre.occasion { background: var(--acier); color: #fff; }
.vignette .badge-offre { position: absolute; top: 8px; left: 8px; box-shadow: var(--ombre); }
/* Fiche publique : badge de l'offre et/ou « À la une », et la mention de la mise en avant. */
.ligne-offre { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 6px; }

/* ---------- Mise en avant « À la une » ----------
   Étiquette d'une annonce mise en avant par son vendeur : ambre de la DA,
   texte ardoise (7,35:1), toujours écrite — jamais la couleur seule. Sur la
   vignette, en haut à droite : le haut gauche reste à l'offre, le bas droit
   au nombre de photos. */
.badge-une {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.4; white-space: nowrap;
  background: var(--ambre); color: var(--ardoise);
}
.vignette .badge-une { position: absolute; top: 8px; right: 8px; box-shadow: var(--ombre); }
.aide-une-fiche { font-size: 13px; color: var(--texte-2); }
/* Note de transparence sous le nombre d'annonces. */
.aide-une { margin: -6px 0 12px; }

/* Bandeau (bandeau-a-la-une.js) : sous le slider des publicités, des cartes
   compactes de 220 px dans une liste qui défile à l'horizontale. La liste
   déborde de 6 px de chaque côté, marge comprise : le repère de focus des
   cartes n'est pas rogné, et les cartes restent alignées sur la page. */
.bandeau-une { min-width: 0; margin-bottom: 18px; }
.bandeau-une-haut { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 12px; margin-bottom: 4px; }
.bandeau-une-titres { min-width: 0; }
.bandeau-une-titre { display: flex; align-items: center; gap: 7px; font-size: 19px; }
.bandeau-une-titre svg { width: 20px; height: 20px; color: var(--ambre-texte); fill: var(--ambre); stroke-width: 1.6; }
.bandeau-une-titres .aide { margin: 2px 0 0; font-size: 13px; }
.bandeau-une-controles { display: flex; gap: 6px; margin-left: auto; }
.bandeau-une-bouton {
  display: grid; place-items: center; flex-shrink: 0; width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--bordure-forte); border-radius: 50%; background: var(--surface); color: var(--texte-2); cursor: pointer;
}
.bandeau-une-bouton:hover { border-color: var(--principal); color: var(--principal); }
.bandeau-une-bouton span { display: grid; place-items: center; }
.bandeau-une-bouton [data-icone-pause] svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.bandeau-une-bouton [data-icone-lecture] svg { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.bandeau-une-liste {
  display: flex; gap: 12px; margin: 0 -6px; padding: 6px 6px 10px; list-style: none;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 6px;
  scrollbar-width: thin;
}
.bandeau-une-element { display: flex; flex: 0 0 220px; min-width: 0; scroll-snap-align: start; }
.carte-une {
  display: flex; flex-direction: column; width: 100%; overflow: hidden; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--bordure); border-radius: var(--rayon); box-shadow: var(--ombre);
  transition: border-color 0.15s;
}
.carte-une:hover { border-color: var(--bordure-forte); }
.carte-une .vignette { aspect-ratio: 3 / 2; }
.carte-une-corps { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 10px 12px 12px; }
.carte-une .carte-surtitre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Titre réservé sur ses deux lignes (1,2 × 2) : une carte a toujours la même
   hauteur, celle de la place réservée pendant la lecture du bandeau. */
.carte-une-titre {
  margin: 2px 0 6px; font-size: 15px; font-weight: 650; overflow-wrap: anywhere; min-height: 2.4em;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.carte-une .prix-annonce { margin: 0 0 8px; font-size: 16px; }
.carte-une .vendeur-annonce { padding-top: 8px; }
.vitrine .bandeau-une .bandeau-une-bouton:focus-visible { outline: 3px solid var(--principal); outline-offset: 1px; }
/* Place réservée pendant la lecture du bandeau (htmlAttenteBandeau) : mêmes
   classes, donc même hauteur (barre de défilement de la liste comprise) ; les
   contrôles gardent leur place sans se montrer, les cartes vides n'ont que
   leur fond d'image. Sans animation. */
.bandeau-une-attente .bandeau-une-controles, .carte-une-attente .vendeur-annonce svg { visibility: hidden; }
.carte-une-attente { box-shadow: none; }
@media (max-width: 860px) {
  .bandeau-une { margin-bottom: 14px; }
  .bandeau-une-titre { font-size: 17px; }
}
@media (max-width: 400px) {
  .bandeau-une-element { flex-basis: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  .carte-une { transition: none; }
  .bandeau-une-liste { scroll-behavior: auto; }
}
@media (forced-colors: active) {
  .badge-une, .badge-offre { border: 1px solid CanvasText; }
}
@media print {
  [data-a-la-une] { display: none !important; }
}

/* Espace de la société : bloc « Mise en avant » de la fiche (onglet Prix et
   vente ; ses durées reprennent les boutons .durees de la page Abonnement)
   et mention sur la carte d'un véhicule. */
.etat-mise-en-avant { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px; }
.etat-mise-en-avant svg { margin-top: 2px; color: var(--ambre-texte); fill: var(--ambre); stroke-width: 1.6; }
.regles-mise-en-avant { margin: 10px 0 0; padding-left: 18px; font-size: 13px; color: var(--texte-2); display: grid; gap: 4px; }
.mention-une { display: inline-flex; align-items: center; gap: 4px; color: var(--ambre-texte); font-weight: 600; }
.mention-une svg { width: 14px; height: 14px; fill: var(--ambre); stroke-width: 1.6; }
.badge.une { background: var(--ambre); color: var(--ardoise); }
/* Badge de l'en-tête de la fiche pendant une campagne : l'étoile tient lieu de pastille. */
.badges-fiche .badge svg { width: 14px; height: 14px; stroke-width: 2; }
.badge.une svg { fill: var(--ardoise); }

/* Plateforme : cinq tuiles (vue d'ensemble, point des abonnements, avec les
   mises en avant) — cinq colonnes sur un écran large ; à deux colonnes, la
   dernière prend toute la ligne. */
.tuiles.tuiles-cinq { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1080px) {
  .tuiles.tuiles-cinq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tuiles.tuiles-cinq > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Tableau de bord : trois tuiles de suivi (réparations à solder, pièces à
   payer, ventes à solder) — trois colonnes sur un écran large ; à deux
   colonnes, la dernière prend toute la ligne ; une seule sous 340 px, comme
   la rangée à deux tuiles (le montant du détail ne se replie pas). */
.tuiles.tuiles-suivi.trois { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1080px) {
  .tuiles.tuiles-suivi.trois { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tuiles.tuiles-suivi.trois > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 340px) {
  .tuiles.tuiles-suivi.trois { grid-template-columns: minmax(0, 1fr); }
}
/* Compte d'annonces : ni réparations ni pièces, seules les ventes à solder,
   sur toute la largeur. */
.tuiles.tuiles-suivi.une { grid-template-columns: minmax(0, 1fr); }

/* Listes « à solder », ouvertes par les tuiles de suivi du tableau de bord :
   le tableau défile dans sa carte sur un petit écran (.tableau-enveloppe) ;
   le nom du véhicule mène à l'onglet où l'on règle ; une vente en retard se
   repère au liseré rouge de sa ligne et à son reste en rouge, pas à la seule
   teinte du fond. */
.tableau-a-solder a.liste-titre { color: var(--texte); text-decoration: none; }
.tableau-a-solder a.liste-titre:hover { color: var(--principal); text-decoration: underline; }
.tableau-a-solder td .badge { white-space: nowrap; }
.tableau-a-solder a[href^="tel:"] { white-space: nowrap; }
/* Neuf colonnes dont cinq d'un seul tenant (montants, date, badge, lien) :
   des marges plus serrées que les autres tableaux, pour tenir dans la carte
   d'un écran de 1280 px. */
.tableau-a-solder th, .tableau-a-solder td { padding-left: 7px; padding-right: 7px; }
.tableau-a-solder th:first-child, .tableau-a-solder td:first-child { padding-left: 10px; }
/* Le tableau défile de toute façon sur un téléphone : le nom du véhicule
   reste d'un seul tenant, et les colonnes de texte gardent une largeur
   lisible au lieu de se replier mot par mot. Sur un écran large, rien de
   tel : le tableau doit tenir dans sa carte. */
@media (max-width: 860px) {
  .tableau-a-solder .liste-titre { white-space: nowrap; }
  .tableau-a-solder td:nth-child(2), .tableau-a-solder td:nth-child(3) { min-width: 8.5rem; }
}
.tableau-a-solder td.actions .lien { white-space: nowrap; }
/* Dans une colonne de montants ou de dates (d'un seul tenant), seul le
   chiffre reste sur une ligne : la note « dont AIB … » et le badge du
   retard passent à la ligne au besoin. D'un seul tenant, ils portaient la
   colonne Date limite à 180 px et le tableau des ventes au-delà de sa carte
   à 1280 px (lien « Prix et vente » coupé). */
.tableau-a-solder td.nombre .sous-ligne,
.tableau-a-solder td.nombre .badge { white-space: normal; }
.tableau-a-solder td.nombre .badge { text-align: left; }
.tableau-a-solder tr.ligne-retard td { background: var(--danger-fond); }
.tableau-a-solder tr.ligne-retard td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
/* Sur la ligne en retard, le badge rouge aurait exactement la teinte du
   fond : il garde son relief sur un fond blanc cerclé de rouge. */
.tableau-a-solder tr.ligne-retard .badge.rouge { background: var(--surface); box-shadow: inset 0 0 0 1px var(--danger); }
.texte-retard { color: var(--danger-fonce); }
.aide-a-solder { margin-top: 12px; }