/* ============================================================
   Sankofa OS — Système de design
   Référence : docs/03_SYSTEME_DE_DESIGN.md (maquettes du 20/08/2026)
   Règles : CDC Maître §82 (langage visuel), §83 (états),
   §54 (mobile d'abord), §56 (accessibilité).
   ============================================================ */

:root {
  /* **La police des titres** (DEC-158). Le maitre d'ouvrage voulait le
     cachet d'une maison de cafe : une seconde police, a empattements,
     pour les titres seuls -- le corps reste en Montserrat, qui se lit
     mieux en petit.

     Le depot **heberge ses polices** (24/08, Google Fonts retire de
     chaque page) et `static/polices/` n'en porte qu'une. Cette pile-ci
     n'exige donc aucun fichier : Georgia est presente partout, et les
     suivantes rattrapent les rares machines qui ne l'ont pas.

     **Pour une police de marque**, deposer son `.woff2` dans
     `static/polices/`, ajouter son `@font-face`, et mettre son nom en
     tete de cette seule variable. Rien d'autre ne bouge. */
  --police-titre: Georgia, "Iowan Old Style", "Palatino Linotype",
    "Times New Roman", serif;

  /* --- Couleurs de marque (charte graphique) --- */
  --vert-900: #0f1f1a;   /* vert profond — navigation basse, texte fort */
  --vert-700: #1c4a38;   /* en-tête, boutons primaires */
  --vert-600: #256a4c;   /* survol, liens */
  --or: #c89a4b;         /* accent doré — bordures, icônes décoratives */
  --or-clair: #d9b06a;   /* doré lisible pour TEXTE sur fond vert sombre */
  --or-fonce: #7c5a1e;   /* doré lisible pour TEXTE sur fond clair */
  --sable: #e6dac1;
  --ivoire: #f6f4ef;     /* fond de page */
  --creme: #fdf6e5;      /* fond de la carte « prochaine étape » */
  --carte: #ffffff;

  /* --- Texte --- */
  --texte: #22302a;
  --texte-secondaire: #5c6360;
  --texte-inverse: #f6f4ef;

  /* --- États (CDC §83 : jamais la couleur seule, toujours icône + mot) --- */
  --etat-fait-bg: #dff0e2;      --etat-fait-texte: #1b5e3f;
  --etat-actuel-bg: #f6e8cd;    --etat-actuel-texte: #7c5a1e;
  --etat-futur-bg: #ececea;     --etat-futur-texte: #5c6360;
  --etat-cours-bg: #ddeaf3;     --etat-cours-texte: #205a7d;
  --etat-anomalie-bg: #f8dedb;  --etat-anomalie-texte: #8f2318;

  /* --- Formes --- */
  --rayon-carte: 20px;
  --rayon-pilule: 999px;
  --ombre-carte: 0 1px 2px rgba(15, 31, 26, 0.06), 0 4px 14px rgba(15, 31, 26, 0.07);

  /* --- Échelle de respiration (aération des écrans terrain) --- */
  --espace-xs: 0.5rem;
  --espace-s: 0.8rem;
  --espace-m: 1.15rem;
  --espace-l: 1.6rem;
  --espace-xl: 2.2rem;

  /* --- Typographie --- */
  --police: "Montserrat", "Segoe UI", system-ui, sans-serif;
}

/* ------------------------------------------------------------
   Icônes — tracés au filet, couleur héritée du texte.
   Aucun émoji dans les écrans : leurs couleurs propres (bleu,
   violet, jaune) cassent la palette verte et dorée.
   ------------------------------------------------------------ */
.ico {
  width: 1.2em; height: 1.2em;
  flex: none; vertical-align: -0.22em;
}
.ico--s { width: 1em; height: 1em; }
.ico--l { width: 1.55em; height: 1.55em; }
.ico--xl { width: 1.9em; height: 1.9em; }

/* ------------------------------------------------------------
   Base
   ------------------------------------------------------------ */
* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--police);
  background: var(--ivoire);
  color: var(--texte);
  font-size: 1rem;
  line-height: 1.6;
}

img { max-width: 100%; display: block; }

a { color: var(--vert-600); }

h1, h2, h3 { line-height: 1.2; color: var(--vert-900); }
h1 { font-size: 1.9rem; font-weight: 800; }
h2 { font-size: 1.25rem; font-weight: 700; }
h3 { font-size: 1.05rem; font-weight: 700; }

.sous-titre { color: var(--texte-secondaire); margin-top: 0.25rem; }

/* Gabarit mobile d'abord : une colonne confortable au pouce (§54).
   Référence : Producteur et Relais travaillent au téléphone — l'écran
   respire, une idée à la fois, jamais de mur d'information. */
.page {
  max-width: 30rem;
  margin: 0 auto;
  padding: var(--espace-l) var(--espace-m) 7rem; /* place pour la navigation basse */
}
/* Les adaptations d'écran sont regroupées en fin de feuille (§ Écrans). */
.page--bureau { max-width: 30rem; }

/* ------------------------------------------------------------
   En-tête d'application
   ------------------------------------------------------------ */
.entete {
  background: var(--vert-700);
  color: var(--texte-inverse);
  padding: 0.8rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  position: sticky;
  top: 0;
  z-index: 20;
}
.entete__marque { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.entete__medaillon {
  display: block;
  width: 42px; height: 42px; border-radius: 50%;
  overflow: hidden; flex: none;
  border: 2px solid rgba(200, 154, 75, 0.7);
}
.entete__medaillon img { width: 100%; height: 100%; object-fit: cover; }
.entete__titre { color: var(--texte-inverse); font-size: 1.2rem; font-weight: 800; line-height: 1.1; }
.entete__sous-titre { color: var(--or-clair); font-size: 0.8rem; font-weight: 700; }
.entete__actions { margin-left: auto; display: flex; gap: 0.5rem; }
.entete__bouton {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(246, 244, 239, 0.12);
  color: var(--texte-inverse);
  border: none; font-size: 1.25rem; cursor: pointer;
  text-decoration: none;
}
.entete__bouton:hover { background: rgba(246, 244, 239, 0.22); }
/* La déconnexion est un POST — sans quoi un lien visité par un aspirateur
   de pages déconnecterait l'utilisateur. Le formulaire ne doit pour autant
   rien changer à la rangée d'actions : il s'efface au profit de son bouton. */
.entete__sortie { display: flex; margin: 0; }

/* ------------------------------------------------------------
   Boutons — une action principale par écran (§4)
   ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border-radius: var(--rayon-pilule);
  font: inherit; font-weight: 700;
  padding: 0.85rem 1.5rem;
  min-height: 48px; /* cible tactile (§56) */
  cursor: pointer; text-decoration: none;
  border: 2px solid transparent;
}
.btn--primaire { background: var(--vert-700); color: var(--texte-inverse); }
.btn--primaire:hover { background: var(--vert-600); }
.btn--secondaire { background: transparent; color: var(--vert-700); border-color: var(--vert-700); }
.btn--tertiaire { background: transparent; color: var(--vert-700); padding: 0.6rem 0.9rem; min-height: 44px; }
.btn--danger { background: transparent; color: var(--etat-anomalie-texte); border-color: var(--etat-anomalie-texte); }
.btn--pleine-largeur { width: 100%; font-size: 1.1rem; }
.btn:focus-visible, .entete__bouton:focus-visible, .nav-basse__lien:focus-visible {
  outline: 3px solid var(--or); outline-offset: 2px;
}

/* ------------------------------------------------------------
   Cartes
   ------------------------------------------------------------ */
.carte {
  background: var(--carte);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-carte);
  padding: var(--espace-l) var(--espace-m);
  margin-bottom: var(--espace-m);
}

/* Carte mise en avant (« Dernier document reçu ») */
.carte--vedette {
  border: 1.5px solid var(--or);
  background: var(--creme);
}
.carte__surtitre--discret {
  color: var(--or-fonce); font-weight: 800; font-size: 0.8rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  display: flex; align-items: center; gap: 0.45rem;
  margin-bottom: var(--espace-s);
}

/* Carte « Votre prochaine étape » (§3 : l'écran répond aux cinq questions) */
.carte--etape {
  background: var(--creme);
  border: 1px solid var(--sable);
}
.carte--etape .carte__surtitre {
  color: var(--or-fonce); font-weight: 800; font-size: 1.05rem;
  display: flex; align-items: center; gap: var(--espace-xs);
}
.carte--etape p { margin: var(--espace-s) 0 var(--espace-m); }
.carte--etape .btn { margin-top: var(--espace-xs); }

/* ------------------------------------------------------------
   Badges d'état — icône + mot, jamais la couleur seule (§83, §56)
   ------------------------------------------------------------ */
.badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  border-radius: 12px;
  padding: 0.45rem 0.85rem;
  font-size: 0.85rem; font-weight: 700;
  line-height: 1.35;
}
.badge--fait    { background: var(--etat-fait-bg);    color: var(--etat-fait-texte); }
.badge--actuel  { background: var(--etat-actuel-bg);  color: var(--etat-actuel-texte); }
.badge--futur   { background: var(--etat-futur-bg);   color: var(--etat-futur-texte); }
.badge--cours   { background: var(--etat-cours-bg);   color: var(--etat-cours-texte); }
.badge--anomalie{ background: var(--etat-anomalie-bg);color: var(--etat-anomalie-texte); }
/* Le détail passe SOUS le libellé, comme sur les maquettes */
.badge__texte { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.badge__detail { font-weight: 600; font-size: 0.75rem; opacity: 0.9; }
.badge--compact { padding: 0.4rem 0.65rem; font-size: 0.8rem; }

/* ------------------------------------------------------------
   Frise de parcours (annoncé → payé) — cœur des maquettes
   ------------------------------------------------------------ */
.frise { list-style: none; margin-top: var(--espace-m); }
.frise__etape {
  display: grid;
  grid-template-columns: 30px 1fr auto;
  gap: var(--espace-s);
  align-items: center;
  position: relative;
  padding: 0.6rem 0;
  min-height: 48px; /* chaque étape reste lisible et touchable au pouce */
}
/* trait vertical */
.frise__etape::before {
  content: "";
  position: absolute; left: 14px; top: 0; bottom: 0;
  width: 2px; background: var(--sable);
}
.frise__etape:first-child::before { top: 50%; }
.frise__etape:last-child::before { bottom: 50%; }

.frise__point {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 0.8rem; font-weight: 800;
  position: relative; z-index: 1;
  background: var(--etat-futur-bg); color: var(--etat-futur-texte);
  border: 2px solid var(--carte);
}
.frise__etape--fait .frise__point { background: var(--vert-700); color: var(--texte-inverse); }
.frise__etape--actuel .frise__point {
  background: var(--carte); color: var(--or-fonce);
  border: 3px solid var(--or); box-shadow: 0 0 0 3px var(--etat-actuel-bg);
}
.frise__libelle {
  font-weight: 700; font-size: 0.97rem;
  display: inline-flex; align-items: center; gap: 0.45rem;
}
/* Le détail passe toujours sous le libellé, jamais à sa suite */
.frise__detail {
  display: block; font-weight: 600; font-size: 0.84rem;
  color: var(--texte-secondaire); margin-top: 0.1rem;
}
.frise__date { color: var(--texte-secondaire); font-size: 0.8rem; text-align: right; }
.frise__etape--actuel .frise__contenu {
  background: var(--etat-actuel-bg); border-radius: 14px; padding: 0.6rem 0.85rem;
}
.frise__etape--actuel .frise__libelle { color: var(--or-fonce); }
.frise__etape--actuel .frise__detail { color: var(--or-fonce); opacity: 0.95; }
.frise__etape--futur .frise__libelle { color: var(--texte-secondaire); font-weight: 600; }

/* Pied de carte « Voir le parcours » */
.carte__pied {
  border-top: 1px solid var(--ivoire);
  margin-top: var(--espace-m); padding-top: var(--espace-s);
  min-height: 48px; gap: var(--espace-s);
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 700; color: var(--vert-700); text-decoration: none;
}
.carte__pied > span:first-child { display: inline-flex; align-items: center; gap: 0.55rem; }
/* En liste (files d'actions), chaque ligne est sa propre rangée cliquable */
.liste-nue .carte__pied { margin-top: 0; }

/* En-tête de carte parcelle. Au téléphone, le badge prend sa propre
   ligne : lui laisser une colonne écraserait le nom de la parcelle.
   Dès qu'il y a la place, il remonte à droite du titre. */
.parcelle__entete {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "pastille identite"
    "badge    badge";
  align-items: start;
  gap: var(--espace-s);
  padding-bottom: var(--espace-xs);
}
.parcelle__pastille {
  grid-area: pastille;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--ivoire); color: var(--vert-600);
  display: grid; place-items: center;
}
.parcelle__identite { grid-area: identite; min-width: 0; }
.parcelle__badge { grid-area: badge; justify-self: start; }

.parcelle__entete h3 { font-size: 1.05rem; }
/* Métadonnées : les fragments restent entiers, le séparateur est ajouté
   par le CSS — il ne se retrouve donc jamais seul sur une ligne. */
/* Métadonnées : fragments insécables, séparés par l'espacement seul —
   pas de point médian qui se retrouverait orphelin en bout de ligne. */
.parcelle__meta {
  color: var(--texte-secondaire); font-size: 0.88rem; font-weight: 600;
  margin-top: 0.2rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.1rem 0.9rem;
}
.parcelle__meta > span { white-space: nowrap; display: inline-flex; align-items: center; gap: 0.3rem; }

@media (min-width: 26rem) {
  .parcelle__entete {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "pastille identite badge";
  }
  .parcelle__badge { justify-self: end; }
}

/* ------------------------------------------------------------
   Tuiles d'indicateurs (annoncé / collecté / accepté — §64)
   ------------------------------------------------------------ */
/* `minmax(0, …)` et non `1fr` : un libellé long — « rendement d'ensemble »
   — imposait sa largeur à sa colonne et faisait déborder la page de 7 px à
   375. Même cause que `.cadre-bureau` ci-dessus, et même leçon (défaut 3 du
   système de design). Avec la contrainte, le libellé revient à la ligne. */
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--espace-xs); }
.stat { text-align: center; padding: var(--espace-s) 0.3rem; }
.stat + .stat { border-left: 1px solid var(--ivoire); }
.stat__icone {
  width: 46px; height: 46px; margin: 0 auto var(--espace-xs); border-radius: 50%;
  background: var(--ivoire); color: var(--vert-600);
  display: grid; place-items: center;
}
.stat__valeur { font-size: 1.4rem; font-weight: 800; color: var(--vert-900); line-height: 1.25; }
.stat__libelle { font-size: 0.82rem; font-weight: 600; color: var(--texte-secondaire); display: block; margin-top: 0.2rem; }

/* Quatre indicateurs : deux rangées de deux au téléphone, une seule sur
   grand écran. À quatre colonnes sur un écran de 360 px, « Rendement
   moyen » se brise en trois lignes et la valeur devient illisible.
   Le filet séparateur suit la disposition : vertical entre deux voisins
   d'une même rangée, absent en début de rangée. */
.stats--quatre { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stats--quatre .stat:nth-child(odd) { border-left: 0; }
.stats--quatre .stat:nth-child(n + 3) { border-top: 1px solid var(--ivoire); }
@media (min-width: 40rem) {
  .stats--quatre { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats--quatre .stat:nth-child(odd) { border-left: 1px solid var(--ivoire); }
  .stats--quatre .stat:first-child { border-left: 0; }
  .stats--quatre .stat:nth-child(n + 3) { border-top: 0; }
}

/* ------------------------------------------------------------
   Bloc QR (§29)

   Un QR posé dans `.carte__pied` — une rangée flex — se faisait
   comprimer à 49 px de large en gardant sa hauteur : deformé, donc
   illisible par un lecteur. Une image de code a besoin d'une colonne
   qui ne rétrécit pas, et de rester carrée.
   ------------------------------------------------------------ */
.bloc-qr {
  display: grid; gap: var(--espace-m); align-items: start;
  grid-template-columns: 1fr;
  margin-top: var(--espace-s);
}
@media (min-width: 30rem) {
  .bloc-qr { grid-template-columns: auto 1fr; }
}
.bloc-qr__code {
  /* Fond blanc et marge : un QR sur fond ivoire perd du contraste, et un
     lecteur a besoin de la zone calme autour du motif. */
  background: #fff; padding: var(--espace-xs); border-radius: 4px;
  border: 1px solid var(--sable);
  width: max-content;
}
.bloc-qr__code img { display: block; width: 132px; height: 132px; max-width: none; }
.bloc-qr__mot { min-width: 0; }
.bloc-qr__adresse { word-break: break-all; }

/* ------------------------------------------------------------
   Carte document (§49)
   ------------------------------------------------------------ */
/* Document : la vignette et le titre en haut, l'action en pleine largeur
   dessous — sur un téléphone, un bouton serré à droite se rate. */
.document { display: grid; grid-template-columns: auto 1fr; gap: var(--espace-m); align-items: start; }
.document__vignette {
  width: 56px; height: 68px; border-radius: 10px;
  background: var(--carte); border: 1.5px solid var(--sable);
  color: var(--vert-600);
  display: grid; place-items: center;
  box-shadow: 0 1px 3px rgba(15, 31, 26, 0.08);
}
.document__intitule { font-size: 1.05rem; font-weight: 700; color: var(--vert-900); }
.document__reference { font-weight: 800; color: var(--vert-600); margin-top: 0.1rem; }
.document__meta {
  font-size: 0.85rem; color: var(--texte-secondaire); font-weight: 600;
  margin-top: var(--espace-xs); display: flex; flex-wrap: wrap; gap: 0.15rem 0.7rem;
}
.document__action { grid-column: 1 / -1; margin-top: var(--espace-s); }

/* Groupe de documents : un intitulé de famille avec sa pastille */
.groupe__entete { display: flex; align-items: center; gap: var(--espace-s); margin: var(--espace-l) 0 var(--espace-s); }
.groupe__pastille {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: var(--sable); color: var(--vert-700);
  display: grid; place-items: center;
}
.groupe__intitule { font-size: 1.15rem; font-weight: 800; color: var(--vert-900); }
.groupe__sous-titre { font-size: 0.88rem; color: var(--texte-secondaire); font-weight: 600; }

/* ------------------------------------------------------------
   Filtres en pilules
   ------------------------------------------------------------ */
.filtres { display: flex; gap: var(--espace-xs); flex-wrap: wrap; margin: var(--espace-m) 0 var(--espace-l); }
.filtre {
  border-radius: var(--rayon-pilule);
  /* Assez compact pour que les quatre filtres tiennent sur une ligne au
     téléphone, assez haut pour rester touchable. */
  padding: 0.5rem 0.95rem; min-height: 44px; font-size: 0.88rem;
  text-decoration: none; display: inline-flex; align-items: center;
  font: inherit; font-weight: 700; cursor: pointer;
  background: var(--carte); color: var(--vert-700);
  border: 1px solid var(--sable);
}
.filtre--actif { background: var(--vert-700); color: var(--texte-inverse); border-color: var(--vert-700); }

/* ------------------------------------------------------------
   Assistant pas à pas (« Déclarer mon café », 4 étapes max — §15)
   ------------------------------------------------------------ */
.assistant__progression { display: flex; align-items: center; gap: 0.3rem; }
.assistant__pas {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--sable); flex: none;
}
.assistant__pas--actif { background: var(--or); width: 18px; height: 18px; }
.assistant__trait { height: 3px; flex: 1; background: var(--sable); border-radius: 2px; }
.assistant__etiquette { color: var(--or-fonce); font-weight: 700; margin-top: var(--espace-xs); }

.section-numerotee { display: flex; gap: var(--espace-s); align-items: baseline; margin-bottom: var(--espace-m); }
.section-numerotee__numero {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--vert-900); color: var(--texte-inverse);
  display: grid; place-items: center; font-weight: 800; font-size: 0.9rem;
  align-self: flex-start;
}

/* Choix en cartes (parcelle, forme du café) — grandes cibles, du souffle
   entre les options : on choisit avec le pouce, parfois en plein soleil. */
/* Les options s'empilent tant qu'elles n'ont pas 12 rem de large : au
   téléphone, une option pleine largeur vaut mieux que deux colonnes qui
   coupent les mots. Deux colonnes dès qu'il y a la place. */
.choix { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--espace-s); }
/* Liste de formes : une option par ligne au téléphone — même largeur,
   même alignement, aucun bord en escalier. Deux colonnes dès 26 rem. */
.choix--fluide { grid-template-columns: 1fr; }
@media (min-width: 26rem) {
  .choix--fluide { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
}
.choix__option {
  border: 2px solid var(--sable); border-radius: 16px;
  background: var(--carte); font: inherit; font-weight: 700; color: var(--texte);
  padding: 0.95rem 1.1rem; min-height: 56px; cursor: pointer;
  display: flex; align-items: center; justify-content: flex-start; gap: 0.65rem;
  text-align: left; line-height: 1.35;
}
.choix__option { position: relative; }
.choix__option--choisi {
  border-color: var(--vert-700);
  background: #eef5ef;
  box-shadow: inset 0 0 0 1px var(--vert-700);
}
/* Coche en coin, comme sur les maquettes — elle ne déplace pas le texte */
.choix__option--choisi::after {
  content: "✓";
  position: absolute; top: 6px; right: 8px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--vert-700); color: var(--texte-inverse);
  font-size: 0.8rem; font-weight: 800;
  display: grid; place-items: center;
}

/* Option « parcelle » : pastille à gauche, libellé sur deux lignes */
.choix__option--parcelle {
  justify-content: flex-start; text-align: left;
  gap: var(--espace-s); padding-right: 2.4rem;
  min-width: 0;
}
.choix__option--parcelle .choix__pastille {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: var(--ivoire); color: var(--vert-600);
  display: grid; place-items: center;
}
.choix__precision { display: block; font-weight: 600; color: var(--texte-secondaire); font-size: 0.88rem; }

/* Champ avec unité */
.champ { margin-top: var(--espace-xs); }
.champ__libelle { font-weight: 700; display: block; margin-bottom: var(--espace-xs); }
.champ__aide { color: var(--texte-secondaire); font-size: 0.9rem; margin-top: 0.2rem; }
.champ__saisie {
  display: flex; align-items: center; gap: var(--espace-xs);
  border: 2px solid var(--sable); border-radius: 16px;
  background: var(--carte); padding: 0.85rem 1.1rem;
  min-height: 60px;
}
.champ__saisie:focus-within { border-color: var(--or); box-shadow: 0 0 0 3px var(--etat-actuel-bg); }
.champ__saisie input, .champ__saisie select {
  border: none; outline: none; font: inherit; font-weight: 800; font-size: 1.45rem;
  width: 100%; background: transparent; color: var(--texte);
  /* le champ occupe toute la hauteur du cadre : on peut viser large */
  min-height: 44px; align-self: stretch;
}
.champ__unite {
  color: var(--texte-secondaire); font-weight: 700;
  flex: none; display: inline-flex; align-items: center; gap: 0.35rem;
  white-space: nowrap;
}

/* ------------------------------------------------------------
   Bandeaux d'information et d'aide (§52)
   ------------------------------------------------------------ */
.bandeau {
  display: flex; gap: var(--espace-s); align-items: flex-start;
  background: var(--sable); border-radius: 16px;
  padding: var(--espace-m); font-size: 0.94rem; font-weight: 600;
  color: var(--texte); margin: var(--espace-m) 0;
  line-height: 1.55;
}
.bandeau--discret { background: #efece4; }

/* La jauge d'un engagement (DEC-105) : ce qui est commandé sur ce qui est
   engagé. Partagée entre le Comptoir (Mon engagement) et le bureau (fiche
   client), donc ici, au socle. */
.jauge {
  height: 22px; border-radius: var(--rayon-pilule);
  background: var(--ivoire); overflow: hidden; display: flex;
}
.jauge__remplie {
  background: linear-gradient(90deg, var(--vert-700), #2f6b52);
  display: grid; place-items: center; min-width: 0;
  transition: width 0.4s ease;
}
.jauge__remplie span { font-size: 0.66rem; font-weight: 800; color: var(--ivoire); white-space: nowrap; padding: 0 0.4rem; }
/* Bandeau de confiance, en pied d'écran : « vos documents sont en sécurité » */
.bandeau--confiance {
  background: #eef5ef; border: 1px solid #cfe0d4;
  color: var(--etat-fait-texte);
}
.bandeau--confiance .btn { display: flex; color: var(--etat-fait-texte); }
/* La main tendue de l'aide proactive (DEC-198) : deux envois refusés de
   suite, le volet s'ouvre et ce bandeau, posé là où la personne regarde,
   y mène par une ancre — sans recharger, sans perdre ce qu'elle a tapé. */
.aide-main-tendue { background: #f3ecd9; border: 1px solid #e6dac1; }
.aide-main-tendue .ico--l { color: #7c5a1e; flex: none; }
.aide-main-tendue__lien {
  display: inline-flex; align-items: center; gap: 2px;
  margin-left: 6px; color: #7c5a1e; font-weight: 800; text-decoration: underline;
  text-underline-offset: 3px;
}
/* Ce que Sankofa n'a pas accepté (DEC-086) : une saisie faite hors ligne
   que le serveur a refusée. Elle ne se réessaie pas — la décision de
   Sankofa prime —, elle se montre, et se distingue donc d'une attente. */
.bandeau--anomalie {
  background: var(--etat-anomalie-bg); color: var(--etat-anomalie-texte);
}
.bandeau--anomalie .btn { color: var(--etat-anomalie-texte); }

/* ------------------------------------------------------------
   Menu du profil — 4 ou 5 accès maximum (§8, §54).

   Le MÊME menu, à deux places selon l'écran : en bas sous le pouce au
   téléphone, en haut aligné sur la colonne sur ordinateur. Mêmes
   intitulés, mêmes icônes, même ordre — celui qui connaît son téléphone
   reconnaît l'écran d'ordinateur.
   ------------------------------------------------------------ */
.nav-profil {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--vert-900);
  border-radius: 22px 22px 0 0;
}
.nav-profil__rangee {
  display: flex; justify-content: space-around;
  padding: 0.45rem 0.3rem calc(0.45rem + env(safe-area-inset-bottom));
}
.nav-profil__lien {
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
  color: var(--ivoire); opacity: 0.85; text-decoration: none;
  font-size: 0.75rem; font-weight: 700;
  min-width: 58px; min-height: 48px; justify-content: center;
  border-radius: 14px;
}
.nav-profil__icone { display: grid; place-items: center; line-height: 1; }
.nav-profil__lien--actif {
  color: var(--or); opacity: 1;
  background: rgba(200, 154, 75, 0.14);
}
.nav-profil__lien:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; }

/* ------------------------------------------------------------
   Menu des espaces bureau — organisé par univers métier (CDC §45),
   jamais par tables techniques. Colonne latérale sur grand écran,
   bandeau déroulant au téléphone.
   ------------------------------------------------------------ */
/* `minmax(0, 1fr)` et non `1fr` : une piste de grille prend par défaut la
   largeur de son contenu, et la rangée d'univers du menu — sept pastilles
   qui ne se coupent pas — imposait 1023 px à une page de 375. Toute la page
   défilait alors latéralement. C'est la leçon déjà écrite au système de
   design (défaut 3), qui manquait à la disposition à une colonne. */
.cadre-bureau { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--espace-m); }

.nav-bureau {
  background: var(--carte);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-carte);
  padding: var(--espace-m);
  align-self: start;
}
/* Les univers se replient (DEC-078). Une seule mécanique pour les deux
   tailles d'écran : soixante rangées faisaient trois écrans de haut sur
   ordinateur, et au téléphone la rangée de pastilles ne menait qu'à la
   première rubrique de chaque univers. Un dépliant montre tout le sien.

   C'est du HTML — `<details>` — et non du JavaScript : le dépôt n'en a
   pas, et n'en prend pas pour ouvrir un menu. */
.nav-bureau__groupes { display: block; }
.nav-bureau__liste { list-style: none; }
.nav-bureau__univers > summary { cursor: pointer; }
/* Le marqueur natif du navigateur — triangle noir, taille imposée — est
   remplacé par le chevron de la charte. */
.nav-bureau__univers > summary { list-style: none; }
.nav-bureau__univers > summary::-webkit-details-marker { display: none; }
.nav-bureau__chevron { margin-left: auto; transition: transform 0.15s ease; }
.nav-bureau__univers[open] > summary .nav-bureau__chevron { transform: rotate(90deg); }
.nav-bureau__univers[open] { background: #fbfaf7; border-radius: 12px; }

/* Ce qui attend une action, en tête : les files étaient éparpillées dans
   six univers, et il fallait les chercher pour savoir quoi faire. */
.nav-bureau__travail {
  border: 1.5px solid var(--sable); border-radius: 14px;
  background: var(--ivoire);
  padding: 0.4rem; margin-bottom: var(--espace-m);
}
.nav-bureau__travail-titre {
  display: flex; align-items: center; gap: 0.45rem;
  min-height: 44px; padding: 0 0.6rem;
  color: var(--vert-700);
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.09em;
  text-transform: uppercase;
}
.nav-bureau__travail-titre .nav-bureau__compteur { margin-left: auto; }
.nav-bureau__compteur--anomalie {
  background: var(--etat-anomalie-bg); color: var(--etat-anomalie-texte);
}

/* Recherche globale (CDC §48) */
.recherche {
  display: flex; align-items: center; gap: 0.55rem;
  border: 2px solid var(--sable); border-radius: var(--rayon-pilule);
  background: var(--ivoire); color: var(--texte-secondaire);
  padding: 0 0.9rem; min-height: 46px;
  margin: var(--espace-s) 0 var(--espace-m);
}
.recherche input {
  border: none; outline: none; background: transparent;
  font: inherit; font-weight: 600; color: var(--texte);
  width: 100%; min-height: 44px;
}
.recherche:focus-within { border-color: var(--or); background: var(--carte); }

/* Titre d'univers : la poignée du dépliant, à toutes les tailles. */
.nav-bureau__titre {
  display: flex; align-items: center; gap: 0.45rem;
  min-height: 44px; padding: 0 0.6rem;
  border-radius: 12px;
  color: var(--or-fonce); text-decoration: none;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.09em;
  text-transform: uppercase;
}
.nav-bureau__titre:hover { background: var(--ivoire); }
.nav-bureau__lien {
  display: flex; align-items: center; gap: 0.55rem;
  min-height: 44px; padding: 0 0.6rem;
  border-radius: 12px;
  color: var(--texte); text-decoration: none; font-weight: 600;
}
.nav-bureau__lien:hover { background: var(--ivoire); }
.nav-bureau__lien--actif {
  background: #eef5ef; color: var(--vert-700); font-weight: 800;
  box-shadow: inset 3px 0 0 var(--vert-700);
}
.nav-bureau__compteur {
  margin-left: auto;
  background: var(--etat-actuel-bg); color: var(--etat-actuel-texte);
  font-size: 0.78rem; font-weight: 800;
  border-radius: var(--rayon-pilule); padding: 0.1rem 0.5rem;
}

/* ------------------------------------------------------------
   Tableau — réservé aux espaces bureau.

   Trois règles, tirées d'un défaut mesuré sur le journal d'audit :
   la page faisait 3 900 px de haut pour 720 px d'écran, et défilait
   aussi de côté.

   1. **Le tableau défile dans son cadre, pas la page.** Le cadre est
      plafonné en hauteur : on ne perd plus la pagination ni le menu en
      descendant, et la page tient sur un écran ou deux.
   2. **Les intitulés de colonnes restent visibles.** Ils étaient déjà
      déclarés « collants », mais sans cadre de hauteur limitée un
      élément collant n'a rien à quoi s'accrocher : il ne collait pas.
   3. **Le texte se replie.** Interdire le retour à la ligne rendait le
      tableau plus large que l'écran ; une cellule sur deux lignes vaut
      mieux qu'une page qui défile de côté (§54).
   ------------------------------------------------------------ */
.cadre-tableau {
  overflow: auto;
  max-height: min(68vh, 42rem);
  overscroll-behavior: contain; /* on ne « traverse » pas vers la page */
  border-radius: 14px; border: 1px solid var(--sable);
}
.tableau { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
.tableau th, .tableau td {
  padding: 0.6rem 0.8rem; text-align: left;
  border-bottom: 1px solid var(--ivoire);
  vertical-align: top;
}
.tableau thead th {
  background: var(--vert-700); color: var(--texte-inverse);
  font-size: 0.78rem; font-weight: 800;
  position: sticky; top: 0; z-index: 2;
  /* `border-collapse` mange la bordure d'un en-tête collant : on la
     redessine à l'intérieur, sinon la première ligne semble le toucher. */
  box-shadow: inset 0 -2px 0 var(--vert-900);
}
.tableau tbody tr:hover { background: var(--ivoire); }
.tableau__univers th {
  background: var(--sable); color: var(--vert-900);
  font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.tableau__intitule { font-weight: 700; }
.tableau__code { display: block; font-weight: 600; font-size: 0.78rem; color: var(--texte-secondaire); }
.tableau td.tableau__vide { color: #b9bcba; }
/* Ce qui ne doit jamais se couper : une date, un montant, un code. */
.tableau__date, .tableau__nombre { white-space: nowrap; }
.tableau__nombre { text-align: right; font-variant-numeric: tabular-nums; }

/* Matrice à colonnes nombreuses (rôles × permissions) : elle défile de côté
   par nature. La colonne des intitulés reste alors visible — sans quoi on
   lit une case sans savoir de quelle ligne elle relève. C'est la même règle
   que l'en-tête collant, sur l'autre axe. */
.tableau--intitules-colles th[scope="row"] {
  position: sticky; left: 0; z-index: 1;
  background: var(--carte);
  box-shadow: inset -1px 0 0 var(--sable);
}
.tableau--intitules-colles thead th:first-child { left: 0; z-index: 3; }
.tableau--intitules-colles tbody tr:hover th[scope="row"] { background: var(--ivoire); }
.tableau--intitules-colles .tableau__univers th { background: var(--sable); }

/* ------------------------------------------------------------
   Écrans d'entrée (connexion, mot de passe oublié, verrouillage).
   Une carte unique, centrée, sans menu : rien d'autre à faire que
   d'entrer — ou de comprendre pourquoi on n'entre pas.
   ------------------------------------------------------------ */
.page--entree {
  max-width: 26rem;
  padding-bottom: var(--espace-xl);
  min-height: calc(100vh - 74px);
  display: flex; flex-direction: column; justify-content: center;
}
.entree__marque {
  text-align: center; margin-bottom: var(--espace-l);
}
/* `display: block` est indispensable : sur un élément en ligne, la largeur
   et le recadrage seraient ignorés et l'image s'afficherait en grand. */
.entree__medaillon {
  display: block;
  width: 76px; height: 76px; margin: 0 auto var(--espace-s);
  border-radius: 50%; overflow: hidden;
  border: 3px solid var(--or);
  box-shadow: 0 4px 16px rgba(15, 31, 26, 0.12);
}
.entree__medaillon img { width: 100%; height: 100%; object-fit: cover; }
.entree__titre { font-size: 1.7rem; }
.entree__accroche { color: var(--texte-secondaire); margin-top: 0.35rem; }

/* --- La bande-photo, un seul motif (DEC-189) ----------------------------
   Trois ecrans ouvrent sur une photo voilee de vert nuit : la connexion
   (DEC-186), l'atelier du torrefacteur (DEC-188), la vitrine du visiteur
   non connecte (DEC-187, dans comptoir.css). Le motif est ecrit une fois,
   par selecteurs groupes ; chaque ecran ne garde que ses hauteurs et le
   cadrage de sa photo. */
.entree__bande,
.atelier__bande,
.accroche.accroche--photo {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  border-radius: var(--rayon-carte);
  overflow: hidden;
  background: var(--vert-900);
  color: var(--ivoire);
  box-shadow: 0 4px 16px rgba(15, 31, 26, 0.16);
}
.entree__bande-photo,
.atelier__photo,
.accroche__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.95;
}
.entree__bande::after,
.atelier__bande::after,
.accroche--photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15, 31, 26, 0.10) 0%, rgba(15, 31, 26, 0.40) 45%, rgba(15, 31, 26, 0.94) 100%);
}
.entree__bande-texte,
.atelier__texte,
.accroche__texte { position: relative; z-index: 1; }
.entree__signature,
.atelier__surtitre,
.accroche__surtitre {
  display: block;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--or-clair);
}

/* --- L'entree en photos (DEC-186) ---------------------------------------
   La bande d'ouverture de la connexion : le medaillon et « Bienvenue » sur
   la photo du producteur ; le formulaire monte sur la bande. Puis les
   portes de « Demander un compte » : chaque metier en photo. */
.entree__bande { min-height: 300px; }
.entree__bande-photo { object-position: 65% 30%; opacity: 0.92; }
.entree__bande-texte { padding: var(--espace-l) var(--espace-m) calc(var(--espace-l) + 1.2rem); }
.entree__bande .entree__medaillon { width: 60px; height: 60px; margin: 0 0 var(--espace-s); border-width: 2px; }
.entree__bande .entree__titre { font-size: 2rem; line-height: 1.05; color: #fff; }
.entree__bande .entree__accroche { color: var(--sable); max-width: 32ch; }
.entree__invite { color: var(--sable); margin-top: 0.35rem; font-size: 0.92rem; }
.entree__signature { margin-top: var(--espace-s); font-size: 0.74rem; letter-spacing: 0.1em; }
.entree__bande + .carte { position: relative; z-index: 2; margin-top: -1.2rem; }

/* Deux colonnes seulement quand chaque porte garde au moins 300 px : la
   grille se regle sur la largeur reellement disponible, pas sur celle de
   la fenetre — un conteneur etroit sur grand ecran cassait les titres. */
.portes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: var(--espace-s);
  margin-bottom: var(--espace-m);
}

/* « Vous avez deja un compte ? » : une invitation a part entiere, sur
   ivoire et sable, qui ne rivalise pas avec les portes en photo. */
.entree__deja {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--espace-s) var(--espace-m);
  padding: var(--espace-m);
  background: var(--ivoire);
  border: 1px solid var(--sable);
  border-radius: var(--rayon-carte);
}
.entree__deja p { display: flex; align-items: center; gap: var(--espace-s); margin: 0; flex: 1 1 16rem; }
.entree__deja p .ico { flex: none; color: var(--vert-700); }
.entree__deja strong { color: var(--vert-900); }
.entree__deja p span { font-size: 0.92rem; color: var(--texte-secondaire); }
.entree__deja .btn { flex: 1 1 12rem; }
@media (min-width: 560px) { .entree__deja .btn { flex: 0 0 auto; } }

/* --- La bande d'ouverture de l'atelier (DEC-188) ------------------------
   La photo du torrefacteur au torrefacteur de cuivre, voilee de vert nuit ;
   le nom de l'atelier, le titre et le compte du jour par-dessus. */
.atelier__bande { min-height: 260px; margin-bottom: var(--espace-m); }
.atelier__photo { object-position: 35% 30%; }
.atelier__texte { padding: var(--espace-l) var(--espace-m) var(--espace-m); }
.atelier__surtitre { margin-bottom: 0.35rem; }
.atelier__bande h1 { margin: 0 0 0.4rem; color: #ffffff; line-height: 1.05; }
.atelier__compte { margin: 0; font-size: 0.95rem; color: var(--sable); }
.atelier__compte strong { color: #ffffff; }
.atelier__sous { margin: 0.35rem 0 0; font-size: 0.85rem; color: rgba(230, 218, 193, 0.8); }
.porte {
  position: relative; display: block;
  min-height: 210px;
  border-radius: var(--rayon-carte); overflow: hidden;
  background: var(--vert-900); color: #fff;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(15, 31, 26, 0.06), 0 4px 14px rgba(15, 31, 26, 0.07);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.porte:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(15, 31, 26, 0.18); }
.porte:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; }
.porte__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
}
.porte::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15, 31, 26, 0) 30%, rgba(15, 31, 26, 0.55) 60%, rgba(15, 31, 26, 0.95) 100%);
}
.porte__texte {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: var(--espace-m) 3.4rem var(--espace-m) var(--espace-m);
}
.porte__texte strong {
  display: block;
  font-family: var(--police-titre);
  font-size: 1.35rem; line-height: 1.1;
  margin-bottom: 0.25rem;
}
.porte__texte span { font-size: 0.9rem; color: var(--sable); }
.porte__chevron {
  position: absolute; right: var(--espace-m); bottom: calc(var(--espace-m) + 0.1rem); z-index: 1;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--or-clair); color: var(--vert-900);
  display: grid; place-items: center;
}
@media (prefers-reduced-motion: reduce) { .porte { transition: none; } .porte:hover { transform: none; } }

/* Champ de formulaire classique (texte, courriel, mot de passe) */
.champ-texte { margin-bottom: var(--espace-m); }
.champ-texte label {
  display: block; font-weight: 700; margin-bottom: 0.35rem;
}
.champ-texte input,
.champ-texte select,
.champ-texte textarea {
  width: 100%; font: inherit; font-size: 1.05rem;
  padding: 0.85rem 1rem; min-height: 52px;
  border: 2px solid var(--sable); border-radius: 14px;
  background: var(--carte); color: var(--texte);
}
.champ-texte textarea { min-height: 5rem; line-height: 1.5; }
.champ-texte input:focus,
.champ-texte select:focus,
.champ-texte textarea:focus {
  outline: none; border-color: var(--or);
  box-shadow: 0 0 0 3px var(--etat-actuel-bg);
}
.champ-texte input[aria-invalid="true"] { border-color: var(--etat-anomalie-texte); }
.champ-texte__erreur {
  display: flex; gap: 0.4rem; align-items: flex-start;
  color: var(--etat-anomalie-texte); font-weight: 600;
  font-size: 0.9rem; margin-top: 0.4rem;
}

/* Les localités proposées quand une saisie en désigne plusieurs
   (DEC-146). Le code postal porte l'accent : c'est lui qui distingue
   « 4317 Celles » de « 5561 Celles ». Chaque ligne fait 44 px, parce
   qu'on la lit et qu'on la recopie sur un téléphone. */
.champ__choix {
  list-style: none; margin-top: 0.6rem;
  border: 1px solid var(--sable); border-radius: 12px;
  background: var(--ivoire); overflow: hidden;
}
.champ__choix li {
  display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap;
  min-height: 44px; padding: 0.6rem 0.85rem;
  border-bottom: 1px solid #e7e5df;
}
.champ__choix li:last-child { border-bottom: none; }
.champ__choix b { font-weight: 700; color: var(--vert-700); }
.champ__choix span {
  margin-left: auto; font-size: 0.82rem; font-weight: 600;
  color: var(--texte-secondaire);
}
/* Un choix se coche (DEC-237) : toute la ligne est la cible du doigt, et le
   bouton rond est dessine comme la case a cocher de la maison. */
/* `.champ-texte label` (bloc, gras) l'emporterait sur une simple classe :
   on nomme le conteneur pour que la ligne du choix garde sa grille. */
.champ__choix-case, .champ-texte .champ__choix-case {
  display: grid; grid-template-columns: auto 1fr; column-gap: 0.6rem; row-gap: 0.15rem;
  align-items: center; flex: 1 1 100%; cursor: pointer; font-weight: 400; margin-bottom: 0;
}
.champ__choix-case input[type="radio"] { grid-row: 1 / span 2; align-self: center; }
.champ__choix-case b { grid-column: 2; min-width: 0; }
.champ__choix-case span { grid-column: 2; margin-left: 0; }
.champ__choix-case input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  width: 1.05rem; height: 1.05rem; flex: none;
  min-height: 0; margin: 0; padding: 0;
  border: 1.5px solid var(--sable); border-radius: 50%;
  background: var(--ivoire);
  display: grid; place-content: center;
}
.champ__choix-case input[type="radio"]::before {
  content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%;
  background: var(--vert-700); transform: scale(0);
}
.champ__choix-case input[type="radio"]:checked { border-color: var(--vert-700); }
.champ__choix-case input[type="radio"]:checked::before { transform: scale(1); }
.champ__choix-case input[type="radio"]:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; }

/* Numéro masqué, mis en avant : la personne doit se reconnaître */
.numero-masque {
  font-size: 1.35rem; font-weight: 800; color: var(--vert-900);
  letter-spacing: 0.04em; margin-top: 0.25rem;
}

/* Saisie d'un code à usage unique : gros chiffres, bien espacés */
.champ-code {
  text-align: center;
  font-size: 1.9rem !important;
  font-weight: 800;
  letter-spacing: 0.35em;
  padding-left: 0.35em !important; /* compense l'espacement du dernier chiffre */
}

/* Message d'erreur général du formulaire */
.alerte {
  display: flex; gap: var(--espace-s); align-items: flex-start;
  background: var(--etat-anomalie-bg); color: var(--etat-anomalie-texte);
  border-radius: 16px; padding: var(--espace-m);
  font-weight: 600; margin-bottom: var(--espace-m);
  line-height: 1.55;
}

/* ------------------------------------------------------------
   Divers
   ------------------------------------------------------------ */
/* Titre de section + lien d'appoint. Ils tiennent sur une ligne quand la
   place le permet ; sinon le lien passe dessous, aligné à droite — plutôt
   qu'un titre coupé en deux. */
.entre-titre {
  display: flex; align-items: baseline; justify-content: space-between;
  flex-wrap: wrap;
  gap: 0 var(--espace-s); margin: var(--espace-l) 0 var(--espace-s);
}
.entre-titre h2, .entre-titre h3 { font-size: 1.15rem; }
.entre-titre .lien-discret {
  flex: none; margin-left: auto;
  font-size: 0.85rem; white-space: nowrap;
}
/* Lien d'appoint : reste une vraie cible tactile au pouce (§56) */
.lien-discret {
  color: var(--vert-700); font-weight: 700; text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.3rem;
  min-height: 44px; padding: 0 0.2rem;
}
.liste-nue { list-style: none; }

/* ------------------------------------------------------------
   L'aide — les étapes d'une fiche.

   Numérotées par le navigateur, jamais à la main : une étape insérée au
   milieu obligerait sinon à renuméroter toutes les suivantes, et c'est
   exactement le genre de corvée qu'on finit par ne plus faire.
   ------------------------------------------------------------ */
.aide__etapes {
  list-style: none; counter-reset: etape;
  margin-top: var(--espace-m); display: flex; flex-direction: column; gap: 0.5rem;
}
.aide__etapes li {
  counter-increment: etape;
  display: flex; align-items: flex-start; gap: 0.7rem;
  font-weight: 600; line-height: 1.5;
}
.aide__etapes li::before {
  content: counter(etape);
  flex: none; width: 1.7rem; height: 1.7rem; margin-top: 0.1rem;
  border-radius: 50%; background: var(--vert-700); color: var(--texte-inverse);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.82rem; font-weight: 800;
}

/* Le bouton d'aide de l'en-tête : discret, et présent partout. */
.entete__bouton--aide { font-weight: 800; }

/* « En savoir plus » — le pont entre une aide écrite dans l'écran et la
   fiche qui va plus loin. Discret par construction : il s'ajoute à une aide
   qui se suffit déjà, il ne la remplace pas. Il reste néanmoins une cible
   de 44 px, comme tout ce qui se touche (§56). */
/* Le titre d'une fiche est une **phrase**, pas une étiquette : « Comprendre
   une entrée ou une sortie de stock » ne tient pas sur 375 px. `nowrap` le
   poussait 98 px hors de l'écran, et c'est toute la page qui défilait
   latéralement — le défaut 3 du système de design, que j'ai réintroduit en
   posant ce lien.

   Il se replie donc, et reste une cible de 44 px : `inline` plutôt
   qu'`inline-flex`, car une boîte flexible ne se coupe pas entre deux mots.
   Le `line-height` fait le plancher que `min-height` ne peut plus tenir. */
.aide__lien {
  display: inline; padding: 0 0.2rem;
  line-height: 44px;
  color: var(--vert-700); font-weight: 800; text-decoration: none;
}
.aide__lien .ico { vertical-align: -0.15em; }
.aide__lien:hover { text-decoration: underline; }
.aide__bandeau { margin: var(--espace-s) 0; }

/* Un texte long mis en forme — récit de terroir, fiche d'aide.

   Ses paragraphes viennent du filtre `mis_en_forme`, pas du gabarit : il
   doit donc être dans un `div`, jamais dans un `p`, qu'un `<p>` intérieur
   refermerait d'office. */
.texte-long { margin-top: var(--espace-s); }
.texte-long p + p { margin-top: var(--espace-s); }
.texte-long ul { margin: var(--espace-s) 0 0 1.1rem; }
.texte-long li + li { margin-top: 0.25rem; }
.texte-long strong { font-weight: 800; }

/* Les monnaies, côte à côte et jamais additionnées : une colonne par
   devise rencontrée, aucune inventée. */
.devises { display: grid; gap: var(--espace-m); margin-top: var(--espace-m); }

/* ------------------------------------------------------------
   Filtres d'une liste — les rangées de pastilles des écrans Stocks.

   Le compteur se lit sur l'ensemble, jamais sur la vue filtrée : sans
   cela, il faudrait cliquer sur chaque pastille pour savoir ce qu'il y a
   derrière, ce qui est exactement le contraire d'un filtre.
   ------------------------------------------------------------ */
.filtres-lots {
  display: flex; gap: var(--espace-xs); flex-wrap: wrap;
  margin-top: var(--espace-m);
}
.filtre {
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 44px; padding: 0 0.9rem;
  border-radius: var(--rayon-pilule);
  border: 1px solid var(--sable); background: var(--carte);
  color: var(--vert-700); text-decoration: none;
  font-size: 0.8rem; font-weight: 800;
}
.filtre:hover { background: var(--ivoire); }
.filtre--actif {
  background: var(--vert-700); border-color: var(--vert-700);
  color: var(--texte-inverse);
}
.filtre__nombre {
  background: rgba(0, 0, 0, 0.08); border-radius: var(--rayon-pilule);
  padding: 0 0.4rem; font-size: 0.75rem; font-variant-numeric: tabular-nums;
}
.filtre--actif .filtre__nombre { background: rgba(255, 255, 255, 0.22); }

/* ------------------------------------------------------------
   Tri par en-tête — sans une ligne de JavaScript.

   Chaque titre est un lien : c'est ce qui rend le tri possible sur un
   téléphone lent, avec une connexion qui coupe, et pour un lecteur
   d'écran. La flèche dort en attendant qu'on la réveille, pour dire
   que la colonne est cliquable sans encombrer l'œil.
   ------------------------------------------------------------ */
.tri {
  display: flex; align-items: center; gap: 0.35rem;
  min-height: 44px; margin: -0.7rem -0.3rem; padding: 0 0.3rem;
  color: inherit; text-decoration: none; font: inherit;
}
.tri:hover { text-decoration: underline; }
.tri__fleche { transition: transform 0.12s ease; flex: none; }
.tri__fleche--dormante { opacity: 0.35; }
.tri:hover .tri__fleche--dormante { opacity: 0.7; }
.tri__fleche--asc { transform: rotate(180deg); }
.tableau__triee { background: rgba(255, 255, 255, 0.12); }

/* Un mouvement de stock : le signe dit le sens, la couleur le double —
   jamais la couleur seule (§83). */
.mouvement { font-variant-numeric: tabular-nums; white-space: nowrap; }
.mouvement--entree { color: var(--etat-fait-texte); }
.mouvement--sortie { color: var(--etat-anomalie-texte); }
.mouvement--ajustement { color: var(--etat-actuel-texte); }

/* ------------------------------------------------------------
   Le bureau de travail — une anatomie unique pour ses blocs.

   Les six inventaient chacun la leur : un seul portait un bouton, un autre
   disparaîssait quand il était vide, la pluralisation s'écrivait de trois
   façons et trois blocs différents portaient l'icône du colis. On lisait
   donc six objets là où il n'y a qu'une question répétée six fois.

   Deux familles seulement, et la pastille les dit — jamais la couleur
   seule (§83) : le chiffre, le mot et l'icône portent la même nouvelle.
   ------------------------------------------------------------ */
.rubrique-bureau {
  display: flex; align-items: center; gap: 0.6rem;
  margin: var(--espace-l) 0 var(--espace-s);
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--or-fonce);
}
.rubrique-bureau::after {
  content: ""; height: 1px; flex: 1; background: var(--sable);
}

.bloc-bureau {
  background: var(--carte);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-carte);
  padding: var(--espace-m);
  display: flex; flex-direction: column; gap: var(--espace-s);
}
.bloc-bureau__tete { display: flex; align-items: flex-start; gap: 0.7rem; }
.bloc-bureau__pastille {
  flex: none; min-width: 2.6rem; height: 2.6rem; padding: 0 0.5rem;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
/* Ambre : quelque chose t'attend. Vert : c'est de la réserve. Gris : rien
   à faire — et le bloc **reste** (§39). Une étagère vide est une étagère ;
   une étagère absente est une question sans réponse. */
.bloc-bureau--attend  .bloc-bureau__pastille { background: var(--etat-actuel-bg); color: var(--etat-actuel-texte); }
.bloc-bureau--reserve .bloc-bureau__pastille { background: var(--etat-fait-bg);   color: var(--etat-fait-texte); }
.bloc-bureau--vide    .bloc-bureau__pastille { background: var(--etat-futur-bg);  color: var(--etat-futur-texte); }
.bloc-bureau__titre {
  display: block; font-size: 1rem; font-weight: 800; line-height: 1.3;
}
.bloc-bureau__raison {
  display: block; font-size: 0.82rem; font-weight: 600; line-height: 1.45;
  color: var(--texte-secondaire); margin-top: 0.15rem;
}

.ligne-bureau {
  display: flex; align-items: center; gap: 0.55rem;
  justify-content: space-between;
  min-height: 44px; padding: 0 0.6rem; border-radius: 12px;
  color: var(--texte); text-decoration: none;
  font-weight: 600; font-size: 0.9rem;
}
a.ligne-bureau:hover { background: var(--ivoire); }
/* Une ligne qui n'ouvre rien ne fait pas semblant : ni curseur, ni chevron.
   Le §65 veut qu'un lien mène à l'objet exact, pas à un substitut. */
.ligne-bureau--muette { cursor: default; }
.ligne-bureau__sujet {
  /* **Le sujet prend l'espace, il ne le partage pas.** Sans ce `flex: 1`,
     les trois éléments se répartissaient l'espace par `space-between` : le
     montant flottait entre le nom et le chevron, et sa position dépendait
     de la longueur du nom. Sur dix lignes du bureau, cela donnait neuf
     départs différents — le décalage signalé par le maître d'ouvrage
     (DEC-152). */
  flex: 1; display: flex; align-items: center; gap: 0.5rem; min-width: 0;
}
.ligne-bureau__sujet > span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ligne-bureau__valeur {
  /* Une colonne, pas une position : largeur minimale et alignement à
     droite mettent les unités sous les unités. `tabular-nums` était là
     depuis toujours — il ne servait à rien sans colonne pour l'employer. */
  flex: none; min-width: 7.5rem; text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--vert-700); font-weight: 800;
}
@media (max-width: 480px) {
  /* Au téléphone, la colonne se resserre — mais pas au jugé : mesurée à
     375 px, 6,5rem est la plus petite valeur qui aligne encore les dix
     lignes sur une seule position **sans couper un seul nom**. En dessous,
     la colonne se brise en deux ou trois ; au-dessus, on rogne les noms
     pour rien. */
  .ligne-bureau__valeur { min-width: 6.5rem; }
}
.ligne-bureau__chevron { flex: none; color: var(--texte-secondaire); }

.bloc-bureau__rien {
  display: flex; gap: 0.55rem; align-items: flex-start;
  background: var(--ivoire); border-radius: 14px; padding: 0.7rem 0.8rem;
  font-size: 0.82rem; font-weight: 600; line-height: 1.45;
  color: var(--texte-secondaire);
}
.bloc-bureau__rien .ico { margin-top: 0.15rem; }

.bloc-bureau__pied {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 44px; border-radius: var(--rayon-pilule);
  border: 2px solid var(--sable); background: var(--ivoire);
  color: var(--vert-700); font-weight: 800; font-size: 0.87rem;
  text-decoration: none;
}
.bloc-bureau__pied--fort {
  background: var(--vert-700); border-color: var(--vert-700);
  color: var(--texte-inverse);
}

/* Au téléphone, les blocs s'empilent — ils ne changent pas de forme en
   rétrécissant, ils se suivent.

   **`min-width: 0` n'est pas décoratif ici.** Un élément de grille comme un
   élément flexible refuse par défaut de descendre sous la largeur de son
   contenu : un nom de bénéficiaire un peu long imposait 477 px à un écran
   de 375, et c'était toute la page qui défilait latéralement. C'est le
   défaut 3 du système de design, et la coupure du texte ne peut opérer que
   si toute la chaîne, du bloc à la ligne, accepte de rétrécir. */
.grille-bureau { display: grid; gap: var(--espace-m); }
.grille-bureau, .bloc-bureau, .bloc-bureau > ul, .ligne-bureau { min-width: 0; }
.visuellement-cache {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ============================================================
   ÉCRANS — doctrine des publics (CDC §54, §67)

   Espaces TERRAIN (Producteur, Relais camerounais) : le téléphone est
   la référence de conception, pas une adaptation. Sur ordinateur, la
   colonne s'élargit et respire davantage, mais reste une colonne : le
   même parcours, les mêmes gestes, jamais un tableau de bord dense.

   Espaces BUREAU (Administration, Comptoir, Torréfacteur sur poste) :
   responsives — utilisables au téléphone — mais conçus pour l'écran
   large, en plusieurs colonnes.
   ============================================================ */

/* --- Terrain sur tablette et ordinateur --- */
@media (min-width: 48rem) {
  .page { max-width: 36rem; padding: var(--espace-xl) var(--espace-l) 7rem; }
  .page h1 { font-size: 2.2rem; }
  .page .carte { padding: var(--espace-xl) var(--espace-l); }
  .page .frise__etape { padding: 0.75rem 0; }
  .page .choix { gap: var(--espace-m); }

  /* Le menu du profil remonte en haut, sous l'en-tête, et s'aligne sur la
     colonne de lecture. Il reste collant : les accès suivent le regard. */
  /* La navigation remonte : la bulle d'aide reprend le bas de l'écran. */
  body:has(.nav-profil) .aide-volet__onglet { bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
  body:has(.nav-profil) .aide-volet__panneau { bottom: calc(1rem + 64px + env(safe-area-inset-bottom, 0px)); }
  .nav-profil {
    position: sticky; top: 68px; bottom: auto;
    background: transparent; border-radius: 0;
    padding: var(--espace-s) var(--espace-l) 0;
    max-width: 36rem; margin: 0 auto;
  }
  .nav-profil__rangee {
    background: var(--vert-900);
    border-radius: var(--rayon-pilule);
    padding: 0.35rem;
    gap: 0.2rem;
    box-shadow: 0 6px 18px rgba(15, 31, 26, 0.14);
  }
  .nav-profil__lien {
    flex-direction: row; gap: 0.45rem;
    font-size: 0.85rem; min-width: 0;
    padding: 0 0.8rem; min-height: 46px;
    border-radius: var(--rayon-pilule);
    white-space: nowrap; /* « Mon café » ne se coupe pas en deux */
  }
  .nav-profil__lien .ico { width: 1.25em; height: 1.25em; }
  /* La page n'a plus besoin de réserver la place d'une barre basse. */
  .page { padding-bottom: var(--espace-xl); }
}

/* --- Bureau sur grand écran --- */
@media (min-width: 64rem) {
  .page--bureau {
    max-width: 82rem;
    padding: var(--espace-xl) var(--espace-xl);
  }
  /* Le menu devient une colonne permanente : plus de replier/déplier. */
  .page--bureau .cadre-bureau {
    grid-template-columns: 17rem minmax(0, 1fr);
    gap: var(--espace-l);
    align-items: start;
  }
  .page--bureau .nav-bureau {
    position: sticky; top: calc(68px + var(--espace-m));
    max-height: calc(100vh - 68px - 2 * var(--espace-m));
    overflow-y: auto;
  }
  /* Le dépliant et le bloc « À traiter » ne changent pas de forme avec la
     largeur : ils sont déjà en colonne. Ce qui suivait ici — la rangée de
     pastilles à défaire, le titre à ramener au plancher de 44 px, le bloc
     `__ici` à masquer — n'a plus lieu d'être : DEC-078 a fait du menu une
     seule mécanique, la même partout, et le plancher du §56 est tenu par
     la règle de base plutôt que par un rattrapage sur grand écran. */
  /* Des colonnes, et non une grille. Une grille aligne les blocs par
     rangées : « 1 café à contrôler » se retrouvait côte à côte avec
     « 9 producteurs à payer », et laissait sous lui un trou de la hauteur
     des huit lignes manquantes. Les listes de ce bureau n'ont aucune raison
     d'avoir la même longueur — c'est le réel qui les dicte.

     Le navigateur équilibre les colonnes : les blocs coulent et se suivent.
     `break-inside: avoid` interdit qu'un bloc soit coupé en deux. */
  .page--bureau .devises { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
  .page--bureau .grille-bureau {
    display: block;
    column-width: 21rem;
    column-gap: var(--espace-m);
  }
  .page--bureau .grille-bureau > .bloc-bureau {
    break-inside: avoid;
    margin-bottom: var(--espace-m);
  }
  .page--bureau .grille-bureau > .carte { margin-bottom: 0; }
  /* Au bureau, la navigation n'est plus en bas de l'écran. */
  .page--bureau { padding-bottom: var(--espace-xl); }
}

/* ------------------------------------------------------------
   Cases à cocher multiples — notes de dégustation, filtres.

   Trois choix, contre le rendu par défaut du navigateur :

   1. des **pastilles qui se suivent** et reviennent à la ligne, plutôt
      qu'une grille rigide : quinze étiquettes courtes remplissent alors
      la largeur au lieu de laisser des colonnes à moitié vides ;
   2. la case est **redessinée** (`appearance: none`) : celle du système
      est énorme sur Windows et impose sa couleur, étrangère à la charte ;
   3. c'est **l'étiquette entière** qui se coche, et qui se colore une
      fois choisie — la cible fait 44 px de haut, le plancher de la charte.
      Elle en faisait 40, et ce commentaire les donnait pour suffisants :
      le §56 dit « aucun élément interactif sous 44 px » sans exception,
      et un commentaire qui s'arrange avec la règle est pire que pas de
      commentaire.
   ------------------------------------------------------------ */
.champ-texte--cases > div {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin-top: var(--espace-xs);
}
.champ-texte--cases > div > div { margin: 0; }
.champ-texte--cases label {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 44px; padding: 0 0.9rem; margin: 0;
  border: 1px solid var(--sable); border-radius: var(--rayon-pilule);
  background: var(--carte); color: var(--texte);
  font-weight: 600; font-size: 0.95rem; white-space: nowrap;
  cursor: pointer;
}
.champ-texte--cases label:hover { border-color: var(--or); }
.champ-texte--cases label:has(input:checked) {
  border-color: var(--vert-700); background: #eef5ef; color: var(--vert-700);
}

/* La case, redessinée : même taille partout, aux couleurs de la maison. */
.champ-texte--cases input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 1.05rem; height: 1.05rem; flex: none;
  min-height: 0; margin: 0; padding: 0;
  border: 1.5px solid var(--sable); border-radius: 5px;
  background: var(--ivoire);
  display: grid; place-content: center;
}
.champ-texte--cases input[type="checkbox"]::before {
  content: ""; width: 0.62rem; height: 0.62rem; transform: scale(0);
  background: var(--texte-inverse);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.champ-texte--cases input[type="checkbox"]:checked {
  background: var(--vert-700); border-color: var(--vert-700);
}
.champ-texte--cases input[type="checkbox"]:checked::before { transform: scale(1); }
.champ-texte--cases input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--or); outline-offset: 2px;
}
.champ__legende { font-weight: 700; display: block; margin-bottom: var(--espace-xs); }

/* --- Le volet d'aide (DEC-046) ------------------------------------------
   La fenetre retractable du bord droit, d'apres la maquette du maitre
   d'ouvrage : un onglet vertical « Aide » depasse du bord ; ouvert, le
   panneau glisse par-dessus le contenu et l'onglet devient sa poignee.
   Pur HTML (details) : l'etat est au navigateur, le clavier le pilote. */

.aide-volet > summary { list-style: none; cursor: pointer; }
.aide-volet > summary::-webkit-details-marker { display: none; }

/* La bulle (DEC-242, le maître d'ouvrage le 6/09) : l'onglet du bord droit
   couvrait un montant du récapitulatif ou le bord d'une carte, à mi-hauteur
   de chaque écran. L'aide vit désormais dans une bulle ronde en bas à
   droite — le point d'interrogation de la maison —, et son panneau s'ouvre
   au-dessus d'elle, sans couvrir ce qu'on lit. Toujours un `details`. */
.aide-volet__onglet {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  min-height: 44px;
  min-width: 44px;
  padding: 0;
  background: var(--vert-700);
  color: var(--texte-inverse);
  border: 2px solid rgba(217, 176, 106, 0.55);
  border-radius: 50%;
  box-shadow: 0 10px 24px rgba(15, 31, 26, 0.3);
}
.aide-volet__onglet:hover { background: var(--vert-900); }
.aide-volet > summary:focus-visible .aide-volet__onglet,
.aide-volet__onglet:focus-visible {
  outline: 3px solid var(--or); outline-offset: 2px;
}
.aide-volet__onglet .ico { width: 26px; height: 26px; color: var(--or-clair, #d9b06a); }
/* Le mot vit pour les lecteurs d'écran ; à l'œil, le point d'interrogation suffit. */
.aide-volet__mot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.aide-volet__panneau {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + 64px + env(safe-area-inset-bottom, 0px));
  z-index: 55;
  width: min(380px, calc(100vw - 2rem));
  max-height: min(70vh, 640px);
  overflow-y: auto;
  background: var(--carte, #fff);
  border: 1px solid var(--sable);
  border-radius: 18px;
  box-shadow: 0 24px 48px -16px rgba(15, 31, 26, 0.35);
  padding: var(--espace-m) var(--espace-m) var(--espace-l);
}

/* Ouvert : la bulle reste à sa place et ferme le panneau. */
.aide-volet[open] .aide-volet__onglet { background: var(--vert-900); }
/* Au téléphone, la navigation du profil est fixée en bas (`.nav-profil`) :
   la bulle se pose au-dessus, sinon elle couvrait « Compte ». */
body:has(.nav-profil) .aide-volet__onglet { bottom: calc(62px + 0.75rem + env(safe-area-inset-bottom, 0px)); }
body:has(.nav-profil) .aide-volet__panneau { bottom: calc(62px + 0.75rem + 64px + env(safe-area-inset-bottom, 0px)); }

.aide-volet__titre { font-size: 1.05rem; margin-bottom: var(--espace-xs); }

/* Chercher dans le volet (DEC-182) : le champ en bas du panneau, les
   reponses dessous, chacune un lien de 44 px qui rouvre le volet. */
/* La carte de recherche (DEC-190) : la pilule de la maison, un indice, et
   le chemin vers le centre d'aide range dans la carte. */
.aide-volet__recherche {
  margin-top: var(--espace-l);
  padding: var(--espace-m);
  background: var(--ivoire);
  border: 1px solid var(--sable);
  border-radius: 16px;
}
.aide-volet__sur {
  display: flex; align-items: center; gap: 0.4rem;
  margin: 0 0 var(--espace-s);
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--or-fonce, #7c5a1e);
}
.aide-volet__pilule {
  display: flex; align-items: center; gap: 0.5rem;
  min-height: 48px;
  padding: 4px 4px 4px 14px;
  background: var(--carte, #ffffff);
  border: 1.5px solid var(--sable);
  border-radius: var(--rayon-pilule);
}
.aide-volet__pilule:focus-within { border-color: var(--or); box-shadow: 0 0 0 3px rgba(217, 176, 106, 0.25); }
.aide-volet__pilule > .ico { flex: none; color: var(--texte-secondaire); }
.aide-volet__pilule input[type="search"] {
  flex: 1; min-width: 0; min-height: 40px;
  border: 0; background: transparent; padding: 0;
  font: inherit;
}
.aide-volet__pilule input[type="search"]:focus { outline: none; }
.aide-volet__chercher {
  flex: none; min-height: 40px; padding: 0 1rem;
  border: 0; border-radius: var(--rayon-pilule);
  background: var(--vert-700); color: var(--texte-inverse, #f6f4ef);
  font: inherit; font-weight: 700; font-size: 0.92rem;
  cursor: pointer;
}
.aide-volet__chercher:hover { background: var(--vert-900); }
.aide-volet__indice { margin: var(--espace-xs) 0 0; font-size: 0.82rem; color: var(--texte-secondaire); }
.aide-volet__centre {
  display: flex; align-items: center; gap: 0.5rem;
  min-height: 44px;
  margin-top: var(--espace-s); padding-top: var(--espace-s);
  border-top: 1px solid var(--sable);
  color: var(--vert-700); font-weight: 700; font-size: 0.92rem;
  text-decoration: none;
}
.aide-volet__centre .ico:last-child { margin-left: auto; }
.aide-volet__centre:hover { text-decoration: underline; }
.aide-volet__resultats { margin-top: var(--espace-m); }
.aide-volet__resultats h3 { font-size: 0.95rem; margin-bottom: var(--espace-xs); }
.aide-volet__resultat {
  display: block;
  min-height: 44px;
  padding: 0.6rem 0.75rem;
  margin-bottom: var(--espace-xs);
  border: 1px solid var(--sable);
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
}
.aide-volet__resultat:hover { background: var(--ivoire); }
.aide-volet__resultat strong { display: block; color: var(--vert-900); }
.aide-volet__resultat span { font-size: 0.85rem; color: var(--texte-secondaire); }

@media print { .aide-volet { display: none; } }

/* --- Le portrait : photo ou initiales (DEC-051) --------------------------
   Une photo de profil, ou deux lettres quand il n'y en a pas : un rond
   vide ne dit rien de qui c'est. Le carre arrondi sert aux logos, qui
   supportent mal d'etre rognes en cercle. */

.portrait {
  width: 64px; height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: var(--sable);
  border: 2px solid var(--carte);
  box-shadow: 0 0 0 1px var(--sable);
}
.portrait--logo { border-radius: 14px; object-fit: contain; background: var(--carte); }
.portrait--l { width: 88px; height: 88px; }
.portrait--s { width: 40px; height: 40px; }

.portrait__initiales {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.15rem; letter-spacing: 0.02em;
  color: var(--vert-700);
}
.portrait__initiales.portrait--s { font-size: 0.85rem; }

/* Le rappel d'acceptation : il informe, il ne barre pas la route. */
.bandeau--legal { flex-wrap: wrap; gap: var(--espace-s); }
.bandeau--legal form { margin-left: auto; }

/* Un texte legal se lit longuement : la colonne se resserre et les
   titres respirent. */
.texte-legal { max-width: 46rem; }
.texte-legal h2 {
  font-size: 1.05rem; margin-top: var(--espace-l);
  padding-top: var(--espace-s); border-top: 1px solid var(--sable);
}
.texte-legal h2:first-child { margin-top: 0; border-top: none; padding-top: 0; }
.texte-legal h3 { font-size: 0.95rem; margin-top: var(--espace-m); }
.texte-legal p, .texte-legal li { line-height: 1.65; }

/* --- Les portes de l'inscription (DEC-053) -------------------------------
   Quatre liens-cartes : chacun dit le metier qu'il ouvre, dans les mots
   de la personne et non dans ceux de l'administration. */

a.carte--porte {
  display: block; text-decoration: none; color: inherit;
  transition: border-color 0.15s ease;
  border: 1px solid transparent;
}
a.carte--porte:hover { border-color: var(--or); }
a.carte--porte:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; }
a.carte--porte strong { display: block; }

/* --- Le tri de la vitrine et les blocs du bas (DEC-054) ------------------ */

.tri-vitrine {
  display: flex; flex-wrap: wrap; gap: var(--espace-xs);
  align-items: center; margin-bottom: var(--espace-m);
}
.tri-vitrine .champ__aide { margin-right: var(--espace-xs); }

.comptoir-duo { display: grid; gap: var(--espace-m); margin-top: var(--espace-xl); }
@media (min-width: 48rem) {
  .comptoir-duo { grid-template-columns: 1fr 1fr; align-items: start; }
}

/* Le rappel des conditions de paiement : il repond a une question que le
   client se pose vraiment devant un panier sans bouton « payer ». */
.rappel-paiement {
  display: flex; gap: var(--espace-s); align-items: flex-start;
  background: var(--etat-actuel-bg); color: var(--etat-actuel-texte);
  border-radius: 14px; padding: var(--espace-s) var(--espace-m);
  font-size: 0.88rem; margin-top: var(--espace-s);
}
.rappel-paiement strong { display: block; }


/* ------------------------------------------------------------
   Annuaire des espaces (/administration/espaces/)

   Un annuaire n'est ni un tableau ni une file : c'est une liste de
   portes. Deux besoins seulement -- une liste de comptes lisible sous
   une carte, et des colonnes qui se replient au telephone.
   ------------------------------------------------------------ */
.liste-comptes { list-style: none; margin: 0; padding: 0; }
.liste-comptes > li {
  padding: 0.3rem 0;
  font-weight: 600; font-size: 0.92rem;
  border-top: 1px solid var(--ivoire);
}
.liste-comptes > li:first-child { border-top: none; }
.liste-comptes__intitule {
  color: var(--or-fonce); font-weight: 800; font-size: 0.78rem;
  letter-spacing: 0.08em; text-transform: uppercase;
}

/* Une seule colonne au telephone : trois colonnes de liens y feraient
   deborder la page, defaut deja mesure au Comptoir (DEC-054). */
.colonnes-annuaire { display: grid; gap: var(--espace-m); min-width: 0; }
.colonnes-annuaire > * { min-width: 0; }
.annuaire__univers {
  display: block; margin-bottom: var(--espace-xs);
  color: var(--vert-700); font-weight: 800; font-size: 0.78rem;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.annuaire__univers--or { color: var(--or-fonce); }

@media (min-width: 48rem) {
  .colonnes-annuaire { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* ------------------------------------------------------------
   Fil d'Ariane — le chemin pour remonter (§44, §54, §56)

   Il **revient a la ligne** plutot que de defiler de cote : un maillon
   cache hors de l'ecran ne ramene personne. Et chaque maillon fait
   44 px de haut -- on le vise au pouce, debout, sur un telephone.
   ------------------------------------------------------------ */
.fil-ariane {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem;
  margin-bottom: var(--espace-m);
  font-size: 0.85rem; font-weight: 600;
}
.fil-ariane a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 0.5rem;
  border-radius: 12px;
  color: var(--vert-600); text-decoration: none;
}
.fil-ariane a:hover { background: var(--carte); color: var(--vert-700); }
.fil-ariane a:focus-visible { outline: 3px solid var(--or); outline-offset: 2px; }
/* Le chevron est decoratif : dore, et jamais lu a voix haute. */
.fil-ariane__chevron { color: var(--or); flex: none; }


/* ------------------------------------------------------------
   Totaux d'une piece -- le detail explique, le total repond.

   Trois tuiles de meme taille obligeaient a lire l'etiquette pour
   savoir laquelle on cherche. Ici l'intitule est a gauche, le montant
   a droite : c'est ainsi qu'on lit une addition, et cela tient a 375
   sans reduire personne a trois colonnes de chiffres.
   ------------------------------------------------------------ */
.totaux {
  border-top: 1px solid var(--sable);
  margin-top: var(--espace-m);
  padding-top: var(--espace-s);
}
.totaux__ligne {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--espace-m);
  padding: 0.35rem 0;
}
.totaux__intitule { font-weight: 600; color: var(--texte-secondaire); }
.totaux__montant {
  font-weight: 700; white-space: nowrap;
  /* Les unites s'alignent d'une ligne a l'autre : 20,08 ne se lit plus
     comme 334,72. */
  font-variant-numeric: tabular-nums;
}
/* L'espace vient du gabarit -- une insecable, comme le veut l'usage
   francais -- et non d'une marge : lue a voix haute, « 354,80EUR »
   n'est pas un montant. */
.totaux__devise {
  font-size: 0.8rem; font-weight: 700;
  color: var(--texte-secondaire);
}
/* Le seul trait dore de l'ecran : l'or ne souligne qu'une chose, sinon
   il ne souligne plus rien. */
.totaux__ligne--total {
  border-top: 2px solid var(--or);
  margin-top: var(--espace-xs); padding-top: var(--espace-s);
}
.totaux__ligne--total .totaux__intitule { color: var(--texte); font-weight: 800; }
.totaux__ligne--total .totaux__montant {
  font-size: 1.9rem; font-weight: 800; color: var(--vert-900);
  letter-spacing: -0.01em;
}

/* Carte « Plus rien a faire » : elle constate, elle ne reclame pas.
   Icone et mot portent le sens ; le vert ne fait que confirmer (§83). */
.carte--boucle {
  background: #eef5ef;
  border: 1px solid #cfe0d4;
}
.carte--boucle .carte__surtitre {
  color: var(--etat-fait-texte); font-weight: 800; font-size: 1.05rem;
  display: flex; align-items: center; gap: var(--espace-xs);
}


/* Les conditions qui s'appliquaient a une vente (DEC-065). Discret : ce
   n'est pas une action, c'est une preuve qu'on doit pouvoir retrouver. */
.conditions-de-la-vente {
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
  margin: var(--espace-m) 0 0;
  font-size: 0.85rem; font-weight: 600;
  color: var(--texte-secondaire);
}
.conditions-de-la-vente .ico { color: var(--or); flex: none; }

/* ------------------------------------------------------------
   Bilan de campagne (DEC-073)
   ------------------------------------------------------------ */
/* La ligne sous une tuile d'indicateur : ce que la campagne a ajouté.
   Vert quand quelque chose a grandi -- c'est une bonne nouvelle, et le
   chiffre seul ne le dirait pas. */
.stat__delta { font-size: 0.78rem; font-weight: 700; color: var(--vert-600); display: block; margin-top: 0.15rem; }
.stat__delta--attention { color: var(--or-fonce); }

/* L'entonnoir des quatre quantites (§16) : des barres en CSS pur -- pas
   de JavaScript, doctrine du depot. La grille garde le libelle et la
   valeur hors de la barre : un texte pose sur une barre devient
   illisible des que la barre est courte. */
.entonnoir__etage {
  display: grid; grid-template-columns: minmax(6rem, auto) minmax(0, 1fr) minmax(8rem, auto);
  gap: var(--espace-s); align-items: center; padding: 0.3rem 0;
}
.entonnoir__barre { background: var(--ivoire); border-radius: 8px; height: 14px; overflow: hidden; }
.entonnoir__barre > span { display: block; height: 100%; background: var(--vert-600); border-radius: 8px; }
.entonnoir__etage:last-of-type .entonnoir__barre > span { background: var(--or-clair); }
.entonnoir__valeur { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 0.88rem; }
@media (max-width: 40rem) {
  /* Au telephone, le libelle passe au-dessus de sa barre : trois
     colonnes a 375 px ecrasaient la barre a rien. */
  .entonnoir__etage { grid-template-columns: minmax(0, 1fr) minmax(8rem, auto); }
  .entonnoir__etage > span:first-child { grid-column: 1 / -1; }
}

/* La mini-barre d'une ligne du tableau des terroirs : la part de ce
   village dans le total paye, lisible d'un regard avant les chiffres. */
.part-barre { background: var(--ivoire); border-radius: 6px; height: 10px; overflow: hidden; min-width: 60px; margin-bottom: 0.2rem; }
.part-barre > span { display: block; height: 100%; background: var(--or-clair); border-radius: 6px; }

/* Le geste d'annulation (DEC-136) -- replie sous un pli, pour qu'on ne
   l'atteigne pas en visant « Confirmer ». Il defait une vente. */
.annulation { margin-top: var(--espace-m); }
.annulation__ouvrir {
  color: var(--etat-anomalie-texte); font-weight: 700; font-size: 0.9rem;
  cursor: pointer; min-height: 44px; display: flex; align-items: center;
}
.annulation form {
  display: flex; flex-direction: column; gap: var(--espace-xs);
  padding: var(--espace-s) 0 0;
}
.annulation .btn { align-self: flex-start; }

/* Donner un droit a une personne (DEC-138) : trois controles sur une
   ligne, qui s'empilent quand la colonne se resserre. */
.accord-donner { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.accord-donner .champ-texte { min-width: 8rem; }

/* Un lien dans un tableau doit se voir (lecon de DEC-134) -- et se viser
   au doigt. Le `line-height` fait le plancher de 44 px (§56) sans
   agrandir la ligne, comme le fait deja `.aide__lien` : un `inline-flex`
   ne se couperait pas entre deux mots. */
.lien-souligne {
  color: inherit; text-decoration: underline;
  text-decoration-color: var(--sable); text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  display: inline; line-height: 44px;
}
.lien-souligne:hover { color: var(--vert-600); text-decoration-color: currentColor; }

/* Un bouton de formulaire rendu comme un lien (DEC-167) : « Réactiver
   l'entrée » est un POST — donc un bouton —, mais il se lit comme les
   autres actions en ligne du tableau. On le dépouille de son habit de
   bouton pour qu'il porte celui de `.lien-souligne`. */
.lien-bouton {
  background: none; border: none; padding: 0; margin: 0;
  font: inherit; cursor: pointer; text-align: left;
}

/* Pastilles de niveau pour régler un rôle (DEC-172) : des radios stylées
   en pastilles cliquables — un clic pose le niveau, au lieu d'ouvrir un
   menu déroulant, et on n'enregistre qu'une fois. La cible tactile tient
   le plancher de 44 px (§56). Un seul niveau à la fois : ce sont des
   radios, la sémantique du choix exclusif est native. */
.niveaux-pastilles {
  display: flex; flex-wrap: wrap; gap: 0.3rem;
  border: none; padding: 0; margin: 0; min-inline-size: 0;
}
.niveaux-pastilles__choix { position: relative; display: inline-flex; }
.niveaux-pastilles__choix input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.niveaux-pastilles__choix span {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0.25rem 0.85rem; border-radius: var(--rayon-pilule);
  border: 1.5px solid var(--sable); background: var(--carte);
  color: var(--texte-secondaire); font-size: 0.82rem; font-weight: 700;
}
.niveaux-pastilles__choix input:checked + span {
  background: var(--vert-700); border-color: var(--vert-700);
  color: var(--texte-inverse);
}
.niveaux-pastilles__choix input:focus-visible + span {
  outline: 3px solid var(--or); outline-offset: 2px;
}
.niveaux-pastilles__choix input:disabled + span { opacity: 0.55; cursor: default; }

/* Le tiroir d'encaissement sur la liste des factures (DEC-173) :
   « Encaisser » déplie le formulaire de règlement sur place, sans quitter
   la liste. HTML natif (<details>), aucun JavaScript. */
.encaisser-tiroir > summary { list-style: none; cursor: pointer; }
.encaisser-tiroir > summary::-webkit-details-marker { display: none; }
.encaisser-tiroir__declencheur {
  display: inline-flex; align-items: center; gap: 0.35rem;
  min-height: 44px; color: var(--vert-700); font-weight: 700; font-size: 0.9rem;
}
.encaisser-tiroir__declencheur:hover { color: var(--vert-600); }
.encaisser-tiroir[open] .encaisser-tiroir__declencheur { color: var(--vert-900); }
.encaisser-tiroir__form {
  display: flex; flex-direction: column; gap: var(--espace-xs);
  width: min(17rem, 62vw); margin-top: var(--espace-xs);
  padding: var(--espace-s); border-radius: 12px;
  background: var(--ivoire); border: 1px solid var(--sable);
}

/* Une liste fluide (DEC-175) : au téléphone, chaque ligne est une carte
   empilée — la forme qui va bien là ; dès l'ordinateur, un tableau dense,
   une ligne par élément, plutôt qu'une colonne de grandes cartes. Même
   balisage, deux mises en page, aucun JavaScript. Sert « Mes commandes »,
   « Mes documents » et le bureau qui partage ce dernier (DEC-109). */
.liste-fluide { width: 100%; border-collapse: collapse; margin-top: var(--espace-m); }
.liste-fluide thead {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}
.liste-fluide tbody tr {
  display: block; background: var(--carte); border: 1px solid var(--sable);
  border-radius: var(--rayon-carte); padding: var(--espace-s) var(--espace-m);
  margin-bottom: var(--espace-s);
}
.liste-fluide td {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--espace-m); padding: 0.25rem 0; border: none; min-height: 0;
}
.liste-fluide td::before {
  content: attr(data-label); color: var(--texte-secondaire);
  font-weight: 600; font-size: 0.82rem;
}
.liste-fluide td:empty { display: none; }
/* La cellule des actions ne porte pas d'étiquette et aligne ses boutons. */
.liste-fluide .liste-fluide__actions { justify-content: flex-start; gap: var(--espace-m); flex-wrap: wrap; }
.liste-fluide .liste-fluide__actions::before { display: none; }
@media (min-width: 52rem) {
  .cadre-liste { border: 1px solid var(--sable); border-radius: var(--rayon-carte); overflow: hidden; }
  .liste-fluide { margin-top: var(--espace-m); }
  .liste-fluide thead {
    position: static; width: auto; height: auto; clip: auto;
    display: table-header-group;
  }
  .liste-fluide thead th {
    text-align: left; background: var(--vert-700); color: var(--texte-inverse);
    padding: 0.6rem 0.9rem; font-size: 0.78rem; font-weight: 700;
  }
  .liste-fluide tbody tr {
    display: table-row; background: var(--carte); border: none;
    border-radius: 0; padding: 0; margin: 0;
  }
  .liste-fluide tbody tr:nth-child(even) { background: var(--ivoire); }
  .liste-fluide td {
    display: table-cell; padding: 0.7rem 0.9rem; vertical-align: middle;
    border-bottom: 1px solid var(--sable);
  }
  .liste-fluide td::before { display: none; }
  .liste-fluide td.liste-fluide__num { text-align: right; font-variant-numeric: tabular-nums; }
  .liste-fluide .liste-fluide__actions { justify-content: flex-end; }
}

/* L'écran « À faire maintenant » du relais (DEC-178) : un en-tête qui
   situe, le travail du jour en avant, le reste allégé — sans jamais
   éloigner l'action, car le relais agit debout dans un champ. */
.a-faire__entete {
  background: var(--vert-900); color: var(--texte-inverse);
  border-radius: var(--rayon-carte);
  padding: var(--espace-m) var(--espace-m) var(--espace-l);
  margin-bottom: var(--espace-m);
}
.a-faire__lieu {
  margin: 0; color: var(--or-clair); font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.a-faire__titre {
  font-family: var(--police-titre); color: var(--texte-inverse);
  margin: 0.2rem 0 0; font-size: 1.7rem; line-height: 1.15;
}
.a-faire__resume {
  margin: 0.35rem 0 0; color: rgba(246, 244, 239, 0.75); font-size: 0.9rem;
}
.a-faire__resume strong { color: var(--or-clair); }

/* Le titre de rubrique, avec son compte : on voit d'un œil combien. */
.a-faire__rubrique {
  display: flex; align-items: center; gap: var(--espace-s);
  margin: var(--espace-l) 0 var(--espace-xs);
}
.a-faire__compte {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--vert-700); color: var(--texte-inverse);
  display: grid; place-items: center; font-weight: 800; font-size: 0.9rem;
}
.a-faire__rubrique-titre {
  font-family: var(--police-titre); margin: 0; font-size: 1.15rem;
}

/* La collecte du jour : filet vert, nom en empattements, poids en chiffre
   fort. C'est le geste pour lequel on ouvre cette page. */
.a-faire__collecte { border-left: 4px solid var(--vert-700); }
.a-faire__collecte-haut {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--espace-s); flex-wrap: wrap;
}
.a-faire__nom {
  font-family: var(--police-titre); margin: 0; font-size: 1.2rem;
  color: var(--vert-900);
}
.a-faire__lieu-dit {
  margin: 0.15rem 0 0; color: var(--texte-secondaire); font-size: 0.85rem;
}
.a-faire__quand { flex: none; }
.a-faire__poids {
  display: flex; align-items: baseline; gap: 0.4rem;
  margin: var(--espace-s) 0 var(--espace-m);
}
.a-faire__poids-chiffre {
  font-family: var(--police-titre); font-size: 1.8rem; font-weight: 800;
  color: var(--vert-700); line-height: 1;
}
.a-faire__poids-unite { color: var(--texte-secondaire); font-size: 0.9rem; }

/* Ce qui peut attendre : un titre sourd, des cartes plus discrètes. */
.a-faire__secondaire {
  font-family: var(--police-titre); font-size: 1.05rem;
  color: var(--texte-secondaire); font-weight: 600;
  margin: var(--espace-l) 0 var(--espace-s);
  padding-top: var(--espace-s); border-top: 1px solid var(--sable);
}
.a-faire__ligne {
  display: flex; align-items: flex-start; gap: var(--espace-s);
  margin: 0 0 var(--espace-s);
}
/* Une carte allégée : même contenu, moins de voix. */
.carte--legere { box-shadow: none; background: var(--carte); }

/* Les sous-groupes de « quand vous aurez un moment » : on sait ce qu'on
   regarde, et combien il en reste — sans quoi une carte arrive sans dire
   ce qu'elle est. */
.a-faire__groupe {
  display: flex; align-items: center; gap: var(--espace-xs);
  margin: var(--espace-m) 0 var(--espace-s);
  font-weight: 800; font-size: 0.8rem; color: var(--texte-secondaire);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.a-faire__groupe-compte {
  background: var(--etat-actuel-bg); color: var(--etat-actuel-texte);
  border-radius: var(--rayon-pilule); padding: 0.05rem 0.5rem;
  font-size: 0.78rem; letter-spacing: 0;
}
/* Une tâche d'appoint : moins de marge, un bouton moins haut — mais
   toujours large et à 44 px, car on la touche du pouce, debout dans un
   champ (§56). Alléger n'est pas rendre difficile à viser. */
.a-faire__tache { padding: var(--espace-s) var(--espace-m); }
.a-faire__tache .btn { min-height: 44px; font-size: 0.88rem; }

/* Le bilan de production a un heros (DEC-179) : le rendement en grand
   sur bande verte, sa jauge dorée ; puis la transformation racontée --
   ce qui entre, ce qui sort -- et la perte expliquée sur fond ivoire.
   La carte perd son rembourrage : chaque bande apporte le sien. */
.production__bilan { padding: 0; overflow: hidden; }
.production__heros {
  background: var(--vert-900);
  color: var(--ivoire);
  padding: var(--espace-l) var(--espace-m) var(--espace-m);
  text-align: center;
}
.production__heros-lbl {
  margin: 0 0 var(--espace-xs);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--or-clair);
}
.production__heros-val {
  margin: 0;
  font-family: var(--police-titre);
  font-size: 3rem;
  line-height: 1;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.production__jauge {
  height: 8px;
  max-width: 360px;
  margin: var(--espace-s) auto 0;
  border-radius: var(--rayon-pilule);
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}
.production__jauge-plein { height: 100%; background: var(--or-clair); border-radius: inherit; }
.production__heros-note { margin: var(--espace-s) 0 0; font-size: 0.9rem; opacity: 0.9; }
.production__heros-note strong { color: var(--or-clair); font-weight: 600; }

.production__flux {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--espace-m);
  padding: var(--espace-m);
}
.production__etape { display: flex; flex-direction: column; align-items: center; text-align: center; }
.production__kg {
  font-family: var(--police-titre);
  font-size: 1.9rem;
  line-height: 1.1;
  font-weight: 600;
  color: var(--vert-900);
  font-variant-numeric: tabular-nums;
}
.production__kg--sorti { color: var(--vert-700); }
.production__kg-lbl { font-size: 0.82rem; color: var(--texte-secondaire); }
.production__fleche { font-size: 1.6rem; color: var(--or-clair); }

.production__perte {
  display: flex;
  align-items: flex-start;
  gap: var(--espace-xs);
  margin: 0;
  padding: var(--espace-s) var(--espace-m);
  background: var(--ivoire);
  border-top: 1px solid var(--sable);
  font-size: 0.9rem;
  color: var(--texte-secondaire);
}
.production__perte .ico { flex: none; margin-top: 0.15rem; color: var(--or-clair); }
.production__perte strong { color: var(--vert-900); }

/* Mon compte : une carte de visite (DEC-179). Le nom domine, centré, en
   empattements ; le type et la localité en sourdine dessous ; les lignes
   coordonnées sont légères ; le numéro non confirmé invite au lieu
   d'alarmer. */
.compte__visage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espace-xs);
  padding: var(--espace-s) 0 var(--espace-m);
  text-align: center;
}
.compte__portrait { width: 72px; height: 72px; margin-bottom: var(--espace-xs); }
.compte__initiales { font-size: 1.5rem; }
.compte__nom {
  margin: 0;
  font-family: var(--police-titre);
  font-size: 1.65rem;
  line-height: 1.15;
  color: var(--vert-900);
  text-wrap: balance;
}
.compte__sous { margin: 0; font-size: 0.9rem; color: var(--texte-secondaire); }
.compte__visage .badge { margin-top: var(--espace-xs); }

.compte__lignes { margin: 0; padding: 0; border-top: 1px solid var(--sable); }
.compte__lignes > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--espace-s);
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--sable);
}
.compte__lignes dt {
  margin: 0;
  flex: none;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texte-secondaire);
}
.compte__lignes dd {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.4rem;
  text-align: right;
}

.compte__invitation {
  margin-top: var(--espace-m);
  padding: var(--espace-s) var(--espace-m);
  background: var(--ivoire);
  border: 1px solid var(--sable);
  border-radius: var(--rayon-carte);
}
.compte__invitation p { margin: 0 0 var(--espace-s); font-size: 0.92rem; color: var(--vert-900); }
.compte__identite > .btn--tertiaire { justify-content: center; }

/* Déclarer en deux temps (DEC-180) : choisir sa parcelle, puis la voir
   parler — sa fiche sur fond ivoire, sa position, le chemin pour y aller. */
.choix-parcelle { display: flex; flex-direction: column; gap: var(--espace-xs); }
.choix-parcelle__option {
  display: flex;
  align-items: center;
  gap: var(--espace-s);
  min-height: 44px;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--sable);
  border-radius: var(--rayon-carte);
  cursor: pointer;
}
.choix-parcelle__option:has(input:checked) { border-color: var(--vert-700); background: var(--ivoire); }
.choix-parcelle__option input { flex: none; width: 20px; height: 20px; accent-color: var(--vert-700); }
.choix-parcelle__texte { display: flex; flex-direction: column; }
.choix-parcelle .btn { margin-top: var(--espace-s); }

.parcelle-choisie { background: var(--ivoire); border: 1px solid var(--sable); }
.parcelle-choisie__sur {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--vert-700);
}
.parcelle-choisie__sur a { font-size: 0.85rem; letter-spacing: 0; text-transform: none; }
.parcelle-choisie__nom {
  margin: 0.2rem 0 0;
  font-family: var(--police-titre);
  font-size: 1.35rem;
  color: var(--vert-900);
}
.parcelle-choisie__meta { margin: 0.15rem 0 var(--espace-s); font-size: 0.9rem; color: var(--texte-secondaire); }

.position-parcelle {
  display: flex;
  align-items: center;
  gap: var(--espace-xs);
  margin: 0 0 var(--espace-xs);
  font-variant-numeric: tabular-nums;
}
.position-parcelle__gestes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--espace-s);
  margin: 0 0 var(--espace-s);
}
.position-parcelle--absente { display: flex; align-items: center; gap: var(--espace-xs); }
.parcelle-du-relais { padding: var(--espace-xs) 0; border-top: 1px solid var(--sable); }

/* --- « Mes producteurs », le carnet du relais (DEC-203) ------------------
   Une carte par producteur, son visage en tête (photo, ou initiales),
   un liseré qui dit d'un coup d'œil qui attend un signe (doré) et qui est
   à jour (vert), les kilos annoncés en chiffres de titre sur crème. Le
   résumé en tête compte les deux files ; le lien vers les pratiques
   durables y trouve sa place au lieu de flotter sous le titre. */
.producteurs__resume {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--espace-xs);
  margin: var(--espace-s) 0 var(--espace-m);
}
.producteurs__chiffre {
  display: inline-flex; align-items: baseline; gap: 0.4rem;
  padding: 0.45rem 0.85rem; border-radius: var(--rayon-pilule);
  font-size: 0.86rem; font-weight: 700; white-space: nowrap;
}
.producteurs__chiffre strong { font-family: var(--police-titre); font-size: 1.3rem; line-height: 1; }
.producteurs__chiffre--relancer { background: var(--etat-actuel-bg); color: var(--etat-actuel-texte); }
.producteurs__chiffre--jour { background: var(--etat-fait-bg); color: var(--etat-fait-texte); }
.producteurs__pratiques {
  margin-left: auto; display: inline-flex; align-items: center; gap: 0.35rem;
  min-height: 44px; font-weight: 700; color: var(--vert-700); text-decoration: none;
}
.producteurs__pratiques:hover { text-decoration: underline; text-underline-offset: 3px; }

.producteur { position: relative; overflow: hidden; }
.producteur::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: var(--etat-fait-texte);
}
.producteur--a-relancer::before { background: var(--or); }
.producteur__entete {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "portrait identite" "badge badge";
  align-items: center; gap: var(--espace-s) var(--espace-m);
}
@media (min-width: 26rem) {
  .producteur__entete {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "portrait identite badge";
  }
}
.producteur__portrait {
  grid-area: portrait; width: 64px; height: 64px;
  border: 3px solid var(--carte); box-shadow: 0 0 0 2px var(--or);
  background: var(--ivoire);
}
.producteur__portrait--haut { object-position: center top; }
.producteur__portrait--centre { object-position: center center; }
.producteur__portrait--bas { object-position: center bottom; }
.producteur__identite { grid-area: identite; min-width: 0; }
.producteur__nom { font-family: var(--police-titre); font-size: 1.25rem; line-height: 1.15; margin: 0; }
.producteur__meta {
  color: var(--texte-secondaire); font-size: 0.86rem; font-weight: 600; margin-top: 0.25rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.1rem 0.9rem;
}
.producteur__meta > span { white-space: nowrap; display: inline-flex; align-items: center; gap: 0.3rem; }
.producteur__badge { grid-area: badge; justify-self: start; }
.producteur__parcelles { margin-top: var(--espace-s); }
.producteur__parcelles > summary {
  cursor: pointer; min-height: 44px; display: flex; align-items: center; gap: 0.35rem;
  font-weight: 700; color: var(--vert-700);
}
.producteur__attente {
  margin-top: var(--espace-s); padding: var(--espace-s) var(--espace-m);
  background: var(--creme); border: 1px solid var(--sable); border-radius: 14px;
}
.producteur__kilos { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem; margin: 0 0 var(--espace-xs); }
.producteur__kilos strong { font-family: var(--police-titre); font-size: 1.8rem; line-height: 1; color: var(--vert-900); }
.producteur__kilos span { color: var(--texte-secondaire); font-size: 0.86rem; font-weight: 600; }
.producteur__attente .carte__pied { border-top-color: var(--sable); }
.producteur__issue > summary {
  cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0 0.9rem; border-radius: var(--rayon-pilule);
  border: 1px solid var(--or); color: var(--or-fonce); font-weight: 700; font-size: 0.9rem;
}
.producteur__pied { margin-top: var(--espace-m); display: flex; flex-wrap: wrap; gap: var(--espace-xs); align-items: center; }
.producteur__pied .btn--primaire { flex: 1 1 auto; }
/* Un intitulé de tableau qui porte un visage (DEC-205) : le rond
   devant le nom, alignés, sans casser la colonne. */
.tableau__intitule--visage { display: flex; align-items: center; gap: 0.6rem; }
.tableau__intitule--visage .portrait { box-shadow: 0 0 0 1px var(--or); border-width: 2px; }

/* --- Lire les relais (DEC-206) -------------------------------------------
   Une carte par relais : neuf chiffres en cases sur ivoire, la commission
   en doré, les kilos reçus période par période en barres. Le liseré sable
   dit un relais qui n'a encore rien collecté. Sur les listes, des pastilles
   et des liens regroupent — aucun script. */
.relais-lecture {
  display: grid; gap: var(--espace-m);
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  margin-bottom: var(--espace-l);
}
.relais-carte { position: relative; overflow: hidden; }
.relais-carte::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: var(--vert-700);
}
.relais-carte--dort::before { background: var(--sable); }
.relais-carte__nom { font-family: var(--police-titre); font-size: 1.25rem; margin: 0; }
.relais-carte__villages {
  color: var(--texte-secondaire); font-size: 0.86rem; font-weight: 600;
  margin: 0.2rem 0 var(--espace-s);
}
.chiffres { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--espace-xs) var(--espace-s); }
.chiffre { padding: 0.55rem 0.7rem; background: var(--ivoire); border-radius: 12px; min-width: 0; }
.chiffre strong {
  display: block; font-family: var(--police-titre); font-size: 1.25rem; line-height: 1.1;
  color: var(--vert-900); overflow-wrap: anywhere;
}
.chiffre span {
  display: block; font-size: 0.74rem; font-weight: 700; color: var(--texte-secondaire);
  margin-top: 0.2rem; letter-spacing: 0.02em;
}
.chiffre--or strong { color: var(--or-fonce); }
.campagnes { margin-top: var(--espace-s); border-top: 1px solid var(--sable); padding-top: var(--espace-s); }
.campagnes p {
  margin: 0 0 0.35rem; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--or-fonce);
}
.barre {
  display: grid; grid-template-columns: 9rem 1fr 6rem; align-items: center; gap: 0.6rem;
  font-size: 0.86rem; font-weight: 700; margin: 0.25rem 0;
}
.barre__jauge { height: 12px; border-radius: 999px; background: var(--ivoire); overflow: hidden; }
.barre__jauge > i { display: block; height: 100%; background: var(--vert-700); border-radius: 999px; }
.barre--precedente .barre__jauge > i { background: var(--sable); }
.barre__valeur { text-align: right; font-family: var(--police-titre); font-size: 1.05rem; color: var(--vert-900); }

.grouper {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
  margin: 0 0 var(--espace-s); font-size: 0.86rem; font-weight: 700; color: var(--texte-secondaire);
}
.grouper a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 0.85rem;
  border-radius: var(--rayon-pilule); border: 1px solid var(--sable);
  color: var(--vert-700); text-decoration: none; background: var(--carte);
}
.grouper a.actif { background: var(--vert-700); color: var(--ivoire); border-color: var(--vert-700); }
.tableau__groupe th {
  background: var(--ivoire); color: var(--vert-900); font-family: var(--police-titre);
  font-size: 1.05rem; padding: 0.7rem 0.9rem; border-top: 2px solid var(--sable);
}
.tableau__groupe th small {
  font-family: inherit; font-size: 0.8rem; font-weight: 700;
  color: var(--texte-secondaire); margin-left: 0.6rem;
}

.villages { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 var(--espace-m); }
.villages a {
  display: inline-flex; align-items: center; gap: 0.35rem; min-height: 40px; padding: 0 0.85rem;
  border-radius: var(--rayon-pilule); border: 1px solid var(--sable); background: var(--carte);
  color: var(--vert-700); font-weight: 700; font-size: 0.88rem; text-decoration: none;
}
.villages a.actif { background: var(--vert-700); border-color: var(--vert-700); color: var(--ivoire); }
.villages a b { font-family: var(--police-titre); font-weight: 400; font-size: 1rem; }

/* Les origines d'un engagement, saisies d'un coup (DEC-154). Trois
   lignes viennent du serveur ; le bouton qui en ajoute une quatrieme
   n'apparait que si le script tourne -- il nait `hidden`. */
.jeu-origines { border: 0; padding: 0; margin: 0 0 var(--espace-m); }
.jeu-origines > legend {
  font-size: 0.78rem; font-weight: 700; color: var(--texte-secondaire);
  padding: 0; margin-bottom: 0.35rem;
}
/* Le nom prend la place, le prix tient sa colonne : on vient ici pour
   comparer des prix, pas pour les chercher (lecon de DEC-152). */
.ligne-origine {
  display: grid;
  grid-template-columns: 1fr 6rem auto;
  gap: 0.4rem;
  align-items: center;
  margin-bottom: 0.45rem;
}
.ligne-origine select,
.ligne-origine input {
  min-height: 44px; width: 100%;
  border: 1px solid var(--sable); border-radius: 10px;
  padding: 0.5rem 0.7rem; font: inherit; font-size: 0.9rem;
  background: var(--carte); color: var(--texte);
}
.ligne-origine input {
  text-align: right; font-variant-numeric: tabular-nums; font-weight: 600;
}
.ligne-origine__unite {
  font-size: 0.8rem; color: var(--texte-secondaire); white-space: nowrap;
}
.ligne-origine__erreur { grid-column: 1 / -1; margin: 0; }
/* Sous 480 px, trois colonnes ne tiennent plus : le prix passe dessous
   plutot que d'ecraser le nom du cafe. */
@media (max-width: 480px) {
  /* Empiles, le cafe et son prix se liraient comme deux champs sans
     rapport. Le cadre leger dit qu'ils vont ensemble. */
  .ligne-origine {
    grid-template-columns: 1fr auto;
    background: var(--ivoire);
    border: 1px solid var(--sable);
    border-radius: 12px;
    padding: 0.5rem;
    margin-bottom: 0.6rem;
  }
  .ligne-origine select { grid-column: 1 / -1; }
}

/* Les titres portent la police a empattements (DEC-158) : c'est elle qui
   donne le ton « maison de cafe ». Les chiffres et le corps restent en
   Montserrat, qui se lit mieux en petit et aligne mieux. */
h1, h2, h3, .produit__nom, .c1__terroir {
  font-family: var(--police-titre);
  letter-spacing: 0;
}

/* Les deux sorties d'une tournee (DEC-162) : cote a cote des la tablette,
   empilees au telephone du chauffeur. */
.tournee-sorties { display: flex; gap: var(--espace-s); flex-wrap: wrap; margin: var(--espace-m) 0 var(--espace-xs); }
.tournee-sorties .btn { flex: 1 1 14rem; }
.tournee-sorties__note { margin: 0 0 var(--espace-m); }

/* « Naviguer jusqu'a la parcelle » (DEC-163) : sous les coordonnees, une
   cible tactile pour le relais sur le terrain. */
.parcelle__naviguer { margin-top: var(--espace-xs); }

/* --- Ecrire a Sankofa (DEC-246) ------------------------------------------
   Le formulaire de contact du pied de page. Mobile d'abord, comme toute
   cette feuille : une colonne, l'apartee WhatsApp dessous. Les deux
   colonnes viennent avec la largeur, plus bas. */

.contact { display: grid; gap: var(--espace-l); align-items: start; }
.contact__duo { display: grid; gap: var(--espace-s); }
.contact__mention {
  font-size: 0.8rem; color: var(--texte-secondaire);
  margin: var(--espace-s) 0 0;
}
.contact__aparte { background: var(--creme); border: 1px solid var(--sable); }
.contact__aparte h2 { font-family: var(--police-titre); font-size: 1.1rem; margin: 0 0 var(--espace-s); }
.contact__aparte p { font-size: 0.92rem; line-height: 1.65; }
.contact__delai {
  display: flex; align-items: center; gap: 0.55rem;
  font-size: 0.85rem; color: var(--texte-secondaire); margin: var(--espace-s) 0 0;
}

/* Le leurre anti-robot : hors de l'ecran, et hors du parcours au clavier
   grace au tabindex pose par le formulaire. `visuellement-cache` ne
   conviendrait pas — elle garde le champ atteignable, donc remplissable
   par une personne, ce qui ferait refuser son message. */
.contact__leurre {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

/* --- Le pied de page (DEC-052, elargi par DEC-246) -----------------------
   Trois blocs empiles au telephone, dans l'ordre ou on s'en sert : qui
   edite, comment joindre, ce qui engage. Trois colonnes plus loin. */

.pied {
  margin-top: var(--espace-xl);
  padding: 1.9rem var(--espace-m) 0;
  background: var(--vert-900);
  color: var(--texte-inverse);
}
.pied__corps { display: grid; gap: var(--espace-l); align-items: start; }

/* Qui edite. Le logo est celui pour fond sombre (DEC-242) : la version
   claire disparaitrait sur le vert profond. */
.pied__logo { display: block; width: 150px; height: auto; margin-bottom: 0.9rem; }
.pied__produit {
  font-family: var(--police-titre); font-size: 1.25rem; font-weight: 600;
  display: block; margin-bottom: 0.7rem;
}
.pied__editeur p {
  margin: 0 0 0.45rem; font-size: 0.9rem; line-height: 1.7;
  color: rgba(246, 244, 239, 0.82);
}
.pied__editeur strong { color: var(--texte-inverse); font-weight: 600; }
.pied__marque { color: var(--or-clair); font-weight: 600; }
.pied__bce { font-variant-numeric: tabular-nums; }

.pied__titre {
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--or-clair);
  margin: 0 0 0.9rem;
}
.pied__joindre, .pied__legal {
  border-top: 1px solid rgba(246, 244, 239, 0.14);
  padding-top: var(--espace-m);
}

/* Les gestes de contact. Pleine largeur et 48 px de haut au telephone :
   on les touche au pouce comme le reste (DEC-186). */
.pied__gestes { display: flex; flex-direction: column; gap: 0.7rem; }
.pied .pied__btn {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 48px; padding: 0 1.25rem; border-radius: var(--rayon-pilule);
  font-size: 0.95rem; font-weight: 600;
  background: transparent; color: var(--texte-inverse);
  border: 1px solid rgba(246, 244, 239, 0.42); text-decoration: none;
}
.pied .pied__btn:hover { border-color: var(--or-clair); color: var(--or-clair); }
.pied .pied__btn--fort { background: var(--or); color: var(--vert-900); border-color: var(--or); }
.pied .pied__btn--fort:hover {
  background: var(--or-clair); border-color: var(--or-clair); color: var(--vert-900);
}

/* Ce qui engage. */
.pied__legal nav { display: flex; flex-direction: column; }
.pied__legal a {
  color: rgba(246, 244, 239, 0.86);
  font-size: 0.9rem; font-weight: 500; text-decoration: none;
  min-height: 44px; display: flex; align-items: center;
  border-bottom: 1px solid rgba(246, 244, 239, 0.08);
}
.pied__legal a:last-child { border-bottom: 0; }
.pied__legal a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.pied__attente { opacity: 0.62; font-style: italic; }

.pied__ourlet {
  margin-top: var(--espace-m); padding: 1.1rem 0 1.6rem;
  border-top: 1px solid rgba(246, 244, 239, 0.14);
  text-align: center;
}
.pied__ourlet p { margin: 0; font-size: 0.8rem; color: rgba(246, 244, 239, 0.62); }

/* Sur un ecran de profil, la barre du bas flotte : le pied doit lui
   laisser la place plutot que de se glisser dessous. */
.page--profil ~ .pied, body:has(.nav-profil) .pied { padding-bottom: 4rem; }

/* --- Les deux ecrans larges (DEC-246) ------------------------------------
   Regroupees ici, avec le reste des adaptations d'ecran de cette feuille. */

@media (min-width: 48rem) {
  .contact__mention { max-width: 30rem; }

  .pied { padding: 2.75rem var(--espace-l) 0; }
  .pied__corps {
    max-width: 74rem; margin: 0 auto;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 3.5rem;
  }
  .pied__logo { width: 176px; }
  .pied__joindre, .pied__legal { border-top: 0; padding-top: 0.35rem; }
  .pied__gestes { align-items: flex-start; }
  .pied .pied__btn { display: inline-flex; width: auto; min-height: 46px; font-size: 0.88rem; }
  .pied__legal a { min-height: 34px; display: inline-flex; border-bottom: 0; }
  .pied__ourlet { text-align: left; margin-top: 2.5rem; }
  .pied__ourlet p { max-width: 74rem; margin: 0 auto; }
}

/* L'ecran « Ecrire a Sankofa » porte un formulaire et son apartee cote a
   cote : la colonne de lecture de 36 rem ne les tient pas. Il prend donc
   sa largeur comme le bureau prend la sienne — et seulement la ou elle
   existe, sinon les champs se retrouvent a cinquante pixels. */
@media (min-width: 64rem) {
  .page--contact { max-width: 62rem; }
  .contact { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .contact__duo { grid-template-columns: 1fr 1fr; gap: var(--espace-m); }
}