/*
 * DiaMap Web - socle de style commun.
 *
 * Règle : tout ce qui apparaît sur deux écrans ou plus vit ici ; une règle
 * propre à un seul écran reste dans son gabarit.
 *
 * Le vocabulaire des variables est celui de DiaMap CRM V2 (`--bg-card`,
 * `--text-muted`, `--radius`, `--badge-*`...), pour qu'un gabarit repris du
 * CRM s'affiche ici sans retouche ; les anciens noms français subsistent en
 * alias. Couleurs d'état, rayons et ombres viennent du CRM, mais l'accent
 * reste le vert de DiaMap Web.
 */

@font-face {
  font-family: "Nunito Sans";
  src: url("../fonts/nunito-sans.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito Sans";
  src: url("../fonts/nunito-sans-italique.woff2") format("woff2");
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Grille typographique : CINQ roles, un par niveau de lecture.
     Elle en comptait quatre, et l'ecart entre le corps et le libelle etait
     trop grand : les listes denses - lignes de barres, cellules de tableau,
     meta d'une ligne - tombaient soit a 14,4 px, ou elles pesaient autant
     que le texte courant, soit a 11,5 px, ou elles se lisaient comme une
     note de bas de page. La maquette emploie 13 px a cet endroit, et elle a
     raison : c'est la taille d'une donnee qu'on parcourt.

     La regle tient toujours : cinq roles, et rien entre deux. Une taille
     ecrite en clair reste une faute. */
  --t-page: 1.75rem;       /* 28 px   - TITRE D'ECRAN, et grand chiffre */
  --t-affiche: 1.375rem;   /* 22 px   - AFFICHE : nom de marque, chiffre d'une fiche */
  --t-section: 0.97rem;    /* 15,5 px - TITRE de section, de carte, de panneau */
  --t-corps: 0.9rem;       /* 14,4 px - TEXTE courant, champ, bouton */
  --t-dense: 0.81rem;      /* 13 px   - LISTE parcourue : barres, cellules, meta */
  --t-libelle: 0.72rem;    /* 11,5 px - LIBELLE de colonne, en capitales espacees */

  /* Familles de caracteres : nommees ici, jamais ecrites en clair dans un
     gabarit. Aucune n'est chargee depuis le reseau, les listes ne citent
     que des familles presentes sur les systemes. */
  --police: "Nunito Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --police-titre: var(--police);
  --police-code: ui-monospace, Menlo, Consolas, monospace;

  /* Hauteur du bandeau d'atelier. Ici parce que la boite de commandes
     posee sur la carte doit se placer juste en dessous. */
  --h-bandeau-atelier: 3rem;

  /* Anciens noms, ramenes au role equivalent. Sans valeur propre : un alias
     ne peut pas diverger. Ils s'eteindront ecran par ecran. */
  --t-grande: var(--t-page);
  --t-moyenne: var(--t-section);
  --t-petite: var(--t-dense);
  --t-chiffre: var(--t-page);
  --t-titre: var(--t-page);
  --t-texte: var(--t-corps);
  --t-note: var(--t-dense);

  /* La palette, commune au web et au logiciel de bureau. Chaque teinte a un
     sens et un seul, ce qui permet de lire un ecran sans legende : le vert
     porte l'action et la marque, le marine les titres et l'etat
     contractuel, le rouge la seule suppression.

     Ces jetons sont la seule source de couleur de la solution ; une valeur
     ecrite en clair dans un gabarit cesse de suivre la charte a la premiere
     retouche. */

  /* ---- La marque ---- */
  --vert: #5aa832;        /* action, marque, icones */
  --vert-fonce: #2f6b1e;  /* texte vert, survol */
  /* Le vert CLAIR n'est pas une quatrieme teinte de marque : il n'existe
     que pour le degrade de l'etoile de l'assistant, qui va du clair au
     fonce. Une seule couleur ne fait pas un degrade. */
  --vert-clair: #8cc56a;
  --vert-pale: #eaf4e2;   /* fonds actifs, pastilles */
  --marine: #1b2e4b;      /* titres, zone contractuelle */
  --ambre: #e8aa3d;       /* a valider, alertes */
  --rouge: #b3261e;       /* suppression uniquement */

  /* ---- Les surfaces et le texte (theme clair) ---- */
  --bg-page: #f4f6f5;
  --bg-card: #ffffff;
  --bg-survol: #f7f9f6;   /* survol d'une ligne de tableau */
  --text: #16233f;
  --text-muted: #667085;
  --text-faint: #98a2a8;
  --border: #e2e7e3;
  /* La fleche d'une liste deroulante, dessinee comme les icones de
     `_icone.html` (trait, bouts ronds) plutot que la fleche du systeme,
     qui ne doit rien a la charte. Une image ne prend pas `currentColor` :
     la teinte (`--text-muted`) est recopiee ici a la main, et change avec
     le theme comme les autres jetons - voir les deux blocs sombres. */
  --fleche-liste: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667085' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  /* Les pictogrammes de zoom de MapLibre sont peints en dur, gris fonce,
     dans l'image livree par la bibliotheque : sur le verre depoli sombre
     ils s'y noient. Vide sur fond clair, il les retourne sur fond sombre -
     voir les deux blocs sombres. */
  --filtre-icone-carte: ;
  /* QUATRE gris de trait, un par role - il n'y en avait qu'un, et les cartes
     paraissaient cerclees pendant que les filets de liste paraissaient
     lourds. Un trait qui separe deux ecrans n'a pas le meme poids qu'un
     trait entre deux lignes d'une meme liste. */
  --border-carte: #e9ecea;   /* le bord d'une CARTE, plus doux qu'un separateur */
  --filet: #f0f2f1;          /* entre deux lignes d'une meme liste */
  /* La jauge qui ne dit qu'une grandeur, jamais un jugement : ni verte ni
     ambre, et pas marine non plus - le marine est la couleur d'un etat
     (zone contractuelle), il ne se prete pas a une mesure. Un gris tire
     vers le vert, de la meme famille que les filets de la solution. */
  --jauge-neutre: #8d9a93;
  --border-champ: #c9d2cb; /* bordure d'un champ de saisie : elle doit se VOIR */

  /* L'action est le vert, pas le marine : c'est ce sur quoi on clique. */
  --primary: var(--vert);
  --primary-hover: #4a8f28;
  --primary-light: var(--vert-pale);
  --accent: var(--vert);
  --accent-soft: var(--vert-pale);

  /* Etats d'une etude. Le tag reste neutre, seule la pastille porte la
     couleur : un tableau de vingt lignes reste calme. */
  --tag-fond: #fafbfa;
  --tag-trait: #e3e8e4;
  --tag-texte: #33415c;
  --etat-brouillon: var(--text-faint);
  --etat-a-valider: var(--ambre);
  --etat-validee: var(--vert);
  --etat-contractuelle: var(--marine);

  /* ---- Les etats de message ---- */
  --succes: var(--vert-fonce);   --succes-fond: var(--vert-pale);  --succes-trait: #c8e8b4;
  --alerte: #b6791d;             --alerte-fond: #fcf1de;           --alerte-trait: #eed4ab;
  --danger: var(--rouge);        --danger-fond: #fbeaea;           --danger-trait: #f0c9c5;
  --info: #185fa5;               --info-fond: #e6f1fb;

  /* Trois rayons, un par famille d'objet. Les melanger donne un ecran ou
     rien n'a l'air de la meme famille. */
  --rayon-champ: 8px;
  --rayon-bouton: 9px;
  --rayon-carte: 16px;
  --rayon: var(--rayon-carte);
  --rayon-petit: var(--rayon-champ);
  --radius: var(--rayon-carte);

  --ombre-carte: 0 1px 3px rgba(22, 35, 63, .05);       /* au repos : elle se pose a peine */
  --ombre-levee: 0 8px 24px rgba(22, 35, 63, .07);      /* au survol : la carte se souleve */
  --ombre-flottant: 0 10px 30px rgba(16, 24, 32, .10);  /* modale, menu, panneau pose sur la carte */
  --ombre-bouton: 0 2px 6px rgba(90, 168, 50, .28);    /* le bouton primaire seul */
  --ombre: var(--ombre-carte);
  --shadow-card: var(--ombre-carte);

  /* Zones de chalandise : memes couleurs sur la carte, le formulaire et le
     tableau, c'est ce qui relie un chiffre a ce qu'on voit. */
  --zone-proximite: #dc4a37;
  --zone-combat: #f97316;
  --zone-complementaire: #facc15;
  /* Trois couleurs de CARTE, ecrites en clair jusqu'ici dans le gabarit de
     l'atelier. MapLibre ne resout pas les variables CSS : elles se lisent
     par `charte("--nom")`, comme les zones ci-dessus.

     Le FILET des mailles est un creme, et non un gris : sur un plan clair
     comme sur une vue aerienne, il separe sans assombrir.

     HORS ZONE : les mailles qu'on peut encore ajouter. Elles doivent se
     voir - sinon on ne sait pas qu'on peut les prendre - sans se
     confondre avec les trois zones.

     SUPERPOSEE : la seconde couche thematique, dessinee en cercles
     par-dessus un aplat. Deliberement hors de la gamme des zones (rouge,
     orange, jaune) et du vert de la marque : c'est une autre nature de
     donnee, elle ne doit pas se lire comme une quatrieme zone. */
  --carte-filet: #f4f1ea;
  --carte-hors-zone: #94a3b8;
  --carte-superposee: #4a3aa7;
  /* Le contour administratif (commune, departement...) que la carte
     partagee dessine sous sa couche thematique - gris neutre, sans lien
     avec les trois couleurs ci-dessus. Ecrites en clair jusqu'ici dans
     `carte_diamap.js`, lues par `charte("--nom")` comme le reste. */
  --carte-contour-fond: #94a3b8;
  --carte-contour-trait: #8b98a8;

  /* LA RAMPE DE CHOROPLETHE : cinq degres, du plus faible au plus fort.
     Un aplat colore par valeur demande une progression CONTINUE, ce que
     la palette de marque ne donne pas - le vert, le marine et l'ambre
     ont chacun un sens, et les melanger ferait lire une hierarchie la ou
     il n'y en a pas.

     Elle est batie sur le MARINE de la charte, eclairci par paliers :
     une carte de DiaMap doit se reconnaitre comme une carte de DiaMap,
     et un bleu generique n'appartenait a personne.

     Lue par `charte("--rampe-N")` : MapLibre ne resout pas les variables
     CSS. */
  /* LA RAMPE D'UNE COMPOSITION : la famille du vert de la marque, du clair
     au fonce. Une rampe ORDONNEE et non huit couleurs differentes : les
     tranches d'age ou les categories sociales ont un ordre, et une couleur
     qui le suit se lit encore imprimee en noir et blanc. */
  --pile-1: #eaf4e2;  --pile-2: #cfe7bd;  --pile-3: #aed898;  --pile-4: #8ac873;
  --pile-5: #6bb54f;  --pile-6: #5aa832;  --pile-7: #47862a;  --pile-8: #356321;
  --rampe-1: #dfe6ee;
  --rampe-2: #b3c2d5;
  --rampe-3: #7c92b1;
  --rampe-4: #45608a;
  --rampe-5: var(--marine);

  /* Anciens noms, en alias. `--bleu` reste du bleu (le marine, qui porte les
     memes titres qu'avant) ; c'est l'action qui est passee au vert. Un
     gabarit qui employait `--bleu` pour un bouton doit passer a `--primary`
     lors de la reprise de son ecran. */
  --bleu: var(--marine);
  --bleu-fonce: #12203a;
  --ardoise: var(--tag-texte);
  --encre: var(--text);
  --texte-doux: var(--text-muted);
  --texte-discret: var(--text-faint);
  --fond: var(--bg-page);
  --blanc: var(--bg-card);
  --trait: var(--border);
  --trait-clair: #eef3ea;
  --survol: var(--bg-survol);
  --vert-bg: var(--succes-fond);    --vert-text: var(--succes);
  --rouge-bg: var(--danger-fond);   --rouge-text: var(--danger);
  --ambre-bg: var(--alerte-fond);   --ambre-text: var(--alerte);
  --gris-bg: #eef1f0;               --gris-text: var(--text-muted);

  /* Texte pose SUR une couleur pleine (bouton vert, pastille marine). Nomme,
     il cesse d'etre une valeur en clair de plus, et il se corrige en un
     endroit si un theme demande autre chose que du blanc. */
  --sur-couleur: #ffffff;
  --voile-clair: rgba(255, 255, 255, .25);
  --marine-fond: #e7ecf1;

  /* Les auteurs : six teintes DISTINCTES, jamais interpretees. Elles ne
     disent pas un etat, elles distinguent des personnes - deux chargés
     d'expansion voisins doivent se reconnaitre d'un coup d'oeil. */
  --auteur-1: #7a56c2;  --auteur-2: #12897a;  --auteur-3: #d1701f;
  --auteur-4: #2f6bb0;  --auteur-5: #b03a6e;  --auteur-6: #4a8a2f;

  /* Zone contractuelle : elle etait VIOLETTE partout, seule couleur de
     l'application a n'appartenir a aucune famille de la charte. La maquette
     lui donne le marine, qui dit deja « acquis, fige, contractuel ». */
  --marine-trait: #cdd6e0;
  --marine-voile: rgba(27, 46, 75, .30);

  /* « Vivant » : l'etat courant d'une zone, oppose a son contour FIGE. Le
     vert dit deja l'action et le marine le contrat ; il fallait une
     troisieme voix, et ce n'est ni un succes ni une alerte. */
  --vivant: #0f8a7d;  --vivant-fonce: #0f5f56;  --vivant-fond: #f0f8f7;
  /* Les deux natures d'un point de vente, dans la charte : anneau des reperes,
     legende, etiquette de la fiche. Terracotta prend du CA, vert en amene. */
  --nature-concurrent: #c8553d;
  --nature-attracteur: var(--vert);

  /* Les concurrents, par nature de magasin (bulles de cannibalisation). */
  --concurrent-gss: var(--nature-concurrent);  --concurrent-gsa: var(--nature-attracteur);

  /* Poses sur la carte : un panneau lisible par-dessus le fond de plan, et
     l'ombre qui detache un repere de ce qu'il recouvre. */
  --voile-carte: rgba(255, 255, 255, .94);
  --ombre-repere: 0 1px 5px rgba(16, 42, 67, .34);

  /* Les ombres, par FORCE et non par recette. Une trentaine de `rgba` a peine
     differents se promenaient dans les gabarits ; trois suffisent, et une
     ombre qui change d'un ecran a l'autre se remarque plus qu'elle n'aide. */
  --ombre-douce: rgba(16, 42, 67, .10);
  --ombre-moyenne: rgba(16, 42, 67, .22);
  --ombre-forte: rgba(16, 42, 67, .40);
  --info-bg: var(--info-fond);
  --haute: var(--succes);      --haute-bg: var(--succes-fond);
  --moyenne: var(--alerte);    --moyenne-bg: var(--alerte-fond);
  --basse: var(--danger);      --basse-bg: var(--danger-fond);
  --tres-haute: var(--rouge);  --tres-haute-bg: var(--danger-fond);
  --tres-haute-text: var(--rouge);
  --alerte-trait: #eed4ab;

  /* Le rail, clair depuis la charte. L'entree active se marque par un fond
     vert pale et un lisere vert, pas par un contraste de fond. */
  --rail: var(--bg-card);
  --rail-trait: var(--border);
  --rail-encre: var(--text);
  --rail-doux: var(--text-faint);
  --rail-lien: var(--tag-texte);
  --rail-survol: #f0f4ee;
  --rail-actif-fond: var(--vert-pale);
  --rail-actif-texte: var(--vert-fonce);
  /* 264 et non 248 : « Zones contractuelles » est la plus longue entree du
     menu, et elle se faisait couper - « Zones contractue... », le nom d'un
     module tronque dans sa propre navigation. Seize pixels de plus la font
     tenir, et le contenu ne les regrette pas. */
  --rail-largeur: 264px;
  --rail-largeur-replie: 64px;
  /* Ancien rail sombre, en alias le temps des reprises d'ecran. */
  --rail-2: var(--rail-survol);
  --rail-actif: var(--rail-actif-fond);
  /* L'or Diamart, reserve a la pastille du super administrateur. */
  --or: #c79433;
}

/* ================================================================
   LE THEME SOMBRE.

   Seuls les JETONS DE BASE sont redefinis : tout ce qui les emploie
   suit sans une ligne de plus. C'est ce que la couche d'alias garantit.

   Trois etats et non deux. Sans choix explicite, on suit le systeme
   (`prefers-color-scheme`) ; avec un choix, il l'emporte dans les DEUX
   sens - d'ou le `:not([data-theme="light"])` sous la media query, qui
   laisse un clair choisi gagner sur un systeme sombre.
   ================================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { 
  --vert: #8cc56a;
  --vert-fonce: #a6d98a;
  --vert-pale: #22301f;
  --marine: #c5cfd8;
  --ambre: #e0a54f;
  --rouge: #e08585;

  --bg-page: #1a222b;
  --bg-card: #232b35;
  --bg-survol: #2e3947;
  --text: #e8edf2;
  --text-muted: #9aa7b2;
  --text-faint: #7d8b98;
  --border: #344150;
  --fleche-liste: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa7b2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --filtre-icone-carte: invert(1);
  --border-carte: #303c4a;
  /* La meme rampe, assombrie : sur fond noir, les teintes claires du mode
     jour brulent et les segments se confondent. */
  --pile-1: #24331d;  --pile-2: #2f4526;  --pile-3: #3b5730;  --pile-4: #48693a;
  --pile-5: #567c45;  --pile-6: #659050;  --pile-7: #79a463;  --pile-8: #90ba7c;
  --filet: #2b3540;
  --jauge-neutre: #7d8b83;
  --border-champ: #3c4a5a;

  --primary: var(--vert);
  --primary-hover: #a6d98a;
  --primary-light: var(--vert-pale);
  --accent: var(--vert);
  --accent-soft: var(--vert-pale);

  --tag-fond: #2a3542;
  --tag-trait: #3c4a5a;
  --tag-texte: #b9c4ce;
  --etat-brouillon: var(--text-faint);
  --etat-a-valider: var(--ambre);
  --etat-validee: var(--vert);
  --etat-contractuelle: #8fa8c4;

  --succes: #8cc56a;   --succes-fond: #22301f;  --succes-trait: #3d5c30;
  --alerte: #e0a54f;   --alerte-fond: #2c2415;  --alerte-trait: #4a3c1e;
  --danger: #e08585;   --danger-fond: #2c1717;  --danger-trait: #5a2f2f;
  --info: #7cb8e8;     --info-fond: #12283c;

  --ombre-carte: 0 1px 2px rgba(0, 0, 0, .30);
  --ombre-levee: 0 6px 18px rgba(0, 0, 0, .45);
  --ombre-flottant: 0 12px 32px rgba(0, 0, 0, .5);
  --ombre-bouton: 0 2px 6px rgba(140, 197, 106, .22);
  --ombre: var(--ombre-carte);
  --shadow-card: var(--ombre-carte);

  --trait-clair: #2b3644;
  --gris-bg: #2a3542;
  --marine-fond: #2a3542;
  --voile-clair: rgba(255, 255, 255, .18);
  --marine-trait: #3d4a5a;
  --marine-voile: rgba(197, 207, 216, .28);
  --vivant: #4fb3a4;  --vivant-fonce: #7fcdc1;  --vivant-fond: #1e2b2a;
  --voile-carte: rgba(30, 38, 48, .94);
  --ombre-repere: 0 1px 5px rgba(0, 0, 0, .5);
  --ombre-douce: rgba(0, 0, 0, .28);
  --ombre-moyenne: rgba(0, 0, 0, .45);
  --ombre-forte: rgba(0, 0, 0, .65);
  --bleu-fonce: #9fb3c8;
  --or: #d8ad55;

  --rail: var(--bg-card);
  --rail-trait: var(--border);
  --rail-encre: var(--text);
  --rail-doux: var(--text-muted);
  --rail-lien: #c5cfd8;
  --rail-survol: #2e3947;
  --rail-actif-fond: var(--vert-pale);
  --rail-actif-texte: var(--vert);
 }
}
:root[data-theme="dark"] { 
  --vert: #8cc56a;
  --vert-fonce: #a6d98a;
  --vert-pale: #22301f;
  --marine: #c5cfd8;
  --ambre: #e0a54f;
  --rouge: #e08585;

  --bg-page: #1a222b;
  --bg-card: #232b35;
  --bg-survol: #2e3947;
  --text: #e8edf2;
  --text-muted: #9aa7b2;
  --text-faint: #7d8b98;
  --border: #344150;
  --fleche-liste: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa7b2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  --filtre-icone-carte: invert(1);
  --border-carte: #303c4a;
  /* La meme rampe, assombrie : sur fond noir, les teintes claires du mode
     jour brulent et les segments se confondent. */
  --pile-1: #24331d;  --pile-2: #2f4526;  --pile-3: #3b5730;  --pile-4: #48693a;
  --pile-5: #567c45;  --pile-6: #659050;  --pile-7: #79a463;  --pile-8: #90ba7c;
  --filet: #2b3540;
  --jauge-neutre: #7d8b83;
  --border-champ: #3c4a5a;

  --primary: var(--vert);
  --primary-hover: #a6d98a;
  --primary-light: var(--vert-pale);
  --accent: var(--vert);
  --accent-soft: var(--vert-pale);

  --tag-fond: #2a3542;
  --tag-trait: #3c4a5a;
  --tag-texte: #b9c4ce;
  --etat-brouillon: var(--text-faint);
  --etat-a-valider: var(--ambre);
  --etat-validee: var(--vert);
  --etat-contractuelle: #8fa8c4;

  --succes: #8cc56a;   --succes-fond: #22301f;  --succes-trait: #3d5c30;
  --alerte: #e0a54f;   --alerte-fond: #2c2415;  --alerte-trait: #4a3c1e;
  --danger: #e08585;   --danger-fond: #2c1717;  --danger-trait: #5a2f2f;
  --info: #7cb8e8;     --info-fond: #12283c;

  --ombre-carte: 0 1px 2px rgba(0, 0, 0, .30);
  --ombre-levee: 0 6px 18px rgba(0, 0, 0, .45);
  --ombre-flottant: 0 12px 32px rgba(0, 0, 0, .5);
  --ombre-bouton: 0 2px 6px rgba(140, 197, 106, .22);
  --ombre: var(--ombre-carte);
  --shadow-card: var(--ombre-carte);

  --trait-clair: #2b3644;
  --gris-bg: #2a3542;
  --marine-fond: #2a3542;
  --voile-clair: rgba(255, 255, 255, .18);
  --marine-trait: #3d4a5a;
  --marine-voile: rgba(197, 207, 216, .28);
  --vivant: #4fb3a4;  --vivant-fonce: #7fcdc1;  --vivant-fond: #1e2b2a;
  --voile-carte: rgba(30, 38, 48, .94);
  --ombre-repere: 0 1px 5px rgba(0, 0, 0, .5);
  --ombre-douce: rgba(0, 0, 0, .28);
  --ombre-moyenne: rgba(0, 0, 0, .45);
  --ombre-forte: rgba(0, 0, 0, .65);
  --bleu-fonce: #9fb3c8;
  --or: #d8ad55;

  --rail: var(--bg-card);
  --rail-trait: var(--border);
  --rail-encre: var(--text);
  --rail-doux: var(--text-muted);
  --rail-lien: #c5cfd8;
  --rail-survol: #2e3947;
  --rail-actif-fond: var(--vert-pale);
  --rail-actif-texte: var(--vert);
 }

/* ---------- La barre de defilement ----------
   Reprise partout, pas seulement sur le rail : sans cette regle, chaque
   tableau large ou volet long affichait la barre par defaut du systeme,
   grise et epaisse, qui ne doit rien a la charte. Fine, discrete au repos,
   elle se teinte de l'accent au survol - le meme geste que les liens et
   les boutons discrets. `scrollbar-color` couvre Firefox, les pseudo-
   elements couvrent les navigateurs a moteur Chromium. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: var(--vert); }

/* Un texte selectionne, meme reflexe : au bleu du systeme sans cette
   regle, seule tache bleue d'un ecran vert. */
::selection { background: var(--vert-pale); color: var(--text); }

/* ---------- La carte, brique de base ----------
   Tout ce qui est un objet - un flux d'import, une source à géocoder, un
   outil d'administration - se pose sur une carte. */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.25rem 1.5rem;
  margin: 1rem 0;
}

/* ---------- Pastilles d'état ----------
   Noms repris du CRM (`badge-vert`, `badge-ambre`...) : un même état porte
   ainsi la même couleur dans les deux produits. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.18rem 0.6rem;
  border-radius: 100px;
  font-size: var(--t-note);
  font-weight: 500;
  white-space: nowrap;
}
.badge-vert { background: var(--vert-bg); color: var(--vert-text); }
.badge-rouge { background: var(--rouge-bg); color: var(--rouge-text); }
.badge-ambre { background: var(--ambre-bg); color: var(--ambre-text); }
.badge-gris { background: var(--gris-bg); color: var(--gris-text); }
.badge-bleu { background: var(--info-bg); color: var(--info); }

/* ---------- Boutons ----------
   Un bouton d'action dangereuse est discret, à texte rouge, jamais rouge
   plein : un bouton massif attire le clic, et on veut l'inverse. */
/* ---------- LES BOUTONS ----------
   Cinq variantes, et un seul bouton PRIMAIRE par ecran : c'est ce qui
   dit ou porte l'action principale. Le rouge ne sort que sur une
   suppression. */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  background: var(--primary);
  color: var(--sur-couleur);
  border: 1px solid transparent;
  border-radius: var(--rayon-bouton);
  padding: .625rem 1.125rem;
  font-family: inherit;
  font-size: var(--t-dense);
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--ombre-bouton);
  transition: background .12s ease, border-color .12s ease, color .12s ease,
              box-shadow .12s ease;
}
.bouton:hover { background: var(--primary-hover); color: var(--sur-couleur);
  box-shadow: 0 3px 10px rgba(90, 168, 50, .34); }
.bouton:active { transform: translateY(1px); box-shadow: var(--ombre-carte); }
.bouton:focus-visible { outline: 2px solid var(--vert-fonce); outline-offset: 2px; }

/* Le DISCRET n'a ni fond colore ni ombre : c'est un choix de second rang,
   pose a cote du primaire, et deux boutons qui pesent pareil ne se choisissent
   pas. Son poids de trait descend a 600 - la maquette.

   `.secondaire` : meme geste, nom pris ailleurs dans le gabarit. Sans regle
   generique il ne portait que sa specificite propre a un ecran (liste des
   etudes, atelier...) - hors de ces ecrans le bouton restait sans style,
   au gris du navigateur, a cote d'« Enregistrer » qui lui a sa charte. */
.bouton-discret, .secondaire { background: var(--bg-card); color: var(--marine);
  border-color: var(--border-champ); font-weight: 600;
  padding: .625rem 1rem; box-shadow: none; }
.bouton-discret:hover, .secondaire:hover { background: var(--bg-card); border-color: var(--vert);
  color: var(--vert-fonce); box-shadow: none; }

/* Tertiaire : une action de second rang, sans cadre, qui ne dispute pas
   la place au bouton primaire. */
.bouton-tertiaire { background: none; color: var(--vert-fonce); border-color: transparent; box-shadow: none; }
.bouton-tertiaire:hover { background: var(--vert-pale); color: var(--vert-fonce); }

.bouton-danger { background: var(--bg-card); color: var(--danger); border-color: var(--danger-trait); box-shadow: none; }
.bouton-danger:hover { background: var(--danger-fond); border-color: var(--danger); color: var(--danger); }

/* Un bouton hors d'usage RESTE lisible : grise mais pas efface. Trop pale,
   il se lit comme un defaut d'affichage et l'on clique quand meme. */
.bouton-inactif, .bouton:disabled, .bouton[aria-disabled="true"] {
  background: var(--gris-bg); color: var(--text-faint); border-color: transparent;
  box-shadow: none; cursor: not-allowed; transform: none; }
.bouton-inactif:hover, .bouton:disabled:hover {
  background: var(--gris-bg); color: var(--text-faint); box-shadow: none; }

/* ---------- LES ACTIONS DE LIGNE ----------
   Un carre de 30 px dans un tableau : l'icone seule, le libelle en
   infobulle. Le survol colore la bordure et le fond selon ce que
   l'action fait - vert pour ouvrir ou valider, rouge pour supprimer. */
.geste {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: none;
  border: 1px solid var(--border-champ); border-radius: var(--rayon-champ);
  background: var(--bg-card); color: var(--vert); cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.geste:hover { border-color: var(--vert); background: var(--vert-pale); color: var(--vert-fonce); }
.geste:focus-visible { outline: 2px solid var(--vert-fonce); outline-offset: 1px; }
.geste-danger { color: var(--danger); }
.geste-danger:hover { border-color: var(--danger); background: var(--danger-fond); color: var(--danger); }
.geste[disabled] { color: var(--text-faint); cursor: not-allowed; }
.geste[disabled]:hover { border-color: var(--border-champ); background: var(--bg-card); color: var(--text-faint); }

/* ---------- Témoin d'enregistrement champ par champ ----------
   Succès éphémère, erreur persistante : le succès s'efface au bout de 4 s,
   l'erreur reste tant que le champ n'est pas corrigé, sans quoi elle
   disparaîtrait avant d'être lue. */
.champ-auto-etat { font-size: var(--t-note); font-weight: 400; margin-left: 0.4rem; }
.champ-ok { color: var(--succes); animation: champ-disparait 4s ease forwards; }
.champ-erreur { color: var(--danger); font-weight: 600; }
.champ-alerte, .alerte-fraicheur { color: var(--alerte); font-weight: 600; }
@keyframes champ-disparait { 0%, 60% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- Bandeau d'état ----------
   Sert aussi bien à l'état de santé de l'administration qu'à la portée
   d'une modification : même objet visuel, même code couleur. */
.sante { border-radius: var(--rayon); padding: 0.7rem 0.95rem; margin-bottom: 1.2rem; border: 1px solid; }
.sante-ok { background: var(--succes-fond); border-color: var(--succes-trait); }
.sante-alerte { background: var(--alerte-fond); border-color: var(--alerte-trait); }
.sante-bloquant { background: var(--danger-fond); border-color: var(--danger-trait); }
.sante h3 { margin: 0 0 0.35rem; font-size: var(--t-note); }
.sante ul { margin: 0; padding-left: 1.1rem; }
.sante li { margin-bottom: 0.35rem; font-size: var(--t-note); }
.sante .constat-titre { font-weight: 700; }
.sante .constat-action { color: var(--texte-doux); font-style: italic; }
.manque { color: var(--alerte); }

/* ---------- Paires libellé / valeur ----------
   Libellé au-dessus de la valeur : les valeurs s'alignent alors entre
   elles, ce qu'un « Enseigne : bidule » sur une ligne ne permet pas. */
/* L'ENTETE D'UNE FICHE : le contexte de l'etude, lu d'un coup d'oeil.
 *
 * C'etait un pave marine plein, pose au milieu d'un ecran clair. Il criait
 * plus fort que le titre de l'etape alors qu'il ne porte que du contexte,
 * et il melait le sombre au clair - le theme sombre n'a pas a s'inviter
 * dans le theme clair.
 *
 * En colonnes il tenait aussi mal : dans un panneau de 344 px, trois
 * colonnes coupaient « Electrodomestique » en deux. C'est donc une LISTE :
 * une ligne par champ, le libelle a gauche, la valeur a droite. Trois
 * lignes courtes se lisent mieux que trois colonnes serrees. */
.fiche-entete { display: flex; flex-direction: column; gap: .1rem;
  background: var(--bg-survol); border: 1px solid var(--border-carte);
  border-radius: var(--rayon-champ); padding: .5rem .75rem; margin-bottom: .75rem; }
.fiche-champ { display: flex; align-items: baseline; gap: .75rem; min-width: 0;
  padding: .2rem 0; }
.fiche-champ + .fiche-champ { border-top: 1px solid var(--filet); }
.fiche-champ-label { flex: none; font-size: var(--t-libelle); text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-muted); }
.fiche-champ-valeur { flex: 1; text-align: right; font-size: var(--t-dense);
  font-weight: 700; color: var(--text); overflow-wrap: anywhere; }

/* ---------- Tableau de données ---------- */
.table-admin { width: 100%; border-collapse: collapse; font-size: var(--t-note); background: var(--blanc); }
.table-admin th { text-align: left; background: var(--bg-page); color: var(--text-muted); font-size: var(--t-note); text-transform: uppercase; letter-spacing: 0.05em; padding: 0.35rem 0.6rem; }
.table-admin td { padding: 0.35rem 0.6rem; border-bottom: 1px solid var(--trait-clair); }
.table-admin tr:hover td { background: var(--bg-page); }

/* Les colonnes de chiffres, dans tous les tableaux : en-tête et valeurs
   alignés à droite. Sur trois colonnes de chiffres côte à côte, un en-tête
   à gauche ne tombe plus en face de rien et l'œil doit recompter les
   colonnes pour savoir ce qu'il lit.

   `tabular-nums` fixe la largeur des chiffres : sans lui, 111 est plus
   étroit que 999 et la colonne tremble d'une ligne à l'autre.

   La règle vient après `.table-admin th` : à spécificité égale, c'est la
   dernière qui l'emporte. */
th.nombre, td.nombre,
table th.nombre, table td.nombre { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Colonnes redimensionnables ----------
   Pilotées par `static/js/colonnes-redimensionnables.js`.

   La poignée était invisible hors survol, donc introuvable et difficile à
   attraper. Un filet gris pâle permanent la rend visible, et la zone
   cliquable reste plus large que le trait pour ne pas exiger un pixel
   près. */
.poignee-colonne {
  position: absolute; top: 0; right: -5px; bottom: 0; width: 10px;
  cursor: col-resize; z-index: 3;
}
.poignee-colonne::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 1px; background: var(--border);
}
.poignee-colonne:hover::after, .poignee-colonne:active::after { background: var(--marine); width: 2px; }
.poignee-colonne:hover, .poignee-colonne:active { background: rgba(14, 76, 124, 0.12); }

/* Un identifiant se cale à gauche : il ressemble à un nombre sans en être
   un (`96176HA`, `80021`, `C0198342`).

   Aligner à droite invite à comparer des grandeurs, alors qu'un identifiant
   ne se compare pas. Et devant une colonne d'identifiants la question est
   « lequel commence par 8002... ? » : c'est le début qu'on lit, et à droite
   les débuts ne s'alignent plus.

   Même raisonnement que le passage de `id_referentiel` en texte : ce champ
   était un `BigIntegerField` alors que Géodata émet `96176HA`. Type et
   alignement disent la même chose. */
th.ident, td.ident, .ident {
  text-align: left;
  font-variant-numeric: normal;
  font-family: var(--police-code);
  white-space: nowrap;
}

/* ---------- Sections et cartes ---------- */
/* Le chapeau d'un écran prend toute la largeur. Borné à 60 caractères, il
   tombait sur quatre ou cinq lignes étroites dans le coin d'une page de
   1 800 px : cette mesure vaut pour du texte suivi, lu ligne après ligne,
   pas pour un chapeau qu'on parcourt une fois avant de descendre.

   La limite de 70 caractères est rendue à son objet, `.texte-suivi`, pour
   l'aide et les notes longues. */
.page-sous-titre { margin: 0 0 1.1rem; color: var(--texte-doux); }
.texte-suivi { max-width: 70ch; }
.section-admin { margin-bottom: 1.6rem; scroll-margin-top: 1rem; }
.section-admin-titre { margin: 0 0 0.15rem; font-size: var(--t-libelle); color: var(--text); }
.section-admin-sous-titre { margin: 0 0 0.7rem; font-size: var(--t-note); color: var(--texte-discret); }
/* `auto-fit` et non `auto-fill` : `auto-fill` crée des colonnes vides quand
   il reste de la place et laisse les cartes à 290 px, serrées à gauche - sur
   l'Administration en 1 800 px, six colonnes pour deux cartes et tout le
   reste vide à droite. `auto-fit` replie les colonnes vides et répartit ce
   qui existe. */
.grille-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 0.9rem; }
.carte-admin { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 0.85rem 1rem; margin: 1rem 0; box-shadow: var(--shadow-card); display: flex; flex-direction: column; }
/* `:only-child` : le sélecteur est le raisonnement. Un profil consultant
   n'a qu'un thème, et sa carte unique s'étirait sur 1 800 px, bouton perdu
   à gauche d'un aplat.
   Borner toutes les cartes à 30rem déplace le mal ailleurs : chez le super
   admin, les colonnes font 892 px et des cartes bornées à 514 laissent
   378 px de vide dans chacune. Borner la colonne (`minmax(290px, 30rem)`)
   est déjà interdit par
   `test_les_grilles_de_cartes_repartissent_au_lieu_de_reserver` : le
   navigateur compte alors les colonnes sur leur maximum et n'en crée que
   deux. Seule une carte unique n'a personne avec qui répartir. */
.grille-cartes > .carte-admin:only-child { max-width: 30rem; }
.carte-admin h4 { margin: 0 0 0.1rem; font-size: var(--t-note); color: var(--text); }
.carte-admin .chiffre { font-size: var(--t-note); color: var(--texte-discret); text-transform: uppercase; letter-spacing: 0.05em; }
.carte-admin .meta { margin: 0.4rem 0 0.8rem; font-size: var(--t-note); color: var(--texte-doux); flex: 1; }
.carte-admin .bouton { align-self: flex-start; }

/* Badge de profil : le rôle d'un utilisateur, à côté de son email. */
.liste-comptes li { margin: 0.15rem 0; }
.badge-profil { display: inline-block; font-size: var(--t-petite); font-weight: 600;
  background: var(--accent-soft); color: var(--accent); border-radius: 999px;
  padding: 0.03rem 0.5rem; margin-left: 0.25rem; vertical-align: 0.05em; }
.badge-profil.pas-construit { background: var(--survol); color: var(--texte-doux); }

/* Bascule (segmented control) : un choix exclusif entre deux options, façon
   CRM. Prévue pour être réutilisée ailleurs. */
.bascule { display: inline-flex; background: var(--gris-bg); border: 1px solid var(--border);
  border-radius: 999px; padding: 3px; gap: 2px; max-width: 100%; }
.bascule-opt { border: 0; background: transparent; color: var(--text-muted);
  font: inherit; font-size: var(--t-note); font-weight: 600; padding: 0.4rem 1rem;
  border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background .12s, color .12s; }
.bascule-opt.actif { background: var(--accent); color: var(--sur-couleur); box-shadow: var(--shadow-card); }
.bascule-opt:not(.actif):hover { color: var(--text); }
.bascule-opt:disabled { opacity: .45; cursor: not-allowed; }
.bascule-opt:disabled:hover { color: var(--text-muted); }

/* Recherche posée au-dessus d'un tableau : filtre côté navigateur pour une
   liste qui tient en mémoire, sans aller-retour serveur. Née sur Zones
   contractuelles (`.zc-recherche`, propre à cet écran) ; generalisee ici
   pour les autres tableaux longs, sans toucher au premier. */
.recherche-table { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0 0 0.8rem;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
  padding: 0.3rem 0.6rem; color: var(--text-faint); }
.recherche-table input { border: 0; background: transparent; font: inherit; font-size: var(--t-note);
  color: var(--text); outline: none; width: 16rem; max-width: 100%; margin: 0; padding: 0; }

/* Aperçu live du filtre Géodata : une bande discrète sous la grille. */
.apercu-geodata { margin: 0.9rem 0 0; padding: 0.55rem 0.8rem; font-size: var(--t-note);
  color: var(--texte-doux); background: var(--bg-page); border: 1px solid var(--trait);
  border-radius: var(--rayon); }
.apercu-geodata strong { color: var(--text); }
.apercu-geodata .apercu-detail { color: var(--texte-discret); }

/* ---------- Aide de champ ---------- */
.aide-champ { margin: 0.35rem 0 0; font-size: var(--t-libelle); color: var(--text-muted); font-style: normal; display: block; }
/* Obligatoire / facultatif : l'etoile rouge suit `required` la ou le
   libelle precede son champ ; `.requis` couvre les autres agencements.
   La mention (facultatif) se pose dans le libelle, jamais en ligne
   d'aide sous le champ. */
label:has(+ input[required])::after,
label:has(+ select[required])::after,
label:has(+ textarea[required])::after,
label.requis::after { content: " *"; color: var(--danger); font-weight: 700; }
label .facultatif { font-weight: 400; font-size: var(--t-libelle); color: var(--text-faint); }

/* ---------- Infobulle générique (`[data-tip]`) ----------
   Un détail qui se lit au survol plutôt que d'occuper l'écran en
   permanence : le déclenchement au survol vivait identique, recopié cinq
   fois, sur les écrans de performance (prf01 à prf05). Une seule
   définition ici. Le focus clavier reste réglé écran par écran : prf01 à
   prf04 l'ouvrent sur tout `[data-tip]`, prf05 le restreint aux éléments
   marqués `.tip-focus` (un badge répété par ligne de tableau n'a pas à
   s'ouvrir au focus) - une différence réelle entre écrans, pas une
   duplication à défaire. */
[data-tip] { position: relative; cursor: help; border-bottom: 1px dotted currentColor; }
[data-tip]:hover::after { content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 7px); background: var(--encre); color: var(--blanc); font-size: var(--t-petite); font-weight: 400; line-height: 1.4; padding: .5rem .65rem; border-radius: 8px; width: max-content; max-width: 260px; white-space: normal; box-shadow: var(--ombre); z-index: 80; pointer-events: none; }
[data-tip]:hover::before { content: ""; position: absolute; left: 10px; bottom: calc(100% + 2px); border: 5px solid transparent; border-top-color: var(--encre); z-index: 80; }


/* ---------- Type de projet, deux groupes de cartes ----------
   Remplace le <select> à plat de la création d'étude : « Notre réseau » et
   « Un concurrent » sont les deux familles déjà distinguées par
   TypeProjet.porte_sur_un_concurrent() (etudes/models.py), que l'écran ne
   montrait pas. Le rouge reprend celui utilisé ailleurs pour un concurrent
   (badges, chevrons) : ce n'est pas une couleur neuve. */
.type-projet-groupes { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 0.6rem; }
@media (max-width: 640px) { .type-projet-groupes { grid-template-columns: 1fr; } }
.type-projet-groupe { border: 1.5px solid var(--trait); border-radius: 8px; padding: 0.7rem; }
.type-projet-groupe.nous { border-color: var(--succes-trait); }
.type-projet-groupe.concurrent { border-color: var(--danger-trait); }
.type-projet-titre { display: flex; align-items: center; gap: 0.45rem; font-size: var(--t-note);
  text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; margin: 0 0 0.55rem; }
.type-projet-titre .puce { width: 0.7rem; height: 0.7rem; border-radius: 50%; flex: none; }
.type-projet-groupe.nous .type-projet-titre { color: var(--primary); }
.type-projet-groupe.nous .type-projet-titre .puce { background: var(--primary); }
.type-projet-groupe.concurrent .type-projet-titre { color: var(--danger); }
.type-projet-groupe.concurrent .type-projet-titre .puce { background: var(--danger); }
/* Le radio reste dans le DOM (accessible, coche au clavier) mais invisible :
   c'est le label entier qui porte l'apparence de carte. */
/* Sans `box-sizing: border-box`, `width: 100%` ne compte que le contenu :
   bordure et padding s'ajoutent par-dessus et chaque carte débordait de son
   groupe d'environ 20 px à droite. Ce fichier n'a pas de reset global
   (`* { box-sizing: border-box }`) ; la règle est posée localement plutôt
   que d'en ajouter un dont l'effet ailleurs est inconnu. */
.type-projet-carte { box-sizing: border-box; display: flex; align-items: flex-start;
  gap: 0.6rem; width: 100%; background: var(--bg-card); border: 1.5px solid var(--border-carte);
  border-radius: 8px; padding: 0.5rem 0.6rem; margin-bottom: 0.5rem; cursor: pointer; }
.type-projet-carte:last-child { margin-bottom: 0; }
.type-projet-carte input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.type-projet-carte .type-projet-icone { width: 1.9rem; height: 1.9rem; border-radius: 7px; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: var(--t-moyenne); }
.type-projet-groupe.nous .type-projet-icone { background: var(--vert-pale); color: var(--vert-fonce); }
.type-projet-groupe.concurrent .type-projet-icone { background: var(--danger-fond); color: var(--danger); }
.type-projet-carte .type-projet-texte b { display: block; font-size: var(--t-texte); }
.type-projet-carte .type-projet-texte span { display: block; font-size: var(--t-note); color: var(--texte-discret); margin-top: 0.1rem; }
.type-projet-carte:hover { border-color: var(--texte-discret); }
.type-projet-groupe.nous .type-projet-carte:has(input:checked) { border-color: var(--primary); border-width: 2px; padding: calc(0.5rem - 1px) calc(0.6rem - 1px); background: var(--vert-pale); }
.type-projet-groupe.concurrent .type-projet-carte:has(input:checked) { border-color: var(--danger); border-width: 2px; padding: calc(0.5rem - 1px) calc(0.6rem - 1px); background: var(--danger-fond); }
.type-projet-carte input:focus-visible ~ .type-projet-icone,
.type-projet-carte:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ------------------------------------------------------------------ *
 * NOUVELLE ETUDE : l'ecran de creation, en deux temps.
 *
 * `.page` fait jusqu'a 1800 px. Les six champs de la creation s'y
 * etalaient en une bande de quelques centimetres, posee tout en haut
 * d'un ecran par ailleurs vide, et les quatre champs du site se
 * retrouvaient a un tiers de leur largeur utile. La colonne de lecture
 * est bornee ici, et seulement pour cet ecran.
 * ------------------------------------------------------------------ */
.creation-ecran { max-width: 60rem; margin: 0 auto; padding-bottom: 2rem; }
.creation-tete { text-align: center; margin: .5rem 0 1.6rem; }
.creation-tete h1 { margin: 0 0 .4rem; }
.creation-tete p { margin: 0 auto; max-width: 44rem; color: var(--text-muted);
  font-size: var(--t-corps); line-height: 1.6; }
/* La classe est posee SUR le rail plutot que descendue depuis
   `.creation-ecran` : le test du chemin de fer lit la premiere regle du
   fichier dont le selecteur nomme le composant, et serait tombe sur
   celle-ci au lieu de la sienne. */
.creation-rail { margin-bottom: 1.6rem; }
.creation-ecran fieldset { margin-bottom: 1.1rem; }
.creation-ecran fieldset:last-of-type { margin-bottom: 0; }

/* La barre d'action, en bas et a droite, au meme endroit d'une etape a
   l'autre : le geste qui fait avancer ne se cherche pas. */
.creation-actions { display: flex; align-items: center; justify-content: flex-end;
  gap: .7rem; margin-top: 1.5rem; }
.creation-actions .bouton { padding: .62rem 1.4rem; font-size: var(--t-corps); }
.creation-actions-aide { margin-right: auto; font-size: var(--t-dense); color: var(--text-faint); }
.creation-ecran .cnx-alerte { margin-top: .8rem; }

/* Les cartes de scenario portent le choix qui commande tout l'ecran :
   elles se lisent d'abord, donc elles sont plus grandes que le reste. */
.creation-ecran .type-projet-groupes { gap: 1.1rem; margin-top: .8rem; }
.creation-ecran .type-projet-groupe { padding: .9rem; border-radius: var(--rayon-champ); }
.creation-ecran .type-projet-carte { gap: .75rem; padding: .7rem .8rem; margin-bottom: .45rem;
  border-radius: var(--rayon-champ); transition: border-color .15s, background .15s, transform .15s; }
.creation-ecran .type-projet-carte:hover { transform: translateY(-1px); box-shadow: var(--ombre-carte); }
.creation-ecran .type-projet-carte .type-projet-icone { width: 2.2rem; height: 2.2rem; }
.creation-ecran .type-projet-carte .type-projet-texte b { font-size: var(--t-corps); }
.creation-ecran .type-projet-carte .type-projet-texte span { font-size: var(--t-dense);
  line-height: 1.45; margin-top: .15rem; }
.creation-ecran .type-projet-groupe.nous .type-projet-carte:has(input:checked),
.creation-ecran .type-projet-groupe.concurrent .type-projet-carte:has(input:checked) {
  padding: calc(.7rem - 1px) calc(.8rem - 1px); }

/* La forme suit le contenu, pas le formulaire. `.grille` (base.html) vaut
   `minmax(240px, 1fr)` : sur l'écran d'Agrandissement, où un seul champ est
   visible, le `1fr` l'étire sur toute la largeur du fieldset et donne une
   case minuscule dans un cadre énorme.
   Un plafond sur le fieldset lui-même a été essayé puis retiré : une
   largeur fixe ne peut convenir à la fois à un champ seul et à quatre. Le
   fieldset reste pleine largeur comme les autres, seul le plafond par
   colonne change (300px au lieu de `1fr`) : un champ seul ne s'étire plus,
   plusieurs se rangent côte à côte. */
/* `start` et non `center` : une grille centree laisse le couloir de gauche
   vide, et les champs cessent de s'aligner sur le titre de leur section
   comme sur ceux de la section du dessus. Un formulaire se lit en colonne,
   a partir du bord. */
#fieldset-le-site .grille { grid-template-columns: repeat(auto-fit, minmax(220px, 300px)); justify-content: start; }

/* ---------- Fil d'Ariane ---------- */
/* L'en-tete de page de l'administration et du modele de CA. En LIGNE, le
   titre et le fil d'ariane se disputaient le premier regard, et le titre
   perdait. Empiles, ils se lisent dans l'ordre ou l'on en a besoin : d'ou
   l'on vient, ou l'on est, ce qu'on y fait. */
.admin-entete { display: flex; flex-direction: column; gap: .15rem;
  margin-bottom: 1.1rem; }
.admin-entete h1 { margin: 0; }
.admin-entete .admin-fil { order: -1; font-size: var(--t-dense);
  color: var(--text-muted); }
.admin-entete .page-sous-titre { margin: .1rem 0 0; }
.admin-fil { font-size: var(--t-note); color: var(--texte-discret); }
.admin-fil a { color: var(--bleu); }
/* Sommaire d'ancres : sur une page longue, on saute au thème voulu plutôt
   que de la parcourir. */
.admin-sommaire { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.3rem; }
.admin-sommaire a { font-size: var(--t-note); background: var(--survol); border: 1px solid var(--border); border-radius: 999px; padding: 0.2rem 0.7rem; color: var(--ardoise); text-decoration: none; }
.admin-sommaire a:hover { background: var(--border); }

/* ---------------------------------------------------------------- *
 * formation.html, a la maquette. Portee : body.ecran-formation.
 * ---------------------------------------------------------------- */
/* Un parcours, pas une page qui defile : sommaire collant a gauche avec
   la progression, UN chapitre a la fois a droite, Precedent / Suivant. */
:where(body.ecran-formation) .mf-agencement { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; }
:where(body.ecran-formation) .mf-sommaire { flex: 0 0 260px; background: var(--bg-card); border: 1px solid var(--border-carte); border-radius: 14px; overflow: hidden; position: sticky; top: 70px; box-shadow: var(--ombre-carte); }
:where(body.ecran-formation) .mf-progres { padding: 0.85rem 1rem 0.6rem; }
:where(body.ecran-formation) .mf-progres .libelle { display: flex; align-items: baseline; justify-content: space-between; font-size: var(--t-libelle); font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 0.35rem; }
:where(body.ecran-formation) .mf-progres .jauge { display: block; }
:where(body.ecran-formation) .mf-progres .piste { display: block; height: 6px; background: var(--filet); border-radius: 999px; overflow: hidden; }
:where(body.ecran-formation) .mf-progres .piste i { display: block; height: 100%; width: 0; background: var(--vert); border-radius: 999px; transition: width .2s; }
:where(body.ecran-formation) .mf-progres .compte { font-size: var(--t-libelle); font-weight: 700; color: var(--text); white-space: nowrap; }
:where(body.ecran-formation) .mf-filet { height: 1px; background: var(--filet); margin: 0.35rem 0; }
:where(body.ecran-formation) .mf-entree { display: flex; align-items: center; gap: 0.7rem; width: 100%; padding: 0.6rem 1rem; border: 0; background: none; cursor: pointer; font: inherit; text-align: left; border-left: 3px solid transparent; }
:where(body.ecran-formation) .mf-entree:hover { background: var(--bg-survol); }
:where(body.ecran-formation) .mf-entree.courante { background: var(--bg-survol); border-left-color: var(--vert); }
:where(body.ecran-formation) .mf-entree .puce { width: 22px; height: 22px; border-radius: 999px; background: var(--filet); color: var(--text-faint); font-size: var(--t-libelle); font-weight: 700; display: flex; align-items: center; justify-content: center; flex: none; }
:where(body.ecran-formation) .mf-entree.lue .puce { background: var(--vert-pale); color: var(--vert-fonce); }
:where(body.ecran-formation) .mf-entree.courante .puce { background: var(--vert); color: var(--sur-couleur); }
:where(body.ecran-formation) .mf-entree .titre { font-size: var(--t-dense); font-weight: 600; color: var(--text); line-height: 1.3; }
:where(body.ecran-formation) .mf-pdf { padding: 0.7rem 1rem 0.85rem; font-size: var(--t-libelle); color: var(--text-muted); border-top: 1px solid var(--filet); }
/* Le chapitre : chapeau, titre, contenu, et la navigation en pied. */
:where(body.ecran-formation) .mf-chapitre { flex: 1 1 30rem; min-width: 0; background: var(--bg-card); border: 1px solid var(--border-carte); border-radius: 14px; padding: 1.5rem 1.75rem; box-shadow: var(--ombre-carte); }
:where(body.ecran-formation) .mf-chapitre .chapeau { font-size: var(--t-libelle); font-weight: 700; color: var(--vert); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 0.35rem; }
:where(body.ecran-formation) .mf-chapitre h2 { margin: 0 0 0.8rem; font-size: var(--t-affiche); font-weight: 700; color: var(--text); letter-spacing: -0.01em; }
:where(body.ecran-formation) .mf-chapitre .duree { font-size: var(--t-libelle); font-weight: 400; color: var(--text-faint); text-transform: none; letter-spacing: 0; margin-left: .5rem; }
:where(body.ecran-formation) .mf-chapitre p, :where(body.ecran-formation) .mf-chapitre li { font-size: var(--t-dense); line-height: 1.6; max-width: 68ch; }
:where(body.ecran-formation) .mf-chapitre h4 { font-size: var(--t-corps); margin: 1.1rem 0 0.4rem; }
:where(body.ecran-formation) .mf-chapitre table { margin: 0.5rem 0 0.8rem; }
/* L'encadre Exemple : le liseret vert de la maquette. */
:where(body.ecran-formation) .mf-exemple { background: var(--bg-survol); border: 1px solid var(--border-carte); border-left: 3px solid var(--vert); border-radius: 10px; padding: 0.8rem 1rem; margin: 0.9rem 0; }
:where(body.ecran-formation) .mf-exemple .libelle { font-size: var(--t-libelle); font-weight: 700; color: var(--vert-fonce); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 0.25rem; }
:where(body.ecran-formation) .mf-exemple p { margin: 0; }
/* Les gestes en frise numerotee, relies par un trait. */
:where(body.ecran-formation) .mf-etapes { margin: 0.8rem 0 0.4rem; }
:where(body.ecran-formation) .mf-etape { display: flex; gap: 0.85rem; }
:where(body.ecran-formation) .mf-etape .rail-num { display: flex; flex-direction: column; align-items: center; flex: none; }
:where(body.ecran-formation) .mf-etape .num { width: 24px; height: 24px; border-radius: 999px; background: var(--vert-pale); color: var(--vert-fonce); font-size: var(--t-libelle); font-weight: 700; display: flex; align-items: center; justify-content: center; }
:where(body.ecran-formation) .mf-etape .fil { flex: 1; width: 1.5px; background: var(--border-carte); min-height: 14px; }
:where(body.ecran-formation) .mf-etape:last-child .fil { display: none; }
:where(body.ecran-formation) .mf-etape .quoi { padding-bottom: 0.85rem; }
:where(body.ecran-formation) .mf-etape .quoi b { display: block; font-size: var(--t-dense); color: var(--text); }
:where(body.ecran-formation) .mf-etape .quoi span { font-size: var(--t-dense); color: var(--text-muted); line-height: 1.5; }
:where(body.ecran-formation) .mf-pied { display: flex; align-items: center; gap: 0.7rem; padding-top: 1rem; margin-top: 1.2rem; border-top: 1px solid var(--filet); }
:where(body.ecran-formation) .mf-precedent { background: var(--bg-card); color: var(--text); font-weight: 600; font-size: var(--t-dense); border: 1px solid var(--border-champ); padding: 0.5rem 0.9rem; border-radius: var(--rayon-bouton); cursor: pointer; }
:where(body.ecran-formation) .mf-precedent:hover { border-color: var(--vert); }
:where(body.ecran-formation) .mf-suivant { margin-left: auto; background: var(--primary); color: var(--sur-couleur); font-weight: 700; font-size: var(--t-dense); border: 0; padding: 0.55rem 1rem; border-radius: var(--rayon-bouton); cursor: pointer; }
:where(body.ecran-formation) .mf-suivant:hover { background: var(--primary-hover); }
:where(body.ecran-formation) .mf-chapitre[hidden] { display: none; }
@media (max-width: 900px) {
  :where(body.ecran-formation) .mf-sommaire { position: static; flex-basis: 100%; }
}

/* ---------- Champ de recherche a la loupe ----------
   Un composant, pas un style d'ecran : le dictionnaire de donnees et la
   galerie de cartes le partagent, et le prochain ecran qui filtre une
   longue liste le reprendra sans le redessiner. La largeur, elle, se regle
   chez l'appelant : elle depend de la place disponible. */
.champ-loupe { display: flex; align-items: center; gap: .5rem;
  background: var(--bg-card); border: 1px solid var(--border-champ);
  border-radius: var(--rayon-champ); padding: .5rem .8rem; color: var(--text-faint); }
.champ-loupe input { border: 0; background: transparent; font: inherit;
  font-size: var(--t-dense); color: var(--text); outline: none;
  flex: 1 1 auto; margin: 0; padding: 0; max-width: none; }
.champ-loupe:focus-within { border-color: var(--vert); }

/* ---------- Pastille de zone ----------
   Reprend exactement les couleurs de la carte : c'est ce qui relie un
   champ ou une ligne de tableau à ce que l'on voit. */
.pastille { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 0.3rem; }
.pastille-proximite { background: var(--zone-proximite); }
.pastille-combat { background: var(--zone-combat); }
.pastille-complementaire { background: var(--zone-complementaire); }

/* ---------- Largeur des pages ----------
   Une liste d'exceptions vivait ici (les pages faites de grilles
   s'élargissaient, les autres non) ; elle se périmait à chaque nouvel écran
   et l'oubli ne se voyait que sur une capture. `base.html` déclare
   désormais 1440 px pour tout le monde et personne ne le redéfinit.

   Le texte suivi reste borné séparément (`.page-sous-titre`, 60ch) : c'est
   le contenant qui est large, pas la ligne de lecture. */

/* L'attribut `hidden` gagne TOUJOURS.
   Le navigateur le pose dans sa feuille par defaut, ou la moindre regle
   d'auteur donnant un `display` le bat : une capsule en `flex` gardait
   l'attribut et restait a l'ecran - « Deplacer le site ici ? » s'affichait
   des le chargement, la consigne de retouche refusait de se fermer. */
[hidden] { display: none !important; }

/* L'ETAT DES PLANS DU PARC : une ligne qui dit ou l'on en est, et porte
   le geste quand il y a lieu. Neutre au repos, ambre quand le parc est
   perime - le vert n'est pas une alerte, il est une confirmation. */
.etat-plans { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  margin: 0 0 1rem; padding: .6rem .9rem; border-radius: var(--rayon-champ);
  background: var(--bg-card); border: 1px solid var(--border-carte);
  font-size: var(--t-dense); color: var(--text); }
.etat-plans .rien { color: var(--text-muted); }

/* UNE ZONE RETOUCHEE LE DIT, sous le tableau des zones. Un zonage retouche
   se lisait comme un zonage calcule : le magasin de l'etude pouvait se
   retrouver en zone de combat, a une minute trente de lui-meme, et l'on
   accusait le calcul. L'ambre, comme partout ou une valeur n'est pas celle
   que la regle produirait. */
.note-retouches { display: flex; align-items: flex-start; gap: .4rem;
  margin: .5rem 0 0; padding: .45rem .6rem; border-radius: var(--rayon-champ);
  background: var(--alerte-fond); border: 1px solid var(--alerte-trait);
  font-size: var(--t-libelle); line-height: 1.45; color: var(--alerte); }
.note-retouches svg { flex: none; margin-top: .15rem; }
.note-retouches b { color: var(--alerte); }
/* Rien a actualiser, rien a decider : la ligne perd sa carte et redevient
   une note. Un cadre pleine largeur pour dire qu'il n'y a rien prenait la
   place la plus haute de l'ecran pour ne rien y mettre. */
.etat-plans.discret { background: none; border: 0; box-shadow: none;
  padding: 0; margin: 0 0 .8rem; font-size: var(--t-libelle); }
.etat-plans .bouton { margin-left: auto; flex: none; }
/* Les trois pastilles d'etat : le sens se lit avant les mots. */
.etat-plans .sablier, .etat-plans .fait, .etat-plans .alerte {
  width: .55rem; height: .55rem; border-radius: 999px; flex: none; }
.etat-plans .sablier { background: var(--marine); animation: pulse-plans 1.4s ease-in-out infinite; }
.etat-plans .fait { background: var(--vert); }
.etat-plans .alerte { background: var(--ambre); }
@keyframes pulse-plans { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .etat-plans .sablier { animation: none; } }

/* UN PLAN PERIME LE DIT, et propose sa reprise dans le meme bandeau :
   un avertissement sans issue n'est qu'une inquietude. Teinte d'alerte,
   pas de danger - le plan n'est pas faux, il est d'hier. */
.bandeau-perime { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin: 0 0 1rem; padding: .75rem 1rem; border-radius: var(--rayon-champ);
  background: var(--alerte-fond); border: 1px solid var(--alerte-trait);
  border-left: 4px solid var(--ambre); color: var(--text); font-size: var(--t-dense); }
.bandeau-perime .quoi { flex: 1 1 20rem; line-height: 1.5; }
.bandeau-perime .bouton { flex: none; }

/* Les gestes d'une ligne de secteur : alignes, sans que les formulaires
   les empilent - un `<form>` est un bloc, trois formulaires faisaient
   trois lignes dans une cellule. */
.gestes-secteur { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.gestes-secteur form { margin: 0; }

/* Un titre qui ouvre son bloc n'a pas de marge au-dessus : la classe
   remplace le dernier `style=` du gabarit de l'atelier. */
.sans-marge-haut { margin-top: 0; }

/* ---------- Cases à cocher ----------
   La règle globale `input { width: 100%; max-width: 26rem }` vise les
   champs de saisie ; appliquée aux cases, elle leur donnait 26 rem de large
   et les envoyait à des centaines de pixels de leur libellé, qui partait
   alors à la ligne.

   Une case se dimensionne toute seule et se lit collée à son texte. */
input[type="checkbox"], input[type="radio"] {
  width: auto;
  max-width: none;
  margin: 0;
  flex: none;
}
/* Libellé porteur d'une case : la case et le texte sur une ligne, alignés
   sur la première ligne du texte et non sur son milieu - sinon un libellé
   de deux lignes décale la case vers le bas. */
.ligne-case {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 0.5rem;
  font-weight: 400;
  max-width: 70ch;
}
.ligne-case strong { font-weight: 700; }

/* Onglets de l'aide et du dictionnaire de données. Dans le socle et non
   dans une page : ils apparaissent sur les deux écrans. */
/* Les onglets de l'Aide prennent la MEME forme que ceux des trois vues
   sur les etudes : soulignes, poses sur un filet qui court jusqu'au bord.
   Ils avaient la forme d'onglets de classeur - un cadre a trois cotes,
   coins arrondis en haut - et quatre couleurs ecrites en clair. Deux
   familles d'onglets dans une meme solution font douter qu'elles fassent
   la meme chose. */
.onglets-aide { display: flex; gap: 1.4rem; border-bottom: 1px solid var(--border);
  margin: 0 0 1.25rem; }
.onglets-aide .onglet { display: inline-block; padding: .5rem 0 .6rem;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  margin-bottom: -1px; color: var(--text-muted); text-decoration: none;
  font-weight: 600; font-size: var(--t-corps); }
.onglets-aide a.onglet:hover { background: none; color: var(--text);
  border-bottom-color: var(--border-champ); }
/* L'onglet courant est un <span> : un lien vers la page ou l'on est deja
   promet un deplacement qui n'aura pas lieu. */
.onglets-aide .onglet.actif { background: none; border-bottom-color: var(--vert);
  color: var(--vert-fonce); font-weight: 700; cursor: default; }

/* Messages de l'administration. Ils n'étaient rendus nulle part : un
   `messages.error` y disparaissait sans trace, et l'écran répondait
   normalement. Une panne se dit. */


/* Les actions s'alignent d'une carte à l'autre. Les textes n'ont pas la même
   longueur : sans colonne flexible ni `margin-top: auto`, le bouton descend
   plus ou moins bas selon la carte et la rangée paraît désordonnée. */
.grille-cartes { align-items: stretch; }
.grille-cartes > * { display: flex; flex-direction: column; }
/* Le corps du texte pousse l'action vers le bas ; l'action s'y accroche. */
.grille-cartes .carte-texte, .grille-cartes > * > p { flex: 1 1 auto; }
.grille-cartes .carte-action { margin-top: auto; align-self: flex-start; }

/* La navigation entre phases, dans la feuille commune et non dans chaque
   écran : trois pages la partagent, et une barre recopiée finit toujours par
   diverger - c'est ce qui était arrivé aux largeurs de page. */
.navigation-phase { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--border); }
.navigation-phase .cotes { display: flex; align-items: center; gap: 0.5rem; flex: 1 1 auto; }
.navigation-phase a { display: inline-flex; align-items: baseline; gap: 0.35rem; padding: 0.4rem 0.85rem; border: 1px solid var(--border); border-radius: 6px; color: var(--marine); text-decoration: none; font-size: var(--t-note); }
.navigation-phase a:hover { background: var(--bg-page); border-color: var(--marine); text-decoration: none; }
.navigation-phase .numero { font-weight: 600; }
.navigation-phase .titre { color: var(--text-muted); }
.navigation-phase .vide { flex: 0 0 auto; }
/* La suite est le geste attendu : elle est pleine, les autres en contour. */
.navigation-phase .suivante { margin-left: auto; background: var(--marine); border-color: var(--marine); color: var(--sur-couleur); }
.navigation-phase .suivante:hover { background: var(--marine); }
.navigation-phase .suivante .titre { color: var(--sur-couleur); }

/* Le bandeau d'alerte de l'administration, replié par défaut : déplié, il
   occupait le haut de l'écran et repoussait les thèmes sous la ligne de
   flottaison. Replié, il annonce toujours combien de points attendent, et
   le détail se déplie d'un clic. */
.sante-repliable { padding: 0.55rem 0.9rem; }
.sante-repliable > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 0.6rem; }
.sante-repliable > summary::-webkit-details-marker { display: none; }
.sante-repliable > summary::before { content: "▸"; color: var(--texte-doux); }
.sante-repliable[open] > summary::before { content: "▾"; }
.sante-repliable .sante-deplier { font-size: var(--t-petite); color: var(--texte-doux); }
.sante-repliable[open] .sante-deplier { visibility: hidden; }
.sante-repliable > ul { margin: 0.6rem 0 0; }


/* ---------- L'habillage de la carte suit la même grille que le reste ----------
   MapLibre livre sa propre feuille de style avec ses propres tailles :
   échelle en 10 px, attribution en 12 px, infobulle au gré du navigateur.
   Sur un écran d'étude, la moitié portant la carte parlait donc une autre
   langue typographique que l'autre.

   Échelle, attribution et crédit sont des mentions : petite. Le contenu
   d'une infobulle est du texte courant : moyenne.

   Écrit ici plutôt que dans la feuille du fournisseur : celle-ci est du code
   livré, qu'une mise à jour écraserait sans prévenir.

   La famille est surchargée en plus de la taille : MapLibre écrit
   `font: 12px/20px Helvetica Neue, ...`, un raccourci qui pose la police et
   la taille d'un coup. Surcharger `font-size` seul laissait vivre une
   troisième police sur les trois écrans qui portent une carte. */
.maplibregl-map,
.maplibregl-ctrl-scale,
.maplibregl-ctrl-attrib,
.maplibregl-ctrl-attrib-inner,
.maplibregl-ctrl-attrib a,
.maplibregl-popup-content { font-family: var(--police); }
.maplibregl-ctrl-scale,
.maplibregl-ctrl-attrib,
.maplibregl-ctrl-attrib-inner,
.maplibregl-ctrl-attrib a { font-size: var(--t-petite); }
.maplibregl-popup-content { font-size: var(--t-moyenne); }
/* MapLibre peint la bulle et sa pointe en #fff : en thème sombre, le texte clair
   s'y posait sur du blanc. Fond et pointe suivent les jetons, dans les 8 sens.
   `html` en tête : la feuille de MapLibre est chargée APRÈS celle-ci, à spécificité
   égale elle l'emportait et la bulle restait blanche. */
html .maplibregl-popup-content { background: var(--bg-card); color: var(--text); box-shadow: var(--ombre-flottant); }
html .maplibregl-popup-anchor-top .maplibregl-popup-tip,
html .maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
html .maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: var(--bg-card); }
html .maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
html .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
html .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: var(--bg-card); }
html .maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--bg-card); }
html .maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--bg-card); }
/* Un logo d'enseigne est dessiné pour un fond blanc : sa pastille le reste, même en thème sombre. */
html .marqueur-logo:not(.repere-sans-logo):not(.sans-logo) { background: #fff; }
html .fiche-point .logo-enseigne { background: #fff; border-radius: 6px; padding: 2px; }
/* Le bouton « × » de MapLibre est masqué : en haut de la fiche il rendait un
   carré vide bordé de bleu, sans croix lisible. Il ne sert plus depuis que la
   fiche s'ouvre au survol et se referme en sortant, ou d'un second clic
   quand elle a été épinglée. */
.maplibregl-popup-close-button { display: none; }
/* La fiche d'un point de vente passe DEVANT le reste. Elle s'ouvre au
   survol, souvent sous le panneau de l'etape ou le rail d'outils, et se
   lisait coupee. Au-dessus des marqueurs voisins aussi : dans une zone
   commerciale dense, une enseigne voisine masquait la fiche de celle
   qu'on survolait. Sous les modales (40 et plus), qui restent au-dessus
   de tout. */
.maplibregl-popup { z-index: 10; }
/* La flèche, pas la main : MapLibre pose `cursor: grab`/`grabbing` en JS, à
   même le style du canevas, ce qui se lit comme une carte à attraper plutôt
   qu'à déplacer d'un simple clic. `!important` est nécessaire, un style JS
   reposé à chaque interaction l'emporterait sinon sur une règle ordinaire. */
.maplibregl-canvas-container canvas { cursor: default !important; }


/* ---------- Le menu d'état d'une étude : un seul habillage, deux écrans ----------
   Le composant (`etudes/_menu_etat.html`) est inclus sur la fiche et sur la
   liste ; son style était recopié à l'identique dans les deux gabarits, et
   deux copies ne tiennent que jusqu'à la première correction.

   Le volet est en `position: fixed`, et c'est le correctif. En `absolute`,
   il vivait dans la cellule du tableau et se faisait découper trois fois :
   par `td.actions` (`overflow: hidden`, qui coupe les libellés d'enseigne
   trop longs), par `.tableau-scroll` (`overflow-x: auto`) et par
   `.tableau-cadre` (`overflow: hidden`, qui donne au tableau ses coins
   arrondis). Sur 204 px de volet, 28 restaient visibles : un mince bandeau
   blanc.

   Aucune de ces trois règles n'est fautive, chacune sert : c'est
   l'empilement qui découpe, et un élément fixe se place par rapport à la
   fenêtre, pas à ses parents.

   Ses coordonnées sont posées à l'ouverture, depuis le bouton (voir le
   gabarit). Le menu se referme au défilement : rouvrir coûte un clic, alors
   qu'un volet resté en l'air à côté de sa ligne se lit comme un défaut. */
.menu-etat { position: relative; display: inline-block; }
.menu-etat-declencheur { margin: 0; padding: 0.3rem 0.7rem; font-size: var(--t-petite); font-weight: 600; background: var(--bg-card); color: var(--marine); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; white-space: nowrap; }
.menu-etat-declencheur:hover { border-color: var(--marine); background: var(--info-fond); }
.menu-etat-declencheur .chevron { color: var(--text-faint); }
.menu-etat-volet { position: fixed; z-index: 60; min-width: 17rem; max-width: 24rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 4px 14px rgba(16,42,67,.14); padding: 0.3rem; text-align: left; }
.menu-etat-volet form { margin: 0; }
.etat-choix { display: block; width: 100%; text-align: left; padding: 0.4rem 0.6rem; border: 0; border-radius: 6px; background: none; font: inherit; font-size: var(--t-petite); font-weight: 600; color: var(--text); cursor: pointer; margin: 0; }
button.etat-choix:hover { background: var(--info-fond); }
.etat-choix.engageant { color: var(--marine); }
button.etat-choix.engageant:hover { background: var(--info-fond); }
/* Un état impossible reste visible, grisé, avec sa raison sous le libellé :
   c'est ce qui remplace le silence d'un bouton absent. */
.etat-choix.impossible { color: var(--text-faint); cursor: default; font-weight: 600; }
.etat-choix.impossible.courant { color: var(--marine); background: var(--info-fond); }
.etat-choix .raison { display: block; font-style: normal; font-weight: 400; font-size: var(--t-petite); color: var(--text-faint); margin-top: 0.1rem; }


/* ---------- Le bandeau d'atelier : un seul gabarit, deux bandeaux ----------
   Sur l'écran d'une étude, deux bandeaux se font face en haut : au centre
   l'état de l'étude et sa validation, à droite la légende de la carte et ses
   commandes. Ils commencent à la même hauteur à 1 px près, ce qui rendait
   leur différence criante : 51 px de haut contre 37, police 16,8 contre
   14,72, marges 8/11 contre 6/12, bordures #dbe2ea contre #c8d2de. Six
   écarts pour deux objets qui portent la même chose.

   La taille retenue est la petite de la grille. Essayée en moyenne, la barre
   de la carte passait à deux lignes : huit groupes de commandes (trois
   couleurs de zone, deux calques, trois boutons) ne tiennent pas sur 796 px,
   et l'écart de hauteur montait de 14 à 19 px. La petite est d'ailleurs ce
   que ces bandeaux emploient déjà à l'intérieur (badge d'état, libellé de
   validation, boutons secondaires) ; un bandeau de commandes est de
   l'habillage, la moyenne reste pour ce qu'on vient lire.

   La hauteur est posée en `min-height` plutôt que `height` : une fenêtre
   étroite fait passer les commandes à la ligne et un bandeau à hauteur fixe
   les couperait. Sa valeur, 3 rem, est celle que le bandeau central atteint
   déjà par son contenu, le bouton du menu d'état étant plus haut que les
   boutons de la carte : on aligne le plus court sur le plus grand plutôt que
   d'imposer une hauteur qu'aucun des deux n'aurait. */
.bandeau-atelier {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.6rem; row-gap: 0.35rem;
  min-height: var(--h-bandeau-atelier);
  padding: 0.45rem 0.75rem;
  background: var(--bg-card);
  border-color: var(--border);
  font-size: var(--t-petite);
  color: var(--text);
  box-sizing: border-box;
}


/* L'ETIQUETTE D'ETAT, une seule pour toute la solution.

   Il y en avait DEUX : `.etat-tag` (celle de la charte : petite, cerclee, une
   pastille de couleur devant le mot) et `.wf-etat`, un pave en capitales de
   10,5 rem de large, aux couleurs ecrites en clair. Le meme etat n'avait donc
   pas la meme allure selon l'ecran, et le pave prenait une colonne entiere
   pour dire « Brouillon ».

   `.wf-etat` reprend desormais la charte, avec sa pastille. La largeur fixe
   n'est plus necessaire : les libelles s'alignent a gauche comme la maquette,
   et c'est la colonne qui est bornee, pas l'etiquette.

   Un badge est une INFORMATION : il ne se clique pas. */
.wf-etat { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
  font-size: var(--t-libelle); font-weight: 600;
  padding: .12rem .55rem .12rem .45rem; border-radius: 6px;
  border: 1px solid var(--tag-trait); background: var(--tag-fond); color: var(--tag-texte); }
.wf-etat::before { content: ""; width: 6px; height: 6px; border-radius: 999px;
  background: var(--etat-brouillon); flex: none; }
.wf-soumise::before { background: var(--etat-a-valider); }
.wf-validee::before { background: var(--etat-validee); }
.wf-contractee::before { background: var(--etat-contractuelle); }
/* Les etapes de vie : projet, affaire conclue, abandon (l'historique qu'on
   garde). Seule la pastille change - le mot suffit a les distinguer. */
.wf-projet::before { background: var(--marine); }
.wf-conclue::before { background: var(--vert); }
.wf-abandonnee { color: var(--danger); border-color: var(--danger-trait); }
.wf-abandonnee::before { background: var(--danger); }


/* L'en-tête d'un widget. Il portait a droite une poignee de deplacement et
   une croix de masquage : reordonner et masquer des blocs de tableau de bord
   ne servait a rien, et mettait deux commandes de reglage devant la donnee.
   Le geste, son script et son rangement sont retires. */
.widget-entete > :first-child { margin-top: 0; }


/* ---------- Onglets de vue (Liste / Pipeline / Carte) ----------
   Trois vues sur les mêmes données. Un bouton isolé « Voir sur la carte » ne
   disait ni qu'il existait une troisième vue, ni laquelle on regardait.

   Dans la feuille commune parce que trois écrans les portent : les recopier
   produirait la même divergence que pour le menu d'état. */
.onglets-vue { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); margin: .8rem 0 1.15rem; flex-wrap: wrap; }
.onglets-vue a { padding: .6rem 1.1rem; text-decoration: none; color: var(--text-muted); font-weight: 600;
  font-size: var(--t-corps); border-bottom: 2.5px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.onglets-vue a:hover { color: var(--vert-fonce); }
.onglets-vue a.actif { color: var(--marine); font-weight: 700; border-bottom-color: var(--vert); }
.onglets-vue .compte { font-variant-numeric: tabular-nums; color: var(--text-faint); font-weight: 700; margin-left: .3rem; }


/* Le fil d'Ariane cliquable (`.fil-ariane`) a quitté le gabarit : la
   circulation passe par le rail, et « où on est » vit dans la bande
   d'identité (`.barre-identite .qsj`). */


/* ---------- L'en-tête des trois vues sur les études ----------
   Trois écrans montrent les mêmes études et chacun s'annonçait autrement :
   « Liste des études d'implantation », « Études d'implantation »,
   « Bibliothèque ». Trois titres pour un seul objet donnent l'impression de
   changer de sujet en changeant d'onglet, au lieu de point de vue.

   Un seul en-tête (`etudes/_entete_vues.html`), un seul habillage ici. */
.entete-vues { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0 0 0.2rem; }
.entete-vues h1 { margin: 0 0 0.15rem; }
/* « + Nouvelle étude » a quitté cet en-tête pour la barre de filtres
   (`.filtres-droite .nouvelle` ci-dessous) : sa place est au milieu des
   actions qui portent sur la même liste, pas isolée en haut de page. */
.filtres-droite .nouvelle { background: var(--marine); color: var(--sur-couleur); text-decoration: none; font-weight: 700; padding: 0.5rem 1.05rem; border-radius: 10px; white-space: nowrap; }
.filtres-droite .nouvelle:hover { background: var(--marine); }


/* ---------- Le menu d'actions d'une étude ----------
   L'état se lit, les gestes se font, et pas au même endroit. Une version
   antérieure faisait du badge d'état le déclencheur du menu : un objet qui
   informe et commande à la fois fait hésiter à chaque ligne, et les gestes
   restants s'alignaient à côté avec des longueurs différentes, si bien que
   la fin de ligne n'était jamais au même endroit.

   Le statut est donc un badge qu'on ne clique pas, et tout ce qu'on peut
   faire vit derrière un « ⋯ » à place fixe : c'est ce qui donne au tableau
   un bord droit.

   Le volet est en `position: fixed`, sans quoi les `overflow` du tableau le
   découpent (voir le menu d'état plus haut). */
.menu-actions { position: relative; display: inline-block; }
/* Le préfixe `button.` est indispensable : `base.html` pose dans son
   `<style>` un `button { background: #0e4c7c; color: #fff }` pour tous les
   boutons, et ce style est chargé après cette feuille. À poids égal, la
   dernière règle l'emporte ; qualifier par la balise fait reprendre la main
   au composant sans `!important`.

   Même piège ailleurs : un fond repeint sans redire l'encre rend l'icône
   d'un bouton invisible. */
/* Cinq couleurs ecrites en clair ici - un bleu, deux gris, un blanc -
   pour dire ce que la charte disait deja. Elles ne suivaient ni le theme
   sombre ni un changement de teinte. */
button.menu-actions-declencheur {
  margin: 0; padding: 0.35rem 0.75rem; line-height: 1;
  border: 1px solid var(--border-champ); border-radius: var(--rayon-champ);
  background: var(--bg-card);
  color: var(--text-muted); font-weight: 700; font-size: var(--t-corps);
  cursor: pointer;
}
button.menu-actions-declencheur:hover { border-color: var(--vert); color: var(--vert-fonce); }
button.menu-actions-declencheur[aria-expanded="true"] { background: var(--vert-pale);
  border-color: var(--vert); color: var(--vert-fonce); }
.menu-actions-volet {
  position: fixed; z-index: 60; min-width: 14rem; max-width: 18rem;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(16,42,67,.14), 0 2px 6px rgba(16,42,67,.06);
  padding: 0.35rem; text-align: left;
  /* `position: fixed` change le placement, pas l'héritage : le volet reste
     enfant de `td.actions`, qui porte `white-space: nowrap` pour empêcher
     ses boutons de passer à la ligne, et cette règle traversait le menu. La
     plus longue raison demandait 569 px dans une case de 416 et se trouvait
     coupée net. Visible seulement en ouvrant le menu d'une étude
     contractée. */
  white-space: normal;
}
.menu-actions-volet form { margin: 0; }
.menu-actions-volet hr { border: 0; border-top: 1px solid var(--filet); margin: 0.3rem 0.45rem; }
/* Même correction pour le titre de section. */
.menu-titre { font-size: var(--t-libelle); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); padding: 0.45rem 0.65rem 0.2rem; }
.menu-actions-volet .action {
  display: block; width: 100%; text-align: left; margin: 0;
  padding: 0.45rem 0.65rem; border: 0; border-radius: 8px; background: none;
  font: inherit; font-size: var(--t-petite); font-weight: 500; line-height: 1.3; color: var(--text);
  text-decoration: none; cursor: pointer;
}
a.menu-actions-volet .action:hover, .menu-actions-volet a.action:hover,
.menu-actions-volet button.action:hover { background: var(--vert-pale); color: var(--vert-fonce); }
.menu-actions-volet .action.engageant { color: var(--marine); }
.menu-actions-volet button.action.engageant:hover { background: var(--vert-pale); }
/* Distinct de « engageant » : ce geste ne verrouille pas, il detruit -
   la suppression n'a pas de corbeille. */
.menu-actions-volet .action.danger { color: var(--danger); }
.menu-actions-volet button.action.danger:hover { background: var(--danger-fond); }
/* Ce qui n'est pas possible reste visible, grisé, avec sa raison : un bouton
   absent ne dit rien, et l'utilisateur cherche ce qu'il a mal fait. */
.menu-actions-volet .action.impossible { color: var(--text-faint); cursor: default; }
.menu-actions-volet .action.impossible:hover { background: none; }
/* #69737f et non #8b98a8 : l'ancien gris donnait 2,94 de contraste sur
   blanc, sous le seuil de 4,5 et même sous les 3,0 admis pour du gras. Cette
   phrase porte la raison pour laquelle une action est impossible, elle ne
   peut pas être écrite trop pâle. Le nouveau gris est à 4,82 et reste
   discret. */
.menu-actions-volet .raison { display: block; font-style: normal; font-weight: 400; font-size: var(--t-libelle); line-height: 1.35; color: var(--text-muted); margin-top: 0.1rem; }



/* ---------- L'écran « rien à montrer » ----------
   Il s'appelait `.vide`, nom qui servait à cinq choses différentes dans cinq
   gabarits : ce cadre en pointillés, un message « aucune donnée » en
   italique sur l'accueil, un espaceur dans le fil des étapes, une source
   sans valeur sur l'écran de géocodage.

   Quand la liste des études a marqué ses CA manquants d'un
   `class="ca vide"`, ces cellules ont hérité du cadre : un filet pointillé
   apparaissait autour de la colonne « CA estimé », sur les seules lignes
   sans montant. Aucune règle n'était fautive, c'est le nom qui l'était - le
   même mécanisme avait déjà coûté avec `.pastille`, partagé entre la légende
   de carte et les chips de filtre.

   Le style était par ailleurs recopié à l'identique dans la liste et dans la
   bibliothèque ; il est ici, une fois. */
.ecran-vide { background: var(--bg-card); border: 1px dashed var(--border); border-radius: 8px; padding: 2rem 1.5rem; text-align: center; color: var(--text-muted); }
.ecran-vide p { margin: 0.35rem 0; }


/* ---------- La pastille « démonstration » ----------
   Ambre plutôt que rouge : ce n'est pas une alerte mais un contexte, à
   remarquer sans crier puisqu'on la côtoie toute la journée en recette.

   Ici et non dans le `nav` de `base.html` : écrite `nav .pastille-demo`,
   elle ne s'affichait que dans la barre du haut, et la même pastille posée
   sur la carte du client dans l'administration apparaissait en texte nu. Un
   style enfermé dans un sélecteur de contexte ne suit pas son composant. */
.pastille-demo { display: inline-block; background: var(--alerte-fond); color: var(--alerte);
  border: 1px solid var(--ambre); border-radius: 999px; padding: 0.05rem 0.5rem;
  font-size: var(--t-petite); font-weight: 600; letter-spacing: .02em;
  white-space: nowrap; }

/* ---------- Le filtre par enseigne ----------
   Posé au-dessus des onglets de vue et dans le même esprit : des liens qu'on
   parcourt du regard, celui qui est actif portant le contraste. Il
   n'apparaît que si le compte porte plusieurs enseignes ; un client
   mono-enseigne garde exactement l'écran qu'il avait. */
.filtre-enseigne { display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.5rem; margin: 0 0 0.6rem; }
.filtre-enseigne .filtre-titre { font-size: var(--t-petite); color: var(--text-faint);
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.filtre-enseigne a { padding: 0.15rem 0.7rem; border: 1px solid var(--trait);
  border-radius: 999px; color: var(--encre); text-decoration: none;
  font-size: var(--t-petite); background: var(--blanc); }
.filtre-enseigne a:hover { border-color: var(--border); }
.filtre-enseigne a.actif { background: var(--bleu); border-color: var(--bleu);
  color: var(--sur-couleur); font-weight: 600; }

/* ---------- Concurrence d'une enseigne ----------
   Un flux vertical d'étapes numérotées, à la place de quatre panneaux côte à
   côte : deux panneaux de même hauteur portaient 2 cases (172 px chacune) et
   16 cases (21 px chacune), la place était distribuée à l'envers et la liste
   des types défilait pour cette raison. */
.etape-reglage { border:1px solid var(--trait); border-radius: var(--rayon);
  padding: 0.85rem 1rem; margin: 0.55rem 0; background: var(--blanc); }
.etape-reglage > h4 { margin: 0 0 0.15rem; font-size: var(--t-note); color: var(--text); }
.etape-reglage > .meta { margin: 0 0 0.7rem; font-size: var(--t-note);
  color: var(--texte-doux); }
.rang-reglage { display: inline-flex; align-items: center; justify-content: center;
  width: 1.45rem; height: 1.45rem; border-radius: 999px; background: var(--bleu);
  color: var(--sur-couleur); font-size: var(--t-petite); font-weight: 700; margin-right: 0.45rem;
  vertical-align: 0.05rem; }

/* L'avertissement qui évite de fausser toutes les études d'un client. Il
   était en italique gris sous une boîte à défilement, donc invisible à qui
   il vise. */
.garde-reglage { background: var(--alerte-fond); border: 1px solid var(--ambre); color: var(--alerte);
  border-radius: 8px; padding: 0.55rem 0.85rem; margin: 0.7rem 0 0;
  font-size: var(--t-note); }

.bascule-precision { font-size: var(--t-petite); opacity: 0.85; margin-left: 0.3rem; }

/* Les deux rôles, côte à côte. Ils remplacent le panneau « Tables Géodata » :
   ses deux cases étaient exactement ces deux rôles. */
.deux-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem;
  margin-top: 0.9rem; }
@media (max-width: 820px) { .deux-roles { grid-template-columns: 1fr; } }
.role-concurrence > h5 { margin: 0 0 0.1rem; font-size: var(--t-note);
  color: var(--text); font-weight: 600; }
.role-concurrence > .meta { margin: 0 0 0.5rem; font-size: var(--t-note);
  color: var(--texte-doux); }

/* Deux colonnes de cases : les seize catégories tiennent à l'écran, sans
   ascenseur. Auparavant on ne voyait qu'un type coché sur les quatre
   annoncés. */
.cases-types { display: grid; grid-template-columns: 1fr 1fr; gap: 0.05rem 0.8rem; }
@media (max-width: 1100px) { .cases-types { grid-template-columns: 1fr; } }
.case-type { display: flex; align-items: baseline; gap: 0.45rem;
  padding: 0.17rem 0.3rem; border-radius: 5px; font-size: var(--t-note);
  cursor: pointer; }
.case-type:hover { background: var(--survol); }
.case-type input { flex: none; }
.case-nom { flex: 1 1 auto; }
.case-glose { display: block; font-size: var(--t-petite); color: var(--texte-discret);
  font-style: normal; }
.case-eff { margin-left: auto; color: var(--texte-doux); font-size: var(--t-petite);
  font-variant-numeric: tabular-nums; }

/* Quatre chiffres séparés, chacun avec son titre collé : l'aperçu était une
   phrase où deux nombres comptaient des points et le troisième des
   catégories. */
.compteur-geodata { display: flex; gap: 2.2rem; flex-wrap: wrap;
  background: var(--survol); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: 0.7rem 1rem; margin: 0.9rem 0 0; }
.compteur-geodata > div { text-align: center; }
.compteur-lib { display: block; font-size: var(--t-petite); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--texte-doux); }
.compteur-val { display: block; font-size: var(--t-grande); font-weight: 700;
  font-variant-numeric: tabular-nums; }
.compteur-val.compteur-rien { color: var(--texte-doux); font-weight: 400;
  font-size: var(--t-moyenne); }

/* Les catégories de concurrence, repliées : même `<details>` que le bandeau
   de santé (`.sante-repliable`) et le menu ⋯ des comptes. Seize cases
   occupent la moitié de l'écran pour un réglage qu'on touche une fois par
   enseigne ; le compte et le détail de ce qui est coché restent lisibles
   replié, ce qui distingue un repli d'un masquage. */
.categories-repliable { border: 1px solid var(--trait); border-radius: var(--rayon);
  padding: 0.5rem 0.8rem; margin-top: 0.7rem; background: var(--survol); }
.categories-repliable > summary { list-style: none; cursor: pointer;
  display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.categories-repliable > summary::-webkit-details-marker { display: none; }
.categories-repliable > summary::before { content: "▸"; color: var(--texte-doux); }
.categories-repliable[open] > summary::before { content: "▾"; }
.categories-repliable[open] { background: var(--blanc); }
.categories-repliable .resume-coche { color: var(--texte-doux);
  font-size: var(--t-petite); flex: 1 1 auto; }
.categories-repliable .deplier { color: var(--bleu);
  font-size: var(--t-petite); font-weight: 600; margin-left: auto; }

/* Les jalons du parcours, remontés du `<style>` de la Liste où ils vivaient
   seuls : la Carte avait reçu le même gabarit sans ces quatre règles, et ses
   pastilles s'affichaient transparentes, présentes dans le DOM mais
   invisibles. Un morceau partagé ne l'est qu'à moitié tant que sa mise en
   forme reste chez l'un des écrans. */

/* Le troisième état d'un jalon : l'étape ne peut pas se faire, la donnée
   manque en amont. Hachuré, il ne se confond ni avec le plein ni avec le
   vide, alors qu'un demi-ton se lirait comme « en cours ». Il porte un mot à
   côté, le survol n'existant pas sur mobile. */
/* Le mot tient sur UNE ligne, a cote des jalons et non dessous : sur trois
   lignes il triplait la hauteur de la rangee, et sept etudes ne tenaient
   plus dans un ecran. La phrase entiere est dans son infobulle. */
.jalon-manque { display: inline-block; margin-left: 0.4rem; white-space: nowrap;
  font-size: var(--t-libelle); color: var(--texte-doux); font-style: italic; }
/* Le repère « prête à... » sous les jalons, quand un brouillon terminé
   n'attend plus qu'un clic. */
.pret-a { display: block; margin-top: 0.2rem; font-size: var(--t-petite);
  font-weight: 700; color: var(--succes); }
/* Même repère, en rail étroit (bibliotheque.html, onglet Carte) : un point
   plutôt qu'un mot, le texte complet reste dans le `title`. */
.pret-a-point { color: var(--succes); font-size: var(--t-note);
  vertical-align: middle; margin-left: 0.2rem; }


/* ---------- La barre commune aux trois vues des études ----------
   Ces règles vivaient dans le `<style>` de `etude_liste.html` et de
   `bibliotheque.html`. Le Pipeline a reçu le gabarit commun
   (`_barre_filtres.html`) sans le style : ses pastilles s'affichaient en
   rectangles bleus pleins, la recherche sans son cadre, le bandeau de portée
   sans son fond. Un morceau partagé ne l'est qu'à moitié tant que sa mise en
   forme reste chez l'un des trois écrans. */
.barre-filtres { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0 0 0.9rem; }
/* Même défaut que ci-dessus : la correction avait d'abord été faite dans le
   <style> local de etude_liste.html seulement, et le Pipeline restait
   intact. Ces règles n'ont plus qu'une source, ici. */
.filtres-droite { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.filtres-droite > * { margin-top: 0; }
.recherche-biblio { display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--bg-card); border: 1px solid var(--border-champ);
  border-radius: var(--rayon-champ); padding: 0.3rem 0.6rem;
  color: var(--text-faint); flex-shrink: 1; min-width: 0; }
/* Le CONTENANT porte la boite, le champ n'en porte pas : deux bordures
   emboitees donnent un champ dans un champ. */
.recherche-biblio input { border: 0; background: transparent; font: inherit;
  font-size: var(--t-dense); color: var(--text); outline: none; width: 13rem;
  margin: 0; padding: 0; max-width: none; min-height: 0; box-shadow: none; }
.recherche-biblio input:focus { box-shadow: none; border: 0; }
/* Le contenant s'allume a la place du champ qu'il enferme. */
.recherche-biblio:focus-within { border-color: var(--vert);
  box-shadow: 0 0 0 3px var(--vert-pale); }
.filtre-expansion { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--t-note); color: var(--text-muted); flex-shrink: 0; white-space: nowrap; }
.filtre-expansion .role { font-size: var(--t-petite); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; background: var(--info-fond); color: var(--marine); border-radius: 999px; padding: 0.08rem 0.45rem; white-space: nowrap; }
.filtre-expansion select { margin: 0; font-size: var(--t-note); padding: 0.25rem 0.4rem; }
.bandeau-perimetre { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
  margin: 0 0 1rem; padding: 0.5rem 0.85rem; background: var(--info-fond); border: 1px solid var(--border);
  border-radius: 8px; font-size: var(--t-note); color: var(--tag-texte); }
.bandeau-perimetre .a-valider { margin-left: auto; background: var(--ambre); color: var(--sur-couleur);
  border-radius: 999px; padding: 0.1rem 0.6rem; font-weight: 700; }
.pastilles-etat { display: flex; gap: 0.35rem; flex-wrap: wrap; margin: 0 0 1rem; }
.filtre-pastille { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; font-size: var(--t-note); font-weight: 600; color: var(--text-muted); background: var(--bg-card); border: 1px solid var(--border); border-radius: 999px; padding: 0.3rem 0.7rem; cursor: pointer; }
.filtre-pastille .n { font-weight: 700; background: var(--bg-page); color: var(--text); border-radius: 999px; padding: 0.02rem 0.4rem; font-variant-numeric: tabular-nums; }
.filtre-pastille[aria-pressed="true"] { background: var(--marine); border-color: var(--marine); color: var(--sur-couleur); }
.filtre-pastille[aria-pressed="true"] .n { background: rgba(255,255,255,.25); color: var(--sur-couleur); }
.filtre-pastille.soumise .n { background: var(--alerte-fond); color: var(--alerte); }
.filtre-pastille.validee .n { background: var(--vert-pale); color: var(--vert-fonce); }
.filtre-pastille.contractee .n { background: var(--info-fond); color: var(--marine); }
.bouton-filtrer { font-size: var(--t-note); font-weight: 600; color: var(--sur-couleur);
  background: var(--marine); border: 1px solid var(--marine); border-radius: 8px;
  padding: 0.3rem 0.9rem; cursor: pointer; }
.effacer-filtres { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--t-note); color: var(--text-muted); text-decoration: none;
  border: 1px dashed var(--border); border-radius: 999px; padding: 0.25rem 0.7rem; }
.effacer-filtres:hover { border-color: var(--marine); color: var(--marine); }
a.filtre-pastille { text-decoration: none; }

/* Le voile de chargement de la carte : plusieurs secondes de blanc passaient
   pour une panne. Retiré au premier `load` de MapLibre, il ne peut donc pas
   survivre à une carte qui a fini de charger. */
.carte-chargement { position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  background: var(--fond); color: var(--texte-doux); font-size: var(--t-note); }
/* Les jalons du rail : plus serrés qu'en tableau, la colonne est étroite. */
/* Le CA estimé porte un pointillé : il signale qu'il y a quelque chose à
   lire au survol. Sans lui personne ne survole, et « 39 concurrents » à côté
   de « 6,8 M€ » fait croire que le second tient compte du premier. */
/* Le pointille dit « il y a quelque chose a lire ici », pour les deux
   origines du chiffre : ce qui change est ce que l'infobulle raconte, pas
   qu'il y en ait une. */
.ca-saisi, .ca-modele { border-bottom: 1px dotted var(--texte-doux); cursor: help; }

/* Le menu ⋯ d'une zone contractuelle. Un formulaire de fermeture était logé
   dans la cellule (champ date, sélecteur, bouton) et le bouton débordait de
   33 px hors du tableau, coupé à « Fer... ».

   Même `<details>` que le menu des comptes et le repli des catégories. */
.zc-col-gestes { width: 3.5rem; }
.gestes-zone { position: relative; display: inline-block; }
.gestes-declencheur { margin: 0; cursor: pointer; text-align: center;
  background: var(--blanc); border: 1px solid var(--trait); border-radius: 6px;
  padding: 0.1rem 0.5rem; color: var(--texte-doux); font-weight: 700;
  letter-spacing: 0.06em; }
.gestes-declencheur:hover { border-color: var(--bleu); color: var(--bleu); }
/* `fixed` et non `absolute` : le même empilement d'`overflow` qui découpait
   le menu d'état des études découperait ici. Coordonnées posées à
   l'ouverture depuis le bouton. */
.gestes-volet { position: fixed; z-index: 60; min-width: 15rem;
  background: var(--blanc); border: 1px solid var(--fort, var(--trait));
  border-radius: 9px; padding: 0.35rem; text-align: left;
  box-shadow: 0 8px 22px rgba(20, 30, 50, 0.16); }
.gestes-volet a, .gestes-volet button { display: block; width: 100%;
  text-align: left; padding: 0.35rem 0.55rem; border-radius: 6px;
  font-size: var(--t-petite); text-decoration: none; }
.gestes-volet a:hover { background: var(--survol); text-decoration: none; }
.gestes-volet .gestes-separateur { border-top: 1px solid var(--trait);
  margin: 0.3rem 0; }
.gestes-volet .gestes-titre { display: block; padding: 0.2rem 0.55rem;
  font-size: var(--t-petite); font-weight: 700; color: var(--texte-doux); }
.gestes-volet label { display: block; padding: 0.15rem 0.55rem;
  font-size: var(--t-petite); color: var(--texte-doux); }
.gestes-volet input, .gestes-volet select { width: 100%; margin: 0.1rem 0 0; }
.gestes-volet button.danger { background: var(--blanc); border: 1px solid var(--danger);
  color: var(--danger); font-weight: 600; cursor: pointer; margin-top: 0.35rem; }
.gestes-volet button.danger:hover { background: var(--danger-fond); }

/* ---------- La rangée du cockpit, composant partagé ----------
   Ces règles vivaient en `<style>` local dans `templates/accueil.html`,
   seul écran à s'en servir, jusqu'à ce que le super administrateur ait son
   propre cockpit montrant les volumes du parc au lieu des états d'étude.
   Un composant partagé a un seul habillage. */
.cockpit { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 0.8rem; margin: 0 0 1.3rem; }
.stat { border: 1px solid var(--border); border-radius: 12px; padding: 0.75rem 0.9rem;
  text-align: center; display: block; text-decoration: none; color: inherit; }
a.stat:hover { border-color: var(--marine); }
.stat .k { display: block; font-size: var(--t-grande); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.stat .l { display: block; font-size: var(--t-petite); color: var(--text-muted);
  margin-bottom: 0.25rem; text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 700; }
.stat.neutre { background: var(--info-fond); } .stat.neutre .k { color: var(--marine); }
.stat.brouillon { background: var(--bg-page); } .stat.brouillon .k { color: var(--tag-texte); }
.stat.avalider { background: var(--alerte-fond); } .stat.avalider .k { color: var(--alerte); }
.stat.validee { background: var(--vert-pale); } .stat.validee .k { color: var(--vert-fonce); }
.stat.contrat { background: var(--info-fond); } .stat.contrat .k { color: var(--marine); }
.stat.ca { background: var(--info-fond); } .stat.ca .k { color: var(--marine); }

/* ---------- Le tableau du parc, forme transposée du CRM ----------
   Partagé par l'écran du parc et le cockpit via le fragment
   `_ligne_parc.html`. Cinq choix : en-tête à fond, nombres en colonne
   (`.faits`), jauge de sièges, badges à point (`.pdot`, le « pill-dot » du
   CRM), tiret pour l'absence.

   La forme peut évoluer, mais les noms de classes sont le contrat avec les
   gabarits. */
.tableau-parc { border-collapse: collapse; width: 100%; }
.tableau-parc th { background: var(--border); font-size: var(--t-petite);
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--encre);
  font-weight: 600; text-align: left; padding: 0.55rem 0.9rem; }
.tableau-parc td { padding: 0.7rem 0.9rem; border-top: 1px solid var(--trait);
  vertical-align: top; font-variant-numeric: tabular-nums; }
.tableau-parc tbody tr { transition: background-color 0.14s ease; }
.tableau-parc tbody tr:hover { background: var(--survol); }
.tableau-parc tr.attente td { background: var(--danger-fond); }
.tableau-parc .col-etat { width: 8rem; }
.tableau-parc .col-gestes { width: 3.5rem; text-align: center; }

/* L'aération : les colonnes d'un mot rendent leur largeur aux colonnes du
   milieu, qui portent l'information. Les largeurs fixes vont aux colonnes
   courtes, les planchers (`min-width`) empêchent les colonnes bavardes de
   replier « 27 sans CA » au milieu du mot, et `.insecable` garde ensemble ce
   qui n'a pas de sens coupé. */
.tableau-parc .col-donnees { min-width: 16rem; }
.tableau-parc .col-contrat { min-width: 14rem; }
.tableau-parc .col-consultant { white-space: nowrap; }
.tableau-parc .col-modele { width: 9.5rem; }
.tableau-parc .col-import { min-width: 10.5rem; }
.insecable { white-space: nowrap; }

.nom-compte { font-weight: 700; }

/* Les chiffres tombent en colonne : nombre à droite, libellé à gauche. */
.faits { display: grid; grid-template-columns: auto 1fr; gap: 0 0.45rem; }
.faits .n { text-align: right; font-weight: 700;
  font-variant-numeric: tabular-nums; }
.faits .l { color: var(--texte-doux); font-size: var(--t-petite);
  align-self: baseline; }

/* La jauge de sièges : un contrat se voit, il ne se lit pas. */
.jauge { width: 120px; height: 6px; border-radius: 4px;
  background: var(--trait); margin: 0.3rem 0; overflow: hidden; }
.jauge i { display: block; height: 100%; background: var(--succes); }
.jauge.pleine i { background: var(--alerte); }
.jauge.deborde i { background: var(--danger); }
.sieges { font-variant-numeric: tabular-nums; }
.sieges.plein { color: var(--alerte); }
.sieges.deborde { color: var(--danger); }

/* Le badge à point du CRM : la couleur se lit avant le mot. */
.pdot { display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.16rem 0.6rem; border-radius: 100px; font-size: var(--t-petite);
  font-weight: 600; white-space: nowrap; }
.pdot::before { content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex-shrink: 0; }
.pdot-termine { background: var(--succes-fond); color: var(--succes); }
.pdot-echec { background: var(--danger-fond); color: var(--danger); }
.pdot-depose, .pdot-a_verifier, .pdot-en_cours {
  background: var(--alerte-fond); color: var(--alerte); }
.pdot-gris { background: var(--survol); color: var(--texte-doux); }
.pdot-modele-pas_demarre { background: var(--survol); color: var(--texte-doux); }
.pdot-modele-en_cours { background: var(--alerte-fond); color: var(--alerte); }
.pdot-modele-en_recette { background: var(--info-fond); color: var(--marine); }
.pdot-modele-operationnel { background: var(--succes-fond); color: var(--succes); }

/* La pastille de module `.mod` a été retirée d'ici : le parc affiche ses
   modules en `.pdot`/`.insecable` et plus personne ne la portait, sauf les
   cartes de l'accueil, qui s'appellent aussi `.mod` et héritaient de son
   `white-space: nowrap` - le descriptif sortait de la carte sans revenir à
   la ligne. Si la pastille doit renaître, lui donner un autre nom que celui
   des cartes. */

/* Les faits étiquetés. Le composant « étiquette + valeur » du cockpit
   (CONNECTÉ · PROFIL · CLIENT) est partagé : la fiche d'un compte du parc
   l'adopte (CODE · ÉTUDES · UTILISATEURS). Il vivait dans le <style> de
   `accueil.html`, il est monté ici pour n'exister qu'une fois. */
.qui-suis-je { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0 0 1.5rem; padding: 0; }
.qsj { display: inline-flex; align-items: center; gap: 0.45rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 999px; padding: 0.22rem 0.75rem 0.22rem 0.3rem; font-size: var(--t-petite); color: var(--text); }
.qsj-etiq { font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; background: var(--bg-page); color: var(--marine); border-radius: 999px; padding: 0.1rem 0.5rem; }

/* L'état calme : quand tout va bien, un point et le mot. La capsule `.pdot`
   est réservée à ce qui réclame l'œil - quand tout est badge, plus rien
   n'en est un. */
.calme { white-space: nowrap; }
.calme::before { content: ""; display: inline-block; width: 7px; height: 7px;
  border-radius: 50%; margin-right: 0.4rem; vertical-align: 0.05rem; }
.calme.vert::before { background: var(--succes); }
.calme.ambre::before { background: var(--alerte); }
.calme.gris { color: var(--texte-doux); }
.calme.gris::before { background: var(--border); }
.rien { color: var(--border); }
/* Une absence qui appelle un geste se dit en mots, pas en tiret. */
.rien-action { color: var(--alerte); font-style: italic; }

/* ---------- Le formulaire large ----------
   Standard des formulaires de carte : un formulaire posé dans une carte
   étroite laisse la moitié droite de l'écran vide, celui-ci s'étale en
   colonnes séparées d'un filet et s'empile sous 980 px.

   S'applique à tout formulaire de carte à plusieurs groupes de champs ; les
   écrans existants migrent au fil des retouches. */
.formulaire-large { display: grid;
  grid-template-columns: 1fr 1px 1fr 1px 1fr; gap: 1.1rem;
  align-items: start; }
.formulaire-large .barre { background: var(--trait); align-self: stretch; }

/* ---------- Le bandeau gauche ----------
   Un rail permanent à gauche, à trois états (déplié / icônes / masqué), à la
   place d'une barre du haut et de son menu ☰ à ouvrir. Le rail est le chemin
   direct vers Études et Zones : le reproche fait à un menu qui répète
   l'accueil ne vaut plus quand ce menu est visible en permanence.

   La maquette d'origine calait le rail sous sa propre barre de démo interne
   (top 38px) ; l'application n'a pas cette barre, le rail part du premier
   pixel (top 0). */

/* `minmax(0, 1fr)` et non `1fr` : une colonne de grille a pour largeur
   minimale celle de son contenu, et refuse donc de retrecir sous un
   tableau large ou un kanban a quatre colonnes. La page debordait alors
   de la fenetre par la droite - le bouton « Nouvelle etude » et la
   derniere colonne du pipeline se faisaient couper - et l'ecran gagnait
   une barre de defilement horizontale que personne n'avait demandee.
   Avec un minimum a zero, la colonne rend la main a son contenu, qui
   defile chez lui (`.pipeline`, `.tableau-cadre`) au lieu de pousser
   toute la page. */
.shell { display: grid; grid-template-columns: var(--rail-largeur) minmax(0, 1fr); min-height: 100vh;
  transition: grid-template-columns .2s cubic-bezier(.4,0,.2,1); }
.shell.collapsed { grid-template-columns: var(--rail-largeur-replie) minmax(0, 1fr); }
.shell.hidden { grid-template-columns: 0 minmax(0, 1fr); }

.shell > aside { background: var(--rail); color: var(--rail-encre);
  border-right: 1px solid var(--rail-trait);
  display: flex; flex-direction: column; overflow: hidden;
  position: sticky; top: 0; height: 100vh; }
.shell.hidden > aside { visibility: hidden; }

/* La marque s'aligne sur la premiere ligne du contenu, pas 13 px plus bas. */
.rail-brand { display: flex; align-items: center; gap: .6rem; padding: 14px .8rem .6rem; }
.rail-brand .txt { min-width: 0; line-height: 1.15; display: flex; flex-direction: column; }
.rail-brand .txt .n { display: block; font-family: var(--police-titre); font-weight: 700; font-size: var(--t-section); letter-spacing: -.01em; color: var(--rail-encre); }
/* Le sous-titre : 11px sur la maquette, mais la grille de l'application n'a
   que trois tailles (`test_typographie.py`) et `--t-petite` est la plus
   proche. */
.rail-brand .txt .s .demo { font-size: var(--t-libelle); font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em; color: var(--ambre-text);
  background: var(--ambre-bg); border-radius: 999px; padding: 0 .35rem; }
/* Le nom du compte s'abrege ; la pastille garde sa place. « COMPTE ELECTRO
   demo » coupait la pastille au milieu et laissait lire « DEM... ». */
.rail-brand .txt .s { display: flex; align-items: center; gap: .3rem; min-width: 0;
  font-size: var(--t-petite); color: var(--rail-doux); }
.rail-brand .txt .s .nom { min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-style: normal; }
.rail-brand .txt .s .demo { flex: none; }
.rail-brand .actions { margin-left: auto; display: inline-flex; gap: .1rem; }
.rail-brand .actions button { background: transparent; border: 0; color: var(--rail-doux); cursor: pointer;
  width: 27px; height: 27px; border-radius: 7px; display: grid; place-items: center; padding: 0; }
.rail-brand .actions button:hover { background: var(--rail-survol); color: var(--rail-encre); }
/* Rail replie : le bouton de depliage RESTE, centre sous le losange, comme
   la maquette. Masque avec le nom, il ne laissait plus aucun moyen de
   rouvrir le menu : on repliait le rail et on ne pouvait plus revenir. */
.collapsed .rail-brand { flex-direction: column; gap: .3rem;
  justify-content: center; padding: 14px 0 .5rem; }
.collapsed .rail-brand .txt { display: none; }
.collapsed .rail-brand .actions { margin-left: 0; }
/* Le chevron pointe vers ce qu'il fait : fermant quand le rail est ouvert,
   ouvrant quand il est replie. */
.collapsed .rail-brand .actions button svg { transform: rotate(180deg); }


nav.rail-menu { display: flex; flex-direction: column; gap: 1px; padding: .3rem .8rem; overflow-y: auto; }
nav.rail-menu .sect { font-size: var(--t-libelle); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--rail-doux); padding: .6rem .75rem .2rem; }
/* Rail replie : le libelle de section devient un FILET. Il etait seulement
   rogne, et laissait « ETU », « COM », « RESS » - des mots coupes qui se
   lisent comme un defaut d'affichage. La maquette pose un trait : il separe
   sans rien pretendre dire. */
.collapsed nav.rail-menu .sect { text-indent: -999em; white-space: nowrap;
  letter-spacing: 0; padding: 0; height: 1px; margin: .45rem .5rem;
  background: var(--rail-trait); overflow: hidden; }
nav.rail-menu a { display: flex; align-items: center; gap: .7rem; padding: .52rem .65rem; border-radius: 8px;
  color: var(--rail-encre); text-decoration: none; font-size: var(--t-moyenne); font-weight: 500; white-space: nowrap; }
nav.rail-menu a svg { flex: 0 0 auto; }
nav.rail-menu a .t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
nav.rail-menu a:hover { background: var(--rail-survol); color: var(--rail-encre); }
nav.rail-menu a.actif { background: var(--rail-actif-fond); color: var(--rail-actif-texte); font-weight: 700; box-shadow: inset 3px 0 0 var(--vert); }
nav.rail-menu a .badge { font-size: var(--t-libelle); font-weight: 800; background: var(--alerte-fond); color: var(--alerte);
  border-radius: 999px; padding: .02rem .42rem; font-variant-numeric: tabular-nums; }
nav.rail-menu a .badge.act { background: var(--alerte-fond); color: var(--alerte); }
.collapsed nav.rail-menu a { justify-content: center; padding-inline: 0; }
.collapsed nav.rail-menu a .t, .collapsed nav.rail-menu a .badge { display: none; }
.collapsed nav.rail-menu a.actif { box-shadow: inset 0 -3px 0 var(--vert); }

/* Le pied du rail est une LIGNE : avatar, nom et role, puis la
   deconnexion au bout. La regle de la deconnexion disait deja « un bouton
   au bout de la ligne, comme la maquette » et la posait en `flex: none` -
   mais le pied n'avait jamais recu son `display: flex`, alors le bouton
   tombait sous le nom, sur une ligne a lui. La version, elle, garde sa
   propre ligne : elle se lit une fois par mois, pas a chaque coup d'oeil. */
.rail-foot { margin-top: auto; padding: .6rem .8rem .8rem;
  border-top: 1px solid var(--rail-trait);
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.rail-foot .rail-version { flex: 1 1 100%; }
.rail-user { display: flex; align-items: center; gap: .55rem; font-size: var(--t-petite);
  flex: 1 1 auto; min-width: 0; }
/* Meme lettre seule, meme decalage, meme remede : voir `.eq-pastille`. */
.rail-user .pill { display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--primary); color: var(--sur-couleur);
  line-height: 1; font-weight: 700; flex: 0 0 auto; }
/* Centrage flex pur : ni text-box-trim (support partiel qui decale), ni nudge
   (il decalait au lieu de centrer). Le flex du .pill + line-height:1 centrent. */
.rail-user .pill .initiale { font: inherit; display: block; line-height: 1; }
.rail-user.diamart .pill { background: var(--or); color: var(--text); }
.rail-user .who { min-width: 0; flex: 1 1 auto; }
.rail-user .who .nm { color: var(--rail-encre); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-user .who .rl { display: block; color: var(--rail-doux); font-size: var(--t-libelle);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* La deconnexion : un bouton au bout de la ligne, comme la maquette, au lieu
   d'une ligne de texte sous le nom. Elle reste un POST - Django l'exige, et
   un clic accidentel sur un lien deconnecterait. */
.rail-foot .volet-deconnexion { margin: 0; flex: none; }
.rail-foot .sortie { display: inline-grid; place-items: center; width: 28px; height: 28px;
  border: 0; border-radius: 7px; background: transparent; color: var(--rail-doux); cursor: pointer; }
.rail-foot .sortie:hover { background: var(--rail-survol); color: var(--rail-encre); }
.rail-foot .sortie:focus-visible { outline: 2px solid var(--vert-fonce); outline-offset: 1px; }
/* La version, sous « Se déconnecter » : discrète, mais jamais absente. C'est
   elle qui porte « MODIFIÉ SUR PLACE » quand un correctif a été posé
   directement sur le serveur au lieu d'être déployé, et cette marque ne doit
   pas pouvoir se rater. */
.rail-version { margin: .6rem 0 0; font-size: var(--t-petite);
  color: var(--rail-doux); line-height: 1.3; }
.collapsed .rail-version { display: none; }

/* Le rail d'un compte sans module : la phrase remplace les liens absents,
   et disparait comme eux quand le rail passe en icones. */
.rail-sans-module { margin: .5rem .75rem; font-size: var(--t-petite);
  line-height: 1.45; color: var(--rail-doux); }
.collapsed .rail-sans-module { display: none; }
.collapsed .rail-user .who, .collapsed .rail-foot .volet-deconnexion { display: none; }
.collapsed .rail-user { justify-content: center; }
/* Rail replie : le pied ne porte plus qu'un avatar, il se centre comme les
   icones de navigation au-dessus. */
.collapsed .rail-foot { justify-content: center; }

/* Le bouton porte la couleur, l'icone la prend par `currentColor` : elle
   suit alors le theme, ce que la valeur ecrite dans le gabarit ne faisait
   pas - elle restait au meme or en clair comme en sombre. */
.rail-reveal { position: fixed; left: 14px; bottom: 14px; z-index: 60; width: 46px; height: 46px;
  border-radius: 12px; border: 1px solid var(--trait); background: var(--blanc); box-shadow: var(--ombre);
  cursor: pointer; display: none; place-items: center; color: var(--or); }
/* Combinateur de frère (`~`) : `.rail-reveal` vit hors de `.shell` dans
   `templates/base.html`, après sa fermeture. Placé par erreur comme enfant
   de `.shell`, le `~` ne vise plus rien et le losange de rappel ne
   réapparaît jamais en mode « masqué ». Le `~` est préféré à un combinateur
   descendant : une classe ajoutée ailleurs sur `.rail-reveal` ne peut plus
   se retrouver à égalité de spécificité. */
.shell.hidden ~ .rail-reveal { display: grid; }

/* `flex-wrap` : avec « Depuis » et « Sièges » en plus, la barre déborde sur
   la fiche d'étude, dont le fil porte un chemin de fer en quatre étapes.
   Sans retour à la ligne, c'est le fil qui se comprime (« 1. Localis... »,
   « 2. Zo... ») : l'information la plus utile écrasée par la moins urgente.
   Le fil garde sa largeur, c'est l'identité qui passe dessous quand la place
   manque.

   `min-height` : sans elle le chemin de fer est serré contre la bande du
   haut. Les deux barres ont ainsi la même respiration, contenu centré. */
.rail-topbar { position: sticky; top: 66px; z-index: 40; display: flex; align-items: center; gap: .8rem;
  flex-wrap: wrap; padding: .5rem 1.2rem; min-height: 56px;
  background: color-mix(in srgb, var(--blanc) 88%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--trait); }
/* Sans bande d'identité au-dessus (visiteur non connecté, `:empty` la masque
   plus haut), rien ne pousse cette barre : elle reprend `top: 0` elle-même,
   sinon un vide de 66 px s'ouvre au-dessus. */
.barre-identite:empty + .rail-topbar { top: 0; }
/* Vide, cette barre ouvrait une bande blanche de 56 px sous celle du haut,
   sur tout ecran sans chemin de fer - le cockpit le premier. Elle ne se
   dessine plus que si elle porte quelque chose. Le bouton de rappel du menu
   ne compte pas : il vit dans la barre du haut quand le rail est masque. */
.rail-topbar:not(:has(.fil > *)) { display: none; }
.rail-topbar:not(:has(.fil > *)) + .page, .barre-identite + .page { padding-top: 1.4rem; }
.rail-topbar .burger { display: none; background: transparent; border: 1px solid var(--trait); border-radius: 7px;
  width: 32px; height: 32px; cursor: pointer; color: var(--texte-doux); }
.shell.collapsed .rail-topbar .burger, .shell.hidden .rail-topbar .burger { display: inline-grid; place-items: center; }
/* `flex-shrink: 0` : le fil ne se comprime plus (voir ci-dessus), c'est lui
   qui décide de la largeur qu'il lui faut et le reste s'arrange. */
.rail-topbar .fil { color: var(--texte-doux); font-size: var(--t-petite); flex: 0 0 auto; min-width: 0; }
.rail-topbar .fil b { color: var(--encre); }
/* ---------- La barre d'identité ----------
   Pleine largeur, tout en haut, identique sur tous les écrans. Elle a sa
   propre bande plutôt que d'être logée dans la barre du fil : là-bas, sur la
   fiche d'étude dont le fil porte un chemin de fer, ses pastilles passaient
   à la ligne, alors qu'au cockpit, dont le fil est vide, elles restaient en
   haut. Un repère qui doit toujours se trouver au même endroit ne peut pas
   dépendre du contenu voisin.

   Sa hauteur est celle du bloc de marque du rail, pour que les deux zones se
   terminent sur la même ligne au lieu d'un décrochement de 30 px ;
   `align-items: center` garde les pastilles au milieu.

   Elle est `sticky` comme `.rail-topbar` : sans cela elle disparaissait au
   premier défilement tandis que la barre du fil restait collée en haut. Le
   `top: 66px` de `.rail-topbar` suppose que cette bande garde sa hauteur
   d'une ligne (`min-height: 66px`), vrai en desktop ; sur très petit écran,
   où son contenu peut passer à la ligne, l'écart reste à vérifier.

   Les couleurs des pastilles sont redéfinies ici seulement : `.qsj` sert
   aussi l'accueil et la fiche d'un compte, sur fond clair, où elle ne doit
   pas bouger. */
/* LA BARRE DU HAUT. Le nom de l'ecran a gauche, les gestes permanents a
   droite : notifications et aide, atteignables de partout. */
.barre-identite { position: sticky; top: 0; z-index: 41; background: var(--bg-card);
  border-bottom: 1px solid var(--border); padding: 0 1.6rem; min-height: 52px;
  display: flex; align-items: center; gap: 1.25rem; }
.barre-ecran { font-size: var(--t-corps); font-weight: 700; color: var(--text);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Le compte de travail : remonte de la fiche du rail, ou il repetait le nom
   d'entreprise deja pose sous la marque. Un consultant en change, un client
   n'en a qu'un et ne voit donc rien ici. */
.barre-compte { margin-left: auto; display: inline-flex; align-items: center; flex: none; }
.barre-compte select { font: inherit; font-size: var(--t-corps); font-weight: 600;
  color: var(--text); background-color: var(--bg-card); border: 1px solid var(--border-champ);
  border-radius: var(--rayon-champ); padding: .25rem 1.6rem .25rem .6rem; margin: 0;
  cursor: pointer; max-width: 16rem; }
.barre-compte select:hover { border-color: var(--vert); }
.barre-compte + .barre-gestes { margin-left: .75rem; }
.barre-gestes { margin-left: auto; display: inline-flex; align-items: center; gap: .5rem; flex: none; }
.geste-barre { display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: 1px solid var(--border); border-radius: var(--rayon-champ);
  background: var(--bg-card); color: var(--tag-texte); cursor: pointer;
  transition: border-color .12s ease, color .12s ease; }
.geste-barre:hover { border-color: var(--vert); color: var(--vert-fonce); }
.geste-barre:focus-visible { outline: 2px solid var(--vert-fonce); outline-offset: 1px; }

/* LE BOUTON DE LANGUE, un `.geste-barre` de plus - un formulaire d'un seul
   bouton, comme le sélecteur de compte de travail plus haut dans la même
   barre, pour que le geste marche sans JavaScript. */
.bascule-langue { display: inline-flex; margin: 0; }
.bascule-langue .langue-code { font-size: var(--t-libelle); font-weight: 700; letter-spacing: .02em; }

/* SUR UN TELEPHONE, LE RAIL N'EST PLUS UNE COLONNE : C'EST UN TIROIR.
   La regle precedente lui rendait ses 264 pixels des que la coquille n'etait
   pas « masquee » - c'est-a-dire presque toujours - et la colonne du contenu
   perdait son `minmax(0, ...)`. Sur un ecran de 390 pixels, la page en
   mesurait 785 : la moitie du produit se trouvait hors de l'ecran.

   Le rail sort donc du flux et glisse par-dessus le contenu. Fermé quand la
   coquille est `collapsed` ou `hidden` - c'est l'etat pose au chargement sous
   1440 pixels -, ouvert sinon, avec un voile qui dit qu'il est modal. */
@media (max-width: 900px) {
  /* UNE SEULE COLONNE : le rail est en `fixed`, donc hors de la grille. En
     lui gardant sa colonne, le contenu tombait dans celle de zero pixel et
     la page s'affichait vide. */
  .shell, .shell.collapsed, .shell.hidden { grid-template-columns: minmax(0, 1fr); }
  .shell > aside {
    position: fixed; left: 0; top: 0; z-index: 60; width: min(17rem, 84vw);
    transform: translateX(-100%); visibility: visible;
    transition: transform .22s cubic-bezier(.4, 0, .2, 1);
  }
  .shell:not(.collapsed):not(.hidden) > aside { transform: none; box-shadow: 0 12px 44px rgba(12, 20, 34, .38); }
  /* Le voile : il ferme le tiroir au toucher, et il n'existe que tiroir ouvert. */
  .shell:not(.collapsed):not(.hidden)::before {
    content: ""; position: fixed; inset: 0; z-index: 59; background: rgba(12, 20, 34, .42);
  }
  /* La barre du haut se replie au lieu de pousser la page. */
  .barre-identite { flex-wrap: wrap; row-gap: .4rem; }
  .barre-ecran { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  /* LE BOUTON DU MENU NE DISPARAIT JAMAIS. Sa barre se masque quand l'ecran
     n'a pas de fil ; sur un telephone, le rail etant un tiroir, il n'y avait
     alors plus aucun moyen de naviguer. */
  .rail-topbar, .rail-topbar:not(:has(.fil > *)) { display: flex; }
  .rail-topbar .burger, .shell .rail-topbar .burger { display: inline-grid; place-items: center; }
  /* Une cible tactile se prend au doigt, pas a la souris. */
  .rail-topbar .burger { min-width: 2.5rem; min-height: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .shell > aside { transition-duration: .6s; }
}
@media (max-width: 980px) {
  .formulaire-large { grid-template-columns: 1fr; }
  .formulaire-large .barre { height: 1px; }
}

/* ---------- Choisir un point de vente ----------
 *
 * Le déroulant de 285 magasins refermait l'information dès qu'on avait
 * choisi : pour relire la surface du magasin transféré, celle qui fait le
 * scénario, il fallait le rouvrir. Ici on cherche, on choisit, et le choix
 * remplace la recherche par un encart qui l'affiche.
 *
 * Trois tailles seulement (--t-grande / --t-moyenne / --t-petite) et une
 * seule police : la grille typographique vaut ici comme partout.
 */
.mag-recherche { width: 100%; }

/* LES MAGASINS SE PROPOSENT, comme les adresses. La liste s'ouvrait DANS
 * le flux, sous le champ : elle poussait le reste du formulaire a chaque
 * frappe, et un champ vide se lisait comme un champ mort - rien ne disait
 * qu'il cherchait. Un volet flottant, comme celui des adresses : un seul
 * geste a apprendre pour les deux champs du meme formulaire. */
.mag-bloc { position: relative; }
.mag-resultats { position: absolute; z-index: 30; top: calc(100% + 2px); left: 0; right: 0;
  margin: 0; max-height: 17rem; overflow-y: auto;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 8px 24px var(--ombre-moyenne); }

/* Un bouton par ligne, pas un bouton radio : cliquer ne coche pas, il
 * choisit. `text-align:left` et `width:100%` lui rendent l'allure d'une
 * ligne de liste, que son rôle de bouton ne doit pas trahir. */
.mag-choix { display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 0.45rem 0.6rem; background: none; border: none;
  border-bottom: 1px solid var(--trait-clair); font-family: var(--police);
  font-size: var(--t-dense); color: var(--text); }
.mag-choix:last-child { border-bottom: none; }
.mag-choix:hover, .mag-choix:focus-visible { background: var(--vert-pale); }
.mag-nom { display: block; font-weight: 600; }
.mag-detail { display: block; font-size: var(--t-petite);
  color: var(--texte-discret); }
/* La note vit DANS le volet quand il y a des resultats a nuancer, et dans
 * le flux quand elle est seule - sinon un volet flottant s'ouvrirait pour
 * une phrase, au-dessus du champ suivant. */
.mag-zone > .mag-note { margin: .3rem 0 0; font-size: var(--t-petite);
  color: var(--text-muted); }
.mag-resultats .mag-note-pied { margin: 0; padding: .4rem .6rem;
  border-top: 1px solid var(--trait-clair); background: var(--bg-survol);
  font-size: var(--t-petite); color: var(--text-muted); }

/* L'encart du choix. Vert, parce qu'il dit un état acquis : le même
 * vocabulaire de couleur que partout ailleurs dans l'application. */
.mag-retenu { display: flex; align-items: center; gap: 1rem;
  margin: 0.5rem 0 0; padding: 0.6rem 0.85rem; border-radius: var(--rayon);
  background: var(--haute-bg); border: 1px solid var(--haute); }
.mag-retenu-corps { flex: 1; }
.mag-changer { background: none; border: none; color: var(--bleu);
  cursor: pointer; font-family: var(--police); font-size: var(--t-note);
  text-decoration: underline; padding: 0.2rem 0.4rem; }

.mag-note { margin: 0.45rem 0 0; font-size: var(--t-note);
  color: var(--texte-discret); }
.mag-elargir { display: block; margin: 0.5rem 0 0; font-size: var(--t-note);
  color: var(--texte-discret); cursor: pointer; font-weight: 400; }

/* ---------- Le verdict d'un scénario (étape 4) ----------
 *
 * L'écran disait « CA capté » pour les six scénarios, alors qu'ils ne posent
 * pas la même question : un ralliement fait gagner, l'arrivée d'un rival fait
 * perdre, une création fait capter. Le verdict est en tête du résultat, car
 * c'est la seule ligne qu'un directeur lira s'il n'en lit qu'une.
 *
 * Trois sens, trois couleurs déjà employées partout : vert pour un acquis,
 * rouge pour une perte, bleu pour un chiffre neutre. Un vocabulaire de
 * couleur qui change d'un écran à l'autre oblige à le réapprendre.
 */
.modele-verdict { margin: 0.9rem 0 1rem; padding: 0.85rem 1.1rem;
  border-radius: var(--rayon); border: 1px solid var(--trait);
  background: var(--bg-card); }
.verdict-titre { margin: 0; font-size: var(--t-note);
  color: var(--texte-doux); font-weight: 600; }
/* Le chiffre est le sujet : il porte la seule taille « grande » du bloc. */
.verdict-chiffre { margin: 0.15rem 0 0; font-size: var(--t-chiffre);
  font-weight: 700; line-height: 1.2; }
.verdict-aide { margin: 0.4rem 0 0; font-size: var(--t-note);
  color: var(--texte-discret); }

.verdict-gagne { background: var(--haute-bg); border-color: var(--haute); }
.verdict-gagne .verdict-titre,
.verdict-gagne .verdict-chiffre { color: var(--haute); }

.verdict-perd { background: var(--basse-bg); border-color: var(--basse); }
.verdict-perd .verdict-titre,
.verdict-perd .verdict-chiffre { color: var(--basse); }

.verdict-capte { background: var(--accent-soft); border-color: var(--accent); }
.verdict-capte .verdict-titre,
.verdict-capte .verdict-chiffre { color: var(--accent); }

/* ---------- Schéma directeur ----------
   Repris de la maquette du module, mais avec les variables de ce fichier et
   non celles de la maquette (`--border` et non `--bord`, `--bg-card` et non
   `--carte`). Ce bloc se maintient avec le reste du module, et les défauts
   de forme se corrigent ici.

   À ne pas perdre : la logique des onglets. `.on` pour l'actif, `.ferme`
   pour celui qu'on ne peut pas encore ouvrir, et `.verrou` qui dit pourquoi.
   Un onglet grisé sans explication serait pire que pas d'onglet. */

.onglets { display: flex; flex-wrap: wrap; gap: .3rem; margin: 1rem 0 .2rem; }
.onglets button { border: 1px solid var(--border); background: var(--bg-card);
                  color: var(--ardoise); border-radius: 999px;
                  padding: .4rem 1rem; font: inherit; font-size: var(--t-petite);
                  font-weight: 550; cursor: pointer; }
.onglets button:hover { border-color: var(--bleu); color: var(--bleu); }
.onglets button.on { background: var(--bleu); border-color: var(--bleu);
                     color: var(--sur-couleur); }
.onglets button.ferme { opacity: .5; cursor: not-allowed; }
.onglets button.ferme:hover { border-color: var(--border);
                              color: var(--ardoise); }

.verrou { margin: .5rem 0 0; padding: .55rem .8rem; border-radius: 10px;
          background: var(--ambre-bg); color: var(--ambre-text);
          font-size: var(--t-petite); }
.verrou.cache { display: none; }

/* Les réserves : un bouton voyant, une popup lisible. Le bouton reste en
   évidence, l'écran étant lu par le client sans consultant à côté. Mais six
   paragraphes en ambre au-dessus de tout finissent par ne plus se voir. */
.bouton-avertissement { display: inline-flex; align-items: center; gap: .35rem;
                        border: 1px solid var(--ambre-text);
                        background: var(--ambre-bg); color: var(--ambre-text);
                        border-radius: 999px; padding: .45rem 1.1rem;
                        font: inherit; font-size: var(--t-petite); font-weight: 600;
                        cursor: pointer; }
.bouton-avertissement:hover { background: var(--ambre-text); color: var(--sur-couleur); }

.sd-modale { max-width: 46rem; border: 1px solid var(--border);
             border-radius: 14px; padding: 1.4rem 1.6rem;
             background: var(--bg-card); color: var(--encre); }
.sd-modale::backdrop { background: rgba(0, 0, 0, .45); }
.sd-modale h2 { margin: 0 0 .4rem; font-size: var(--t-moyenne); }
.sd-modale ol { margin: .8rem 0 1.2rem; padding-left: 1.4rem; }
.sd-modale li { margin: .7rem 0; line-height: 1.5; }
.sd-modale form { text-align: right; margin: 0; }

/* La confirmation d'un geste irréversible, pour toute la solution - voir
   base.html. Même boîte que .sd-modale, un peu plus étroite : elle ne
   porte qu'une phrase, pas une liste. */
/* La date d'un geste deja fait, au bout de son entree de menu : discrete,
   alignee a droite, elle dit « il existe » sans peser autant que le geste. */
.menu-actions .action .quand-action { margin-left: auto; padding-left: .6rem;
  font-size: var(--t-petite); font-weight: 400; color: var(--text-faint); }
.menu-actions .action:has(.quand-action) { display: flex; align-items: center; }

/* LE CHAMP D'ADRESSE QUI PROPOSE. La liste se pose SOUS le champ, dans son
   flux : en absolu sans conteneur relatif, elle se serait ancree a la page
   et aurait glisse au premier defilement du panneau qui la porte. */
.champ-adresse { position: relative; display: block; }
/* Dans une ligne qui porte aussi un bouton, le champ prend la place qui
   reste : sans cela, le bloc qui l'enveloppe se serrait sur son contenu et
   le champ tombait a la largeur d'un mot. */
.ligne-adresse .champ-adresse { flex: 1; min-width: 0; }
.champ-adresse > input[type=text] { width: 100%; }
.champ-adresse-liste { position: absolute; z-index: 30; top: calc(100% + 2px); left: 0; right: 0;
  margin: 0; padding: .25rem; list-style: none; max-height: 15rem; overflow-y: auto;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 8px 24px var(--ombre-moyenne); }
.champ-adresse-liste li { display: flex; flex-direction: column; gap: .05rem;
  padding: .4rem .55rem; border-radius: 5px; cursor: pointer; }
.champ-adresse-liste li.vise { background: var(--vert-pale); }
.champ-adresse-liste li strong { font-size: var(--t-dense); font-weight: 600; color: var(--text); }
/* Le contexte - departement, region - departage deux rues du meme nom. Sans
   lui, six propositions se lisaient toutes pareil. */
.champ-adresse-liste li .ou { font-size: var(--t-petite); color: var(--text-muted); }

/* La confirmation, pour toute la solution : le repère à gauche, le titre et le texte à côté,
   deux boutons de même taille en pied. Rouge pour un geste qui supprime ou retire. */
.confirmation-modale { width: min(30rem, calc(100vw - 2rem)); max-width: 30rem; box-sizing: border-box;
  padding: 1.5rem 1.5rem 1.2rem; border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 24px 60px -20px rgb(16 24 32 / .45); }
.confirmation-modale[open] { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; align-items: start; }
.confirmation-repere { grid-row: 1 / span 2; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: 0;
  border-radius: 999px; background: var(--vert-pale); color: var(--vert-fonce); }
.confirmation-modale h2 { grid-column: 2; margin: .45rem 0 .3rem; font-size: 1.1rem; font-weight: 700; color: var(--marine); line-height: 1.3; }
.confirmation-modale .confirmation-texte { grid-column: 2; white-space: pre-line; overflow-wrap: anywhere;
  margin: 0 0 1.3rem; font-size: var(--t-petite); color: var(--text-muted); line-height: 1.6; }
.confirmation-modale::backdrop { background: rgb(16 24 32 / .4); backdrop-filter: blur(3px); }
.confirmation-modale form { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: .6rem; margin: 0;
  padding-top: 1rem; border-top: 1px solid var(--trait-sd, var(--border)); }
/* Le rappel clavier prend la place libre a gauche des boutons ; il
   disparait quand la boite n'a qu'un bouton « Compris », ou sur un ecran
   trop etroit pour le porter sans serrer les gestes. */
.confirmation-modale .confirmation-clavier { margin-right: auto; align-self: center;
  font-size: var(--t-note); color: var(--text-faint); }
.confirmation-modale .confirmation-clavier kbd { padding: .05rem .3rem; border: 1px solid var(--border);
  border-bottom-width: 2px; border-radius: 5px; background: var(--bg-survol);
  font-family: inherit; font-size: .95em; color: var(--text-muted); }
.confirmation-modale:has(.annuler[hidden]) .confirmation-clavier { display: none; }
@media (max-width: 480px) { .confirmation-modale .confirmation-clavier { display: none; } }
.confirmation-modale form button { display: inline-flex; align-items: center; justify-content: center; min-width: 7.5rem; height: 2.5rem;
  margin: 0; padding: 0 1.1rem; border-radius: 12px; font-size: var(--t-petite); font-weight: 650; }
.confirmation-modale form .annuler { border: 1px solid var(--border); background: var(--bg-card); color: var(--marine); box-shadow: none; }
.confirmation-modale form .annuler:hover { border-color: var(--text-faint); background: var(--bg-survol); }
.confirmation-repere .repere-danger, .confirmation-modale--danger .confirmation-repere .repere-info { display: none; }
.confirmation-modale--danger .confirmation-repere .repere-danger { display: contents; }
.confirmation-modale--danger .confirmation-repere { background: var(--danger-fond); color: var(--danger); }
.confirmation-modale--danger [value="confirmer"] { background: var(--danger); border-color: var(--danger); color: #fff; }
.confirmation-modale--danger [value="confirmer"]:hover { background: color-mix(in srgb, var(--danger) 85%, #000); border-color: color-mix(in srgb, var(--danger) 85%, #000); }

/* Les chiffres de la synthèse : titre collé au nombre, tous deux centrés. */
.sd-chiffres { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1rem 0; }
.sd-chiffres .chiffre { flex: 1 1 12rem; text-align: center;
                        border: 1px solid var(--border); border-radius: 12px;
                        padding: .8rem .6rem; background: var(--bg-card); }
.sd-chiffres .valeur { display: block; font-size: var(--t-grande); font-weight: 700;
                       color: var(--bleu-fonce); }
.sd-chiffres .titre { display: block; font-size: var(--t-petite);
                      color: var(--ardoise); margin-top: .2rem; }

/* « Le gain s'épuise » : la décroissance, lisible d'un coup d'œil. */
.sd-barre { display: block; height: .55rem; border-radius: 999px;
            background: var(--border); position: relative; min-width: 4rem; }
.sd-barre::before { content: ""; position: absolute; inset: 0 auto 0 0;
                    width: var(--part, 0%); border-radius: 999px;
                    background: var(--bleu); }

/* La décision : des boutons pastel, sans bouton OK. Assez de couleur pour
   distinguer d'un coup d'œil, assez peu pour qu'un tableau de quinze lignes
   reste lisible. L'état choisi se marque par un contour plein et non par une
   couleur plus vive, sinon la ligne retenue crie plus fort que le chiffre
   qu'elle porte. */
.sd-decision { vertical-align: middle; }
.sd-choix { display: flex; gap: .25rem; }
.sd-b { display: inline-flex; align-items: center; gap: .25rem;
        border: 1px solid transparent; border-radius: 999px;
        padding: .28rem .7rem; font: inherit; font-size: var(--t-petite);
        font-weight: 550; cursor: pointer; white-space: nowrap;
        color: var(--text); transition: transform .1s ease; }
.sd-b:hover { transform: translateY(-1px); }

/* Deux boutons et non trois : « à trancher » était l'état de départ de
   toutes les lignes, donc un bouton qui ne décidait de rien. L'état neutre
   reste atteignable, on reclique le bouton actif pour l'annuler. */
.sd-b-retenu { background: var(--vert-pale); }
.sd-b-ecarte { background: var(--danger-fond); }

.sd-b.on { border-color: currentColor; font-weight: 700; }
.sd-b-retenu.on { color: var(--vert-fonce); }
.sd-b-ecarte.on { color: var(--danger); }

.sd-motif { display: block; margin-top: .3rem; width: 100%;
            min-width: 11rem; font-size: var(--t-petite); }
.sd-refus { display: flex; gap: .3rem; align-items: flex-start; margin: .35rem 0 0; max-width: 16rem;
            color: var(--ambre-text); font-size: var(--t-petite); line-height: 1.35; }

/* « Rapporte vs le n°1 » : le chiffre d'abord, la barre en appui. Une barre
   seule se compare aux autres barres, elle ne se lit pas. */
.sd-part { display: inline-block; min-width: 2.6rem; }

/* Le trait de décrochage, dans le tableau des propositions. L'écran
   promettait l'essoufflement sans le montrer : son texte dit « le 10ᵉ site
   ne vaut pas le 1ᵉʳ », mais le 10ᵉ vaut encore 75 % du premier, et rien à
   l'œil ne disait où couper.

   Ton d'une note, pas d'une alerte : c'est un repère, pas un couperet. Les
   emplacements en dessous restent lisibles et retenables, un rouge
   d'interdiction ferait croire qu'ils sont écartés.

   Le réglage du seuil de reprise est posé à côté du tableau qu'il change,
   sur le gabarit des filtres de la Concurrence : des pastilles, celle qui
   est active en plein. Un réglage d'affichage ne se range pas avec les
   réglages du calcul, il ne change pas le maillage. */
.sd-seuils { margin: .2rem 0 .7rem; display: flex; align-items: center;
  gap: .3rem; flex-wrap: wrap; font-size: var(--t-petite); }
.sd-seuil { border: 1px solid var(--trait); border-radius: 14px;
  padding: .1rem .5rem; text-decoration: none; color: var(--encre);
  background: var(--bg-card); }
.sd-seuil:hover { border-color: var(--accent); }
.sd-seuil.actif { background: var(--accent); color: var(--sur-couleur);
  border-color: var(--accent); font-weight: 600; }

/* UX-61 - le bloc de validation, en pied du volet Synthèse. Centré :
   c'est le geste qui termine le parcours, il ne se cherche pas. */
.sd-bloc-validation { text-align: center; margin-top: 1.2rem;
  padding-top: 1rem; border-top: 1px solid var(--trait); }
.sd-valider { background: var(--vert-fonce); color: var(--sur-couleur); border: none;
  border-radius: 8px; padding: .5rem 1.1rem; font-size: var(--t-moyenne);
  font-weight: 600; cursor: pointer; }
.sd-valider:hover { background: var(--vert-fonce); }

/* La confirmation de validation du schéma directeur. Le vert de ce qui est
   acquis, pas celui d'une alerte : c'est un état, pas un événement. */
.sd-valide { background: var(--vert-pale); border: 1px solid var(--succes-trait); border-radius: 8px;
  padding: .55rem .8rem; color: var(--vert-fonce); font-size: var(--t-moyenne); }

.sd-decrochage td { background: var(--alerte-fond); color: var(--alerte);
  border-top: 2px solid var(--ambre); border-bottom: 2px solid var(--ambre);
  text-align: center; font-size: var(--t-petite); font-style: italic;
  padding: 0.3rem; }

tr.ligne-retenue > td { background: var(--accent-soft); }
/* Écarter marque, cela n'efface pas. La règle portait `opacity: .55` et
   `text-decoration: line-through`, et une proposition écartée devenait
   illisible : son nom, sa commune, son gain, jusqu'à la pastille « dépend du
   réglage ». Or on écarte pour pouvoir y revenir - relire ce qu'on a mis de
   côté et changer d'avis sont les deux gestes que la barre empêchait. Le
   marquage passe donc par un liseré à gauche et un fond neutre, qui se
   voient d'un coup d'œil sans rien coûter à la lecture. */
tr.ligne-ecartee > td { background: var(--gris-bg); color: var(--gris-text); }
tr.ligne-ecartee > td:first-child { box-shadow: inset 3px 0 0 var(--ardoise); }
tr.ligne-ecartee .sd-decision { color: initial; }

/* Un tableau défile toujours horizontalement : une colonne qui sort de
   l'écran se lit comme une colonne qui n'existe pas. */
.tableau-large, .enveloppe-table { overflow-x: auto; }
.tableau { width: 100%; border-collapse: collapse; font-size: var(--t-petite); }
.tableau th, .tableau td { padding: .45rem .6rem; text-align: left;
                           border-bottom: 1px solid var(--border); }
.tableau thead th { background: var(--bg-page); font-weight: 600;
                    white-space: nowrap; }
.tableau tr.ligne-active td, tr.ligne-active td { background: var(--vert-pale); }
.tableau .num { text-align: right; white-space: nowrap; }


/* La carte du schéma directeur. Le parc en gris, discret : il donne
   l'échelle, il ne se lit pas. Les propositions sont numérotées par leur
   rang et colorées par nature ; la décision passe par l'opacité et le trait,
   deux informations sur deux canaux.

   Son format carré est une décision. En pleine largeur (1 600 px) pour
   26 rem de haut, le cadrage sur l'emprise des propositions - 7,1 degrés de
   latitude, de Toulouse à Lille - impose un zoom qui étale 27 degrés de
   longitude sur la largeur : une carte de Cardiff à Bucarest où la France
   tient dans un tiers de l'image. La France est presque carrée, la carte
   doit l'être aussi.

   `height: auto` va avec `aspect-ratio` : une hauteur fixe l'emporterait et
   le carré ne serait jamais carré. */
/* AGRANDIE. La carte tient la question du module - « ou manque-t-il quelque
   chose sur la France » - et une carte de 44 rem la rendait a l'echelle d'une
   vignette. Elle occupe desormais toute la largeur de la colonne (jusqu'a
   68 rem), avec une hauteur bornee au tiers-deux de la fenetre pour qu'elle
   reste entiere a l'ecran sans pousser le tableau hors de vue. Le rapport 5/4
   suit la forme de la France, plus haute que large. */
/* Revu : la carte devient le heros du volet - pleine largeur, haute, comme la
   Carte du parc. Elle garde ses outils (legende, bascule parc, recadrer). */
.sd-carte { width: 100%; max-width: none; height: min(78vh, 54rem); min-height: 24rem;
            margin: .8rem 0 .2rem; border-radius: 12px;
            border: 1px solid var(--border); }

/* Le repli d'aide : une phrase d'accroche reste, le « comment lire » se
   deroule. Reutilise partout dans le schema directeur pour degager l'ecran. */
.sd-aide { margin: .5rem 0 .7rem; font-size: var(--t-petite); }
.sd-aide > summary { cursor: pointer; color: var(--vert-fonce); font-weight: 600;
   list-style: none; display: inline-flex; align-items: center; gap: .35rem;
   padding: .2rem 0; width: fit-content; }
.sd-aide > summary::-webkit-details-marker { display: none; }
.sd-aide > summary::before { content: "›"; font-weight: 700; display: inline-block;
   transition: transform .15s ease; }
.sd-aide[open] > summary::before { transform: rotate(90deg); }
.sd-aide > summary:hover { text-decoration: underline; }
.sd-aide > :not(summary) { margin-top: .35rem; }

/* La bascule du parc : 281 points gris aident a situer, mais encombrent des
   qu'on lit les rangs. On les eteint sans perdre la carte. */
.sd-carte-outils { display: flex; justify-content: center; gap: 1rem;
                   margin: .3rem 0 0; font-size: var(--t-petite);
                   color: var(--texte-doux); }
.sd-carte-outils label { cursor: pointer; }

.sd-pt { border-radius: 50%; cursor: pointer; box-sizing: border-box;
         display: flex; align-items: center; justify-content: center;
         font-size: var(--t-petite); font-weight: 700; color: var(--sur-couleur);
         border: 2px solid var(--bg-card); transition: transform .12s ease; }
.sd-pt-parc { width: .5rem; height: .5rem; background: var(--ardoise);
              border-width: 1px; opacity: .55; }
.sd-pt-ouverture { width: 1.6rem; height: 1.6rem; background: var(--bleu); }
.sd-pt-agrandissement { width: 1.6rem; height: 1.6rem; background: var(--accent); }
.sd-pt-densification { width: 1.6rem; height: 1.6rem; background: var(--bleu-fonce); }
/* Le transfert se distingue des trois autres natures : les trois premières
   ajoutent de la surface, celle-ci en ferme une pour la rouvrir ailleurs.
   Sans couleur propre elle retomberait sur `.sd-pt` seul, donc sans taille :
   une pastille invisible pour le seul geste qui coûte une fermeture. La
   teinte d'alerte la sépare des bleus d'un coup d'œil. */
.sd-pt-transfert { width: 1.6rem; height: 1.6rem;
                   background: var(--ambre-text); }

/* La décision se voit sans relire la liste. */
.sd-pt-retenu { border-color: var(--vert-fonce); border-width: 3px; }
.sd-pt-ecarte { opacity: .35; }

/* L'ETAT LU, pour un profil en lecture seule : pas de bouton, l'etat en
   toutes lettres. Le lecteur sait ce qui a ete decide, il ne peut pas le
   changer. Meme code couleur que les boutons : vert pour retenu, rouge pour
   ecarte. */
.sd-etat-lu { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--t-dense); font-weight: 600; }
.sd-etat-lu.retenu { color: var(--vert-fonce); }
.sd-etat-lu.ecarte { color: var(--rouge); }

/* LA LEGENDE DE LA CARTE. Elle reprend les memes classes que les points,
   donc les memes couleurs : la pastille de la legende et le point de la
   carte ne peuvent pas diverger. En ligne, repliable, discrete - elle
   explique, elle ne rivalise pas avec la carte. */
.sd-carte-legende { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: center;
                    margin: .5rem 0 .2rem; font-size: var(--t-note); color: var(--tag-texte); }
.sd-legende-item { display: inline-flex; align-items: center; gap: .35rem; }
/* La pastille de legende est figee a une petite taille, quelle que soit la
   taille du point sur la carte : une pastille de 1,6 rem dans une ligne de
   texte la casserait. La position statique la sort du flux d'empilement de
   la carte. */
.sd-legende-pastille { position: static; width: 1rem; height: 1rem; min-width: 1rem;
                       font-size: var(--t-petite); transform: none; cursor: default; }

/* Le lien liste ↔ carte, dans les deux sens. */
.sd-pt.vise { transform: scale(1.45); z-index: 5; }
tr.ligne-visee > td { background: var(--ambre-bg);
                      transition: background .3s ease; }

/* Un site qui ne doit sa place qu'au réglage. Ambre et non rouge : ce n'est
   pas une erreur mais une incertitude. Le site est peut-être excellent, on
   sait simplement qu'on ne peut pas le défendre sur le seul classement. */
.etiquette.fragile { display: inline-block; margin-left: .4rem;
                     padding: .1rem .5rem; border-radius: 999px;
                     background: var(--ambre-bg); color: var(--ambre-text);
                     font-size: var(--t-petite); font-weight: 600;
                     cursor: help; white-space: nowrap; }

/* Le compteur des décisions, posé sous le titre du volet : il répond à la
   question qu'on se pose en parcourant la liste, combien de décisions ont
   été prises. Discret par construction, c'est un repère et non un
   résultat. */
.sd-compteur { display: inline-block; margin: -.4rem 0 .9rem;
               padding: .25rem .7rem; border-radius: 999px;
               background: var(--gris-bg); color: var(--gris-text);
               font-size: var(--t-petite); }
.sd-compteur b { color: var(--text); }
.sd-compteur .sd-c-retenu { color: var(--vert-fonce); }
.sd-compteur .sd-c-ecarte { color: var(--danger); }

/* Le segment : deux boutons colles qui forment un seul choix. La forme dit
   l'exclusion mutuelle, alors que deux boutons separes se lisent comme deux
   actions independantes qu'on croirait pouvoir prendre toutes les deux. */
.segment { display: inline-flex; border: 1px solid var(--ardoise);
           border-radius: 8px; overflow: hidden; }
.segment button { border: 0; border-radius: 0; margin: 0; padding: .4rem .9rem;
                  background: var(--bg-card); color: var(--ardoise);
                  font-size: var(--t-petite); cursor: pointer; }
.segment button + button { border-left: 1px solid var(--ardoise); }
.segment button.on { background: var(--ardoise); color: var(--sur-couleur); font-weight: 600; }
.segment button:disabled { opacity: .45; cursor: not-allowed; }

.etiquette.non-construit { display: inline-block; margin: .15rem 0 .3rem;
                           padding: .08rem .5rem; border-radius: 999px;
                           background: var(--gris-bg); color: var(--gris-text);
                           font-size: var(--t-petite); font-weight: 600; }

/* x-cloak : Alpine le retire une fois initialise. Sans cette regle, tout ce
   qui est en `x-show` clignote a l'affichage - le texte « franchise »
   apparait puis disparait sur un ecran regle en « integre ». */
[x-cloak] { display: none !important; }

/* L'etat du calcul demande au labo. La couleur porte l'information : bleu
   pour « ca travaille », vert pour « c'est pret », ambre pour un refus ou un
   echec. Un bandeau uniforme obligerait a lire pour savoir s'il y a un
   probleme. */
.sd-travail { margin: 0 0 1rem; padding: .6rem .9rem; border-radius: 8px;
              border-left: 4px solid var(--ardoise); background: var(--gris-bg);
              font-size: var(--t-petite); }
/* L'action est dans le bandeau qui annonce le probleme. Discrete mais
   cliquable : elle ne doit pas rivaliser avec le message, seulement etre la
   quand on a fini de le lire. */
.sd-travail-action { display: inline-block; margin-top: .35rem;
                     font-size: var(--t-petite); font-weight: 600; }
.sd-travail .discret { display: block; margin-top: .2rem;
                       font-size: var(--t-petite); color: var(--texte-doux); }
.sd-travail-en_cours,
.sd-travail-en_attente { border-left-color: var(--bleu); }
.sd-travail-livre,
.sd-travail-importe { border-left-color: var(--vert-fonce); }
/* Un canal que personne n'ecoute se voit comme un avertissement, pas comme
   une attente : meme ambre que « refuse » et « echec », parce que c'est la
   meme famille - la demande n'aboutira pas. */
.sd-travail-muet { border-left-color: var(--ambre-text) !important;
                   background: var(--ambre-bg); }
.sd-travail-refuse,
.sd-travail-echec { border-left-color: var(--ambre-text);
                    background: var(--ambre-bg); }

/* Un bouton qui a l'air d'un lien, pour une action secondaire posee dans une
   phrase. Un vrai bouton crierait plus fort que ce qu'il fait. */
.lien-bouton { border: 0; background: none; padding: 0; font: inherit;
               color: var(--bleu); text-decoration: underline;
               cursor: pointer; }
.lien-bouton:hover { color: var(--bleu-fonce); }

/* ---------- La matrice des territoires ----------
   Elle remplace la liste ci-dessus. Le `Ctrl` de la liste ne se devinait
   pas, et un clic simple effaçait toute la sélection ; ici, de vraies cases
   à cocher et aucun JavaScript.

   Les neuf typologies sont un croisement : cinq familles de territoire par
   deux tailles d'agglomération, séparées à 150 000 habitants (valeur de
   Géodata). La grille montre la structure que la liste cachait.
.sd-typo { border-collapse: separate; border-spacing: .3rem;
           font-size: var(--t-petite); }
.sd-typo thead th { font-weight: 550; color: var(--texte-doux);
                    padding: 0 .3rem .1rem; text-align: center; }
.sd-typo tbody th { font-weight: 550; text-align: right;
                    padding-right: .4rem; white-space: nowrap; }

/* La case : c'est le label qui porte le dessin. La case native est masquée
   sans quitter le document, le clavier et les lecteurs d'écran la trouvent,
   et `:checked` peint le label. */
.sd-typo-case { display: block; border: 1px solid var(--border);
                background: var(--bg-card); border-radius: 8px;
                padding: .35rem .6rem; cursor: pointer; text-align: center;
                min-width: 7.5rem; }
.sd-typo-case input { position: absolute; opacity: 0; width: 0; height: 0; }
.sd-typo-case b { display: block; font-weight: 600; }
.sd-typo-case span { color: var(--texte-doux); }
.sd-typo-case:hover { border-color: var(--bleu); }
.sd-typo-case:has(input:checked) { background: var(--bleu);
                                   border-color: var(--bleu); color: var(--sur-couleur); }
.sd-typo-case:has(input:checked) span { color: var(--sur-couleur); }
/* Le contour de focus est indispensable : la case native étant masquée, sans
   lui on navigue au clavier sans savoir où l'on est. */
.sd-typo-case:has(input:focus-visible) { outline: 2px solid var(--bleu);
                                         outline-offset: 2px; }

/* Une case vide est une information : il n'existe pas de « rural » en grande
   agglomération. On la dessine, on ne la supprime pas. */
.sd-typo-vide { display: block; border: 1px dashed var(--border);
                border-radius: 8px; padding: .35rem .6rem; text-align: center;
                color: var(--texte-doux); min-width: 7.5rem; }

/* Les typologies que le découpage n'a pas su ranger : jamais perdues. */
.sd-typo-autres { display: flex; flex-wrap: wrap; gap: .3rem;
                  margin-top: .3rem; }

/* Deux gestes, deux surfaces. Tout le volet « Parametrer » touche au
   maillage affiche, alors que ce dernier bloc lance un traitement qui en
   produira un autre ; sur la meme surface, ils se lisaient comme des
   variantes du meme geste. La provenance repond a la question qu'on se pose
   en arrivant : d'ou sort ce qu'on voit. */

/* ---------- Les cartes se replient et se deplacent ----------
   Les outils restent discrets au repos et se renforcent au survol : ce sont
   des commandes d'affichage, pas du contenu. Trois boutons pleins sur chaque
   carte pesent plus lourd que ce qu'ils valent, et l'oeil les compte avant
   de lire le titre.

   Ils restent atteignables au clavier (`:focus-within`), sans quoi la
   fonction n'existe que pour ceux qui tiennent une souris. */
.carte-reglable { position: relative; }
/* Les outils se voient sans survol. Ils étaient en `opacity: 0`, révélés au
   survol seulement : une fonction qu'on ne voit pas est une fonction qui
   n'existe pas, personne ne promène sa souris sur un bloc pour découvrir
   qu'il se replie. Ils restent discrets - gris pâle, petits - et se colorent
   au survol.
   `opacity: .45` plutôt que `1` : à pleine opacité, six blocs font dix-huit
   boutons qui concurrencent les chiffres. */
.carte-outils { position: absolute; top: .5rem; right: .6rem;
                display: flex; gap: .15rem; opacity: .45;
                transition: opacity .12s ease; }
.carte-reglable:hover .carte-outils,
.carte-reglable:focus-within .carte-outils { opacity: 1; }
.carte-outil { border: 1px solid var(--border); background: var(--bg-card);
               color: var(--texte-doux); border-radius: 6px;
               width: 1.5rem; height: 1.5rem; padding: 0; line-height: 1;
               font-size: var(--t-petite); cursor: pointer; }
.carte-outil:hover { border-color: var(--bleu); color: var(--bleu); }

/* Repliee, la carte ne garde que son titre : il faut pouvoir la retrouver
   pour la rouvrir. Une carte repliee jusqu'a l'invisibilite est une carte
   perdue. */
.carte-repliee > *:not(.carte-outils):not(h2):not(h3):not(legend) { display: none; }
.carte-repliee { padding-bottom: .7rem; }
.carte-repliee .carte-outils { opacity: 1; }

.carte-remise-pied { margin: .3rem 0 0; text-align: right;
                     font-size: var(--t-petite); }


/* ---------- Les fiches se déplacent et se masquent ----------
   Porté du CRM (`widgets-deplacables.js` / `style.css`) : les mêmes gestes
   doivent avoir la même apparence dans les deux produits, on réorganise un
   tableau de bord en attendant la même réponse des deux côtés.

   Les contrôles sont visibles sans survol. Le composant précédent les
   cachait derrière un `:hover`, et la fonction, déjà construite, a été
   redemandée faute d'avoir été vue. */
.fiche-deplacable { position: relative; }
.fiche-controles { position: absolute; top: .55rem; right: .7rem;
                   display: flex; align-items: center; gap: .5rem;
                   z-index: 2; }

/* `grab` puis `grabbing` : la main dit ce qui va se passer avant le clic,
   et ce qui se passe pendant. C'est le seul retour visuel qu'a
   l'utilisateur au moment où il attrape. */
.fiche-poignee { cursor: grab; color: var(--texte-doux); font-size: var(--t-texte);
                 user-select: none; line-height: 1; }
.fiche-poignee:active { cursor: grabbing; }

/* Le titre est une poignée lui aussi : le ⠿ fait 1 cm² dans un coin, viser
   juste demande de l'attention et l'on renonce. Le titre est la plus grande
   cible de la fiche et la plus évidente.
   `user-select: none` sur le titre seul : le reste de la fiche, chiffres et
   tableaux, reste copiable. Sans cette limite, attraper une fiche
   sélectionnerait son texte au passage et l'on croirait avoir raté. */
.fiche-deplacable > h2:first-of-type,
.fiche-deplacable > h3:first-of-type { cursor: grab; user-select: none; }
.fiche-deplacable > h2:first-of-type:active,
.fiche-deplacable > h3:first-of-type:active { cursor: grabbing; }

.fiche-masquer { background: none; border: none; cursor: pointer;
                 color: var(--texte-doux); font-size: var(--t-texte); line-height: 1;
                 padding: 0 .1rem; }
.fiche-masquer:hover { color: var(--danger); }

/* L'opacité pendant le glisser porte sur la fiche d'origine : elle dit que
   celle-ci est en train de partir, pendant que le curseur montre où elle
   atterrira. Sans elle, on ne sait plus laquelle on déplace. */
.fiche-en-glisser { opacity: .4; }
.fiche-masquee { display: none; }

/* La barre de rappel. Sans elle, masquer serait irréversible et personne
   n'oserait s'en servir. Le trait discontinu la distingue d'une fiche :
   c'est un outil, pas un contenu. */
.fiches-masquees { display: flex; flex-wrap: wrap; align-items: center;
                   gap: .5rem; margin: .9rem 0; padding: .55rem .85rem;
                   border: 1px dashed var(--trait);
                   border-radius: var(--radius); background: var(--bg-card); }
/* `display: flex` bat l'attribut `hidden` : la barre posée `hidden` par le
   script s'affichait quand même, la règle ci-dessus l'emportant sur le
   `display: none` que le navigateur applique à `[hidden]`. Il en résultait
   un cadre vide en haut de chaque colonne, qui poussait la carte hors de
   l'écran. Piège silencieux : le script fait ce qu'il faut, le CSS le
   défait, et rien ne le signale. */
.fiches-masquees[hidden] { display: none; }
.fm-titre { font-size: var(--t-petite); color: var(--texte-doux); }
.fm-pastille { background: var(--gris-bg); border: 1px solid transparent;
               border-radius: 999px; padding: .2rem .75rem;
               font-size: var(--t-petite); cursor: pointer;
               color: var(--encre); }
.fm-pastille:hover { border-color: var(--accent); }


/* ---------- Le comparatif au segment ----------
   L'idée est reprise d'un outil voisin - chaque indicateur porte sa valeur,
   celle de son segment et l'écart - mais aux codes DiaMap : pas de grille
   type tableur, pas de filets partout, les jetons du produit.

   Ce qui rend la lecture possible et qu'on garde : les trois colonnes
   alignées, et une barre qui part de 100. */
.cmp-ligne { display: grid;
             grid-template-columns: 1fr auto auto minmax(6.5rem, auto);
             gap: .9rem; align-items: baseline;
             padding: .42rem 0; border-bottom: 1px solid var(--filet);
             font-size: var(--t-petite); }
.cmp-ligne:last-child { border-bottom: none; }
.cmp-lib { color: var(--encre); }

/* Le chiffre du magasin porte le poids, celui du segment non : deux valeurs
   de même graisse se lisent comme deux mesures équivalentes, alors que l'une
   est le sujet et l'autre le repère. */
.cmp-val { font-weight: 700; font-variant-numeric: tabular-nums;
           text-align: right; color: var(--encre); }
.cmp-seg { font-variant-numeric: tabular-nums; text-align: right;
           color: var(--texte-doux); }

.cmp-ind { display: flex; align-items: center; gap: .4rem;
           justify-content: flex-end; color: var(--texte-doux);
           font-variant-numeric: tabular-nums; }
.cmp-ind b { min-width: 2.2rem; text-align: right; }
.cmp-h b { color: var(--vert-fonce); }
.cmp-b b { color: var(--ambre); }
.cmp-vide { color: var(--texte-doux); }

/* La jauge : un axe central, et la barre qui en part. `position: relative`
   sur la jauge et `absolute` sur le plein, sinon les deux moitiés ne
   partagent pas le même zéro et les barres opposées ne se comparent plus. */
.cmp-jauge { position: relative; flex: 0 0 4.5rem; height: .55rem;
             background: var(--gris-bg); border-radius: 3px; }
.cmp-jauge::before { content: ""; position: absolute; left: 50%; top: -1px;
                     bottom: -1px; width: 1px; background: var(--trait); }
.cmp-plein { position: absolute; top: 0; bottom: 0; border-radius: 2px; }
.cmp-droite { left: 50%; max-width: 50%; background: var(--vert-fonce); }
.cmp-gauche { right: 50%; max-width: 50%; background: var(--ambre); }

/* L'en-tête des colonnes, posée une fois par bloc. */
.cmp-entete { display: grid;
              grid-template-columns: 1fr auto auto minmax(6.5rem, auto);
              gap: .9rem; padding: 0 0 .35rem;
              border-bottom: 1px solid var(--trait);
              font-size: var(--t-petite); color: var(--texte-doux);
              font-weight: 600; }
.cmp-entete span:not(:first-child) { text-align: right; }

/* En dessous de 620 px, les quatre colonnes deviennent illisibles : le
   libellé se coupe en trois lignes et la jauge fait 2 mm. La jauge est
   retirée, le nombre reste et c'est lui qui porte l'information. */
@media (max-width: 620px) {
  .cmp-jauge { display: none; }
  .cmp-ligne, .cmp-entete { gap: .5rem; }
}

/* Le comparatif en ligne, quand la place manque pour quatre colonnes : sur
   l'écran où chaque univers porte déjà sa barre de part. */
.cmp-seg-inline { color: var(--texte-doux); font-weight: 400; }
.cmp-badge { display: inline-block; min-width: 2rem; text-align: right;
             color: var(--texte-doux); font-variant-numeric: tabular-nums; }
.cmp-badge.cmp-h { color: var(--vert-fonce); }
.cmp-badge.cmp-b { color: var(--ambre); }

/* Le nom de l enseigne sous un chiffre : plus petit, gris. Il precise le
   chiffre sans le concurrencer. */
.perf-sous { font-size: var(--t-petite); color: var(--texte-doux); font-weight: 400; }


/* ---------- Le plan d'action ---------- */
.plan-axes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem;
             align-items: start; margin: 0 0 1.2rem; }
@media (max-width: 900px) { .plan-axes { grid-template-columns: 1fr; } }
.plan-axe h2 { font-size: var(--t-moyenne); margin: 0 0 .2rem; }
.plan-axe .aide { margin: 0 0 .8rem; font-size: var(--t-petite);
                  color: var(--texte-doux); }

.reco { padding: .7rem 0; border-top: 1px solid var(--border); }
.reco:first-of-type { border-top: none; }
.reco-tete { display: flex; justify-content: space-between;
             align-items: baseline; gap: .8rem; }
.reco-titre { font-weight: 700; color: var(--encre);
              font-size: var(--t-petite); }
/* L'enjeu porte le poids : c'est lui qui hiérarchise, donc lui qu'on doit
   voir en balayant la colonne. */
.reco-enjeu { font-weight: 700; font-variant-numeric: tabular-nums;
              color: var(--encre); white-space: nowrap; }
.reco-detail { margin: .25rem 0 .4rem; font-size: var(--t-petite);
               color: var(--texte-doux); line-height: 1.5; }
.reco-pied { display: flex; flex-wrap: wrap; gap: .5rem;
             font-size: var(--t-petite); color: var(--texte-doux); }

/* La force en couleur, mais seulement aux deux extrêmes : tout colorer
   revient à ne rien signaler. */
.reco-force { font-weight: 600; }
.reco-nettement_en_retrait .reco-force { color: var(--danger); }
.reco-en_retrait .reco-force { color: var(--ambre); }
.reco-au_dessus .reco-force,
.reco-nettement_au_dessus .reco-force { color: var(--vert-fonce); }

.reco-statut { padding: .05rem .5rem; border-radius: 999px;
               background: var(--gris-bg); }
.reco-statut-faite { background: var(--vert-pale); color: var(--vert-fonce); }
.reco-statut-en_cours { background: var(--alerte-fond); color: var(--ambre); }
/* « Écartée » se distingue de « faite » : les confondre ferait croire à une
   action menée là où l'on a décidé de ne rien faire. */
.reco-statut-ecartee { background: var(--gris-bg); color: var(--texte-doux);
                       text-decoration: line-through; }

/* La mire d'avancement, jamais un rechargement manuel : le balayage dure
   vingt minutes, et demander de recharger revient à faire faire à
   l'utilisateur le travail de l'écran.

   Le bloc disparaît quand le balayage est fini : le fragment se remplace
   entièrement, il ne laisse pas un cadre vide. */
.mire-logos { background: var(--bg-card, var(--bg-card)); border: 1px solid var(--trait);
              border-left: 3px solid var(--bleu); border-radius: var(--radius);
              padding: .9rem 1.1rem; margin: 0 0 1rem; }
.mire-tete { display: flex; justify-content: space-between;
             align-items: baseline; gap: 1rem; margin-bottom: .5rem; }
.mire-titre { font-weight: 700; }
.mire-chiffre { font-variant-numeric: tabular-nums; font-weight: 700;
                color: var(--bleu); }
.mire-barre { height: 8px; background: var(--gris-bg); border-radius: 4px;
              overflow: hidden; margin-bottom: .5rem; }
/* La transition rend le saut de cinq secondes lisible : sans elle, la barre
   bondit et l'on doute d'avoir bien vu. */
.mire-barre i { display: block; height: 100%; background: var(--bleu);
                transition: width .6s ease; }
.mire-logos .aide { margin: 0; }

/* Le dépôt manuel d'un logo, sur une seule ligne : trois champs qui tiennent
   ensemble se lisent comme un seul geste. */
.depot-logo { display: flex; flex-wrap: wrap; gap: .5rem;
              align-items: center; }
.depot-logo select { flex: 1 1 260px; max-width: 420px; font: inherit;
    font-size: var(--t-petite); padding: .3rem 1.7rem .3rem .55rem;
    border: 1px solid var(--trait); border-radius: 6px;
    background-color: var(--blanc, var(--bg-card)); color: var(--encre); }
.depot-logo input[type="file"] { font: inherit; font-size: var(--t-petite); }

/* La galerie de l'écran d'administration des logos. Elle réemploie
   `.marqueur-logo` tel quel, sans le redéfinir : c'est ce qui garantit que
   l'écran montre exactement ce que la carte affichera, une taille recopiée
   divergeant au premier réglage.

   `auto-fit` et non `auto-fill`, ce que vérifie
   `test_les_grilles_de_cartes_repartissent_au_lieu_de_reserver` :
   `auto-fill` réserve des colonnes vides quand il y a peu d'éléments, et
   quatre logos s'aligneraient à gauche d'une rangée de dix places. */
.galerie-logos { display: grid; gap: .9rem;
                 grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
.gl-item { text-align: center; }
.gl-item .marqueur-logo { margin: 0 auto .45rem; }
.gl-item span { display: block; font-size: var(--t-petite);
                font-weight: 600; line-height: 1.25; }
.gl-item em { display: block; font-size: var(--t-petite);
              color: var(--texte-discret); font-style: normal; }

/* ---------- Le logo comme marqueur de carte ----------
   Le logo remplace la pastille, sans bordure colorée. La couleur du calque
   avait été posée en bordure pour distinguer concurrents et attracteurs,
   mais sur une carte de soixante logos ces anneaux de deux pixels écrasaient
   les logos eux-mêmes : le repère prenait le pas sur ce qu'il devait
   repérer.

   L'information n'est pas perdue : les points sans logo gardent leur
   pastille rouge ou teal, la fiche nomme la famille au survol, et le
   sélecteur de calques les sépare toujours.

   Reste un filet gris très clair : sans lui, un logo à fond blanc disparaît
   sur les zones claires de la carte.

   `pointer-events: auto` : MapLibre pose ses propres écouteurs sur l'élément
   du marqueur, et un enfant qui les intercepte casse le survol - d'où
   `pointer-events: none` sur l'image elle-même. */
.marqueur-logo { width: 26px; height: 26px; border-radius: 50%;
                 border: 1px solid rgba(22, 35, 63, .1); background: var(--bg-card);
                 display: flex; align-items: center;
                 justify-content: center; overflow: hidden;
                 box-shadow: 0 1px 3px rgba(22, 35, 63, .2);
                 cursor: pointer; pointer-events: auto; }
.marqueur-logo img { max-width: 19px; max-height: 19px;
                     object-fit: contain; pointer-events: none; }

/* LA NATURE, EN ANNEAU. Sur une carte ou la moitie des points porte un
   logo, deux logos voisins ne disent pas lequel prend du chiffre
   d'affaires et lequel en amene : la seule cle de lecture etait la
   pastille des points SANS logo.

   L'anneau avait ete retire parce qu'une bordure de deux pixels ecrasait
   le logo qu'elle devait signaler. Il revient en `box-shadow` : le halo se
   pose HORS de la boite, laisse au logo ses trente pixels entiers, et
   double d'un liseré blanc qui le detache du fond de carte. La teinte est
   posee par le script - c'est lui qui connait la famille du point. */
.marqueur-logo.avec-nature { --teinte-nature: var(--nature-concurrent);
                             box-shadow: 0 0 0 1.5px var(--bg-card),
                                         0 0 0 3px var(--teinte-nature),
                                         0 1px 3px rgba(22, 35, 63, .2); }

/* Le magasin cannibalisé. Il porte le même logo que n'importe quel point de
   la carte : sans une couleur à lui, il se lirait comme un concurrent de
   plus, alors que c'est un des nôtres et qu'il perd.

   Le violet est choisi pour n'entrer en collision avec rien de ce qui vit
   déjà sur cette carte : rouge (concurrent), teal (attracteur), et le
   dégradé rouge / orange / jaune des trois zones. Une nuance de rouge
   l'aurait rangé du côté des adversaires, une d'orange dans la zone de
   combat.

   L'anneau est épais et doublé de blanc : il doit se voir au milieu des
   bulles de cannibalisation, posées justement autour de lui. */
.marqueur-logo.marqueur-cannibale {
  border: 3px solid var(--marine);
  box-shadow: 0 0 0 2px var(--bg-card), 0 2px 6px rgba(22, 35, 63, .45);
  width: 34px; height: 34px;
}
.marqueur-logo.marqueur-cannibale img { max-width: 24px; max-height: 24px; }

/* LE MAGASIN COCHE DOIT SE TROUVER SANS LE CHERCHER. Un anneau marine sur une
   carte thematique se perd au milieu des aplats : il porte donc un halo qui
   respire, une couronne blanche franche, et il passe au-dessus de tout.
   L'animation reste lente en mouvement reduit plutot que de disparaitre - un
   repere qui ne bouge plus ne se distingue plus de ses voisins. */
/* PAS DE `position` ICI. MapLibre positionne le cadre d'un marqueur en
   `absolute` et y ecrit un `transform` : lui imposer `relative` le sortait du
   placement, et le magasin coche disparaissait de la carte. Le cadre etant
   deja positionne, le halo s'y ancre sans qu'on ait rien a declarer - meme
   piege que le `transform` au survol, qu'on remplace par `scale`. */
.canni-choisi { z-index: 6; }
.canni-choisi::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px;
  margin: -17px 0 0 -17px; border-radius: 999px; border: 2px solid var(--marine);
  animation: canni-halo 2s ease-out infinite; pointer-events: none;
}
.canni-choisi .marqueur-logo.marqueur-cannibale {
  box-shadow: 0 0 0 3px var(--bg-card), 0 0 0 5px color-mix(in srgb, var(--marine) 55%, transparent),
    0 3px 10px rgba(22, 35, 63, .5);
}
@keyframes canni-halo {
  0% { transform: scale(1); opacity: .65; }
  70% { transform: scale(2.1); opacity: 0; }
  100% { transform: scale(2.1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .canni-choisi::before { animation-duration: 5s; } }
/* Le numero du classement, pose sur le bord du marqueur. */
.canni-choisi .canni-pt {
  position: absolute; right: -6px; top: -6px; z-index: 1; display: grid; place-items: center;
  min-width: 1.15rem; height: 1.15rem; padding: 0 .2rem; box-sizing: border-box; border-radius: 999px;
  border: 2px solid var(--bg-card); background: var(--marine); color: var(--sur-couleur);
  font-size: .62rem; font-weight: 800; line-height: 1;
}

/* Sans logo, pas de trou : la pastille prend la même couleur et porte
   l'initiale, la moitié des enseignes n'ayant pas de logo en
   bibliothèque. */
.marqueur-logo.marqueur-cannibale.sans-logo {
  background: var(--marine); color: var(--sur-couleur); font-weight: 700;
  /* `--t-petite` et non une valeur libre : l'initiale reste du texte, même
     posée dans une pastille. Le test de typographie l'exige, et deux
     pastilles à deux tailles littérales divergeraient au premier ajustement.
     */
  font-size: var(--t-petite);
}

/* Le logo d'une enseigne dans la fiche d'un point de carte.
   `object-fit: contain` et un fond blanc : les logos arrivent en proportions
   et en fonds tres differents (PNG transparent, JPEG blanc, SVG carre). Sans
   cela, un logo large s'etire et un logo transparent devient illisible sur
   le fond de la bulle. */
/* LA FICHE D'UN POINT DE VENTE, au survol du marqueur.
   Elle enchainait sept fragments separes par des <br> : une colonne de
   texte ou rien ne se comparait d'une fiche a l'autre, et ou la nature du
   point - qui prend du CA, qui en amene - se perdait au milieu. Elle a
   maintenant une tete (logo, nom, enseigne), un TAG de nature colore, et
   les faits en lignes libelle / valeur, alignees d'une fiche a l'autre. */
.fiche-point { display: flex; flex-direction: column; gap: .4rem; min-width: 12rem; }
.fiche-point .fc-tete { display: flex; align-items: center; gap: .5rem; }
.fiche-point .fc-titres { display: flex; flex-direction: column; min-width: 0; }
.fiche-point .fc-titres strong { font-size: var(--t-dense); line-height: 1.25; }
.fiche-point .fc-ens { font-size: var(--t-petite); color: var(--text-muted); }
/* Le tag dit la nature EN UN MOT, dans la couleur du calque : c'est la
   premiere chose a savoir devant un point, et elle etait noyee. */
.fiche-point .fc-tag { align-self: flex-start; padding: .1rem .5rem;
  border-radius: 999px; font-size: var(--t-petite); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; }
.fiche-point.nature-concurrent .fc-tag { background: var(--danger-fond); color: var(--nature-concurrent); }
.fiche-point.nature-attracteur .fc-tag { background: var(--vivant-fond); color: var(--nature-attracteur); }
.fiche-point.nature-reseau .fc-tag { background: var(--marine-fond); color: var(--marine); }

/* ---------- LE CAMP : votre reseau, ou un concurrent ----------
   La meme etiquette que sur la carte, hors de la carte. Six scenarios de
   creation d'etude se ressemblent deux a deux par leur titre - il existe un
   « Agrandissement » de chaque cote - et seule cette etiquette les separe.
   Marine pour ce qui est a vous, rouge pour ce qui vous fait face : le
   vocabulaire de couleur des marqueurs, repris tel quel. */
.tag-camp { display: inline-block; margin-left: .5rem; padding: .1rem .5rem;
  border-radius: 999px; font-size: var(--t-libelle); font-weight: 700;
  letter-spacing: .01em; vertical-align: middle; }
.tag-camp.reseau { background: var(--marine-fond); color: var(--marine); }
.tag-camp.concurrent { background: var(--danger-fond); color: var(--nature-concurrent); }

/* ---------- LE RAPPEL DU SCENARIO, a l'etape 2 de la creation ----------
   L'etape ne gardait que le titre du scenario choisi, sur une ligne grise.
   Elle porte maintenant la phrase entiere : ce que l'etude va mesurer est
   la question qu'on se pose en remplissant les champs, et le titre seul n'y
   repondait pas. Le liseré de gauche prend la couleur du camp. */
.scenario-rappel { display: flex; align-items: flex-start; gap: .9rem;
  margin: 0 0 1.1rem; padding: .85rem 1rem; border-radius: var(--rayon-carte);
  background: var(--bg-card); border: 1px solid var(--border-carte);
  border-left: 3px solid var(--marine); box-shadow: var(--ombre-carte); }
.scenario-rappel.camp-concurrent { border-left-color: var(--danger); }
.sr-icone { flex: none; width: 2rem; height: 2rem; border-radius: var(--rayon-champ);
  display: grid; place-items: center; font-size: var(--t-corps);
  background: var(--marine-fond); color: var(--marine); }
.scenario-rappel.camp-concurrent .sr-icone { background: var(--danger-fond); color: var(--danger); }
.sr-corps { flex: 1 1 auto; min-width: 0; }
.sr-tete { margin: 0; display: flex; align-items: center; flex-wrap: wrap;
  gap: .15rem; font-size: var(--t-corps); }
.sr-tete strong { font-weight: 700; }
.sr-phrase { margin: .2rem 0 0; font-size: var(--t-libelle); color: var(--text-muted);
  line-height: 1.45; }
/* Relire son scenario sans pouvoir le corriger sur place serait une
   impasse : le retour a l'etape 1 vit dans le rappel lui-meme. */
.sr-changer { flex: none; margin: 0; padding: .35rem .75rem; font: inherit;
  font-size: var(--t-libelle); font-weight: 600; color: var(--text-muted);
  background: none; border: 1px dashed var(--border-champ);
  border-radius: var(--rayon-champ); cursor: pointer; }
.sr-changer:hover { border-style: solid; border-color: var(--vert); color: var(--vert-fonce); }
.fiche-point .fc-faits { display: flex; flex-direction: column; gap: .1rem; }
.fiche-point .fc-l { display: flex; align-items: baseline; gap: .6rem;
  font-size: var(--t-petite); }
.fiche-point .fc-k { flex: none; min-width: 3.6rem; color: var(--text-faint); }
.fiche-point .fc-v { font-weight: 600; color: var(--text); }
.fiche-point .fc-adr { font-size: var(--t-petite); color: var(--text-muted);
  line-height: 1.35; }

.logo-enseigne { display: block; max-width: 96px; max-height: 40px;
                 object-fit: contain; background: var(--bg-card);
                 margin: 0 0 .35rem; }

/* ---------- La hiérarchie du plan ----------
   Un magasin porte 17 recommandations en médiane depuis que l'axe Conquête
   produit. Ces blocs disent par où commencer sans rien cacher, en
   réemployant les jetons existants.

   Deux cases et non quatre : le total des points d'appui a quitté le
   bandeau, n'étant pas une mesure, et le pourcentage a rejoint le montant
   qu'il qualifie. Une grille figée à quatre laisserait deux trous. */
.plan-enjeu { display: grid;
              grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
              gap: 1px; background: var(--trait); border: 1px solid var(--trait);
              border-radius: var(--radius); overflow: hidden; margin: 0 0 1rem; }
.plan-enjeu > div { background: var(--blanc, var(--bg-card)); padding: .8rem 1rem;
                    text-align: center; }
.plan-enjeu .v { display: block; font-size: var(--t-grande); font-weight: 700;
                 font-variant-numeric: tabular-nums; line-height: 1.15; }
.plan-enjeu .l { display: block; font-size: var(--t-petite);
                 color: var(--texte-doux);
                 margin-top: .15rem; }
/* Les deux ne s'additionnent pas, et la couleur le dit avant le libellé : un
   manque appelle une action, un appui est un atout. */
.plan-enjeu .v.manque { color: var(--ambre); }
.plan-enjeu .v.appui  { color: var(--vert-fonce); }
/* La mention sous le chiffre le qualifie, elle ne le concurrence pas : plus
   petite, plus pâle, elle se lit après. Mise au même rang, elle passe pour
   une seconde mesure - c'est ce qui rendait « 5,4 % du CA du magasin »
   incompréhensible dans sa propre case. */
.plan-enjeu-sous { font-size: var(--t-note); color: var(--texte-doux);
                   margin-top: .3rem; line-height: 1.3; }
.plan-enjeu-sous strong { color: var(--ambre-text, var(--ambre)); }

/* Le numéro d'action est la priorité sur tout le plan, de 1 à 16. Il paraît
   donc dans le désordre à l'intérieur d'un axe, et c'est une information :
   on voit quel axe porte les premières.

   Rond, discret, aligné sur la ligne du titre : il doit se repérer sans
   voler l'attention du libellé, qui porte le sens. */
.reco-rang { flex: 0 0 auto; display: inline-flex; align-items: center;
             justify-content: center; width: 1.45rem; height: 1.45rem;
             margin-right: .5rem; border-radius: 999px;
             background: var(--bg-page); color: var(--gris-text);
             font-size: var(--t-note); font-weight: 700;
             font-variant-numeric: tabular-nums; }

/* Le tableau du manque par rayon : un rayon coiffe ses cinq quartiers par
   une cellule fusionnée, et le trait plus marqué sur sa première ligne dit
   où il commence sans répéter son nom. */
.manque-table td, .manque-table th { vertical-align: middle; }
.manque-table tr.manque-debut td { border-top: 2px solid var(--trait); }
.manque-rayon { font-weight: 700; white-space: nowrap;
                background: var(--bg-page); }
.manque-sous { display: block; font-weight: 400; font-size: var(--t-note);
               color: var(--gris-text); margin-top: .15rem; }
.manque-euro { font-weight: 700; color: var(--ambre-text, var(--ambre)); }
/* Les deux parts se comparent d'un coup d'œil : même largeur, même
   alignement, rien entre elles. « 1 % » ne dit rien, « 1 % contre 21 % »
   dit tout. */
.manque-part, .manque-habitude { font-variant-numeric: tabular-nums; }
.manque-habitude { color: var(--texte-doux); }
.manque-total { font-size: var(--t-moyenne); }
.manque-ecarte { color: var(--texte-doux); }

.plan-priorites .prio { display: grid; grid-template-columns: repeat(3, 1fr);
                        gap: .85rem; }
.plan-priorites .p { position: relative; padding: .85rem .95rem;
                     border: 1px solid var(--trait);
                     border-radius: var(--radius); }
/* Le rang en filigrane : il ordonne sans crier, le chiffre qui compte dans
   cette case étant l'enjeu et non le numéro. */
.plan-priorites .rang { position: absolute; top: .7rem; right: .85rem;
                        font-size: var(--t-grande); font-weight: 800;
                        line-height: 1;
                        color: var(--trait); }
.plan-priorites .axe { font-size: var(--t-petite); text-transform: uppercase;
                       letter-spacing: .04em; font-weight: 700;
                       color: var(--texte-discret); }
.plan-priorites .t { font-weight: 700; margin: .3rem 0 .1rem;
                     padding-right: 1.6rem; }
.plan-priorites .lieu { font-size: var(--t-petite); color: var(--texte-doux); }
.plan-priorites .e { margin-top: .5rem; font-size: var(--t-grande);
                     font-weight: 700;
                     color: var(--ambre); font-variant-numeric: tabular-nums; }

/* `padding-right` pour la croix de la fiche : le poids de l'axe passait sous
   le « × » de fermeture, et « 462 279 € » se lisait « 462 279 €⣿ ». La
   poignée et la croix sont posées en absolute par `fiches-deplacables` ; un
   flex ne les voit pas et leur passe dessous sans rien signaler. */
.plan-axe h2 { display: flex; justify-content: space-between;
               align-items: baseline; gap: .5rem; padding-right: 2.6rem; }
.plan-axe h2 .poids { font-size: var(--t-petite); font-weight: 700;
                      color: var(--ambre); font-variant-numeric: tabular-nums; }
.plan-axe .barre { height: 5px; background: var(--gris-bg);
                   border-radius: 3px; overflow: hidden; margin: 0 0 .8rem; }
.plan-axe .barre i { display: block; height: 100%; background: var(--ambre); }

.plan-appuis .reco-enjeu.appui { color: var(--vert-fonce); }

/* Le suivi : trois champs sur une ligne, au ras du texte. `font: inherit`
   est nécessaire, sans lui un <select> prend la police du système et la
   ligne se désaligne d'un ou deux pixels sur chaque recommandation.

   `nowrap` et des largeurs bornées : sans elles, les trois champs prennent
   leur largeur naturelle (celle de l'option la plus longue, « Responsable
   expansion ») et s'empilent en trois lignes par recommandation - sur
   dix-sept lignes, l'écran triple. `min-width: 0` est ce qui autorise un
   <select> à rétrécir, sans quoi `max-width` reste sans effet dans un
   conteneur flex. */
.reco-suivi { display: inline-flex; flex-wrap: nowrap; gap: .4rem;
              align-items: center; min-width: 0; }
.reco-suivi select, .reco-suivi input[type="date"] {
    font: inherit; font-size: var(--t-petite); padding: .05rem .35rem;
    border: 1px solid var(--trait); border-radius: 999px;
    background-color: var(--blanc, var(--bg-card)); color: var(--encre);
    min-width: 0; max-width: 9.5rem; }
.reco-suivi input[type="date"] { max-width: 8.5rem; }
.reco-suivi select { padding-right: 1.4rem; background-size: .7rem; }
.reco-suivi .statut-faite { background: var(--vert-pale); color: var(--vert-fonce); }
.reco-suivi .statut-en_cours { background: var(--alerte-fond); color: var(--ambre); }
.reco-suivi .qui { font-size: var(--t-petite);
                   color: var(--texte-discret); }

@media (max-width: 900px) {
  .plan-enjeu { grid-template-columns: 1fr 1fr; }
  .plan-priorites .prio { grid-template-columns: 1fr; }
}

.plan-avert { margin: 0 0 1rem; padding: .7rem .9rem;
              border: 1px dashed var(--trait); border-radius: var(--radius);
              font-size: var(--t-petite); color: var(--texte-doux); }

/* La mention « adresse d'origine, le point a été déplacé ». Ton d'une note,
   pas d'une erreur : rien n'est cassé, on signale seulement que la saisie et
   le repère ne coïncident plus. Un rouge d'alerte ferait chercher un défaut
   là où il y a un fait. */
.site-note-origine { color: var(--text-faint); font-style: italic;
                     font-size: var(--t-petite); }

/* La ligne qui annonce l'enchaînement du zonage. Ton d'une note, pas d'un
   bouton : il n'y a rien à cliquer, le calcul est parti. */
.zm-enchaine { color: var(--text-faint); font-size: var(--t-petite); margin: .4rem 0 0; }

/* ---------- La grille de fiches ----------
   Elle vivait dans le <style> de l'écran d'étude : tout module qui voulait
   la même forme devait la recopier. Une forme commune qui n'est pas dans le
   socle n'est pas commune, c'est une convention que chacun réinvente et qui
   diverge à la première retouche.

   Deux colonnes qui se remplissent, et non deux colonnes par lignes : en
   grille, chaque rangée prend la hauteur de sa plus grande fiche, ce qui
   laisse de grands vides sous les courtes.

   UNE GRILLE, PLUS DES COLONNES DE TEXTE. `columns: 2` equilibre les
   HAUTEURS : le navigateur coupe la pile de fiches en deux moitiees de
   meme hauteur, sans egard pour l'endroit ou tombe la coupe. Deux fiches
   tres inegales - une ligne d'un cote, un paragraphe de l'autre -
   donnaient deux colonnes qui ne s'alignaient sur rien, et une fiche
   pouvait se retrouver seule sous une autre au lieu d'a cote.

   En grille, chaque fiche occupe une cellule, les deux commencent en haut
   (`align-items: start`), et une fiche seule prend toute la largeur sans
   qu'aucune regle ne le dise (`auto-fit`). */
.grille-fiches { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1rem; align-items: start; }

/* ---------- Schéma directeur : ce qui n'est pas une étape ----------
   Deux natures dans une même barre, et cela doit se voir. À gauche le
   parcours, trois étapes qu'on traverse dans l'ordre ; à droite ce qui n'en
   fait pas partie, un détour (régler et relancer) et une page à part (la
   bibliothèque). `margin-left: auto` les pousse au bout, et l'espace vide
   entre les deux groupes fait la séparation mieux qu'un trait, qui aurait
   ajouté un objet à lire. */
.onglets-a-part { display: flex; align-items: center; gap: 0.4rem;
                  margin-left: auto; }
/* Il garde l'aspect d'un bouton : c'est le seul endroit d'où part un calcul,
   et le rendre discret comme « ↗ Tous les maillages » le cacherait à qui
   arrive sur un module vide. */
.onglet-action { border-color: var(--accent); color: var(--accent);
                 font-weight: 600; }


/* ---------- Schéma directeur : bibliothèque ---------- */
.sd-retour { margin: 0 0 0.5rem; font-size: var(--t-petite); }
.sd-comparer-titre { font-size: var(--t-moyenne); margin: 0 0 0.5rem; }
/* Les libellés au-dessus, et les menus alignés entre eux. « Comparer » puis
   « à » mettaient huit lettres au-dessus d'un menu et une seule au-dessus du
   suivant : rien ne s'alignait. Deux libellés de longueur comparable
   suffisent, et ils disent en plus lequel sert de base. */
.sd-comparer { display: flex; gap: 0.75rem; align-items: flex-end;
               flex-wrap: wrap; margin: 0 0 1.2rem; }
.sd-comparer label { display: flex; flex-direction: column; gap: 0.25rem;
                     font-size: var(--t-petite); color: var(--gris-text); }
.sd-comparer select { min-width: 16rem; }
/* Deux sorties sur une même ligne : l'écran de comparaison est au troisième
   niveau (module, bibliothèque, comparaison). Le point médian sépare sans
   peser, alors qu'un second `<p>` ferait deux lignes pour deux liens qu'on
   lit d'un coup. */
.sd-retour-sep { color: var(--gris-text); margin: 0 0.35rem; }

/* ---------- Schéma directeur : ce qu'on va lancer ----------
   Le bouton de calcul était la 279ᵉ ligne d'un volet de 319. Le résumé est
   discret mais pas effacé : il se lit d'un coup d'œil au moment de cliquer,
   sans concurrencer le bouton.

   Le fond doit rester clair. `var(--ardoise)` a été employée ici en la
   croyant grise : c'est un bleu foncé (#33415c), et le texte posé dessus,
   valeurs en `--encre` comprises, devenait illisible. Le test des variables
   ne peut pas attraper ce défaut, `--ardoise` existant bel et bien : le nom
   d'une couleur ne dit pas sa valeur, il faut aller la lire. */
.sd-resume { font-size: var(--t-petite); color: var(--gris-text);
             background: var(--bg-page); border: 1px solid var(--trait);
             border-radius: var(--rayon);
             padding: 0.45rem 0.7rem; margin: 0 0 0.7rem; }
.sd-resume:empty { display: none; }
.sd-resume b { color: var(--encre); }

/* La retombee a une colonne n'a plus de regle : `auto-fit` la fait seul,
   pour une `.card` comme pour un <details class="perf-section">. Les deux
   regles en `:has(:only-of-type)` qui vivaient ici sont parties avec les
   colonnes de texte. */

/* ---------- Un tableau long garde ses en-têtes ----------
   `.tableau-scroll` n'était pas dans le socle : elle vivait dans le <style>
   local d'un seul écran d'Études, sur une ligne. Une brique qu'on croit
   partagée mais qui n'existe que localement ne peut pas être employée
   ailleurs.

   Le défilement horizontal ne résout pas le vrai problème : sur le
   Classement du réseau, le tableau fait 9 260 px de haut pour une fenêtre de
   1 000, soit neuf écrans, et ses en-têtes disparaissent dès le premier. Au
   bout de quinze lignes on ne sait plus quelle colonne est laquelle, et il y
   en a 281. */
.tableau-scroll { overflow-x: auto; }

/* Avec le seul `overflow-x: auto`, le conteneur devient un contexte de
   défilement : l'en-tête se colle à lui, et lui ne défile pas
   verticalement - `position: sticky` s'applique mais les en-têtes sont quand
   même emportées. C'est le piège classique de sticky dans un overflow.

   Une hauteur maximale sur `.tableau-scroll` corrigerait cela mais créerait
   un ascenseur là où il n'en faut pas : les 17 lignes de la liste des études
   font 1 813 px, leurs lignes étant hautes. Le nombre de lignes ne dit rien
   de la hauteur, elle se mesure.

   Le tableau ne défile donc plus dans sa propre boîte. Un `max-height: 78vh`
   avec sa barre de défilement interne montrait 24 lignes sur 286 : les
   autres étaient dans le HTML, mais une barre de défilement interne ne se
   voit pas - celle de la page est à droite de l'écran, à sa place habituelle,
   celle d'un bloc est au bord du bloc, et l'œil la prend pour la première.
   Ce qui sort du cadre se lit comme ce qui n'existe pas.

   L'en-tête reste collé : `position: sticky` fonctionne aussi bien sur le
   défilement de la page, et c'était le seul intérêt de la boîte. */
.tableau-cadre-haut { overflow-y: visible; }

/* Les en-têtes restent visibles pendant qu'on descend. Le `background` est
   obligatoire : sans lui, les lignes défilent en transparence sous l'en-tête
   et le tableau devient illisible - un en-tête collant sans fond est pire
   que pas d'en-tête collant.

   Il etait ARDOISE, un aplat sombre herite d'un temps ou l'intitule etait
   blanc dessus. La charte ecrit maintenant l'intitule en vert fonce sur un
   filet vert pale : sur l'ardoise, il devenait illisible. Le fond est celui
   de la carte qui porte le tableau. */
.tableau-cadre-haut thead th,
.tableau-scroll thead th,
.table-admin thead th { position: sticky; top: 0; z-index: 2;
                        background: var(--bg-card); }

/* ---------- Où conquérir : la carte du Plan d'action ----------
   Elle donne le croisement entre la part de marché réelle et le marché. */
.cq-chapeau { font-size: var(--t-petite); margin: 0 0 0.6rem; }
.cq-titre { font-size: var(--t-moyenne); margin: 1rem 0 0.1rem; }
.cq-sous { font-size: var(--t-petite); color: var(--gris-text);
           margin: 0 0 0.5rem; }
/* Le bandeau d'avertissement n'est pas un détail : sans temps de trajet, la
   carte ne corrige pas la distance et désigne la périphérie lointaine. Le
   lecteur doit savoir laquelle des deux lectures il a sous les yeux. */
.cq-avertissement { font-size: var(--t-petite); background: var(--alerte-fond);
                    border: 1px solid var(--ambre); border-radius: var(--rayon);
                    padding: 0.5rem 0.7rem; margin: 0 0 0.7rem; }
.cq-carte { margin: 0 0 0.6rem; }
/* La légende se lit d'un bloc, avec ses effectifs et sa méthode : comme dans
   le module Études, on ne lit pas une couleur sans savoir ce qu'elle compte
   ni comment elle a été bornée. */
.cq-legende { background: var(--bg-card); border: 1px solid var(--trait);
              border-radius: var(--rayon); padding: 0.6rem 0.75rem;
              font-size: var(--t-note); max-width: 34rem; }
.cq-legende > b { display: block; font-size: var(--t-petite);
                  margin-bottom: 0.35rem; }
.cq-legende > div { display: flex; align-items: flex-start; gap: 0.4rem;
                    margin-bottom: 0.25rem; }
.cq-pastille { width: 0.75rem; height: 0.75rem; border-radius: 2px;
               flex: none; margin-top: 0.15rem; }
.cq-methode { border-top: 1px solid var(--trait); margin-top: 0.4rem;
              padding-top: 0.35rem; color: var(--gris-text); }
.cq-puce { display: inline-block; width: 0.6rem; height: 0.6rem;
           border-radius: 2px; margin-right: 0.4rem; }
/* Le code suit le nom, en petit : il sert à retrouver le quartier dans un
   export, pas à le reconnaître. */
.cq-code { color: var(--gris-text); font-size: var(--t-note); }

/* ---------- Classement du réseau : le tableau et ses jauges ----------
   Un nombre nu ne se lit pas : « 298 » oblige à savoir que 100 est la
   moyenne de sa classe, puis à soustraire, 281 fois. La barre fait ce calcul
   une bonne fois, et le nombre reste écrit à côté. */

/* Les reperes empruntent `.chiffre-cle` au tableau de bord : ils n'ont
   plus de dessin propre, seulement leur place sur l'ecran. */
.cl-reperes { margin: 0 0 1.1rem; }

/* Le tableau vit dans une carte, comme partout ailleurs : pose a nu sur le
   fond de page, il flottait sans bord et ses colonnes s'etalaient d'un
   bord a l'autre de la fenetre. */
.cl-cadre { background: var(--bg-card); border: 1px solid var(--border-carte);
  border-radius: var(--rayon-carte); box-shadow: var(--ombre-carte);
  overflow: hidden; }
.cl-cadre .tableau-scroll { max-height: 62vh; overflow-y: auto; }
.cl-table { font-size: var(--t-dense); }
.cl-table th { background: var(--bg-page); }
.cl-table td { padding: .5rem .75rem; vertical-align: middle; }
.cl-table th { padding: .55rem .75rem; }
/* Des largeurs declarees : sans elles, le navigateur donnait tout l'espace
   a la colonne du nom et les deux jauges se serraient a droite. */
.cl-c-rang { width: 4.5rem; }
.cl-c-classe { width: 12rem; }
.cl-c-ca { width: 8rem; }
.cl-c-jauge { width: 17rem; }

/* Le rang porte une pastille. Les trois premiers la portent pleine, et
   seulement quand la liste est triee par defaut : sur un tri par part de
   marche, « podium » ne voudrait plus rien dire. */
.cl-rang { display: inline-grid; place-items: center; min-width: 1.6rem;
  height: 1.6rem; padding: 0 .35rem; border-radius: 999px;
  font-size: var(--t-libelle); font-weight: 700; color: var(--text-muted);
  background: var(--filet); font-variant-numeric: tabular-nums; }
.cl-rang.podium { background: var(--vert-pale); color: var(--vert-fonce); }
.cl-nom { font-weight: 600; color: var(--text); text-decoration: none; }
.cl-nom:hover { color: var(--vert-fonce); text-decoration: underline; }
/* La classe est une etiquette, pas une phrase : en texte nu au milieu de
   trois colonnes de chiffres, elle se lisait comme une donnee de plus. */
.cl-classe { display: inline-block; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
  padding: .15rem .5rem; border-radius: 999px; background: var(--gris-bg);
  color: var(--text-muted); font-size: var(--t-libelle); font-weight: 600; }

/* La jauge et sa valeur, cote a cote. La valeur etait ecrite PAR-DESSUS la
   barre : elle tombait tantot sur le remplissage, tantot sur la piste, et
   changeait de lisibilite d'une ligne a l'autre. Sortie de la barre, dans
   une colonne de largeur fixe, les chiffres s'alignent. */
.cl-jauge { display: flex; align-items: center; gap: .6rem; }
.cl-piste { position: relative; flex: 1 1 auto; height: .5rem;
  background: var(--filet); border-radius: 999px; }
/* Le trait des 100 est placé à sa proportion réelle dans l'étendue du
   réseau, jamais au milieu par commodité : l'indice va de 28 à 298, donc le
   neutre tombe au quart gauche et non au centre. */
.cl-zero { position: absolute; top: -2px; bottom: -2px; width: 1px;
           background: var(--gris-text); z-index: 2; }
.cl-b, .cl-b2 { position: absolute; top: 0; bottom: 0; border-radius: 999px; }
/* Deux teintes de la charte, pas deux couleurs vives : la barre porte une
   mesure, elle ne crie pas. Le rouge reste reserve a ce qui alerte, et un
   magasin sous la moyenne de sa classe n'est pas une avarie. */
.cl-b.sur { background: var(--vert); }
.cl-b.sous { background: var(--alerte); }
.cl-b2 { left: 0; background: var(--jauge-neutre); }
.cl-val { flex: none; width: 4.2rem; text-align: right;
  font-size: var(--t-libelle); font-weight: 700; color: var(--text-muted);
  font-variant-numeric: tabular-nums; }
.cl-val.sur { color: var(--vert-fonce); }
.cl-val.sous { color: var(--alerte); }
/* Une ligne sans donnée se marque, elle ne se cache pas : le magasin existe,
   c'est son résultat de modèle qui manque. */
.cl-sans-donnee td { background: var(--bg-page); color: var(--gris-text); }
/* Une valeur manquante : un tiret discret. Quand tout le modèle manque, une seule phrase couvre la ligne. */
.cl-vide { color: var(--text-faint); }
.cl-sans-modele { color: var(--text-faint); font-size: var(--t-libelle); font-style: italic; }

/* L'en-tête qui trie. La flèche dit l'état (▼ = du plus grand au plus
   petit), pas l'action, sinon il faut cliquer pour savoir où l'on en est. */
.cl-tri { color: inherit; text-decoration: none; white-space: nowrap; }
.cl-tri:hover { text-decoration: underline; }
.cl-fleche { margin-left: 0.3rem; opacity: 0.5; font-size: var(--t-note); }
.cl-tri.on .cl-fleche { opacity: 1; }

/* ---------- Les logos d'enseigne SUR UNE CARTE ----------
   : « mettre logos cf module etude ».

   ⚠ `.logo-enseigne` seul fait 96 × 40 px - la taille d'une fiche, pas
   d'un marqueur. Sur une carte qui en porte deux cents, il faut la
   taille d'un point : le logo REMPLACE la pastille, il ne s'ajoute pas
   à elle. */
.pt-concurrent.avec-logo, .pt-magasin.avec-logo {
  background: var(--blanc); border: 2px solid var(--trait);
  border-radius: 50%; width: 22px; height: 22px; padding: 2px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28); }
.pt-concurrent.avec-logo .logo-enseigne,
.pt-magasin.avec-logo .logo-enseigne {
  max-width: 100%; max-height: 100%; width: auto; height: auto; }

/* ⚠ ET LA COUCHE SE DÉCOCHE. : « laisse les concurrents avec
   possibilité de les désélectionner ». Deux cents pastilles sur une carte
   thématique cachent ce qu'on est venu regarder - la couche par IRIS. */
.carte-couches { display: flex; gap: 0.9rem; align-items: center;
                 flex-wrap: wrap; font-size: var(--t-petite);
                 margin: 0.4rem 0 0; }
.carte-couches label { display: flex; align-items: center; gap: 0.3rem;
                       cursor: pointer; }
.carte-couches .discret { margin-left: auto; }

/* Le bouton de lancement est un bouton plein, pas une bordure. Le sortir du
   chemin de fer était juste, Régler étant une boucle et non une étape, mais
   lui donner l'allure d'un onglet secondaire le rendait introuvable : c'est
   le seul endroit d'où part un calcul. Une bordure d'accent au milieu de
   pastilles blanches ne se distingue pas ; un aplat, si.

   `.onglets button` et non `.onglet-action` seul : une classe perd contre
   une classe plus un élément (0,1,0 face à 0,1,1). Écrite sans le préfixe,
   la règle est lue par le navigateur puis silencieusement écrasée, et le
   bouton reste blanc. */
/* ---------- L'orange des boutons d'action ----------
   Ce n'est pas tout à fait `--ambre-text`, et l'écart est calculé.
   `--ambre-text` (#c97c1f) porte du texte blanc à 3,29 de contraste, sous le
   seuil de 4,5 et tout juste au-dessus du 3,0 admis pour du gras. Assombri à
   #a46519, le même orange passe à 4,71, lisible pour tout texte, et il reste
   manifestement orange. Le contraste se calcule, il ne s'estime pas à l'œil.

   L'ambre d'origine reste la couleur des bordures et des légendes, où rien
   ne s'écrit dessus. */
:root { --ambre-bouton: #a46519; }

/* Orange et non bleu : c'est la couleur du bloc de calcul lui-même
   (`.sd-calcul` porte déjà `--ambre-text` en bordure et en légende), si bien
   que le bouton qui y mène et le bloc où il mène parlent la même langue. Le
   bleu est la couleur de la navigation ; l'employer pour une action la fait
   ressembler à un onglet de plus. */
.onglets button.onglet-action { background: var(--ambre-bouton);
                                border-color: var(--ambre-bouton);
                                color: var(--blanc); font-weight: 650; }
/* `filter` plutôt qu'une couleur foncée nommée : un `var()` qui pointe une
   variable inexistante rend la déclaration invalide, le fond retombe à
   transparent et le texte blanc devient illisible. `brightness` ne peut pas
   se tromper de nom. */
.onglets button.onglet-action:hover { filter: brightness(0.88); }
/* Quand on EST dans les réglages, il reste marqué sans crier. */
.onglets button.onglet-action.on { background: var(--ambre-bouton);
                                   border-color: var(--ambre-bouton);
                                   filter: brightness(0.88); }
/* La toile de « Où conquérir », au même format que les autres cartes du
   module : deux cartes du même module qui n'ont pas la même taille se lisent
   comme deux objets différents.

   Le format carré n'est pas un détail. En bandeau large, elle allait de
   Biarritz à Foix pour une zone autour de Tarbes, alors que la carte voisine
   du même magasin était bien cadrée. Le cadrage était juste dans les deux
   cas : `fitBounds` cale sur la dimension la plus contrainte, et sur
   1 600 × 420 une zone ronde remplit la hauteur en laissant quatre fois trop
   de largeur. La carte plus étroite et plus haute ne montrait pas le défaut.
   Un symptôme de cadrage n'a pas forcément une cause de cadrage : ici, une
   hauteur écrite en dur dans un autre fichier.

   Le carré est le format de la maison, établi pour le Schéma directeur
   (`.sd-carte`) et porté par `.carte-diamap--carre`. `max-width` avec
   `margin: 0 auto` : un carré pleine largeur ferait 1 600 de haut sur un
   grand écran. */
.cq-toile { aspect-ratio: 1 / 1; height: auto; width: 100%;
            max-width: 44rem; margin: 0 auto;
            border-radius: var(--rayon);
            border: 1px solid var(--trait); margin-bottom: 0.6rem; }

/* ---------- « Où conquérir » : la légende sur la carte ----------
   Comme dans le module Études, on lit la couleur sans quitter la carte des
   yeux. Sous la carte, il faudrait un aller-retour par quartier. */
.cq-cadre { position: relative; }
/* `.cq-sur-carte` a été retirée : elle repositionnait la légende à la main,
   alors que `carte-diamap-legende` (dans `carte_diamap.css`) le fait déjà,
   fond blanc et ombre compris. Le défaut n'était pas la position mais la
   feuille non chargée, la légende s'affichant en texte nu sur les routes. */

/* Le commentaire prend toute la largeur. Il était borné à 34 rem, hérité de
   la légende qu'il remplaçait : sur un écran large, quatre lignes de
   consigne tenaient dans un tiers de la page et le reste restait vide. */
.cq-legende { max-width: none; }
/* Le commentaire est annoncé : un pavé de texte sous une carte, sans titre,
   se lit comme un résidu ; nommé, il devient l'explication de ce qu'on vient
   de voir. */
.cq-commentaire-titre { display: block; font-size: var(--t-petite);
                        margin-bottom: 0.15rem; }
.cq-commentaire-chapeau { font-size: var(--t-note); color: var(--gris-text);
                          margin: 0 0 0.45rem; }

/* Le magasin est nommé sous la carte. Son marqueur était posé mais sans
   style, `.pt-magasin` vivant dans une feuille qui n'était pas chargée ; et
   même visible, un rond bleu au milieu de 463 quartiers peints ne se nomme
   pas tout seul. */
.cq-magasin { display: inline-flex; align-items: center; gap: 0.35rem;
              margin-left: 0.6rem; font-weight: 600; color: var(--encre); }
.cq-pt-magasin { width: 0.7rem; height: 0.7rem; border-radius: 50%;
                 background: var(--accent); border: 2px solid var(--blanc);
                 box-shadow: 0 1px 3px rgba(16, 42, 67, 0.4); flex: none; }


/* ---------- Le CA minimum au m², dans la case de la typologie ----------
   Le même écran sert à retenir une zone pour le schéma directeur et à
   modifier son CA/m². Le seuil est sous la case à cocher, séparé d'un
   filet : deux gestes distincts dans le même objet. Sans le filet, l'œil lit
   un seul bloc et clique la case en croyant valider le chiffre. */
.sd-typo-seuil { display:flex; align-items:center; gap:.3rem;
  margin-top:.4rem; padding-top:.4rem;
  border-top:1px dashed var(--trait); }
/* Les trois tailles de la grille, et rien d'autre. Une première rédaction
   posait .75rem, .85rem et .72rem pour tenir dans la case : le test de
   typographie les a toutes attrapées. Une taille décidée case par case est
   ce qui a fait dériver les écrans avant la grille - si c'est trop grand,
   c'est la case qui s'élargit. */
.sd-typo-seuil label { font-size:var(--t-petite);
  color:var(--texte-doux, var(--text-muted)); white-space:nowrap; }
.sd-typo-seuil input { width:100%; min-width:0; text-align:right;
  padding:.3rem .35rem; font:inherit; font-size:var(--t-petite);
  font-variant-numeric:tabular-nums;
  border:1px solid var(--trait); border-radius:4px; }
.sd-typo-unite { font-size:var(--t-petite);
  color:var(--texte-doux, var(--text-muted)); }
.sd-typo-repere { display:block; font-size:var(--t-petite);
  color:var(--texte-doux, var(--text-muted)); margin-top:.25rem; line-height:1.3; }
.sd-typo-repere--court { font-style:italic; }

/* ---------- La carte carrée ----------
   Une zone de chalandise est ronde : dans un bandeau large elle occupe le
   tiers central et les deux côtés sont du remplissage, on croit voir loin
   alors qu'on voit du vide.

   `height: auto` est obligatoire : le fragment pose une hauteur en ligne, et
   une hauteur fixe l'emporte sur `aspect-ratio` - le carré ne serait jamais
   carré, sans que rien ne le signale. */
.carte-diamap--carre { aspect-ratio: 1 / 1; height: auto; width: 100%; }

/* La ligne qui se situe sur la carte. Le curseur dit que la ligne est
   cliquable ; sans lui, l'interaction existe et personne ne la trouve. */
.sd-ligne-situable { cursor: pointer; }
.sd-ligne-situable:hover { background: var(--ardoise, var(--bg-page)); }
/* La ligne située reste marquée : on revient au tableau et on sait où on
   en était. Un surlignage qui s'efface oblige à refaire le geste. */
tr.ligne-situee td { box-shadow: inset 3px 0 0 var(--bleu, var(--marine)); }
/* Le lien de la bulle, posé sur la carte. */
.sd-pt-lien { font-size: var(--t-petite); }

/* Le panier, à côté de la part qu'il explique. Il se lit après le
   pourcentage et non à sa place : la part dit le poids du rayon, le panier
   dit pourquoi. Deux nombres au même rang feraient deux mesures
   concurrentes. */
.cmp-panier { font-size: var(--t-note); color: var(--texte-doux);
              white-space: nowrap; margin-left: .35rem; }
/* La précision sous un libellé : elle qualifie, elle ne concurrence pas.
   Même règle que `.plan-enjeu-sous`. */
.sous-lbl { display: block; font-size: var(--t-note);
            color: var(--texte-doux); font-weight: 400; }

/* Ce qu'on lit sans pouvoir le changer ici : les règles d'enseigne se
   règlent dans « Paramètres du schéma directeur », l'écran de calcul se
   contente de les rappeler. Sans marque visuelle, un nombre affiché
   ressemble à un champ vidé et l'on cherche où taper. */
.sd-typo-seuil--lu { color: var(--texte-doux); }
.sd-typo-seuil--lu b { color: var(--encre); font-variant-numeric: tabular-nums; }
.sd-ex-lu { font-size: var(--t-petite); }
.sd-ex-vers-regles { font-size: var(--t-petite); white-space: nowrap; }


/* ---------- L'accueil du schéma directeur ----------
   Les cartes sont le chemin de fer : on y lit où l'on en est sans cliquer.
   Les règles sont en pointillé, n'étant pas une étape : on ne les refait pas
   à chaque maillage. */
.sd-etapes { display: grid; gap: .7rem; margin: .4rem 0 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.sd-etape { border: 1px solid var(--trait); border-radius: 10px;
  background: var(--bg-card); padding: .75rem .85rem; display: flex;
  flex-direction: column; gap: .25rem; }
.sd-etape-rang { font-size: var(--t-petite); font-weight: 700;
  color: var(--texte-doux); letter-spacing: .05em; }
.sd-etape-nom { font-weight: 700; }
.sd-etape-quoi { font-size: var(--t-petite); color: var(--texte-doux);
  flex: 1; }
.sd-etape-dit { font-size: var(--t-petite); font-weight: 700; }
.sd-etape-action { align-self: flex-start; margin-top: .35rem;
  font-size: var(--t-petite); font-weight: 700; background: none;
  border: 0; padding: 0; cursor: pointer; color: var(--lien, var(--marine)); }
.sd-etape--regle { border-style: dashed; background: var(--bg-page); }
.sd-etape--fait { border-color: var(--succes-trait); background: var(--vert-pale); }
.sd-etape--encours { box-shadow: inset 0 0 0 1px var(--lien, var(--marine)); }
.sd-etape--echec { border-color: var(--danger-trait); background: var(--danger-fond); }
.sd-accueil-alerte { background: var(--ambre-fond, var(--alerte-fond));
  border: 1px solid var(--ambre-filet, var(--ambre));
  border-left: 3px solid var(--ambre-trait, var(--ambre));
  border-radius: 0 8px 8px 0; padding: .55rem .9rem; margin: .2rem 0 1rem;
  font-size: var(--t-petite); }
/* Comparaison de deux maillages : le verdict avant les chiffres, au meme
   ton que les autres bandeaux du module. */
.sd-alerte { background: var(--ambre-fond, var(--alerte-fond));
  border: 1px solid var(--ambre-filet, var(--ambre));
  border-left: 3px solid var(--ambre-trait, var(--ambre));
  border-radius: 0 8px 8px 0; padding: .55rem .9rem; margin: .2rem 0 1rem;
  font-size: var(--t-petite); }
.sd-ok { background: var(--vert-pale); border: 1px solid var(--succes-trait);
  border-left: 3px solid var(--succes-trait); border-radius: 0 8px 8px 0;
  padding: .55rem .9rem; margin: .2rem 0 1rem; font-size: var(--t-petite); }
.sd-accueil-gestes { display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 0 0 1rem; align-items: center; }
/* Le bouton orange doit l'être ici aussi. `.onglets button.onglet-action` ne
   s'applique que dans `.onglets` ; sur l'accueil, le bouton retombait sur le
   fond bleu foncé par défaut, avec la couleur d'accent par-dessus, soit un
   rectangle sans texte lisible. */
.sd-accueil-gestes button.onglet-action { background: var(--ambre-bouton, var(--ambre));
  color: var(--sur-couleur); border: 1px solid var(--ambre-bouton, var(--ambre));
  border-radius: 8px; padding: .45rem 1rem; font-weight: 700;
  cursor: pointer; }
.sd-accueil-gestes button.onglet-action:hover { filter: brightness(0.88); }
.sd-accueil-note { font-size: var(--t-petite); color: var(--texte-doux); }

/* L'accueil « deux paves » : ligne d'etat, puis Parametres a gauche et
   Resultats a droite. Les portes sont des lignes cliquables (la ligne est le
   clic), la meme grammaire des deux cotes. */
/* Re-skin d'apres le design « Schema-Directeur.dc.html » (Claude Design) :
   bandeau d'etat en carte a lisere vert, paves en cartes a en-tete numerote,
   portes en lignes affleurantes avec tuile d'icone. */
.ecran-schema { --ombre-sd: 0 1px 3px rgba(22,35,63,.03), 0 8px 24px -12px rgba(22,35,63,.08);
  --trait-sd: #f2f4f2; }
.sd2-etat { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem;
  background: var(--bg-card); border: 1px solid var(--border);
  border-left: 3px solid var(--vert); border-radius: 16px;
  padding: 1.1rem 1.4rem; margin: .2rem 0 1.2rem; box-shadow: var(--ombre-sd); }
.sd2-etat > b { font-size: 1.3rem; font-weight: 650; color: var(--marine); letter-spacing: -.01em; }
.sd2-pastille { display: none; } /* le lisere vert porte deja le signal */
.sd2-type { font-size: var(--t-petite); font-weight: 700; color: var(--vert-fonce);
  background: var(--vert-pale); border-radius: 999px; padding: .12rem .6rem; }
.sd2-etat .discret { font-size: var(--t-petite); color: var(--text-faint); flex-basis: 100%; order: 2; } /* sous le titre, le bouton reste sur la 1re ligne */
.sd2-reprendre { margin-left: auto; }

.sd2-paves { display: grid; gap: 1rem; margin: 0 0 1rem;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); align-items: start; }
.sd2-pave { border: 1px solid var(--border); border-radius: 18px;
  background: var(--bg-card); box-shadow: var(--ombre-sd); overflow: hidden;
  display: flex; flex-direction: column; }
.sd2-pave-titre { display: flex; align-items: center; gap: .65rem; margin: 0;
  padding: .95rem 1.15rem; border-bottom: 1px solid var(--trait-sd);
  font-size: var(--t-section); font-weight: 650; color: var(--marine); }
.sd2-pave-num { flex: none; width: 1.4rem; height: 1.4rem; border-radius: 999px;
  background: var(--vert-pale); color: var(--vert-fonce); font-size: .72rem; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center; }
.sd2-pave-meta { margin-left: auto; font-size: var(--t-libelle); color: var(--text-faint); font-weight: 500; }
.sd2-pave--grise { opacity: .6; }
.sd2-pave--grise .sd2-porte, .sd2-pave--grise .sd2-outils { pointer-events: none; }

/* La porte : tuile d'icone, texte, chevron - ligne affleurante, la ligne est le clic. */
.sd2-porte { display: flex; align-items: center; gap: .9rem; width: 100%;
  text-align: left; border: 0; border-bottom: 1px solid var(--trait-sd);
  background: none; padding: .8rem 1.15rem; cursor: pointer;
  color: inherit; text-decoration: none; font: inherit; transition: background .12s; }
button.sd2-porte { appearance: none; }
.sd2-porte:hover { background: var(--bg-survol); }
.sd2-porte--grise { cursor: default; }
.sd2-porte--grise:hover { background: none; }
.sd2-porte-picto { flex: none; display: inline-flex; align-items: center;
  justify-content: center; width: 2rem; height: 2rem; border-radius: 10px;
  background: var(--vert-pale); color: var(--vert-fonce); }
.sd2-porte--grise .sd2-porte-picto { background: var(--bg-page); color: var(--text-faint); }
.sd2-porte-texte { display: flex; flex-direction: column; gap: .1rem; flex: 1; min-width: 0; }
.sd2-porte-texte > b { font-weight: 650; font-size: var(--t-corps); color: var(--marine); }
.sd2-porte-tete { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .5rem; }
.sd2-porte .discret { font-size: var(--t-petite); color: var(--text-faint); }
.sd2-porte-chevron { flex: none; color: var(--text-faint); font-size: 1.1rem; line-height: 1; }
.sd2-reste { font-size: var(--t-libelle); font-weight: 800; color: var(--alerte);
  background: var(--alerte-fond); border-radius: 999px; padding: .1rem .55rem; white-space: nowrap; }
.sd2-fini { font-size: var(--t-petite); font-weight: 700; color: var(--succes); }

.sd2-lancer { padding: .85rem 1.15rem; border-top: 1px solid var(--trait-sd); }
.sd2-lancer .onglet-action { display: inline-flex; align-items: center; gap: .4rem; }
.sd2-outils { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0;
  padding: .85rem 1.15rem; border-top: 1px solid var(--trait-sd); align-items: center; }
.sd2-outils .onglet-lien { display: inline-flex; align-items: center; gap: .4rem;
  border: 1px solid var(--border-champ); background: var(--bg-card); color: var(--marine);
  border-radius: 9px; padding: .45rem .8rem; font-size: var(--t-petite);
  font-weight: 700; text-decoration: none; }
.sd2-outils .onglet-lien:hover { border-color: var(--vert); color: var(--vert-fonce); }

/* Les sous-onglets du volet Décider. Le compteur dit ce qui reste à
   trancher, pas le total : un onglet à zéro est un onglet fini. */
.sd-sousonglets { display: flex; gap: .35rem; flex-wrap: wrap;
  border-bottom: 2px solid var(--trait); padding-bottom: .5rem;
  margin: 0 0 .9rem; }
.sd-sousonglets button { background: var(--bg-page); color: var(--encre);
  border: 1px solid var(--trait); border-bottom: 0;
  border-radius: 7px 7px 0 0; padding: .35rem .7rem;
  font-size: var(--t-petite); cursor: pointer; margin: 0; }
.sd-sousonglets button.on { background: var(--bg-card); font-weight: 700;
  box-shadow: inset 0 3px 0 var(--lien, var(--marine)); }
.sd-sousonglets .cpt { display: inline-block; margin-left: .35rem;
  font-size: var(--t-note); font-weight: 700; background: var(--alerte-fond);
  color: var(--alerte); border-radius: 999px; padding: 0 .4rem; }
.sd-geste-bloque { white-space: nowrap; }

/* La synthèse en trois lignes, et non un chiffre unique : un comité arbitre
   sur ce qu'il gagne et sur ce qu'il paie. */
.sd-solde { border-collapse: collapse; width: 100%; max-width: 40rem;
  margin: 0 0 .9rem; }
.sd-solde td { padding: .55rem .7rem; border-bottom: 1px solid var(--trait); }
.sd-solde td.num { text-align: right; font-variant-numeric: tabular-nums;
  font-weight: 700; white-space: nowrap; }
.sd-solde tr.total td { border-top: 2px solid var(--encre); border-bottom: 0;
  font-size: var(--t-libelle); }
.sd-solde .plus, td.num.plus { color: var(--vert-encre, var(--vert-fonce)); }
.sd-solde .moins, td.num.moins { color: var(--danger); }
.sd-m2-plan { display: flex; gap: 2.5rem; flex-wrap: wrap;
  margin: 0 0 .9rem; }
.sd-m2-plan b { display: block; font-size: var(--t-libelle); }
.sd-alerte-plafond { background: var(--ambre-fond, var(--alerte-fond));
  border: 1px solid var(--ambre-filet, var(--ambre)); border-radius: 8px;
  padding: .55rem .8rem; margin: 0 0 1rem; font-size: var(--t-petite); }
/* Dépassé, le plafond hausse le ton ; il ne bloque toujours pas. */
.sd-alerte-plafond.depasse { border-color: var(--danger-trait); background: var(--danger-fond); }

/* ---------- Le tableau de bord ----------
   Ecrit ici et non dans le gabarit : c'est ce qui permet a un correctif de
   couleur ou d'espacement de valoir pour l'ecran entier. */

.tdb { max-width: 1280px; }

/* L'entete : la date, le bonjour, puis une phrase qui dit ce qui attend. Un
   compte neuf lit cette phrase et sait qu'il n'a rien a faire, la ou un mur
   de zeros ne disait pas si c'etait normal. */
.tdb-date { font-size: var(--t-dense); font-weight: 600;
  color: var(--text-faint); margin: 0 0 .4rem; }
.tdb-date::first-letter { text-transform: uppercase; }
.tdb-entete h1 { margin: 0; font-size: var(--t-page); font-weight: 700;
  letter-spacing: -.02em; color: var(--text); }
.tdb-resume { margin: .4rem 0 0; color: var(--text-muted); font-size: var(--t-corps); max-width: 90ch; }
/* Le texte prend la place que les boutons laissent : la phrase tient sur une ligne. */
.tdb-entete > div:first-child { flex: 1 1 28rem; min-width: 0; }
.tdb-resume b { color: var(--text); font-weight: 700; }
.tdb-gestes { display: flex; gap: .6rem; flex-wrap: wrap; }

/* Les indicateurs. Celui qui appelle une action porte sa couleur sur le
   chiffre, les autres restent a l'encre : c'est ce qui distingue « rien a
   faire » de « quelque chose attend ». */
.chiffres-cles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: .9rem; margin: 0 0 1.4rem; }
.chiffre-cle { display: flex; flex-direction: column; gap: .6rem;
  background: var(--bg-card); border: 1px solid var(--border-carte); border-radius: var(--rayon-carte);
  padding: 1.1rem 1.25rem; box-shadow: var(--ombre-carte); color: inherit; text-decoration: none;
  transition: box-shadow .15s ease, border-color .15s ease; }
a.chiffre-cle:hover { border-color: var(--vert); }
.chiffre-cle .tete { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.chiffre-cle .quoi { font-size: var(--t-corps); font-weight: 600; color: var(--text-muted); }
.chiffre-cle .ico { width: 28px; height: 28px; border-radius: var(--rayon-champ); flex: none;
  display: grid; place-items: center; background: var(--vert-pale); color: var(--vert-fonce); }
.chiffre-cle .n { font-size: var(--t-page); font-weight: 700; letter-spacing: -.02em;
  line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.chiffre-cle .detail { font-size: var(--t-libelle); color: var(--text-faint); }
/* L'attente porte l'ambre, l'acquis le vert, et sur le chiffre plutot que
   sur la carte : quatre cartes teintees se valent, quatre chiffres non. */
.chiffre-cle.attente .n { color: var(--alerte); }
.chiffre-cle.attente .ico { background: var(--alerte-fond); color: var(--alerte); }
.chiffre-cle.acquis .n { color: var(--vert-fonce); }
/* `--marine-fond` et non la valeur en clair : celle-ci n'avait pas de
   variante sombre, et la pastille restait BLANCHE au milieu de trois
   pastilles sombres - la seule tache claire de l'ecran, sur le chiffre
   qui n'appelait rien. */
.chiffre-cle.lieu .ico { background: var(--marine-fond); color: var(--marine); }

/* Les cartes du tableau de bord : un titre, une valeur d'appoint a droite,
   puis des lignes separees par un filet. */
.tdb-carte { background: var(--bg-card); border: 1px solid var(--border-carte);
  border-radius: var(--rayon-carte); box-shadow: var(--ombre-carte); overflow: hidden; }
.tdb-carte > .tete { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.2rem .65rem; }
.tdb-carte > .tete h2 { margin: 0; font-size: var(--t-section); font-weight: 700; color: var(--text); }
.tdb-carte > .tete .appoint { margin-left: auto; font-size: var(--t-libelle); color: var(--text-faint); }
.tdb-carte > .tete a.appoint { color: var(--vert-fonce); font-weight: 600; text-decoration: none; }
.tdb-carte > .tete a.appoint:hover { text-decoration: underline; }
.tdb-carte .compteur-tete { font-size: var(--t-libelle); font-weight: 700; padding: .1rem .5rem;
  border-radius: 999px; background: var(--alerte-fond); color: var(--alerte); }

/* Le parcours des etudes : quatre colonnes egales, chacune coiffee du trait
   de sa couleur. Trait, libelle, chiffre et sous-titre tombent sur le meme
   bord : une barre empilee proportionnelle ne s'alignait sur rien. */
.tdb-parcours { margin: 0 0 1rem; }
.parcours-etapes { list-style: none; margin: 0; padding: .15rem 1.2rem 1.1rem;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.parcours-item { min-width: 0; }
.parcours-etape { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.parcours-etape .trait { display: block; height: 6px; border-radius: 999px; margin: 0 0 .8rem;
  transition: transform .15s ease; transform-origin: left; }
.parcours-etape.vide .trait { opacity: .3; }
.parcours-etape .l { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
  font-size: var(--t-dense); font-weight: 600; color: var(--text-muted); }
.parcours-etape .part { font-weight: 500; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.parcours-etape .v { margin: .15rem 0 .1rem; font-size: 1.6rem; font-weight: 700; line-height: 1.15;
  color: var(--text); font-variant-numeric: tabular-nums; }
.parcours-etape.vide .v { color: var(--text-faint); }
.parcours-etape .s { font-size: var(--t-libelle); color: var(--text-faint); }
a.parcours-etape:hover .nom, a.parcours-etape:hover .v { color: var(--vert-fonce); }

/* Les modules du contrat : une carte par module ouvert, meme grille que les
   indicateurs. L'icone reprend celle du rail : le meme module, le meme signe. */
.tdb-modules { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1rem; margin: 0 0 1rem; }
.tdb-module { display: flex; flex-direction: column; gap: .85rem; padding: 1.1rem 1.2rem 1rem;
  background: var(--bg-card); border: 1px solid var(--border-carte); border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-carte); color: inherit; text-decoration: none;
  transition: box-shadow .15s ease, border-color .15s ease; }
.tdb-module:hover { border-color: var(--vert); box-shadow: var(--ombre-levee); }
.tdb-module .tete { display: flex; align-items: center; gap: .75rem; }
.tdb-module .ico { width: 36px; height: 36px; border-radius: 10px; flex: none;
  display: grid; place-items: center; background: var(--vert-pale); color: var(--vert-fonce); }
.tdb-module.zones_contractuelles .ico { background: var(--marine-fond); color: var(--marine); }
.tdb-module .titres { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tdb-module .titres .t { font-size: var(--t-section); font-weight: 700; color: var(--text); }
.tdb-module .titres .s { font-size: var(--t-libelle); color: var(--text-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdb-module .tete .chevron { color: var(--text-faint); flex: none; }
.tdb-module .chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.tdb-module .chiffre { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tdb-module .chiffre b { font-size: 1.3rem; font-weight: 700; line-height: 1.15; color: var(--text);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.tdb-module .chiffre span { font-size: var(--t-libelle); color: var(--text-muted); line-height: 1.3; }
.tdb-module .chiffre.attente b { color: var(--alerte); }
.tdb-module .chiffre.acquis b { color: var(--vert-fonce); }
.tdb-module .chiffre.marine b { color: var(--marine); }
.tdb-module .gain { font-size: var(--t-dense); color: var(--text-muted); }
.tdb-module .gain b { color: var(--vert-fonce); font-weight: 700; }
/* La suite : la prochaine chose a faire, en pied de carte. */
.tdb-module .suite { margin-top: auto; padding-top: .7rem; border-top: 1px solid var(--filet);
  font-size: var(--t-dense); font-weight: 600; color: var(--text-muted); }
.tdb-module.urgent .suite { color: var(--alerte); }
.tdb-module .vide { font-size: var(--t-dense); color: var(--text-muted); line-height: 1.45; }

/* Dernieres etudes et classement, cote a cote ; la liste seule prend toute
   la largeur. Chaque carte garde sa hauteur. */
.tdb-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem; align-items: start; margin: 0 0 1.6rem; }
.tdb-grille.seule { grid-template-columns: minmax(0, 1fr); }
.tdb-a-traiter { margin: 0 0 1rem; }

/* Une ligne « a traiter » : un compte, ce dont il s'agit, et ou ca mene. */
.tdb-ligne { display: flex; align-items: center; gap: .85rem; padding: .7rem 1.2rem;
  border-top: 1px solid var(--filet); color: inherit; text-decoration: none;
  transition: background .12s ease; }
.tdb-ligne:hover { background: var(--bg-survol); }
.tdb-ligne .compte { width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: grid; place-items: center; font-weight: 700; font-size: var(--t-corps);
  background: var(--gris-bg); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.tdb-ligne.urgent .compte { background: var(--danger-fond); color: var(--danger); }
.tdb-ligne.attente .compte { background: var(--alerte-fond); color: var(--alerte); }
.tdb-ligne .quoi { flex: 1; min-width: 0; }
.tdb-ligne .quoi .t { display: block; font-size: var(--t-corps); font-weight: 600; color: var(--text); }
.tdb-ligne .chevron { flex: none; color: var(--text-faint); }
.tdb-vide { margin: 0; padding: .2rem 1.2rem 1.2rem; font-size: var(--t-dense); color: var(--text-muted); }

/* Le classement : un rang, un nom et sa jauge, l'etat, le montant. */
.tdb-classement { list-style: none; margin: 0; padding: 0 .6rem .6rem; }
.tdb-classement a { display: grid; align-items: center; gap: .75rem;
  padding: .55rem .6rem; border-radius: 10px; color: inherit; text-decoration: none;
  transition: background .12s ease; }
.tdb-classement a:hover { background: var(--bg-survol); }
.tdb-classement .quoi { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tdb-classement .t { font-size: var(--t-dense); font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdb-classement a { grid-template-columns: 24px minmax(0, 1fr) auto 4.5rem; }
.tdb-classement .rang { width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center;
  background: var(--gris-bg); color: var(--text-muted); font-size: var(--t-libelle); font-weight: 700; }
.tdb-classement li:first-child .rang { background: var(--vert-pale); color: var(--vert-fonce); }
.tdb-classement .jauge { min-width: 0; height: 5px; margin-top: 5px; }
.tdb-classement .ca { text-align: right; font-size: var(--t-dense); font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.tdb-enseignes { border-top: 1px solid var(--filet); padding: .8rem 1.2rem 1rem; }
.tdb-enseignes h3 { margin: 0 0 .4rem; font-size: var(--t-libelle); font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-faint); }

/* Une etude recente : son nom, quand, son etat, son CA. Colonnes fixes :
   les etiquettes et les montants tombent les uns sous les autres. */
.tdb-etude { display: grid; grid-template-columns: minmax(0, 1fr) auto 5rem;
  align-items: center; gap: .75rem; padding: .65rem 1.2rem;
  border-top: 1px solid var(--filet); color: inherit; text-decoration: none;
  transition: background .12s ease; }
.tdb-etude:hover { background: var(--bg-survol); }
.tdb-etude .quoi { min-width: 0; }
.tdb-etude .quoi .t { display: block; font-size: var(--t-corps); font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tdb-etude .quoi .s { display: block; font-size: var(--t-libelle); color: var(--text-faint); margin-top: 1px; }

/* Un bloc entier cliquable ne se souligne pas au survol : la carte
   s'eclaire, le texte reste a sa couleur. `.page a:hover` soulignait tout
   le contenu du bloc et le passait au vert. */
.page a.tdb-module:hover, .page a.chiffre-cle:hover, .page a.parcours-etape:hover,
.page a.tdb-ligne:hover, .page a.tdb-etude:hover,
.page .tdb-classement a:hover, .page a.widget-ligne:hover { color: inherit; text-decoration: none; }

@media (max-width: 980px) {
  .tdb-grille { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .parcours-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1rem; }
  .tdb-classement .etat-tag { display: none; }
  .tdb-classement a { grid-template-columns: 24px minmax(0, 1fr) 4.5rem; }
}

/* Le tag d'etat, regle de la charte : le tag reste neutre, seule la pastille
   porte la couleur. Vingt lignes restent ainsi lisibles. */
.etat-tag { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
  font-size: var(--t-libelle); font-weight: 600; padding: .12rem .55rem .12rem .45rem;
  border-radius: 6px; border: 1px solid var(--tag-trait); background: var(--tag-fond); color: var(--tag-texte); }
.etat-tag::before { content: ""; width: 6px; height: 6px; border-radius: 999px;
  background: var(--etat-brouillon); flex: none; }
.etat-tag.a-valider::before { background: var(--etat-a-valider); }
.etat-tag.validee::before { background: var(--etat-validee); }
.etat-tag.contractuelle::before { background: var(--etat-contractuelle); }

/* Un module souscrit mais pas encore construit : present, grise, et il dit
   pourquoi. Le faire disparaitre laissait croire qu'il n'avait pas ete
   achete. */
nav.rail-menu .a-venir { display: flex; align-items: center; gap: .7rem;
  padding: .52rem .65rem; border-radius: var(--rayon-champ);
  color: var(--rail-doux); font-size: var(--t-corps); cursor: default; }
nav.rail-menu .a-venir .t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
nav.rail-menu .a-venir .badge { font-size: var(--t-libelle); font-weight: 700;
  color: var(--rail-doux); border: 1px solid var(--rail-trait);
  border-radius: 6px; padding: 0 .35rem; white-space: nowrap; }
.collapsed nav.rail-menu .a-venir .t, .collapsed nav.rail-menu .a-venir .badge { display: none; }
.collapsed nav.rail-menu .a-venir { justify-content: center; padding-inline: 0; }

/* ------------------------------------------------------------------ *
 * Mon entreprise : le contrat du client, relu par son Expert.
 *
 * Aucune couleur en clair ici, et aucun bloc `<style>` dans le gabarit :
 * l'ecran est ne apres la charte, il n'a pas de dette a rattraper. C'est
 * le modele a suivre pour les ecrans repris ensuite.
 * ------------------------------------------------------------------ */
.ent-tete { display: flex; align-items: flex-start; gap: 1.25rem; margin: 0 0 1.6rem; flex-wrap: wrap; }
.ent-sceau { width: 64px; height: 64px; flex: none; border-radius: 16px;
  background: var(--vert-pale); color: var(--vert-fonce);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: var(--t-affiche); letter-spacing: -0.02em; }
.ent-tete .corps { flex: 1 1 18rem; min-width: 0; }
.ent-tete h1 { margin: 0; font-size: var(--t-page); font-weight: 700;
  letter-spacing: -0.015em; color: var(--text); }
.ent-tete .identite { margin: .35rem 0 0; color: var(--text-muted); font-size: var(--t-corps); }
.ent-tete .etiquettes { display: flex; gap: .5rem; margin-top: .7rem; flex-wrap: wrap; }

/* Les etiquettes de contrat : neutres par defaut, teintees seulement quand
   elles annoncent quelque chose (contrat ferme, echeance proche). Tout
   colorer reviendrait a ne rien signaler. */
.ent-etiq { display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--t-libelle); font-weight: 600; padding: .12rem .55rem;
  border-radius: 6px; border: 1px solid var(--border); background: var(--bg-survol);
  color: var(--tag-texte); }
.ent-etiq .point { width: 6px; height: 6px; border-radius: 999px; background: var(--vert); flex: none; }
.ent-etiq.alerte { border-color: var(--ambre); background: var(--ambre-bg); color: var(--ambre-text); }
.ent-etiq.alerte .point { background: var(--ambre); }
.ent-etiq.arret { border-color: var(--danger-trait); background: var(--danger-fond); color: var(--danger); }
.ent-etiq.arret .point { background: var(--danger); }

.ent-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem; margin: 0 0 1.25rem; align-items: start; }
.ent-carte { background: var(--bg-card); border: 1px solid var(--border-carte);
  border-radius: var(--rayon-carte); padding: 1.15rem 1.3rem; }
.ent-carte h2 { margin: 0 0 .8rem; font-size: var(--t-libelle); font-weight: 700;
  color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; }
.ent-ligne { display: flex; justify-content: space-between; gap: .75rem;
  padding: .45rem 0; border-bottom: 1px solid var(--filet); font-size: var(--t-corps); }
.ent-ligne:last-of-type { border-bottom: 0; }
.ent-ligne .k { color: var(--text-muted); }
.ent-ligne .v { font-weight: 600; color: var(--text); text-align: right;
  word-break: break-word; }
/* Une valeur absente se montre en creux : le blanc dit qu'il reste a
   renseigner, l'absence de ligne ne dirait rien. */
.ent-ligne .v.creux { font-weight: 400; color: var(--text-faint); font-style: italic; }

.ent-sieges { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .45rem; }
.ent-sieges b { font-size: var(--t-page); font-weight: 700; color: var(--text);
  line-height: 1; font-variant-numeric: tabular-nums; }
.ent-sieges span { font-size: var(--t-corps); color: var(--text-muted); }
.ent-piste { display: block; height: 9px; background: var(--gris-bg);
  border-radius: 999px; overflow: hidden; margin-bottom: .9rem; }
.ent-piste i { display: block; height: 100%; border-radius: 999px; background: var(--vert); }
.ent-piste.deborde i { background: var(--danger); }

.ent-module { display: flex; align-items: flex-start; gap: .65rem; padding: .5rem 0;
  border-bottom: 1px solid var(--filet); }
.ent-module:last-of-type { border-bottom: 0; }
.ent-module .point { width: 8px; height: 8px; border-radius: 999px; flex: none; background: var(--vert); }
.ent-module .nom { flex: 1 1 auto; min-width: 0; font-size: var(--t-corps);
  font-weight: 600; color: var(--text); }
.ent-module .etat { font-size: var(--t-libelle); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--vert-fonce); white-space: nowrap; }
.ent-module.dormant .point { background: var(--ambre); }
.ent-module.dormant .etat { color: var(--ambre-text); }
.ent-module.absent .point { background: var(--border-champ); }
.ent-module.absent .nom { color: var(--text-muted); font-weight: 500; }
.ent-module.absent .etat { color: var(--text-faint); }
.ent-note { margin: .9rem 0 0; font-size: var(--t-libelle); color: var(--text-faint); line-height: 1.5; }
/* Aucun module souscrit : un etat legitime, qui se DIT. Laisse muet, l'ecran
   passe pour casse et l'on cherche une panne la ou il n'y a qu'un contrat a
   ouvrir. */
.ent-vide { margin: 0 0 .8rem; padding: .7rem .85rem; border-radius: var(--rayon-champ);
  background: var(--ambre-bg); border: 1px solid var(--ambre);
  font-size: var(--t-libelle); color: var(--ambre-text); line-height: 1.5; }

.ent-bloc { background: var(--bg-card); border: 1px solid var(--border-carte);
  border-radius: var(--rayon-carte); overflow: hidden; }
.ent-bloc > .chapeau { display: flex; align-items: baseline; gap: .6rem;
  padding: .95rem 1.3rem; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.ent-bloc > .chapeau h2 { margin: 0; font-size: var(--t-section); font-weight: 700; color: var(--text); }
.ent-bloc > .chapeau .sous { font-size: var(--t-libelle); color: var(--text-faint); }
.ent-bloc table { width: 100%; border-collapse: collapse; font-size: var(--t-corps); }
/* L'entete vert fonce sur filet vert pale : la signature des tableaux de la
   charte. Elle vaut ici comme ailleurs. */
.ent-bloc th { text-align: left; padding: .6rem 1.3rem;
  font-size: var(--t-libelle); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--vert-fonce);
  border-bottom: 1.5px solid var(--succes-trait); white-space: nowrap; }
.ent-bloc td { padding: .8rem 1.3rem; border-bottom: 1px solid var(--filet); }
.ent-bloc tbody tr:last-child td { border-bottom: 0; }
.ent-bloc tbody tr:hover { background: var(--bg-survol); }
.ent-bloc .col-nb { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ent-bloc .marche { font-weight: 600; color: var(--text); }
.ent-bloc .zones { font-weight: 700; color: var(--marine); }
.ent-bloc .etudes { color: var(--text-muted); }
.ent-bloc .vide { padding: 1.6rem 1.3rem; color: var(--text-muted); font-size: var(--t-corps); }

/* Le formulaire de correction : replie derriere le bouton, ouvert seulement
   quand on veut ecrire. Un ecran de lecture ne s'ouvre pas sur des champs. */
.ent-edition { margin: 0 0 1.25rem; }
.ent-edition[open] summary { margin-bottom: .85rem; }
.ent-edition summary { list-style: none; display: inline-flex; }
.ent-edition summary::-webkit-details-marker { display: none; }
.ent-edition .champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: .85rem 1rem; background: var(--bg-card); border: 1px solid var(--border-carte);
  border-radius: var(--rayon-carte); padding: 1.15rem 1.3rem; }
.ent-edition label { display: block; font-size: var(--t-libelle); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); margin-bottom: .3rem; }
.ent-edition input { width: 100%; }
.ent-edition .gestes { grid-column: 1 / -1; display: flex; gap: .6rem; }

/* ------------------------------------------------------------------ *
 * Connexion : la carte centree de la maquette.
 *
 * L'ecran vivait dans un bloc `<style>` de 90 lignes, en plein cadre,
 * avec un SECOND logo dessine a la main qui remplacait le vrai fichier
 * sous 720 px - la marque changeait en reduisant la fenetre, sans que
 * rien ne l'explique. Il n'y a plus qu'un logo, et plus qu'un endroit
 * ou le style vit.
 * ------------------------------------------------------------------ */
.page-connexion #shell > aside,
.page-connexion .rail-topbar,
.page-connexion .barre-identite,
.page-connexion #shell ~ .rail-reveal { display: none; }

.cnx-ecran { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center;
  padding: 1.5rem; background: var(--bg-page); overflow: auto; }
.cnx-carte { display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 55rem;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 20px; overflow: hidden; box-shadow: 0 18px 50px rgba(22, 35, 63, .12); }

/* Volet gauche : la marque et la promesse. */
.cnx-vitrine { display: flex; flex-direction: column; justify-content: space-between;
  gap: 2.2rem; padding: 2.75rem 2.5rem; border-right: 1px solid var(--border);
  background: linear-gradient(165deg, var(--bg-card) 0%, var(--vert-pale) 100%); }
.cnx-marque { display: flex; align-items: center; gap: .75rem; }
.cnx-marque img { width: 2.4rem; height: 2.4rem; flex: none; }
.cnx-marque .n { display: block; font-family: var(--police-titre); font-size: var(--t-affiche);
  font-weight: 700; letter-spacing: -.02em; color: var(--text); line-height: 1.1; }
.cnx-marque .s { display: block; font-size: var(--t-dense); color: var(--text-muted); }
.cnx-signature { margin: 0; font-size: var(--t-libelle); color: var(--text-faint); line-height: 1.6; }
.cnx-signature b { color: var(--vert-fonce); font-weight: 700; }
.cnx-promesse { margin: 1.6rem 0 0; max-width: 26ch; font-size: var(--t-section);
  font-weight: 700; line-height: 1.4; letter-spacing: -.01em; color: var(--text); }
.cnx-promesse + p { margin: .8rem 0 0; max-width: 36ch; font-size: var(--t-corps);
  line-height: 1.6; color: var(--text-muted); }
/* Les trois zones de chalandise, aux couleurs qu'elles auront sur la carte :
   la legende commence des l'ecran de connexion. */
.cnx-zones { display: flex; gap: 1rem; flex-wrap: wrap; }
.cnx-zones span { display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--t-libelle); color: var(--text-muted); }
.cnx-zones i { width: 8px; height: 8px; border-radius: 2px; flex: none; }

/* Volet droit : le formulaire. */
.cnx-panneau { display: flex; flex-direction: column; gap: 0; padding: 2.75rem 2.6rem; }
.cnx-pied { margin-top: auto; padding-top: 1.6rem; }
.cnx-panneau h1 { margin: 0; font-size: var(--t-page); font-weight: 700;
  letter-spacing: -.02em; color: var(--text); }
.cnx-panneau .accroche { margin: .3rem 0 1.5rem; color: var(--text-muted); font-size: var(--t-corps); }
.cnx-form label { display: block; margin: 0 0 .35rem; font-size: var(--t-dense);
  font-weight: 700; color: var(--tag-texte); }
.cnx-form .champ { margin-bottom: 1rem; }
/* Le texte du champ passe a la taille de lecture dense : au poids du texte
   courant, l'adresse saisie pesait autant que le titre de l'ecran. La
   bordure s'eclaire au survol et se cercle de vert a la saisie - le survol
   annonce, la mise au point confirme. */
.cnx-form input[type=text], .cnx-form input[type=password], .cnx-form input[type=email] {
  width: 100%; box-sizing: border-box; margin: 0;
  font-size: var(--t-dense); padding: .65rem .8rem;
  border: 1px solid var(--border-champ); border-radius: var(--rayon-champ);
  background: var(--bg-card); color: var(--text);
  transition: border-color .12s ease, box-shadow .12s ease; }
.cnx-form input:hover { border-color: var(--vert-pale); background: var(--bg-survol); }
.cnx-form input:focus { outline: 0; border-color: var(--vert); background: var(--bg-card);
  box-shadow: 0 0 0 3px var(--vert-pale); }
.cnx-form input::placeholder { color: var(--text-faint); }
/* Le mot de passe et son oeil : le bouton se pose DANS le champ, sans le
   retrecir, sinon il se decale des que la fenetre change de largeur. */
/* L'oeil se centre sur le CHAMP seul : ce conteneur n'entoure QUE l'input
   et le bouton. Pose autour du bloc entier, il comptait aussi le libelle et
   le bouton remontait au-dessus du champ. */
.cnx-secret { position: relative; display: block; }
.cnx-secret input { padding-right: 2.9rem; }
.cnx-oeil { position: absolute; right: .4rem; top: 50%; transform: translateY(-50%);
  display: inline-grid; place-items: center; width: 28px; height: 28px; margin: 0;
  padding: 0; border: 0; border-radius: 6px; background: transparent;
  color: var(--text-faint); cursor: pointer;
  transition: background .12s ease, color .12s ease; }
.cnx-oeil:hover { color: var(--tag-texte); background: var(--bg-survol); }
.cnx-oeil:focus-visible { outline: 2px solid var(--vert-fonce); outline-offset: 1px; }
/* Le bouton GARDE son etat : enfonce tant que le mot de passe est decouvert.
   Sans cela, rien ne disait dans quel sens on l'avait laisse. */
.cnx-oeil[aria-pressed="true"] { background: var(--vert-pale); color: var(--vert-fonce); }
.cnx-oeil .barre, .cnx-oeil[aria-pressed="true"] .ouvert { display: none; }
.cnx-oeil[aria-pressed="true"] .barre { display: block; }
.cnx-options { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin: 0 0 1.2rem; font-size: var(--t-corps); }
.cnx-options .memoire { display: inline-flex; align-items: center; gap: .45rem;
  margin: 0; font-weight: 400; color: var(--text-muted); cursor: pointer; }
.cnx-options .memoire input { appearance: none; -webkit-appearance: none;
  margin: 0; width: 16px; height: 16px; flex: none; border-radius: 5px;
  border: 1.5px solid var(--border-champ); background: var(--bg-card);
  cursor: pointer; position: relative;
  transition: background .12s ease, border-color .12s ease; }
.cnx-options .memoire:hover input { border-color: var(--vert); }
.cnx-options .memoire input:checked { background: var(--vert); border-color: var(--vert); }
.cnx-options .memoire input:checked::after { content: ""; position: absolute;
  left: 4.5px; top: 1px; width: 4px; height: 8px; border: solid var(--sur-couleur);
  border-width: 0 2px 2px 0; transform: rotate(42deg); }
.cnx-options .memoire input:focus-visible { outline: 2px solid var(--vert-fonce); outline-offset: 2px; }
.cnx-options .oubli { font-weight: 600; color: var(--vert-fonce); background: none;
  border: 0; padding: 0; margin: 0; font-size: var(--t-dense); cursor: pointer; text-decoration: none; }
.cnx-options .oubli:hover { text-decoration: underline; }
.cnx-form .bouton { width: 100%; justify-content: center; margin: 0;
  padding: .7rem 1rem; font-size: var(--t-corps); }

/* La premiere connexion : le mot de passe temporaire doit etre remplace, et
   personne ne le devine. Le dire ici evite un appel au support. */
.cnx-note { margin: 1.2rem 0 0; padding: .8rem .95rem; border: 1px solid var(--border);
  border-radius: var(--rayon-carte); background: var(--bg-survol);
  font-size: var(--t-libelle); line-height: 1.55; color: var(--text-muted); }
.cnx-note b { color: var(--text); }
.cnx-pied { display: flex; align-items: center; justify-content: flex-end;
  gap: .4rem; font-size: var(--t-libelle); color: var(--text-faint);
  font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.cnx-pied a { color: var(--text-faint); }
.cnx-pied a:hover { color: var(--vert-fonce); }

.cnx-retour { align-self: flex-start; background: none; border: 0; padding: 0;
  margin: 0 0 .9rem; font: inherit; font-size: var(--t-libelle);
  color: var(--text-muted); cursor: pointer; }
.cnx-retour:hover { color: var(--vert-fonce); }
.cnx-vue[hidden] { display: none; }

.cnx-alerte, .cnx-info { margin: 0 0 .9rem; padding: .6rem .8rem;
  border-radius: var(--rayon-champ); font-size: var(--t-corps); }
.cnx-alerte { background: var(--danger-fond); border: 1px solid var(--danger-trait); color: var(--danger); }
/* Une information, pas une erreur : « vous avez ete deconnecte » n'est pas une
   faute de l'utilisateur, et le rouge le lui ferait croire. */
.cnx-info { background: var(--info-fond); border: 1px solid var(--tag-trait); color: var(--tag-texte); }

/* Fenetre etroite : la vitrine passe AU-DESSUS du formulaire au lieu de
   disparaitre. Elle porte la marque et la promesse - les faire disparaitre
   laissait un formulaire anonyme, et obligeait a dessiner un second logo. */
@media (max-width: 800px) {
  .cnx-carte { grid-template-columns: 1fr; max-width: 26rem; }
  .cnx-vitrine { border-right: 0; border-bottom: 1px solid var(--border);
    padding: 1.8rem; gap: 1.4rem; }
  .cnx-promesse, .cnx-promesse + p { display: none; }
  .cnx-panneau { padding: 1.8rem; }
}

/* Le compteur d'attente sur l'entree « Mes etudes », comme la maquette. Une
   seule entree le porte : une pastille sur chaque ligne cesserait d'attirer
   l'oeil. */
nav.rail-menu a .compte { flex: none; font-size: var(--t-libelle); font-weight: 800;
  background: var(--ambre-bg); color: var(--ambre-text);
  border-radius: 999px; padding: 0 .4rem; min-width: 1.15rem; text-align: center; }
.collapsed nav.rail-menu a .compte { display: none; }
/* Les gestes de la barre du haut sont des liens autant que des boutons : la
   meme allure pour les deux, sinon la cloche et l'aide ne se ressemblent pas. */
a.geste-barre { text-decoration: none; }

/* ------------------------------------------------------------------ *
 * Tableau de bord : les 127 lignes qui vivaient dans le gabarit.
 *
 * Rien n'a change de nom : les classes sont celles du gabarit, seul
 * l'endroit ou elles vivent a bouge. Un ecran qui porte ses couleurs
 * en clair ignore la charte ET le theme sombre.
 * ------------------------------------------------------------------ */
/* Le tableau de bord se centre a une largeur de lecture : sur un grand
   ecran, quatre cartes etirees sur deux metres ne se lisent plus d'un coup. */
.hub { max-width: 1440px; margin: 0 auto; }

/* Les actions montent A DROITE du titre, comme la maquette : posees
   dessous, elles repoussaient les indicateurs sous la ligne de flottaison
   et la premiere chose vue etait un bouton, pas un etat. */
.tdb-entete { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.25rem; flex-wrap: wrap; margin: 0 0 1.6rem; }
.hub-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin: 0; }
.hub-actions a { display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 700; font-size: var(--t-corps); text-decoration: none;
  padding: .6rem 1.1rem; border-radius: var(--rayon-bouton); white-space: nowrap; }
.hub-actions .primaire { background: var(--primary); color: var(--sur-couleur);
  box-shadow: 0 2px 6px rgba(90, 168, 50, .28); }
.hub-actions .primaire:hover { background: var(--primary-hover); color: var(--sur-couleur); }
.hub-actions .secondaire { background: var(--bg-card); color: var(--marine);
  border: 1px solid var(--border-champ); font-weight: 600; }
.hub-actions .secondaire:hover { border-color: var(--vert); color: var(--vert-fonce); }

.hub .surtitre { font-size: var(--t-libelle); font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-faint); margin: 0 0 .5rem; }

/* Les deux panneaux du bas : memes cartes que « A traiter », vues en
   barres. Poignee et croix ne se montrent qu'au survol - toujours
   visibles, elles mettaient deux commandes de reglage devant la donnee. */
.widgets { display: grid; grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
  gap: 1rem; margin: 0 0 1.6rem; }
.widget { background: var(--bg-card); border: 1px solid var(--border-carte);
  border-radius: var(--rayon-carte); padding: 1.1rem 1.25rem 1.2rem; margin: 0; }
.widget-entete { display: flex; align-items: flex-start; gap: .6rem; }
.widget h3 { margin: 0; font-size: var(--t-section); font-weight: 700; color: var(--text); }
.widget .note { color: var(--text-faint); font-size: var(--t-libelle); margin: .15rem 0 .9rem; }
.widget-lignes { display: block; }
/* La colonne des libelles plafonnait a 8 rem, et « Zone contractuelle »
   n'y tenait pas : la ligne affichait « Zone contractu... », soit le nom
   d'un etat coupe au milieu. Le plafond passe a 12 rem - la grille prend
   la largeur du plus long libelle, sans jamais laisser un libelle a
   rallonge ecraser la jauge qui suit. */
.widget-ligne { display: grid; grid-template-columns: minmax(6rem, 12rem) 1fr 2.5rem;
  align-items: center; gap: .75rem; padding: .4rem 0; color: inherit; text-decoration: none; }
.widget-ligne + .widget-ligne { border-top: 1px solid var(--filet); }
.widget-ligne .l { font-size: var(--t-dense); font-weight: 600; color: var(--tag-texte);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.widget-ligne .v { text-align: right; font-size: var(--t-dense); font-weight: 700;
  color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.widget-ligne.large { grid-template-columns: minmax(6rem, 12rem) 1fr 4.5rem; }
a.widget-ligne:hover { background: var(--bg-survol); }
a.widget-ligne:hover .l { color: var(--vert-fonce); }

.widget table { width: 100%; border-collapse: collapse; font-size: var(--t-dense); }
.widget thead th { font-size: var(--t-libelle); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--vert-fonce); text-align: left;
  padding: .35rem 0 .4rem; border-bottom: 1.5px solid var(--succes-trait); }
.widget thead th:last-child { text-align: right; }
.widget tbody td { padding: .5rem 0; border-bottom: 1px solid var(--filet); vertical-align: middle; }
.widget tbody tr:last-child td { border-bottom: 0; }
.widget tbody tr.ligne-cliquable { cursor: pointer; }
.widget tbody tr.ligne-cliquable:hover td { background: var(--bg-survol); }
.widget tbody tr.ligne-cliquable a { color: inherit; text-decoration: none; }
.widget tbody tr.ligne-cliquable:hover a { color: var(--vert-fonce); }
.widget td.n { text-align: right; font-variant-numeric: tabular-nums;
  font-weight: 700; white-space: nowrap; color: var(--text); }
.widget td:first-child { font-weight: 600; color: var(--tag-texte); }
.jauge { display: block; background: var(--gris-bg); border-radius: 999px;
  height: 8px; min-width: 7rem; overflow: hidden; }
.jauge span { display: block; height: 100%; border-radius: 999px; }
.widget .vide { color: var(--text-faint); font-style: italic; font-size: var(--t-libelle); margin: .4rem 0 0; }

.hub h2 { font-size: var(--t-section); font-weight: 700; margin: 1.9rem 0 .1rem; color: var(--text); }
.hub .sec-note { color: var(--text-faint); font-size: var(--t-libelle); margin: 0 0 .9rem; }

/* Ce que la licence ouvre. La maquette n'a pas cet ensemble : elle suppose
   un client qui connait son contrat. Il reste, parce qu'il est le seul
   endroit qui dise ce qu'un module fait avant qu'on l'ouvre. */
.modules { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.mod { background: var(--bg-card); border: 1px solid var(--border-carte);
  border-radius: var(--rayon-carte); padding: 1.1rem 1.15rem 1rem;
  display: flex; flex-direction: column; min-height: 10rem;
  border-top: 3px solid var(--vert); max-width: 30rem; }
.mod.futur { border-top-color: var(--border-champ); }
.mod h3 { margin: 0 0 .15rem; font-size: var(--t-section); font-weight: 700; color: var(--text); }
.mod p { margin: 0; font-size: var(--t-libelle); color: var(--text-muted); flex: 1; line-height: 1.5; }
.mod .pied { display: flex; align-items: center; gap: .5rem; margin-top: .9rem; flex-wrap: wrap; }
.mod .ouvrir { font-size: var(--t-libelle); font-weight: 700; text-decoration: none;
  padding: .35rem .8rem; border-radius: 8px; background: var(--primary); color: var(--sur-couleur); }
.mod .ouvrir:hover { background: var(--primary-hover); color: var(--sur-couleur); }
.mod .compte { font-size: var(--t-libelle); color: var(--text-faint); }
.mod .compte .attente { color: var(--ambre-text); font-weight: 700; }
.etiquette { font-size: var(--t-libelle); font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; padding: .12rem .5rem; border-radius: 999px; }
.etiquette.bientot { background: var(--ambre-bg); color: var(--ambre-text); }
.etiquette.base { background: var(--vert-pale); color: var(--vert-fonce); }

.admin-titre { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.admin-titre .reserve { font-size: var(--t-libelle); font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; background: var(--gris-bg); color: var(--tag-texte);
  border-radius: 999px; padding: .12rem .5rem; }
.admin-bloc { display: flex; align-items: center; gap: .9rem; background: var(--bg-card);
  border: 1px solid var(--border-carte); border-radius: var(--rayon-carte);
  padding: 1.05rem 1.15rem; text-decoration: none; color: inherit; }
.admin-bloc:hover { border-color: var(--vert); }
.admin-bloc .texte { flex: 1; }
.admin-bloc h3 { margin: 0 0 .15rem; font-size: var(--t-section); font-weight: 700; color: var(--text); }
.admin-bloc p { margin: 0; font-size: var(--t-libelle); color: var(--text-muted); }
.admin-bloc .fleche { color: var(--tag-texte); font-weight: 800; font-size: var(--t-section); }

/* La ligne « A traiter » gagne son detail : le nombre dit combien, le
   detail dit quoi en faire. Sans lui, « 3 » n'appelle aucun geste. */
.tdb-ligne .quoi .s { display: block; font-size: var(--t-libelle);
  color: var(--text-faint); margin-top: 1px; }

/* Le CA au bout d'une ligne d'etude recente : la maquette le pose la, et
   c'est la question a laquelle l'etude repond. Sans lui, la liste dit ce
   qu'on a touche mais pas ce que ca vaut. */
.tdb-etude .ca { flex: none; min-width: 4.5rem; text-align: right;
  font-weight: 700; font-size: var(--t-corps); color: var(--text);
  font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ------------------------------------------------------------------ *
 * Equipe : les utilisateurs du compte, geres par l'Expert.
 * ------------------------------------------------------------------ */
.eq-entete { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin: 0 0 1.4rem; }
.eq-entete h1 { margin: 0; font-size: var(--t-page); font-weight: 700;
  letter-spacing: -.015em; color: var(--text); }
.eq-entete p { margin: .5rem 0 0; color: var(--text-muted);
  font-size: var(--t-corps); max-width: 62ch; }

.eq-bandeau { display: flex; gap: 1rem; flex-wrap: wrap; margin: 0 0 1.4rem; }
.eq-bandeau > * { background: var(--bg-card); border: 1px solid var(--border-carte);
  border-radius: var(--rayon-carte); padding: 1rem 1.25rem; }
.eq-sieges { display: flex; align-items: center; gap: .9rem;
  flex: 1 1 18rem; max-width: 28rem; }
.eq-sieges .k { font-size: var(--t-dense); font-weight: 600;
  color: var(--text-muted); white-space: nowrap; }
.eq-sieges .piste { flex: 1; height: 9px; background: var(--gris-bg);
  border-radius: 999px; overflow: hidden; }
.eq-sieges .piste i { display: block; height: 100%; border-radius: 999px; background: var(--vert); }
.eq-sieges .piste.deborde i { background: var(--danger); }
.eq-sieges .v { font-weight: 700; font-size: var(--t-corps);
  white-space: nowrap; font-variant-numeric: tabular-nums; }
/* La legende des roles : elle dit ce que chacun PEUT, ce qu'un intitule seul
   ne dit pas. Elle evite d'ouvrir l'aide pour choisir un profil. */
.eq-roles { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
  font-size: var(--t-dense); color: var(--text-muted); }
.eq-roles b { font-weight: 600; }

.eq-tag { display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--t-libelle); font-weight: 700; padding: .16rem .6rem;
  border-radius: 999px; border: 0; background: var(--vert-pale);
  color: var(--vert-fonce); white-space: nowrap; }
.eq-tag .point { width: 6px; height: 6px; border-radius: 999px; flex: none; background: var(--vert); }
.eq-tag.calme { background: var(--marine-fond); color: var(--marine); }
.eq-tag.calme .point { background: var(--marine); }
.eq-tag.eteint { background: var(--gris-bg); color: var(--text-faint); }
.eq-tag.eteint .point { background: var(--text-faint); }
/* La colonne role : le tag (plein ou deroulant) centre dans sa cellule, sous
   son en-tete centre lui aussi (`.centre`) - un seul axe pour les deux. */
.eq-role { display: flex; justify-content: center; align-items: center; min-width: 0; }
.eq-rang > .centre { justify-self: center; text-align: center; }

/* Pas d'`overflow: hidden` ici : il coupait le menu deroulant des roles,
   qui deborde sous sa ligne. Les coins restent arrondis par le bord, et la
   derniere ligne reprend le rayon pour que son survol n'en sorte pas. */
.eq-table { background: var(--bg-card); border: 1px solid var(--border-carte);
  border-radius: var(--rayon-carte); }
/* minmax(0, …) : un long e-mail s'ellipse au lieu d'elargir sa colonne. */
.eq-rang { display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.1fr) 5.5rem;
  column-gap: 1rem; align-items: center; padding: .85rem 1.4rem; }
.eq-table > .entete { padding-block: .75rem; background: var(--gris-bg);
  border-radius: var(--rayon-carte) var(--rayon-carte) 0 0; border-bottom: 1px solid var(--filet);
  font-size: var(--t-libelle); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--vert-fonce); }
.eq-table > .rang { border-bottom: 1px solid var(--filet); font-size: var(--t-dense); }
.eq-table > .rang:last-child { border-bottom: 0; border-radius: 0 0 var(--rayon-carte) var(--rayon-carte); }
.eq-table > .rang:hover { background: var(--bg-survol); }
.eq-qui { display: flex; align-items: center; gap: .7rem; min-width: 0; }
/* Centrer une seule majuscule dans un rond ne se fait pas en centrant sa
   boite de ligne : celle-ci suit les metriques de la police (ascendant,
   descendant), pas la hauteur du glyphe. Une capitale n'occupe que du
   pied a la hauteur de capitale, si bien qu'elle se lit toujours un peu
   haute - d'autant plus que la police est genereuse en jambages.
   `text-box` rogne la boite AU GLYPHE, et le centrage porte alors sur ce
   qu'on voit. La ou il n'existe pas encore, le decalage optique repli
   fait le meme travail a 1 px pres. */
.eq-pastille { display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 999px; flex: none; line-height: 1; background: var(--vert);
  color: var(--sur-couleur); font-weight: 700; font-size: var(--t-dense); }
/* Centrage flex pur : mesure dans Chrome, la lettre tombe a 0,5 px du centre. */
.eq-pastille .initiale { font: inherit; display: block; line-height: 1; }
.eq-pastille.calme { background: var(--marine); }
/* `.calme::before` (point d'etat global) s'invitait ici : invisible, il prenait
   13 px dans le flex et poussait la lettre de 6,7 px a droite. */
.eq-pastille.calme::before, .eq-tag.calme::before { content: none; }
.eq-pastille.eteinte { background: var(--text-faint); }
/* Nom au-dessus, e-mail dessous : a la suite, l'adresse se lisait comme la
   fin du nom et la ligne n'avait plus de repere. */
.eq-ident { min-width: 0; }
.eq-qui .nom { display: block; font-weight: 600; color: var(--text); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.eq-qui .nom .eq-tag { margin-left: .45rem; padding: .05rem .45rem; vertical-align: 1px; }
.eq-qui .mail { display: block; margin-top: .1rem; font-size: var(--t-libelle); color: var(--text-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq-rang .quand { color: var(--text-muted); }
.eq-rang .gestes { display: flex; gap: .35rem; justify-content: flex-end; }
/* LE MENU DE CHOIX, a la place d'une liste deroulante du systeme.
   Une <select> native ouvre sa liste avec les couleurs, la police et la
   selection bleue du systeme d'exploitation : aucune feuille de style ne
   les atteint, et au milieu d'un ecran tenu au cordeau elle se lit comme
   un morceau d'une autre application. Ici tout est du HTML de la
   solution, donc a ses couleurs et a ses distances.
   Reutilisable : la tete prend la forme du contexte (capsule de role dans
   le tableau, champ dans un formulaire), la liste est la meme partout. */
.menu-choix { position: relative; display: inline-block; max-width: 100%; }
.menu-choix-tete { display: inline-flex; align-items: center; gap: .4rem;
  font: inherit; font-size: var(--t-libelle); font-weight: 700;
  margin: 0; padding: .22rem .55rem .22rem .7rem; border-radius: 999px;
  border: 1px solid transparent; background: var(--marine-fond);
  color: var(--marine); cursor: pointer; max-width: 100%; text-align: left; }
.menu-choix-tete .libelle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-choix-tete svg { flex: none; color: var(--text-faint); }
.menu-choix-tete:hover { border-color: var(--marine); }
.menu-choix-tete[aria-expanded="true"] { border-color: var(--marine); }
/* Dans un formulaire, la tete prend la forme d'un champ : c'en est un. */
.eq-ajout .menu-choix, .eq-ajout .menu-choix-tete { width: 100%; }
.eq-ajout .menu-choix-tete { justify-content: space-between; border-radius: 7px;
  border-color: var(--border-champ); background: var(--bg-card); color: var(--text);
  font-weight: 400; font-size: var(--t-corps); padding: .45rem .6rem; }
/* Le libelle du champ n'est plus un <label> : il ne pointe plus vers un
   champ de saisie, mais vers un bouton, par `aria-labelledby`. */
.eq-ajout .etiquette-champ { display: block; font-size: var(--t-libelle); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); margin-bottom: .3rem; }
/* La liste : une vraie carte flottante, coins doux et ombre portee, pas
   une boite a bord sec. L'option courante se dit par un fond vert pale,
   plus lisible qu'un simple gras. */
.menu-choix-liste { position: absolute; z-index: 20; top: calc(100% + .35rem); left: 0;
  min-width: 100%; width: max-content; max-width: min(18rem, 80vw);
  margin: 0; padding: .3rem; border-radius: 12px;
  background: var(--bg-card); border: 1px solid var(--border-carte);
  box-shadow: var(--ombre-flottant); }
.menu-choix-liste button { display: flex; align-items: center; gap: .5rem; width: 100%;
  margin: 0; padding: .45rem .6rem; border: 0; border-radius: 8px; background: none;
  font: inherit; font-size: var(--t-note); color: var(--text); text-align: left;
  cursor: pointer; transition: background .12s ease; }
.menu-choix-liste button:hover, .menu-choix-liste button:focus-visible {
  background: var(--bg-survol); }
.menu-choix-liste button.choisi { background: var(--vert-pale); color: var(--vert-fonce); font-weight: 700; }
.menu-choix-liste button.choisi .point { background: var(--vert); }
.menu-choix-liste button .libelle { flex: 1 1 auto; }
.menu-choix-liste button svg { flex: none; color: var(--vert); }
.menu-choix-liste .point { width: 6px; height: 6px; border-radius: 999px;
  flex: none; background: var(--marine); }

.eq-ajout { margin: 1.4rem 0 0; }
.eq-ajout > summary { list-style: none; display: inline-flex; }
.eq-ajout > summary::-webkit-details-marker { display: none; }
.eq-ajout .corps { position: relative; margin-top: .9rem; background: var(--bg-card);
  border: 1px solid var(--border-carte); border-radius: var(--rayon-carte); padding: 1.25rem 1.4rem; }
.eq-ajout .eq-fermer { position: absolute; top: .7rem; right: .7rem; width: 28px; height: 28px;
  display: grid; place-items: center; border: 0; border-radius: 8px; background: none;
  color: var(--text-faint); cursor: pointer; }
.eq-ajout .eq-fermer:hover { background: var(--bg-survol); color: var(--text); }
.eq-ajout .champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem; align-items: start; }
.eq-ajout label { display: block; font-size: var(--t-libelle); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); margin-bottom: .3rem; }
.eq-ajout input, .eq-ajout select { width: 100%; margin: 0; }
.eq-ajout .aide { display: block; margin-top: .3rem; font-size: var(--t-libelle);
  color: var(--text-faint); line-height: 1.5; }
.eq-ajout .gestes { grid-column: 1 / -1; display: flex; align-items: center;
  gap: .8rem; flex-wrap: wrap; }

/* Apres une creation : le panneau prend la place du formulaire. Le formulaire
   reapparaissait intact sous le message, si bien que rien ne disait si le
   geste etait fini. Un formulaire present est une invitation a le remplir. */
.eq-cree { margin: 1.4rem 0 0; background: var(--succes-fond);
  border: 1px solid var(--succes-trait); border-radius: var(--rayon-carte); padding: 1.25rem 1.4rem; }
.eq-cree h2 { margin: 0 0 .8rem; font-size: var(--t-section); font-weight: 700; color: var(--vert-fonce); }
.eq-cree .grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem 1.4rem; }
.eq-cree .mdp { width: 100%; box-sizing: border-box; font-family: var(--police-code);
  font-size: var(--t-corps); font-weight: 700; letter-spacing: .04em;
  background: var(--bg-card); border: 1px solid var(--vert); border-radius: 7px;
  padding: .45rem .6rem; color: var(--text); }
.eq-cree .note { margin: .4rem 0 0; font-size: var(--t-libelle); color: var(--text-muted); line-height: 1.5; }

@media (max-width: 900px) {
  .eq-rang { grid-template-columns: 1fr auto; row-gap: .5rem; }
  .eq-table > .entete { display: none; }
  .eq-rang .quand { grid-column: 1 / -1; }
  .eq-rang > .centre, .eq-role { justify-self: start; justify-content: flex-start; }
}

/* ------------------------------------------------------------------ *
 * Mes etudes : la liste, le filtre, le tableau.
 *
 * Ces 208 lignes vivaient dans le gabarit, ou elles ignoraient la
 * charte et le theme sombre. Les noms de classe et les explications
 * sont ceux d'origine : seul l'endroit a bouge, et les couleurs
 * ecrites en clair sont passees aux jetons.
 * ------------------------------------------------------------------ */


.ecran-etudes-liste .entete-biblio { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0 0 1rem; }
.ecran-etudes-liste .entete-biblio h1 { margin: 0; }
.ecran-etudes-liste .entete-biblio .compte { color: var(--text-muted); font-size: var(--t-note); margin-top: 0.15rem; }
.ecran-etudes-liste .entete-biblio .nouvelle { padding: 0.5rem 1.1rem; background: var(--primary); color: var(--sur-couleur); text-decoration: none; border-radius: 8px; font-weight: 700; font-size: var(--t-note); white-space: nowrap; }
.ecran-etudes-liste .entete-biblio .nouvelle:hover { background: var(--primary-hover); }

.ecran-etudes-liste .barre-filtres { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0 0 0.9rem; }
.ecran-etudes-liste .lien-vue { display: inline-flex; align-items: center; gap: 0.45rem; font-size: var(--t-note); font-weight: 700; color: var(--bleu); text-decoration: none; background: var(--bg-card); border: 1px solid var(--border); border-radius: 9px; padding: 0.45rem 0.9rem; }
.ecran-etudes-liste .lien-vue:hover { border-color: var(--vert); text-decoration: none; }
  
  
  
  

  .ecran-etudes-liste .bandeau-perimetre { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
    margin: 0 0 1rem; padding: 0.5rem 0.85rem; background: var(--info-fond); border: 1px solid var(--tag-trait);
    border-radius: 8px; font-size: var(--t-note); color: var(--tag-texte); }
.ecran-etudes-liste .bandeau-perimetre .a-valider { margin-left: auto; background: var(--ambre-text); color: var(--sur-couleur);
    border-radius: 999px; padding: 0.1rem 0.6rem; font-weight: 700; }

  .ecran-etudes-liste .pastilles-etat { display: flex; gap: 0.35rem; flex-wrap: wrap; margin: 0 0 1rem; }
.ecran-etudes-liste .filtre-pastille { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; font-size: var(--t-note); font-weight: 600; color: var(--text-muted); background: var(--bg-card); border: 1px solid var(--border); border-radius: 999px; padding: 0.3rem 0.7rem; cursor: pointer; }
.ecran-etudes-liste .filtre-pastille .n { font-weight: 700; background: var(--gris-bg); color: var(--text); border-radius: 999px; padding: 0.02rem 0.4rem; font-variant-numeric: tabular-nums; }
.ecran-etudes-liste .filtre-pastille[aria-pressed="true"] { background: var(--primary); border-color: var(--vert); color: var(--sur-couleur); }
.ecran-etudes-liste .filtre-pastille[aria-pressed="true"] .n { background: var(--voile-clair); color: var(--sur-couleur); }
.ecran-etudes-liste .filtre-pastille.soumise .n { background: var(--ambre-bg); color: var(--ambre-text); }
.ecran-etudes-liste .filtre-pastille.validee .n { background: var(--vert-pale); color: var(--succes); }
.ecran-etudes-liste .filtre-pastille.contractee .n { background: var(--marine-fond); color: var(--marine); }

  
  /* L'etat s'aligne A GAUCHE comme son intitule et comme la maquette :
   centre, il flottait au milieu d'une colonne large sans se caler sur rien.
   `overflow: visible` reste - c'est lui qui protege l'etiquette de la coupe
   appliquee aux libelles d'enseigne. */
.ecran-etudes-liste table.etudes td.etat { overflow: visible; text-align: left; }
  .ecran-etudes-liste a.filtre-pastille.archivees { margin-left: 0.6rem; border-style: dashed; color: var(--text-muted); text-decoration: none; }
.ecran-etudes-liste a.filtre-pastille.archivees:hover { border-color: var(--vert); color: var(--vert-fonce); text-decoration: none; }
.ecran-etudes-liste a.filtre-pastille.archivees.actif { background: var(--tag-texte); border-color: var(--tag-texte); border-style: solid; color: var(--sur-couleur); }
.ecran-etudes-liste a.filtre-pastille.archivees.actif .n { background: var(--voile-clair); color: var(--sur-couleur); }
/* Le filtre posé : une puce verte et le mot qui l'explique. Même grammaire
   que la barre de filtres, à laquelle il appartient. */
.ecran-etudes-liste .filtres-poses { display: flex; align-items: center; flex-wrap: wrap;
  gap: .5rem .7rem; margin: 0 0 .9rem; font-size: var(--t-dense); color: var(--text-muted); }
.ecran-etudes-liste .filtres-poses[hidden] { display: none; }
.ecran-etudes-liste .filtre-pose { display: inline-flex; align-items: center; gap: .45rem;
  padding: .3rem .4rem .3rem .75rem; border-radius: 999px;
  background: var(--vert-pale); color: var(--vert-fonce); font-weight: 600; }
.ecran-etudes-liste .filtre-pose b { font-weight: 600; }
.ecran-etudes-liste .filtre-pose a { display: grid; place-items: center; width: 1.15rem; height: 1.15rem;
  border-radius: 999px; color: var(--vert-fonce); font-size: var(--t-dense); line-height: 1;
  text-decoration: none; }
.ecran-etudes-liste .filtre-pose a:hover { background: var(--vert); color: var(--sur-couleur); }
.ecran-etudes-liste .filtre-pose-mot { color: var(--text-faint); }

.ecran-etudes-liste .tableau-scroll { overflow-x: auto; }
  .ecran-etudes-liste table.etudes { border-collapse: collapse; width: 100%; min-width: 1180px; table-layout: fixed; }
/* Les largeurs sont bornees et leur somme fait 100 %. Laisser la premiere
   colonne prendre tout le reste creusait un trou avant l'enseigne et tassait
   le tableau a droite ; bornee, elle repartit le vide au lieu de l'accumuler.
   La colonne « Type » vient de la maquette : elle prend sur la premiere, la
   plus large et la plus elastique. */
.ecran-etudes-liste table.etudes col.c-etude { width: 24%; }
.ecran-etudes-liste table.etudes col.c-enseigne { width: 12%; }
.ecran-etudes-liste table.etudes col.c-type { width: 11%; }
.ecran-etudes-liste table.etudes col.c-exp { width: 11%; }
.ecran-etudes-liste table.etudes col.c-avancement { width: 8%; }
.ecran-etudes-liste table.etudes col.c-surface { width: 9%; }
.ecran-etudes-liste table.etudes col.c-ca { width: 10%; }
.ecran-etudes-liste table.etudes col.c-etat { width: 15%; }
.ecran-etudes-liste table.etudes col.c-actions { width: 7%; }
.ecran-etudes-liste table.etudes td.surface { text-align: right; white-space: nowrap;
  color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ecran-etudes-liste table.etudes td.type-projet { color: var(--text-muted); }
.ecran-etudes-liste table.etudes thead th { font-size: var(--t-libelle); font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--vert-fonce); text-align: left; padding: .7rem 1rem;
    border-bottom: 1.5px solid var(--succes-trait); white-space: nowrap; }
  .ecran-etudes-liste table.etudes thead th.num { text-align: right; }
.ecran-etudes-liste table.etudes thead th.etat { text-align: left; }
.ecran-etudes-liste table.etudes tbody td { padding: .75rem 1rem;
  border-bottom: 1px solid var(--filet); vertical-align: middle; font-size: var(--t-dense); }
.ecran-etudes-liste table.etudes tbody tr:last-child td { border-bottom: 0; }
.ecran-etudes-liste table.etudes tbody tr:hover { background: var(--bg-survol); }
/* Le tableau vit DANS une carte, comme la maquette : pose a nu sur le fond de
   page, il flottait sans rien pour le tenir. */
.ecran-etudes-liste .tableau-cadre { background: var(--bg-card);
  border: 1px solid var(--border-carte); border-radius: var(--rayon-carte);
  overflow: hidden; box-shadow: var(--ombre-carte); }
.ecran-etudes-liste .etude-nom { font-weight: 700; color: var(--text); }
.ecran-etudes-liste .etude-nom a { color: inherit; text-decoration: none; }
.ecran-etudes-liste .etude-nom a:hover { text-decoration: underline; }
.ecran-etudes-liste .etude-adr { font-size: var(--t-libelle); color: var(--text-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ecran-etudes-liste .etude-chiffres { font-size: var(--t-note); color: var(--text-faint); margin-top: 0.15rem; }
  .ecran-etudes-liste table.etudes tbody td { overflow: hidden; }
/* L'enseigne en TEXTE, comme la maquette. Le pave gris en capitales pesait
   plus lourd que le nom de l'etude a cote, alors qu'il ne fait que le
   qualifier. */
.ecran-etudes-liste .ens { display: inline-block; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;
  font-size: var(--t-dense); color: var(--tag-texte); }

  .ecran-etudes-liste .exp { display: flex; align-items: center; gap: 0.45rem; min-width: 0; }
.ecran-etudes-liste .exp .nom-exp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ecran-etudes-liste .exp .av { width: 1.7rem; height: 1.7rem; border-radius: 50%; color: var(--sur-couleur); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: var(--t-petite); flex: none; }
.ecran-etudes-liste .av-c0 { background: var(--auteur-1); }
.ecran-etudes-liste .av-c1 { background: var(--auteur-2); }
.ecran-etudes-liste .av-c2 { background: var(--auteur-3); }
.ecran-etudes-liste .av-c3 { background: var(--auteur-4); }
.ecran-etudes-liste .av-c4 { background: var(--auteur-5); }
.ecran-etudes-liste .av-c5 { background: var(--auteur-6); }
.ecran-etudes-liste .sans-auteur { color: var(--text-faint); font-style: italic; font-size: var(--t-note); }


.ecran-etudes-liste .ca { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--bleu); }
  .ecran-etudes-liste .ca-sans-valeur { color: var(--text-faint); font-weight: 400; }

  

.ecran-etudes-liste td.actions { white-space: nowrap; text-align: right; }
.ecran-etudes-liste td.actions .ouvrir { color: var(--bleu); font-weight: 700; text-decoration: none; font-size: var(--t-note); }
.ecran-etudes-liste td.actions .ouvrir:hover { text-decoration: underline; }
  .ecran-etudes-liste td.actions form { display: inline; margin: 0; }
  .ecran-etudes-liste td.actions button:not(.menu-actions-declencheur):not(.action) { margin: 0 0 0 0.45rem; padding: 0.22rem 0.6rem; font-size: var(--t-note); border-radius: 6px; border: 1px solid var(--vert); background: var(--primary); color: var(--sur-couleur); cursor: pointer; }
.ecran-etudes-liste td.actions button.secondaire { background: var(--bg-card); color: var(--bleu); }
.ecran-etudes-liste td.actions button.danger { background: var(--bg-card); color: var(--danger); border-color: var(--danger-trait); }
.ecran-etudes-liste td.actions button.danger:hover { background: var(--danger-fond); border-color: var(--danger); }
.ecran-etudes-liste td.actions .wf-refus input { max-width: 7rem; width: 7rem; margin: 0 0 0 0.45rem; padding: 0.16rem 0.35rem; font-size: var(--t-note); }


  

.ecran-etudes-liste .aucun-resultat { color: var(--text-muted); font-style: italic; margin-top: 0.8rem; }
.ecran-etudes-liste .legende-bas { margin-top: 0.9rem; font-size: var(--t-note); color: var(--text-faint); }
.ecran-etudes-liste .legende-bas b { color: var(--text-muted); }

/* ------------------------------------------------------------------ *
 * Mon compte : qui je suis, ma session, mon apparence.
 * ------------------------------------------------------------------ */
.moi-tete { display: flex; align-items: center; gap: 1.1rem; margin: 0 0 1.6rem; flex-wrap: wrap; }
.moi-pastille { display: inline-grid; place-items: center; width: 56px; height: 56px;
  flex: none; border-radius: 999px; line-height: 1; background: var(--vert);
  color: var(--sur-couleur); font-weight: 700; font-size: var(--t-affiche); }
.moi-pastille.diamart { background: var(--or); color: var(--marine); }
.moi-tete h1 { margin: 0; font-size: var(--t-page); font-weight: 700;
  letter-spacing: -.015em; color: var(--text); }
.moi-tete .sous { margin: .3rem 0 0; color: var(--text-muted); font-size: var(--t-corps); }

.moi-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1rem; align-items: start; }
.moi-carte { background: var(--bg-card); border: 1px solid var(--border-carte);
  border-radius: var(--rayon-carte); padding: 1.15rem 1.3rem; }
.moi-carte h2 { margin: 0 0 .8rem; font-size: var(--t-libelle); font-weight: 700;
  color: var(--text-faint); text-transform: uppercase; letter-spacing: .06em; }
.moi-ligne { display: flex; justify-content: space-between; gap: .75rem;
  padding: .45rem 0; border-bottom: 1px solid var(--filet); font-size: var(--t-dense); }
.moi-ligne:last-of-type { border-bottom: 0; }
.moi-ligne .k { color: var(--text-muted); }
.moi-ligne .v { font-weight: 600; color: var(--text); text-align: right; word-break: break-word; }
.moi-carte .note { margin: .9rem 0 0; font-size: var(--t-libelle);
  color: var(--text-faint); line-height: 1.5; }
.moi-carte .gestes { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .9rem; }

/* La bascule de theme. Trois etats et non deux : « Systeme » suit le reglage
   du poste, et c'est le defaut - imposer clair ou sombre a quelqu'un qui a
   deja choisi pour tout son ordinateur est une decision de trop. */
.moi-theme { display: flex; gap: .35rem; background: var(--gris-bg);
  border-radius: var(--rayon-champ); padding: .25rem; }
.moi-theme .choix-theme { flex: 1; display: inline-flex; align-items: center;
  justify-content: center; gap: .35rem; margin: 0; padding: .4rem .5rem;
  border: 0; border-radius: 7px; background: transparent; color: var(--text-muted);
  font: inherit; font-size: var(--t-libelle); font-weight: 700; cursor: pointer; }
.moi-theme .choix-theme:hover { color: var(--text); }
.moi-theme .choix-theme[aria-pressed="true"] { background: var(--bg-card);
  color: var(--vert-fonce); box-shadow: 0 1px 2px rgba(22, 35, 63, .10); }

.moi-edition { margin: 0; }
.moi-edition > summary { list-style: none; display: inline-flex; }
.moi-edition > summary::-webkit-details-marker { display: none; }
.moi-edition .champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .8rem; margin-top: .8rem; }
.moi-edition label { display: block; font-size: var(--t-libelle); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); margin-bottom: .3rem; }
.moi-edition input { width: 100%; margin: 0; }
.moi-edition .gestes { grid-column: 1 / -1; }

/* Le pied du rail devient un LIEN vers cet ecran : il montrait un nom et ne
   menait nulle part, si bien que tout ce qui concerne l'utilisateur se
   cherchait ailleurs, ou nulle part. */
a.rail-user { text-decoration: none; border-radius: var(--rayon-champ);
  padding: .25rem; margin: -.25rem; }
a.rail-user:hover { background: var(--rail-survol); }

/* ------------------------------------------------------------------ *
 * Carte du parc : la colonne des etudes a gauche, la carte a droite.
 *
 * L'ecran posait sa carte dans une boite, sous un titre, un sous-titre,
 * un bandeau et cinq pastilles de filtre : la carte commencait au bas
 * de la fenetre et la moitie de l'ecran ne servait a rien. La maquette
 * lui donne toute la hauteur, met la recherche en tete de colonne et
 * la legende a son pied.
 * ------------------------------------------------------------------ */
/* Un cadre, pas un bord a bord : la carte occupait tout le viewport sans
   marge, collee aux quatre bords de la fenetre - ce qui se lit comme un
   debordement meme quand rien ne deborde vraiment. Le cadre blanc, arrondi
   et ombre la pose comme une carte de plus dans l'appli, avec la couleur
   de page tout autour. */
.ecran-carte-du-parc .plan { flex: 1; display: flex; min-height: 0; gap: 1rem;
  padding: 1rem; box-sizing: border-box; }

.ecran-carte-du-parc .rail { width: 22rem; flex: none; display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--rayon-carte);
  box-shadow: var(--shadow-card); overflow: hidden; min-height: 0; }
.ecran-carte-du-parc .rail-chercher { display: flex; align-items: center; gap: .5rem;
  flex: none; padding: .85rem 1rem; border-bottom: 1px solid var(--border); }
.ecran-carte-du-parc .rail-chercher .champ { position: relative; flex: 1 1 auto; min-width: 0; }
.ecran-carte-du-parc .rail-chercher svg { position: absolute; left: .7rem; top: 50%;
  transform: translateY(-50%); color: var(--text-faint); pointer-events: none; }
/* Le geste de creation, en vert plein : c'est l'action, pas un reglage. */
.ecran-carte-du-parc .geste-creer { background: var(--primary); border-color: var(--vert);
  color: var(--sur-couleur); box-shadow: var(--ombre-bouton); }
.ecran-carte-du-parc .geste-creer:hover { background: var(--primary-hover);
  border-color: var(--primary-hover); color: var(--sur-couleur); }
.ecran-carte-du-parc .rail-chercher input { width: 100%; margin: 0; box-sizing: border-box;
  padding: .5rem .75rem .5rem 2.1rem; font-size: var(--t-dense);
  border: 1px solid var(--border-champ); border-radius: var(--rayon-champ); }
.ecran-carte-du-parc .rail-chercher input:focus { outline: 0; border-color: var(--vert);
  box-shadow: 0 0 0 3px var(--vert-pale); }

.ecran-carte-du-parc #rail-etudes { flex: 1; overflow-y: auto; min-height: 0;
  list-style: none; margin: 0; padding: .65rem .75rem;
  display: flex; flex-direction: column; gap: .5rem; }
.ecran-carte-du-parc #rail-etudes li { margin: 0; }
/* Une CARTE par etude, et non une ligne : la maquette y met le nom, le lieu,
   l'etat et le CA - quatre faits qu'une ligne unique tasserait. */
.ecran-carte-du-parc #rail-etudes a { display: block; padding: .7rem .85rem;
  border: 1px solid var(--border); border-radius: 12px; text-decoration: none;
  color: inherit; transition: border-color .12s ease, background .12s ease; }
.ecran-carte-du-parc #rail-etudes a:hover,
.ecran-carte-du-parc #rail-etudes li.actif a { border-color: var(--vert); background: var(--bg-survol); }
.ecran-carte-du-parc #rail-etudes .tete { display: flex; align-items: center;
  justify-content: space-between; gap: .5rem; }
.ecran-carte-du-parc #rail-etudes .nom { font-size: var(--t-dense); font-weight: 600;
  color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ecran-carte-du-parc #rail-etudes .etat-point { width: 10px; height: 10px; flex: none;
  border-radius: 999px; background: var(--text-faint); }
.ecran-carte-du-parc #rail-etudes .etat-point.a-valider { background: var(--ambre); }
.ecran-carte-du-parc #rail-etudes .etat-point.validee { background: var(--vert); }
.ecran-carte-du-parc #rail-etudes .etat-point.contractee { background: var(--marine); }
.ecran-carte-du-parc #rail-etudes .ou { display: block; margin-top: 2px;
  font-size: var(--t-libelle); color: var(--text-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ecran-carte-du-parc #rail-etudes .bas { display: flex; align-items: center;
  justify-content: space-between; gap: .5rem; margin-top: .45rem; }
.ecran-carte-du-parc #rail-etudes .val { font-size: var(--t-dense); font-weight: 600;
  color: var(--tag-texte); font-variant-numeric: tabular-nums; }
.ecran-carte-du-parc .vide-rail { padding: 1.5rem 1rem; text-align: center;
  color: var(--text-faint); font-size: var(--t-dense); font-style: italic; }

/* La legende au PIED de la colonne. Flottante sur la carte, elle recouvrait
   le territoire qu'elle explique. */
.ecran-carte-du-parc .rail-legende { flex: none; display: flex; flex-wrap: nowrap; gap: .1rem .2rem;
  padding: .6rem .5rem; border-top: 1px solid var(--border); overflow-x: auto;
  font-size: var(--t-libelle); color: var(--text-muted); }
.ecran-carte-du-parc .rail-legende span { display: inline-flex; align-items: center; gap: .35rem; }
/* Chaque etat de la legende est un bouton-filtre : neutre au repos, vert
   pale quand il est le filtre actif. */
.ecran-carte-du-parc .rail-legende .legende-filtre { display: inline-flex; align-items: center; gap: .25rem;
  flex: none; white-space: nowrap; border: 0; margin: 0; padding: .12rem .3rem; border-radius: 999px;
  background: none; font: inherit; font-size: var(--t-libelle); color: var(--text-muted); cursor: pointer;
  transition: background .12s ease; }
.ecran-carte-du-parc .rail-legende .legende-filtre:hover { background: var(--bg-survol); }
.ecran-carte-du-parc .rail-legende .legende-filtre.actif { background: var(--vert-pale); color: var(--vert-fonce); }
.ecran-carte-du-parc .rail-legende .legende-filtre.actif b { color: var(--vert-fonce); }
.ecran-carte-du-parc .rail-legende b { color: var(--text); font-variant-numeric: tabular-nums; }
.ecran-carte-du-parc .rail-legende .puce { width: 9px; height: 9px; border-radius: 999px;
  background: var(--bg-card); border: 2px solid var(--marine); box-sizing: border-box; flex: none; }
.ecran-carte-du-parc .rail-legende .puce.a-valider, .ecran-carte-du-parc .rail-legende .puce.validee,
.ecran-carte-du-parc .rail-legende .puce.contractee { border: 0; }
.ecran-carte-du-parc .rail-legende .puce.a-valider { background: var(--ambre); }
.ecran-carte-du-parc .rail-legende .puce.validee { background: var(--vert); }
.ecran-carte-du-parc .rail-legende .puce.contractee { background: var(--marine); }

.ecran-carte-du-parc .carte-cadre { flex: 1; position: relative; min-width: 0;
  border: 1px solid var(--border); border-radius: var(--rayon-carte);
  box-shadow: var(--shadow-card); overflow: hidden; }
.ecran-carte-du-parc #carte-biblio { position: absolute; inset: 0; }

/* Les commandes posees sur la carte, au geste de Smappen : un bouton
   CARRE en haut a gauche, le clic ouvre un panneau pose dessous. Le
   survol se declenchait tout seul et lachait le volet en chemin. */
:is(.ecran-carte-du-parc, .ecran-performance) .controles-carte { position: absolute; bottom: .85rem; left: .85rem; z-index: 3; }
:is(.ecran-carte-du-parc, .ecran-performance) .controles-carte .chef { position: relative; width: 58px; height: 58px;
  border: 2px solid var(--border-carte); border-radius: 12px; padding: 0; overflow: hidden;
  background-size: cover; background-position: center; background-color: var(--bg-card);
  box-shadow: var(--ombre-flottant); color: var(--vert); cursor: pointer; }
:is(.ecran-carte-du-parc, .ecran-performance) .controles-carte .chef .mini-couches { position: absolute; right: 2px; bottom: 2px;
  width: 18px; height: 18px; border-radius: 6px; background: var(--bg-card); color: var(--vert);
  display: grid; place-items: center; box-shadow: var(--ombre-carte); }
:is(.ecran-carte-du-parc, .ecran-performance) .controles-carte .chef:hover { border-color: var(--vert); }
:is(.ecran-carte-du-parc, .ecran-performance) .controles-carte.ouvert .chef { border-color: var(--vert); background: var(--vert-pale); }
/* Le panneau : une carte blanche sous le bouton, qui GLISSE en s'ouvrant. */
:is(.ecran-carte-du-parc, .ecran-performance) .controles-carte .volet { position: absolute; bottom: calc(100% + 8px); left: 0;
  background: var(--bg-card); border: 1px solid var(--border-carte); border-radius: 14px;
  box-shadow: var(--ombre-flottant); padding: .8rem .9rem .7rem;
  opacity: 0; transform: translateY(6px); visibility: hidden; pointer-events: none;
  transition: opacity .16s ease, transform .2s ease, visibility 0s linear .2s; }
:is(.ecran-carte-du-parc, .ecran-performance) .controles-carte.ouvert .volet { opacity: 1; transform: none;
  visibility: visible; pointer-events: auto; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { :is(.ecran-carte-du-parc, .ecran-performance) .controles-carte .volet { transition: none; } }
:is(.ecran-carte-du-parc, .ecran-performance) .volet-titre { margin: 0 0 .5rem; font-size: var(--t-libelle); font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); white-space: nowrap; }
/* Les tuiles de fond au MEME gabarit, sur une ligne : Atténué, Plan, Satellite.
   UNE GRILLE, et non trois boites empilees chacune de son cote : en flex,
   la hauteur de chaque bouton se deduisait de son contenu, si bien qu'une
   police pas encore chargee ou une vignette pas encore arrivee decalait
   une tuile par rapport aux autres - et le premier clic, qui provoque un
   nouveau calcul de mise en page, les realignait. Une grille a deux
   rangees fixes ne peut pas bouger : la vignette occupe 48 px, le libelle
   sa ligne, pour les trois, avant tout chargement. */
:is(.ecran-carte-du-parc, .ecran-performance) .fond-carte-choix { display: grid; grid-auto-flow: column;
  grid-auto-columns: 56px; gap: .6rem; align-items: start; justify-content: start; }
/* LA CAUSE DU DECALAGE, mesuree et non supposee : `margin: 0`.
   Le socle donne l'allure du bouton primaire a tout `button` SANS CLASSE
   (`button:where(:not([class]))`), dont un `margin-top: 1.25rem`. La tuile
   active portait `class="actif"`, les deux autres n'avaient aucune classe :
   elles prenaient donc 20 px de marge que la premiere n'avait pas, et le
   decalage SUIVAIT la tuile active d'un clic a l'autre. Cette regle
   annulait deja le fond et les marges interieures, jamais la marge
   exterieure - la seule des trois qui ne se voit pas tant qu'elle ne
   deplace rien.
   Depuis, chaque tuile porte `tuile-fond` : la mise en forme ne depend plus
   de l'absence de classe, qui bouge avec l'etat. `margin: 0` reste, comme
   ceinture.

   Les rangees restent en PIXELS : la vignette a une hauteur exacte, le
   libelle aussi, la grille ne s'etire pas (`align-content: start`), et le
   bouton se deduit des deux plutot que d'etre contraint par-dessus. */
:is(.ecran-carte-du-parc, .ecran-performance) .fond-carte-choix button { display: grid;
  grid-template-rows: 48px 18px; grid-auto-rows: 0; align-content: start;
  justify-items: center; align-items: center; overflow: hidden;
  gap: 4px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  width: 56px; }
:is(.ecran-carte-du-parc, .ecran-performance) .fond-carte-choix .etiq { display: block; width: 100%;
  height: 18px; text-align: center; line-height: 18px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(.ecran-carte-du-parc, .ecran-performance) .fond-carte-choix .vignette { box-sizing: border-box; position: relative;
  width: 48px; height: 48px; min-height: 48px; max-height: 48px; border-radius: 10px;
  flex: none; overflow: hidden;
  background-size: cover; background-position: center;
  border: 2px solid var(--border-carte); display: grid; place-items: center; }
:is(.ecran-carte-du-parc, .ecran-performance) .fond-carte-choix .etiq { font-size: var(--t-libelle); font-weight: 600;
  color: var(--text-muted); }
:is(.ecran-carte-du-parc, .ecran-performance) .fond-carte-choix button:hover .vignette { border-color: var(--vert); }
:is(.ecran-carte-du-parc, .ecran-performance) .fond-carte-choix button.actif .vignette { border-color: var(--vert); }
/* La tuile choisie se signale par sa COULEUR, pas par sa graisse : passer
   le libelle en gras change de fonte, donc de metrique, et sa colonne se
   decalait des trois pixels du gras tant que la fonte n'etait pas la. Une
   couleur ne coute aucun pixel. */
:is(.ecran-carte-du-parc, .ecran-performance) .fond-carte-choix button.actif .etiq { color: var(--vert-fonce); }
.ecran-carte-du-parc .carte-chargement { position: absolute; inset: 0; z-index: 3;
  display: grid; place-items: center; background: var(--bg-page);
  color: var(--text-muted); font-size: var(--t-dense); }
/* Information durable du parc, placée dans la liste plutôt que sur la carte. */
.ecran-carte-du-parc .parc-localisation { margin: .5rem .8rem; border: 1px solid var(--border);
  border-radius: var(--rayon-champ); background: var(--bg-card); font-size: var(--t-libelle); flex-shrink: 0; }
.parc-localisation summary { display: flex; align-items: center; gap: .6rem; padding: .65rem .75rem;
  cursor: pointer; list-style: none; color: var(--text-muted); }
.parc-localisation summary::-webkit-details-marker { display: none; }
.parc-localisation summary > svg { margin-left: auto; transition: transform .18s ease; }
.parc-localisation[open] summary > svg { transform: rotate(90deg); }
.localisation-nombre { display: grid; place-items: center; min-width: 1.6rem; height: 1.6rem;
  border-radius: 6px; background: var(--bg-survol); color: var(--text); font-weight: 600; }
.localisation-contenu { padding: 0 .75rem .7rem; }
.localisation-contenu p { margin: .2rem 0 .65rem; color: var(--text-muted); line-height: 1.6; }
.localisation-contenu ul { padding: 0; margin: 0; list-style: none; max-height: 10rem; overflow: auto; }
.localisation-contenu a { display: flex; justify-content: space-between; gap: .5rem;
  padding: .45rem 0; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.localisation-contenu a:hover { color: var(--vert-fonce); }
.localisation-contenu a span { color: var(--text-muted); }

@media (max-width: 900px) {
  .ecran-carte-du-parc .plan { flex-direction: column; }
  .ecran-carte-du-parc .rail { width: auto; border-right: 0; border-bottom: 1px solid var(--border); max-height: 45%; }
}

/* ------------------------------------------------------------------ *
 * Pipeline : les etudes par etape, glissables d'une colonne a l'autre.
 *
 * Sorti du gabarit : un ecran qui porte son style ignore la charte
 * et le theme sombre. Les noms de classe et les explications sont
 * ceux d'origine ; seule la portee `.ecran-pipeline` est neuve.
 * ------------------------------------------------------------------ */
.ecran-pipeline .pipeline-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0 0 1rem; }
.ecran-pipeline .onglets-vue { display: flex; gap: 0.3rem; border-bottom: 1px solid var(--border); margin: 0.8rem 0 0.6rem; }
.ecran-pipeline .onglets-vue a { padding: 0.45rem 0.9rem; text-decoration: none; color: var(--text-muted); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ecran-pipeline .onglets-vue a.actif { color: var(--vert-fonce); border-bottom-color: var(--vert); }
.ecran-pipeline .onglets-vue .compte { font-variant-numeric: tabular-nums; color: var(--text-faint); font-weight: 700; margin-left: 0.3rem; }

/* Les colonnes n'ont plus de FOND ni de cadre : la maquette pose l'en-tete
   au-dessus, en clair, et laisse les cartes flotter sur la page. La colonne
   encadree faisait de chaque etat une boite, et quatre boites cote a cote
   pesaient plus que les etudes qu'elles contenaient. */
.ecran-pipeline .pipeline { display: flex; gap: 1.1rem; overflow-x: auto;
  padding-bottom: .75rem; align-items: flex-start; }
.ecran-pipeline .pipeline-col { flex: 1 1 0; min-width: 15rem;
  transition: background .12s ease; }
.ecran-pipeline .pipeline-col-entete { display: flex; align-items: center; gap: .5rem;
  font-size: var(--t-libelle); font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.ecran-pipeline .pipeline-col-entete .puce { width: 8px; height: 8px; border-radius: 999px; flex: none; }
.ecran-pipeline .pipeline-col-entete strong { flex: 1 1 auto; font-weight: 700; }
.ecran-pipeline .pipeline-col-entete .n { font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums; letter-spacing: 0; }
.ecran-pipeline .pipeline-col-total { font-size: var(--t-libelle);
  color: var(--text-faint); font-variant-numeric: tabular-nums; }

.ecran-pipeline .pipeline-cartes { display: flex; flex-direction: column; gap: .6rem;
  min-height: 4rem; padding: .15rem; border-radius: 12px; }
/* La colonne visee pendant un glisser : c'est la SEULE fois ou elle se
   dessine, et c'est justement le moment ou il faut savoir ou l'on lache. */

.ecran-pipeline .pipeline-carte { background: var(--bg-card); border: 1px solid var(--border-carte);
  border-radius: 12px; padding: .8rem .9rem; cursor: grab;
  transition: border-color .12s ease, box-shadow .12s ease; }
.ecran-pipeline .pipeline-carte:hover { border-color: var(--vert); }
.ecran-pipeline .pipeline-carte.en-glisse { opacity: .45; cursor: grabbing; }
.ecran-pipeline .pipeline-carte-titre { display: block; text-decoration: none; color: inherit; }
.ecran-pipeline .pipeline-carte-nom { font-size: var(--t-dense); font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ecran-pipeline .pipeline-carte .meta { margin-top: 1px; font-size: var(--t-libelle);
  color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ecran-pipeline .pipeline-carte-bas { display: flex; align-items: baseline;
  justify-content: space-between; gap: .5rem; margin-top: .5rem; }
.ecran-pipeline .pipeline-carte-bas .montant { font-size: var(--t-dense); font-weight: 700;
  color: var(--text); font-variant-numeric: tabular-nums; }
.ecran-pipeline .pipeline-carte-bas .montant.vide { font-weight: 400; color: var(--text-faint); }
.ecran-pipeline .pipeline-carte-bas .quand { font-size: var(--t-libelle); color: var(--text-faint); }
.ecran-pipeline .pipeline-vide { padding: 1.4rem .25rem; text-align: center;
  font-size: var(--t-libelle); color: var(--text-faint); }
.ecran-pipeline .pipeline-jalons { display: inline-flex; gap: 0.18rem; margin-top: 0.35rem; }
.ecran-pipeline .pipeline-jalons i { width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--border); }
.ecran-pipeline .pipeline-jalons i.ok { background: var(--primary); }

  .ecran-pipeline .pipeline-actions { margin-top: 0.4rem; font-size: var(--t-note); }
.ecran-pipeline .pipeline-actions summary { cursor: pointer; color: var(--bleu); font-weight: 600; list-style: none; }
.ecran-pipeline .pipeline-actions summary::before { content: "+ "; font-weight: 700; }
.ecran-pipeline .pipeline-actions summary::-webkit-details-marker { display: none; }
.ecran-pipeline .pipeline-geste { margin-top: 0.35rem; padding-top: 0.35rem; border-top: 1px dashed var(--border); }
.ecran-pipeline .pipeline-geste .verbe { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0.15rem 0; color: var(--bleu); font: inherit; font-weight: 600; cursor: pointer; }
.ecran-pipeline .pipeline-geste .verbe:disabled { color: var(--text-faint); cursor: help; font-weight: 400; }
.ecran-pipeline .pipeline-geste .raison { color: var(--text-faint); font-size: var(--t-note); display: block; margin: 0 0 0.3rem; }
.ecran-pipeline .pipeline-geste input[type="text"] { width: 100%; margin: 0.2rem 0 0.3rem; padding: 0.25rem 0.4rem; border: 1px solid var(--border); border-radius: 5px; font-size: var(--t-note); }

  .ecran-pipeline .pipeline-col.cible-ok { background: var(--succes-fond); border-color: var(--vert); }
.ecran-pipeline .pipeline-col.cible-non { background: var(--danger-fond); border-color: var(--danger); }
.ecran-pipeline #pipeline-toast { position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%) translateY(1rem);
    background: var(--text); color: var(--sur-couleur); padding: 0.55rem 1rem; border-radius: 8px; font-size: var(--t-note);
    max-width: 26rem; text-align: center; box-shadow: 0 6px 20px var(--ombre-moyenne); z-index: 40;
    opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; }
.ecran-pipeline #pipeline-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.ecran-pipeline #pipeline-toast.ko { background: var(--danger); }


/* ------------------------------------------------------------------ *
 * Les onglets de vue, dans la barre du haut.
 *
 * Ils vivaient sous le titre de page. La maquette les pose a cote du
 * nom de l'ecran : ce ne sont pas trois ecrans mais trois regards sur
 * les memes etudes, et cette place le dit.
 * ------------------------------------------------------------------ */
.onglets-barre { display: inline-flex; align-items: center; gap: .15rem; flex: none; }
/* Détachés du nom de l'écran qui les précède dans la barre. */
.barre-ecran .onglets-barre { margin-left: 1rem; }
.onglets-barre a { display: inline-flex; align-items: center; gap: .35rem;
  padding: .35rem .8rem; border-radius: var(--rayon-champ);
  font-size: var(--t-dense); font-weight: 600; color: var(--text-muted);
  text-decoration: none; white-space: nowrap; transition: background .12s ease; }
.onglets-barre a:hover { background: var(--bg-survol); color: var(--text); }
.onglets-barre a.actif { background: var(--vert-pale); color: var(--vert-fonce); font-weight: 700; }
.onglets-barre a b { font-weight: 700; color: var(--text-faint); }
.onglets-barre a.actif b { color: var(--vert-fonce); }

/* ------------------------------------------------------------------ *
 * Un ecran PLEINE HAUTEUR : la carte occupe ce qui reste sous la barre.
 *
 * `.page` borne la lecture a une largeur confortable et respire de
 * tous cotes - ce qu'il faut pour du texte, jamais pour une carte. Un
 * ecran cartographique posait donc sa carte dans une boite au milieu
 * d'un blanc, et la moitie de la fenetre ne servait a rien.
 * ------------------------------------------------------------------ */
/* Pas de hauteur calculee : la barre du haut fait SA hauteur et la page
   prend le reste. Soustraire une constante debordait d'un ou deux pixels
   des que la barre grandissait, et l'ecran gagnait un ascenseur. */
.ecran-pleine-hauteur .main { height: 100vh; display: flex; flex-direction: column; min-height: 0; }
.ecran-pleine-hauteur .page { max-width: none; margin: 0; padding: 0;
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ecran-pleine-hauteur .page > * { min-height: 0; }

/* ------------------------------------------------------------------ *
 * Mon entreprise : le resume d'un module, sous son nom.
 *
 * Ce qu'il FAIT, et non son seul intitule. Cette phrase vivait sur les
 * cartes « Vos modules » du tableau de bord, qui repetaient le rail
 * avec un bouton de plus ; c'est le seul mot qu'elles disaient
 * d'unique, et sa place est ici, sur l'ecran du contrat.
 * ------------------------------------------------------------------ */
.ent-module .quoi { flex: 1 1 auto; min-width: 0; }
.ent-module .quoi-detail { display: block; margin-top: 1px;
  font-size: var(--t-libelle); color: var(--text-faint); line-height: 1.45; }
.ent-module .point { margin-top: .35rem; }

/* ------------------------------------------------------------------ *
 * La barre de filtres des trois vues sur les etudes.
 *
 * Elle etait suivie de DEUX rangees de commandes : cinq pastilles
 * d'etat, puis une rangee de liens d'enseigne. Trois lignes de reglages
 * avant la premiere ligne de donnees. Tout tient maintenant sur une
 * ligne, comme la maquette : chercher, filtrer, creer.
 * ------------------------------------------------------------------ */
.barre-filtres { display: flex; align-items: center; gap: .6rem;
  flex-wrap: wrap; margin: 0 0 1.1rem; }
/* Ici le CHAMP porte la boite (il occupe toute la largeur, la loupe est
   posee dessus) : le contenant rend la sienne, sans quoi les deux
   bordures s'emboitent et l'on voit un champ dans un champ. */
.barre-filtres .recherche-biblio { position: relative; flex: 1 1 14rem; max-width: 22rem;
  display: block; border: 0; background: none; padding: 0; border-radius: 0; }
.barre-filtres .recherche-biblio:focus-within { box-shadow: none; }
.barre-filtres .recherche-biblio svg { position: absolute; left: .75rem; top: 50%;
  transform: translateY(-50%); color: var(--text-faint); pointer-events: none; }
.barre-filtres .recherche-biblio input { width: 100%; box-sizing: border-box; margin: 0;
  padding: .55rem .8rem .55rem 2.25rem; font-size: var(--t-dense);
  border: 1px solid var(--border-champ); border-radius: var(--rayon-champ);
  background: var(--bg-card); color: var(--text); }
.barre-filtres .recherche-biblio input:hover { border-color: var(--vert-pale); }
.barre-filtres .recherche-biblio input:focus { outline: 0; border-color: var(--vert);
  box-shadow: 0 0 0 3px var(--vert-pale); }
.barre-filtres select { margin: 0; padding: .55rem 1.9rem .55rem .75rem;
  font-size: var(--t-dense); font-weight: 500; color: var(--tag-texte);
  background-color: var(--bg-card); border: 1px solid var(--border-champ);
  border-radius: var(--rayon-champ); cursor: pointer; max-width: 15rem;
  background-position: right .85rem center; }
.barre-filtres select:hover { border-color: var(--vert); }
.ecran-pipeline .barre-filtres .filtre-periode {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  max-width: 100%;
}
.ecran-pipeline .barre-filtres .filtre-periode select {
  width: auto;
  min-width: 7rem;
}
/* Le menu de la solution dans la barre : la tête prend la forme des champs voisins. */
.barre-filtres .menu-choix-tete { gap: .5rem; max-width: 18rem; padding: .55rem .75rem;
  font-size: var(--t-dense); font-weight: 500; color: var(--tag-texte); background: var(--bg-card);
  border: 1px solid var(--border-champ); border-radius: var(--rayon-champ); }
.barre-filtres .menu-choix-tete:is(:hover, [aria-expanded="true"]) { border-color: var(--vert); }
/* Posé au bord droit de la barre : la liste s'aligne à droite pour ne pas sortir de l'écran. */
.barre-filtres .menu-choix-liste { left: auto; right: 0; max-width: min(22rem, 90vw); max-height: 20rem; overflow-y: auto; }
.menu-choix .nombre { flex: none; font-weight: 400; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.menu-choix-liste button.choisi .nombre { color: var(--vert-fonce); }
.barre-filtres .filtre-archivees, .barre-filtres .effacer-filtres {
  font-size: var(--t-dense); font-weight: 600; color: var(--text-muted);
  text-decoration: none; padding: .5rem .8rem; border-radius: var(--rayon-champ);
  border: 1px dashed var(--border-champ); white-space: nowrap; }
.barre-filtres .filtre-archivees:hover, .barre-filtres .effacer-filtres:hover {
  border-color: var(--vert); color: var(--vert-fonce); border-style: solid; }
.barre-filtres .filtre-archivees b { color: var(--text); font-variant-numeric: tabular-nums; }
.barre-filtres .filtre-archivees.actif { background: var(--tag-texte);
  border-color: var(--tag-texte); border-style: solid; color: var(--sur-couleur); }
.barre-filtres .filtre-archivees.actif b { color: var(--sur-couleur); }
/* Le geste de creation FERME la ligne, a droite, et il est VERT : c'est
   l'action, et l'action est verte partout ailleurs dans la solution. */
.barre-filtres .nouvelle { margin-left: auto; display: inline-flex; align-items: center;
  gap: .4rem; background: var(--primary); color: var(--sur-couleur);
  font-weight: 700; font-size: var(--t-dense); text-decoration: none;
  padding: .55rem 1rem; border-radius: var(--rayon-champ);
  box-shadow: 0 2px 6px rgba(90, 168, 50, .28); white-space: nowrap; }
.barre-filtres .nouvelle:hover { background: var(--primary-hover); color: var(--sur-couleur); }

/* ------------------------------------------------------------------ *
 * LA CARTE, un seul composant pour toute la solution.
 *
 * Chaque ecran redefinissait la sienne : quatorze declarations de
 * `background + border + border-radius`, aux memes valeurs a un pixel
 * pres, qui divergeaient au premier correctif. Elles restent - un
 * renommage d'un coup serait plus risque que la dette - mais elles
 * tirent desormais leurs valeurs des memes jetons, et ce bloc dit la
 * regle.
 *
 * Au REPOS elle se pose a peine (flou 2, alpha .04) ; c'est le SURVOL
 * qui la souleve, et seulement quand elle mene quelque part. Une ombre
 * permanente et lourde fait paraitre l'ecran encombre ; une ombre au
 * survol sur un bloc qui ne se clique pas promet une action qui
 * n'existe pas.
 * ------------------------------------------------------------------ */
.carte-diamart { background: var(--bg-card); border: 1px solid var(--border-carte);
  border-radius: var(--rayon-carte); box-shadow: var(--ombre-carte); }
a.carte-diamart, .carte-diamart.cliquable { transition: box-shadow .15s ease, border-color .15s ease; }
a.carte-diamart:hover, .carte-diamart.cliquable:hover {
  box-shadow: var(--ombre-levee); border-color: var(--vert); }

/* Les cartes deja nommees prennent la meme respiration au survol. Ecrit ici
   et non chez chacune : c'est la regle du composant, pas un detail d'ecran. */
a.chiffre-cle:hover,
.ecran-carte-du-parc #rail-etudes a:hover,
.ecran-pipeline .pipeline-carte:hover,
.mod:hover { box-shadow: var(--ombre-levee); }

/* Un bloc qui ne mene NULLE PART ne bouge pas au survol : promettre une
   action qui n'existe pas coute plus qu'une carte inerte. */
.ent-carte, .moi-carte, .widget { box-shadow: var(--ombre-carte); }

/* ------------------------------------------------------------------ *
 * L'ATELIER CARTE-FIRST, et le rail d'outils pose sur la carte.
 * Portee : body.ecran-atelier.
 *
 * L'atelier tenait en trois colonnes: fiches, galerie, carte sur 46 %
 * de la largeur. La carte y etait la plus petite des trois, alors
 * qu'elle porte le travail : on y place un site, on y retouche des
 * mailles, on y lit une zone. Un outil de geomarketing dont la carte
 * occupe moins de la moitie de l'ecran fait travailler dans une
 * fenetre.
 *
 * La carte prend donc tout l'espace, et le reste flotte par-dessus :
 * l'etape a gauche, les outils a droite. Le rail d'outils ne cree
 * aucune fonction, il rassemble celles qui existaient deja, eparpillees
 * entre le bandeau lateral et le bas des fiches.
 *
 * Ces regles annulent la grille posee dans le gabarit plutot que de la
 * reecrire : un bloc d'annulation se relit d'un coup, et les arbitrages
 * de la grille restent lisibles si l'on revenait en arriere.
 * ------------------------------------------------------------------ */
:where(body.ecran-atelier) .atelier { display: block; position: relative; height: auto; flex: 1 1 auto; }
/* La chaine de hauteur : la fenetre -> .main -> .page -> l'atelier. Plus
   aucune constante : chaque barre fait sa hauteur, la carte prend le reste. */
body.ecran-atelier .main { height: 100vh; display: flex; flex-direction: column; min-height: 0; }
body.ecran-atelier .page { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  padding: 0; margin: 0; max-width: none; }
/* Le creux de 1,4 rem posé sous une barre du haut vide ne sert qu'aux pages qui défilent :
   ici il ouvrait une bande grise entre la barre et la carte. */
body.ecran-atelier .rail-topbar + .page { padding-top: 0; }
/* La grille posait un ordre ; hors grille il ne veut plus rien dire. */
:where(body.ecran-atelier) .atelier > .bandeau-vertical,
:where(body.ecran-atelier) .atelier > .panneau-etape,
:where(body.ecran-atelier) .atelier > .colonne-etape,
:where(body.ecran-atelier) .atelier > #carte-conteneur { order: 0; }

/* La carte tapisse l'atelier. Ni bord ni arrondi : elle ne borde plus
   rien, ce sont les panneaux poses dessus qui portent le relief. */
:where(body.ecran-atelier) .atelier > #carte-conteneur { position: absolute; inset: 0; border: 0;
  border-radius: 0; padding: 0; z-index: 1; }

/* Les panneaux flottants partagent une meme matiere : fond de carte,
   bord fin, angle de carte, ombre portee. Un seul jeu de valeurs, pour
   qu'ils se lisent comme une meme famille d'objets poses sur la carte. */
:where(body.ecran-atelier) .atelier > .panneau-etape,
:where(body.ecran-atelier) .atelier > .colonne-etape,
:where(body.ecran-atelier) .atelier > .bandeau-vertical {
  position: absolute; top: .875rem; bottom: .875rem; z-index: 6;
  background: var(--bg-card); border: 1px solid var(--border-carte);
  border-radius: var(--rayon-carte); box-shadow: var(--ombre-flottant);
  overflow-y: auto; overflow-x: hidden; box-sizing: border-box; }
/* Le panneau EPOUSE son contenu au lieu de tomber jusqu'en bas. Etire de
   force, il montrait trois cents pixels de blanc sous la derniere fiche -
   et ce blanc recouvrait la carte, qui est justement ce qu'on regarde a
   l'etape ou l'on place un site. Il garde un plafond : au-dela, il
   defile chez lui. */
:where(body.ecran-atelier) .atelier > .panneau-etape,
:where(body.ecran-atelier) .atelier > .colonne-etape { left: .875rem; bottom: auto;
  max-height: calc(100% - 6.5rem); width: var(--l-panneau, 24rem);
  padding: .9rem 1rem; }
/* Le bandeau se replie derriere le bouton « Couches » du rail : la carte
   reste degagee tant qu'on ne demande pas les calques. */
:where(body.ecran-atelier) .atelier > .bandeau-vertical { right: .875rem; width: var(--l-outils, 21rem);
  padding: .75rem .7rem; display: none; }
:where(body.ecran-atelier) .atelier.outils-ouverts > .bandeau-vertical { display: flex; }
/* A l'etape 1 le panneau ne s'ouvre plus tout seul - on place le site en
   cliquant la carte, et rien ne doit la recouvrir sans qu'on l'ait
   demande. Mais il reste ATTEIGNABLE depuis le rail : le fond de carte
   est justement ce qui aide a reconnaitre un site avant de le poser. */
:where(body.ecran-atelier) .atelier.sans-bandeau > .bandeau-vertical { display: none; }
:where(body.ecran-atelier) .atelier.sans-bandeau.outils-ouverts > .bandeau-vertical { display: flex; }

/* Les poignees reglent la LARGEUR d'un panneau flottant, plus la
   frontiere de deux colonnes : chacune se pose a cheval sur le bord
   qu'elle deplace. Elles avaient ete neutralisees (0x0, sans pointeur)
   quand les panneaux ont quitte la grille ; le geste manquait a des
   panneaux qui portent des tableaux plus larges qu'eux.
   La hauteur suit celle du panneau (`--h-panneau`, `--h-outils`, poses
   par le script) : une lisiere qui descendrait jusqu'en bas volerait a
   la carte les clics de placement du site. */
:where(body.ecran-atelier) .atelier > #poignee-bandeau,
:where(body.ecran-atelier) .atelier > #poignee-carte {
  position: absolute; top: .875rem; width: 10px; z-index: 7;
  padding: 0; border: 0; background: none; touch-action: none; }
:where(body.ecran-atelier) .atelier > #poignee-carte {
  left: calc(.875rem + var(--l-panneau, 24rem) - 5px);
  height: var(--h-panneau, 0px); }
/* Le bandeau d'outils n'existe a l'ecran que deplie : sa poignee non plus. */
:where(body.ecran-atelier) .atelier > #poignee-bandeau {
  right: calc(.875rem + var(--l-outils, 21rem) - 5px);
  height: var(--h-outils, 0px); display: none; }
:where(body.ecran-atelier) .atelier.outils-ouverts > #poignee-bandeau { display: block; }
/* Rien au repos : un trait permanent doublerait le bord du panneau. Le
   grip se montre au survol et pendant le glisser.
   Selecteurs par identifiant, et non `.poignee` : la mise en forme
   generique des poignees vit plus bas dans la feuille et gagnerait a
   specificite egale. */
:where(body.ecran-atelier) #poignee-bandeau::after,
:where(body.ecran-atelier) #poignee-carte::after { content: none; }
:where(body.ecran-atelier) #poignee-bandeau .grip,
:where(body.ecran-atelier) #poignee-carte .grip {
  width: 10px; height: 2.6rem; opacity: 0; transition: opacity .12s ease; }
:where(body.ecran-atelier) #poignee-bandeau:hover .grip,
:where(body.ecran-atelier) #poignee-carte:hover .grip,
:where(body.ecran-atelier) .poignee-active .grip {
  opacity: 1; border-color: var(--vert); }

/* Le rail d'outils, au geste de Smappen : des boutons CARRES separes,
   chacun sa carte blanche et son ombre, alignes en colonne. Le libelle
   sort en capsule a gauche au survol ou au focus - il ne pousse rien. */
:where(body.ecran-atelier) .rail-outils { position: absolute; top: 4rem; right: .875rem; z-index: 8;
  display: flex; flex-direction: column; gap: .5rem; align-items: flex-end; }
:where(body.ecran-atelier) .atelier.outils-ouverts .rail-outils { right: calc(var(--l-outils, 21rem) + 1.5rem); }
/* `.outil` et non `button` : le classeur est un LIEN de telechargement, et
   il doit avoir exactement la meme allure que ses voisins. Une regle posee
   sur la balise laisse le premier element d'une autre nature tout nu. */
:where(body.ecran-atelier) .rail-outils .outil { position: relative; box-sizing: border-box; width: 46px; height: 46px; margin: 0; padding: 0;
  border: 1px solid var(--border-carte); border-radius: 10px;
  background: var(--voile-carte); backdrop-filter: blur(10px);
  box-shadow: var(--ombre-levee); cursor: pointer; font: inherit;
  display: grid; place-items: center; text-decoration: none;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease, transform .12s ease; }
/* Survol : l'outil se soulève, prend le fond vert pâle, l'icône fonce. */
:where(body.ecran-atelier) .rail-outils .outil:hover { border-color: var(--vert); background: var(--vert-pale);
  box-shadow: var(--ombre-flottant); transform: translateY(-1px); }
:where(body.ecran-atelier) .rail-outils .outil:not(:disabled, .inerte):hover .pastille { color: var(--vert-fonce); }
:where(body.ecran-atelier) .rail-outils .outil:focus-visible { outline: 2px solid var(--vert-fonce); outline-offset: 2px; }
/* LE CLIC SE VOIT. Un outil qui lance un calcul de trois secondes ne
   donnait aucun signe d'avoir ete touche : on recliquait, et deux rapports
   partaient pour un seul geste. L'enfoncement est immediat, l'anneau vert
   dure le temps de l'aller-retour. */
:where(body.ecran-atelier) .rail-outils .outil:active { transform: scale(.93); }
:where(body.ecran-atelier) .rail-outils .outil.occupe { background: var(--vert-pale);
  border-color: var(--vert); box-shadow: 0 0 0 3px var(--vert-pale), var(--ombre-levee); }
:where(body.ecran-atelier) .rail-outils .outil.occupe .pastille { animation: outil-bat 1s ease-in-out infinite; }
@keyframes outil-bat { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
:where(body.ecran-atelier) .rail-outils .outil:disabled,
:where(body.ecran-atelier) .rail-outils .outil.inerte { cursor: not-allowed; opacity: .45; }
:where(body.ecran-atelier) .rail-outils .outil:disabled:hover,
:where(body.ecran-atelier) .rail-outils .outil.inerte:hover { border-color: var(--border-carte);
  background: var(--voile-carte); box-shadow: var(--ombre-levee); transform: none; }
:where(body.ecran-atelier) .rail-outils .outil:disabled .pastille,
:where(body.ecran-atelier) .rail-outils .outil.inerte .pastille { color: var(--text-faint); }
:where(body.ecran-atelier) .rail-outils .outil.actif { background: var(--vert-pale); border-color: var(--vert); }
/* `line-height: 0` : un `<a>` garde la hauteur de ligne de sa police meme
   quand il ne contient qu'un dessin, et le SVG se posait un ou deux pixels
   sous le centre. Invisible seul, evident dans une colonne de sept outils
   dont un seul est un lien. */
:where(body.ecran-atelier) .rail-outils .outil { line-height: 0; }
:where(body.ecran-atelier) .rail-outils .pastille { display: grid; place-items: center;
  line-height: 0; color: var(--vert); transition: color .15s ease; }
/* La puce de légende (`.pastille`, plus bas) imposait 0,8 rem et une marge : l'icône
   de 20 px débordait de 3,6 px vers le bas. Le rail reprend la taille de son dessin. */
body.ecran-atelier .rail-outils .outil .pastille { width: auto; height: auto; margin: 0; border-radius: 0; vertical-align: baseline; }
:where(body.ecran-atelier) .rail-outils .pastille svg { display: block; }
:where(body.ecran-atelier) .rail-outils .pastille svg { width: 1.25rem; height: 1.25rem; }
:where(body.ecran-atelier) .rail-outils .libelle-outil { position: absolute; right: calc(100% + 10px); top: 50%;
  transform: translateY(-50%) translateX(4px);
  background: var(--bg-card); color: var(--text);
  font-size: var(--t-libelle); font-weight: 500; line-height: 1.4;
  white-space: normal; width: max-content; max-width: min(240px, calc(100vw - 100px));
  text-align: left; border: 1px solid var(--border-carte); box-shadow: var(--ombre-levee);
  padding: .45rem .65rem; border-radius: 8px; pointer-events: none;
  opacity: 0; transition: opacity .12s ease, transform .15s ease; }
:where(body.ecran-atelier) .rail-outils .outil:hover .libelle-outil,
:where(body.ecran-atelier) .rail-outils .outil:focus-visible .libelle-outil { opacity: 1; transform: translateY(-50%); }
@media (prefers-reduced-motion: reduce) {
  :where(body.ecran-atelier) .rail-outils .libelle-outil { transition: none; }
  :where(body.ecran-atelier) .rail-outils .outil:active { transform: none; }
  :where(body.ecran-atelier) .rail-outils .outil.occupe .pastille { animation: none; }
}



/* ------------------------------------------------------------------ *
 * LE FIL DES ETAPES de l'atelier.
 *
 * Il etait fait de quatre pastilles encadrees, chacune tirant sur la
 * largeur, avec des emoji et des glyphes en guise de pictogrammes :
 * cadenas, cible, drapeau, signe euro. Un emoji ne suit ni la charte ni
 * le theme, et se dessine differemment sur chaque systeme.
 *
 * A la place, la forme de la maquette : une pastille ronde qui porte le
 * NUMERO de l'etape, et qui devient une coche quand l'etape est faite.
 * Le fil se centre au lieu de s'etirer - quatre etapes etalees sur
 * 1500 px se lisent comme quatre onglets sans rapport entre eux.
 * ------------------------------------------------------------------ */
.rail-etapes { display: flex; align-items: center; justify-content: center;
  gap: 2px; width: 100%; min-width: 0; }
.rail-etapes .retour { text-decoration: none; font-size: var(--t-libelle);
  margin-right: .2rem; flex: 0 0 auto; color: var(--text-muted); }
.rail-etapes .retour:hover { color: var(--vert-fonce); }
/* Le trait ne relie plus que visuellement : court et fin, il dit la
   suite sans peser autant qu'une etape. */
.rail-etapes .trait { width: 10px; height: 1px; background: var(--border);
  border: 0; border-radius: 1px; flex: 0 0 auto; transition: background .18s; }
.rail-etapes .trait.franchi { background: var(--vert); }

.rail-etapes .etape-puce { display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .6rem; border: 0; background: none; border-radius: var(--rayon-bouton);
  cursor: pointer; font: inherit; white-space: nowrap; flex: 0 1 auto; min-width: 0;
  margin: 0; box-shadow: none; transition: background .12s ease; }
.rail-etapes .etape-puce:not(:disabled):hover { background: var(--bg-survol); }
.rail-etapes .etape-puce .puce { width: 1.25rem; height: 1.25rem; border-radius: 999px;
  border: 1.3px solid var(--border-champ); background: var(--bg-card);
  color: var(--text-muted); font-size: var(--t-libelle); font-weight: 700;
  font-variant-numeric: tabular-nums; display: flex; align-items: center;
  justify-content: center; flex: none; transition: background .15s, border-color .15s; }
.rail-etapes .etape-puce .puce svg { width: .7rem; height: .7rem; }
.rail-etapes .etape-puce .mot { font-size: var(--t-dense); font-weight: 600;
  color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; }

/* L'etape COURANTE : la seule sur fond plein, la seule dont la pastille
   s'inverse. Une seule chose peut etre « ici ». */
.rail-etapes .etape-puce.active { background: var(--vert-pale); }
.rail-etapes .etape-puce.active .puce { background: var(--vert);
  border-color: var(--vert); color: var(--sur-couleur); }
.rail-etapes .etape-puce.active .mot { color: var(--vert-fonce); }
/* L'etape FAITE : la coche verte, et le libelle qui reprend sa couleur
   de texte - c'est un acquis, pas un appel. */
.rail-etapes .etape-puce.franchie .puce { border-color: var(--vert); color: var(--vert); }
.rail-etapes .etape-puce.franchie .mot { color: var(--text); }
/* L'etape VERROUILLEE : le trait discontinu dit « pas encore », sans
   cadenas dessine. Elle reste lisible : trop pale, elle passerait pour
   un defaut d'affichage. */
/* L'etape A REFAIRE : faite, mais sur un site qui a change depuis. */
.rail-etapes .etape-puce.perimee .puce { border-color: var(--ambre); background: var(--ambre); color: #fff; }
.rail-etapes .etape-puce .puce .alerte { font-size: .72rem; font-weight: 800; line-height: 1; }
.rail-etapes .etape-puce.verrou { cursor: not-allowed; }
.rail-etapes .etape-puce.verrou .puce { border-style: dashed; color: var(--text-faint); }
.rail-etapes .etape-puce.verrou .mot { color: var(--text-faint); }

/* Ecran etroit : le fil perd ses mots SAUF CELUI DE L'ETAPE COURANTE.
   Quatre libelles tronques ne valent rien, mais quatre numeros nus non
   plus : on ne savait plus ou l'on etait, alors que c'est la seule chose
   que ce fil existe pour dire. L'etape courante garde son nom, les autres
   se reduisent a leur numero - qui reste cliquable, et porte son libelle
   en infobulle. */
@media (max-width: 900px) {
  .rail-etapes .etape-puce:not(.active) .mot { display: none; }
  .rail-etapes .trait { width: 6px; }
}

/* ------------------------------------------------------------------ *
 * LA BARRE D'ASSISTANCE, posee en bas de la carte.
 *
 * Le formulaire existait deja, en tete du bandeau lateral : une colonne
 * qu'il fallait d'abord ouvrir, ou personne ne le rencontrait sans le
 * chercher. Pose sur la carte, il est la quand la question se pose.
 *
 * Elle s'arrete avant le rail d'outils pour ne pas passer dessous, et
 * remonte quand le bandeau des couches s'ouvre.
 * ------------------------------------------------------------------ */
.panneau-ia { position: absolute; left: calc(var(--l-panneau, 24rem) + 1.75rem);
  right: calc(2.9rem + 1.75rem); bottom: .875rem; z-index: 7; margin: 0;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--voile-carte); backdrop-filter: blur(10px);
  border: 1px solid var(--border-carte); border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-flottant);
  transition: left .15s ease, right .2s ease, max-height .2s ease; }
.atelier.outils-ouverts .panneau-ia { right: calc(var(--l-outils, 21rem) + 2.9rem + 2.4rem); }
/* Panneau d'etape replie : l'assistant reprend la largeur laissee libre.
   Il ne repasse a gauche que si le panneau est REPLIE : cale sur l'etape,
   il recouvrait le formulaire qu'on est en train de remplir. */
.atelier.panneau-plie .panneau-ia { left: .875rem; }
/* Sous 900 px, le panneau et le rail mangent toute la largeur : les bornes
   `left` et `right` se croisent, la largeur devient negative et le panneau
   disparait. Il repasse alors sur toute la largeur de la carte. */
@media (max-width: 900px) {
  .atelier .panneau-ia,
  .atelier.outils-ouverts .panneau-ia { left: .875rem; right: .875rem; }
}

/* Conversation : mouvements courts et couleurs de la charte. */
.panneau-ia .ia-bulle { overflow-wrap: anywhere; line-height: 1.6; }
.panneau-ia .ia-champ { resize: vertical; max-height: 8rem; line-height: 1.5; }
.panneau-ia .ia-tour { flex-shrink: 0; }
.panneau-ia .ia-erreur .ia-bulle { border-color: var(--alerte-trait); background: var(--alerte-fond); }
.panneau-ia .ia-points { display: inline-flex; gap: 4px; margin-left: .6rem; }
.panneau-ia .ia-points i { width: 5px; height: 5px; border-radius: 50%; background: var(--vert); animation: ia-attente 1.2s ease-in-out infinite; }
.panneau-ia .ia-points i:nth-child(2) { animation-delay: .15s; }
.panneau-ia .ia-points i:nth-child(3) { animation-delay: .3s; }
.panneau-ia .ia-arreter[hidden] { display: none; }
.panneau-ia .ia-suggestions button:disabled { opacity: .5; cursor: wait; }
.panneau-ia .ia-geste:focus-visible, .panneau-ia .ia-envoyer:focus-visible,
.panneau-ia .ia-suggestions button:focus-visible { outline: 2px solid var(--vert); outline-offset: 3px; }
@keyframes ia-attente { 0%, 70%, 100% { transform: translateY(0); opacity: .45; } 35% { transform: translateY(-3px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .panneau-ia .ia-points i { animation: none; }
}

/* L'EN-TETE, ou l'assistant se nomme. Un champ anonyme au bas d'une carte
   n'annonce pas ce qu'il sait faire. */
.panneau-ia .ia-tete { display: flex; align-items: center; gap: .5rem;
  padding: .75rem 1rem; border-bottom: 1px solid var(--trait-clair);
  background: var(--bg-card); }
.panneau-ia .ia-marque { display: flex; align-items: center; gap: .65rem;
  flex: 1 1 auto; min-width: 0; font-size: var(--t-dense); color: var(--text); }
.panneau-ia .ia-marque b { font-weight: 700; letter-spacing: -.01em; }
.panneau-ia .ia-icone { flex: none; margin: 0; width: 2rem; height: 2rem;
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 7px;
  background: none; color: var(--text-faint); cursor: pointer; }
.panneau-ia .ia-icone:hover { background: var(--bg-survol); color: var(--text); }
.panneau-ia .ia-icone svg { width: .85rem; height: .85rem; }

/* LE FIL. Une hauteur bornee, pas une hauteur fixe : deux tours n'ouvrent
   pas un panneau vide aux trois quarts, et vingt ne poussent pas la carte
   hors de l'ecran. Le bouton d'agrandissement double le plafond. */
.panneau-ia .ia-fil { flex: 1 1 auto; overflow-y: auto; max-height: 13rem;
  padding: 1rem; display: flex; flex-direction: column; gap: .9rem;
  scroll-behavior: smooth; }
/* Une hauteur réelle agrandit aussi une conversation encore vide. */
.panneau-ia.grand { height: min(70dvh, calc(100% - 1.75rem)); }
.panneau-ia.grand .ia-fil { min-height: 0; max-height: none; }
.panneau-ia.grand .ia-tete { flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) {
  .panneau-ia .ia-fil { scroll-behavior: auto; }
}

.panneau-ia .ia-tour { display: flex; align-items: flex-start; gap: .65rem; }
.panneau-ia .ia-tour[data-role="user"] { justify-content: flex-end; }
.panneau-ia .ia-avatar { flex: none; width: 1.5rem; height: 1.5rem; margin-top: .1rem;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--vert-pale); color: var(--vert-fonce); }
.panneau-ia .ia-bulle { max-width: min(46rem, 90%); padding: .75rem .9rem;
  border-radius: 14px; font-size: var(--t-dense); line-height: 1.65; }
.panneau-ia .ia-moi { background: var(--vert-pale); color: var(--vert-fonce);
  border-bottom-right-radius: 4px; font-weight: 600; }
.panneau-ia .ia-lui { background: var(--bg-card); border: 1px solid var(--trait-clair);
  color: var(--text); border-bottom-left-radius: 4px; }
/* Un prerequis n'est pas une reponse : c'est un renvoi vers l'etape qui
   produira la donnee. L'ambre, comme partout ou l'on attend quelque chose. */
.panneau-ia .ia-prerequis { background: var(--alerte-fond); border-color: var(--alerte-trait); }
/* La bulle rend un petit Markdown : gras, listes, paragraphes. `pre-wrap`
   a disparu avec lui - les retours a la ligne sont devenus des balises, et
   le conserver doublait chaque interligne. */
.panneau-ia .ia-texte > p { margin: 0 0 .45rem; }
.panneau-ia .ia-texte > p:last-child { margin-bottom: 0; }
.panneau-ia .ia-texte ul, .panneau-ia .ia-texte ol { margin: .3rem 0 .5rem; padding-left: 1.2rem; }
.panneau-ia .ia-texte li { margin: .15rem 0; }
.panneau-ia .ia-texte b { font-weight: 700; color: var(--text); }
.panneau-ia .ia-texte code { padding: .05rem .3rem; border-radius: 4px;
  background: var(--bg-page); font-family: var(--police-code); font-size: var(--t-libelle); }
.panneau-ia .ia-geste, .panneau-ia .lien-carte { margin: .5rem 0 0; padding: .3rem .7rem;
  border: 1px solid var(--vert); border-radius: 999px; background: var(--bg-card);
  color: var(--vert-fonce); font-size: var(--t-libelle); font-weight: 700; cursor: pointer; }
.panneau-ia .ia-geste:hover, .panneau-ia .lien-carte:hover { background: var(--vert-pale); }
.panneau-ia .ia-cout { margin: .4rem 0 0; font-size: var(--t-libelle); color: var(--text-faint); }

/* LA SAISIE. Le champ n'a NI bordure NI cadre au foyer : pose sur une
   barre qui porte deja la sienne, un second cadre vert apparaissait sous
   les doigts a chaque frappe. Le foyer se voit sur la ligne entiere, qui
   est le vrai contour du champ. */
.panneau-ia .ia-saisie { flex: none; padding: .8rem 1rem 1rem;
  border-top: 1px solid var(--trait-clair); background: var(--bg-card); }
.panneau-ia .ia-ligne { display: flex; align-items: flex-end; gap: .65rem;
  padding: .6rem .65rem .6rem .85rem; border: 1px solid var(--border-champ);
  border-radius: 16px; background: var(--bg-page);
  transition: border-color .12s ease; }
.panneau-ia .ia-ligne:focus-within { border-color: var(--vert); box-shadow: 0 0 0 3px var(--vert-pale); }
.panneau-ia .ia-champ { flex: 1 1 auto; min-width: 0; margin: 0; max-width: none;
  border: 0; background: none; padding: .3rem 0; font-size: var(--t-dense);
  color: var(--text); box-shadow: none; }
.panneau-ia .ia-champ:focus, .panneau-ia .ia-champ:focus-visible {
  outline: none; border: 0; box-shadow: none; }
.panneau-ia .ia-champ::placeholder { color: var(--text-faint); }
.panneau-ia .ia-envoyer { flex: none; margin: 0; width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 12px; background: var(--primary);
  color: var(--sur-couleur); cursor: pointer; }
.panneau-ia .ia-envoyer:hover { background: var(--primary-hover); }
.panneau-ia .ia-envoyer svg { width: .95rem; height: .95rem; }
.panneau-ia .ia-envoyer:disabled { background: var(--gris-bg); color: var(--text-faint); cursor: progress; }

/* Raccourcis de conversation. */
.panneau-ia .ia-suggestions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .65rem; }
.panneau-ia .ia-suggestions button { margin: 0; padding: .4rem .75rem;
  border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card);
  color: var(--text-muted); font-size: var(--t-libelle); font-weight: 600;
  cursor: pointer; }
.panneau-ia .ia-suggestions button:hover { border-color: var(--vert);
  color: var(--vert-fonce); background: var(--vert-pale); }

.panneau-ia .ia-identite { display: flex; flex-direction: column; gap: .15rem; }
.panneau-ia .ia-identite small { font-size: var(--t-libelle); color: var(--text-muted); font-weight: 400; }
.panneau-ia .ia-erreur .ia-bulle { display: flex; flex-direction: column; align-items: flex-start; gap: .55rem; }
.panneau-ia .ia-erreur .ia-geste { margin-top: 0; }
.panneau-ia .ia-copier { border-color: var(--trait-clair); color: var(--text-muted); font-weight: 500; }
@media (max-width: 600px) {
  .panneau-ia .ia-fil, .panneau-ia .ia-saisie { padding: .75rem; }
  .panneau-ia .ia-bulle { max-width: 95%; }
  .panneau-ia .ia-suggestions { flex-wrap: nowrap; overflow-x: auto; padding-bottom: .25rem; }
  .panneau-ia .ia-suggestions button { flex-shrink: 0; }
}

/* LE PANNEAU DE L'ATELIER : une colonne, et rien qui commande la carte.
 *
 * La grille de fiches se remplit sur deux colonnes, ce qui est juste sur
 * un ecran large. Dans le panneau flottant, large de 344 px, deux
 * colonnes donnent des lignes d'un seul mot : « Les / zones / de /
 * chalandise / sont ». Une colonne, donc, tant qu'on est dans le
 * panneau.
 *
 * Les boutons qui commandent la CARTE - retoucher les mailles, regler le
 * trace et les couleurs - restent dans le gabarit, parce que le script
 * les ecoute, mais ils ne se montrent plus ici : le rail d'outils les
 * declenche, et ce qui commande la carte se prend sur la carte. */
.atelier .panneau-etape .grille-fiches { grid-template-columns: 1fr; }
/* La boite de commandes posee sur la carte ne portait que « Retoucher » et
   « Reglages » : le rail d'outils les porte maintenant tous les deux, et
   deux boites de commandes dans le meme coin se recouvraient. Elle reste
   dans le gabarit, masquee - c'est elle que le script ecoute, et le rail
   la declenche. `visibility` et non `display` : un bouton dans un
   conteneur non rendu se clique encore, mais on ne prend pas le risque
   qu'un script mesure sa position. */
.atelier .commandes-carte { visibility: hidden; pointer-events: none;
  position: absolute; width: 0; height: 0; overflow: hidden; }
.atelier .commandes-carte * { pointer-events: none; }

/* La bascule du rail : un chevron discret dans l'entete, comme la maquette.
   Elle n'avait aucune regle a elle et prenait l'allure d'un bouton d'action
   plein - un carre vert a cote de la marque, qui se lisait comme la commande
   principale de l'ecran alors qu'elle ne fait que replier un menu. */
.bascule-rail { margin: 0 0 0 auto; padding: 0; flex: none;
  width: 1.75rem; height: 1.75rem; display: grid; place-items: center;
  border: 0; border-radius: var(--rayon-champ); background: none;
  color: var(--rail-doux); cursor: pointer; }
.bascule-rail:hover { background: var(--rail-survol); color: var(--rail-encre); }
.bascule-rail svg { width: .85rem; height: .85rem; }
/* Rail replie : la bascule descend sous la marque et se centre, pour que le
   logo reste aligne avec les icones de navigation. */
.collapsed .bascule-rail { margin: 0 auto; }

/* LES ONGLETS DE VUE, sous le titre de page.
 *
 * Dans la barre du haut ils etaient des pastilles : petites, a cote du nom
 * de l'ecran, loin du tableau qu'elles commandent. Sous le titre, elles
 * deviennent de vrais ONGLETS - soulignes, poses sur un filet qui court
 * jusqu'au bord. Un onglet dit « la page continue en dessous » ; une
 * pastille dit « un filtre de plus ». Ce sont trois points de vue sur le
 * meme parc, pas trois filtres.
 *
 * La vue Carte garde ses pastilles en barre du haut : elle n'a pas de
 * titre, la carte y prend tout l'espace. */
.entete-vues + .onglets-barre { display: flex; gap: 1.4rem; margin: 0 0 1.2rem;
  border-bottom: 1px solid var(--border); }
.entete-vues + .onglets-barre a { padding: .5rem 0 .6rem; border-radius: 0;
  background: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
  font-size: var(--t-corps); font-weight: 600; color: var(--text-muted); }
.entete-vues + .onglets-barre a:hover { background: none; color: var(--text);
  border-bottom-color: var(--border-champ); }
.entete-vues + .onglets-barre a.actif { background: none; color: var(--vert-fonce);
  border-bottom-color: var(--vert); font-weight: 700; }
/* Le compteur reste une valeur a cote du mot, pas une pastille de couleur :
   il compte, il n'alerte pas. */
.entete-vues + .onglets-barre a b { font-weight: 700; color: var(--text-faint); }
.entete-vues + .onglets-barre a.actif b { color: var(--vert-fonce); }

/* ------------------------------------------------------------------ *
 * LE CADRE D'UN TABLEAU, partout et non sur un seul ecran.
 *
 * `.tableau-cadre` n'existait qu'en version locale a la liste des
 * etudes. Ailleurs - une trentaine d'ecrans d'administration et de
 * modele de CA - c'etait un `div` sans regle : le tableau flottait a nu
 * sur le fond de page, et quand il etait plus large que la fenetre il
 * debordait par la droite au lieu de defiler. La derniere colonne, celle
 * des actions, se retrouvait coupee par le bord de l'ecran.
 *
 * Le cadre devient donc un composant du socle, avec la meme matiere que
 * les cartes de la maquette. Il defile horizontalement SAUF s'il porte
 * deja un `.tableau-scroll`, qui s'en charge : deux conteneurs qui
 * defilent l'un dans l'autre donnent deux barres et un tableau qu'on ne
 * rattrape plus.
 * ------------------------------------------------------------------ */
.tableau-cadre { background: var(--bg-card); border: 1px solid var(--border-carte);
  border-radius: var(--rayon-carte); box-shadow: var(--ombre-carte);
  overflow: hidden; }
.tableau-cadre:not(:has(> .tableau-scroll)) { overflow-x: auto; }
/* Un tableau dans son cadre prend toute la largeur offerte et ne se laisse
   pas ecraser sous une largeur ou ses colonnes deviennent illisibles. */
.tableau-cadre > table { width: 100%; min-width: 44rem; }

/* ------------------------------------------------------------------ *
 * LE LIEN, dans le texte.
 *
 * Il n'y avait AUCUNE regle : un lien sans classe prenait donc le bleu
 * souligne du navigateur. Sur les ecrans d'administration, ou les noms
 * de comptes et de secteurs sont des liens nus, cela donnait du bleu
 * systeme au milieu d'une charte verte et marine - la seule couleur de
 * l'ecran que personne n'avait choisie.
 *
 * Le vert porte l'action, ici comme ailleurs. Le soulignement n'apparait
 * qu'au survol : dans un tableau, vingt liens soulignes font vingt
 * traits qui se lisent avant les mots.
 *
 * Les liens qui portent une classe gardent la leur : ce n'est qu'un
 * defaut, pas une reprise en main.
 * ------------------------------------------------------------------ */
.page a,
.admin-entete a,
.tableau-cadre a { color: var(--vert-fonce); text-decoration: none; }
.page a:hover,
.admin-entete a:hover,
.tableau-cadre a:hover { color: var(--vert); text-decoration: underline; }
/* Un lien de tableau nomme sa ligne : il porte le poids d'un nom, pas
   celui d'un bouton. */
.tableau-cadre a { font-weight: 600; }

/* ------------------------------------------------------------------ *
 * LES COMMANDES POSEES SUR LA CARTE (zoom, boussole, plein ecran).
 *
 * Elles sortaient de MapLibre sans une seule regle : des carres blancs
 * a angle vif, cernes d'un gris que la charte n'emploie nulle part, avec
 * un pictogramme minuscule au milieu. A cote des panneaux flottants -
 * angle de carte, filet doux, ombre portee - elles se lisaient comme un
 * morceau d'une autre application colle sur la carte.
 *
 * Elles prennent donc la matiere des autres objets poses sur la carte :
 * meme angle, meme filet, meme ombre, meme verre depoli. La cible passe
 * a 34 px - un bouton de carte se vise souvent et vite, parfois en
 * deplacant la carte de l'autre main.
 *
 * `body` devant le selecteur : la feuille de MapLibre se charge apres
 * celle-ci (elle vit dans l'en-tete propre a chaque ecran de carte), et a
 * meme poids de selecteur c'est la derniere qui gagne. Sans ce cran de
 * plus ces regles ne s'appliquaient jamais - le carre restait blanc, vif,
 * plaque sur la carte sombre au theme sombre.
 * ------------------------------------------------------------------ */
body .maplibregl-ctrl-group {
  background: var(--voile-carte); backdrop-filter: blur(10px);
  border: 1px solid var(--border-carte); border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-flottant); overflow: hidden; }
body .maplibregl-ctrl-group button { width: 2.125rem; height: 2.125rem;
  background: none; border: 0; cursor: pointer; transition: background .15s ease; }
body .maplibregl-ctrl-group button:hover { background: var(--vert-pale); }
/* Les boutons dessines par l'application (zoom, cadrage) portent des SVG
   en `currentColor`, la ou MapLibre livre des images de fond. Sans
   couleur explicite, ils heritaient du blanc du socle - invisibles sur
   le verre depoli clair. */
body .maplibregl-ctrl-group button.ctrl-carte { color: var(--text); display: grid; place-items: center; }
body .maplibregl-ctrl-group button.ctrl-carte:hover { color: var(--vert-fonce); }
body .maplibregl-ctrl-group button:focus-visible { outline: 2px solid var(--vert);
  outline-offset: -2px; box-shadow: none; }
/* Le filet ne separe que DEUX boutons voisins : pose sur le dernier, il
   soulignait le groupe entier. */
body .maplibregl-ctrl-group button + button { border-top: 1px solid var(--filet); }
body .maplibregl-ctrl-group button:disabled { opacity: .4; cursor: not-allowed; }
body .maplibregl-ctrl-group button:disabled:hover { background: none; }
/* Les pictogrammes de MapLibre sont des images de fond, peintes en gris
   fonce dans le fichier livre : on ne peut pas leur donner une couleur, on
   peut les teinter. Le gris du texte au repos, le vert de la charte au
   survol - et l'inversion propre au theme sombre, sinon un icone fonce
   se noie dans le verre depoli sombre. */
body .maplibregl-ctrl-group button .maplibregl-ctrl-icon {
  filter: var(--filtre-icone-carte) grayscale(1) opacity(.65); transition: filter .15s ease; }
body .maplibregl-ctrl-group button:hover .maplibregl-ctrl-icon {
  filter: var(--filtre-icone-carte) grayscale(1) opacity(1); }

/* L'attribution : elle doit rester lisible et citee, sans peser. Elle
   prend l'angle et le voile des autres objets plutot que le rectangle
   blanc opaque par defaut. Compacte (petit ecran, IGN reduit a son i) elle
   redevient un rond plutot qu'une pilule vide. */
body .maplibregl-ctrl-attrib { background: var(--voile-carte); backdrop-filter: blur(10px);
  border: 1px solid var(--border-carte); border-radius: var(--rayon-champ); padding: .15rem .5rem; }
body .maplibregl-ctrl-attrib.maplibregl-compact { border-radius: 999px; }
body .maplibregl-ctrl-attrib a { color: var(--text-muted); }
body .maplibregl-ctrl-attrib a:hover { color: var(--vert-fonce); }
/* Le troisieme bouton du groupe de zoom (cadrer sur la zone) se distingue
   des deux autres par sa teinte - c'est un geste different du zoom, pas
   un troisieme niveau du meme geste. */
.maplibregl-ctrl-group .icone-cadrer { color: var(--vert); }

/* ------------------------------------------------------------------ *
 * LE MESSAGE DE L'APPLICATION.
 *
 * Les messages etaient habilles par des attributs `style` ecrits dans le
 * gabarit commun : angle a 4 px quand la charte en compte trois, gros
 * filet a gauche, aucun pictogramme, et un bleu systeme pour
 * l'information - la seule couleur de l'ecran qui ne veut rien dire dans
 * une charte verte et marine.
 *
 * Un message dit TROIS choses : de quelle nature il est (le
 * pictogramme et la teinte), ce qui s'est passe (le texte), et rien
 * d'autre. Quatre niveaux, quatre teintes deja definies par la charte.
 * L'information est NEUTRE : « vous avez ete deconnecte » n'est ni un
 * succes ni une alerte, et une couleur posee dessus lui donnerait un
 * ton qu'elle n'a pas.
 * ------------------------------------------------------------------ */
/* Le bandeau « worker perime » du socle : il portait son style en
   attributs, seul survivant de l'epoque d'avant la feuille centrale. */
.bandeau-alerte { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin: 0 0 1rem; padding: .6rem .9rem; border-radius: var(--rayon-champ);
  background: var(--ambre-bg); border: 1px solid var(--ambre);
  color: var(--text); font-size: var(--t-dense); }
.bandeau-alerte code { background: var(--bg-card); border-radius: 4px; padding: .05rem .4rem;
  font-family: var(--police-code); font-size: var(--t-libelle); }

.messages-app { position: fixed; top: 3.2rem; right: 0; z-index: 90;
  width: min(27rem, 100vw); max-height: calc(100dvh - 3.2rem); overflow-y: auto;
  box-sizing: border-box; margin: 0; display: flex; flex-direction: column; gap: .65rem; padding: 1rem;
  pointer-events: none; }
.messages-app .message { pointer-events: auto; }
.messages-app .message { --avis-accent: var(--text-muted); --avis-fond: var(--bg-survol);
  display: grid; grid-template-columns: 2rem minmax(0, 1fr) 2rem; align-items: start; gap: .7rem;
  padding: .9rem; margin: 0; background: var(--bg-card); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-flottant); font-size: var(--t-corps); line-height: 1.5;
  animation: avis-arrive .2s ease-out both; transition: opacity .18s ease, transform .18s ease; }
.messages-app .message.part { opacity: 0; transform: translateY(-4px); }
.messages-app .message .picto { display: grid; place-items: center; width: 2rem; height: 2rem;
  border-radius: var(--rayon-champ); color: var(--avis-accent); background: var(--avis-fond); }
.messages-app .message .picto svg { width: 18px; height: 18px; }
.message-titre { display: block; margin: .1rem 0 .2rem; font-weight: 600; }
.message-contenu { min-width: 0; overflow-wrap: anywhere; }
.message-contenu p { margin: 0; color: var(--text-muted); font-size: var(--t-dense); line-height: 1.6; }
.messages-app .fermer-message { display: grid; place-items: center; width: 2rem; height: 2rem;
  padding: 0; border: 0; border-radius: var(--rayon-champ); background: transparent;
  color: var(--text-muted); cursor: pointer; }
.messages-app .fermer-message:hover { background: var(--bg-survol); color: var(--text); }
/* LA NATURE SE LIT AVANT LE TEXTE. Le pictogramme la dit déjà ; le filet de
   la carte la confirme du coin de l'oeil, sans le gros trait de gauche qui
   faisait « bandeau d'alerte » sur une simple confirmation. */
.messages-app .message { border-color: color-mix(in srgb, var(--avis-accent) 35%, var(--border)); }
/* Le temps qui reste avant qu'une confirmation s'efface : un message qui
   disparaît sans prévenir se lit comme un message qu'on a raté. Il suit la
   minuterie de `notifications.js` (huit secondes) et se fige au survol,
   comme elle. */
.messages-app .message.succes { position: relative; overflow: hidden; }
.messages-app .message.succes::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
  background: var(--succes); opacity: .5; transform-origin: left center;
  animation: avis-minuterie 8s linear forwards;
}
.messages-app .message.succes:hover::after,
.messages-app .message.succes:focus-within::after { animation-play-state: paused; }
@keyframes avis-minuterie { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.messages-app .succes { --avis-accent: var(--succes); --avis-fond: var(--succes-fond); }
.messages-app .alerte { --avis-accent: var(--alerte); --avis-fond: var(--alerte-fond); }
.messages-app .erreur { --avis-accent: var(--danger); --avis-fond: var(--danger-fond); }
@keyframes avis-arrive { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .messages-app .message, .messages-app .message.succes::after,
  .parc-localisation summary > svg { animation: none; transition: none; }
}


/* ------------------------------------------------------------------ *
 * LE CHAMP DE SAISIE.
 *
 * Il etait decrit dans le bloc `<style>` du gabarit commun, avec la
 * bordure `--border` - le gris qui SEPARE deux lignes d'une liste, pas
 * celui qui dessine un objet. Entre ce gris et le blanc du fond l'ecart
 * tenait en trois valeurs : le champ ne se voyait pas, on devinait sa
 * place au curseur. L'angle etait a 4 px quand la charte en compte
 * trois, et rien ne se passait a la prise de focus.
 *
 * Un champ est une BOITE ou l'on ecrit : elle se voit fermee, elle
 * s'allume quand on y entre. La hauteur est commune a tous - champ,
 * liste deroulante, bouton - pour qu'une barre de filtres s'aligne sans
 * calage au pixel.
 * ------------------------------------------------------------------ */
/* Case a cocher, bouton radio, curseur : sans cette ligne, chacun se
   dessine dans le bleu du navigateur - la seule touche de bleu d'un
   ecran par ailleurs entierement vert. Deux endroits le savaient deja
   chacun de leur cote ; la regle vit ici pour tous les autres. */
input[type="checkbox"], input[type="radio"], input[type="range"] {
  accent-color: var(--primary); }
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"])),
select,
textarea {
  margin-top: .25rem; padding: .5rem .7rem; box-sizing: border-box;
  width: 100%; max-width: 26rem;
  background: var(--bg-card); color: var(--text);
  border: 1px solid var(--border-champ); border-radius: var(--rayon-champ);
  font: inherit; font-size: var(--t-corps);
  transition: border-color .15s ease, box-shadow .15s ease; }
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"])),
select { min-height: 2.375rem; }
textarea { min-height: 4.5rem; resize: vertical; }

/* La liste deroulante montrait la fleche du systeme - grise, epaisse,
   etrangere a la charte a cote d'un champ dessine au pixel pres. La fleche
   maison la remplace ; `appearance: none` retire aussi celle que certains
   navigateurs redessinent malgre l'image de fond. */
select { appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: 2.1rem;
  background-image: var(--fleche-liste); background-repeat: no-repeat;
  background-position: right .65rem center; background-size: .85rem; }
select:disabled { background-image: none; }

input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"])):hover,
textarea:hover { border-color: var(--text-faint); }
select:hover { border-color: var(--vert); }

/* La prise de focus s'ANNONCE : un anneau vert, la couleur de l'action.
   `outline` reste a zero parce que l'anneau le remplace ; sans lui, le
   champ actif ne se distinguerait plus des autres au clavier. */
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"])):focus,
select:focus, textarea:focus {
  outline: 0; border-color: var(--vert);
  box-shadow: 0 0 0 3px var(--vert-pale); }

input::placeholder, textarea::placeholder { color: var(--text-faint); }
input:disabled, select:disabled, textarea:disabled {
  background: var(--bg-survol); color: var(--text-faint); cursor: not-allowed; }
/* Un champ en faute se voit avant d'etre lu. */
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: var(--danger); }
input[aria-invalid="true"]:focus, select[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--danger-fond); }

/* Le bouton de choix d'un `<input type="file">` reste, sans cette regle,
   au gris du navigateur - le meme defaut deja corrige pour `.bouton-discret`,
   jamais etendu a ce type de champ. Son texte echappe a la feuille (rendu
   par le systeme), mais son cadre suit la charte comme n'importe quel
   bouton discret. */
input[type="file"]::file-selector-button,
input[type="file"]::-webkit-file-upload-button {
  margin-right: .7rem; padding: .4rem .8rem;
  background: var(--bg-card); color: var(--marine);
  border: 1px solid var(--border-champ); border-radius: var(--rayon-bouton);
  font: inherit; font-weight: 600; cursor: pointer; }
input[type="file"]:hover::file-selector-button,
input[type="file"]:hover::-webkit-file-upload-button {
  border-color: var(--vert); color: var(--vert-fonce); }

/* ------------------------------------------------------------------ *
 * LA LARGEUR DE LECTURE.
 *
 * La page s'etire jusqu'a 1800 px, ce qui est juste pour un TABLEAU : il
 * a des colonnes a placer, et les serrer les rend illisibles. Mais le
 * texte suivi prenait la meme largeur, et une phrase d'explication
 * courait alors sur deux cents caracteres. L'oeil perd sa ligne bien
 * avant : arrive au bout, il ne retrouve pas le debut de la suivante.
 * C'est le defaut qui fait qu'un ecran large parait mal fini sans qu'on
 * sache dire pourquoi.
 *
 * Le contenant reste large, la ligne de lecture se borne. Environ 78
 * caracteres : au-dela on se perd, en deca on hache.
 *
 * Seuls les paragraphes SANS classe sont vises. Un paragraphe qui porte
 * une classe a ete place par quelqu'un, dans une carte, une cellule ou
 * une legende ou la largeur est deja decidee.
 * ------------------------------------------------------------------ */
.page p:not([class]),
.page li:not([class]),
.page .prose { max-width: 78ch; }
/* Le sous-titre d'ecran se lit d'un trait : il est plus court, il se
   borne plus tot. */
.page-sous-titre { max-width: 68ch; }

/* ------------------------------------------------------------------ *
 * L'ETAT VIDE.
 *
 * « Aucune zone contractuelle pour l'instant » etait pose a nu au milieu
 * du fond de page sur certains ecrans, dans une carte sur d'autres, et
 * en paragraphes bruts sur le schema directeur. Trois formes pour la
 * meme situation : l'ecran n'a rien a montrer, et il doit dire pourquoi
 * et par ou commencer.
 *
 * Une forme unique, donc : une carte, un titre, une explication bornee,
 * et le geste qui en sort.
 * ------------------------------------------------------------------ */
.etat-vide { display: flex; flex-direction: column; align-items: center;
  gap: .5rem; text-align: center; padding: 3rem 1.5rem; margin: 1rem 0;
  color: var(--text-faint); background: var(--bg-card); border: 1px solid var(--border-carte);
  border-radius: var(--rayon-carte); box-shadow: var(--ombre-carte); }
.etat-vide h2, .etat-vide .titre { margin: 0; font-size: var(--t-section);
  color: var(--text); }
.etat-vide p { margin: 0; max-width: 56ch; font-size: var(--t-note); color: var(--text-muted); }
/* Nom PROPRE a l'etat vide : `.geste` seul est deja le bouton-icone de
   la charte, et le lien s'y comprimait dans un carre de 34 px. */
.etat-vide .etat-vide-action { margin-top: .4rem; }

/* L'ACTION DE LIGNE : une icone au bout de la rangee.
 *
 * La maquette pose des boutons visibles la ou l'application cachait tout
 * derriere un « ⋯ ». Le geste le plus frequent - ouvrir - ne merite pas
 * deux clics dont le premier n'apprend rien.
 *
 * Ils ne se colorent qu'au survol : vingt lignes avec vingt icones vertes
 * feraient vingt appels a l'action, et le tableau ne se lirait plus. */
.action-ligne { display: inline-grid; place-items: center; width: 2rem; height: 2rem;
  border-radius: var(--rayon-champ); border: 1px solid var(--border-carte);
  background: var(--bg-card); color: var(--text-muted); text-decoration: none;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
  vertical-align: middle; }
.action-ligne svg { width: .95rem; height: .95rem; }
.action-ligne:hover { color: var(--vert-fonce); border-color: var(--vert);
  background: var(--vert-pale); }
.action-ligne.danger:hover { color: var(--danger); border-color: var(--danger-trait);
  background: var(--danger-fond); }
/* Le declencheur du menu prend la meme forme : deux objets voisins qui
   font le meme genre de chose doivent se ressembler. */
.ecran-etudes-liste td.actions .menu-actions-declencheur {
  display: inline-grid; place-items: center; width: 2rem; height: 2rem; padding: 0;
  margin: 0 0 0 .35rem; border-radius: var(--rayon-champ);
  border: 1px solid var(--border-carte); background: var(--bg-card);
  color: var(--text-muted); font-size: var(--t-corps); line-height: 1;
  vertical-align: middle; }
.ecran-etudes-liste td.actions .menu-actions-declencheur:hover {
  color: var(--vert-fonce); border-color: var(--vert); background: var(--vert-pale); }

/* LE PIED D'UN TABLEAU : d'ou l'on vient, ou l'on est, ou l'on va.
   Il vit DANS le cadre, sous le tableau, separe par un filet : pose
   dehors, il flotterait sous la carte comme un element sans attache. */
.pied-tableau { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .7rem 1rem; border-top: 1px solid var(--filet); }
.pied-tableau .compte-pages { font-size: var(--t-dense); color: var(--text-muted); }
/* « Par page » sur la meme ligne que sa liste : le libelle au-dessus
   rendait le pied plus haut a gauche qu'a droite. */
.pied-tableau label.compte-pages { display: inline-flex; align-items: center; gap: .55rem; margin: 0; }
/* Liste et boutons a la meme hauteur, sur une seule ligne de base. */
.pied-tableau select { width: auto; min-width: 4.75rem; margin: 0;
  min-height: 2.25rem; padding-top: .35rem; padding-bottom: .35rem; font-size: var(--t-dense); }
/* `border-box` : en `content-box`, la hauteur mini s'ajoutait au padding
   et les boutons montaient a 49 px pour une liste de 36. */
.pied-tableau .bouton { box-sizing: border-box; min-height: 2.25rem; padding: .35rem .9rem; }
.pied-tableau .pages-nav, .pied-tableau > span:last-child { display: inline-flex; align-items: center; gap: .5rem; }
.pied-tableau .pages-nav .compte-pages { margin-right: .5rem; }
/* Un bouton mort reste LISIBLE : trop pale, il se lit comme un defaut
   d'affichage et l'on clique quand meme. */
.pied-tableau [aria-disabled="true"], .pied-tableau :disabled { opacity: .5; cursor: not-allowed; }

/* LA COLONNE DU PIPELINE est un PANNEAU, pas un espace vide.
 *
 * Les cartes flottaient sur le fond de page, sans rien qui dise ou finit
 * une colonne et ou commence la suivante : quatre piles de cartes, et il
 * fallait remonter a l'entete pour savoir dans laquelle on lisait. La
 * maquette pose chaque colonne sur un fond doux, arrondi, qui la tient
 * du titre jusqu'a la derniere carte.
 *
 * Le fond est aussi ce qui rend le glisser-deposer comprehensible : on
 * voit ou l'on peut lacher. */
.ecran-pipeline .pipeline-col { background: var(--bg-survol);
  border: 1px solid var(--border-carte); border-radius: var(--rayon-carte);
  padding: .8rem .7rem; }
.ecran-pipeline .pipeline-col-entete { padding: 0 .35rem .6rem; }
/* LES QUATRE COLONNES DEMARRENT A LA MEME LIGNE. Une colonne sans total
   remontait ses cartes d'un cran, et le tableau boitait d'une colonne a
   l'autre - or on le lit en balayant horizontalement. */
.ecran-pipeline .pipeline-col-total { min-height: 1.2rem; }
.ecran-pipeline .pipeline-col > .pipeline-cartes { margin-top: .1rem; }
.ecran-pipeline .pipeline-col-total { padding: 0 .35rem .6rem; }
/* La colonne visee pendant un glisser s'eclaire en entier, et non son
   seul empilement de cartes : la cible, c'est la colonne. */

/* « Deplacer » est la porte de secours du glisser-deposer, pas l'action
   principale de la carte : il se lit quand on le cherche, il ne crie pas
   sur chacune des trente cartes. Ouvert, il reprend le vert de l'action. */
.ecran-pipeline .pipeline-actions > summary { list-style: none; cursor: pointer;
  font-size: var(--t-libelle); font-weight: 600; color: var(--text-faint);
  padding: .15rem 0; }
.ecran-pipeline .pipeline-actions > summary::-webkit-details-marker { display: none; }
.ecran-pipeline .pipeline-actions > summary:hover { color: var(--vert-fonce); }
.ecran-pipeline .pipeline-actions[open] > summary { color: var(--vert-fonce); }

/* Le bouton « Nouvelle etude » de la Carte du parc portait un signe plus
   INVISIBLE : la regle qui grise la loupe de la recherche visait tous les
   SVG du bandeau, y compris celui du bouton vert juste a cote. Un gris
   pale sur du vert plein ne se voit pas, et le bouton passait pour un
   carre de couleur sans fonction.

   La charte le dit deja : une icone prend `currentColor`, donc la couleur
   de son bouton. Il suffisait que le bouton la donne. */
.ecran-carte-du-parc .rail-chercher .geste-creer svg { color: currentColor; }

/* L'ETAT d'un utilisateur : du texte et une pastille, pas une etiquette.
   Dans une boite bordee il prenait la forme d'un champ desactive, a cote
   des vraies listes deroulantes de la meme ligne, et l'on cherchait a
   cliquer dessus. */
.eq-etat { display: inline-flex; align-items: center; gap: .4rem;
  font-size: var(--t-dense); font-weight: 600; color: var(--succes);
  white-space: nowrap; }
.eq-etat .point { width: 7px; height: 7px; border-radius: 999px; flex: none;
  background: var(--vert); }
.eq-etat.eteint { color: var(--text-faint); }
.eq-etat.eteint .point { background: var(--text-faint); }

/* Le depliant du formulaire d'ajout est un INTITULE, pas un second bouton :
   le bouton du haut ouvre deja ce meme formulaire. Deux boutons de meme
   allure pour une seule action font hesiter sur leur difference. */
.eq-ajout-titre { display: inline-flex; align-items: center; gap: .4rem;
  cursor: pointer; font-size: var(--t-corps); font-weight: 600;
  color: var(--vert-fonce); padding: .3rem 0; }
.eq-ajout-titre:hover { text-decoration: underline; }

/* ------------------------------------------------------------------ *
 * LA CLOCHE : une pastille qui compte les gestes attendus, un volet qui
 * dit quoi faire, puis ce qui a bouge. Ancre a droite de la barre pour ne
 * jamais sortir de la fenetre.
 * ------------------------------------------------------------------ */
.volet-cloche { position: relative; display: inline-flex; }
.cloche-bouton { position: relative; }
.cloche-pastille { position: absolute; top: -7px; right: -7px; box-sizing: border-box;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px;
  border: 2px solid var(--bg-card); background: var(--alerte); color: var(--bg-card);
  font-size: 10px; font-weight: 700; line-height: 14px; text-align: center;
  font-variant-numeric: tabular-nums; }
/* Un fait nouveau d'un collegue, sans geste attendu : un point, pas un chiffre. */
.cloche-point { position: absolute; top: 5px; right: 6px; width: 8px; height: 8px;
  border-radius: 999px; background: var(--vert); border: 1.5px solid var(--bg-card); }

.cloche-volet { position: absolute; top: calc(100% + .55rem); right: -.25rem; z-index: 40;
  width: 24rem; max-width: calc(100vw - 2rem); max-height: min(36rem, calc(100vh - 5rem));
  display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--border-carte);
  border-radius: 14px; box-shadow: var(--ombre-flottant); overflow: hidden; }
.cloche-tete { display: flex; align-items: center; justify-content: space-between;
  padding: .85rem .8rem .55rem 1rem; }
.cloche-titre { font-size: var(--t-section); font-weight: 700; color: var(--text); }
.cloche-fermer { width: 1.75rem; height: 1.75rem; display: grid; place-items: center;
  padding: 0; margin: 0; border: 0; border-radius: 8px; background: none;
  color: var(--text-faint); cursor: pointer; }
.cloche-fermer:hover { background: var(--bg-survol); color: var(--text); }
.cloche-fermer svg { width: .65rem; height: .65rem; }
.cloche-corps { overflow-y: auto; padding: 0 .5rem .45rem; }
.cloche-section { display: flex; align-items: center; gap: .4rem; margin: .45rem .5rem .25rem;
  font-size: var(--t-libelle); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-faint); }
.cloche-compte { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--alerte-fond); color: var(--alerte);
  font-size: 10.5px; letter-spacing: 0; }

/* Une ligne : une pastille qui porte le ton, un titre, un detail. Le texte
   reste a l'encre - vingt lignes colorees ne se hierarchisent plus. */
.cloche-ligne { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center; gap: .7rem; padding: .5rem; border-radius: 10px;
  color: inherit; text-decoration: none; font-weight: 400; transition: background .12s ease; }
a.cloche-ligne:hover { background: var(--bg-survol); text-decoration: none; }
.cloche-ico { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  background: var(--gris-bg); color: var(--text-muted); }
.cloche-ligne.attente .cloche-ico { background: var(--alerte-fond); color: var(--alerte); }
.cloche-ligne.alerte .cloche-ico { background: var(--danger-fond); color: var(--danger); }
.cloche-ligne.validee .cloche-ico { background: var(--vert-pale); color: var(--vert-fonce); }
.cloche-ligne.contractee .cloche-ico { background: var(--marine-fond); color: var(--marine); }
.cloche-ligne.a-jour { background: var(--vert-pale); margin: 0 0 .2rem; }
.cloche-ligne.a-jour .cloche-ico { border-radius: 999px; background: var(--vert); color: var(--bg-card); }
.cloche-ligne.a-jour .titre { color: var(--vert-fonce); }
.cloche-ligne .texte { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cloche-ligne .titre { font-size: var(--t-dense); font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cloche-ligne .detail { font-size: var(--t-libelle); color: var(--text-muted); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cloche-ligne .suite { color: var(--text-faint); }
.cloche-neuf { width: 8px; height: 8px; border-radius: 999px; }
.cloche-ligne.nouveau .cloche-neuf { background: var(--vert); }
.cloche-ligne.nouveau .titre { font-weight: 700; }
.cloche-vide { margin: 0; padding: .3rem .5rem .8rem;
  font-size: var(--t-dense); color: var(--text-muted); }
.cloche-pied { display: flex; align-items: center; justify-content: center; gap: .3rem;
  padding: .7rem 1rem; border-top: 1px solid var(--filet);
  font-size: var(--t-dense); font-weight: 600; color: var(--vert-fonce); text-decoration: none; }
.cloche-pied:hover { background: var(--bg-survol); color: var(--vert-fonce); text-decoration: none; }

/* L'ATTENTE D'UNE TACHE DE FOND. Un sablier en emoji se dessinait
   autrement sur chaque systeme et ne tournait pas : une attente doit
   BOUGER, sinon on la prend pour un blocage. */
.tache-attente { display: inline-flex; align-items: center; gap: .6rem;
  font-size: var(--t-corps); color: var(--text-muted); padding: .4rem 0; }
.tache-rondelle { width: 1rem; height: 1rem; flex: none; border-radius: 999px;
  border: 2px solid var(--vert-pale); border-top-color: var(--vert);
  animation: tache-tourne .7s linear infinite; }
@keyframes tache-tourne { to { transform: rotate(360deg); } }
/* Un mouvement perpetuel gene qui y est sensible : sans animation, la
   rondelle reste un anneau vert, et le texte a cote dit deja l'attente. */
@media (prefers-reduced-motion: reduce) { .tache-rondelle { animation: none; } }
.tache-texte b { font-weight: 650; }
.tache-texte small { font-size: var(--t-libelle); }

/* L'ATTENTE QUI REMPLACE UN ECRAN, et non une ligne d'un formulaire.
   Posee telle quelle a la place de la creation d'etude, l'attente etait
   un texte de 14 px dans le coin haut gauche d'une page vide : plus rien
   ne disait ou l'on en etait. Elle prend ici le cadre de ce qu'elle
   remplace, et dit combien de temps cela dure. */
.tache-attente.tache-carte { display: flex; flex-direction: column; align-items: center;
  gap: 1rem; width: 100%; box-sizing: border-box; padding: 3.2rem 1.5rem; text-align: center;
  border: 1px solid var(--border-carte); border-radius: var(--rayon-carte);
  background: var(--bg-card); box-shadow: var(--ombre-carte); }
.tache-attente.tache-carte .tache-rondelle { width: 2.4rem; height: 2.4rem; border-width: 3px; }
.tache-attente.tache-carte .tache-texte b { display: block; font-size: var(--t-section);
  font-weight: 650; color: var(--text); }
.tache-attente.tache-carte .tache-texte small { display: block; margin-top: .4rem;
  font-size: var(--t-corps); color: var(--text-muted); max-width: 30rem; line-height: 1.55; }

/* LA CREATION FAITE SANS ATTENTE, meme cadre que l'attente qu'elle
   remplace : le formulaire disparait, quelque chose de la meme taille
   prend sa place, et l'on voit tout de suite ce qui s'est passe. */
.creation-faite { display: flex; flex-direction: column; align-items: center; gap: .8rem;
  box-sizing: border-box; padding: 2.8rem 1.5rem; text-align: center;
  border: 1px solid var(--succes-trait); border-radius: var(--rayon-carte);
  background: var(--bg-card); box-shadow: var(--ombre-carte); }
.creation-faite-coche { display: grid; place-items: center; width: 2.6rem; height: 2.6rem;
  border-radius: 999px; background: var(--vert-pale); color: var(--vert-fonce); }
.creation-faite-coche svg { width: 1.3rem; height: 1.3rem; }
.creation-faite-titre { margin: 0; font-size: var(--t-section); color: var(--text); }
.creation-faite-detail { margin: 0; max-width: 34rem; font-size: var(--t-corps);
  line-height: 1.55; color: var(--text-muted); }
.creation-faite .bouton { margin-top: .4rem; padding: .62rem 1.4rem; font-size: var(--t-corps); }

/* L'EN-TETE D'UN PANNEAU POSE SUR LA CARTE, avec sa croix.
   Un panneau qui s'ouvre depuis un rail a l'autre bout de l'ecran doit
   porter sa propre fermeture : sinon, une fois dedans, rien ne dit
   comment en sortir. */
.panneau-carte-tete { display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; margin: -.75rem -.7rem .6rem; padding: .65rem .8rem;
  border-bottom: 1px solid var(--filet);
  font-size: var(--t-libelle); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-muted); position: sticky; top: -.75rem;
  background: var(--bg-card); z-index: 2; }
.panneau-carte-fermer { width: 1.5rem; height: 1.5rem; display: grid; place-items: center;
  padding: 0; margin: 0; border: 0; border-radius: 6px; background: none;
  color: var(--text-faint); cursor: pointer; flex: none; }
.panneau-carte-fermer:hover { background: var(--bg-survol); color: var(--text); }
.panneau-carte-fermer svg { width: .65rem; height: .65rem; }

/* LES CALQUES du panneau : une ligne de liste, pas une carte encadree.
   Chaque calque etait pose dans sa propre boite a bord vert, et deux
   boites vertes en tete de panneau se lisaient comme l'element important
   de l'ecran - alors que ce sont deux cases a cocher. */
.bandeau-vertical .couche-v { display: flex; align-items: center; gap: .55rem;
  padding: .45rem .35rem; border: 0; background: none; border-radius: var(--rayon-champ);
  font-size: var(--t-corps); font-weight: 600; color: var(--text); cursor: pointer; }
.bandeau-vertical .couche-v:hover { background: var(--bg-survol); }
.bandeau-vertical .couche-v .pictogramme { width: 1rem; height: 1rem; border-radius: 4px;
  display: grid; place-items: center; font-size: 0; flex: none; }
.bandeau-vertical .couche-v .pictogramme.danger { box-sizing: border-box; display: grid; place-items: center; background: var(--bg-card); color: var(--text); border-radius: 50%; border: 1.5px solid var(--nature-concurrent); box-shadow: 0 1px 2px rgba(22, 35, 63, .12); }
.bandeau-vertical .couche-v .pictogramme.vivant { box-sizing: border-box; display: grid; place-items: center; background: var(--bg-card); color: var(--text); border-radius: 50%; border: 1.5px solid var(--nature-attracteur); box-shadow: 0 1px 2px rgba(22, 35, 63, .12); }
.bandeau-vertical .couche-v .compte-calque { margin-left: auto; font-size: var(--t-dense);
  font-weight: 700; color: var(--text-faint); }

/* LES ACTIONS DE L'ECRAN, a droite du nom, dans la barre du haut.
   Elles precedent les gestes de la solution (notifications, aide), qui
   restent tout au bout : ce qui appartient a l'ecran d'abord, ce qui
   appartient a la solution ensuite. */
.barre-actions { display: inline-flex; align-items: center; gap: .6rem;
  margin-left: .9rem; min-width: 0; }
.barre-actions:empty { display: none; margin: 0; }
/* La derniere sauvegarde se lit sans se faire remarquer : c'est un
   RASSUREMENT, pas une alerte. Elle disparait quand la barre se serre -
   l'etat, lui, reste. */
.barre-enregistre { font-size: var(--t-libelle); color: var(--text-faint);
  white-space: nowrap; }
@media (max-width: 1100px) { .barre-enregistre { display: none; } }

/* LE PIED DU PANNEAU DES COUCHES : le fond de carte, sur une ligne.
   Il est separe du reste par un filet - c'est la couche la plus basse,
   celle sur laquelle les autres se posent, et non une couche de plus a


/* ------------------------------------------------------------------ *
 * LE SOCLE COMMUN, rapatrie du bloc `<style>` de `base.html`.
 *
 * Cent vingt-cinq lignes de regles GLOBALES vivaient dans le gabarit
 * commun : les jetons de largeur, le corps du texte, la grille des
 * titres, les valeurs par defaut des champs. Rien de tout cela n'est
 * propre a un ecran - c'est la definition meme du socle - et tant que
 * ces regles vivaient dans un gabarit, la feuille centrale n'etait pas
 * la seule source de verite qu'elle pretend etre.
 *
 * Elles sont posees en FIN de feuille et dans leur ordre d'origine :
 * ecrites dans le `<head>` apres le chargement de `diamap.css`, elles
 * l'emportaient deja sur tout ce qui precede. Les mettre ici change leur
 * adresse, pas leur priorite. Les styles propres a un ecran, charges par
 * `extra_head`, continuent de passer apres.
 * ------------------------------------------------------------------ */
/* Design inspiré de la maquette de référence (dialogue "Lancement
           d'une étude de potentiel" de l'application legacy) : sections
           encadrées avec titre, champs alignés - en version web épurée.
           Les couleurs viennent de `static/css/diamap.css` : ne pas les
           réécrire en dur ici, sinon le socle cesse d'être le seul endroit
           où se change « le bleu de l'application ». */
        /* Une seule largeur de page, déclarée une seule fois. Chaque gabarit
           avait la sienne (960, 1100, 1200, 1440) et le contenu sautait d'une
           page à l'autre ; une largeur décidée dans chaque gabarit finit
           toujours par diverger.

           Élargir ne met pas le texte en danger : les blocs de texte suivi
           sont bornés séparément (`.page-sous-titre`, 60ch). C'est le
           contenant qui s'élargit, pas la ligne de lecture.

           La largeur suit désormais l'écran, bornée pour qu'un très grand
           moniteur n'étire pas les tableaux au point de les rendre illisibles. */
        :root { --largeur-page: min(96vw, 1800px); }
        /* Le corps du texte se règle ici, sur la grille. Sans cette taille,
           tout ce qui n'est pas explicitement dimensionné prend le 16 px du
           navigateur : une quatrième taille non voulue, à côté des trois. */
        /* LA TAILLE DE BASE, et c'est tout sauf un detail.

          Elle valait `--t-moyenne`, c'est-a-dire la taille d'un TITRE DE
          SECTION - 15,5 px. Tout ce qui n'etait pas explicitement dimensionne
          heritait donc du poids d'un titre : listes, cellules, paragraphes.
          L'application entiere paraissait une taille trop grande, et aucune
          regle n'etait fautive puisque chacune faisait ce qu'elle disait.

          La base est le TEXTE COURANT. C'est ce que la maquette emploie. */
        body { font-size: var(--t-corps); font-family: var(--police);
               line-height: 1.55; margin: 0; padding: 0;
               color: var(--encre); background: var(--fond); }
        /* Le bandeau gauche remplace la barre du haut. `body` passe plein
           écran, le rail devant toucher le bord gauche ; la largeur de
           lecture (--largeur-page) se pose sur `.page`, la zone de contenu à
           droite du rail, et non sur toute la page. Les règles du rail
           lui-même vivent dans `static/css/diamap.css` (tout ce qui apparaît
           sur tous les écrans y vit) ; ne restent ici que les détails propres
           à ce gabarit (fil d'ariane, pastille démonstration, menu). */
        .page { max-width: var(--largeur-page); margin: 0 auto 3rem; padding: 1.4rem 1.6rem 3rem; }
        @media (max-width: 900px) { .page { padding: 1.1rem 1rem 3rem; } }
        .rail-topbar .fil a { color: var(--bleu); text-decoration: none; }
        .rail-topbar .fil a:hover { text-decoration: underline; }
        /* Qui est connecté : repris dans `.rail-foot .rail-user`, mêmes classes
           que le reste de l'application. `qui-connecte` n'existe plus,
           `.rail-user` le remplace (voir diamap.css). */
        .qui-anonyme .pill { background: var(--danger); }
        /* Trois tailles de texte, et rien d'autre.

           Seul `h1` était réglé ; `h2` et `h3` prenaient les défauts du
           navigateur (1.5 em et 1.17 em, soit 24 px et 18,7 px) alors que la
           grille dit 22,4 px. Un `h2` était plus gros qu'un `h1` et un `h3`
           tombait entre deux tailles, sans qu'aucune règle soit fautive.

           Un titre est un titre quel que soit son niveau : h1..h3 portent le
           rang dans le document, pas une taille. Les niveaux profonds passent
           en taille moyenne, ils annoncent un bloc et ne coiffent pas un
           écran. */
        /* Les champs et boutons n'héritent pas.

           C'est une règle du navigateur, pas une règle de CSS : `input`,
           `select`, `textarea`, `button` et `option` ignorent la police et la
           taille de leur parent et prennent celles du système. La mire de
           connexion s'affichait ainsi en Arial 13,33 px quand tout le reste
           était en `system-ui` 16,8 px, et cela n'apparaissait dans aucune
           feuille de style puisque personne ne l'avait écrit. La règle se pose
           ici, une fois, pour tous les champs de l'application.

           `optgroup` est de la partie : sans lui, les intitulés de groupes
           d'un menu déroulant repartent en gras système. */
        input, select, textarea, button, optgroup {
          font-family: inherit; font-size: var(--t-corps);
        }
        /* `code`, `pre`, `kbd` et `samp` prennent le monospace du système si on
           ne leur dit rien : un troisième jeu de caractères, différent du
           nôtre et différent d'un poste à l'autre. Le dictionnaire de données
           affichait ainsi deux monospace, celui de `--police-code` posé à la
           main sur ses codes de colonnes et celui du navigateur sur les
           balises voisines. Même mécanisme que pour les champs de formulaire :
           ce qu'on ne règle pas est réglé ailleurs. */
        code, pre, kbd, samp { font-family: var(--police-code); }
        /* Les titres avaient TOUS la taille d'un titre d'ecran : `h1`, `h2` et
          `h3` a 28 px. Un ecran portant trois sections affichait donc trois
          titres aussi gros que le sien, et la hierarchie disparaissait -
          c'est ce qui donnait cette impression de texte mal cadre.

          La maquette pose 28 px pour le titre d'ecran et 15,5 px pour tout
          titre de section, de carte ou de panneau. L'interligne se resserre
          sur un titre : 1,55 convient a un paragraphe, pas a deux mots. */
        h1 { font-size: var(--t-page); line-height: 1.2; letter-spacing: -0.015em; }
        h2, h3 { font-size: var(--t-section); line-height: 1.3; }
        h4, h5, h6 { font-size: var(--t-corps); line-height: 1.35; }
        /* Les titres en serif, posés sur les balises de titre et non sur des
           classes : un titre est un titre par sa balise, et le prochain écran
           l'aura sans y penser.

           Les quelques titres qui ne sont pas des `h` (intertitre de panneau,
           titre de widget) portent `.titre-serif`. Ils sont rares, et les
           convertir en `h` changerait la structure du document pour un motif
           d'apparence. */
        h1, h2, h3, h4, h5, h6, .titre-serif {
          font-family: var(--police-titre);
          letter-spacing: -0.01em;
        }
        fieldset { border: 1px solid var(--border-carte); border-radius: var(--rayon-carte);
          background: var(--bg-card); box-shadow: var(--ombre-carte);
          padding: 1.1rem 1.25rem 1.25rem; margin: 0 0 1.1rem; }
        /* La legende devient un TITRE DE SECTION, pose dans la carte au lieu
           de couper son filet : c'est le meme role que le `h2` d'un panneau,
           et il doit s'ecrire pareil. */
        fieldset > legend { float: left; width: 100%; margin: 0 0 .9rem; padding: 0;
          font-size: var(--t-section); font-weight: 700; color: var(--text); }
        fieldset > legend + * { clear: both; }
        .grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 1.5rem; }
        label { display: block; margin-top: 1rem; font-weight: 600; }
        fieldset label:first-child, .grille label { margin-top: 0.75rem; }
        /* Les champs de saisie sont un composant du socle : voir `.champ` dans `diamap.css`. */
        /* L'allure « bouton primaire » ne vaut plus que pour un bouton SANS
           classe. Ecrite sur `button` nu, elle traversait toute l'application
           depuis ce bloc, charge APRES la feuille centrale : chaque composant
           a bouton (la barre du haut, le pied du rail, les gestes de ligne)
           devait annuler son `margin-top` de 1,25 rem et son `padding`, et
           celui qui l'oubliait se retrouvait avec une boite vide, decalee et
           trop large. La cloche de notifications en etait la.

           Un bouton qui porte une classe porte donc sa propre allure, et rien
           ne s'invite par-dessus. `.bouton` reste le composant de reference. */
        /* LE BOUTON SANS ALLURE, et le piege qu'il tendait.
         *
         * La regle donne au bouton anonyme l'allure du bouton principal,
         * ce qui est un bon defaut. Mais `:not([class])` compte comme une
         * CLASSE dans le calcul de specificite : la regle pesait donc
         * autant que `.moi-theme button` ou `.rail-outils button`, et
         * comme elle est ecrite plus loin, elle l'emportait.
         *
         * Trois ecrans en ont fait les frais : le bouton de repli du rail
         * peint en vert plein, les outils de la carte, et le selecteur de
         * theme dont les deux options NON choisies criaient pendant que la
         * choisie restait blanche. A chaque fois le meme symptome, a
         * chaque fois une demi-heure a chercher ailleurs.
         *
         * `:where()` ramene la specificite a zero. Le defaut reste un
         * defaut : n'importe quelle regle qui habille un bouton passe
         * devant, sans avoir a le savoir. */
        button:where(:not([class])) { margin-top: 1.25rem; padding: 0.55rem 1.4rem; background: var(--primary); color: var(--sur-couleur); border: none; border-radius: 4px; font-weight: 600; }
        button:where(:not([class])):hover { background: var(--primary-hover); }
        button:where(:not([class])):disabled { background: var(--gris-bg); color: var(--text-faint); cursor: not-allowed; }
        button { cursor: pointer; }
        .resultat { margin-top: 1.5rem; padding: 1rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; }
        .erreur { color: var(--danger); }
        .statut-en_attente, .statut-en_cours { color: var(--ambre-text); }
        .statut-termine { color: var(--vert-fonce); }
        .statut-echec { color: var(--danger); }
        #carte { height: 400px; margin-top: 1rem; border-radius: 6px; border: 1px solid var(--border); }
        table { border-collapse: collapse; width: 100%; margin-top: 1rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; }
        th, td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border); }
        th { background: var(--gris-bg); color: var(--bleu); }
        /* Bandeau d'étapes du parcours d'étude (rétractable, Alpine.js) */
        .bandeau-etapes { position: sticky; top: 0; z-index: 20; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 0.5rem 0.75rem; margin-bottom: 1rem; box-shadow: 0 1px 4px var(--ombre-douce); }
        .bandeau-etapes .ligne { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
        .etape-puce { border: 2px solid var(--border); background: var(--bg-survol); color: var(--text); border-radius: 999px; padding: 0.3rem 0.9rem; margin: 0; font-weight: 600; font-size: var(--t-note); }
        .etape-puce.active { background: var(--primary); border-color: var(--vert); color: var(--sur-couleur); }
        /* Une étape franchie se distingue d'une étape simplement ouverte :
           blanche et cerclée de vert plutôt que grise. Sans cela, « faite »
           et « accessible mais vide » ont le même aspect. */
        .etape-puce.franchie { background: var(--bg-card); border-color: var(--vert); color: var(--vert-fonce); }
        .etape-puce:disabled { color: var(--text-faint); background: var(--marine-fond); cursor: not-allowed; }
        .bandeau-etapes .suivant { margin: 0 0 0 auto; padding: 0.35rem 1rem; }
        .bandeau-etapes .replier { margin: 0; background: transparent; color: var(--bleu); border: none; font-size: var(--t-note); padding: 0.2rem 0.5rem; }
        .bandeau-etapes .replier:hover { background: var(--gris-bg); }

/* ------------------------------------------------------------------ *
 * LA BASCULE CLAIR / SOMBRE, dans la barre du haut.
 *
 * Un interrupteur a glissiere, comme la maquette, et non un bouton de
 * plus : la forme dit qu'il y a deux etats et qu'on passe de l'un a
 * l'autre. Trois boutons cote a cote auraient dit « choisissez parmi
 * trois », ce qui est le role de l'ecran Mon compte.
 *
 * Le galet porte le pictogramme de l'etat COURANT - soleil quand il
 * fait clair - et non celui vers lequel on irait. Un interrupteur
 * montre ou l'on est.
 * ------------------------------------------------------------------ */
.bascule-theme { box-sizing: border-box; position: relative; flex: none; width: 46px; height: 24px;
  margin: 0; padding: 0; border: 1px solid var(--border-champ); border-radius: 999px;
  background: var(--bg-survol); cursor: pointer;
  transition: background .15s ease, border-color .15s ease; }
.bascule-theme:hover { border-color: var(--vert); }
.bascule-theme:focus-visible { outline: 2px solid var(--vert); outline-offset: 2px; }
.bascule-theme[aria-pressed="true"] { background: var(--marine); border-color: var(--marine); }

.bascule-theme .galet { box-sizing: border-box; position: absolute; top: 50%; left: 2px;
  transform: translateY(-50%); width: 18px; height: 18px; border-radius: 999px;
  background: var(--bg-card); border: 1px solid var(--border-carte);
  display: grid; place-items: center; color: var(--ambre);
  transition: left .15s ease, color .15s ease; }
.bascule-theme[aria-pressed="true"] .galet { left: calc(100% - 20px); color: var(--marine); }
.bascule-theme .galet svg { width: 11px; height: 11px; }
/* Un seul pictogramme a la fois : celui de l'etat courant. */
.bascule-theme .lune { display: none; }
.bascule-theme[aria-pressed="true"] .soleil { display: none; }
.bascule-theme[aria-pressed="true"] .lune { display: block; }

/* LE PIED DU PANNEAU D'ETAPE : d'ou l'on vient, ou l'on va.
   Colle au bas du panneau, separe par un filet, il reste atteignable
   quand le formulaire defile - c'est justement au bout du formulaire
   qu'on veut continuer. */
.atelier .pied-etape { position: sticky; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  margin: 1rem -1rem -.9rem; padding: .75rem 1rem;
  border-top: 1px solid var(--filet); background: var(--bg-card); }
.atelier .pied-etape .bouton { margin: 0; white-space: nowrap; }

/* L'EN-TETE DU PANNEAU D'ETAPE : le numero et le nom, en haut du panneau.
   La pastille reprend celle du fil a l'identique - c'est le meme repere,
   il doit se reconnaitre d'un ecran a l'autre. Collante, elle reste
   visible quand le formulaire defile. */
.atelier .tete-etape { position: sticky; top: -.4rem; z-index: 3;
  display: flex; align-items: center; gap: .55rem;
  margin: -.4rem -0.9rem .7rem; padding: .7rem .9rem;
  border-bottom: 1px solid var(--filet); background: var(--bg-card); }
.atelier .tete-etape .puce { width: 1.25rem; height: 1.25rem; flex: none;
  border-radius: 999px; background: var(--vert); color: var(--sur-couleur);
  display: grid; place-items: center;
  font-size: var(--t-libelle); font-weight: 700; font-variant-numeric: tabular-nums; }
.atelier .tete-etape .nom { font-size: var(--t-section); font-weight: 700;
  color: var(--text); }
.atelier .tete-etape .theme-etape { display: grid; place-items: center; color: var(--vert); }

/* Le geste qui engage, dans la barre du haut : compact, mais c'est le
   bouton principal de l'ecran et il doit se voir comme tel. */
.barre-actions .barre-geste { display: inline-flex; margin: 0; }
.barre-actions .barre-geste .bouton { margin: 0; padding: .35rem .9rem;
  font-size: var(--t-dense); white-space: nowrap; }

/* ------------------------------------------------------------------ *
 * LE CHOIX EN PASTILLES : deux ou trois options exclusives, cote a
 * cote, comme la maquette.
 *
 * Une liste deroulante CACHE les options : pour savoir qu'on peut
 * travailler en blocs de 50 m plutot qu'en IRIS, il faut d'abord
 * l'ouvrir. Sur un choix binaire qui commande tout le calcul, c'est une
 * option de trop a decouvrir.
 *
 * Les pastilles montrent les deux d'un coup, et laquelle est prise. Le
 * radio reste dans le DOM - accessible, cochable au clavier - mais
 * invisible : c'est le libelle entier qui porte l'apparence.
 * ------------------------------------------------------------------ */
.choix-pastilles { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .25rem; }
.choix-pastilles label { display: inline-flex; align-items: center; gap: .4rem;
  padding: .45rem .8rem; border: 1px solid var(--border-champ);
  border-radius: var(--rayon-bouton); background: var(--bg-card);
  font-size: var(--t-dense); font-weight: 600; color: var(--text-muted);
  cursor: pointer; transition: background .12s ease, border-color .12s ease, color .12s ease; }
.choix-pastilles input { position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none; }
.choix-pastilles label:hover { border-color: var(--text-faint); color: var(--text); }
.choix-pastilles label:has(input:checked) { background: var(--vert-pale);
  border-color: var(--vert); color: var(--vert-fonce); }
.choix-pastilles label:has(input:focus-visible) { outline: 2px solid var(--vert);
  outline-offset: 2px; }
/* Verrouille - etude contractee - le choix se LIT encore : trop pale, il
   passerait pour un defaut d'affichage. */
.choix-pastilles label:has(input:disabled) { cursor: not-allowed; opacity: .6; }
.choix-pastilles svg { width: .95rem; height: .95rem; flex: none; }
.choix-pastilles .choix-indice { font-size: var(--t-libelle); font-weight: 600; color: var(--text-faint); }
.choix-pastilles label:has(input:checked) .choix-indice { color: var(--vert); }

/* L'intitule d'un groupe de pastilles : meme poids qu'un `label` de champ,
   puisqu'il joue le meme role - nommer ce qu'on regle. Un `span` et non un
   `label` : un libelle ne peut viser qu'un seul champ, et un groupe de
   radios en compte plusieurs. */
.libelle-groupe { display: block; margin-top: 1rem; font-weight: 600; }

/* LES TROIS DUREES DU ZONAGE : une ligne par zone, comme la maquette.
   Pastille de la couleur de la zone, nom, puis la duree et son unite a
   droite. Trois colonnes coupaient « Complementaire » en deux dans un
   panneau de 344 px ; trois lignes se lisent comme trois seuils
   croissants d'un meme reglage. */
.zones-durees { border: 0; padding: 0; margin: .25rem 0 0; }
.zones-durees legend { padding: 0; }
.zone-duree { display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; padding: .45rem .1rem; }
.zone-duree + .zone-duree { border-top: 1px solid var(--filet); }
.zone-duree label { display: inline-flex; align-items: center; gap: .5rem; margin: 0;
  font-size: var(--t-corps); font-weight: 600; color: var(--text); }
.zone-duree .saisie-unite { display: inline-flex; align-items: center; gap: .35rem; }
.zone-duree input[type="number"] { width: 4.2rem; margin: 0; padding: .3rem .5rem;
  text-align: right; font-variant-numeric: tabular-nums; }
.zone-duree .unite { font-size: var(--t-libelle); color: var(--text-muted); }

/* Le bouton principal de l'etape prend toute la largeur du panneau, comme
   la maquette : c'est le geste qui produit quelque chose, il ne se cherche
   pas. */
.atelier .bouton-calculer-zonage { display: block; width: 100%; margin: .9rem 0 0;
  text-align: center; }

/* Le modele : chemin recommande, en bouton discret AVANT les durees, avec
   l'etoile de l'assistant - c'est un calcul qui travaille pour vous. */
.bloc-zone-modelisee { margin: 0 0 .6rem; padding: 0; background: none; border: 0; }
.bloc-zone-modelisee .bouton-modele { display: inline-flex; align-items: center;
  gap: .45rem; width: 100%; justify-content: center; margin: 0; }
.bloc-zone-modelisee .bouton-modele svg { width: .95rem; height: .95rem; flex: none;
  color: var(--vert); }
.bloc-zone-modelisee .bouton-modele { background: transparent; border-color: transparent;
  color: var(--vert-fonce); padding: .45rem .8rem; }
.bloc-zone-modelisee .bouton-modele:hover:not(:disabled) { background: var(--vert-pale);
  border-color: transparent; color: var(--vert-fonce); }
.bloc-zone-modelisee .bouton-modele:disabled { opacity: .45; cursor: not-allowed; }
/* L'unite « min » vivait en absolu par-dessus le champ (regle du gabarit
   pour les anciennes colonnes) : dans une ligne en flex elle recouvrait le
   chiffre. Elle reprend sa place dans le flux, a droite du champ. */
.zone-duree .saisie-unite .unite { position: static; transform: none; }
/* Securite : si un libelle depasse malgre tout, il se replie au lieu de
   sortir du cadre et d'emporter l'icone avec lui. */
.bloc-zone-modelisee .bouton-modele { white-space: normal; min-width: 0; }


/* ------------------------------------------------------------------ *
 * LE COIN BAS-GAUCHE DE LA CARTE : zoom, puis legende, puis barre IA.
 *
 * Tout ce qui est pose a gauche de la carte doit degager le panneau
 * d'etape : la legende vivait a `left: 10px`, c'est-a-dire SOUS le
 * panneau des qu'il etait assez haut pour l'atteindre. Zoom et legende
 * partent de la zone libre, a droite du panneau, comme la maquette.
 *
 * Ils s'empilent : la barre IA tout en bas, la legende au-dessus, le
 * zoom au-dessus encore. Quand la barre se ferme, les deux redescendent.
 * ------------------------------------------------------------------ */
.atelier .barre-carte { left: calc(var(--l-panneau, 24rem) + 1.75rem);
  bottom: .875rem; z-index: 5; transition: bottom .15s ease; }
.atelier .maplibregl-ctrl-bottom-left { left: calc(var(--l-panneau, 24rem) + 1.75rem);
  transition: bottom .15s ease; }
.atelier .maplibregl-ctrl-bottom-left .maplibregl-ctrl { margin: 0; }
/* Barre IA ouverte et presente : legende et zoom montent d'un cran. */
/* L'attribution reste en bas a droite, hors du rail d'outils. */
.atelier .maplibregl-ctrl-bottom-right { right: .875rem; }

/* LE FIL D'ARIANE de la barre du haut : « Etudes / nom de l'etude ». Le
   retour se lit comme un chemin, pas comme un bouton - c'est le nom de
   l'ecran qui porte le poids. */
.barre-ecran .fil-retour { color: var(--text-muted); font-weight: 500;
  text-decoration: none; }
.barre-ecran .fil-retour:hover { color: var(--vert-fonce); text-decoration: underline; }
.barre-ecran .fil-sep { color: var(--text-faint); margin: 0 .45rem; font-weight: 400; }

/* L'atelier garde le rail COMMUN : il se repliait par script apres le
   rendu, ce qui faisait clignoter la page a l'ouverture et donnait un
   menu qui ne se comportait comme aucun autre. Un ecran ne change pas
   la navigation de l'application. */

/* L'etape Zonage a plat : des groupes sous un libelle, un rythme regulier,
   pas de fiches emboitees. */
.etape-zonage .groupe-etape { margin-top: 1rem; }
.etape-zonage .groupe-etape > .libelle-groupe,
.etape-zonage .groupe-etape legend.libelle-groupe { margin-top: 0; }
.etape-zonage .bloc-zone-modelisee { margin-top: .6rem; }
/* Titres de groupe en libelle, comme « VOTRE SITE » a l'etape 3 : le reglage prime. */
:where(body.ecran-atelier) .etape-zonage .libelle-groupe { font-size: var(--t-libelle); font-weight: 700;
  color: var(--text-faint); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .35rem; }
/* Deux pastilles qui se partagent la largeur, comme la maquette : sur un
   choix a deux options, deux boutons de meme taille se lisent comme UN
   interrupteur, et non comme deux etiquettes flottantes. */
.choix-pastilles.pastilles-pleines { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
/* Radios : un interrupteur segmente, la valeur prise en carte blanche. */
.choix-pastilles.pastilles-pleines:has(> label) { gap: 2px; padding: 2px; align-items: stretch;
  border-radius: var(--rayon-bouton); background: var(--bg-page); }
/* `margin: 0` : la marge d'un label de formulaire les poussait au bas du gris. */
.choix-pastilles.pastilles-pleines label { justify-content: center; margin: 0; padding: .28rem .55rem; line-height: 1.25;
  border-color: transparent; background: transparent; border-radius: calc(var(--rayon-bouton) - 2px); }
.choix-pastilles.pastilles-pleines label:hover { border-color: transparent; color: var(--text); }
.choix-pastilles.pastilles-pleines label:has(input:checked) { background: var(--bg-card);
  border-color: transparent; color: var(--vert-fonce);
  box-shadow: 0 1px 2px rgba(22, 35, 63, .08), 0 0 0 1px var(--border); }

/* LA LEGENDE EN UNE LIGNE, comme la maquette : trois pastilles cote a cote
   dans une capsule, et non trois lignes dans une boite. Empilee, elle
   montait a 90 px et poussait le zoom au milieu de la carte. */
.atelier .barre-carte { flex-direction: row; flex-wrap: wrap; align-items: center;
  gap: .25rem .9rem; padding: .4rem .8rem; border-radius: 999px;
  font-size: var(--t-note); box-shadow: var(--ombre-flottant); }
.atelier .barre-carte .legende-zone > span { width: auto; }
.atelier .maplibregl-ctrl-bottom-left { bottom: 3.9rem; }

/* LE TABLEAU DES ZONES, une ligne par zone : dans un panneau de 344 px,
   une colonne par zone plus le total debordait sous la carte. */
.tableau-zones { width: 100%; border-collapse: collapse; font-size: var(--t-note); }
.tableau-zones th { text-align: left; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint);
  padding: .25rem .15rem; border-bottom: 1px solid var(--trait-clair); }
.tableau-zones td { padding: .35rem .15rem; border-bottom: 1px solid var(--gris-bg);
  white-space: nowrap; }
.tableau-zones .nb { text-align: right; font-variant-numeric: tabular-nums; }
.tableau-zones td:first-child { font-weight: 600; }
.tableau-zones td:last-child { font-weight: 700; }
.tableau-zones tr.total td { font-weight: 700; border-bottom: 0; }
.tableau-zones .pastille { margin-right: .4rem; }
.note-zones { margin-top: .45rem; }

/* L'ETAPE CONCURRENCE dans le panneau etroit : le bilan en deux colonnes,
   le bouton d'ajout en pleine largeur sous la liste, comme la maquette.
   Les regles de base du bloc vivent encore dans l'atelier ; celles-ci
   les reprennent pour la largeur du panneau. */
.etape-concurrence .bilan-conc { display: grid; grid-template-columns: 1fr 1fr;
  gap: .55rem .8rem; padding: 0; margin-bottom: .75rem; }
.etape-concurrence .bilan-conc b { font-size: var(--t-dense); font-weight: 700; }
.etape-concurrence .onglets-conc { gap: .15rem; margin-top: 0; }
.etape-concurrence .onglets-conc button { padding: .3rem .4rem; }
.etape-concurrence .onglets-conc .fz { padding: .05rem .5rem; margin-top: .2rem; }
.etape-concurrence .tbl-conc .nb-surface { width: auto; }
.etape-concurrence .ajout-conc { position: static; display: flex; width: 100%;
  justify-content: center; margin-top: .8rem; }
/* Quatre colonnes dans 300 px : le corps de note ne tenait pas, le titre
   « Depense/an » partait sous la carte. Le socle peint aussi les `th` en
   gris : ici, aucun fond, la ligne sous l'en-tete suffit. */
.tableau-zones { font-size: var(--t-petite); }
.tableau-zones th { background: transparent; }
.tableau-zones td:first-child { white-space: normal; }
/* Mesure : la barre IA fait 96 px avec ses suggestions, la legende en
   capsule 35 px. Chacune se pose au-dessus de la precedente, 8 px entre. */
.atelier.ia-ouverte:has(.panneau-ia) .barre-carte { bottom: 8.8rem; }
.atelier.ia-ouverte:has(.panneau-ia) .maplibregl-ctrl-bottom-left { bottom: 11.6rem; }
/* Les onglets de nature sur une ligne, a parts egales ; les filtres de
   zone sur la suivante : le trait qui les separait devient un retour a la
   ligne. Meles, les sept boutons se repartissaient sur trois lignes. */
.etape-concurrence .onglets-conc .sep-filtres { flex-basis: 100%; height: 0; margin: 0; }
.etape-concurrence .onglets-conc button[role="tab"] { flex: 1 1 auto; text-align: center;
  white-space: nowrap; padding: .3rem .2rem; }
/* L'en-tete au corps des libelles de colonne, en capitales espacees comme
   la maquette : au corps des cellules, « MENAGES » et « DEPENSE » faisaient
   a elles seules la largeur qui manquait. */
.tableau-zones th { font-size: var(--t-libelle); }

/* L'ETAPE ESTIMATION : methode en pastilles, tableau des zones avec la
   part a saisir, le CA annuel en grand, les reglages replies. */
.choix-pastilles .pastille-bouton { display: inline-flex; align-items: center;
  justify-content: center; gap: .4rem; padding: .45rem .8rem;
  border: 1px solid var(--border-champ); border-radius: var(--rayon-bouton);
  background: var(--bg-card); font: inherit; font-size: var(--t-dense);
  font-weight: 600; color: var(--text-muted); cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease; }
.choix-pastilles .pastille-bouton:hover { background: var(--bg-card);
  border-color: var(--text-faint); color: var(--text); }
.choix-pastilles .pastille-bouton.actif,
.choix-pastilles .pastille-bouton.actif:hover { background: var(--vert-pale);
  border-color: var(--vert); color: var(--vert-fonce); }
.choix-pastilles .pastille-bouton:disabled { cursor: not-allowed; opacity: .6; }
/* La part a saisir, encadree de vert comme toute case a saisir de l'etape. */
.tableau-estim .saisie { display: inline-flex; align-items: center; gap: .2rem; }
.tableau-estim .saisie input { width: 3.4rem; margin: 0; padding: .2rem .3rem;
  text-align: right; font-size: var(--t-dense); font-weight: 600;
  border: 1.5px solid var(--vert-fonce); background: var(--vert-pale);
  border-radius: var(--rayon-champ); }
.tableau-estim .saisie .unite { color: var(--text-faint); font-size: var(--t-libelle); }
/* LE CA ESTIME EN KPI D'OUVERTURE. Une carte nette a filet vert plutot
   qu'un aplat vert plein : le chiffre porte, le vert accentue le bord sans
   remplir - un KPI, pas un bloc brut. */
.etape-estimation .estim-kpi { margin: 0 0 .5rem; padding: .5rem .75rem;
  border-radius: var(--rayon-carte); background: var(--bg-card);
  border: 1px solid var(--border-carte); border-left: 4px solid var(--vert);
  box-shadow: var(--ombre-carte); }
.etape-estimation .estim-kpi-lib { display: block; font-size: var(--t-libelle);
  font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-faint); }
/* La valeur et son detail sur une meme ligne de base : le chiffre porte,
   le detail le suit, et la carte ne garde plus une moitie vide. */
.etape-estimation .estim-kpi-corps { display: flex; align-items: baseline;
  flex-wrap: wrap; gap: .1rem .55rem; }
.etape-estimation .estim-kpi-valeur { font-size: var(--t-page);
  line-height: 1.1; font-weight: 800; color: var(--vert-fonce); letter-spacing: -.015em; }
.etape-estimation .estim-kpi-detail { font-size: var(--t-dense); color: var(--text-muted); }
.etape-estimation .estim-kpi-vide .estim-kpi-valeur { color: var(--text-faint); }

/* LA MONTEE EN CHARGE : trois pas relies par une fleche, annee apres annee.
   L'annee cible (la troisieme) est mise en avant, c'est le regime vise. */
.etape-estimation .estim-annees { display: flex; align-items: stretch;
  margin: 0 0 1rem; padding: 0; list-style: none; }
.etape-estimation .estim-an { flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: .45rem .3rem; border: 1px solid var(--border-carte);
  border-radius: var(--rayon-champ); background: var(--bg-card); position: relative; }
.etape-estimation .estim-an + .estim-an { margin-left: 1.2rem; }
.etape-estimation .estim-an + .estim-an::before { content: "\2192"; position: absolute;
  left: -1.15rem; top: 50%; transform: translateY(-50%); width: 1.2rem;
  text-align: center; color: var(--vert); font-weight: 700; font-size: var(--t-dense); }
.etape-estimation .estim-an-cible { border-color: var(--vert); background: var(--vert-pale); }
.etape-estimation .estim-an-lib { font-size: var(--t-libelle); text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-faint); }
.etape-estimation .estim-an-val { font-size: var(--t-dense); font-weight: 700; color: var(--text); }
.etape-estimation .estim-an-cible .estim-an-val { color: var(--vert-fonce); }
.reglages-estim { margin-top: 1rem; }
.reglages-estim > summary { cursor: pointer; font-weight: 600; list-style: none;
  display: flex; align-items: center; gap: .4rem; }
.reglages-estim > summary::before { content: ""; width: .45rem; height: .45rem;
  border-right: 2px solid var(--text-faint); border-bottom: 2px solid var(--text-faint);
  transform: rotate(-45deg); transition: transform .12s ease; }
.reglages-estim[open] > summary::before { transform: rotate(45deg); }
.reglages-estim .detail-tourisme { width: 100%; justify-content: center; margin: .3rem 0; }
.etape-estimation .modele-boutons { display: flex; gap: .5rem; }
.etape-estimation .modele-boutons .bouton { flex: 1; justify-content: center; }
.etape-estimation .modele-boutons .bouton.actif { background: var(--vert-pale);
  border-color: var(--vert); color: var(--vert-fonce); }
.etape-estimation .modele-volet { margin-top: .6rem; }
.etape-estimation tr.sur-carte td { background: var(--vert-pale); }
/* Le socle trace un filet vertical entre les `th` et donne aux champs la
   hauteur d'un champ de formulaire : ici une ligne de tableau. */
.tableau-zones th, .tableau-zones td { border-left: 0; border-right: 0; }
.tableau-estim .saisie input { height: 1.75rem; min-height: 0; line-height: 1; }

/* L'ETAPE LOCALISATION en formulaire : champs pleine largeur, l'adresse
   et son bouton sur une ligne, deux valeurs en lecture seule. */
.etape-localisation input[type="text"] { width: 100%; }
.etape-localisation .ligne-adresse { display: flex; gap: .4rem; align-items: stretch; }
.etape-localisation .ligne-adresse input { flex: 1; min-width: 0; }
.etape-localisation .ligne-adresse .bouton { flex: none; }
.etape-localisation .fiche-lecture { display: flex; justify-content: space-between;
  align-items: baseline; gap: .6rem; padding: .45rem 0;
  border-bottom: 1px solid var(--trait-clair); font-size: var(--t-dense); }
.etape-localisation .fiche-lecture .lib { color: var(--text-muted); }
.etape-localisation .fiche-lecture b { text-align: right; }
.etape-localisation .site-etat { margin-top: .4rem; font-size: var(--t-dense); }
/* L'adresse est dans le champ juste au-dessus : le fragment ne la repete
   que lorsqu'elle porte la note « le point a ete deplace ». */
.etape-localisation .site-etat .site-adresse { display: none; }
.etape-localisation .site-etat .site-adresse:has(.site-note-origine) { display: block; }
.etape-localisation .site-etat .site-meta { margin: 0; }
/* Une surface a quatre chiffres : le champ des durees, taille pour deux. */
.etape-localisation #site-surface { width: 4.6rem; }

/* ====================================================================== *
 * L'ATELIER D'ETUDE (etude_detail.html), feuille rapatriee.
 *
 * Ces regles vivaient dans un <style> du gabarit, charge apres cette
 * feuille. Elles sont posees ici dans le meme ordre de cascade : tout ce
 * qui, plus haut, les corrige le fait deja par la specificite, jamais par
 * l'ordre. Chaque selecteur est enferme dans `:where(body.ecran-atelier)`,
 * qui ne pese rien : sans lui, `p`, `table` ou `.card` regles pour
 * l'atelier s'appliquaient a tous les ecrans.
 * ====================================================================== */
/* Deux classes utilitaires pour les fiches des étapes Localisation et Zonage. */
/* La grille de fiches vit dans `diamap.css` : deux colonnes qui se remplissent, pleine largeur si une seule fiche. */
:where(body.ecran-atelier) .legende-invisible { position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
  border: 0; }

/* Atelier d'étude : chemin de fer en haut, bandeau vertical d'étapes à
   gauche (largeur ajustable par l'utilisateur, mémorisée), panneau de
   l'étape courante au centre, carte toujours visible à droite (largeur
   ajustable aussi). */
/* Marge basse annulée : le gabarit commun en pose une de 3 rem pour les
   pages qui défilent. Sur la fiche d'étude, dont l'atelier occupe toute
   la hauteur, elle ne servait qu'à faire défiler la page de 32 px pour
   rien - un ascenseur qui ne mène nulle part. */
body:where(.ecran-atelier) { max-width: none; padding: 0; margin-bottom: 0; }
/* Le chemin de fer vit dans la barre du haut. Il n'a donc plus ni cadre,
   ni ombre, ni position collante propres - la barre les porte. Les lui
   laisser dessinait une carte dans une carte. */
/* Le rail se colore jusqu'à l'étape atteinte : un trait uniforme ne
   montrait pas le chemin parcouru.

   Les traits s'étirent pour occuper la largeur libre (`flex: 1 1 auto` et
   non une largeur fixe) : le rail s'adapte au nom de l'étude, qui n'a pas
   la même longueur d'une étude à l'autre. */
/* La hauteur est mesurée au chargement (`ajusterHauteurAtelier`) : du haut
   réel de l'atelier au bas de la fenêtre. La valeur ci-dessous n'est qu'un
   repli avant que le script ne passe. Un nombre en dur se désaccorde au
   premier changement de gabarit : la valeur précédente, calibrée sur une
   barre du haut en deux lignes, laissait une bande blanche en bas. */
/*
  Le creux du bas est rendu à l'atelier : `.page` réserve 3 rem de padding
  et 3 rem de marge sous son contenu, soit 96 px de blanc inutiles sur cet
  écran, qui tient dans la fenêtre par construction. `:has(#atelier)` ne
  vise que la fiche d'étude ; les autres écrans gardent leur respiration.
  Le script qui dimensionne l'atelier mesure ces valeurs : les réduire ici
  lui rend la place, sans rien changer de son côté.
*/
:where(body.ecran-atelier) .page:has(#atelier) { padding-bottom: 0; margin-bottom: 0; }
/* Le pied de page se resserre lui aussi : ses 1,6 + 2,2 rem de creux
   laissaient encore ~60 px de blanc sous lui. Il dit une version, il
   n'a pas besoin d'une page pour ça. */
:where(body.ecran-atelier) .page:has(#atelier) .pied-solution { padding: 0.5rem 1rem 0.6rem; }

/*
  `--h-topbar` : la barre du haut peut passer à deux lignes, puisqu'elle
  porte l'identité de l'étude à côté du chemin de fer. Avec une hauteur
  écrite en dur, l'atelier débordait sous la barre et se faisait recouvrir.
  Le JS mesure la barre et pose la variable ; le `130px` reste en repli,
  pour le cas où le script ne passerait pas.
*/
/* La galerie de cartes est placée contre la carte. À l'extrême gauche,
   elle mettait environ 1 500 px entre la commande et son effet, avec tout
   le panneau de travail entre les deux. L'ordre est donc : le travail,
   les cartes, la carte ; et les deux panneaux de droite se replient
   côte à côte.

   Fait par `order`, pas en déplaçant le HTML : l'ordre du document reste
   celui de la lecture pour un lecteur d'écran. */
/*
  Poignées à 10 px et non 6 : le glisser fonctionnait, mais la cible était
  trop fine pour une souris. `.poignee .grip`, la double barre visible au
  survol, mesurait déjà 10 px, soit 2 px de plus que sa propre colonne de
  chaque côté. La colonne rejoint la largeur de ce qu'elle affiche.
*/
/*
  `position: relative` pour que `#rouvrir-travail` se pose sur sa propre
  colonne. Sans ça, il se positionne (en `absolute`) par rapport à la
  fenêtre entière, faute d'ancêtre positionné : il tombait au bon endroit
  par coïncidence, la colonne repliée étant déjà en haut à gauche.
*/
/* Carte-first : plus de grille ni de hauteur calculee - la chaine flex
   (fenetre -> .main -> .page -> .atelier) donne la hauteur, la carte
   tapisse, les panneaux flottent (bloc « ATELIER CARTE-FIRST »). */
/* Plancher de hauteur : sous 540 px la carte ne montre plus rien
   d'utile, la page defile plutot que de l'ecraser. */
:where(body.ecran-atelier) .atelier { min-height: 540px; }
/*
  La galerie (« Aide IA + Cartes ») et la carte forment un seul bloc
  visuel : le séparateur qui les distinguait proposait un ajustement entre
  deux choses qui ne se séparent plus. Le séparateur de gauche,
  `#poignee-bandeau`, déplace le bloc entier.

  `#poignee-carte` garde un rôle plus fin : régler la frontière entre la
  galerie et la carte seule (286-374 px), sans toucher aux fiches.
*/
/* Pas `display: none` sur cette poignée : un élément ainsi masqué ne
   participe plus à la grille, les quatre survivants se répartissent alors
   sur les cinq colonnes et la carte tombe dans celle qui vaut zéro (carte
   réduite à 2 px de large dans un conteneur qui en mesurait 465). Pour la
   neutraliser, la laisser dans le flux avec une colonne à 0. */
:where(body.ecran-atelier) #poignee-carte { padding: 0; background: none; border: none; }
:where(body.ecran-atelier) .atelier > .bandeau-vertical { order: 3; }
:where(body.ecran-atelier) .atelier > #poignee-bandeau { order: 2; }
:where(body.ecran-atelier) .atelier > #panneau-etape, :where(body.ecran-atelier) .atelier > .colonne-etape { order: 1; }
:where(body.ecran-atelier) .atelier > #poignee-carte { order: 4; }
:where(body.ecran-atelier) .atelier > #carte-conteneur { order: 5; }
/* Le bandeau latéral descend sous la taille commune : c'est une colonne
   étroite et de largeur fixe, où « Evolution depuis Population 2011 » et
   « Résidences secondaires » débordaient de leur bouton. Il se parcourt
   du regard pour choisir, il ne se lit pas - la pastille de couleur et la
   position font autant que le mot ; le texte qui se lit vraiment est sur
   la carte et dans les tableaux. Il est à 65 % du plancher, environ
   10,6 px : bas pour du texte à lire, juste pour une colonne de boutons. */
/* Panneau Couches : chapeaux discrets, lignes nettes, compteur en
   capsule - il melait quatre styles de titres et des cases brutes. */
:where(body.ecran-atelier) .bandeau-vertical .titre-galerie { font-size: var(--t-libelle); font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); margin: .9rem 0 .4rem; }
:where(body.ecran-atelier) .bandeau-vertical .titre-galerie .libelle { font: inherit; color: inherit; }
:where(body.ecran-atelier) .bandeau-vertical .aide-champ { color: var(--text-faint); }
:where(body.ecran-atelier) .bandeau-vertical { background: var(--bg-card); border: 1px solid var(--border); border-right: none;
  border-radius: 6px 0 0 6px; padding: 0.6rem 0.5rem; display: flex; flex-direction: column;
  gap: 0.4rem; overflow: hidden; box-sizing: border-box; }
:where(body.ecran-atelier) .bandeau-vertical .etape-v { display: flex; align-items: center; gap: 0.5rem; width: 100%; text-align: left; margin: 0; padding: 0.5rem 0.6rem; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-survol); color: var(--text); font-weight: 600; font-size: var(--t-moyenne); white-space: nowrap; overflow: hidden; }
:where(body.ecran-atelier) .bandeau-vertical .etape-v.active { background: var(--primary); border-color: var(--vert); color: var(--sur-couleur); }
:where(body.ecran-atelier) .bandeau-vertical .etape-v:disabled { color: var(--text-faint); background: var(--marine-fond); cursor: not-allowed; }
:where(body.ecran-atelier) .bandeau-vertical .numero { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem; height: 1.4rem; border-radius: 999px; background: var(--marine-fond); font-size: var(--t-moyenne); flex: none; }
:where(body.ecran-atelier) .bandeau-vertical .etape-v.active .numero { background: var(--voile-clair); }
:where(body.ecran-atelier) .bandeau-vertical .suivant-v { margin-top: auto; }
/* La liste des cartes défile, le haut reste fixe : l'Aide IA allonge */
/* la liste au-delà de l'écran (204 indicateurs possibles) et le      */
/* `overflow: hidden` du panneau coupait le bas sans ascenseur.       */
/* L'Aide IA et les Points de vente restent accrochés en haut ; seule */
/* `#galerie-entrees` prend l'ascenseur.                              */
:where(body.ecran-atelier) .bandeau-vertical .galerie-cartes { display: flex; flex-direction: column; gap: 0.4rem; flex: 1 1 auto; min-height: 0; }
:where(body.ecran-atelier) #galerie-entrees { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
/* Les champs de saisie suivent la taille du bandeau : un `input` sans
   règle de taille garde celle du navigateur (13,33 px ici), que la grille
   typographique n'atteint jamais - elle ne s'applique qu'aux sélecteurs
   qu'on écrit. */
/* Vise tout ce qui vit dans le bandeau, y compris les boutons sans
   classe : les « OK » et « × » du renommage n'en portent aucune et
   héritaient d'une règle globale sur `button`, plus spécifique que les
   sélecteurs de champs. */
:where(body.ecran-atelier) .bandeau-vertical input, :where(body.ecran-atelier) .bandeau-vertical select, :where(body.ecran-atelier) .bandeau-vertical textarea, :where(body.ecran-atelier) .bandeau-vertical button { font-size: var(--t-moyenne); }
/*
  Titres en minuscules : « AIDE IA POUR FAIRE UNE CARTE » en capitales
  tenait sur deux lignes et criait plus fort que les autres titres de
  l'écran, qui n'en portent pas. La police reste celle des titres
  (`--police-titre`) : ce sont bien les titres du panneau, et ils
  s'accordent avec « Concurrence » ou « Marché par zone » juste à côté.
*/
/* `relative` : la prise de réouverture est posée dessus. */
:where(body.ecran-atelier) .bandeau-vertical { position: relative; }
/* Les libellés de cartes passent sur deux lignes : dans une colonne de
   200 px, « Dépense par ménage », « Résidences secondaires » ou
   « Evolution depuis Population 2011 » étaient coupés par des points de
   suspension. `white-space: normal` les laisse revenir à la ligne ; la
   hauteur du bouton suit le texte, et `align-items: flex-start` garde
   l'icône alignée en haut du libellé plutôt qu'à son milieu. */
/* Le libellé d'une carte suit la règle typographique : « indicateur,
   libellé de carte -> moyenne ». Il valait 9,6 px, une quatrième taille
   cachée derrière un calcul, donc invisible à une recherche de valeurs en
   dur. Le rail s'élargit en conséquence : 200 px ne tenaient que du texte
   de 9 px. */
:where(body.ecran-atelier) .bandeau-vertical .carte-v { display: flex; align-items: flex-start; gap: 0.55rem; width: 100%; text-align: left; margin: 0; padding: 0.45rem 0.6rem; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); font-weight: 400; font-size: var(--t-moyenne); line-height: 1.25; white-space: normal; overflow: hidden; cursor: pointer; }
:where(body.ecran-atelier) .bandeau-vertical .carte-v:hover { border-color: var(--vert); background: var(--bg-survol); }
/* LE CALQUE : le gabarit d'une carte, avec une case à la place du clic.
   Même bordure, même pictogramme, même hauteur - ils sont côte à côte,
   et deux gabarits voisins qui se ressemblent presque se lisent comme un
   défaut d'alignement. Le compte va tout à droite, seul chiffre de la
   ligne : collé au libellé, il se lisait comme la fin du mot. */
/* `box-sizing` obligatoire : mesuré à 343 px de large dans un conteneur
   de 322, le compte de droite (« 4 », « 55 ») était coupé au bord du
   panneau. Les entrées de la galerie sont des `<button>`, que la feuille
   du projet met en `border-box` ; un `<label>` ne l'est pas, et
   `width: 100%` s'ajoutait alors au rembourrage et aux bordures, soit
   2 × 0,6 rem + 2 × 1 px, les 21 px manquants exactement. */
:where(body.ecran-atelier) .bandeau-vertical .couche-v { box-sizing: border-box; display: flex; align-items: center; gap: 0.5rem; width: 100%; margin: 0 0 0.3rem; padding: 0.45rem 0.6rem; border-radius: 6px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); font-size: var(--t-moyenne); line-height: 1.25; cursor: pointer; }
:where(body.ecran-atelier) .bandeau-vertical .couche-v:hover { border-color: var(--vert); background: var(--bg-survol); }
:where(body.ecran-atelier) .bandeau-vertical .aide-legende-calques { margin: -0.05rem 0 0.55rem; padding: 0 0.15rem; }
/* LA LISTE DE CE QUE LA CARTE PORTE.
   Une ligne par couche presente, toutes de la meme forme : on apprend un
   seul geste pour toutes. L'oeil masque sans retirer, la croix retire.
   Les couches ajoutees (carte thematique, couche superposee) portent les
   deux ; celles du fond n'ont que l'oeil ; les mailles, qui appartiennent
   au mode retouche, n'ont ni l'un ni l'autre - c'est « Terminer » qui les
   retire. */
:where(body.ecran-atelier) .couches-affichees { display: flex; flex-direction: column; }
/* `relative` : la case a cocher des points de vente est retiree de l'oeil
   mais reste dans le formulaire, posee en absolu sur sa propre ligne. */
:where(body.ecran-atelier) .couche-v { position: relative; }
/* Les deux commandes ont le meme gabarit qu'un bouton d'icone du reste de
   la solution : une cible carree, un fond au survol, jamais un glyphe nu
   pose dans le vide. */
:where(body.ecran-atelier) .couche-v .oeil,
:where(body.ecran-atelier) .couche-v .retirer { display: grid; place-items: center; flex: none;
  width: 1.7rem; height: 1.7rem; margin: -.25rem 0; padding: 0;
  border: 0; border-radius: 6px; background: none; color: var(--text-muted);
  cursor: pointer; transition: background .12s ease, color .12s ease; }
:where(body.ecran-atelier) .couche-v .retirer { margin-right: -.3rem; }
:where(body.ecran-atelier) .couche-v .oeil:hover { background: var(--marine-fond); color: var(--marine); }
:where(body.ecran-atelier) .couche-v .retirer:hover { background: var(--danger-fond); color: var(--danger); }
/* L'oeil dit l'etat par son dessin : ouvert quand la couche est la, barre
   quand elle est masquee. Deux icones superposees, une seule visible. */
:where(body.ecran-atelier) .couche-v .oeil .barre { display: none; }
:where(body.ecran-atelier) .couche-v .oeil[aria-pressed="false"] .ouvert { display: none; }
:where(body.ecran-atelier) .couche-v .oeil[aria-pressed="false"] .barre { display: block; }
/* Les points de vente gardent leur case a cocher - elle porte l'etat que
   le filtre de l'etape 3 relit - mais c'est l'oeil qui la represente : un
   seul geste a apprendre pour toute la liste. */
:where(body.ecran-atelier) .couche-v .case-oeil { position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none; }
:where(body.ecran-atelier) .couche-v .case-oeil:not(:checked) ~ .oeil .ouvert { display: none; }
:where(body.ecran-atelier) .couche-v .case-oeil:not(:checked) ~ .oeil .barre { display: block; }
:where(body.ecran-atelier) .couche-v .case-oeil:focus-visible ~ .oeil { outline: 2px solid var(--vert); outline-offset: 2px; }
/* Une couche masquee reste lisible : elle commande encore. */
:where(body.ecran-atelier) .couche-v:has(.oeil[aria-pressed="false"]) .libelle,
:where(body.ecran-atelier) .couche-v:has(.case-oeil:not(:checked)) .libelle { color: var(--text-faint); }
/* Les mailles ne se commandent pas d'ici : la ligne dit seulement qu'elles
   sont la, et le mode retouche les retire par « Terminer ». */
:where(body.ecran-atelier) .couche-v.inerte { cursor: default; border-style: dashed; }
:where(body.ecran-atelier) .couche-v.inerte:hover { border-color: var(--border); background: var(--bg-card); }
/* Le pictogramme d'une couche ajoutee prend la teinte de sa palette, comme
   son entree dans la galerie. */
/* Le pictogramme d'une couche est celui de son entree dans la galerie,
   teinte de sa palette. Il fait la meme taille que la : une case plus
   petite dans la liste ferait deux objets differents pour la meme carte. */
:where(body.ecran-atelier) .couches-affichees .pictogramme { min-width: 1.5rem; height: 1.5rem;
  border-radius: 6px; font-size: 0; color: var(--teinte-carte, var(--marine));
  background: color-mix(in srgb, var(--teinte-carte, var(--marine)) 16%, var(--bg-card)); }
/* La legende reprend le repere de la carte : disque blanc, anneau de la nature. */
:where(body.ecran-atelier) .couches-affichees .pictogramme.danger { box-sizing: border-box; display: grid; place-items: center; background: var(--bg-card); color: var(--text); border-radius: 50%; border: 1.5px solid var(--nature-concurrent); box-shadow: 0 1px 2px rgba(22, 35, 63, .12); }
:where(body.ecran-atelier) .couches-affichees .pictogramme.vivant { box-sizing: border-box; display: grid; place-items: center; background: var(--bg-card); color: var(--text); border-radius: 50%; border: 1.5px solid var(--nature-attracteur); box-shadow: 0 1px 2px rgba(22, 35, 63, .12); }
/* `--primary` comme partout ailleurs : le bleu du systeme etait la seule
   couleur de l'ecran a ne venir d'aucun jeton de la charte. */
:where(body.ecran-atelier) .bandeau-vertical .couche-v input { margin: 0; flex: none; accent-color: var(--primary); }
:where(body.ecran-atelier) .bandeau-vertical .couche-v .libelle { flex: 1; }
/* `margin-left: auto` ne suffit pas - la boîte du libellé prend déjà tout
   l'espace libre (`flex: 1`), il n'en reste aucun à distribuer. */
:where(body.ecran-atelier) .bandeau-vertical .couche-v .compte-calque { flex: none;
  margin-right: .1rem; padding: .05rem .4rem; border-radius: 999px;
  background: var(--marine-fond); color: var(--text-muted);
  font-size: var(--t-petite); font-weight: 700; font-variant-numeric: tabular-nums; }
/* Un calque décoché reste lisible : il commande encore. Seul le
   pictogramme s'éteint - c'est lui qui porte la couleur des marqueurs. */
:where(body.ecran-atelier) .bandeau-vertical .couche-v:has(input:not(:checked)) .pictogramme { opacity: 0.3; }
/* Le second titre de la galerie a deux blocs au-dessus de lui : sans cet
   écart il touchait le calque « Attracteurs », et les deux groupes n'en
   faisaient plus qu'un. */
:where(body.ecran-atelier) .bandeau-vertical .titre-cartes { margin-top: 0.7rem; }
/*
  La carte AFFICHEE se marquait par une barre verte pleine, texte blanc :
  dans un panneau de quinze lignes, elle criait plus fort que le titre du
  panneau et que la carte elle-meme, qu'elle est censee designer. Un
  choix courant se signale, il ne se hurle pas - fond vert pale, filet
  vert, texte qui reste lisible. C'est la forme que la charte donne deja
  a l'etape courante du fil et a l'entree active du rail.
*/
:where(body.ecran-atelier) .bandeau-vertical .carte-v.active { background: var(--vert-pale); border-color: var(--vert); color: var(--vert-fonce); font-weight: 600; }
:where(body.ecran-atelier) .bandeau-vertical .carte-v:disabled { color: var(--text-faint); background: var(--marine-fond); cursor: not-allowed; }
/* Le pictogramme d'une carte porte la TEINTE MEDIANE de sa palette : c'est
   la cle de lecture de l'aplat qu'elle posera. En aplat plein, six cartes
   alignaient six couleurs franches et le panneau virait au nuancier. La
   teinte passe donc au trait, sur un fond qui la reprend en voile : la
   meme information, sans le vacarme.
   `color-mix` et non une variante par couleur : la teinte vient de la
   palette au rendu, aucune feuille ne la connait a l'avance. */
:where(body.ecran-atelier) .bandeau-vertical .pictogramme { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; border-radius: 6px; background: var(--marine-fond); font-size: var(--t-moyenne); flex: none; }
:where(body.ecran-atelier) .bandeau-vertical .carte-v .pictogramme {
  color: var(--teinte-carte, var(--marine));
  background: color-mix(in srgb, var(--teinte-carte, var(--marine)) 14%, var(--bg-card)); }
/* La ligne d'aide des deux gestes : elle precede la galerie, comme celle
   des calques precede leurs cases. */
:where(body.ecran-atelier) .bandeau-vertical .aide-gestes-cartes { margin: -.1rem 0 .5rem; }
:where(body.ecran-atelier) .bandeau-vertical .carte-v.active .pictogramme { box-shadow: 0 0 0 2px var(--bg-card); }
/*
  Pas de `margin-top: auto` sur ce bloc : la règle datait du temps où
  l'aide IA vivait en bas du bandeau, sous la galerie. Une fois l'aide
  remontée en tête, elle absorbait tout l'espace libre de la colonne flex
  et poussait le contenu 242 px plus bas : un grand vide en haut, et
  l'utile - l'aide IA, la liste des cartes - hors de vue au chargement.
  Une règle de placement qui survit au déplacement de ce qu'elle plaçait
  ne se voit pas : rien n'échoue, l'écran est simplement mal rempli.
*/
:where(body.ecran-atelier) .bandeau-vertical .demande-carte { padding-bottom: 0.6rem; border-bottom: 1px solid var(--marine-fond); }
:where(body.ecran-atelier) .bandeau-vertical .demande-carte textarea { width: 100%; max-width: none; margin: 0 0 0.35rem; padding: 0.4rem 0.5rem; border: 1px solid var(--border); border-radius: 6px; font-size: var(--t-moyenne); resize: vertical; box-sizing: border-box; }
:where(body.ecran-atelier) .bandeau-vertical .demande-carte button { margin: 0; width: 100%; padding: 0.35rem; font-size: var(--t-moyenne); }
:where(body.ecran-atelier) .bandeau-vertical .demande-carte .titre-galerie { margin-bottom: 0.3rem; }
:where(body.ecran-atelier) #reponse-demande { margin-top: 0.45rem; font-size: var(--t-note); line-height: 1.35; white-space: normal; }
:where(body.ecran-atelier) #reponse-demande p { margin: 0 0 0.3rem; }
:where(body.ecran-atelier) #reponse-demande .reponse-ok { color: var(--vert-fonce); }
:where(body.ecran-atelier) #reponse-demande .reponse-attente { color: var(--danger); }
:where(body.ecran-atelier) #reponse-demande .reponse-absent { color: var(--danger); }
/* Le coût est discret mais toujours là : il informe, il n'alarme pas -
   une demande vaut des fractions de centime. */
:where(body.ecran-atelier) #reponse-demande .reponse-cout { color: var(--text-faint); font-size: var(--t-note); font-style: italic; margin-top: 0.15rem; }
:where(body.ecran-atelier) #reponse-demande .reponse-autres { color: var(--text-faint); }
:where(body.ecran-atelier) #reponse-demande .lien-carte { display: block; width: 100%; margin: 0.3rem 0 0; padding: 0.25rem; font-size: var(--t-note); background: var(--primary); }
:where(body.ecran-atelier) .bandeau-vertical .note-galerie { font-size: var(--t-petite); color: var(--text-faint); padding: 0.3rem 0.5rem; font-style: italic; white-space: normal; }
/* Légende de la carte thématique, posée sur la carte en bas à gauche. */
/*
  Le panneau s'ouvre sous son bouton, en haut à droite, contre le zoom.
  Ouvert au coin gauche, il recouvrirait la légende thématique - celle-là
  même dont il règle les couleurs, qu'on ne verrait donc plus en la
  réglant.

  `left: auto` est indispensable : le panneau est déplaçable, et le
  glissement écrit `style.left`. Sans `right: auto` en regard (posé par
  `placerPanneau`), les deux bords seraient contraints à la fois et la
  largeur du panneau serait dictée par l'écart entre eux.
*/
/* LES REGLAGES SONT RANGES, plus poses. Ils flottaient sur la carte, et un
   panneau qui flotte se pose forcement sur quelque chose : sur une petite
   zone de chalandise il couvrait ce qu'on regardait, d'ou le glisser qui
   l'accompagnait. Au pied du panneau des couches, il ne couvre rien et se
   trouve la ou l'on choisit deja CE QUE la carte porte. */
/* DEUX COLONNES : quatre reglages tiennent en deux rangees.
   Empiles, ils prenaient huit lignes - plus de hauteur que les couches
   qu'ils commandent, dans un panneau ou la place se dispute. Le titre
   traverse les deux colonnes ; chaque reglage garde son nom au-dessus de sa
   commande, ce qui reste lisible a cent cinquante pixels de large. */
:where(body.ecran-atelier) #panneau-reglages { position: static; z-index: auto;
  margin-top: .6rem; padding: .45rem .55rem .5rem; border-radius: 8px;
  background: var(--bg-survol); border: 1px solid var(--border);
  box-shadow: none; display: grid; grid-template-columns: 1fr 1fr;
  gap: .3rem .5rem; align-items: end; }
:where(body.ecran-atelier) #panneau-reglages .titre-reglages { grid-column: 1 / -1; }
/* La transparence traverse les deux colonnes : nom, puis curseur sur toute la ligne. */
:where(body.ecran-atelier) #panneau-reglages label.reglage-ligne { grid-column: 1 / -1;
  display: flex; align-items: center; gap: .75rem; }
:where(body.ecran-atelier) #panneau-reglages label.reglage-ligne input[type="range"] { flex: 1; margin: 0; }
/* Les listes des reglages : le menu du role, a droite de leur nom, ouvert vers le haut. */
:where(body.ecran-atelier) #panneau-reglages label.reglage-ligne { justify-content: space-between; }
:where(body.ecran-atelier) #panneau-reglages select.select-remplace { position: absolute; width: 1px; height: 1px;
  margin: 0; padding: 0; opacity: 0; pointer-events: none; }
:where(body.ecran-atelier) #panneau-reglages .menu-choix-tete { padding: .3rem .55rem; border: 1px solid var(--border);
  border-radius: 6px; background: var(--bg-card); font-size: var(--t-libelle); font-weight: 600;
  letter-spacing: 0; color: var(--text); cursor: pointer; }
:where(body.ecran-atelier) #panneau-reglages .menu-choix-tete:hover { border-color: var(--vert); }
:where(body.ecran-atelier) #panneau-reglages .menu-choix-tete:disabled { opacity: .5; cursor: not-allowed; }
:where(body.ecran-atelier) #panneau-reglages .menu-choix-liste { top: auto; bottom: calc(100% + .35rem);
  left: auto; right: 0; min-width: 11rem; }
.menu-choix-liste[hidden] { display: none; }
:where(body.ecran-atelier) .couches-affichees .pictogramme svg { display: block; }
:where(body.ecran-atelier) #panneau-reglages .titre-reglages { display: block;
  margin-bottom: .1rem; font-size: var(--t-note); font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--text-faint); }
:where(body.ecran-atelier) /* Sans cette ligne, :where(body.ecran-atelier) le panneau ne se referme jamais : `display: flex`
   posé sur un sélecteur d'identifiant l'emporte sur la règle par défaut
   `[hidden] { display: none }:where(body.ecran-atelier) ` du navigateur, :where(body.ecran-atelier) qui n'est qu'un sélecteur
   d'attribut. Le bouton basculait bien l'attribut, :where(body.ecran-atelier) le panneau restait
   affiché, :where(body.ecran-atelier) et le clic paraissait sans effet. */
/* Un reglage tient sur deux lignes serrees : son nom, puis sa commande.
   Range au pied d'un panneau etroit, il doit peser moins que ce qu'il
   regle - les cartes juste au-dessus. */
/* LE NOM ET SA COMMANDE SUR LA MEME LIGNE.
   Empiles, les quatre reglages prenaient huit lignes et la moitie de la
   hauteur du panneau des couches - plus de place que ce qu'ils reglent. Cote
   a cote, ils en prennent quatre. */
:where(body.ecran-atelier) #panneau-reglages label { display: block; margin: 0;
  font-size: var(--t-note); font-weight: 700; letter-spacing: .02em;
  line-height: 1.25; color: var(--text-faint); }
:where(body.ecran-atelier) #panneau-reglages select {
  display: block; width: 100%; max-width: none; margin: .1rem 0 0;
  padding: .2rem 1.4rem .2rem .4rem; min-height: 0; border-radius: 6px;
  border: 1px solid var(--border); background-color: var(--bg-card);
  font-size: var(--t-libelle); font-weight: 600; color: var(--text);
  background-size: .65rem; background-position: right .45rem center; }
:where(body.ecran-atelier) #panneau-reglages select:hover { border-color: var(--vert); }
/* Le curseur de transparence prend la couleur de la charte des deux cotes
   du bouton : le gris du systeme etait la seule teinte de ce panneau a ne
   venir d'aucun jeton. */
:where(body.ecran-atelier) #panneau-reglages input[type="range"] {
  display: block; width: 100%; margin: .45rem 0 .2rem; padding: 0; border: none;
  height: 4px; border-radius: 999px; appearance: none;
  background: linear-gradient(to right, var(--vert), var(--marine-fond));
  accent-color: var(--vert); cursor: pointer; }
:where(body.ecran-atelier) #panneau-reglages input[type="range"]::-webkit-slider-thumb {
  appearance: none; width: 13px; height: 13px; border-radius: 50%;
  background: var(--vert); border: 2px solid var(--bg-card);
  box-shadow: 0 1px 3px var(--ombre-douce); }
:where(body.ecran-atelier) #panneau-reglages input[type="range"]::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--vert); border: 2px solid var(--bg-card); }
/*
  La légende thématique est en haut à gauche : la légende des zones est
  posée en bas à gauche, et les deux se superposaient - « Ménages »
  recouvrait « Proximité 5 min ». Deux légendes au même coin ne
  cohabitent pas. Celle-ci décrit la carte colorée et se lit avec elle ;
  celle des zones décrit les anneaux, en pied. Le coin est entier depuis
  que le bouton « Réglages » est parti à droite, contre le zoom : la
  légende remonte au ras du bord.
*/
/* La legende de la carte thematique se posait au coin haut-gauche de la
   carte, c'est-a-dire EXACTEMENT sous le panneau de l'etape, qui flotte
   la et passe devant. Elle etait donc invisible tant qu'un panneau etait
   ouvert - y compris quand elle portait « Donnee indisponible », le seul
   message qui explique une carte restee vide.
   Elle suit maintenant le bord du panneau, comme la barre de carte ; et
   quand le panneau est replie, elle se range apres le bouton qui le
   rouvre. */
:where(body.ecran-atelier) #legende-carte { position: absolute;
  left: calc(var(--l-panneau, 24rem) + 1.75rem); top: .875rem; z-index: 6;
  background: var(--voile-carte); border: 1px solid var(--border); border-radius: 6px;
  padding: 0.45rem 0.6rem; font-size: var(--t-note); color: var(--text);
  max-width: 15rem; box-shadow: 0 2px 8px var(--ombre-douce); }
/* Replie, le panneau laisse a sa place un bouton qui porte desormais la
   pastille ET le nom de l'etape : il est plus large qu'avant, et la legende
   passait dessous. Elle descend sous lui plutot que de se decaler a droite,
   ou elle recouvrirait la carte au moment ou on la lit. */
:where(body.ecran-atelier) .atelier.panneau-plie #legende-carte { left: .875rem; top: 4.6rem; }
/* La poignee de largeur n'a plus de bord a suivre quand le panneau est
   replie : elle resterait une lisiere sensible en travers de la carte. */
:where(body.ecran-atelier) .atelier.panneau-plie > #poignee-carte { display: none; }
:where(body.ecran-atelier) #legende-carte .titre { font-weight: 700; margin-bottom: 0.3rem; }
:where(body.ecran-atelier) #legende-carte .ligne { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.15rem; }
:where(body.ecran-atelier) #legende-carte .case { width: 0.85rem; height: 0.85rem; border-radius: 3px; flex: none; border: 1px solid var(--border); }
:where(body.ecran-atelier) #legende-carte .case.manquante { background: var(--border); }
:where(body.ecran-atelier) #legende-carte .effectif { color: var(--text-faint); margin-left: auto; }
:where(body.ecran-atelier) #legende-carte .methode { margin-top: 0.35rem; padding-top: 0.3rem; border-top: 1px solid var(--trait-clair); color: var(--text-faint); font-size: var(--t-note); }
/* Infobulle au survol d'une maille élémentaire. */
:where(body.ecran-atelier) #infobulle-brique { position: absolute; z-index: 6; pointer-events: none; background: var(--text); color: var(--sur-couleur); border-radius: 5px; padding: 0.3rem 0.55rem; font-size: var(--t-note); white-space: nowrap; box-shadow: 0 2px 8px var(--ombre-moyenne); }
/* La poignée reste active à l'étape 1 : celle-ci porte aussi des fiches */
/* (Site étudié / Maille géographique) qui gagnent à pouvoir s'élargir   */
/* aux dépens de la carte. Sa colonne de grille (10px) est réservée dans */
/* `.atelier.sans-bandeau` ; seul `.bandeau-vertical` reste masqué, son  */
/* contenu n'existant pas ici.                                           */
:where(body.ecran-atelier) .poignee { cursor: col-resize; position: relative; }
/* `left: 50%` + `margin-left` négatif plutôt que `left: 2px` : la colonne fait 10 px, un décalage fixe planterait le trait vers son bord gauche. */
:where(body.ecran-atelier) .poignee::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; margin-left: -1px; width: 2px; background: var(--marine-fond); border-radius: 2px; }
:where(body.ecran-atelier) .poignee:hover::after { background: var(--border); }
/* Double barre discrète au centre de la poignée : clic = replier/déplier,
   glisser = ajuster. */
:where(body.ecran-atelier) .poignee .grip { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 42px; border-left: 2px solid var(--border); border-right: 2px solid var(--border); border-radius: 0; opacity: 0.8; }
:where(body.ecran-atelier) .poignee:hover .grip { border-color: var(--vert); opacity: 1; }
:where(body.ecran-atelier) .panneau-etape { position: relative; overflow-y: auto; padding: 0.4rem 0.9rem 0.9rem;
  background: var(--bg-card); border: 1px solid var(--border-carte); border-radius: 14px; box-shadow: var(--ombre-carte); }
:where(body.ecran-atelier) .panneau-etape fieldset { margin-top: 0.1rem; }
/* `relative` : la légende des zones est posée dessus (voir `.barre-carte`), elle se cale sur ce conteneur. */
/* Fusionné avec le bandeau « Aide IA + Cartes » (voir plus haut) : le bord et l'arrondi côté bandeau disparaissent. */
:where(body.ecran-atelier) #carte-conteneur { position: relative; border: 1px solid var(--border); border-left: none;
  border-radius: 0 6px 6px 0; overflow: hidden; display: flex; flex-direction: column;
  box-sizing: border-box; }
/* Même gabarit que le bandeau d'état, au centre - `.bandeau-atelier`
   (diamap.css). Ne reste ici que le trait qui lui est propre : la bordure
   seulement en bas, parce qu'elle est posée sur la carte. */
/*
  La légende est posée sur la carte, en bas à gauche, et disposée en
  colonne. En bande pleine largeur au-dessus de la carte, elle prenait
  deux lignes de fond de plan alors qu'un coin lui suffit ; en ligne, ses
  cinq entrées se répartissaient sur deux ou trois lignes selon la largeur
  et la dernière se faisait couper par le bord. En colonne, une entrée par
  ligne, elle ne peut plus se couper quelle que soit la largeur de la
  carte. Elle reste en bas : montée en haut, elle recouvrait la légende de
  la couche superposée. C'est la mise en colonne qui règle la coupure, pas
  le déplacement.

  Elle reste cliquable : les deux cases Concurrents/Attracteurs pilotent
  l'affichage des marqueurs, d'où `pointer-events: auto` - la boîte est
  posée sur la carte, qui capte les clics, et sans cela les cases
  deviendraient décoratives.

  `display: flex` explicite : sans lui, `flex-direction` ne fait rien. La
  barre était en `block`, où les entrées s'empilaient par hasard et les
  deux dernières restaient côte à côte.
*/
:where(body.ecran-atelier) .barre-carte { position: absolute; left: 10px; bottom: 22px; top: auto;
  z-index: 5; display: flex; flex-direction: column; align-items: flex-start;
  width: auto; max-width: calc(100% - 20px); border: 1px solid var(--border);
  border-radius: 6px; background: var(--voile-carte);
  box-shadow: 0 2px 8px var(--ombre-douce); padding: 0.4rem 0.6rem;
  gap: 0.15rem; min-height: 0; pointer-events: auto; }
/* Le groupe des trois zones s'aligne aussi en colonne : `display: contents`
   laissait ses enfants suivre le conteneur, et il faut donc que celui-ci
   soit lui-même en colonne - c'est le cas ci-dessus. */
:where(body.ecran-atelier) .barre-carte .legende-zone > span { display: flex; align-items: center; gap: 0.3rem; width: 100%; }
:where(body.ecran-atelier) .barre-carte label { margin: 0; font-weight: 600; white-space: nowrap; }
/* Comme le rail des étapes, la légende glisse à l'horizontale (`rail-deplacable.js`) :
   posée en bas à gauche, elle couvrait parfois ce qu'on regardait. Double-clic : retour. */
:where(body.ecran-atelier) .barre-carte { translate: var(--x-deplace, 0px) 0; cursor: grab; touch-action: pan-y; }
:where(body.ecran-atelier) .barre-carte.deplace { cursor: grabbing; user-select: none; }
/* Les trois couleurs de zone forment un groupe, pour s'effacer d'un
   bloc sous une carte thématique. Nommé, jamais désigné par son rang :
   un `nth-child` se décale dès qu'on ajoute une case. */
:where(body.ecran-atelier) .barre-carte .legende-zone { display: contents; }
/* Chaque entrée reste d'un seul tenant : « Complémentaire 17 min » se
   coupait entre le nombre et son unité, et la ligne suivante commençait
   par « min », orpheline - lue comme une case de légende à part entière.
   Un nombre et son unité ne se séparent pas. */
:where(body.ecran-atelier) .barre-carte .legende-zone > span { white-space: nowrap; }
:where(body.ecran-atelier) #carte-conteneur.thematique-active .barre-carte .legende-zone { display: none; }
:where(body.ecran-atelier) .barre-carte input[type="range"] { flex: 1; max-width: 180px; margin: 0; padding: 0; border: none; }
/* Réglages groupés à droite : la légende garde sa place à gauche même
   quand la bascule de tracé est masquée. */
/*
  Les commandes de la carte sont en haut à droite, contre le zoom. Au coin
  haut gauche, elles recouvraient la légende des cartes thématiques dès
  qu'une thématique était choisie, et il avait fallu descendre la légende
  de 18 px pour les décaler - un compromis qui laissait les deux à
  l'étroit. Le coin droit ne porte que le zoom : les commandes s'y rangent
  avec lui, et le coin gauche redevient entier pour la légende.

  Les 48 px de `right` sont la place du zoom MapLibre : son groupe fait
  29 px de large et porte 10 px de marge, mesuré à l'écran. Le `top`
  aligne la boîte sur le bouton « + », pas sur le bord.
*/
:where(body.ecran-atelier) .commandes-carte { position: absolute; top: 10px; right: 48px; left: auto; z-index: 5;
  display: flex; align-items: center; gap: 0.4rem;
  background: var(--voile-carte); border: 1px solid var(--border);
  border-radius: 6px; padding: 0.3rem 0.35rem;
  box-shadow: 0 2px 8px var(--ombre-douce); }
:where(body.ecran-atelier) .commandes-carte select { margin: 0; padding: 0.1rem 0.3rem; font-size: var(--t-petite); }
:where(body.ecran-atelier) .bouton-carte { margin: 0; padding: 0.15rem 0.55rem; font-size: var(--t-note); border: 1px solid var(--border); background: var(--bg-card); color: var(--text); border-radius: 4px; cursor: pointer; }
:where(body.ecran-atelier) .bouton-carte[aria-pressed="true"] { background: var(--primary); border-color: var(--vert); color: var(--sur-couleur); }
:where(body.ecran-atelier) #bandeau-retouche .fermer-capsule { position: absolute; top: .35rem; right: .35rem;
  width: 22px; height: 22px; display: grid; place-items: center; border: 0; border-radius: 6px;
  background: none; color: var(--text-faint); cursor: pointer; }
:where(body.ecran-atelier) #bandeau-retouche .fermer-capsule:hover { background: var(--bg-survol); color: var(--text); }
/* LE PANNEAU DU MODE RETOUCHE, pose tant que le mode dure.
   C'etait une capsule d'avertissement qui se fermait seule au bout de dix
   secondes ; le mode, lui, restait actif. Il porte maintenant ce dont on a
   besoin PENDANT qu'on retouche - le compte par zone, les gestes - et il ne
   se ferme que par « Terminer », qui ferme aussi le mode.
   Ancre a droite de la carte plutot qu'au centre : au centre, il couvrait
   precisement les mailles qu'on vise. */
:where(body.ecran-atelier) #bandeau-retouche { position: absolute; top: 4rem; right: 5.5rem;
  z-index: 8; width: min(20rem, calc(100% - 8rem));
  display: flex; flex-direction: column; gap: .5rem;
  padding: .7rem .8rem; border-radius: 12px;
  background: var(--bg-card); border: 1px solid var(--vert);
  border-left: 4px solid var(--vert); box-shadow: var(--ombre-flottant);
  font-size: var(--t-dense); line-height: 1.45; color: var(--text); }
:where(body.ecran-atelier) #bandeau-retouche .tete-retouche { display: flex; align-items: center;
  gap: .4rem; flex-wrap: wrap; }
:where(body.ecran-atelier) #bandeau-retouche .pastille-mode { padding: .12rem .5rem;
  border-radius: 999px; background: var(--vert-pale); color: var(--vert-fonce);
  font-size: var(--t-petite); font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; }
:where(body.ecran-atelier) #bandeau-retouche .maille-retouche { font-weight: 700; }
:where(body.ecran-atelier) #bandeau-retouche .compte-retouches { margin-left: auto;
  font-size: var(--t-petite); font-weight: 700; color: var(--vert-fonce); }
:where(body.ecran-atelier) #bandeau-retouche .compte-retouches:empty { display: none; }
/* Deux colonnes : quatre lignes empilees allongeaient le panneau sur la
   carte, et ces quatre nombres se comparent mieux cote a cote. */
:where(body.ecran-atelier) #bandeau-retouche .compte-mailles { display: grid;
  grid-template-columns: 1fr 1fr; gap: .2rem .6rem; font-size: var(--t-petite); }
:where(body.ecran-atelier) #bandeau-retouche .compte-mailles .lot { display: flex;
  align-items: center; gap: .35rem; color: var(--text-muted); }
:where(body.ecran-atelier) #bandeau-retouche .compte-mailles .lot b { margin-left: auto;
  color: var(--text); font-variant-numeric: tabular-nums; }
:where(body.ecran-atelier) #bandeau-retouche .compte-mailles .hors .pastille {
  background: var(--carte-hors-zone); }
/* LA RANGEE DE REGLAGE : un pictogramme, ce que le reglage fait, son
   interrupteur au bout. Le gabarit des lignes de couches d'a cote, et de
   tout reglage de la solution - une bascule posee seule sur une ligne se
   lisait comme un morceau de formulaire tombe la. */
.rangee-reglage { display: flex; align-items: center; gap: .55rem;
  padding: .45rem .55rem; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg-card); cursor: pointer;
  transition: border-color .12s ease, background .12s ease; }
.rangee-reglage:hover { border-color: var(--vert); background: var(--bg-survol); }
.rangee-reglage .pictogramme { display: grid; place-items: center; flex: none;
  width: 1.6rem; height: 1.6rem; border-radius: 6px; font-size: 0;
  background: var(--marine-fond); color: var(--marine); }
.rangee-reglage .rangee-texte { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.rangee-reglage .rangee-nom { font-size: var(--t-dense); font-weight: 600; color: var(--text); }
.rangee-reglage .rangee-aide { font-size: var(--t-petite); color: var(--text-muted); }
/* Allumee, la rangee le dit d'elle-meme : on voit l'etat sans lire la
   piste, ce qui compte sur un panneau pose au-dessus d'une carte. */
.rangee-reglage:has(.bascule-case:checked) { border-color: var(--vert);
  background: var(--vert-pale); }
.rangee-reglage:has(.bascule-case:checked) .pictogramme { background: var(--vert);
  color: var(--sur-couleur); }

:where(body.ecran-atelier) #bandeau-retouche .gestes-retouche { display: flex;
  align-items: center; gap: .5rem; }
/* L'avertissement tient sur la meme ligne que la sortie : il ne merite pas
   un paragraphe, il merite d'etre lu une fois. */
:where(body.ecran-atelier) #bandeau-retouche .avert-retouche { flex: 1;
  font-size: var(--t-petite); line-height: 1.35; color: var(--text-muted); }
:where(body.ecran-atelier) #bandeau-retouche .gestes-retouche .bouton { margin: 0;
  margin-left: auto; padding: .28rem .8rem; font-size: var(--t-petite); }
/* UN VRAI INTERRUPTEUR : une piste, un bouton qui glisse. Deux pastilles
   cote a cote se lisaient comme deux boutons dont on ne savait pas lequel
   portait l'etat courant ; une bascule n'a qu'un etat visible, et son
   mouvement dit le changement.
   Pose ici, il vaut pour toute la solution : c'est la forme d'un
   interrupteur, pas celle d'un ecran. */
.bascule { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
  font-size: var(--t-dense); font-weight: 600; color: var(--text); user-select: none; }
.bascule .bascule-case { position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none; }
.bascule .bascule-piste, .rangee-reglage .bascule-piste { position: relative; flex: none; width: 2.1rem; height: 1.15rem;
  border-radius: 999px; background: var(--border); transition: background .16s ease; }
.bascule .bascule-pouce, .rangee-reglage .bascule-pouce { position: absolute; top: 2px; left: 2px;
  width: calc(1.15rem - 4px); height: calc(1.15rem - 4px); border-radius: 50%;
  background: var(--blanc); box-shadow: 0 1px 3px var(--ombre-douce);
  transition: transform .16s ease; }
.bascule .bascule-case:checked ~ .bascule-piste,
.rangee-reglage .bascule-case:checked ~ .bascule-piste { background: var(--vert); }
.bascule .bascule-case:checked ~ .bascule-piste .bascule-pouce,
.rangee-reglage .bascule-case:checked ~ .bascule-piste .bascule-pouce {
  transform: translateX(calc(2.1rem - 1.15rem)); }
.bascule .bascule-case:focus-visible ~ .bascule-piste,
.rangee-reglage .bascule-case:focus-visible ~ .bascule-piste { outline: 2px solid var(--vert);
  outline-offset: 2px; }
.bascule .bascule-case:disabled ~ .bascule-piste { opacity: .5; }
.rangee-reglage .bascule-case { position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none; }

/* Le conteneur est le repère de positionnement du menu d'affectation. */
:where(body.ecran-atelier) #carte-conteneur { position: relative; }
/* Au-dessus des panneaux flottants (6) et du rail (8) : le menu s'ouvre
   au point clique, souvent sous le panneau de l'etape, et s'y perdait. */
:where(body.ecran-atelier) #menu-atome { position: absolute; z-index: 9; background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 4px 14px var(--ombre-moyenne); padding: 0.25rem; min-width: 11rem; }
:where(body.ecran-atelier) #menu-atome .menu-atome-titre { padding: 0.3rem 0.6rem 0.4rem; font-size: var(--t-note); color: var(--text-muted); border-bottom: 1px solid var(--trait-clair); margin-bottom: 0.2rem; }
:where(body.ecran-atelier) #menu-atome button { display: flex; align-items: center; gap: 0.5rem; width: 100%; margin: 0; padding: 0.32rem 0.6rem; border: none; background: none; font-size: var(--t-note); text-align: left; color: var(--text); cursor: pointer; border-radius: 4px; }
:where(body.ecran-atelier) #menu-atome button:hover { background: var(--marine-fond); }
/* Le cadre de la selection au rectangle. Il ne prend aucun clic : le
   lacher de la souris est ecoute sur le document, pas sur le cadre, qui
   se trouve justement sous le curseur a ce moment-la.
   Son compteur dit CE QU'ON PREND avant de lacher : sans lui, on decouvre
   l'ampleur du geste une fois la selection faite. */
:where(body.ecran-atelier) #cadre-selection { position: absolute; z-index: 4;
  pointer-events: none; border: 1.5px dashed var(--marine); border-radius: 3px;
  background: color-mix(in srgb, var(--marine) 12%, transparent); }
:where(body.ecran-atelier) #cadre-selection .compte { position: absolute;
  left: 0; bottom: 100%; margin-bottom: 4px; padding: .15rem .45rem;
  border-radius: 999px; background: var(--marine); color: var(--sur-couleur);
  font-size: var(--t-petite); font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
:where(body.ecran-atelier) #cadre-selection .compte:empty { display: none; }
:where(body.ecran-atelier) .pastille { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 3px; vertical-align: -2px; margin-right: 0.25rem; }
:where(body.ecran-atelier) #carte { flex: 1; height: auto; margin-top: 0; border: none; border-radius: 0; }
/* Étape 4 - style maquette "Estimation CA" : cartes par section,
   pastilles de zones colorées, cellules encadrées par nature. */
/* Titre de l'étude repoussé à droite du chemin de fer, bien lisible. */
/* Le nom de l'étude garde sa place au fil du rail (le rail prend l'espace
   libre, pas lui), mais il est borné et une marge d'air le sépare de
   l'identité, qu'il collait auparavant. Le nom entier au survol. */
/* Une étape franchie porte une coche, l'étape courante est pleine, une
   étape encore fermée reste grise et le dit par son infobulle : trois
   états visibles d'un coup d'œil. */
/* Ce sont les puces qui occupent la largeur, pas les traits : étirer les
   seuls connecteurs remplissait la barre de vide, quatre pastilles
   serrées reliées par de longues lignes creuses. */
/* `flex: 1 1 auto` et non `1 1 0` : avec une base de 0, les quatre étapes
   se partageaient la largeur à parts égales et « 4. Estimation de CA »
   recevait autant de place que « 2. Zonage », donc se retrouvait seul
   rogné en « 4. Estimation … ». Avec `auto`, la base est la largeur du
   texte : chacun part de ce qu'il lui faut, et le rail se remplit quand
   même, sans troncature. */
/* Bandeau du haut réduit : padding divisé par deux (0,3rem -> 0,15rem), */
/* pris sur la hauteur seule, la largeur des puces ne bouge pas.          */
/* Pas de fond bleu sur l'étape active : elle héritait du fond navy par  */
:where(body.ecran-atelier) /* défaut (`button { background: var(--primary) }:where(body.ecran-atelier) `, :where(body.ecran-atelier) base.html) faute de fond    */
/* propre, :where(body.ecran-atelier) contrairement aux étapes franchies (blanc, :where(body.ecran-atelier) bordure verte) et  */
/* fermées (gris). Fond clair partout, :where(body.ecran-atelier) l'anneau déjà présent suffit à    */
/* distinguer l'étape courante.                                          */
/* Le cadenas dit ce que le gris ne dit pas : l'étape n'est pas
   seulement inactive, :where(body.ecran-atelier) elle est FERMÉE, :where(body.ecran-atelier) et le survol dit par quoi. */
/* Un pictogramme par étape, :where(body.ecran-atelier) dans la grammaire typographique de la galerie
   de cartes (◎, :where(body.ecran-atelier) ◫, :where(body.ecran-atelier) %, :where(body.ecran-atelier) €) et non des emoji, :where(body.ecran-atelier) qui jureraient : un point
   posé, :where(body.ecran-atelier) des anneaux concentriques, :where(body.ecran-atelier) un concurrent planté sur le
   territoire, :where(body.ecran-atelier) le chiffre d'affaires.

   Un seul glyphe par puce : fermée -> cadenas, :where(body.ecran-atelier) franchie -> coche, :where(body.ecran-atelier) sinon
   son pictogramme. Les empiler ferait trois symboles sur une puce de
   trente pixels de haut. */
/* Sous 1150 px, :where(body.ecran-atelier) les libellés s'effacent et les numéros restent : mieux
   vaut un chemin de fer complet en numéros qu'un chemin de fer coupé. */
@media (max-width: 1150px) {
}
/* Les libellés de champs n'ont pas tous la même hauteur (certains
   passent sur deux lignes) : on aligne les saisies sur le bas. */
:where(body.ecran-atelier) .grille > div { display: flex; flex-direction: column; justify-content: flex-end; }

/* Formulaire de zonage : trois seuils sur une ligne, chacun avec la
   couleur de sa zone sur la carte. Colonnes de largeur égale
   (`minmax(0, 1fr)`) : avec `auto-fit`, un libellé long faisait glisser
   la colonne suivante et l'alignement se perdait à la première étude au
   nom fourni. */
:where(body.ecran-atelier) .bloc-zonage { border: 1px solid var(--trait-clair); border-radius: 8px; padding: 0.3rem 0.9rem 0.7rem; margin: 0 0 0.85rem; }
:where(body.ecran-atelier) .bloc-zonage legend { font-size: var(--t-note); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-faint); padding: 0 0.35rem; }
/*
  Bouton centré et remonté : le `button` de base.html porte
  `margin-top: 1.25rem` par défaut (pensé pour un bouton en fin de longue
  page), soit trop d'écart ici, juste après le dernier champ. Ce bouton
  n'a pas d'égal sur cette carte : centré plutôt qu'aligné à gauche.
*/
:where(body.ecran-atelier) .ligne-zones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.35rem 1.1rem; align-items: end; }
:where(body.ecran-atelier) .champ-zone { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
:where(body.ecran-atelier) .champ-zone label { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.2rem; font-size: var(--t-note); font-weight: 700; color: var(--tag-texte); }
:where(body.ecran-atelier) .champ-zone select { width: 100%; }
/* L'unité est POSÉE dans le champ, à droite, plutôt que répétée dans
   chaque libellé : « Proximité » se lit mieux que « Proximité
   (minutes) », et l'unité reste sous les yeux au moment de la saisie. */
:where(body.ecran-atelier) .saisie-unite { position: relative; display: block; }
:where(body.ecran-atelier) .saisie-unite input { width: 100%; padding-right: 2.6rem; }
:where(body.ecran-atelier) .saisie-unite .unite { position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); font-size: var(--t-note); color: var(--text-faint); pointer-events: none; }

/* Étape 1 : le contexte en bandeau, le site en évidence. Libellé
   au-dessus de la valeur, comme sur les fiches des outils du marché :
   les valeurs s'alignent alors entre elles, ce que « Enseigne : bidule »
   sur une ligne ne permet pas. */
:where(body.ecran-atelier) .carte-site .site-adresse { margin: 0.15rem 0 0.3rem; font-size: var(--t-libelle); font-weight: 700; color: var(--text); }
:where(body.ecran-atelier) .carte-site .site-meta { margin: 0; font-size: var(--t-note); color: var(--text-muted); font-variant-numeric: tabular-nums; }
:where(body.ecran-atelier) .site-sep { color: var(--border); margin: 0 0.15rem; }
/* 0.85rem, pas les 1.25rem par défaut de base.html (pensés pour un    */
/* bouton en fin de page) : ce bouton suit une légende dans la même     */
/* carte, il doit garder le même écart que les autres blocs empilés.    */
:where(body.ecran-atelier) .bouton-geocoder { margin-top: 0.85rem; }
/* Pastille verte : le site est posé. C'est l'information que l'on vient
   chercher à l'étape 1, elle doit se voir sans lire. */
:where(body.ecran-atelier) .site-pastille { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--succes); margin-right: 0.3rem; }
/* Une carte enregistrée porte une croix, au survol seulement : présente
   en permanence, elle encombrerait une galerie de quinze entrées pour une
   action rare. */
:where(body.ecran-atelier) .entree-carte { position: relative; display: block; }
/* Renommer et retirer voyagent ensemble : deux gestes rares sur la même
   entrée, révélés au survol. Séparés, le second aurait sauté de place le
   jour où le premier est apparu. */
:where(body.ecran-atelier) .actions-carte { position: absolute; top: 2px; right: 2px; display: flex; gap: 2px; opacity: 0; transition: opacity .12s; }
:where(body.ecran-atelier) .entree-carte:hover .actions-carte, :where(body.ecran-atelier) .actions-carte:focus-within { opacity: 1; }
:where(body.ecran-atelier) .oublier-carte { margin: 0; }
:where(body.ecran-atelier) .oublier-carte button { margin: 0; padding: 0 0.3rem; font-size: var(--t-petite); line-height: 1.2; background: var(--bg-card); color: var(--danger); border: 1px solid var(--danger-trait); border-radius: 4px; }
:where(body.ecran-atelier) .renommer-carte { display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0.25rem 0.3rem; font-size: var(--t-petite); line-height: 1.2; background: var(--bg-card); color: var(--bleu); border: 1px solid var(--border); border-radius: 4px; cursor: pointer; }
:where(body.ecran-atelier) .renommage { display: flex; gap: 0.25rem; margin: 0.2rem 0 0.4rem; }
/* `hidden` ne masque plus dès qu'une règle de `display` passe devant.
   Le navigateur pose `display: none` sur `[hidden]`, mais c'est une
   règle de sa feuille par défaut : la nôtre, écrite après, l'emporte.
   Le champ de renommage restait donc ouvert sous chaque carte, alors
   que le code JavaScript le croyait fermé - il ne sert qu'une fois,
   juste après la création. */
:where(body.ecran-atelier) .renommage[hidden] { display: none; }
:where(body.ecran-atelier) .renommage input[type="text"] { width: auto; flex: 1 1 auto; min-width: 0; font-size: var(--t-petite); padding: 0.15rem 0.35rem; }
:where(body.ecran-atelier) .renommage button { margin: 0; padding: 0.15rem 0.5rem; font-size: var(--t-petite); }
:where(body.ecran-atelier) .form-enregistrer-carte { margin: 0.3rem 0 0; }
:where(body.ecran-atelier) .form-enregistrer-carte button { margin: 0; }
:where(body.ecran-atelier) .ligne-maille { display: grid; grid-template-columns: minmax(0, 22rem); }

/* Écran Concurrence : des fiches plutôt qu'un tableau. Chaque concurrent
   porte sa distance au site et sa zone - c'est ce qu'on vient regarder,
   un concurrent en proximité ne pèse pas comme un concurrent en
   complémentaire. */
/* Ligne serrée : depuis que les deux pastilles de comptage l'ont
   quittée, elle ne porte plus qu'un titre et un bouton, et 0,7 rem
   dessous puis 0,5 au-dessus des onglets faisaient un trou. */
:where(body.ecran-atelier) .entete-concurrence { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.1rem; }
:where(body.ecran-atelier) .entete-concurrence .estim-titre { margin: 0; }
:where(body.ecran-atelier) .compte-concurrents { font-size: var(--t-note); color: var(--text-faint); }
/*
  Le bouton d'ajout colle au titre : `margin-left: auto` le poussait à
  1 180 px de là, seul à l'autre bout d'une ligne vide, qui gardait sa
  hauteur pour rien. Les deux sont déjà à la même taille (`--t-note`).

  Ce commentaire est en un commentaire de gabarit et non en
  `/* … * /` : un commentaire CSS part dans la page, et son texte se
  retrouve dans les recherches des tests. Le libellé du bouton, écrit ici
  en toutes lettres, avait fait échouer
  `test_une_etude_contractee_n_affiche_AUCUN_geste`, qui vérifie
  justement son absence.
*/
:where(body.ecran-atelier) .actions-concurrence { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
:where(body.ecran-atelier) .actions-concurrence form { margin: 0; }
:where(body.ecran-atelier) .actions-concurrence .bouton { margin: 0; }
/* Ce conteneur était une grille de vignettes : le tableau et la phrase
   de pied s'y retrouvaient côte à côte, en deux colonnes de 260 px, la
   phrase superposée à l'en-tête « ZONE ». Remplacer le contenu d'un
   conteneur ne change pas le conteneur : `grid-template-columns`
   continuait de découper en colonnes ce qui n'était plus des cartes. Un
   tableau veut toute la largeur, le bloc redevient un bloc. */
:where(body.ecran-atelier) .liste-concurrents { display: block; }
:where(body.ecran-atelier) .fiche-concurrent { border: 1px solid var(--trait-clair); border-radius: 8px; padding: 0.6rem 0.75rem; background: var(--bg-card); }
:where(body.ecran-atelier) .fc-titre { display: flex; align-items: baseline; gap: 0.4rem; flex-wrap: wrap; }
:where(body.ecran-atelier) .fc-enseigne { font-size: var(--t-note); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); }
/* Deux familles, deux couleurs - les mêmes que sur la carte (rouge =
   concurrent GSS, teal = attracteur GSA). Un attracteur amène du trafic,
   il ne prend pas de CA : les confondre fausserait la lecture. */
/* Onglets concurrents / attracteurs. */
/* Une seule ligne : les onglets, le titre et son bouton d'ajout. Alignés
   sur `flex-end` et non `center` : le titre porte un cadre et les onglets
   un trait de soulignement, si bien que centrer sur le milieu faisait
   tomber leurs textes à trois hauteurs différentes. `flex-end` les pose
   tous sur la même ligne de base, celle du filet gris. */
:where(body.ecran-atelier) .onglets-conc { display: flex; align-items: flex-end; gap: 0.3rem;
  margin: 0.1rem 0 0.5rem; border-bottom: 1px solid var(--trait-clair); flex-wrap: wrap; }
/*
  Ordre inversé à l'affichage : les trois filtres tiennent la gauche - ce
  sont eux qu'on manipule - et le titre avec son geste d'ajout partent à
  l'extrême droite. `order` plutôt qu'un déplacement dans le gabarit : le
  titre y précède les onglets, et c'est le bon ordre pour qui lit la page
  sans la voir (lecteur d'écran, navigation au clavier).
*/
:where(body.ecran-atelier) .onglets-conc .estim-titre { order: 2; margin: 0 0.3rem 0 auto;
  border-bottom: none; padding-bottom: 0.35rem; }
:where(body.ecran-atelier) .onglets-conc .bouton { order: 3; margin: 0 0 0.2rem 0; }
:where(body.ecran-atelier) .onglets-conc button { border: 0; background: none; font: inherit; font-size: var(--t-note); font-weight: 700; color: var(--text-faint); padding: 0.35rem 0.7rem; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
:where(body.ecran-atelier) .onglets-conc button.actif { color: var(--bleu); border-bottom-color: var(--vert); }
:where(body.ecran-atelier) .onglets-conc button:not(.actif):hover { color: var(--tag-texte); }
/* La couleur de chaque nature, reprise des pastilles retirées de
   l'en-tête : rouge = prend du CA, teal = en amène. Elle tient même à
   l'état actif, où elle marque en plus le trait du bas. */
:where(body.ecran-atelier) .onglets-conc button.nat-concurrent { color: var(--nature-concurrent); }
:where(body.ecran-atelier) .onglets-conc button.nat-attracteur { color: var(--vert-fonce); }
:where(body.ecran-atelier) .onglets-conc button.nat-concurrent.actif { border-bottom-color: var(--nature-concurrent); }
:where(body.ecran-atelier) .onglets-conc button.nat-attracteur.actif { border-bottom-color: var(--nature-attracteur); }
/* En minuscules, comme les titres de bloc : deux colonnes de capitales -
   la nature et la zone - criaient plus fort que les noms qu'elles
   qualifient. La couleur suffit à distinguer les deux natures. */
:where(body.ecran-atelier) .fc-famille { font-size: var(--t-note); border-radius: 999px; padding: 0.05rem 0.45rem; }
:where(body.ecran-atelier) .fc-concurrent { background: var(--danger-fond); color: var(--danger); }
:where(body.ecran-atelier) .fc-attracteur { background: var(--vivant-fond); color: var(--vivant-fonce); }
:where(body.ecran-atelier) .fc-adresse { font-size: var(--t-note); color: var(--text-muted); margin-top: 0.15rem; }
/* Le nom se clique (il fait clignoter le point) : le curseur et le
   soulignement au survol le disent. */
:where(body.ecran-atelier) .td-nom-survol { cursor: pointer; }
:where(body.ecran-atelier) .td-nom-survol:hover strong { text-decoration: underline; }
/* En minuscules : les capitales criaient plus fort que le contenu
   qu'elles annoncent. Le fond gris et la graisse suffisent à séparer les
   deux blocs. */
:where(body.ecran-atelier) .tr-bloc-famille td { background: var(--bg-page); font-size: var(--t-note); font-weight: 800;
  color: var(--text-muted); padding: 0.3rem 0.6rem; }
:where(body.ecran-atelier) /*
  Le bouton œil reprend le gabarit du bouton ⋯ juste à côté
  (`.menu-conc-bouton`), :where(body.ecran-atelier) pour que les deux s'alignent sans calcul.

  `color` explicite : le socle pose `button { background: var(--primary); color:
  var(--bg-survol) }:where(body.ecran-atelier) ` pour tous les boutons ; celui-ci repeint son fond en blanc mais
  héritait du texte blanc, :where(body.ecran-atelier) et l'icône, :where(body.ecran-atelier) tracée en `currentColor`, :where(body.ecran-atelier) devenait
  blanche sur blanc. Invisible dans le HTML, :where(body.ecran-atelier) invisible au test : seul
  l'œil le voit.
*/
.bouton-clignoter { border: 1px solid var(--trait-clair); background: var(--bg-card); color: var(--text-muted); border-radius: 6px; width: 1.9rem; height: 1.9rem;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: var(--t-moyenne); padding: 0; }
:where(body.ecran-atelier) .bouton-clignoter:hover { background: var(--bg-page); color: var(--bleu); border-color: var(--vert); }
/* Les deux colonnes de gestes se serrent contre la dernière colonne de
   données : larges, elles laissaient une bande vide après « Zone ». */
:where(body.ecran-atelier) .tbl-conc td.td-menu { padding-left: 0; padding-right: 0.2rem; width: 1px; white-space: nowrap; }
/*
  Ne pas animer le <svg> du marqueur lui-même : MapLibre le repeint à
  chaque rendu de la carte et coupe l'animation avant qu'elle n'ait eu le
  temps de jouer. `svg.getAnimations()` renvoie un tableau vide sur le
  <svg> du marqueur, alors que le même test sur un <svg> neuf portant la
  même classe retourne bien une animation « running » ; la classe CSS est
  pourtant posée et `getComputedStyle` la dit « running ». Rien ne bouge à
  l'écran, silencieusement.

  D'où un halo indépendant du marqueur : un <div> à part, posé aux
  coordonnées écran du point (`map.project`), jamais touché par MapLibre,
  qui grandit, s'efface, puis se retire lui-même. Il porte sa propre
  couleur (rouge/teal, comme le point) plutôt que de zoomer sur le
  marqueur : même lisibilité, zéro conflit avec le rendu de la carte.
*/
:where(body.ecran-atelier) .halo-clignote { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border-radius: 50%; pointer-events: none; z-index: 5; animation: diamap-halo 1.4s ease-out; }
@keyframes diamap-halo { 0% { transform: scale(0.4); opacity: .85; } 100% { transform: scale(4.2); opacity: 0; } }
:where(body.ecran-atelier) .fc-chiffres { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 0.35rem; font-size: var(--t-note); color: var(--tag-texte); }
:where(body.ecran-atelier) .fc-zone { display: inline-flex; align-items: center; }
:where(body.ecran-atelier) .fc-hors { color: var(--text-faint); font-style: italic; }
:where(body.ecran-atelier) .fc-actions { display: flex; gap: 0.3rem; margin-top: 0.5rem; flex-wrap: wrap; }
:where(body.ecran-atelier) .fc-actions .bouton { margin: 0; font-size: var(--t-note); padding: 0.15rem 0.5rem; }

/* Le tableau des points, en remplacement des vignettes : trois boutons
   par vignette faisaient 117 boutons à Amiens et 2 496 à Paris. Une
   ligne, un menu. */
/* Les filtres de zone ont rejoint la ligne des onglets (`.fz`) : deux
   barres empilées faisaient deux lignes à traverser avant d'atteindre la
   donnée, dans un panneau qui partage déjà sa largeur avec la carte. Le
   trait `.sep-filtres` les sépare. */
:where(body.ecran-atelier) .onglets-conc .sep-filtres { width: 1px; align-self: stretch; background: var(--trait-clair); margin: 0.15rem 0.35rem; }
:where(body.ecran-atelier) .onglets-conc .fz { border: 1px solid var(--trait-clair); background: var(--bg-card); border-radius: 999px; padding: 0.1rem 0.7rem; font: inherit; font-size: var(--t-note); color: var(--text-muted); cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
/* `background` redéclaré au survol : sans lui, `button:hover` de base.html
   repeint le bouton en bleu marine et efface la pastille. */
:where(body.ecran-atelier) .onglets-conc .fz:hover { background: var(--bg-survol); border-color: var(--border); color: var(--text); }
:where(body.ecran-atelier) .onglets-conc .fz.actif { background: var(--primary); border-color: var(--vert); color: var(--sur-couleur); font-weight: 700; }
:where(body.ecran-atelier) .onglets-conc .fz.actif:hover { background: var(--primary); color: var(--sur-couleur); }
:where(body.ecran-atelier) .resume-etude p { margin: 0.15rem 0; line-height: 1.35; }
:where(body.ecran-atelier) .resume-etude .estim-titre { margin-bottom: 0.5rem; }
:where(body.ecran-atelier) .cc-puce { display: inline-block; border-radius: 999px; padding: 0.05rem 0.55rem; font-size: var(--t-note); font-weight: 700; margin-right: 0.3rem; }
:where(body.ecran-atelier) .cc-conc { background: var(--danger-fond); color: var(--danger); }
:where(body.ecran-atelier) .cc-attr { background: var(--vivant-fond); color: var(--vivant-fonce); }
:where(body.ecran-atelier) .tbl-conc { width: 100%; border-collapse: collapse; }
:where(body.ecran-atelier) .tbl-conc th { text-align: left; font-size: var(--t-note); font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--trait-clair); }
/* Lignes resserrées : 0,35 rem de creux au-dessus et en dessous faisaient
   respirer un tableau qu'on balaie - on en lisait trois de moins par
   écran. Le filet gris suffit à séparer deux lignes. */
:where(body.ecran-atelier) .tbl-conc td { padding: 0.15rem 0.5rem; border-bottom: 1px solid var(--gris-bg); vertical-align: middle; font-size: var(--t-note); }
:where(body.ecran-atelier) .tbl-conc tr:hover td { background: var(--bg-survol); }
/* `tabular-nums` : sans lui, les distances ne s'alignent pas en colonne et
   on ne peut plus comparer d'un coup d'œil - ce pour quoi le tableau
   existe. */
/*
  `width: 1%` aussi sur les colonnes de chiffres. `nowrap` empêche SURFACE
  et DIST. de passer à la ligne, mais ne les empêche pas de recevoir leur
  part de la place libre en `table-layout: auto` ; seul `width: 1%` force
  le vrai resserrement. Visible uniquement quand le panneau s'élargit
  au-delà de sa largeur par défaut (poignée de la carte) : l'écart entre
  les chiffres et « Zone » se creusait au lieu de revenir tout entier à
  « Enseigne ».
*/
:where(body.ecran-atelier) .tbl-conc .nb { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; width: 1%; }
:where(body.ecran-atelier) .tbl-conc .th-nature, :where(body.ecran-atelier) .tbl-conc .th-menu { width: 1%; white-space: nowrap; }
/*
  C'est « Enseigne » qui absorbe la place en trop. Toutes les colonnes
  étaient à leur largeur minimale sauf « Zone », qui héritait donc de tout
  l'espace libre : le mot « Zone de combat » restait calé à gauche et la
  bande vide s'étalait derrière lui, jusqu'aux boutons. L'élasticité va au
  texte long, et « Zone » se serre sur son contenu.
*/
/*
  `width: auto`, pas `100%` : forcer la première colonne à 100 % la
  faisait réclamer toute la largeur en plus des autres, qui sont en
  `nowrap` ; le tableau dépassait son panneau et se donnait une barre de
  défilement horizontale. `auto` lui laisse le reste, et `word-break`
  permet à un nom long de passer à la ligne plutôt que de pousser le
  tableau.
*/
/*
  Sur les noms, ni `overflow-wrap: anywhere`, qui coupait au milieu des
  mots dès que la largeur se resserrait (« BE / DIGITAL », « AUCHAN
  SUPERMA / RCHE »), ni `nowrap`, qui alignait bien les colonnes mais
  laissait un nom long réclamer toute sa largeur - le tableau dépassait
  alors son panneau et la colonne des gestes se retrouvait hors champ.
  Les noms reviennent à la ligne aux espaces (`normal`) : ils tiennent
  presque tous sur une ligne depuis que la ville en est retirée, et les
  rares longs se replient sans pousser personne.
*/
/* LA SURFACE : le nombre, la jauge dessous. Cote a cote, la jauge prenait
   la moitie du tableau pour un trait de trois pixels sur la plupart des
   lignes, et les nombres cessaient de s'aligner - or c'est pour les
   comparer qu'on ouvre ce tableau. */
:where(body.ecran-atelier) .tbl-conc .td-surface .poids { display: flex;
  flex-direction: column; align-items: flex-end; gap: .15rem; }
:where(body.ecran-atelier) .tbl-conc .td-surface .jauge { width: 4.5rem; height: 3px;
  min-width: 0; background: var(--gris-bg); }
:where(body.ecran-atelier) .tbl-conc .td-surface .jauge i { background: var(--danger); }
:where(body.ecran-atelier) .tbl-conc .td-surface .jauge.att i { background: var(--nature-attracteur); }
/* La pastille de zone suit le temps qui la decide, apres le nombre. */
:where(body.ecran-atelier) .tbl-conc .td-temps .zone-pt { margin-left: .4rem;
  vertical-align: .04rem; }
:where(body.ecran-atelier) .tbl-conc { table-layout: auto; }
:where(body.ecran-atelier) .tbl-conc td, :where(body.ecran-atelier) .tbl-conc th { vertical-align: middle; }
/* Le bilan garde son retour à la ligne - quatre chiffres ne tiennent pas
   toujours sur une ligne dans un panneau qui partage sa largeur avec la
   carte. Mais le BOUTON, lui, ne suit pas : sorti du flux, il reste calé
   en haut à droite quels que soient les retours. Dans le flux, il tombait
   seul sur une ligne, et un bouton isolé ne dit plus à quoi il se
   rapporte. */
:where(body.ecran-atelier) .bilan-conc { position: relative; display: flex; gap: 1.05rem; flex-wrap: wrap; align-items: baseline; padding: 0 6.3rem 0.7rem 0; }
:where(body.ecran-atelier) .bilan-conc .lib { display: block; font-size: var(--t-petite); color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; }
:where(body.ecran-atelier) .bilan-conc b { font-size: var(--t-grande); letter-spacing: -0.01em; }
:where(body.ecran-atelier) .bilan-conc b.rival { color: var(--nature-concurrent); }
:where(body.ecran-atelier) .bilan-conc b.attract { color: var(--vert-fonce); }
/* Le bouton d'ajout ne se DÉTACHE jamais du bilan : `flex: none` et pas
   de retour à la ligne. Sans cela il tombait seul sur une ligne quand la
   largeur manquait, et un bouton isolé ne dit plus à quoi il se rapporte. */
:where(body.ecran-atelier) .bilan-conc .ajout-conc { position: absolute; top: 0; right: 0; white-space: nowrap; }
/* L'en-tête s'aligne sur sa valeur : un libellé à gauche au-dessus de
   chiffres à droite fait deux colonnes pour les yeux, exactement le
   travail que le tableau devait leur épargner. */
:where(body.ecran-atelier) .tbl-conc th.nb { text-align: right; }
:where(body.ecran-atelier) .tbl-conc th.th-surface { text-align: left; }
/* La surface porte son nombre puis sa jauge : c'est la colonne, pas une
   décoration à côté. Dans le Huff, la surface décide de l'attractivité,
   la montrer c'est montrer la menace sans avoir à lire les chiffres. */
:where(body.ecran-atelier) .tbl-conc .poids { display: flex; align-items: center; gap: 0.6rem; }
:where(body.ecran-atelier) .tbl-conc .nb-surface { width: 4.8rem; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; flex: none; }
:where(body.ecran-atelier) .tbl-conc .jauge { flex: 1; min-width: 2.5rem; height: 0.4rem; background: var(--trait-clair); border-radius: 3px; overflow: hidden; }
:where(body.ecran-atelier) .tbl-conc .jauge i { display: block; height: 100%; background: var(--danger); }
:where(body.ecran-atelier) .tbl-conc .jauge.att i { background: var(--nature-attracteur); }
/* Le rôle en pastille, à la place des deux blocs « Concurrents » /
   « Attracteurs » : ceux-ci coupaient en deux moitiés un tri par temps. */
:where(body.ecran-atelier) .tbl-conc .role-pt { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; margin-right: 0.4rem; vertical-align: 0.03rem; flex: none; }
:where(body.ecran-atelier) .tbl-conc .role-pt.riv { background: var(--nature-concurrent); }
:where(body.ecran-atelier) .tbl-conc .role-pt.att { background: var(--nature-attracteur); }
/* La zone tient sur UNE ligne : la pastille dit la couleur, le mot dit
   laquelle. Sur deux lignes, chaque ligne du tableau gagnait 18 px pour
   ne rien apprendre de plus. */
:where(body.ecran-atelier) .tbl-conc .th-zone { white-space: nowrap; }
:where(body.ecran-atelier) .tbl-conc td:first-child { white-space: normal; }
/*
  La colonne Zone se vise par son nom, pas par sa position. Elle était
  ciblée par `nth-last-child(3)`, juste tant que la colonne « Nature » et
  celle de l'œil existaient ; les retirer a décalé le compte, la règle
  visait « Distance », et la colonne Zone reprenait la largeur qu'on
  venait de lui faire rendre. Une position se périme au premier changement
  de structure, un nom non. Zone est la dernière colonne de texte : c'est
  elle qui cède la place quand le panneau se resserre.
*/
:where(body.ecran-atelier) .tbl-conc .th-zone { width: 1%; }
/* Marges resserrées : cinq colonnes dans un panneau qui peut descendre
   à 400 px - chaque dixième de rem gagné sur les côtés compte double. */
:where(body.ecran-atelier) .tbl-conc td, :where(body.ecran-atelier) .tbl-conc th { padding-left: 0.3rem; padding-right: 0.3rem; }
:where(body.ecran-atelier) .tbl-conc .fc-adresse { margin-top: 0.1rem; }
:where(body.ecran-atelier) .fc-vide { color: var(--border); }
:where(body.ecran-atelier) .tbl-conc-pied { margin-top: 0.45rem; }

/* Le menu est en `position: fixed` : en `absolute`, il serait rogné par
   le débordement de son tableau et on n'en verrait qu'une bande. Ici il
   sort du flux, et Alpine le referme au clic dehors. */
:where(body.ecran-atelier) .menu-conc { position: relative; }
:where(body.ecran-atelier) .menu-conc-bouton { border: 1px solid var(--trait-clair); background: var(--bg-card); border-radius: 6px; color: var(--text-muted); font: inherit; font-weight: 700; letter-spacing: 0.06em; line-height: 1; padding: 0.2rem 0.45rem; cursor: pointer; }
:where(body.ecran-atelier) /* Au survol, :where(body.ecran-atelier) le bouton devenait un rectangle bleu marine plein et le
   glyphe ⋯ disparaissait. `base.html` peint
   `button:hover { background: var(--primary-hover) }:where(body.ecran-atelier) ` pour toute l'application ; la
   règle de survol d'ici changeait la bordure et la couleur du texte, :where(body.ecran-atelier) mais
   pas le fond, :where(body.ecran-atelier) que le fond global remplissait donc. Une règle qui ne
   redéclare qu'une partie de ce qu'elle remplace laisse le reste en
   place, :where(body.ecran-atelier) et cela ne se voit qu'à l'écran : rien n'est invalide, :where(body.ecran-atelier) rien
   n'échoue. */
.menu-conc-bouton:hover { background: var(--bg-survol); border-color: var(--border); color: var(--text); }
/* Le focus doit rester visible au clavier - mais par un anneau, pas en
   effaçant ce qu'il désigne. */
:where(body.ecran-atelier) .menu-conc-bouton:focus, :where(body.ecran-atelier) .menu-conc-bouton:focus-visible { background: var(--bg-survol); color: var(--text); border-color: var(--vert); outline: 2px solid var(--vert); outline-offset: 1px; }
:where(body.ecran-atelier) .menu-conc-liste { position: absolute; right: 0; top: calc(100% + 0.2rem); z-index: 60; min-width: 11rem; background: var(--bg-card); border: 1px solid var(--marine-trait); border-radius: 8px; box-shadow: 0 6px 20px var(--ombre-douce); padding: 0.25rem; display: flex; flex-direction: column; }
:where(body.ecran-atelier) .menu-conc-liste button { margin: 0; border: 0; background: none; font: inherit; font-size: var(--t-note); text-align: left; color: var(--text); padding: 0.3rem 0.55rem; border-radius: 5px; cursor: pointer; }
:where(body.ecran-atelier) .menu-conc-liste button:hover { background: var(--bg-survol); }
:where(body.ecran-atelier) .menu-conc-danger { color: var(--danger); }
:where(body.ecran-atelier) .menu-conc-danger:hover { background: var(--danger-fond); }
@media (max-width: 720px) { :where(body.ecran-atelier) .ligne-zones { grid-template-columns: 1fr; } :where(body.ecran-atelier) .champ-vide { display: none; } }
:where(body.ecran-atelier) .estim-entete { display: flex; gap: 0.75rem; margin-bottom: 0.5rem; }
:where(body.ecran-atelier) .estim-identite { flex: 1; background: var(--tag-texte); color: var(--sur-couleur); border-radius: 8px; padding: 0.45rem 0.9rem; }
:where(body.ecran-atelier) .estim-identite span { display: block; font-size: var(--t-note); text-transform: uppercase; letter-spacing: 0.06em; color: var(--border); }
/* L'évolution du CA dans le bandeau du haut. Elle prend le double d'une
   case d'identité : trois montants et deux chevrons ne tiennent pas dans
   la largeur d'un libellé, et les serrer rendrait la progression
   illisible - or c'est elle qu'on vient lire. */
:where(body.ecran-atelier) .estim-evolution { flex: 2.2; background: var(--text); color: var(--sur-couleur); border-radius: 8px; padding: 0.45rem 0.9rem; }
:where(body.ecran-atelier) .estim-evolution > span { display: block; font-size: var(--t-note); text-transform: uppercase; letter-spacing: 0.06em; color: var(--border); }
:where(body.ecran-atelier) .evol-ans { display: flex; align-items: baseline; gap: 0.55rem; }
:where(body.ecran-atelier) .evol-an { display: flex; align-items: baseline; gap: 0.3rem; }
:where(body.ecran-atelier) .evol-lib { font-size: var(--t-petite); color: var(--text-faint); }
/* Les trois montants GRANDISSENT - un total isolé se lirait comme un
   régime atteint dès l'ouverture, alors que le standard est 80 % en
   année 1. La taille dit la progression avant même qu'on lise. */
:where(body.ecran-atelier) .evol-val { line-height: 1.1; font-weight: 800; letter-spacing: -0.01em; }
:where(body.ecran-atelier) .evol-val.v1 { font-size: var(--t-petite); color: var(--marine-trait); }
:where(body.ecran-atelier) .evol-val.v2 { font-size: var(--t-moyenne); color: var(--marine-trait); }
:where(body.ecran-atelier) .evol-val.v3 { font-size: var(--t-grande); color: var(--sur-couleur); }
:where(body.ecran-atelier) .evol-fleche { color: var(--text-muted); }
:where(body.ecran-atelier) .evol-vide { margin: 0.15rem 0 0; font-size: var(--t-petite); color: var(--text-faint); }
/* `relative` : repère de positionnement des éléments posés sur la galerie. */
:where(body.ecran-atelier) .bandeau-vertical { position: relative; }
/* Le glisser qui superpose une carte sur une autre. */
:where(body.ecran-atelier) .carte-v .poignee-glisser { color: var(--border); font-size: var(--t-petite); flex: none; cursor: grab; margin-right: 0.15rem; }
:where(body.ecran-atelier) .carte-v:hover .poignee-glisser { color: var(--text-faint); }
:where(body.ecran-atelier) .carte-v[draggable="true"]:active { cursor: grabbing; }
/* Le voile dit ce qui va se passer avant qu'on lâche ; sans lui, on lâche
   pour voir.

   `[hidden]` doit venir d'abord : l'attribut applique `display: none` par
   une règle du navigateur, de spécificité plus faible que la nôtre, et un
   `display: flex` écrit ensuite l'écrase - le voile et la légende
   s'affichaient alors en travers de la carte au chargement. */
:where(body.ecran-atelier) .voile-depot[hidden], :where(body.ecran-atelier) .legende-sup[hidden] { display: none; }
:where(body.ecran-atelier) .voile-depot { position: absolute; inset: 8px; z-index: 6; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; border: 2px dashed var(--marine); border-radius: 8px; background: var(--marine-fond); color: var(--bleu); font-size: var(--t-moyenne); font-weight: 600; pointer-events: none; }
/* La légende de la couche ajoutée est très réduite : elle ne dit que deux
   choses, ce qui est par-dessus et comment l'enlever. Les bornes restent
   dans la légende du fond ; les répéter donnerait deux légendes
   concurrentes sur la même carte. Elle vit en haut, seule : la légende du
   fond est en bas, et deux blocs dans le même coin se recouvrent. */
/* La legende de la couche superposee se range PRES DU RAIL qui l'a
   posee, et non au centre : elle y partageait le pixel avec la consigne
   de retouche et la confirmation de deplacement. */
:where(body.ecran-atelier) .legende-sup { position: absolute; top: 4rem; right: 4.9rem;
  z-index: 8; display: flex; align-items: center; gap: .5rem;
  padding: .4rem .5rem .4rem .8rem; border-radius: 999px;
  background: var(--bg-card); border: 1px solid var(--border-carte);
  box-shadow: var(--ombre-flottant); font-size: var(--t-dense); font-weight: 600; color: var(--text); }
:where(body.ecran-atelier) .legende-sup .pastille-sup { width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--carte-superposee); opacity: 0.8; flex: none; border: 1px solid var(--sur-couleur); }
/* Deux pastilles : la taille du cercle dit la valeur, la legende le montre. */
:where(body.ecran-atelier) .legende-sup .pastille-sup.petite { width: 0.38rem; height: 0.38rem; margin-left: -0.2rem; }
:where(body.ecran-atelier) .legende-sup .sup-taille { color: var(--text-faint); font-size: var(--t-note); white-space: nowrap; }
:where(body.ecran-atelier) .legende-sup .sup-nom { font-weight: 600; color: var(--tag-texte); white-space: nowrap; }
:where(body.ecran-atelier) .legende-sup .sup-retirer { display: inline-flex; align-items: center; justify-content: center; background: none; border: none; color: var(--text-faint); cursor: pointer; padding: 0 0.1rem; line-height: 1; font-size: var(--t-note); }
:where(body.ecran-atelier) .legende-sup .sup-retirer:hover { color: var(--danger); background: none; }
/* La légende des couleurs devient un repère, redonnée au survol : on
   l'apprend une fois, elle occupait l'écran en permanence. */
:where(body.ecran-atelier) .legende-repere { display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem; border-radius: 50%; border: 1px solid var(--border); color: var(--text-faint); font-size: var(--t-petite); cursor: help; margin-left: 0.4rem; vertical-align: -0.15rem; }
:where(body.ecran-atelier) .legende-repere:hover { border-color: var(--vert); color: var(--bleu); }
:where(body.ecran-atelier) .legende-estim { font-size: var(--t-note); color: var(--text-muted); margin: 0.25rem 0 0.75rem; }
/* Les trois écrans de l'étape 4. Des onglets, pas des boutons : un onglet
   dit qu'on change de vue sur la même chose, un bouton qu'on déclenche
   une action. Le trait sous l'actif fait la différence à l'œil. */
:where(body.ecran-atelier) .puce-legende { display: inline-block; width: 0.75rem; height: 0.75rem; border-radius: 3px; vertical-align: -1px; margin: 0 0.3rem 0 0.8rem; border: 1.5px solid var(--border); background: var(--bg-card); }
:where(body.ecran-atelier) .puce-legende.p-saisie { border-color: var(--vert-fonce); background: var(--vert-pale); }
:where(body.ecran-atelier) .puce-legende.p-source { background: var(--marine-fond); border-color: var(--marine-trait); }
:where(body.ecran-atelier) .puce-legende.p-total { background: var(--text); border-color: var(--text); }
/* Bandeau de validation (Phase 2), toujours en tête du panneau. */
/* La forme du bandeau vient de `.bandeau-atelier` (diamap.css), partagée
   avec la barre de la carte. Ne restent ici que les traits qui lui sont
   propres : la marge sous lui, le liseré de couleur d'état à gauche, et
   les coins arrondis, que la barre de la carte n'a pas puisqu'elle est
   collée au bord de la carte. */
/* Pas de trait coloré à gauche : un bord de 4 px teinté selon l'état    */
/* (`.etat-brouillon/soumise/validee`) se lisait comme un signal fort     */
/* alors que la frise, juste en dessous, dit déjà tout. Un bandeau uni    */
/* suffit.                                                                */
:where(body.ecran-atelier) .bandeau-validation { margin: 0 0 0.8rem; border-radius: 8px; }
:where(body.ecran-atelier) .bandeau-validation .v-note { font-size: var(--t-note); color: var(--alerte); }
:where(body.ecran-atelier) .bandeau-validation .v-motif { color: var(--danger); }
/* Le lien vers la zone contractee, seul geste qui reste sur une etude
   verrouillee : discret comme la note a cote de laquelle il vit. */
:where(body.ecran-atelier) .bandeau-validation .v-lien { font-size: var(--t-note); color: var(--text-muted); text-decoration: none; }
:where(body.ecran-atelier) .bandeau-validation .v-lien:hover { color: var(--vert-fonce); text-decoration: underline; }

:where(body.ecran-atelier) .estim-carte { background: var(--bg-card); border: 1px solid var(--marine-trait); border-radius: 10px; padding: 0.6rem 0.9rem 0.9rem; margin-bottom: 0.8rem; }
/* Le bloc du modèle, posé juste au-dessus des trois taux qu'il remplace.
   Le filet de gauche le distingue des cartes de saisie : ce n'est pas un
   formulaire, c'est un calcul qu'on déclenche. */
:where(body.ecran-atelier) .bloc-modele-ca { border-left: 4px solid var(--primary); }
:where(body.ecran-atelier) .bloc-modele-ca .modele-ligne { margin: 0.2rem 0 0.7rem; font-size: var(--t-texte); line-height: 1.45; }
/* Aucun modèle en service n'est pas une PANNE : gris, pas rouge - l'étape
   4 continue de fonctionner en saisie manuelle, comme avant. */
:where(body.ecran-atelier) .bloc-modele-ca .modele-absent { color: var(--text-muted); }
:where(body.ecran-atelier) .bloc-modele-ca .modele-note { font-size: var(--t-note); color: var(--text-muted); margin-left: 0.6rem; }
:where(body.ecran-atelier) .bloc-modele-ca .modele-message { background: var(--vert-pale); border-left: 3px solid var(--vert-fonce); padding: 0.5rem 0.7rem; border-radius: 0 4px 4px 0; font-size: var(--t-note); margin: 0.6rem 0 0.8rem; }
:where(body.ecran-atelier) .bloc-modele-ca .modele-tab { margin-top: 0.5rem; }
/* §5.4 - hors bornes de surface : VISIBLE, pas une note de bas de page.
   Le consultant doit savoir ce qu'il montre avant de s'engager dessus. */
:where(body.ecran-atelier) .bloc-modele-ca .modele-avertissement { background: var(--ambre-bg); border-left: 4px solid var(--ambre); padding: 0.6rem 0.8rem; border-radius: 0 4px 4px 0; font-size: var(--t-note); line-height: 1.45; margin: 0.6rem 0 0.8rem; }
/* Deux boutons, deux questions : « qu'est-ce que ça coûte à mon réseau ? »
   et « ce chiffre est-il crédible ? ». Empilés sous l'estimation, il
   fallait tout lire pour trouver l'un ou l'autre. */
/* Les boutons sont sur la ligne du titre : tout en bas du bloc, ils      */
/* étaient loin du titre « Le modèle de CA » auquel ils se rapportent.    */
/* `.estim-titre-ligne` les pose sur la même ligne ; `.modele-boutons`    */
/* garde son nom et son style, seule sa position change.                  */
/* `.modele-volets` ne porte plus que les deux volets, restés juste après */
/* le tableau qu'ils détaillent.                                          */
:where(body.ecran-atelier) .estim-titre-ligne { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; }
:where(body.ecran-atelier) .estim-titre-ligne .modele-boutons { margin: 0; }
:where(body.ecran-atelier) .modele-boutons { display: flex; flex-wrap: wrap; gap: 0.5rem; }
:where(body.ecran-atelier) .modele-boutons .btn-secondaire { background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 0.45rem 0.8rem; font-size: var(--t-note); cursor: pointer; color: var(--bleu); font-weight: 600; }
:where(body.ecran-atelier) .modele-boutons .btn-secondaire:hover { border-color: var(--primary); }
/* Le volet OUVERT se distingue : sans cela, deux clics plus tard on ne
   sait plus lequel des deux on regarde. */
:where(body.ecran-atelier) .modele-boutons .btn-secondaire.actif { background: var(--primary); color: var(--sur-couleur); border-color: var(--vert); }
:where(body.ecran-atelier) .modele-boutons .pastille-compte { display: inline-block; margin-left: 0.35rem; background: var(--marine-fond); color: var(--tag-texte); border-radius: 10px; padding: 0 0.4rem; font-size: var(--t-note); }
:where(body.ecran-atelier) .modele-boutons .btn-secondaire.actif .pastille-compte { background: var(--voile-clair); color: var(--sur-couleur); }
/* `.modele-volets` garde sa mécanique flex : `.modele-volet` s'appuie  */
/* sur `flex: 0 0 100%` pour prendre toute la largeur, et un flex-basis */
/* ne s'applique que dans un conteneur flex.                            */
:where(body.ecran-atelier) .modele-volets { display: flex; flex-wrap: wrap; margin-top: 1rem; }
/* Le volet prend toute la largeur (flex-basis 100 %). */
:where(body.ecran-atelier) .modele-volet { flex: 0 0 100%; margin-top: 0.6rem; }
/* La ligne cochée pose le magasin sur la carte. La case dit ce qu'un clic
   sur la ligne laisserait deviner : que la sélection se décoche, et
   qu'elle peut ne rien sélectionner du tout. */
/* Les tableaux du modèle sont en corps de note : ils vivent dans un
   panneau étroit, à côté d'une carte, et au corps du texte courant trois
   magasins et leurs écarts passaient à la ligne - la comparaison, qui est
   toute la valeur de ces tableaux, se lisait alors en escalier. */
:where(body.ecran-atelier) .modele-tab, :where(body.ecran-atelier) .modele-tab td, :where(body.ecran-atelier) .modele-tab th { font-size: var(--t-note); }
/* La surface du SITE, sous celle du magasin comparé : le nombre seul
   ne dit pas s'il est proche ou lointain, et c'est la seule question
   que ce tableau pose. */
:where(body.ecran-atelier) .modele-tab .ecart-site { display: block; color: var(--text-faint); font-size: var(--t-petite); }
:where(body.ecran-atelier) .modele-tab .c-choix { width: 1.4rem; padding-right: 0.2rem; }
:where(body.ecran-atelier) .modele-tab .voir-sur-carte { cursor: pointer; margin: 0; }
:where(body.ecran-atelier) .modele-tab .ligne-cannibale.sur-carte { background: var(--marine-fond); }
:where(body.ecran-atelier) .modele-tab .ligne-cannibale.sur-carte .etiquette { color: var(--bleu); font-weight: 700; }
/* La zone modélisée : un geste à part du formulaire de zonage. */
/* 0.85rem, le même écart que partout ailleurs entre deux blocs empilés. */
/* margin-top: 0, sans quoi les 1.25rem par défaut de base.html          */
/* s'ajoutent au padding de la boîte : un bouton qui flotte loin de son  */
/* propre bord haut, dans une carte pourtant déjà resserrée.             */
:where(body.ecran-atelier) .zone-modelisee { margin-top: 0.7rem; }
:where(body.ecran-atelier) .zone-modelisee .zm-titre { margin: 0 0 0.3rem; font-size: var(--t-texte); }
:where(body.ecran-atelier) .zone-modelisee .zm-detail { margin: 0 0 0.4rem; font-size: var(--t-note); color: var(--text-muted); line-height: 1.45; }
:where(body.ecran-atelier) .zone-modelisee .zm-version { color: var(--text-faint); }
/* Le bouton qui applique vit à côté de la proposition qu'il applique. */
:where(body.ecran-atelier) .zone-modelisee .bouton-appliquer { display: block; margin: 0.6rem 0 0; }
/* Le repli manuel : un texte, pas un bouton plein - c'est la voie */
/* secondaire, elle ne doit pas peser autant que le modèle.        */
/* Marge du haut posée explicitement à 0.85rem : sans règle, ce `<p>`  */
/* prend la marge par défaut du navigateur (~1em), plus grande que     */
/* l'écart entre tous les autres blocs empilés de cette carte.         */
:where(body.ecran-atelier) .note-a-venir { margin: 0.85rem 0 0; color: var(--text-faint); }
/* 0.85rem sous le titre, comme entre les autres blocs empilés. */
:where(body.ecran-atelier) .estim-titre { margin: 0 0 0.85rem; font-size: var(--t-note); font-weight: 700; color: var(--tag-texte); border: 1px solid var(--marine-trait); display: inline-block; padding: 0.15rem 0.6rem; border-radius: 6px 6px 0 0; border-bottom: none; background: var(--bg-card); }
:where(body.ecran-atelier) .estim-tab { border-collapse: separate; border-spacing: 4px 4px; width: 100%; margin: 0; border: none; background: transparent; }
:where(body.ecran-atelier) .estim-tab td, :where(body.ecran-atelier) .estim-tab th { border: none; padding: 0; }
:where(body.ecran-atelier) .estim-tab .etiquette { color: var(--text-faint); font-size: var(--t-note); padding-right: 0.5rem; white-space: nowrap; }
:where(body.ecran-atelier) .estim-tab .pill { text-align: center; color: var(--sur-couleur); font-size: var(--t-note); font-weight: 700; border-radius: 6px; padding: 0.3rem 0.4rem; }
:where(body.ecran-atelier) .pill.pz1 { background: var(--danger); }
:where(body.ecran-atelier) .pill.pz2 { background: var(--zone-combat); }
:where(body.ecran-atelier) .pill.pz3 { background: var(--ambre); }
:where(body.ecran-atelier) .pill.ptotal, :where(body.ecran-atelier) .entete-annee { background: var(--text); color: var(--sur-couleur); text-align: center; font-size: var(--t-note); font-weight: 700; border-radius: 6px; padding: 0.3rem 0.4rem; }
:where(body.ecran-atelier) .estim-tab .c-saisie input, :where(body.ecran-atelier) .mini-saisie { width: 100%; max-width: none; border: 1.5px solid var(--vert-fonce); background: var(--vert-pale); border-radius: 6px; text-align: right; padding: 0.3rem 0.5rem; margin: 0; font-weight: 600; }
:where(body.ecran-atelier) .mini-saisie { display: inline-block; width: 3.2rem; padding: 0.1rem 0.3rem; }
:where(body.ecran-atelier) .estim-tab .c-calcule, :where(body.ecran-atelier) .estim-tab .c-source, :where(body.ecran-atelier) .estim-tab .c-total-clair, :where(body.ecran-atelier) .estim-tab .c-total, :where(body.ecran-atelier) .estim-tab .c-resultat { text-align: right; font-size: var(--t-note); border-radius: 6px; padding: 0.32rem 0.55rem; font-weight: 600; }
:where(body.ecran-atelier) .estim-tab .c-calcule { background: var(--bg-card); border: 1px solid var(--marine-trait); }
:where(body.ecran-atelier) .estim-tab .c-source { background: var(--marine-fond); color: var(--marine); }
:where(body.ecran-atelier) .estim-tab .c-total-clair { background: var(--vert-pale); border: 1px solid var(--succes-trait); }
:where(body.ecran-atelier) .estim-tab .c-total { background: var(--text); color: var(--sur-couleur); }
:where(body.ecran-atelier) .estim-tab .c-resultat { background: var(--vert-pale); border: 2px solid var(--vert-fonce); font-weight: 700; }

/*
  Le menu d'état n'a pas son habillage ici : il vit dans
  `static/css/diamap.css`, à côté du gabarit `etudes/_menu_etat.html`
  qu'il habille. Le composant est partagé entre la fiche et la liste, et
  son style était recopié dans les deux, à l'identique - deux copies qui
  n'ont tenu que le temps de la première correction.
*/

:where(body.ecran-atelier) .estim-deux-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
:where(body.ecran-atelier) .estim-deux-colonnes .estim-carte { margin-bottom: 0.8rem; }
/* Le pavé des résidences secondaires OUVERT prend les deux colonnes :
   son tableau porte sept colonnes de montants, et sur une demi-page
   chaque nombre passait à la ligne (« 193 142 » puis « € ») pendant que
   la colonne de droite restait vide sous les Résultats. */
:where(body.ecran-atelier) .estim-deux-colonnes > .estim-carte.avec-detail { grid-column: 1 / -1; }
:where(body.ecran-atelier) .estim-carte.avec-detail #panneau-tourisme .estim-tab { width: 100%; }
:where(body.ecran-atelier) .estim-actions { display: flex; gap: 0.6rem; }
:where(body.ecran-atelier) .estim-actions .secondaire { background: var(--bg-card); color: var(--text); border: 1px solid var(--border); }
:where(body.ecran-atelier) .estim-actions button[disabled] { background: var(--text-faint); }
/* Détail du bonus touristique (résidences secondaires) */
:where(body.ecran-atelier) .detail-tourisme { margin: 0.4rem 0 0; background: var(--vert-fonce); font-size: var(--t-note); padding: 0.35rem 0.8rem; }
:where(body.ecran-atelier) .estim-carte.tourisme { border-color: var(--border); }
:where(body.ecran-atelier) .tourisme-entete { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.6rem; }
/* Le chiffre et son titre sont centrés dans leur case, comme partout sauf
   en tableau. Le bloc avait déjà le titre au-dessus et le chiffre en
   dessous, mais alignés à gauche : sur une rangée de blocs de largeurs
   différentes, l'œil ne trouve plus de ligne commune et doit repartir à
   gauche à chaque fois. */
:where(body.ecran-atelier) .bandeau-chiffre { display: inline-flex; flex-direction: column; align-items: center; text-align: center; background: var(--gris-bg); border: 1px solid var(--marine-trait); border-radius: 8px; padding: 0.3rem 0.8rem; font-size: var(--t-note); color: var(--text-muted); }
:where(body.ecran-atelier) .bandeau-chiffre strong { font-size: var(--t-note); color: var(--text); }
:where(body.ecran-atelier) .ligne-adressable { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0 auto; }
:where(body.ecran-atelier) .ligne-adressable label { margin: 0; font-size: var(--t-note); white-space: nowrap; }
:where(body.ecran-atelier) .ligne-adressable input { width: 5.5rem; margin: 0; border: 1.5px solid var(--vert-fonce); background: var(--vert-pale); text-align: right; }
:where(body.ecran-atelier) .ligne-adressable button { margin: 0; background: var(--vert-fonce); padding: 0.35rem 0.9rem; }
:where(body.ecran-atelier) .note-source { font-size: var(--t-note); color: var(--text-faint); margin: 0.4rem 0 0; }

/* La feuille modale de modification d'un concurrent : fond assombri sur
   toute la page, panneau centré. La fiche ne s'insère plus dans la
   grille, elle passe par-dessus, et la liste ne bouge pas. */
:where(body.ecran-atelier) .modale-fond { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: var(--marine-voile); padding: 1rem; }
/* 48 rem au lieu de 32 : les deux colonnes de champs (Nom/Enseigne,
   Adresse/Surface) se serraient au point qu'une adresse ne tenait plus
   dans son champ. Le contenu décide de la largeur, la fenêtre suit. */
:where(body.ecran-atelier) .modale-panneau { position: relative; background: var(--bg-card); border-radius: 10px; box-shadow: 0 12px 40px var(--ombre-moyenne); padding: 1.4rem 1.5rem; width: 100%; max-width: 48rem; max-height: 90vh; overflow-y: auto; }
:where(body.ecran-atelier) .modale-titre { margin: 0 2rem 0.9rem 0; font-size: var(--t-section); }
/* La croix : un bouton discret en haut à droite, assez grand pour être visé. */
:where(body.ecran-atelier) .modale-fermer { position: absolute; top: 0.6rem; right: 0.7rem; width: 1.8rem; height: 1.8rem; padding: 0; border: 0; background: none; font-size: var(--t-grande); line-height: 1; color: var(--text-faint); cursor: pointer; border-radius: 4px; }
:where(body.ecran-atelier) .modale-fermer:hover { background: var(--marine-fond); color: var(--marine); }
:where(body.ecran-atelier) .modale-actions { display: flex; gap: 0.6rem; justify-content: flex-end; margin-top: 1rem; }
/* Zone vide : l'utilisateur doit le voir, pas le déduire d'un tiret. */
:where(body.ecran-atelier) .alerte-zones { font-size: var(--t-note); color: var(--danger); background: var(--ambre-bg); border: 1px solid var(--ambre); border-radius: 6px; padding: 0.5rem 0.7rem; margin: 0 0 0.6rem; }

/* L'atelier carte-first et son rail d'outils vivent dans `diamap.css` : */
/* ils servent partout où une carte porte le travail, et une regle de   */
/* mise en page n'a rien a faire dans un gabarit.                       */

/* ---------------------------------------------------------------- *
 * accueil_super_admin.html, feuille rapatriee. Portee : body.ecran-accueil-super-admin.
 * ---------------------------------------------------------------- */
/* Tout le style du tableau du parc vit dans le socle (`diamap.css`) :
   deux écrans le partagent. Ici, seul ce qui est propre au cockpit. */
:where(body.ecran-accueil-super-admin) .decision { display: flex; gap: 0.7rem; align-items: baseline;
  padding: 0.45rem 0; border-bottom: 1px solid var(--trait-clair);
  flex-wrap: wrap; }
:where(body.ecran-accueil-super-admin) .decision:last-child { border-bottom: 0; }
:where(body.ecran-accueil-super-admin) .decision .compte { font-weight: 700; min-width: 12rem; }
:where(body.ecran-accueil-super-admin) .decision .quoi { color: var(--danger); font-weight: 600; }
:where(body.ecran-accueil-super-admin) .affectations { background: var(--bg-card); border: 1px solid var(--trait);
  border-radius: 10px; padding: 0.6rem 1.3rem;
  box-shadow: 0 1px 3px var(--ombre-douce); }
:where(body.ecran-accueil-super-admin) .affectation { display: flex; align-items: center; gap: 1.1rem;
  padding: 0.85rem 0; border-bottom: 1px solid var(--trait-clair);
  flex-wrap: wrap; }
:where(body.ecran-accueil-super-admin) .affectation:last-of-type { border-bottom: 0; }
:where(body.ecran-accueil-super-admin) .affectation .compte { font-weight: 700; min-width: 15rem; }
:where(body.ecran-accueil-super-admin) .affectation select { min-width: 21rem; max-width: 26rem; }
:where(body.ecran-accueil-super-admin) .qui-fait-quoi-titre { display: flex; align-items: baseline;
  gap: 0.6rem; flex-wrap: wrap; margin: 2.4rem 0 0.15rem; }
:where(body.ecran-accueil-super-admin) .qui-fait-quoi-titre h3 { margin: 0; }

/* ---------------------------------------------------------------- *
 * administration/administration/client_fiche.html, feuille rapatriee. Portee : body.ecran-client-fiche.
 * ---------------------------------------------------------------- */
:where(body.ecran-client-fiche) .badge-fixe { display: inline-block; width: 11.5rem; text-align: center; }
:where(body.ecran-client-fiche) .tableau-acces .col-gestes { width: 4rem; text-align: center; }
:where(body.ecran-client-fiche) .tableau-capacites .col-capacite { text-align: center; vertical-align: middle; }
:where(body.ecran-client-fiche) .tableau-capacites thead .col-capacite { font-weight: 600; line-height: 1.25; }
:where(body.ecran-client-fiche) .tableau-capacites .col-capacite input { width: auto; margin: 0; }
:where(body.ecran-client-fiche) .tableau-capacites .col-temoin { width: 6rem; text-align: right; }

/* Le contrat est une seule notion : un compte a un contrat, et ce contrat
   dit combien de personnes et quels modules. Le séparer en deux cartes le
   ferait lire comme deux sujets sans rapport. D'où trois colonnes égales
   sur toute la largeur : sièges, modules, modèle. */
:where(body.ecran-client-fiche) .contrat { display: grid; grid-template-columns: 1fr 1px 1fr 1px 1fr;
  gap: 1.1rem; align-items: start; }
:where(body.ecran-client-fiche) .contrat .barre { background: var(--trait); align-self: stretch; }
/* La grille typographique ne porte que trois tailles : le grand chiffre
   des sièges prend la plus grande. Une quatrième taille, même pour un
   chiffre qu'on vient lire, ferait cesser deux écrans de s'accorder ; le
   poids et la couleur suffisent à le détacher. */
:where(body.ecran-client-fiche) .contrat .grand { font-size: var(--t-grande); font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums; display: block; }
:where(body.ecran-client-fiche) .contrat .grand.deborde { color: var(--danger); }
:where(body.ecran-client-fiche) .contrat .grand.plein { color: var(--ambre-text); }
:where(body.ecran-client-fiche) .contrat .sous { font-size: var(--t-petite); color: var(--texte-doux);
  text-transform: uppercase; letter-spacing: 0.05em; }
@media (max-width: 980px) {
  :where(body.ecran-client-fiche) .contrat { grid-template-columns: 1fr; }
  :where(body.ecran-client-fiche) .contrat .barre { height: 1px; }
}
:where(body.ecran-client-fiche) .cases-modules label { display: block; margin: 0.15rem 0; font-size: var(--t-note); }
:where(body.ecran-client-fiche) .cases-modules input { width: auto; margin-right: 0.35rem; }
:where(body.ecran-client-fiche) .rien { color: var(--border); }
:where(body.ecran-client-fiche) .jamais { color: var(--danger); font-weight: 600; }
:where(body.ecran-client-fiche) .vieux { color: var(--ambre-text); font-weight: 600; }
:where(body.ecran-client-fiche) .repli-renommer > summary { cursor: pointer; color: var(--bleu, var(--marine)); }
:where(body.ecran-client-fiche) .echu { color: var(--danger); }

/* ---------------------------------------------------------------- *
 * administration/administration/client_profils.html, feuille rapatriee. Portee : body.ecran-client-profils.
 * ---------------------------------------------------------------- */
:where(body.ecran-client-profils) .prf-tete { margin: 0 0 1.4rem; }
:where(body.ecran-client-profils) .prf-tete h1 { margin: 0 0 .2rem; }
:where(body.ecran-client-profils) .prf-tete .sous { margin: 0; color: var(--texte-doux);
                  font-size: var(--t-petite); }

:where(body.ecran-client-profils) .prf-section { margin: 0 0 1.8rem; }
:where(body.ecran-client-profils) .prf-section h2 { font-size: var(--t-moyenne); margin: 0 0 .2rem; }
:where(body.ecran-client-profils) .prf-section .aide { margin: 0 0 .9rem; font-size: var(--t-petite);
                     color: var(--texte-doux); line-height: 1.6; }

/* Un tableau se redimensionne toujours : une colonne qui sort de
   l'écran se lit comme une colonne qui n'existe pas. */
:where(body.ecran-client-profils) .prf-cadre { overflow-x: auto; }
:where(body.ecran-client-profils) .prf-grille { width: 100%; border-collapse: collapse;
              font-size: var(--t-petite); }
:where(body.ecran-client-profils) .prf-grille th, :where(body.ecran-client-profils) .prf-grille td {
    padding: .5rem .6rem; border-bottom: 1px solid var(--border); }
:where(body.ecran-client-profils) .prf-grille thead th { text-align: left; color: var(--texte-doux);
                       font-weight: 600; white-space: nowrap; }
:where(body.ecran-client-profils) .prf-grille .col-capacite { text-align: center; width: 8rem; }
:where(body.ecran-client-profils) .prf-grille tbody tr:last-child td { border-bottom: none; }
:where(body.ecran-client-profils) .prf-grille input[type="checkbox"] { width: auto; margin: 0; }

/* ---------------------------------------------------------------- *
 * administration/administration/client_univers.html, feuille rapatriee. Portee : body.ecran-client-univers.
 * ---------------------------------------------------------------- */
/* Les trois situations, lisibles d'un coup d'œil. */
:where(body.ecran-client-univers) .uni-bilan { display: flex; align-items: center; flex-wrap: wrap;
             gap: 0.45rem; margin: 0 0 0.9rem;
             font-size: var(--t-petite); color: var(--gris-text); }
:where(body.ecran-client-univers) .uni-bilan-reste { color: var(--texte-doux); }
:where(body.ecran-client-univers) .uni-col-etat { width: 6.5rem; }
:where(body.ecran-client-univers) .uni-etat { display: inline-block; padding: 0.06rem 0.45rem;
            border-radius: 999px; font-size: var(--t-note);
            white-space: nowrap; border: 1px solid transparent; }
/* « À faire » est le seul état qui appelle un geste, donc le seul plein.
   « Réglé » et « sans marché » sont des états de repos : les peindre
   aussi fort ferait trois alertes au lieu d'une. */
:where(body.ecran-client-univers) .uni-etat-a_faire { background: var(--ambre-bouton); color: var(--sur-couleur); }
:where(body.ecran-client-univers) .uni-etat-regle { color: var(--gris-text); border-color: var(--trait-clair);
                  background: var(--bg-page); }
/* Les pointillés disent « délibéré » : le même trait que le bouton
   « Aucun marché » qui produit cet état. */
:where(body.ecran-client-univers) .uni-etat-sans_marche { color: var(--texte-doux);
                        border: 1px dashed var(--trait-clair); }
:where(body.ecran-client-univers) .uni-aide { color: var(--texte-doux); font-size: var(--t-petite);
            line-height: 1.6; margin: 0 0 1.2rem; }
/* Un tableau doit pouvoir défiler : une colonne qui sort de l'écran se
   lit comme une colonne qui n'existe pas. */
:where(body.ecran-client-univers) .uni-cadre { overflow-x: auto; }
  :where(body.ecran-client-univers) .uni-table th, :where(body.ecran-client-univers) .uni-table thead th { text-align: left; color: var(--texte-doux);
                      font-weight: 600; white-space: nowrap; }
/* Pas de `font-family` ici. `var(--police-mono, monospace)` a été tenté,
   mais ce jeton n'existe pas : une variable non déclarée annule sa
   propriété en silence, et le repli `monospace` déciderait alors de la
   police de ce seul écran. La graisse suffit à distinguer un code. */
:where(body.ecran-client-univers) .uni-code { font-weight: 600; white-space: nowrap; }
/* Les postes sont des cases à cocher : tous sont visibles d'un coup,
   alors qu'un `<select multiple size="3">` en cachait la moitié et
   exigeait Ctrl+clic. Même forme que l'écran des secteurs de marché,
   qui compose le même objet.

   Les pastilles sont cliquables mais la case reste, simplement cachée :
   c'est elle qui porte la valeur, et sans JavaScript elle redevient
   visible, donc le geste ne dépend pas du script. */
:where(body.ecran-client-univers) .uni-postes { display: flex; flex-wrap: wrap; gap: .3rem; }
:where(body.ecran-client-univers) .uni-postes label { display: inline-flex; align-items: center;
                    border: 1px solid var(--trait); border-radius: 14px;
                    padding: .18rem .6rem; font-size: var(--t-petite);
                    cursor: pointer; background: var(--blanc);
                    user-select: none; transition: background .12s; }
:where(body.ecran-client-univers) .uni-postes label:hover { background: var(--bg-page); }
:where(body.ecran-client-univers) .uni-postes label.on { background: var(--accent); color: var(--blanc);
                       border-color: var(--accent); font-weight: 600; }
/* « Aucun marché » n'est pas un poste : il se distingue visuellement,
   sinon on le coche en croyant cocher un marché de plus. */
:where(body.ecran-client-univers) .uni-postes label.uni-aucun { border-style: dashed; color: var(--gris-text); }
:where(body.ecran-client-univers) .uni-postes label.uni-aucun.on { background: var(--gris-text);
                                 border-color: var(--gris-text);
                                 border-style: solid; color: var(--blanc); }
:where(body.ecran-client-univers) .uni-postes input { position: absolute; opacity: 0; width: 0; height: 0; }
:where(body.ecran-client-univers) .uni-marche { min-width: 20rem; }
:where(body.ecran-client-univers) .uni-part { text-align: right; white-space: nowrap; }
:where(body.ecran-client-univers) .uni-table input[type="text"] { width: 100%; }
:where(body.ecran-client-univers) .uni-table tbody tr:last-child td { border-bottom: none; }

/* ---------------------------------------------------------------- *
 * administration/administration/clients.html, feuille rapatriee. Portee : body.ecran-clients.
 * ---------------------------------------------------------------- */
/* Tout le style du tableau du parc vit dans le socle (`diamap.css`) :
   deux écrans le partagent. Rien de propre à cet écran. */

/* ---------------------------------------------------------------- *
 * administration/administration/geocodeur.html, feuille rapatriee. Portee : body.ecran-geocodeur.
 * ---------------------------------------------------------------- */
/*
  `bloc-geocodeur` et non `.bloc` : un nom générique se percute. Deux
  écrans portaient chacun leur `.bloc`, avec des bordures et des rayons
  différents, et le jour où ils se croisent l'un écrase l'autre sans que
  rien ne le signale.
*/
:where(body.ecran-geocodeur) .bloc-geocodeur { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1.2rem; margin-bottom: 1rem; }
:where(body.ecran-geocodeur) .bloc h3 { margin: 0 0 0.5rem; font-size: var(--t-note); color: var(--bleu); }
:where(body.ecran-geocodeur) .bloc p { margin: 0 0 0.6rem; font-size: var(--t-note); color: var(--tag-texte); line-height: 1.55; }
:where(body.ecran-geocodeur) .etat { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--t-note); font-weight: 700; border-radius: 999px; padding: 0.15rem 0.7rem; }
:where(body.ecran-geocodeur) .etat.ok { background: var(--succes-fond); color: var(--succes); }
:where(body.ecran-geocodeur) .etat.ko { background: var(--danger-fond); color: var(--danger); }
:where(body.ecran-geocodeur) .etat.attente { background: var(--alerte-fond); color: var(--alerte); }
:where(body.ecran-geocodeur) table { width: 100%; border-collapse: collapse; font-size: var(--t-note); }
:where(body.ecran-geocodeur) th, :where(body.ecran-geocodeur) td { text-align: left; padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--gris-bg); }
:where(body.ecran-geocodeur) th { color: var(--text-muted); font-weight: 600; font-size: var(--t-note); text-transform: uppercase; letter-spacing: .03em; }
/* Le code inline reste à la taille du texte courant : la chasse fixe
   suffit à le distinguer, le rapetisser le rendait illisible. */
:where(body.ecran-geocodeur) code { background: var(--bg-page); border-radius: 3px; padding: 0.05rem 0.3rem; font-size: var(--t-moyenne); }
:where(body.ecran-geocodeur) .compteurs { display: flex; flex-wrap: wrap; gap: 1.8rem; margin: 0.6rem 0 0; }
:where(body.ecran-geocodeur) .compteur strong { display: block; font-size: var(--t-chiffre); color: var(--bleu); }
:where(body.ecran-geocodeur) .compteur span { font-size: var(--t-note); color: var(--text-muted); }

/* ---------------------------------------------------------------- *
 * administration/administration/securite.html, feuille rapatriee. Portee : body.ecran-securite.
 * ---------------------------------------------------------------- */
/* Panneau du délai : la valeur, ce qu'elle vaut en heures, les raccourcis
   et la conséquence, tous sous les yeux en même temps. */
:where(body.ecran-securite) .panneau-delai { max-width: 40rem; border: 1px solid var(--trait-clair); border-radius: 10px; background: var(--bg-card); padding: 0.9rem 1rem; margin-top: 1rem; }
:where(body.ecran-securite) .pd-ligne { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
:where(body.ecran-securite) .pd-etiquette { font-weight: 700; margin: 0; }
/* `var(--t-moyenne)` et non « 1,05rem » : la valeur est la même, mais un
   chiffre en dur ouvre une quatrième taille dès qu'il est recopié de
   travers. Un test refuse les tailles en dur. */
:where(body.ecran-securite) .pd-champ { max-width: 6.5rem; text-align: right; font-weight: 700; font-size: var(--t-moyenne); font-variant-numeric: tabular-nums; }
:where(body.ecran-securite) .pd-unite { color: var(--text-muted); }
/* L'équivalence est collée au chiffre : « 500 minutes · 8 h 20 ». Un
   nombre illisible ne se valide pas, il s'enregistre à l'aveugle. */
:where(body.ecran-securite) .pd-equiv { background: var(--marine-fond); color: var(--marine); border-radius: 6px; padding: 0.1rem 0.5rem; font-weight: 700; }
:where(body.ecran-securite) .pd-enregistre { margin-left: auto; display: inline-flex; align-items: center; gap: 0.3rem; font-size: var(--t-note); color: var(--succes); background: var(--succes-fond); border: 1px solid var(--vert); border-radius: 999px; padding: 0.05rem 0.6rem; }
:where(body.ecran-securite) .pd-erreur { margin: 0.5rem 0 0; }
:where(body.ecran-securite) .pd-raccourcis { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.7rem; }
:where(body.ecran-securite) .pd-raccourci { border: 1px solid var(--trait-clair); background: var(--bg-card); border-radius: 999px; padding: 0.15rem 0.75rem; font: inherit; font-size: var(--t-note); color: var(--text-muted); cursor: pointer; }
:where(body.ecran-securite) .pd-raccourci:hover { border-color: var(--border); color: var(--text); }
:where(body.ecran-securite) .pd-raccourci.actif { background: var(--primary); border-color: var(--vert); color: var(--sur-couleur); font-weight: 700; }
:where(body.ecran-securite) .pd-consequence { border-left: 3px solid var(--marine); background: var(--marine-fond); color: var(--marine); border-radius: 0 8px 8px 0; padding: 0.55rem 0.8rem; margin-top: 0.8rem; font-size: var(--t-note); }
:where(body.ecran-securite) .pd-plafond { border-left: 3px solid var(--marine); background: var(--marine-fond); color: var(--marine); border-radius: 0 8px 8px 0; padding: 0.55rem 0.8rem; margin-top: 0.6rem; font-size: var(--t-note); }

/* ---------------------------------------------------------------- *
 * performance/performance/_onglets_magasin.html, feuille rapatriee. Portee : body.ecran-performance.
 * ---------------------------------------------------------------- */
/* Le style voyage avec le ruban : posé dans le `extra_head` de chaque
   écran, il faudrait le recopier quatre fois, et les rubans finiraient par
   diverger. Un `<style>` dans le corps est valide en HTML5 et le navigateur
   l'applique à la page entière.

   Aucune taille de texte n'est écrite ici, elles viennent des variables de
   la grille : `test_aucune_taille_de_texte_hors_de_la_grille` fait tomber
   toute valeur en dur. */
:where(body.ecran-performance) .perf-onglets { display: flex; flex-wrap: wrap; gap: .3rem; margin: .2rem 0 1rem; }
:where(body.ecran-performance) .perf-onglets a { border: 1px solid var(--border); background: var(--bg-card);
  color: var(--ardoise); border-radius: 999px; padding: .4rem 1rem;
  text-decoration: none; font-weight: 550; }
/* L'onglet courant porte le VERT de la solution. Il etait marine plein :
   le marine dit un etat (une zone contractuelle), il ne dit pas « vous etes
   ici », et cette pastille sombre etait la seule tache de bleu de l'ecran. */
:where(body.ecran-performance) .perf-onglets a:hover { border-color: var(--vert); color: var(--vert-fonce); background: var(--vert-pale); }
:where(body.ecran-performance) .perf-onglets a.on { background: var(--primary); border-color: var(--primary); color: var(--sur-couleur); box-shadow: var(--ombre-bouton); }
/* Le retour se distingue des quatre écrans : il sort du magasin. */
:where(body.ecran-performance) .perf-onglets a.retour { margin-left: auto; border-style: dashed; }
:where(body.ecran-performance) .note-methode { font-size: var(--t-petite); color: var(--texte-doux); margin: 0; }

/* ---------------------------------------------------------------- *
 * performance/performance/prf01_diagnostic.html, feuille rapatriee. Portee : body.ecran-prf01-diagnostic.
 * ---------------------------------------------------------------- */
/*
  Reprend les jetons du socle (static/css/diamap.css), aucune couleur
  réécrite en dur. `.card` et `.badge*` viennent du socle ; seules les
  classes propres à cet écran sont ajoutées ici.
*/
:where(body.ecran-prf01-diagnostic) .perf-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin: 0 0 1.1rem; }
:where(body.ecran-prf01-diagnostic) .perf-tete h1 { margin: 0; font-size: var(--t-grande); }
:where(body.ecran-prf01-diagnostic) .perf-tete .sous { color: var(--texte-doux); font-size: var(--t-petite); margin-top: .25rem; }

/* LE BANDEAU DE TETE, aux couleurs de la solution.

   C'etait un aplat degrade bleu-marine, seul de son espece : partout
   ailleurs l'application pose des CARTES BLANCHES a filet discret, et
   reserve la couleur aux etats - vert pour ce qui va, ambre pour ce qui
   attend, rouge pour ce qui manque. Un bandeau sombre en tete de page ne
   dit aucun etat ; il criait seulement plus fort que les chiffres qu'il
   portait, et n'appartenait a aucune autre page du produit.

   Meme carte que les blocs qui suivent, donc, avec le RANG en pastille
   verte : c'est lui l'information de tete, et la couleur le designe au
   lieu de teindre tout le bandeau. */
:where(body.ecran-prf01-diagnostic) .perf-hero { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; background: var(--blanc); border: 1px solid var(--trait); box-shadow: var(--ombre); color: var(--text); border-radius: var(--radius); padding: 1.3rem 1.6rem; margin: 0 0 1.2rem; }
/* LE RANG : un jeton plein, pas un anneau. Le cercle a bordure de deux
   pixels autour de deux lignes de texte serrees se lisait comme un tampon
   pose la ; plein, il devient un chiffre qu'on lit, et « sur 102 » passe en
   dessous du jeton plutot que dedans - c'est un repere, pas une valeur. */
:where(body.ecran-prf01-diagnostic) .perf-hero .rang { flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: .3rem;
  text-align: center; }
:where(body.ecran-prf01-diagnostic) .perf-hero .rang b { display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%; border: 0;
  background: var(--vert-pale); color: var(--vert-fonce);
  font-size: var(--t-affiche); font-weight: 800; line-height: 1;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
/* L'exposant du rang (« 1er ») : la grille typographique de la solution ne
   connait pas les tailles relatives, et un exposant n'est pas un niveau de
   texte - c'est une position. `vertical-align` et la taille de note font le
   meme travail sans sortir de la grille. */
:where(body.ecran-prf01-diagnostic) .perf-hero .rang b sup { font-size: var(--t-note);
  font-weight: 700; vertical-align: super; line-height: 0; }
:where(body.ecran-prf01-diagnostic) .perf-hero .rang span { font-size: var(--t-libelle);
  font-weight: 600; color: var(--text-muted); text-transform: none; letter-spacing: 0; }
:where(body.ecran-prf01-diagnostic) .perf-hero h2 { font-size: var(--t-grande); margin: 0 0 .15rem; color: var(--text); }
:where(body.ecran-prf01-diagnostic) .perf-hero .sub { color: var(--texte-doux); font-size: var(--t-petite); margin: 0; }
:where(body.ecran-prf01-diagnostic) .perf-hero .stats { display: flex; gap: 2rem; margin-left: auto; }
:where(body.ecran-prf01-diagnostic) .perf-hero .stats .kv { display: flex; flex-direction: column-reverse; text-align: right; }
/* Le libelle AU-DESSUS du chiffre, comme les tuiles du tableau de bord :
   on lit ce qu'on regarde avant de lire combien. */
:where(body.ecran-prf01-diagnostic) .perf-hero .stats .kv b { font-size: var(--t-grande); font-variant-numeric: tabular-nums; color: var(--text); }
:where(body.ecran-prf01-diagnostic) .perf-hero .stats .kv span { font-size: var(--t-petite); color: var(--texte-doux); text-transform: uppercase; letter-spacing: .04em; }

:where(body.ecran-prf01-diagnostic) .perf-venir { display: inline-flex; align-items: center; gap: .3rem; }

:where(body.ecran-prf01-diagnostic) .insight-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem; margin: 0 0 1.2rem; }
:where(body.ecran-prf01-diagnostic) .insight-card { border-radius: var(--radius); padding: .9rem 1rem; box-shadow: var(--ombre); }
:where(body.ecran-prf01-diagnostic) .insight-card.ok { background: var(--succes-fond); color: var(--succes); border: 1px solid var(--succes-trait); }
:where(body.ecran-prf01-diagnostic) .insight-card.warn { background: var(--alerte-fond); color: var(--alerte); border: 1px solid var(--alerte-trait); }
:where(body.ecran-prf01-diagnostic) .insight-card.neutre { background: var(--fond); color: var(--texte-doux); border: 1px solid var(--trait); }
:where(body.ecran-prf01-diagnostic) .insight-card h3 { margin: 0 0 .3rem; font-size: var(--t-moyenne); display: flex; gap: .4rem; align-items: center; }
:where(body.ecran-prf01-diagnostic) .insight-card p { margin: 0; font-size: var(--t-petite); color: var(--encre); }

/*
  Sections repliables : <details>/<summary> natifs plutôt qu'un bouton
  et du JS. Même résultat fonctionnel, sans JS à maintenir ni piège
  d'accessibilité.
*/
/* ------------------------------------------------------------------ *
 * LE MODULE PERFORMANCE, ce qui vaut pour ses CINQ ecrans.
 * Portee : .ecran-performance
 *
 * La section depliable n'existait que pour deux d'entre eux - PRF-01 et
 * PRF-02, chacun avec sa copie. Sur PRF-03 et PRF-04, `.perf-section`
 * n'etait donc style par rien : pas de carte, pas de rembourrage, et le
 * triangle du navigateur en guise de fleche, celui que `list-style: none`
 * existe justement pour retirer. Deux copies d'une meme regle finissent
 * toujours par ne pas couvrir le troisieme ecran qui en a besoin.
 *
 * `ecran-performance` est porte par les cinq : la regle suit le module,
 * pas la liste de ceux qu'on avait en tete en l'ecrivant.
 * ------------------------------------------------------------------ */
:where(body.ecran-performance) .perf-section { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--radius); box-shadow: var(--ombre); margin: 0 0 .9rem; padding: 0; }
:where(body.ecran-performance) .perf-section summary { list-style: none; cursor: pointer; padding: .85rem 1.1rem; display: flex; align-items: baseline; gap: .6rem; }
:where(body.ecran-performance) .perf-section summary::-webkit-details-marker { display: none; }
:where(body.ecran-performance) .perf-section summary > div { flex: 1; min-width: 0; }
:where(body.ecran-performance) .perf-section summary .chev { transition: transform .15s; color: var(--texte-doux); flex: none; }
:where(body.ecran-performance) .perf-section[open] summary .chev { transform: rotate(90deg); }
:where(body.ecran-performance) .perf-section summary h2 { margin: 0; font-size: var(--t-moyenne); }
:where(body.ecran-performance) .perf-section summary .aide { margin: 0; font-size: var(--t-petite); color: var(--texte-doux); font-weight: 400; }
/* L'AIDE PASSE SOUS LE TITRE, elle ne se met pas a cote.
   Le `summary` est une ligne souple : le titre et son aide y etaient deux
   voisins, et une aide de deux lignes poussait le titre puis debordait de
   la carte. `flex-basis: 100%` la renvoie a la ligne, alignee sur le titre
   et non sur le chevron. La regle ne vise que l'enfant DIRECT : les
   sommaires qui empilent deja titre et aide dans un `div` gardent le leur. */
:where(body.ecran-performance) .perf-section > summary { flex-wrap: wrap; align-items: center; }
:where(body.ecran-performance) .perf-section > summary > .aide { flex: 1 0 100%;
  margin: .15rem 0 0 calc(14px + .6rem); line-height: 1.45; }
/* Une infobulle sur un PARAGRAPHE tirait un trait pointille sur toute la
   largeur de la carte : le composant commun souligne par une bordure de
   bas de boite, ce qui convient a un mot, pas a un bloc. Ici, le
   soulignement suit le texte. */
:where(body.ecran-performance) .perf-section .aide[data-tip] { border-bottom: 0;
  text-decoration: underline dotted; text-decoration-color: var(--border);
  text-underline-offset: 3px; }
:where(body.ecran-performance) .perf-section-body { padding: 0 1.1rem 1rem; }

/* SIX CLASSES DU MODULE N'AVAIENT AUCUNE REGLE. Elles sortaient donc au
   style par defaut du navigateur : un `<select>` systeme au milieu d'un
   tableau, un mot colle a son badge, une carte sans cadre. Un nom de
   classe qui ne rencontre aucune declaration ne signale rien - ni erreur,
   ni avertissement : l'ecran est seulement laid, et l'on cherche la cause
   ailleurs. */

/* Ce qui manque, a cote de son badge : une precision, pas un titre. */
:where(body.ecran-performance) .perf-absente { margin-left: .4rem;
  font-size: var(--t-petite); color: var(--texte-doux); }

/* Les deux cartes de bloc du module reprennent la carte de la solution. */
:where(body.ecran-performance) .plan-manque,
:where(body.ecran-performance) .perf-classe { margin: 0 0 .9rem; }
:where(body.ecran-performance) .perf-classe-tete { display: flex; align-items: baseline;
  flex-wrap: wrap; gap: .4rem; margin-bottom: .6rem; font-size: var(--t-petite);
  color: var(--texte-doux); }
:where(body.ecran-performance) .perf-classe-note { margin: .6rem 0 0;
  font-size: var(--t-petite); color: var(--texte-doux); line-height: 1.45; }

/* Le cadre de la carte : sans hauteur propre, il ne se distinguait pas du
   fond et la carte paraissait ne pas s'etre chargee. */
:where(body.ecran-performance) .perf-carte-wrap { display: flex; flex-direction: column;
  gap: .5rem; }

/* Les deux commandes de suivi d'une recommandation : elles portaient le
   style systeme, au milieu d'un tableau qui n'en a aucun. */
:where(body.ecran-performance) .qui-saisi,
:where(body.ecran-performance) .echeance { margin: 0; padding: .2rem .4rem; min-height: 0;
  border: 1px solid var(--border-champ); border-radius: 6px;
  background: var(--bg-card); font: inherit; font-size: var(--t-petite);
  color: var(--text); max-width: 100%; }
:where(body.ecran-performance) .qui-saisi { min-width: 8rem; }
:where(body.ecran-performance) .qui-saisi:hover,
:where(body.ecran-performance) .echeance:hover { border-color: var(--vert); }

/* ------------------------------------------------------------------ *
 * PRF-01, LE DIAGNOSTIC, reprend ici sa portee.
 * Portee : .ecran-prf01-diagnostic
 * ------------------------------------------------------------------ */

/*
  Une colonne de plus : le segment.

  Elle reste en `auto` et vide quand il n'y a rien à comparer. Une
  largeur fixe creuserait un blanc sur toutes les lignes sans
  comparatif, et l'on chercherait ce qui manque.
*/
:where(body.ecran-prf01-diagnostic) .idx-row { display: grid; grid-template-columns: 1fr auto auto; gap: .6rem; align-items: center; padding: .55rem 0; border-top: 1px solid var(--trait); font-size: var(--t-petite); }
/* Le segment : gris, sans graisse. Deux valeurs de même poids se lisent
   comme deux mesures équivalentes, alors que l'une est le sujet et
   l'autre le repère. */
:where(body.ecran-prf01-diagnostic) .idx-row .seg { color: var(--texte-doux); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
:where(body.ecran-prf01-diagnostic) .idx-row .seg b { font-weight: 700; }
:where(body.ecran-prf01-diagnostic) .idx-row .seg .ind-h { color: var(--succes); }
:where(body.ecran-prf01-diagnostic) .idx-row .seg .ind-b { color: var(--ambre-text); }
:where(body.ecran-prf01-diagnostic) .idx-row:first-child { border-top: none; }
:where(body.ecran-prf01-diagnostic) .idx-row .lbl { color: var(--encre); }
:where(body.ecran-prf01-diagnostic) .idx-row .v { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--encre); text-align: right; }

/*
  Message de finition au survol des badges « à venir » et « hors
  périmètre ». Pur CSS, pas de JS à maintenir.
*/
:where(body.ecran-prf01-diagnostic) [data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 7px); background: var(--encre); color: var(--blanc); font-size: var(--t-petite); font-weight: 400; line-height: 1.4; padding: .5rem .65rem; border-radius: 8px; width: max-content; max-width: 260px; white-space: normal; box-shadow: var(--ombre); z-index: 80; pointer-events: none; }
:where(body.ecran-prf01-diagnostic) [data-tip]:focus-visible::before { content: ""; position: absolute; left: 10px; bottom: calc(100% + 2px); border: 5px solid transparent; border-top-color: var(--encre); z-index: 80; }
/*
  Un badge en colonne de droite (.idx-row .v) faisait sortir de l'écran
  l'infobulle par défaut, ancrée à gauche. Ancrée à droite dans cette
  colonne, elle s'ouvre vers la gauche et reste visible.
*/
:where(body.ecran-prf01-diagnostic) .idx-row .v [data-tip]:hover::after, :where(body.ecran-prf01-diagnostic) .idx-row .v [data-tip]:focus-visible::after { left: auto; right: 0; }
:where(body.ecran-prf01-diagnostic) .idx-row .v [data-tip]:hover::before, :where(body.ecran-prf01-diagnostic) .idx-row .v [data-tip]:focus-visible::before { left: auto; right: 10px; }

/* ---------------------------------------------------------------- *
 * performance/performance/prf02_activite_par_rayon.html, feuille rapatriee. Portee : body.ecran-prf02-activite-par-rayon.
 * ---------------------------------------------------------------- */
/*
  Reprend les jetons du socle (static/css/diamap.css), aucune couleur
  réécrite en dur. Mêmes classes que prf01_diagnostic.html pour la
  cohérence entre écrans du module (sections repliables, lignes idx-row).
*/
:where(body.ecran-prf02-activite-par-rayon) .perf-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin: 0 0 1.1rem; }
:where(body.ecran-prf02-activite-par-rayon) .perf-tete h1 { margin: 0; font-size: var(--t-grande); }
:where(body.ecran-prf02-activite-par-rayon) .perf-tete .sous { color: var(--texte-doux); font-size: var(--t-petite); margin-top: .25rem; }


:where(body.ecran-prf02-activite-par-rayon) .idx-row { display: grid; grid-template-columns: 1fr auto; gap: .6rem; align-items: center; padding: .55rem 0; border-top: 1px solid var(--trait); font-size: var(--t-petite); }
:where(body.ecran-prf02-activite-par-rayon) .idx-row:first-child { border-top: none; }
:where(body.ecran-prf02-activite-par-rayon) .idx-row .lbl { color: var(--encre); }
:where(body.ecran-prf02-activite-par-rayon) .idx-row .v { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--encre); text-align: right; }

:where(body.ecran-prf02-activite-par-rayon) .univers-row { padding: .6rem 0; border-top: 1px solid var(--trait); }
:where(body.ecran-prf02-activite-par-rayon) .univers-row:first-child { border-top: none; }
:where(body.ecran-prf02-activite-par-rayon) .univers-row .lg { display: grid; grid-template-columns: 1fr auto; gap: .5rem; font-size: var(--t-petite); align-items: center; margin: 0 0 .3rem; }
:where(body.ecran-prf02-activite-par-rayon) .univers-row .lg .nom { color: var(--encre); }
:where(body.ecran-prf02-activite-par-rayon) .univers-row .lg .pct { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--encre); }
:where(body.ecran-prf02-activite-par-rayon) .univers-row .barre { height: 8px; border-radius: 999px; background: var(--fond); overflow: hidden; }
:where(body.ecran-prf02-activite-par-rayon) .univers-row .barre span { display: block; height: 100%; background: var(--bleu); border-radius: 999px; }
:where(body.ecran-prf02-activite-par-rayon) .univers-row.autres .barre span { background: var(--texte-discret); }
:where(body.ecran-prf02-activite-par-rayon) .indice-vs-segment { font-weight: 400; color: var(--texte-doux); font-size: var(--t-petite); }

/*
  Message de finition au survol, même composant que sur les autres
  écrans du module. Pur CSS.
*/
:where(body.ecran-prf02-activite-par-rayon) [data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 7px); background: var(--encre); color: var(--blanc); font-size: var(--t-petite); font-weight: 400; line-height: 1.4; padding: .5rem .65rem; border-radius: 8px; width: max-content; max-width: 260px; white-space: normal; box-shadow: var(--ombre); z-index: 80; pointer-events: none; }
:where(body.ecran-prf02-activite-par-rayon) [data-tip]:focus-visible::before { content: ""; position: absolute; left: 10px; bottom: calc(100% + 2px); border: 5px solid transparent; border-top-color: var(--encre); z-index: 80; }
/*
  Un badge en colonne de droite fait sortir l'infobulle par défaut hors
  de l'écran. Ancrée à droite dans cette colonne, elle s'ouvre vers la
  gauche.
*/
:where(body.ecran-prf02-activite-par-rayon) .idx-row .v [data-tip]:hover::after, :where(body.ecran-prf02-activite-par-rayon) .idx-row .v [data-tip]:focus-visible::after { left: auto; right: 0; }
:where(body.ecran-prf02-activite-par-rayon) .idx-row .v [data-tip]:hover::before, :where(body.ecran-prf02-activite-par-rayon) .idx-row .v [data-tip]:focus-visible::before { left: auto; right: 10px; }

/* ---------------------------------------------------------------- *
 * performance/performance/prf03_zone_marche_concurrence.html, feuille rapatriee. Portee : body.ecran-prf03-zone-marche-concurrence.
 * ---------------------------------------------------------------- */
/*
  Reprend les jetons du socle (static/css/diamap.css), sans couleur réécrite
  en dur. `.card` et `.badge*` viennent déjà du socle ; seules les classes
  propres à cet écran sont ajoutées ici.
*/
:where(body.ecran-prf03-zone-marche-concurrence) .perf-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin: 0 0 1.1rem; }
:where(body.ecran-prf03-zone-marche-concurrence) .perf-tete h1 { margin: 0; font-size: var(--t-grande); }
:where(body.ecran-prf03-zone-marche-concurrence) .perf-tete .sous { color: var(--texte-doux); font-size: var(--t-petite); margin-top: .25rem; }

:where(body.ecran-prf03-zone-marche-concurrence) .perf-venir { display: inline-flex; align-items: center; gap: .3rem; }
:where(body.ecran-prf03-zone-marche-concurrence) .perf-venir .badge { font-style: normal; }

/* Deux colonnes égales. Elles étaient en 1.3fr / 1fr, mais rien ne
   justifie que la gauche soit plus large : depuis que les blocs se replient
   et se déplacent, c'est le lecteur qui décide de ce qui compte, et une
   colonne privilégiée arbitrait à sa place.
   `gap` unique : le même écart entre colonnes et entre blocs, pour que rien
   ne suggère un regroupement qui n'existe pas. */
:where(body.ecran-prf03-zone-marche-concurrence) .perf-grille { display: grid; grid-template-columns: 1fr 1fr;
               gap: 1.1rem; align-items: start; }
/* Les blocs d'une colonne prennent le même écart que la grille : sinon
   `margin-bottom` et `gap` divergent et l'œil lit deux rythmes. */
:where(body.ecran-prf03-zone-marche-concurrence) .perf-grille > div { display: grid; gap: 1.1rem; align-content: start; }
:where(body.ecran-prf03-zone-marche-concurrence) .perf-grille > div > .card { margin: 0; }
@media (max-width: 1050px) { :where(body.ecran-prf03-zone-marche-concurrence) .perf-grille { grid-template-columns: 1fr; } }
/* Les deux profils : même poids, donc deux colonnes égales. Ils
   s'empilent en dessous de 900 px - six barres dans une demi-colonne
   étroite deviennent illisibles, et un tableau qui déborde se lit
   comme un tableau qui n'existe pas. */
:where(body.ecran-prf03-zone-marche-concurrence) .perf-profils { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem;
                align-items: start; margin-top: 1.1rem; }
@media (max-width: 900px) { :where(body.ecran-prf03-zone-marche-concurrence) .perf-profils { grid-template-columns: 1fr; } }
/* L'indice vs la classe. Neutre par défaut : la couleur ne se dépense
   que sur l'écart qui mérite un regard - tout colorer revient à ne rien
   signaler. Les seuils (90 / 110) laissent le bruit statistique en gris. */
:where(body.ecran-prf03-zone-marche-concurrence) .ind { margin-left: .45rem; font-size: var(--t-petite); font-weight: 700;
       color: var(--texte-doux); cursor: help; }
:where(body.ecran-prf03-zone-marche-concurrence) .ind-h { color: var(--succes); }
:where(body.ecran-prf03-zone-marche-concurrence) .ind-b { color: var(--ambre-text); }

/* LES INDICATEURS DE LA ZONE, dans le dessin de la solution.
   Ils etaient centres, a fine bordure, et leur libelle passait sous le
   nombre en trois lignes : huit boites de hauteurs differentes, rangees
   cinq puis trois. Le libelle passe AU-DESSUS et le nombre dessous, aligne
   a gauche - la meme lecture que les indicateurs du tableau de bord et du
   classement, ou l'on lit d'abord de quoi on parle.
   Quatre colonnes fixes : huit indicateurs font alors deux rangees pleines,
   la ou `auto-fit` en posait cinq puis trois. */
/* Une carte de la galerie qui attend sa donnee : presente, mais elle ne
   s'ouvre pas d'office et le dit. La retirer ferait croire qu'elle n'existe
   pas ; la laisser muette faisait croire que la zone est uniforme. */
:where(body.ecran-prf03-zone-marche-concurrence) .perf-carte-v.sans-donnee { opacity: .6; }
:where(body.ecran-prf03-zone-marche-concurrence) .perf-carte-v .mention { margin-left: auto;
  padding: .05rem .4rem; border-radius: 999px; background: var(--gris-bg);
  color: var(--text-muted); font-size: var(--t-note); font-weight: 600; }

:where(body.ecran-prf03-zone-marche-concurrence) .perf-kpis { display: grid;
  grid-template-columns: repeat(4, 1fr); gap: .75rem; margin: 0 0 1rem; }
@media (max-width: 900px) {
  :where(body.ecran-prf03-zone-marche-concurrence) .perf-kpis { grid-template-columns: repeat(2, 1fr); }
}
:where(body.ecran-prf03-zone-marche-concurrence) .perf-kpi { display: flex;
  flex-direction: column; gap: .35rem;
  background: var(--bg-card); border: 1px solid var(--border-carte);
  border-radius: var(--rayon-carte); padding: .85rem .95rem;
  box-shadow: var(--ombre-carte); }
/* `order` plutot qu'un echange dans le gabarit : le nombre reste annonce
   avant son libelle pour qui ecoute la page, il se lit apres pour qui la
   regarde. */
:where(body.ecran-prf03-zone-marche-concurrence) .perf-kpi .k { order: 2;
  font-size: var(--t-affiche); font-weight: 700; line-height: 1.1;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--text); }
/* Un indicateur dont la valeur est un MOT ne se met pas a la taille d'un
   nombre : « 1-Centre Ville GA » y passait a la ligne et cassait la
   rangee. */
:where(body.ecran-prf03-zone-marche-concurrence) .perf-kpi .k.texte { font-size: var(--t-section); line-height: 1.25; }
:where(body.ecran-prf03-zone-marche-concurrence) .perf-kpi .l { order: 1;
  font-size: var(--t-libelle); font-weight: 600; color: var(--text-muted);
  margin: 0; line-height: 1.35; }
:where(body.ecran-prf03-zone-marche-concurrence) .perf-kpi .perf-sous { display: block;
  font-weight: 400; color: var(--text-faint); }

:where(body.ecran-prf03-zone-marche-concurrence) .perf-repartition { display: flex; flex-direction: column; gap: .35rem; margin: .4rem 0 0; }
:where(body.ecran-prf03-zone-marche-concurrence) .perf-repartition .lg { display: grid; grid-template-columns: 1fr auto; gap: .5rem; font-size: var(--t-petite); align-items: center; }
:where(body.ecran-prf03-zone-marche-concurrence) .perf-repartition .barre { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: var(--fond); overflow: hidden; }
:where(body.ecran-prf03-zone-marche-concurrence) .perf-repartition .barre span { display: block; height: 100%; background: var(--bleu); border-radius: 999px; }

/* `#perf03-carte`, la légende et les trois pastilles vivent désormais dans
   `static/css/carte_diamap.css`.

   Une seule valeur reste ici : la réduction de 20 % de l'encadré des points.
   Elle ne peut pas vivre dans le composant, un calcul autour d'un jeton y
   fabriquant une quatrième taille que
   `test_aucune_taille_de_texte_hors_de_la_grille` refuse ; et elle ne doit
   pas y vivre non plus, car c'est un réglage propre à cet écran, la fiche
   SD-04 en ayant choisi un autre.

   Posée en calcul et non en valeur figée : si `--t-petite` change, l'encadré
   suit et l'écart de 20 % reste vrai. */
:where(body.ecran-prf03-zone-marche-concurrence) #perf03-carte ~ .carte-diamap-points, :where(body.ecran-prf03-zone-marche-concurrence) .carte-diamap-cadre .carte-diamap-points { font-size: calc(var(--t-petite) * 0.8); }

/*
  Message de finition au survol des badges « à venir » et « hors périmètre »,
  même composant que sur PRF-01. Pur CSS, pas de JavaScript à maintenir.
*/
:where(body.ecran-prf03-zone-marche-concurrence) [data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 7px); background: var(--encre); color: var(--blanc); font-size: var(--t-petite); font-weight: 400; line-height: 1.4; padding: .5rem .65rem; border-radius: 8px; width: max-content; max-width: 260px; white-space: normal; box-shadow: var(--ombre); z-index: 80; pointer-events: none; }
:where(body.ecran-prf03-zone-marche-concurrence) [data-tip]:focus-visible::before { content: ""; position: absolute; left: 10px; bottom: calc(100% + 2px); border: 5px solid transparent; border-top-color: var(--encre); z-index: 80; }
/* Le bloc de la classe. */
:where(body.ecran-prf03-zone-marche-concurrence) .perf-classe-tete { margin-bottom: .6rem; }
:where(body.ecran-prf03-zone-marche-concurrence) .perf-classe-tete .m { color: var(--texte-doux); }
:where(body.ecran-prf03-zone-marche-concurrence) .perf-ecarts { width: 100%; border-collapse: collapse; }
:where(body.ecran-prf03-zone-marche-concurrence) .perf-ecarts th, :where(body.ecran-prf03-zone-marche-concurrence) .perf-ecarts td { padding: .3rem .4rem; border-bottom: 1px solid var(--border); }
:where(body.ecran-prf03-zone-marche-concurrence) .perf-ecarts th { text-align: left; color: var(--texte-doux); font-weight: 600; }
:where(body.ecran-prf03-zone-marche-concurrence) .perf-ecarts .n { text-align: right; }
/* L'indice se lit d'un coup d'œil : au-dessus ou en dessous des siens.
   La couleur ne remplace pas le nombre, elle le double. */
:where(body.ecran-prf03-zone-marche-concurrence) .perf-ecarts .au-dessus { color: var(--succes); }
:where(body.ecran-prf03-zone-marche-concurrence) .perf-ecarts .en-dessous { color: var(--ambre-text); }
/* Position concurrentielle : un intitulé, sa valeur - pas d'en-tête. */
:where(body.ecran-prf03-zone-marche-concurrence) .tbl-txt { width: 100%; border-collapse: collapse; }
:where(body.ecran-prf03-zone-marche-concurrence) .tbl-txt td { padding: .35rem .4rem; border-bottom: 1px solid var(--border); }
:where(body.ecran-prf03-zone-marche-concurrence) .tbl-txt td:first-child { color: var(--texte-doux); }
:where(body.ecran-prf03-zone-marche-concurrence) .tbl-txt td:last-child { text-align: right; }
:where(body.ecran-prf03-zone-marche-concurrence) .perf-classe-note { margin: .6rem 0 0; font-size: var(--t-petite); color: var(--texte-doux); }
/* La galerie contre la carte, reprise du gabarit des études. */
:where(body.ecran-prf03-zone-marche-concurrence) .perf-carte-bloc { display: grid; grid-template-columns: minmax(150px, 210px) minmax(0, 1fr); gap: .5rem; }
:where(body.ecran-prf03-zone-marche-concurrence) .perf-galerie { display: flex; flex-direction: column; gap: .3rem; overflow-y: auto; max-height: 420px; }
:where(body.ecran-prf03-zone-marche-concurrence) .perf-carte-v { display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left;
  padding: .4rem .5rem; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg-card); color: var(--ardoise); cursor: pointer; line-height: 1.2; }
:where(body.ecran-prf03-zone-marche-concurrence) .perf-carte-v:hover { border-color: var(--bleu); background: var(--bg-survol); }
:where(body.ecran-prf03-zone-marche-concurrence) .perf-carte-v.active { background: var(--bleu); border-color: var(--bleu); color: var(--sur-couleur); }
:where(body.ecran-prf03-zone-marche-concurrence) .perf-carte-v .pictogramme { display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.4rem; height: 1.4rem; border-radius: 6px; flex: none; }
:where(body.ecran-prf03-zone-marche-concurrence) .perf-carte-v .libelle { flex: 1; }
/* `.perf-carte-zone` et `.perf-legende` vivent dans
   `static/css/carte_diamap.css`, sous `.carte-diamap-legende`. */

/* Titre et sous-titre de chaque bloc de la fiche : sept blocs, meme forme -
   un h2 serre suivi d'une phrase discrete. Deux modificateurs seulement,
   pour les deux blocs dont l'espace differe (la carte, le score). */
:where(body.ecran-prf03-zone-marche-concurrence) .titre-bloc { margin: 0 0 .2rem; font-size: var(--t-moyenne); }
:where(body.ecran-prf03-zone-marche-concurrence) .titre-bloc.espace-large { margin-bottom: .7rem; }
:where(body.ecran-prf03-zone-marche-concurrence) .intro-bloc { margin: 0 0 .8rem; font-size: var(--t-petite); color: var(--texte-doux); }
:where(body.ecran-prf03-zone-marche-concurrence) .intro-bloc.serre { margin: 0; }
:where(body.ecran-prf03-zone-marche-concurrence) .intro-bloc.court { margin-bottom: .6rem; }
:where(body.ecran-prf03-zone-marche-concurrence) .discret { color: var(--texte-discret); }
:where(body.ecran-prf03-zone-marche-concurrence) .encre { color: var(--encre); }
:where(body.ecran-prf03-zone-marche-concurrence) .note-discrete { margin: .4rem 0 0; font-size: var(--t-petite); color: var(--texte-discret); }
:where(body.ecran-prf03-zone-marche-concurrence) .note-discrete.espace-large { margin-top: .5rem; }

/* ---------------------------------------------------------------- *
 * performance/performance/prf04_plan_action.html, feuille rapatriee. Portee : body.ecran-prf04-plan-action.
 * ---------------------------------------------------------------- */
/* Reprend les jetons du socle (static/css/diamap.css), aucune couleur réécrite en dur. Mêmes classes que les autres écrans du module. */
:where(body.ecran-prf04-plan-action) .perf-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin: 0 0 1.1rem; }
:where(body.ecran-prf04-plan-action) .perf-tete h1 { margin: 0; font-size: var(--t-grande); }
:where(body.ecran-prf04-plan-action) .perf-tete .sous { color: var(--texte-doux); font-size: var(--t-petite); margin-top: .25rem; }

:where(body.ecran-prf04-plan-action) .plan-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 0 0 1.2rem; }
@media (max-width: 800px) { :where(body.ecran-prf04-plan-action) .plan-2col { grid-template-columns: 1fr; } }
:where(body.ecran-prf04-plan-action) .plan-card { background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--radius); box-shadow: var(--ombre); padding: 1.1rem 1.2rem; }
:where(body.ecran-prf04-plan-action) .plan-card h2 { font-size: var(--t-moyenne); margin: 0 0 .3rem; }
:where(body.ecran-prf04-plan-action) .plan-card .aide { margin: 0; font-size: var(--t-petite); color: var(--texte-doux); }
:where(body.ecran-prf04-plan-action) .plan-card ul { margin: .7rem 0 0; padding-left: 1.1rem; font-size: var(--t-petite); color: var(--encre); line-height: 1.7; }
:where(body.ecran-prf04-plan-action) .plan-card ul li b { color: var(--encre); }
:where(body.ecran-prf04-plan-action) .plan-card.venir { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }

/* Message de finition au survol, en CSS pur : même composant que sur les autres écrans du module. */
:where(body.ecran-prf04-plan-action) [data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 7px); background: var(--encre); color: var(--blanc); font-size: var(--t-petite); font-weight: 400; line-height: 1.4; padding: .5rem .65rem; border-radius: 8px; width: max-content; max-width: 260px; white-space: normal; box-shadow: var(--ombre); z-index: 80; pointer-events: none; }
:where(body.ecran-prf04-plan-action) [data-tip]:focus-visible::before { content: ""; position: absolute; left: 10px; bottom: calc(100% + 2px); border: 5px solid transparent; border-top-color: var(--encre); z-index: 80; }

/* ---------------------------------------------------------------- *
 * performance/performance/prf05_classement_reseau.html, feuille rapatriee. Portee : body.ecran-prf05-classement-reseau.
 * ---------------------------------------------------------------- */
/*
  Reprend les jetons du socle (static/css/diamap.css), aucune couleur
  réécrite en dur. `.table-admin` et `.nombre` viennent aussi du socle
  partagé : les colonnes de chiffres sont alignées à droite partout.
*/
:where(body.ecran-prf05-classement-reseau) .perf-tete { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin: 0 0 1.1rem; }
:where(body.ecran-prf05-classement-reseau) .perf-tete h1 { margin: 0; font-size: var(--t-grande); }
:where(body.ecran-prf05-classement-reseau) .perf-tete .sous { color: var(--texte-doux); font-size: var(--t-petite); margin-top: .25rem; }


:where(body.ecran-prf05-classement-reseau) .perf-note { font-size: var(--t-petite); color: var(--texte-doux); margin: .8rem 0 0; }

/* La barre de filtres est celle des ecrans d'etudes (`.barre-filtres`) :
   il ne reste ici que sa place et le bouton de secours du `<noscript>`.
   Les regles qui redessinaient le champ et le menu ont ete retirees, elles
   ne faisaient que defaire le dessin commun. */
:where(body.ecran-prf05-classement-reseau) .perf-filtre { margin: 0 0 1.1rem; }
:where(body.ecran-prf05-classement-reseau) .perf-filtre .bouton-filtrer { font: inherit; font-size: var(--t-petite);
    padding: .38rem .9rem; border: 1px solid var(--accent);
    background: var(--accent); color: var(--sur-couleur); border-radius: 7px;
    cursor: pointer; }
:where(body.ecran-prf05-classement-reseau) .perf-rien { margin: 1rem 0; padding: .9rem 1rem; border-radius: var(--radius);
             background: var(--bg-survol); font-size: var(--t-petite); }

/*
  Message de finition au survol, même composant que sur les autres écrans
  du module. Pur CSS. Pas de `tabindex` sur les badges répétés du tableau :
  une longue liste de magasins sans classe ne doit pas polluer la
  navigation clavier.
*/
:where(body.ecran-prf05-classement-reseau) [data-tip].tip-focus:focus-visible::after { content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 7px); background: var(--encre); color: var(--blanc); font-size: var(--t-petite); font-weight: 400; line-height: 1.4; padding: .5rem .65rem; border-radius: 8px; width: max-content; max-width: 260px; white-space: normal; box-shadow: var(--ombre); z-index: 80; pointer-events: none; }

/* ---------------------------------------------------------------- *
 * reseau/reseau/correspondance.html, feuille rapatriee. Portee : body.ecran-correspondance.
 * ---------------------------------------------------------------- */
:where(body.ecran-correspondance) .colonnes-fichier { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
:where(body.ecran-correspondance) .colonnes-fichier li { display: inline-flex; align-items: baseline; gap: 0.4rem; border: 1px solid var(--marine-fond); border-radius: 999px; padding: 0.15rem 0.7rem; font-size: var(--t-note); background: var(--bg-survol); }
/* Une colonne retenue se distingue par la couleur : ce qui reste dehors
   doit se repérer d'un coup d'œil, sans lire toute la liste. */
:where(body.ecran-correspondance) .colonnes-fichier li.retenue { background: var(--succes-fond); border-color: var(--succes-trait); }
:where(body.ecran-correspondance) .colonnes-fichier .sort { color: var(--text-faint); font-size: var(--t-note); }
:where(body.ecran-correspondance) .colonnes-fichier li.retenue .sort { color: var(--succes); }
:where(body.ecran-correspondance) .libelle-champ { font-weight: 600; color: var(--text); }
:where(body.ecran-correspondance) .nom-technique { color: var(--text-faint); font-size: var(--t-note); background: none; padding: 0; margin-left: 0.35rem; }
/* Une colonne de coordonnées se distingue des colonnes reliées : elle
   n'est pas moins utilisée, elle l'est autrement. */
:where(body.ecran-correspondance) .colonnes-fichier li.position { background: var(--info-fond); border-color: var(--marine-trait); }
:where(body.ecran-correspondance) .colonnes-fichier li.position .sort { color: var(--marine); }
:where(body.ecran-correspondance) .note-coordonnees { margin: 0.6rem 0 0; font-size: var(--t-note); color: var(--tag-texte);
  line-height: 1.5; }

/* ---------------------------------------------------------------- *
 * reseau/reseau/geocodage.html, feuille rapatriee. Portee : body.ecran-geocodage.
 * ---------------------------------------------------------------- */
:where(body.ecran-geocodage) .sources { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0.9rem; margin: 1.2rem 0; }
/* Même règle que les cartes de phase : le bouton en bas, aligné d'une
   carte à l'autre quelle que soit la longueur du texte. */
:where(body.ecran-geocodage) .sources { align-items: stretch; }
:where(body.ecran-geocodage) .source { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1.1rem; }
:where(body.ecran-geocodage) .source p { flex: 1 1 auto; }
:where(body.ecran-geocodage) .source form, :where(body.ecran-geocodage) .source .a-venir, :where(body.ecran-geocodage) .source .rien { margin-top: auto; }
:where(body.ecran-geocodage) .source.a-faire { border-color: var(--ambre); }
:where(body.ecran-geocodage) .source h3 { margin: 0 0 0.35rem; font-size: var(--t-note); color: var(--bleu); }
:where(body.ecran-geocodage) .source p { margin: 0 0 0.7rem; font-size: var(--t-note); color: var(--tag-texte); line-height: 1.5; }
:where(body.ecran-geocodage) .source .chiffres { display: flex; gap: 1.4rem; margin-bottom: 0.7rem; }
:where(body.ecran-geocodage) .source .chiffres strong { display: block; font-size: var(--t-titre); color: var(--bleu); }
:where(body.ecran-geocodage) .source .chiffres span span { font-size: var(--t-note); color: var(--text-muted); }
:where(body.ecran-geocodage) .source button { padding: 0.35rem 0.9rem; background: var(--primary); color: var(--sur-couleur); border: 0; border-radius: 4px; font-size: var(--t-note); font-weight: 600; cursor: pointer; }
:where(body.ecran-geocodage) .source button:hover { background: var(--primary-hover); }
:where(body.ecran-geocodage) .source .a-venir { font-size: var(--t-note); color: var(--text-faint); font-style: italic; }
:where(body.ecran-geocodage) .source .rien { font-size: var(--t-note); color: var(--succes); }

/* L'anneau de progression : la part se lit d'un coup d'œil, sans lire le
   nombre, ce qui compte sur un écran regardé du coin de l'œil pendant
   plusieurs minutes. */
:where(body.ecran-geocodage) .avancement-rond { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; margin-top: 0.8rem; }
:where(body.ecran-geocodage) .anneau { width: 112px; height: 112px; flex: 0 0 auto; }
/* Le trait part de midi et tourne dans le sens des aiguilles : un
   compteur qui tournerait à l'envers se lit deux fois. */
:where(body.ecran-geocodage) .anneau circle { fill: none; stroke-width: 10; transform: rotate(-90deg); transform-origin: 60px 60px; }
:where(body.ecran-geocodage) .anneau-fond { stroke: var(--marine-fond); }
:where(body.ecran-geocodage) .anneau-part { stroke: var(--marine); stroke-linecap: round; transition: stroke-dashoffset .6s ease-out; }
/* Le chiffre d'un anneau est le chiffre d'un bandeau : on reprend le
   jeton de taille existant plutôt qu'une taille propre à cet écran. */
:where(body.ecran-geocodage) .anneau-valeur { font-size: var(--t-grande); font-weight: 700; fill: var(--marine); text-anchor: middle; font-variant-numeric: tabular-nums; }
:where(body.ecran-geocodage) .anneau-unite { font-size: var(--t-petite); fill: var(--text-faint); text-anchor: middle; letter-spacing: .05em; }
:where(body.ecran-geocodage) .compteurs-lot .sur { font-size: var(--t-petite); color: var(--text-faint); font-weight: 400; }
:where(body.ecran-geocodage) .entete-lot { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }
:where(body.ecran-geocodage) .entete-lot .detail { color: var(--text-muted); font-size: var(--t-note); }
:where(body.ecran-geocodage) .entete-lot .etiquette { margin-left: auto; font-size: var(--t-note); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; border-radius: 999px; padding: 0.12rem 0.6rem; background: var(--gris-bg); color: var(--tag-texte); }
:where(body.ecran-geocodage) .entete-lot .etiquette.en_cours { background: var(--alerte-fond); color: var(--alerte); }
:where(body.ecran-geocodage) .entete-lot .etiquette.termine { background: var(--succes-fond); color: var(--succes); }
:where(body.ecran-geocodage) .entete-lot .etiquette.echec { background: var(--danger-fond); color: var(--danger); }
:where(body.ecran-geocodage) .compteurs-lot { display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: 0.5rem; }
:where(body.ecran-geocodage) .compteurs-lot strong { display: block; font-size: var(--t-section); color: var(--bleu); font-variant-numeric: tabular-nums; }
:where(body.ecran-geocodage) .compteurs-lot span span { font-size: var(--t-note); color: var(--text-muted); }
:where(body.ecran-geocodage) .titre-lot { margin: 0 0 0.5rem; font-size: var(--t-note); }
:where(body.ecran-geocodage) .erreur-lot { color: var(--danger); font-size: var(--t-note); margin: 0.6rem 0 0; }

:where(body.ecran-geocodage) table { width: 100%; border-collapse: collapse; font-size: var(--t-note); }
:where(body.ecran-geocodage) th, :where(body.ecran-geocodage) td { text-align: left; padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--gris-bg); }
:where(body.ecran-geocodage) th { color: var(--text-muted); font-weight: 600; font-size: var(--t-note); text-transform: uppercase; letter-spacing: .03em; }
:where(body.ecran-geocodage) td.nombre { text-align: right; font-variant-numeric: tabular-nums; }
:where(body.ecran-geocodage) .exemple { color: var(--text-faint); font-style: italic; font-size: var(--t-note); }
:where(body.ecran-geocodage) .source .vide { display: block; font-size: var(--t-note); color: var(--text-faint);
  background: var(--bg-survol); border: 1px solid var(--marine-fond); border-radius: 6px;
  padding: 0.45rem 0.6rem; line-height: 1.45; }
:where(body.ecran-geocodage) .source .vide a { color: var(--marine); white-space: nowrap; }
:where(body.ecran-geocodage) .phase-sautable { margin: 0 0 1.2rem; padding: 0.7rem 0.95rem; font-size: var(--t-note);
  line-height: 1.5; color: var(--vert-fonce); background: var(--vert-pale); border: 1px solid var(--succes-trait);
  border-left: 3px solid var(--succes); border-radius: 6px; }
:where(body.ecran-geocodage) .phase-sautable .bouton-suivant { display: inline-block; margin-left: 0.5rem;
  padding: 0.2rem 0.7rem; background: var(--succes); color: var(--sur-couleur); border-radius: 4px;
  font-weight: 600; text-decoration: none; white-space: nowrap; }
:where(body.ecran-geocodage) .rien-detail { color: var(--vert); font-weight: 400; }
:where(body.ecran-geocodage) .note-journal { margin: 0 0 0.6rem; font-size: var(--t-note); color: var(--text-muted); }
/* Un travail remplacé recule sans disparaître : on doit voir lequel fait
   foi sans avoir à lire les dates. */
:where(body.ecran-geocodage) tr.lot-remplace td { color: var(--text-faint); }
:where(body.ecran-geocodage) .marque-vigueur, :where(body.ecran-geocodage) .marque-remplace { font-size: var(--t-note); border-radius: 999px;
  padding: 0.05rem 0.45rem; margin-left: 0.35rem; white-space: nowrap; }
:where(body.ecran-geocodage) .marque-vigueur { background: var(--succes-fond); color: var(--succes); border: 1px solid var(--succes-trait); }
:where(body.ecran-geocodage) .marque-remplace { background: var(--marine-fond); color: var(--text-faint); border: 1px solid var(--marine-fond); }
:where(body.ecran-geocodage) td.action { text-align: right; white-space: nowrap; }
:where(body.ecran-geocodage) td.action form { display: inline-block; margin-left: 0.5rem; }
:where(body.ecran-geocodage) td.action button { background: var(--bg-card); color: var(--danger); border: 1px solid var(--danger-trait);
  border-radius: 5px; padding: 0.12rem 0.5rem; font-size: var(--t-note); cursor: pointer; }
:where(body.ecran-geocodage) td.action button:hover { background: var(--danger-fond); border-color: var(--danger); }
:where(body.ecran-geocodage) .source .illisibles strong { color: var(--alerte); }
:where(body.ecran-geocodage) .note-illisibles { font-size: var(--t-note); color: var(--ambre-text); background: var(--ambre-bg);
  border: 1px solid var(--ambre); border-radius: 6px; padding: 0.45rem 0.6rem;
  margin: 0 0 0.7rem; line-height: 1.45; }
:where(body.ecran-geocodage) .note-complement { font-size: var(--t-note); color: var(--text-muted); margin: 0.45rem 0 0; }
:where(body.ecran-geocodage) .source .cumule { display: block; font-size: var(--t-note); color: var(--vert-fonce);
  background: var(--vert-pale); border: 1px solid var(--succes-trait); border-radius: 6px;
  padding: 0.45rem 0.6rem; line-height: 1.45; }
:where(body.ecran-geocodage) .source .cumule a { color: var(--succes); white-space: nowrap; }
:where(body.ecran-geocodage) .repli-technique > summary { cursor: pointer; font-size: var(--t-note); color: var(--text-muted); }
:where(body.ecran-geocodage) .repli-technique > ul { font-size: var(--t-note); color: var(--text-muted); margin: 0.4rem 0 0; padding-left: 1.2rem; }

/* ---------------------------------------------------------------- *
 * reseau/reseau/imports.html, feuille rapatriee. Portee : body.ecran-imports.
 * ---------------------------------------------------------------- */
/*
  L'écran suit l'ordre du travail réel : choisir son flux, voir ce qu'il
  attend, prendre le modèle, déposer. Un flux correspond à une carte, et la
  carte porte le parcours complet.

  Il ne faut pas revenir à la disposition précédente, qui demandait de
  déposer un fichier avant de dire ce qu'il devait contenir : formulaire en
  premier, structure attendue plus bas dans un autre pavé, reliés par un
  menu déroulant générique qui ne montrait rien. Le choix du flux se fait
  en choisissant sa carte, sans menu.
*/
/* L'en-tête tient sur une ligne : le parcours à gauche, le format à
   droite. Sous 900 px les deux repassent l'un sous l'autre. */
:where(body.ecran-imports) .entete-import { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.6rem; margin: 0 0 1rem; }
@media (max-width: 900px) { :where(body.ecran-imports) .entete-import { grid-template-columns: 1fr; gap: 0.5rem; } }
/* Contraste relevé : le gris précédent descendait sous le seuil
   confortable sur fond clair, et une consigne illisible ne sert à rien. */
/* `align-items: start` et un rembourrage identique : sans cela les deux
   paragraphes ne partent pas de la même ligne, l'encadré de droite étant
   décalé par son propre rembourrage. */
:where(body.ecran-imports) .entete-import { align-items: start; }
:where(body.ecran-imports) .entete-import p { margin: 0; font-size: var(--t-note); line-height: 1.5; color: var(--tag-texte); padding: 0.55rem 0; }
:where(body.ecran-imports) .entete-import .format { background: var(--bg-survol); border-left: 3px solid var(--marine-trait); border-radius: 0 6px 6px 0; padding: 0.55rem 0.8rem; font-size: var(--t-note); }

:where(body.ecran-imports) .flux-import { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 0.9rem; margin: 1rem 0 1.6rem; align-items: stretch; }

:where(body.ecran-imports) .flux-carte { display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
/* L'etat du dernier depot, en tete de carte : ce qui EXISTE avant ce que le
   flux attend. Trois etats - termine (vert), echec (rouge), en cours ou a
   verifier (neutre) - et « Aucun depot » en retrait. Un echec doit se voir
   ICI, la ou l'on redepose, pas au journal un ecran plus loin. */
:where(body.ecran-imports) .flux-carte .depot-etat { margin: 0 0 0.45rem; font-size: var(--t-note); font-weight: 600; color: var(--tag-texte); }
:where(body.ecran-imports) .flux-carte .depot-etat.fait { color: var(--vert); }
:where(body.ecran-imports) .flux-carte .depot-etat.echec { color: var(--rouge); }
:where(body.ecran-imports) .flux-carte .depot-etat.vide { color: var(--text-faint); font-weight: 500; font-style: italic; }
/* Le motif de verrouillage remplace le formulaire : la regle d'ordre se lit
   sur la carte qu'elle verrouille, pas dans un paragraphe a cote. */
:where(body.ecran-imports) .flux-carte .indisponible-motif { margin: 0.4rem 0 0; font-size: var(--t-note); color: var(--text-faint); line-height: 1.45; }
:where(body.ecran-imports) .flux-carte.indisponible { background: var(--bg-survol); border-style: dashed; }

:where(body.ecran-imports) .flux-tete { padding: 0.7rem 0.9rem 0.55rem; border-bottom: 1px solid var(--gris-bg); }
:where(body.ecran-imports) .flux-tete h3 { margin: 0 0 0.2rem; font-size: var(--t-note); color: var(--bleu); }
:where(body.ecran-imports) .flux-tete .volumetrie { font-size: var(--t-note); color: var(--text-faint); }
:where(body.ecran-imports) .flux-corps { padding: 0.7rem 0.9rem; flex: 1 1 auto; }
:where(body.ecran-imports) .flux-corps .objet { margin: 0 0 0.5rem; font-size: var(--t-note); color: var(--tag-texte); line-height: 1.5; }
:where(body.ecran-imports) .flux-corps .une-ligne { margin: 0; font-size: var(--t-note); color: var(--text-faint); }
:where(body.ecran-imports) .flux-corps .avertissement { margin: 0.7rem 0 0; background: var(--alerte-fond); border: 1px solid var(--ambre); border-radius: 6px; padding: 0.5rem 0.7rem; font-size: var(--t-note); color: var(--alerte); line-height: 1.45; }

/* Le pied porte l'action et reste aligné d'une carte à l'autre : les
   textes n'ont pas la même longueur, sans quoi les boutons dansent. */
:where(body.ecran-imports) .flux-pied { margin-top: auto; padding: 0.7rem 0.9rem 0.8rem; border-top: 1px solid var(--gris-bg); background: var(--bg-survol); }
:where(body.ecran-imports) .flux-pied .remplacement { margin: 0 0 0.6rem; font-size: var(--t-note); color: var(--text-muted); line-height: 1.45; }
:where(body.ecran-imports) .flux-pied input[type=file] { width: 100%; margin: 0 0 0.6rem; font-size: var(--t-note); }
:where(body.ecran-imports) .flux-pied button { width: 100%; padding: 0.5rem; background: var(--primary); color: var(--sur-couleur); border: 0; border-radius: 5px; font-weight: 600; font-size: var(--t-note); cursor: pointer; }
:where(body.ecran-imports) .flux-pied button:hover { background: var(--primary-hover); }
:where(body.ecran-imports) .flux-pied .indispo { display: block; font-size: var(--t-note); color: var(--text-faint); font-style: italic; text-align: center; }

/* La structure attendue se déplie dans la carte : elle n'est utile qu'au
   moment de préparer ce fichier-là. */
:where(body.ecran-imports) details.structure-flux { margin: 0.7rem 0 0; }
:where(body.ecran-imports) details.structure-flux > summary { cursor: pointer; font-size: var(--t-note); font-weight: 600; color: var(--bleu); list-style: none; }
:where(body.ecran-imports) details.structure-flux > summary::-webkit-details-marker { display: none; }
:where(body.ecran-imports) details.structure-flux > summary::before { content: "▸ "; }
:where(body.ecran-imports) details.structure-flux[open] > summary::before { content: "▾ "; }

/* La liste des champs : deux lignes par champ, pas six. Le filet à gauche
   distingue l'obligatoire du facultatif - c'est ce qui décide qu'un import
   passe ou non, et cela doit se voir sans lire. */
:where(body.ecran-imports) ul.champs { list-style: none; margin: 0.5rem 0 0; padding: 0; }
:where(body.ecran-imports) ul.champs li { padding: 0.35rem 0 0.35rem 0.55rem; border-left: 3px solid var(--marine-fond); border-bottom: 1px solid var(--bg-survol); }
:where(body.ecran-imports) ul.champs li:last-child { border-bottom: 0; }
:where(body.ecran-imports) ul.champs li.obligatoire { border-left-color: var(--vert); }
/* Libellé et exemple sur la même ligne : l'exemple est poussé à droite,
   où l'œil le retrouve d'un champ à l'autre. */
:where(body.ecran-imports) .ligne-champ { display: flex; align-items: baseline; gap: 0.4rem; }
:where(body.ecran-imports) .libelle-champ { color: var(--text); font-weight: 600; font-size: var(--t-note); }
:where(body.ecran-imports) .marque { font-size: var(--t-note); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--danger); background: var(--danger-fond); border-radius: 999px; padding: 0.05rem 0.35rem; white-space: nowrap; }
:where(body.ecran-imports) .ligne-champ .exemple { margin-left: auto; background: var(--bg-page); border-radius: 3px; padding: 0.05rem 0.3rem; font-size: var(--t-note); color: var(--text-muted); white-space: nowrap; }
:where(body.ecran-imports) .role { display: block; font-size: var(--t-note); color: var(--text-muted); line-height: 1.4; }
:where(body.ecran-imports) .sans-lui { color: var(--ambre-text); }
:where(body.ecran-imports) .nom-technique { color: var(--text-faint); font-size: var(--t-note); background: none; padding: 0; }

/* La barre de panneaux : des onglets, sans en avoir le nom. */
:where(body.ecran-imports) .barre-panneaux { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.8rem; }
:where(body.ecran-imports) .voir-panneau { padding: 0.35rem 0.8rem; background: var(--bg-card); border: 1px solid var(--marine-trait); border-radius: 999px; color: var(--bleu); font-size: var(--t-note); font-weight: 600; cursor: pointer; }
:where(body.ecran-imports) .voir-panneau:hover { background: var(--gris-bg); border-color: var(--vert); }
:where(body.ecran-imports) .voir-panneau[aria-expanded="true"] { background: var(--primary); border-color: var(--vert); color: var(--sur-couleur); }
/* Dans le pied d'une carte : même gabarit que le bouton de dépôt (pleine
   largeur, même hauteur) mais en contour. Déposer est l'action principale,
   consulter le dessin ne l'est pas. */
:where(body.ecran-imports) .flux-pied .voir-panneau.secondaire { width: 100%; margin-top: 0.45rem; border-radius: 5px; padding: 0.45rem; font-size: var(--t-note); }

:where(body.ecran-imports) .panneau { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 0.9rem 1.1rem 1rem; margin: 0 0 1.6rem; }
/* `.bloc-import` a l'apparence de `.panneau` mais n'en est pas un :
   `.panneau` appartient au système d'onglets, dont le script masque tous
   les panneaux sauf celui de l'onglet actif. Une section permanente qui
   emprunte cette classe disparaît de l'écran sans erreur ni trace, bien
   présente dans le HTML mais en `display: none`. */
/*
  `bloc-import` et non `.bloc` : un nom générique se percute. Deux écrans
  portant chacun leur `.bloc`, avec des bordures et des rayons différents,
  finissent par se croiser, et l'un écrase l'autre en silence.
*/
:where(body.ecran-imports) .bloc-import { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 0.9rem 1.1rem 1rem; margin: 0 0 1.6rem; }
:where(body.ecran-imports) .bloc-import.en-cours { background: var(--ambre-bg); border-left: 4px solid var(--ambre); }
:where(body.ecran-imports) .ordre-depot-liste { margin: 0.4rem 0 0; padding-left: 1.3rem; line-height: 1.55; }
:where(body.ecran-imports) .rapprochement { background: var(--vert-pale); border: 1px solid var(--succes-trait); border-radius: 8px; padding: 0.8rem 1rem; margin: 0.9rem 0; }
:where(body.ecran-imports) .repli-technique > summary { cursor: pointer; }
:where(body.ecran-imports) .repli-danger > summary { color: var(--danger); }
:where(body.ecran-imports) .ordre-depot-liste ul { margin: 0.35rem 0 0.6rem; padding-left: 1.2rem; }
:where(body.ecran-imports) .panneau-tete { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
:where(body.ecran-imports) .panneau-tete h3 { margin: 0; font-size: var(--t-note); color: var(--bleu); }
:where(body.ecran-imports) .panneau-tete .lien-modele { margin-left: auto; margin-top: 0; }


:where(body.ecran-imports) table.dessin-champs { width: 100%; border-collapse: collapse; font-size: var(--t-note); }
:where(body.ecran-imports) table.dessin-champs th { text-align: left; padding: 0.35rem 0.6rem; font-size: var(--t-note); text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted); border-bottom: 1px solid var(--border); }
:where(body.ecran-imports) table.dessin-champs td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--marine-fond); vertical-align: top; line-height: 1.45; color: var(--tag-texte); }
:where(body.ecran-imports) table.dessin-champs tr:last-child td { border-bottom: 0; }
/* Le filet dit l'obligatoire sans qu'il faille lire l'étiquette. */
:where(body.ecran-imports) table.dessin-champs tr.obligatoire td:first-child { border-left: 3px solid var(--vert); }
:where(body.ecran-imports) table.dessin-champs tr.facultatif td:first-child { border-left: 3px solid var(--marine-fond); }
:where(body.ecran-imports) table.dessin-champs .sans-lui { color: var(--ambre-text); font-size: var(--t-note); }

:where(body.ecran-imports) .lien-modele { display: inline-block; margin-top: 0.6rem; font-weight: 600; color: var(--bleu); font-size: var(--t-note); }

:where(body.ecran-imports) .note-journal { margin: 0 0 0.6rem; font-size: var(--t-note); color: var(--text-muted); }
/* Un dépôt remplacé reste lisible mais recule : celui qui fait foi doit se
   repérer d'un coup d'œil, sans lire les dates. */
:where(body.ecran-imports) .imports-passes tr.import-remplace td { color: var(--text-faint); }
:where(body.ecran-imports) .marque-vigueur, :where(body.ecran-imports) .marque-remplace { font-size: var(--t-note); border-radius: 999px;
  padding: 0.05rem 0.45rem; margin-left: 0.35rem; white-space: nowrap; }
:where(body.ecran-imports) .marque-vigueur { background: var(--succes-fond); color: var(--succes); border: 1px solid var(--succes-trait); }
:where(body.ecran-imports) .marque-remplace { background: var(--marine-fond); color: var(--text-faint); border: 1px solid var(--marine-fond); }
:where(body.ecran-imports) .imports-passes td.nombre, :where(body.ecran-imports) .imports-passes th.nombre { text-align: right; font-variant-numeric: tabular-nums; }
/* Une largeur fixe pour la colonne d'action : sans elle, la position
   du bouton dépend du contenu de la ligne et rien ne s'aligne. */
:where(body.ecran-imports) .imports-passes th.action, :where(body.ecran-imports) .imports-passes td.action { width: 6.5rem; }
:where(body.ecran-imports) .imports-passes .rejets { color: var(--ambre-text); }
/* Discret à dessein : une suppression est rare, et un bouton massif
   attire le clic. Il reste atteignable au clavier. */
:where(body.ecran-imports) .imports-passes td.action { text-align: right; }
:where(body.ecran-imports) .imports-passes td.action button { background: var(--bg-card); color: var(--danger); border: 1px solid var(--danger-trait); border-radius: 5px; padding: 0.12rem 0.5rem; font-size: var(--t-note); cursor: pointer; }
:where(body.ecran-imports) .imports-passes td.action button:hover { background: var(--danger-fond); border-color: var(--danger); }
:where(body.ecran-imports) .note-projection { margin: 0 0 1.2rem; padding: 0.6rem 0.85rem; font-size: var(--t-note);
  line-height: 1.5; color: var(--tag-texte); background: var(--bg-survol); border: 1px solid var(--marine-trait);
  border-left: 3px solid var(--marine); border-radius: 6px; max-width: 100%; }
:where(body.ecran-imports) .repere-reference { display: block; margin-top: 0.45rem; padding-top: 0.45rem;
  border-top: 1px dashed var(--marine-trait); color: var(--tag-texte); }
:where(body.ecran-imports) .groupe-flux { margin: 0 0 1.8rem; }
:where(body.ecran-imports) .groupe-titre { margin: 0 0 0.2rem; font-size: var(--t-libelle); color: var(--primary); }
:where(body.ecran-imports) .groupe-resume { margin: 0 0 0.8rem; font-size: var(--t-note); color: var(--text-muted); }
/* Les deux chemins côte à côte, séparés par un « ou » : c'est la
   disposition qui dit qu'il faut en choisir un, pas le texte. */
:where(body.ecran-imports) .deux-chemins { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem;
  align-items: start; }
@media (max-width: 1100px) { :where(body.ecran-imports) .deux-chemins { grid-template-columns: 1fr; } }
:where(body.ecran-imports) .chemin { background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0.9rem 1rem; }
:where(body.ecran-imports) .chemin.recommande { border-color: var(--primary); box-shadow: var(--shadow-card); }
:where(body.ecran-imports) .chemin-tete { display: flex; align-items: baseline; gap: 0.5rem; }
:where(body.ecran-imports) .chemin-tete h4 { margin: 0 0 0.3rem; font-size: var(--t-note); color: var(--primary); }
:where(body.ecran-imports) .marque-recommande { font-size: var(--t-note); text-transform: uppercase;
  letter-spacing: .04em; background: var(--vert-bg); color: var(--vert-text);
  border-radius: 999px; padding: 0.08rem 0.5rem; }
:where(body.ecran-imports) .chemin-pourquoi { margin: 0 0 0.8rem; font-size: var(--t-note); color: var(--text-muted);
  line-height: 1.5; }
:where(body.ecran-imports) .ou { align-self: center; color: var(--text-faint); font-size: var(--t-note);
  font-style: italic; }
@media (max-width: 1100px) { :where(body.ecran-imports) .ou { text-align: center; padding: 0.3rem 0; } }

/* ---------------------------------------------------------------- *
 * reseau/reseau/modele_ca.html, feuille rapatriee. Portee : body.ecran-modele-ca.
 * ---------------------------------------------------------------- */
:where(body.ecran-modele-ca) .etat-jeu { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 0.9rem 1.1rem; margin: 0 0 0.7rem; }
:where(body.ecran-modele-ca) .chiffres-cles { display: flex; flex-wrap: wrap; gap: 2.2rem; }
:where(body.ecran-modele-ca) .chiffres-cles .cle strong { display: block; font-size: var(--t-chiffre); line-height: 1.1; color: var(--tag-texte); font-variant-numeric: tabular-nums; }
:where(body.ecran-modele-ca) .chiffres-cles .cle span { font-size: var(--t-note); color: var(--text-faint); }
/* Le chiffre qui décide se distingue par la COULEUR, pas par la taille :
   agrandir un nombre parmi d'autres fait un titre, pas une hiérarchie. */
:where(body.ecran-modele-ca) .chiffres-cles .cle.decisif strong { color: var(--bleu); }
:where(body.ecran-modele-ca) .chiffres-cles .cle.decisif span { color: var(--bleu); font-weight: 600; }
:where(body.ecran-modele-ca) .chiffres-cles .cle.decisif.manquant strong, :where(body.ecran-modele-ca) .chiffres-cles .cle.decisif.manquant span { color: var(--danger); }
:where(body.ecran-modele-ca) .etat-jeu .precision { margin: 0.7rem 0 0; font-size: var(--t-note); color: var(--text-muted); }

:where(body.ecran-modele-ca) .etat-geocodeur { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--succes); border-radius: 8px; padding: 0.55rem 0.9rem; margin: 0 0 1.4rem; font-size: var(--t-note); }
:where(body.ecran-modele-ca) .etat-geocodeur.en-panne { border-left-color: var(--danger); }
:where(body.ecran-modele-ca) .etat-geocodeur .pastille { width: 8px; height: 8px; border-radius: 50%; background: var(--succes); }
:where(body.ecran-modele-ca) .etat-geocodeur.en-panne .pastille { background: var(--danger); }
:where(body.ecran-modele-ca) .etat-geocodeur .detail { color: var(--text-muted); }
:where(body.ecran-modele-ca) .etat-geocodeur .cache { margin-left: auto; color: var(--text-faint); font-size: var(--t-note); }

:where(body.ecran-modele-ca) .phases { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0.9rem; margin: 1.5rem 0; }
/* Le bouton « Ouvrir… » s'aligne sur la même ligne d'une carte à l'autre.
   Les textes n'ont pas la même longueur ; sans colonne flexible et sans
   `margin-top: auto`, le bouton descend plus ou moins bas selon la carte
   et la rangée paraît désordonnée. */
:where(body.ecran-modele-ca) .phases { align-items: stretch; }
:where(body.ecran-modele-ca) .phase { position: relative; display: flex; flex-direction: column; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1.1rem; }
:where(body.ecran-modele-ca) .phase p { flex: 1 1 auto; }
/* Une phase construite se distingue d'une phase annoncée : sans cela,
   l'écran promettrait cinq outils là où un seul existe. */
:where(body.ecran-modele-ca) .phase.construite { border-color: var(--vert); }
:where(body.ecran-modele-ca) .phase .rang { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--gris-bg); color: var(--bleu); font-weight: 700; font-size: var(--t-note); }
:where(body.ecran-modele-ca) .phase.construite .rang { background: var(--primary); color: var(--sur-couleur); }
:where(body.ecran-modele-ca) .phase h3 { margin: 0.6rem 0 0.35rem; font-size: var(--t-note); color: var(--bleu); }
:where(body.ecran-modele-ca) .phase p { margin: 0; font-size: var(--t-note); color: var(--tag-texte); line-height: 1.5; }
/* Même hauteur que le bouton, pas seulement même marge : les deux textes
   n'ont pas la même taille de police, donc à rembourrage égal la ligne de
   base tombe deux pixels plus bas et la rangée paraît de travers. On
   égalise la hauteur, pas le rembourrage. */
:where(body.ecran-modele-ca) .phase .a-venir { display: inline-flex; align-items: center; align-self: flex-start; margin-top: auto; min-height: 29.2px; padding: 0; font-size: var(--t-note); color: var(--text-faint); font-style: italic; }
:where(body.ecran-modele-ca) .phase a.bouton-phase { display: inline-block; align-self: flex-start; margin-top: auto; padding-top: 0.35rem; padding: 0.35rem 0.9rem; background: var(--primary); color: var(--sur-couleur); border-radius: 4px; text-decoration: none; font-size: var(--t-note); font-weight: 600; }
:where(body.ecran-modele-ca) .phase a.bouton-phase:hover { background: var(--primary-hover); text-decoration: none; }
/* L'etat de chaque phase, deduit des donnees. Trois etats se lisent d'un
   coup d'oeil : la faite (coche verte), la prochaine (bordure appuyee et
   bouton plein), la bloquee (carte eteinte). Sans eux, cinq cartes
   identiques et la question « et maintenant ? » sans reponse. */
:where(body.ecran-modele-ca) .phase.faite .rang { background: var(--vert); color: var(--sur-couleur); }
:where(body.ecran-modele-ca) .phase.faite a.bouton-phase { background: transparent; color: var(--primary); border: 1px solid var(--border); font-weight: 500; }
:where(body.ecran-modele-ca) .phase.prochaine { border-color: var(--primary); border-width: 2px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.07); }
:where(body.ecran-modele-ca) .phase.bloquee { opacity: 0.62; }
/* Le detail prouve l'etat par un chiffre. Il se distingue du resume par la
   couleur, pas par la taille : deux tailles de plus sur une carte deja
   dense feraient un escalier. */
:where(body.ecran-modele-ca) .phase .phase-etat { flex: 0 0 auto; margin: 0.4rem 0 0.6rem; font-size: var(--t-note); font-weight: 600; color: var(--bleu); }
:where(body.ecran-modele-ca) .phase.bloquee .phase-etat { color: var(--text-faint); font-weight: 500; }
:where(body.ecran-modele-ca) .compteurs { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 1rem 0 0; }
:where(body.ecran-modele-ca) .compteur strong { display: block; font-size: var(--t-chiffre); color: var(--bleu); }
:where(body.ecran-modele-ca) .compteur span { font-size: var(--t-note); color: var(--text-muted); }

/* ---------------------------------------------------------------- *
 * reseau/reseau/modele_integration.html, feuille rapatriee. Portee : body.ecran-modele-integration.
 * ---------------------------------------------------------------- */
:where(body.ecran-modele-integration) .intro-modele { max-width: none; margin: 0 0 1.2rem; font-size: var(--t-texte); line-height: 1.45; color: var(--tag-texte); }
:where(body.ecran-modele-integration) .bloc-modele { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1.1rem; margin-bottom: 1.2rem; }
:where(body.ecran-modele-integration) .bloc-modele h2 { margin: 0 0 0.2rem; font-size: var(--t-section); }
:where(body.ecran-modele-integration) .bloc-modele .sous { margin: 0 0 0.9rem; font-size: var(--t-note); color: var(--text-muted); }
/* Le modèle en service se distingue au premier regard : c'est la seule
   information que quelqu'un vient chercher ici en urgence. */
:where(body.ecran-modele-integration) .actif { border-left: 4px solid var(--primary); }
:where(body.ecran-modele-integration) .etiq-actif { display: inline-block; background: var(--primary); color: var(--sur-couleur); border-radius: 4px; padding: 0.1rem 0.5rem; font-size: var(--t-note); font-weight: 600; }
:where(body.ecran-modele-integration) .etiq-inactif { display: inline-block; background: var(--marine-fond); color: var(--text-muted); border-radius: 4px; padding: 0.1rem 0.5rem; font-size: var(--t-note); }
:where(body.ecran-modele-integration) .faits { display: flex; flex-wrap: wrap; gap: 1.6rem; margin: 0.7rem 0 0; }
:where(body.ecran-modele-integration) .fait { display: flex; flex-direction: column; }
:where(body.ecran-modele-integration) .fait .t { font-size: var(--t-note); color: var(--text-muted); text-transform: uppercase; letter-spacing: .02em; }
:where(body.ecran-modele-integration) .fait .v { font-size: var(--t-texte); font-weight: 600; }
/* Pas de `font-family` ici : une seule police dans toute la solution.  */
/* Une empreinte reste lisible sans chasse fixe, `word-break` suffit    */
/* à l'empêcher de déborder.                                            */
:where(body.ecran-modele-integration) .empreinte { font-size: var(--t-note); color: var(--text-muted); word-break: break-all; }
:where(body.ecran-modele-integration) .rien { color: var(--text-muted); font-size: var(--t-texte); }

/* ---------------------------------------------------------------- *
 * reseau/reseau/modele_test.html, feuille rapatriee. Portee : body.ecran-modele-test.
 * ---------------------------------------------------------------- */
:where(body.ecran-modele-test) .intro-modele { max-width: none; margin: 0 0 1.2rem; font-size: var(--t-texte); line-height: 1.45; color: var(--tag-texte); }
:where(body.ecran-modele-test) .bloc-modele { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1.1rem; margin-bottom: 1.2rem; border-left: 4px solid var(--primary); }
:where(body.ecran-modele-test) .bloc-modele h2 { margin: 0 0 0.2rem; font-size: var(--t-section); }
:where(body.ecran-modele-test) .bloc-modele .sous { margin: 0 0 0.9rem; font-size: var(--t-note); color: var(--text-muted); }
/* Une métrique, son chiffre, et ce qu'elle veut dire : la troisième
   colonne n'est pas un ornement, « r2_pdm 0,66 » n'informe personne. */
:where(body.ecran-modele-test) .metrique { display: grid; grid-template-columns: 16rem 7rem 1fr; gap: 0.6rem 1.2rem; align-items: baseline; padding: 0.7rem 0; border-top: 1px solid var(--marine-fond); }
:where(body.ecran-modele-test) .metrique:first-of-type { border-top: 0; }
:where(body.ecran-modele-test) .metrique .t { font-weight: 600; }
/* La grille du projet n'a que trois tailles : une valeur littérale en   */
/* serait une quatrième, et deux écrans cesseraient de s'accorder.       */
:where(body.ecran-modele-test) .metrique .v { font-size: var(--t-grande); font-weight: 600; color: var(--bleu); text-align: right; }
:where(body.ecran-modele-test) .metrique .v.vide { color: var(--text-faint); font-weight: 400; }
:where(body.ecran-modele-test) .metrique .d { font-size: var(--t-note); color: var(--text-muted); line-height: 1.4; }
:where(body.ecran-modele-test) .rien { color: var(--text-muted); font-size: var(--t-texte); }
:where(body.ecran-modele-test) .avertissement { background: var(--ambre-bg); border-left: 4px solid var(--ambre); padding: 0.8rem 1rem; border-radius: 0 6px 6px 0; margin: 0 0 1.2rem; font-size: var(--t-note); line-height: 1.45; }
:where(body.ecran-modele-test) .titre-diagnostic { margin: 1.4rem 0 0.2rem; font-size: var(--t-moyenne); }

/* ---------------------------------------------------------------- *
 * reseau/reseau/qualite.html, feuille rapatriee. Portee : body.ecran-qualite.
 * ---------------------------------------------------------------- */
:where(body.ecran-qualite) .intro-qualite { max-width: none; margin: 0 0 1rem; font-size: var(--t-texte); line-height: 1.4; color: var(--tag-texte); }
:where(body.ecran-qualite) .intro-qualite .repere-reference { display: block; margin-top: 0.4rem; font-size: var(--t-note); color: var(--text-muted); }

/* L'escalier des pertes : ce qui entre, ce qui reste à chaque marche.
   Présenté en ligne et non en tableau - on lit une descente, pas une
   liste de nombres. */
:where(body.ecran-qualite) .escalier { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: stretch; margin: 0.6rem 0 1.4rem; }
/* Titre au-dessus, chiffre en dessous : les pertes restent sous le
   nombre, elles le commentent, elles ne le nomment pas.
   Forme reprise de `etude_liste.html` : bordure var(--border), rayon 8 px,
   fond blanc, ombre douce au survol. Deux encadrés qui font la même
   chose dans deux écrans doivent se ressembler.
   Pas de filet à gauche : il marquait les marches de l'escalier, mais
   empêchait le rayon d'être identique des quatre côtés. */
:where(body.ecran-qualite) .marche { display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1 1 150px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 0.9rem 1rem 0.85rem; transition: border-color .12s, box-shadow .12s; }
:where(body.ecran-qualite) .marche:hover { border-color: var(--vert); box-shadow: 0 3px 12px var(--ombre-douce); }
/* La dernière marche est le résultat : elle porte le filet plein. */
:where(body.ecran-qualite) .escalier .marche:last-of-type { border-left-color: var(--primary); }
/* Une marche qui perd quelque chose le dit par son filet. */
:where(body.ecran-qualite) .marche:has(.perte) { border-left-color: var(--ambre); }
/* Le titre en petites capitales grises, le nombre en gros bleu. Le
   contraste de taille fait la hiérarchie mieux que le gras. */
:where(body.ecran-qualite) .marche strong { display: block; order: 2; margin-top: 0.15rem; font-size: var(--t-chiffre); line-height: 1.15; color: var(--primary); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
/* Libellé en ordre 1, nombre en ordre 2, pertes en ordre 3 : trois
   ordres explicites gardent les pertes sous le nombre et jamais
   au-dessus du titre. */
/* Même règle que le bandeau des magasins : minuscules, capitale
   initiale, et la taille du plancher de la grille au lieu de 0,75 rem. */
:where(body.ecran-qualite) .marche > span { order: 1; font-size: var(--t-libelle); line-height: 1.25; font-weight: 600; color: var(--text-muted); }
:where(body.ecran-qualite) .marche > span::first-letter { text-transform: uppercase; }
:where(body.ecran-qualite) .marche .perte { display: block; order: 3; margin-top: 0.25rem;
  font-size: var(--t-note); line-height: 1.35; font-weight: 400; text-transform: none;
  letter-spacing: 0; color: var(--alerte); }
:where(body.ecran-qualite) .fleche { align-self: center; color: var(--border); font-size: var(--t-section); }

/* Le choix de maille : deux cartes qu'on compare, pas une liste
   déroulante. Le coût de chacune doit se lire AVANT de choisir. */
:where(body.ecran-qualite) .choix-maille { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0.9rem; margin: 0.6rem 0 1rem; }
:where(body.ecran-qualite) .carte-maille { position: relative; background: var(--bg-card); border: 2px solid var(--border); border-radius: var(--radius); padding: 0.9rem 1.05rem; cursor: pointer; }
:where(body.ecran-qualite) .carte-maille:has(input:checked) { border-color: var(--primary); background: var(--bg-survol); }
:where(body.ecran-qualite) .carte-maille input { position: absolute; top: 0.9rem; right: 0.9rem; }
:where(body.ecran-qualite) .carte-maille h4 { margin: 0 0 0.3rem; font-size: var(--t-texte); color: var(--primary); }
:where(body.ecran-qualite) .carte-maille p { margin: 0 0 0.5rem; font-size: var(--t-note); color: var(--text-muted); line-height: 1.5; }
:where(body.ecran-qualite) .carte-maille .cout { font-size: var(--t-note); }
:where(body.ecran-qualite) .carte-maille .gagne { color: var(--vert-text); }
:where(body.ecran-qualite) .carte-maille .perd { color: var(--ambre-text); }

:where(body.ecran-qualite) .ligne-lancement { display: flex; flex-wrap: wrap; gap: 0.7rem; align-items: flex-end; }
:where(body.ecran-qualite) .ligne-lancement label { font-size: var(--t-note); color: var(--text-muted); display: block; }
:where(body.ecran-qualite) .ligne-lancement select { padding: 0.35rem 0.5rem; border: 1px solid var(--border); border-radius: 6px; font-size: var(--t-note); }

/* La vérification : la liste des magasins à gauche, la carte à droite.
   La carte reste visible pendant qu'on passe d'un magasin à l'autre - c'est tout l'objet de l'écran. */
/* La liste s'aligne sur la carte : avec `align-items: start`, la colonne
   de gauche s'arrêtait à son contenu et le blanc en dessous laissait
   croire qu'il n'y avait plus de magasins. `stretch` la fait descendre
   jusqu'au bas de la carte. */
:where(body.ecran-qualite) .verification { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 1rem; align-items: stretch; }
@media (max-width: 900px) { :where(body.ecran-qualite) .verification { grid-template-columns: 1fr; } }
/* Plus de hauteur fixe : la liste occupe ce que la carte lui donne, et
   défile à l'intérieur. Une hauteur en dur se désaccorde dès que la
   carte change de taille. */
:where(body.ecran-qualite) .colonne-magasins { display: flex; flex-direction: column; min-height: 0; }
:where(body.ecran-qualite) .liste-magasins { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); flex: 1 1 auto; min-height: 18rem; overflow-y: auto; }
/* La liste reste sous la taille commune du texte : sa colonne est
   étroite et fixe, et à la taille commune les noms se tronquaient
   (« ELECTRO BEAUGRE… »). Un nom coupé ne se lit pas mieux en plus gros.
   La taille passe par un jeton, pas par une valeur en dur : si la grille
   bouge, la liste suit dans la même proportion. */
:where(body.ecran-qualite) .liste-magasins button { width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--trait-clair); cursor: pointer; font-size: var(--t-petite); color: var(--text); }
:where(body.ecran-qualite) .liste-magasins button:hover { background: var(--gris-bg); }
:where(body.ecran-qualite) .liste-magasins button.actif { background: var(--accent-soft); color: var(--primary); font-weight: 600; }
:where(body.ecran-qualite) .liste-magasins .ville { display: block; font-size: var(--t-petite); color: var(--text-faint); }
/* La carte prend la hauteur de l'écran plutôt qu'une valeur fixe :
   520 px sur un écran de 1080 laissaient la moitié de la page vide, et
   une zone de chalandise se lit d'autant mieux qu'elle est grande.
   `min-height` garde un plancher sur les petits écrans.
   `position: relative` sert de repère à la légende, posée sur la carte. */
:where(body.ecran-qualite) #carte-verification { position: relative; height: calc(100vh - 260px); min-height: 520px; border: 1px solid var(--border); border-radius: var(--radius); }
/* Le bandeau des chiffres. Six valeurs alignées à égalité ne disent pas
   laquelle regarder : un filet les sépare et la part de marché ressort,
   c'est le chiffre du métier, les autres l'expliquent.
   La rangée elle-même est centrée : chaque chiffre l'était déjà sous son
   titre, mais la rangée se collait à gauche. `space-evenly` répartit
   aussi l'espace entre les cases pour qu'elles ne se serrent pas d'un
   côté. */
:where(body.ecran-qualite) .bandeau-magasin { display: flex; flex-wrap: wrap; justify-content: space-evenly; gap: 0.2rem 0; padding: 0.9rem 1rem 0.85rem; background: var(--bg-card); border: 1px solid var(--border); border-bottom: 0; border-radius: 8px 8px 0 0; font-size: var(--t-libelle); }
/* Titre au-dessus, chiffre en dessous : savoir de quoi on parle avant de
   lire le nombre évite de revenir en arrière. `column-reverse` inverse
   l'affichage sans toucher au balisage, donc sans risquer d'en oublier un.
   Marges intérieures ramenées à 0,5 rem : le texte ayant grossi de 20 %,
   les titres débordaient et la rangée repassait sur deux lignes. La place
   se reprend sur le blanc avant de la reprendre sur le texte. */
:where(body.ecran-qualite) .bandeau-magasin > span { display: flex; flex-direction: column-reverse; align-items: center; text-align: center; padding: 0.1rem 0.5rem; border-left: 1px solid var(--gris-bg); }
/* Seule la part de marché est colorée : c'est le résultat, les autres
   l'expliquent. Colorer tout reviendrait à ne rien souligner. */
:where(body.ecran-qualite) .bandeau-magasin > span:has(.pdm) { background: var(--vert-pale); border-radius: var(--radius); }
/* La première case garde son padding : le retirer décalait son contenu
   de 7 px vers la gauche, seule case du bandeau à ne pas être centrée
   sur elle-même. Seul le trait de séparation disparaît. */
:where(body.ecran-qualite) .bandeau-magasin > span:first-child { border-left: 0; }
/* Le chiffre reste à 1,35 rem : à 1,75 la rangée passait sur deux lignes.
   L'écart avec le titre reste de 1,6x, assez pour balayer sans forcer le
   retour à la ligne. */
:where(body.ecran-qualite) .bandeau-magasin strong { display: block; margin-top: 0.05rem; font-size: var(--t-chiffre); color: var(--primary); font-variant-numeric: tabular-nums; line-height: 1.15; }
/* Titres en minuscules : les majuscules espacées prenaient toute la
   largeur (« PART DE MARCHÉ · BRUTE » mesurait 210 px pour un chiffre de
   « 11,0 % »). Ce sont les titres qui débordaient, pas les chiffres.
   Sans interlettrage le même titre tient dans nettement moins de place,
   et une majuscule continue se déchiffre plus lentement. */
:where(body.ecran-qualite) .bandeau-magasin span span { font-size: var(--t-libelle); line-height: 1.3; font-weight: 600; color: var(--text-muted); }
/* La capitale initiale, et elle seule : `::first-letter` et non
   `capitalize`, qui met une majuscule à chaque mot (« Mailles En Zone »)
   et ralentit la lecture. Un titre français ne porte qu'une capitale.
   Le tout-capitales ne revient pas : il faisait déborder la rangée sur
   deux lignes. */
:where(body.ecran-qualite) .bandeau-magasin span span::first-letter { text-transform: uppercase; }
/* La part de marché est le résultat, pas une statistique de plus : elle
   garde sa couleur parce que celle-ci ne décore pas, elle désigne. */
:where(body.ecran-qualite) .bandeau-magasin strong.pdm { font-size: var(--t-chiffre); color: var(--succes); }
:where(body.ecran-qualite) .bandeau-magasin.vide { color: var(--text-faint); font-style: italic; }
:where(body.ecran-qualite) .reglages-lissage input[type=number] { width: 4rem; padding: 0.2rem 0.35rem;
  border: 1px solid var(--border); border-radius: 5px; font-size: var(--t-note); }
:where(body.ecran-qualite) .reglages-lissage .unite { color: var(--text-muted); }
:where(body.ecran-qualite) .reglages-lissage .effet { color: var(--text-muted); font-size: var(--t-note); }
:where(body.ecran-qualite) .reglages-lissage button { padding: 0.25rem 0.7rem; font-size: var(--t-note); }
:where(body.ecran-qualite) .methode-lissage { background: var(--bg-card); border: 1px solid var(--border); border-bottom: 0;
  padding: 1rem 1.2rem; font-size: var(--t-note); line-height: 1.55; color: var(--text); }
:where(body.ecran-qualite) .methode-lissage h4 { margin: 0 0 0.5rem; font-size: var(--t-texte); color: var(--primary); }
:where(body.ecran-qualite) .methode-lissage h5 { margin: 1rem 0 0.3rem; font-size: var(--t-note); color: var(--primary); }
:where(body.ecran-qualite) .avertissement-methode { background: var(--ambre-bg); border: 1px solid var(--ambre);
  border-radius: 6px; padding: 0.5rem 0.7rem; margin: 0 0 0.7rem; }
:where(body.ecran-qualite) .methode-lissage .pourquoi { color: var(--text-muted); margin: 0 0 0.8rem; }
:where(body.ecran-qualite) .temps-lissage { margin: 0; padding-left: 1.2rem; }
:where(body.ecran-qualite) .temps-lissage li { margin-bottom: 0.7rem; }
:where(body.ecran-qualite) .temps-lissage .exemple { display: block; margin-top: 0.25rem; font-size: var(--t-note);
  color: var(--text-muted); }
:where(body.ecran-qualite) .temps-lissage .reglage-lie { color: var(--info); font-size: var(--t-note); }
:where(body.ecran-qualite) .methode-lissage .origine { margin: 0.9rem 0 0; font-size: var(--t-note);
  color: var(--text-muted); }
:where(body.ecran-qualite) .filtre-pdv { width: 100%; padding: 0.4rem 0.6rem; margin-bottom: 0.4rem;
  border: 1px solid var(--border); border-radius: 6px; font-size: var(--t-note); }
:where(body.ecran-qualite) .compte-pdv { margin: 0 0 0.4rem; font-size: var(--t-note); color: var(--text-faint); }
:where(body.ecran-qualite) .liste-magasins button[hidden] { display: none; }
/* La barre au-dessus de la carte : une phrase à gauche, les actions à
   droite, la note en dessous et plus petite. La légende et la phrase de
   cadrage se lisaient sinon comme une seule coulée de texte. Les
   pastilles de légende en sont parties : elles doublaient la légende
   posée dans la carte, en moins précis. */
:where(body.ecran-qualite) .barre-zone { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5rem 1rem; margin: 0.6rem 0 0.5rem; font-size: var(--t-note); color: var(--tag-texte); }
:where(body.ecran-qualite) .note-zone { flex: 1 1 20rem; color: var(--text-muted); font-size: var(--t-note); line-height: 1.4; margin: 0; }
/* Les deux actions, empilées à droite. Elles gardent un contour pour ne
   pas se confondre avec la légende, qui ne se clique pas. */
:where(body.ecran-qualite) .actions-carte { margin-left: auto; display: flex; flex-direction: column; gap: 0.3rem; align-items: stretch; }
:where(body.ecran-qualite) .actions-carte button { border: 1px solid var(--marine-trait); border-radius: 999px; padding: 0.22rem 0.75rem; background: var(--bg-card); color: var(--bleu); font-weight: 600; cursor: pointer; }
:where(body.ecran-qualite) .actions-carte button:hover { background: var(--gris-bg); }
:where(body.ecran-qualite) #bascule-concurrence[aria-pressed="false"], :where(body.ecran-qualite) #bascule-ca-total[aria-pressed="true"] { background: var(--gris-bg); color: var(--bleu); font-weight: 600; }
:where(body.ecran-qualite) .legende-enseignes { display: flex; flex-wrap: wrap; gap: 0.4rem;
  padding: 0.6rem 0.2rem 0; font-size: var(--t-note); }
:where(body.ecran-qualite) .legende-enseignes span { display: inline-flex; align-items: center; gap: 0.3rem;
  color: var(--text-muted); }
:where(body.ecran-qualite) .legende-enseignes i { width: 0.7rem; height: 0.7rem; border-radius: 50%;
  display: inline-block; border: 1px solid var(--bg-card);
  box-shadow: 0 0 0 1px var(--ombre-moyenne); }
/* Le repère d'un concurrent : plus petit que le magasin du client, qui
   doit rester le point d'ancrage du regard. */
:where(body.ecran-qualite) .repere-concurrent { width: 11px; height: 11px; border-radius: 50%;
  border: 2px solid var(--bg-card); box-shadow: 0 1px 3px var(--ombre-forte);
  cursor: pointer; }
:where(body.ecran-qualite) .repere-concurrent.avec-logo { width: 22px; height: 22px; background: var(--bg-card) !important;
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
:where(body.ecran-qualite) .repere-concurrent.avec-logo img { width: 100%; height: 100%; object-fit: contain;
  padding: 2px; }
:where(body.ecran-qualite) .logo-legende { width: 1.1rem; height: 1.1rem; object-fit: contain;
  border-radius: 50%; padding: 1px; background: var(--bg-card); }
/* La barre de réglages. Des curseurs plutôt que des champs numériques :
   on cherche un réglage en le faisant glisser, on ne le tape pas. Le
   résultat suit à chaque relâchement, donc pas de bouton « rejouer » ni
   de chiffres périmés affichés pendant qu'on les croit à jour.
   Les curseurs du lissage servent à mettre la méthode au point, pas à
   s'en servir : repliés, ils n'encombrent pas l'écran de celui qui
   vérifie une zone.
   Le bloc des magasins sans zone est en ambre, comme tout ce qui appelle
   une décision sans être une erreur. */
:where(body.ecran-qualite) #legende-carte { position: absolute; left: 12px; bottom: 26px; z-index: 3; background: var(--voile-carte); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.5rem 0.7rem; font-size: var(--t-note); line-height: 1.35; box-shadow: 0 2px 8px var(--ombre-douce); }
:where(body.ecran-qualite) #legende-carte .titre-legende { font-weight: 700; margin-bottom: 0.3rem; color: var(--text); }
:where(body.ecran-qualite) #legende-carte .tranche { display: flex; align-items: center; gap: 0.45rem; }
:where(body.ecran-qualite) #legende-carte .tranche i { width: 0.95rem; height: 0.95rem; border: 1px solid rgba(16,42,67,.25); flex: 0 0 auto; }
:where(body.ecran-qualite) #legende-carte .borne { flex: 1 1 auto; font-variant-numeric: tabular-nums; }
/* L'effectif à droite, en gris : il vérifie la lecture sans la charger. */
:where(body.ecran-qualite) #legende-carte .effectif { color: var(--text-muted); font-variant-numeric: tabular-nums; }
:where(body.ecran-qualite) #legende-carte .methode-legende { margin-top: 0.35rem; font-size: var(--t-note); color: var(--text-faint); }
:where(body.ecran-qualite) .sans-zone { margin: 0 0 0.8rem; background: var(--ambre-bg); border: 1px solid var(--ambre); border-radius: var(--radius); padding: 0.5rem 0.8rem; }
:where(body.ecran-qualite) .sans-zone > summary { cursor: pointer; font-size: var(--t-note); color: var(--alerte); }
:where(body.ecran-qualite) .sans-zone table { margin-top: 0.6rem; }
/* Une seule barre d'outils : commandes de vue à gauche, actions à droite. */
:where(body.ecran-qualite) .outils-carte { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem; padding: 0.55rem 0.9rem; background: var(--bg-card); border: 1px solid var(--border); border-bottom: 0; }
:where(body.ecran-qualite) .outils-carte .actions-carte { margin-left: auto; flex-direction: row; gap: 0.4rem; }
/* Ce qui commente passe en dessous, sur une seule ligne discrète. */
:where(body.ecran-qualite) .sous-outils { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin: 0; padding: 0.4rem 0.9rem 0.5rem; background: var(--bg-survol); border: 1px solid var(--border); border-top: 0; font-size: var(--t-note); color: var(--text-muted); }
:where(body.ecran-qualite) .sous-outils .note-zone { flex: 0 1 auto; font-size: var(--t-note); }
:where(body.ecran-qualite) .reglages-avances { margin: 0; }
:where(body.ecran-qualite) .reglages-avances > summary { cursor: pointer; font-size: var(--t-note); color: var(--text-muted); list-style: none; }
:where(body.ecran-qualite) .reglages-avances > summary::-webkit-details-marker { display: none; }
:where(body.ecran-qualite) .reglages-avances > summary::before { content: "▸ "; }
:where(body.ecran-qualite) .reglages-avances[open] > summary::before { content: "▾ "; }
:where(body.ecran-qualite) .reglages-avances > summary:hover { color: var(--primary); }
:where(body.ecran-qualite) .reglages-lissage { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
  padding: 0.6rem 0.9rem; background: var(--bg-card); border: 1px solid var(--border);
  border-bottom: 0; font-size: var(--t-note); }
/* La bascule Lissée / Brute. Les sélecteurs portent le suffixe complet
   de chaque côté de la virgule : `.a .b, .c .b label` signifie « .a .b »
   et « .c .b label », pas « (.a|.c) .b label ». L'oubli donnait au
   conteneur les styles du libellé : texte blanc sur fond blanc, bascule
   invisible. */
:where(body.ecran-qualite) .bascule { display: inline-flex; border: 1px solid var(--border);
  border-radius: 999px; overflow: hidden; }
:where(body.ecran-qualite) .bascule input { position: absolute; opacity: 0; pointer-events: none; }
:where(body.ecran-qualite) .bascule label { padding: 0.25rem 0.85rem; margin: 0; cursor: pointer;
  color: var(--text-muted); font-weight: 500; }
:where(body.ecran-qualite) .bascule input:checked + label { background: var(--primary); color: var(--sur-couleur); }
:where(body.ecran-qualite) .curseurs { display: flex; flex-wrap: wrap; gap: 1.1rem; align-items: center; }
:where(body.ecran-qualite) .reglages-lissage .reglage { display: inline-flex; align-items: center; gap: 0.4rem; }
:where(body.ecran-qualite) .reglages-lissage .reglage label { color: var(--text-muted); }
:where(body.ecran-qualite) .reglages-lissage input[type=range] { width: 5.5rem; accent-color: var(--primary); }
:where(body.ecran-qualite) .reglages-lissage output { min-width: 3rem; font-variant-numeric: tabular-nums;
  font-weight: 600; color: var(--primary); }
:where(body.ecran-qualite) .actions-lissage { margin-left: auto; display: inline-flex; gap: 0.4rem; }
:where(body.ecran-qualite) .lien-methode { background: none; border: 1px solid var(--border); border-radius: 6px;
  padding: 0.22rem 0.7rem; font-size: var(--t-note); color: var(--text-muted); cursor: pointer; }
:where(body.ecran-qualite) .lien-methode:hover { border-color: var(--primary); color: var(--primary); }
:where(body.ecran-qualite) .effet { margin: 0; padding: 0.35rem 0.9rem; background: var(--bg-card);
  border: 1px solid var(--border); border-bottom: 0; font-size: var(--t-note);
  color: var(--text-muted); }
:where(body.ecran-qualite) .effet .stabilise { color: var(--vert-text); }
:where(body.ecran-qualite) .effet.calcul { color: var(--text-faint); font-style: italic; }
:where(body.ecran-qualite) .tri-pdv { width: 100%; padding: 0.3rem 0.5rem; margin-bottom: 0.4rem;
  border: 1px solid var(--border); border-radius: 6px; font-size: var(--t-note); }
/* Une ligne par magasin, pas deux : à deux cents magasins, deux lignes
   chacune font quatre cents lignes à faire défiler. */
:where(body.ecran-qualite) .liste-magasins button { display: flex; justify-content: space-between;
  align-items: baseline; gap: 0.5rem; padding: 0.4rem 0.7rem; }
:where(body.ecran-qualite) .liste-magasins .nom-pdv { overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
:where(body.ecran-qualite) .liste-magasins .ca-pdv { flex: 0 0 auto; font-size: var(--t-note);
  color: var(--text-faint); font-variant-numeric: tabular-nums; }
:where(body.ecran-qualite) .liste-magasins button.actif .ca-pdv { color: var(--primary); }
:where(body.ecran-qualite) .bandeau-magasin .pdm { color: var(--vert-text); }

/* ---------------------------------------------------------------- *
 * schema_directeur/schema_directeur/_travail_labo.html, feuille rapatriee. Portee : body.ecran-schema-directeur.
 * ---------------------------------------------------------------- */
    :where(body.ecran-schema-directeur) .sd-mire { display:flex; align-items:center; gap:.8rem;
      padding:.4rem 0 .6rem; }
    /* La reduction PROPOSEE se distingue du chiffrage : le modele recommande
       de reduire les magasins sous le seuil de CA au m2 de leur typologie.
       La ligne proposee est en tete et marquee ; le reste reste un chiffrage
       a explorer, pas une recommandation. */
    :where(body.ecran-schema-directeur) .reduction-proposees { margin: 0 0 0.6rem; padding: 0.5rem 0.75rem;
      background: var(--info-fond); border-left: 3px solid var(--primary); border-radius: 4px; }
    :where(body.ecran-schema-directeur) tr.ligne-proposee { background: var(--info-fond); }
    :where(body.ecran-schema-directeur) .marque-proposee { display: inline-block; margin-left: 0.4rem;
      padding: 0.05rem 0.4rem; font-size: var(--t-note); font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.02em; color: var(--sur-couleur); background: var(--primary); border-radius: 3px; cursor: help; }
    :where(body.ecran-schema-directeur) .sd-mire-rond { width:1.4rem; height:1.4rem; flex:none;
      border:3px solid var(--vert-pale); border-top-color: var(--vert);
      border-radius:50%; animation:sd-mire-tour 1s linear infinite; }
    @keyframes sd-mire-tour { to { transform:rotate(360deg); } }
    @media (prefers-reduced-motion: reduce) {
      :where(body.ecran-schema-directeur) .sd-mire-rond { animation:none; border-top-color: var(--vert-pale); }
    }

/* ---------------------------------------------------------------- *
 * schema_directeur/schema_directeur/comparer.html, feuille rapatriee. Portee : body.ecran-comparer.
 * ---------------------------------------------------------------- */
/* Qui est qui : A porte sa teinte, B la sienne, en-têtes comme cellules.
   Sans cela, on voit mal qui est comparé à qui. */
:where(body.ecran-comparer) .cmp-colA { background: color-mix(in srgb, var(--marine) 9%, transparent); }
:where(body.ecran-comparer) .cmp-colB { background: color-mix(in srgb, var(--vert-fonce) 10%, transparent); }
:where(body.ecran-comparer) .cmp-tagA, :where(body.ecran-comparer) .cmp-tagB { display:inline-block; font-size:var(--t-petite);
  font-weight:800; padding:.1rem .5rem; border-radius:5px;
  margin-right:.35rem; color:var(--sur-couleur); }
:where(body.ecran-comparer) .cmp-tagA { background: var(--primary); } :where(body.ecran-comparer) .cmp-tagB { background:var(--vert-fonce); }
:where(body.ecran-comparer) .cmp-diff { font-weight:700; background:var(--ambre-fond, var(--ambre-bg)); }
:where(body.ecran-comparer) .cmp-mvt { font-size:var(--t-petite); font-weight:700; padding:.1rem .5rem;
  border-radius:99px; white-space:nowrap; }
:where(body.ecran-comparer) .cmp-entre { background:var(--vert-fond, var(--succes-fond));
  color:var(--vert-encre, var(--succes)); }
:where(body.ecran-comparer) .cmp-sort { background:var(--rouge-fond, var(--danger-fond)); color:var(--danger); }
:where(body.ecran-comparer) .cmp-monte { color:var(--vert-encre, var(--succes)); font-weight:700; }
:where(body.ecran-comparer) .cmp-descend { color:var(--danger); font-weight:700; }

/* ---------------------------------------------------------------- *
 * schema_directeur/schema_directeur/regles.html, feuille rapatriee. Portee : body.ecran-regles.
 * ---------------------------------------------------------------- */
/* Ces règles restent ici plutôt que dans `diamap.css` : un écran neuf ne
   s'installe pas dans la feuille commune avant d'avoir été revu. Elles
   n'emploient que des jetons existants. */
/* Revu : la carte de reglage se pose vraiment (ombre, rayon de carte), son
   titre porte un liserE vert, chaque champ devient un mini-panneau lisible,
   et la barre de validation reste sous la main en bas d'un formulaire long. */
:where(body.ecran-regles) .reg-groupe { border:1px solid var(--border); border-radius:var(--rayon-carte);
  padding:1.15rem 1.35rem 1.35rem; margin:0 0 1.15rem; background:var(--bg-card);
  box-shadow:var(--ombre-carte); }
:where(body.ecran-regles) .reg-groupe > h3 { margin:0 0 .15rem; font-size:var(--t-section);
  color:var(--marine); display:flex; align-items:center; gap:.5rem; }
:where(body.ecran-regles) .reg-groupe > h3::before { content:""; width:3px; height:1.05em;
  border-radius:2px; background:var(--vert); flex:none; }
:where(body.ecran-regles) .reg-champs { display:grid; gap:.9rem 1.4rem;
  grid-template-columns:repeat(auto-fit, minmax(17rem, 1fr));
  margin-top:1rem; }
:where(body.ecran-regles) .reg-champ { display:flex; flex-direction:column; gap:.3rem;
  padding:.8rem .9rem; border:1px solid var(--filet); border-radius:var(--rayon-champ);
  background:var(--bg-page); }
:where(body.ecran-regles) .reg-champ .reg-libelle { font-weight:700; color:var(--text); }
:where(body.ecran-regles) .reg-saisie { display:flex; align-items:center; gap:.45rem; }
:where(body.ecran-regles) .reg-saisie input[type="number"] { width:8rem; text-align:right;
  font-variant-numeric:tabular-nums; }
:where(body.ecran-regles) .reg-unite { color:var(--text-muted); font-size:var(--t-dense); }
:where(body.ecran-regles) .reg-aide { color:var(--text-muted); font-size:var(--t-dense); line-height:1.4; }
/* Les formats : des puces qu'on coche, pas une rangee de cases ternes. */
:where(body.ecran-regles) .reg-formats { display:flex; flex-wrap:wrap; gap:.45rem;
  margin-top:.6rem; }
:where(body.ecran-regles) .reg-formats label { display:inline-flex; align-items:center; gap:.35rem;
  border:1px solid var(--border-champ); border-radius:999px; padding:.3rem .75rem;
  cursor:pointer; font-size:var(--t-dense); background:var(--bg-card);
  transition:border-color .12s, background .12s; }
:where(body.ecran-regles) .reg-formats label:hover { border-color:var(--vert); }
:where(body.ecran-regles) .reg-formats label:has(input:checked) { background:var(--vert-pale);
  border-color:var(--vert); color:var(--vert-fonce); font-weight:600; }
:where(body.ecran-regles) .reg-validation { margin:.5rem 0 1.3rem;
  color:var(--text-muted); font-size:var(--t-dense); }
/* La barre d'action colle au bas de l'ecran : un formulaire long ne cache
   plus son bouton de validation tout en bas. */
:where(body.ecran-regles) .reg-actions { display:flex; align-items:center; gap:.9rem;
  flex-wrap:wrap; position:sticky; bottom:.6rem; z-index:5; margin:1.4rem 0 0;
  padding:.85rem 1.1rem; background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--rayon-carte); box-shadow:var(--ombre-levee); }
:where(body.ecran-regles) .sd-alerte-regles { background:var(--ambre-bg);
  border:1px solid var(--alerte-trait); border-radius:var(--rayon-champ);
  padding:.6rem .9rem; margin:.6rem 0 1rem; font-size:var(--t-dense); }
/* La grille des CA minimum : lignes alternees, en-tete de ligne accroche. */
:where(body.ecran-regles) .sd-typo tbody tr:hover > th[scope="row"] { color:var(--marine); }
:where(body.ecran-regles) .sd-typo tbody th[scope="row"] { position:sticky; left:0;
  background:var(--bg-card); }

/* ---------------------------------------------------------------- *
 * schema_directeur/schema_directeur/bibliotheque.html. Portee : body.ecran-biblio.
 * ---------------------------------------------------------------- */
/* Le comparateur devient une carte posee, l'etat « affiche » une pastille
   verte, et le tableau respire. Jetons existants uniquement. */
:where(body.ecran-biblio) .biblio-comparer { background:var(--bg-card);
  border:1px solid var(--border); border-radius:var(--rayon-carte);
  box-shadow:var(--ombre-carte); padding:1.05rem 1.25rem 1.15rem; margin:0 0 1.4rem; }
:where(body.ecran-biblio) .biblio-comparer .sd-comparer-titre { color:var(--marine); }
:where(body.ecran-biblio) .biblio-comparer .sd-comparer { flex-wrap:wrap; margin:0; }
:where(body.ecran-biblio) .biblio-comparer-vs { align-self:flex-end; padding-bottom:.5rem;
  color:var(--text-muted); font-size:var(--t-dense); font-style:italic; }
:where(body.ecran-biblio) .biblio-comparer select { min-width:14rem; }
:where(body.ecran-biblio) .tableau { font-size:var(--t-corps); }
:where(body.ecran-biblio) .tableau td { padding:.6rem .7rem; vertical-align:top; }
:where(body.ecran-biblio) .tableau tbody tr:hover { background:var(--bg-survol); }
:where(body.ecran-biblio) .biblio-pastille { display:inline-flex; align-items:center; gap:.3rem;
  background:var(--vert-pale); color:var(--vert-fonce); font-weight:700; font-size:var(--t-dense);
  border-radius:999px; padding:.2rem .6rem; white-space:nowrap; }
:where(body.ecran-biblio) .biblio-activer { font-size:var(--t-dense); }

/* ---------------------------------------------------------------- *
 * schema_directeur/schema_directeur/schema.html, feuille rapatriee. Portee : body.ecran-schema.
 * ---------------------------------------------------------------- */
/* La bibliothèque est un lien dans la rangée d'onglets, mais elle doit se
   dessiner comme eux : même pastille, même hauteur que les boutons
   d'étape. Sans cette règle, l'ancre retombe sur le lien souligné par
   défaut. Copie de `.onglets button` (diamap.css), à ceci près que le
   soulignement est retiré. */
:where(body.ecran-schema) .onglets .onglet-lien { border: 1px solid var(--border);
  background: var(--bg-card); color: var(--ardoise);
  border-radius: 999px; padding: .4rem 1rem;
  font-size: var(--t-petite); font-weight: 550;
  text-decoration: none; display: inline-block; white-space: nowrap;
  /* La même marge haute que les boutons (une règle globale la leur
     donne) : sans elle, le lien s'étire sur toute la rangée, 55 px
     mesurés contre 35. */
  margin: 20px 0 0; }
:where(body.ecran-schema) .onglets .onglet-lien:hover { border-color: var(--bleu);
  color: var(--bleu); }

/* Le retour à côté du geste : la confirmation s'affiche à droite du
   bouton cliqué, et la mire du calcul naît sous le bouton « Lancer ».
   Tout répondait en haut de page, hors écran quand on clique en bas du
   volet. */
:where(body.ecran-schema) .sd-fait { display: inline-flex; align-items: center; gap: .4rem;
  background: var(--vert-fond, var(--succes-fond)); color: var(--vert-encre, var(--succes));
  font-size: var(--t-petite); font-weight: 600; padding: .35rem .7rem;
  border-radius: 7px; margin-left: .55rem; vertical-align: middle; }
:where(body.ecran-schema) .sd-fait.refus { background: var(--rouge-fond, var(--danger-fond)); color: var(--danger); }
:where(body.ecran-schema) .sd-mire-cadre { display: flex; align-items: flex-start; gap: .6rem;
  background: var(--bleu-fond, var(--marine-fond)); border-radius: 8px;
  padding: .7rem .9rem; margin-top: .7rem; font-size: var(--t-petite); }
:where(body.ecran-schema) .sd-mire-cadre .sd-rond { width: 14px; height: 14px; flex: none;
  margin-top: .2rem; border: 2.5px solid var(--bleu);
  border-top-color: transparent; border-radius: 50%;
  animation: sd-tourne 1s linear infinite; }
@keyframes sd-tourne { to { transform: rotate(360deg); } }

/* Le chemin de fer, repris du rail des études. Copié de
   `etude_detail.html` et non partagé : le style du rail vit dans le
   gabarit des études, pas dans `diamap.css`. Le mutualiser reste à faire.

   Plus grand, et sur une seule ligne : le rail des études vit dans la
   barre du haut, serrée, celui-ci vit dans la page. La taille de note y
   faisait un fil de fourmis, et le retour flottait sous la ligne des
   puces. */
:where(body.ecran-schema) .rail-etapes { display: flex; align-items: center; gap: 0.4rem;
  width: 100%; min-width: 0; margin: 0 0 1rem; }
/* Même hauteur pour tout le monde : le retour et les puces avaient chacun
   leur hauteur de contenu ; une hauteur unique les met sur la même ligne,
   quel que soit leur texte. */
:where(body.ecran-schema) .rail-etapes .retour, :where(body.ecran-schema) .rail-etapes .etape-puce { height: 2.05rem;
  box-sizing: border-box; padding-top: 0; padding-bottom: 0;
  /* Mesuré : le bouton de base porte un `margin-top: 20px`, c'était lui
     le décalage. Une hauteur commune sans cette ligne ne suffit pas. */
  margin: 0; }
:where(body.ecran-schema) .rail-etapes .retour { flex: 0 0 auto; display: inline-flex;
  align-items: center; gap: .3rem; background: var(--bg-card);
  border: 1px solid var(--marine-trait); border-radius: 999px;
  padding: .28rem .8rem; font-size: var(--t-dense);
  font-weight: 600; line-height: 1.2;
  cursor: pointer; color: var(--lien, var(--marine)); white-space: nowrap; }
:where(body.ecran-schema) .rail-etapes .retour:hover { border-color: var(--vert); background: var(--gris-bg); }
:where(body.ecran-schema) .rail-etapes .trait { width: 14px; height: 2px; background: var(--marine-trait);
  border: 0; border-radius: 2px; flex: 1 1 auto; transition: background .18s; }
:where(body.ecran-schema) .rail-etapes .trait.franchi { background: var(--vert); }
:where(body.ecran-schema) .rail-etapes .etape-puce { display: inline-flex; align-items: center;
  justify-content: center; gap: 0.35rem; padding: 0.28rem .8rem;
  font-size: var(--t-dense); line-height: 1.2;
  white-space: nowrap; flex: 0 1 auto;
  min-width: 0; background: var(--bg-card); color: var(--text-muted);
  border: 1px solid var(--border); border-radius: 999px; }
:where(body.ecran-schema) .rail-etapes .etape-puce .num { font-variant-numeric: tabular-nums;
  opacity: 0.75; }
:where(body.ecran-schema) .rail-etapes .etape-puce.active .num { opacity: 1; }
:where(body.ecran-schema) .rail-etapes .etape-puce .mot { overflow: hidden; text-overflow: ellipsis; }
:where(body.ecran-schema) .rail-etapes .etape-puce .coche { color: var(--succes); }
:where(body.ecran-schema) .rail-etapes .etape-puce.active { background: var(--vert-pale); color: var(--vert-fonce);
  border-color: var(--vert); font-weight: 700; box-shadow: 0 0 0 2px var(--ombre-moyenne); }
:where(body.ecran-schema) .rail-etapes .etape-puce .cadenas { opacity: 0.55; }
:where(body.ecran-schema) .rail-etapes .etape-puce .picto { line-height: 1; opacity: 0.8; }
:where(body.ecran-schema) .rail-etapes .etape-puce:disabled { border-style: dashed;
  color: var(--texte-doux); }
:where(body.ecran-schema) .rail-etapes .etape-puce:not(:disabled):not(.active):hover {
  border-color: var(--vert); background: var(--gris-bg); cursor: pointer; }
:where(body.ecran-schema) .rail-etapes .onglets-a-part { margin-left: auto; display: inline-flex;
  gap: .5rem; flex: 0 0 auto; }
@media (max-width: 1150px) {
  :where(body.ecran-schema) .rail-etapes .etape-puce .mot { display: none; }
}

/* ---------------------------------------------------------------- *
 * schema_directeur/schema_directeur/site_fiche.html, feuille rapatriee. Portee : body.ecran-site-fiche.
 * ---------------------------------------------------------------- */
:where(body.ecran-site-fiche) .sdf-tete { display:flex; flex-wrap:wrap; align-items:baseline; gap:.6rem; }
:where(body.ecran-site-fiche) .sdf-badge { font-size:var(--t-petite); font-weight:700; padding:.15rem .55rem;
  border-radius:99px; background:var(--vert-fond, var(--succes-fond));
  color:var(--vert-encre, var(--succes)); }
/* La fiche s'empile : chiffres, carte, tableau, chacun sur toute la     */
/* largeur. En colonne, la carte perdait un tiers de sa place et le      */
/* tableau logeait quatre colonnes dans une demi-page.                   */

/* La clé de lecture, en tête et en pleine largeur. */
:where(body.ecran-site-fiche) .sdf-cle-lecture { background:var(--info-fond); border:1px solid var(--marine-trait);
  border-left:4px solid var(--bleu, var(--marine)); border-radius:0 8px 8px 0;
  padding:.7rem .9rem; margin:.9rem 0 1rem; }
:where(body.ecran-site-fiche) .sdf-cle-lecture b { color:var(--bleu, var(--marine)); }

/* Le code de l'IRIS sous son nom - présent, discret. */
:where(body.ecran-site-fiche) .sdf-iris-code { font-size:var(--t-petite); color:var(--texte-doux, var(--text-muted));
  margin-left:.4rem; }
:where(body.ecran-site-fiche) .sdf-tuiles { display:grid; grid-template-columns:repeat(3,1fr);
  gap:.6rem; margin:0 0 .9rem; }
:where(body.ecran-site-fiche) .sdf-tuile { border:1px solid var(--trait); border-radius:8px;
  text-align:center; padding:.6rem .4rem; }
:where(body.ecran-site-fiche) .sdf-tuile b { display:block; font-size:var(--t-grande); }
/* `> span` vise l'enfant direct, et c'est tout l'enjeu : le filtre  */
/* `euros` glisse un `<span title="...">` dans le `<b>` pour porter  */
/* le montant exact au survol. Un sélecteur `.sdf-tuile span`        */
/* l'attrapait aussi et le chiffre tombait à 0,68 rem (10,88 px)     */
/* là où le `<b>` en annonçait 30. Le défaut ne touchait que les     */
/* montants : les autres valeurs ne passent par aucun filtre, donc   */
/* par aucun span.                                                   */
:where(body.ecran-site-fiche) .sdf-tuile > span { font-size:var(--t-petite); text-transform:uppercase;
  letter-spacing:.04em; color:var(--texte-doux, var(--text-muted)); }

/* La tuile phare : le CA potentiel est le chiffre qu'on vient chercher,
   il était le plus petit des quatre. Fond pastel et chiffre agrandi, la
   hiérarchie se voit sans lire. */
:where(body.ecran-site-fiche) .sdf-tuile-phare { background:var(--info-fond); border-color:var(--marine-trait);
  margin:0 0 .55rem; }
:where(body.ecran-site-fiche) .sdf-tuile-phare { padding:1.1rem .6rem; }
:where(body.ecran-site-fiche) .sdf-tuile-phare b { font-size:3.2rem; color:var(--bleu, var(--marine));
  line-height:1.05; letter-spacing:-.02em; }
:where(body.ecran-site-fiche) .sdf-tuile-phare > span { color:var(--bleu, var(--marine)); font-weight:600;
  font-size:var(--t-petite); }

/* Les logos des enseignes concurrentes : le logo dit l'enseigne mieux
   qu'un nom tronqué. `object-fit: contain` est nécessaire, les logos ont
   des proportions très différentes et un carré forcé les écraserait. */
:where(body.ecran-site-fiche) .sdf-logos { display:flex; flex-wrap:wrap; gap:.25rem;
  justify-content:center; align-items:center; margin-top:.35rem; }
:where(body.ecran-site-fiche) .sdf-logos img { width:22px; height:22px; object-fit:contain;
  border-radius:4px; background:var(--bg-card); }
:where(body.ecran-site-fiche) .sdf-logos i { font-style:normal; font-size:var(--t-petite);
  color:var(--texte-doux, var(--text-muted)); }

/* Le titre du tableau : il dit ce que sont les dix lignes avant qu'on
   les lise. */
/* La pastille du magasin touché reprend celle de la carte : même   */
/* repérage à l'oeil des deux côtés, sans avoir à chercher.         */
:where(body.ecran-site-fiche) .sdf-pastille { display:inline-block; width:.7rem; height:.7rem;
  border-radius:50%; margin-right:.4rem; vertical-align:-1px;
  background:var(--danger); }
:where(body.ecran-site-fiche) .sdf-perte { color:var(--danger); font-weight:600; }
/* Le marqueur porté au sol : plus petit que le site, plus grand qu'un */
/* concurrent, il se distingue des deux sans leur voler la vedette.   */
:where(body.ecran-site-fiche) .pt-cannibalise { width:.8rem; height:.8rem; border-radius:50%;
  background:var(--danger); border:2px solid var(--bg-card);
  box-shadow:0 1px 4px var(--ombre-forte); }
:where(body.ecran-site-fiche) .sdf-titre-tableau { font-size:var(--t-moyenne); margin:.2rem 0 .5rem;
  font-weight:600; }
/* La légende du composant, plus grande sur cet écran : le texte du CA
   y était trop petit. Réglage d'écran, pas de composant, l'écran de zone
   de marché garde sa propre taille. */
:where(body.ecran-site-fiche) #sd04-legende { font-size: .95rem; max-width: 300px; }
/* Le bouton du rapport, dans la barre du haut : picto puis libelle. */
/* ------------------------------------------------------------------ *
 * Deux composants communs, poses ici a la suite d'un bloc d'ecran.
 *
 * Sans entete a eux, ils tombaient DANS la portee du bloc precedent
 * (`body.ecran-site-fiche`) : le test des portees les lisait comme des
 * regles qui debordent, et un lecteur les aurait crus propres a cet
 * ecran alors qu'ils servent l'atelier et l'aide.
 * ------------------------------------------------------------------ */
.bouton-rapport { display: inline-flex; align-items: center; gap: .4rem; }
.bouton-rapport svg { width: .95rem; height: .95rem; flex: none; }

/* La tendance a cote du chiffre du tableau de bord : une pastille verte qui
   dit sa periode en toutes lettres (« +2 cette semaine »). */
.chiffre-cle .tendance { display: inline-flex; align-items: center; gap: .2rem;
  margin-left: .55rem; vertical-align: .3em; padding: .12rem .5rem .12rem .4rem;
  border-radius: 999px; background: var(--vert-pale); color: var(--vert-fonce);
  font-size: var(--t-libelle); font-weight: 600; letter-spacing: 0; line-height: 1.4; }
.chiffre-cle .tendance svg { width: .75rem; height: .75rem; }
/* « Modifier les informations » en haut a droite de l'en-tete, comme la
   maquette. Ouvert, le formulaire prend toute la ligne du dessous. */
.ent-tete .ent-edition { margin: 0 0 0 auto; align-self: flex-start; }
.ent-tete .ent-edition[open] { flex-basis: 100%; margin-left: 0; }
/* Mesure : la page pleine hauteur debordait de 23 px - sa hauteur etait
   calculee hors marge interieure, et la barre d'identite fait 53 px, pas
   52. La legende de la Carte du parc passait sous le bord de l'ecran. */
/* L'etape de vie « soumise » se lit « a valider » : meme couleur, sous
   son code de donnees. */
.ecran-carte-du-parc #rail-etudes .etat-point.soumise { background: var(--ambre); }
.ecran-carte-du-parc .rail-legende .puce.soumise { background: var(--ambre); }

/* LES REPERES DE LA CARTE DU PARC : un point par etude, colore par etape
   de vie, la meme couleur que la legende du pied de colonne ; les etudes
   qui se genent a l'ecran se regroupent en une bulle sombre qui porte
   leur nombre. Ces regles avaient disparu avec l'ancien <style> de
   l'ecran : les reperes etaient des boites vides, les nombres nus. */
/* Une etude seule porte le meme cercle qu'un groupe, avec un « 1 » : un
   point isole et un groupe de deux ne se lisaient pas a la meme echelle,
   et l'oeil cherchait le petit point a cote des grosses bulles. La
   couleur reste celle de l'etat - le nombre ne remplace pas l'info du
   statut, il l'accompagne. */
.ecran-carte-du-parc .repere-etat { display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid var(--bg-card); box-shadow: 0 0 0 2px var(--vert-pale), var(--ombre-levee);
  cursor: pointer; color: var(--sur-couleur); font-weight: 700; font-size: var(--t-note);
  background: var(--marine); transition: box-shadow .12s ease; }
.ecran-carte-du-parc .repere-etat strong { display: block; line-height: 1; }
/* Le brouillon n'est pas engage : un anneau marine sur fond blanc, pas
   un disque plein. Le « 1 » y passe donc en marine pour rester lisible. */
.ecran-carte-du-parc .repere-etat.brouillon { background: var(--bg-card); border-color: var(--marine); color: var(--marine); }
.ecran-carte-du-parc .repere-etat.soumise { background: var(--ambre); }
.ecran-carte-du-parc .repere-etat.validee { background: var(--vert); }
.ecran-carte-du-parc .repere-etat.contractee { background: var(--marine); }
.ecran-carte-du-parc .repere-etat:hover, .ecran-carte-du-parc .repere-etat.vise { box-shadow: 0 0 0 3px var(--vert-pale); z-index: 3; }
@media (prefers-reduced-motion: reduce) { .ecran-carte-du-parc .repere-etat { transition: none; } }
.ecran-carte-du-parc .groupe { display: flex; align-items: center; justify-content: center;
  border-radius: 50%; cursor: pointer; color: var(--sur-couleur); font-weight: 700;
  background: var(--vert); border: 2px solid var(--bg-card); box-shadow: var(--ombre-flottant); }
.ecran-carte-du-parc .maplibregl-popup-content { font-size: var(--t-dense); padding: .55rem .7rem;
  border-radius: var(--rayon-champ); box-shadow: var(--ombre-flottant); }
/* Le panneau d'etape se plie : la carte d'abord. Le chevron vit dans le
   coin du panneau, la pastille de reouverture prend sa place a gauche. */
/* LE CHEMIN DE FER, POSE SUR LA CARTE. Il occupait une barre horizontale
   entiere sous celle du titre : deux rangees d'habillage avant la premiere
   ligne de travail. En capsule, il ne prend que sa place - quatre pastilles,
   et le NOM de la seule etape courante ; les autres se lisent au survol. */
/* LE CHEMIN DE FER SE DEPLACE A LA SOURIS.
   Pose au milieu du haut de la carte, il tombe parfois sur ce qu'on regarde
   - un magasin, une frontiere de zone. Plutot que de choisir une place qui
   genera quelqu'un d'autre, on le laisse glisser : `--x-rail` porte son
   decalage, le double-clic le remet au milieu. */
:where(body.ecran-atelier) .rail-etapes { position: absolute; top: .875rem;
  /* Le rail se centre dans l'espace A DROITE du panneau, pas sur tout
     l'atelier : sinon, panneau ouvert, il chevauchait le coin haut du
     panneau et il fallait le glisser a la main. On decale son centre de
     la demi-largeur du panneau ; le glisser (`--x-rail`) reste possible. */
  left: calc(50% + (var(--l-panneau, 24rem) + .875rem) / 2 + var(--x-rail, 0px));
  transform: translateX(-50%); z-index: 7; margin: 0; padding: .3rem .45rem;
  cursor: grab; touch-action: none; user-select: none;
  display: flex; align-items: center; gap: .1rem; width: max-content; max-width: calc(100% - 2rem);
  background: var(--voile-carte); backdrop-filter: blur(10px);
  border: 1px solid var(--border-carte); border-radius: 999px; box-shadow: var(--ombre-flottant); }
:where(body.ecran-atelier) .rail-etapes.deplace { cursor: grabbing; }
/* Panneau des couches ouvert : le rail se centre entre les deux panneaux. */
:where(body.ecran-atelier) .atelier.outils-ouverts .rail-etapes {
  left: calc(50% + (var(--l-panneau, 24rem) + .875rem) / 2 - (var(--l-outils, 21rem) + .875rem) / 2 + var(--x-rail, 0px)); }
/* Les boutons gardent leur curseur : le rail se saisit par son fond, pas
   par une etape - sinon on le deplace en croyant changer d'etape. */
:where(body.ecran-atelier) .rail-etapes .etape-puce { padding: .2rem .45rem; border-radius: 999px;
  cursor: pointer; }
/* Seule l'etape courante dit son nom : quatre libelles cote a cote
   reformaient la barre qu'on vient de retirer. */
:where(body.ecran-atelier) .rail-etapes .etape-puce .mot { display: none; }
:where(body.ecran-atelier) .rail-etapes .etape-puce.active .mot { display: inline; }
:where(body.ecran-atelier) .rail-etapes .trait { width: 7px; }

:where(body.ecran-atelier) .plier-panneau { margin-left: auto; flex: none;
  width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 8px;
  background: none; color: var(--text-faint); cursor: pointer; }
:where(body.ecran-atelier) .plier-panneau:hover { background: var(--bg-survol); color: var(--text); }
:where(body.ecran-atelier) .rouvrir-panneau { position: absolute; top: .875rem; left: .875rem; z-index: 6;
  width: auto; min-width: 46px; height: 46px; max-width: calc(100% - 1.75rem);
  padding: 0 .85rem; gap: .5rem; display: none; align-items: center;
  border: 1px solid var(--border-carte); border-radius: 10px;
  background: var(--voile-carte); backdrop-filter: blur(10px);
  box-shadow: var(--ombre-levee); color: var(--vert); cursor: pointer; }
:where(body.ecran-atelier) .rouvrir-panneau:hover { border-color: var(--vert); }
/* La pastille du numero, la meme qu'ouvert : replie, le panneau doit dire
   a quelle etape on en est sans qu'on ait a le rouvrir. */
:where(body.ecran-atelier) .rouvrir-panneau .puce { flex: none; width: 1.4rem; height: 1.4rem;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--vert); color: var(--sur-couleur);
  font-size: var(--t-libelle); font-weight: 700; }
:where(body.ecran-atelier) .rouvrir-panneau .nom-etape-repliee { font-size: var(--t-dense);
  font-weight: 700; color: var(--text); white-space: nowrap; }
:where(body.ecran-atelier) .atelier.panneau-plie > .panneau-etape { display: none; }
:where(body.ecran-atelier) .atelier.panneau-plie .rouvrir-panneau { display: flex; }

/* Le panneau d'etape tient sur un ecran : moins d'air entre groupes. */
:where(body.ecran-atelier) .panneau-etape .groupe-etape { margin-top: .65rem; }
:where(body.ecran-atelier) .panneau-etape .libelle-groupe { margin-bottom: .3rem; }
:where(body.ecran-atelier) .zones-durees .zone-duree { padding: .3rem 0; }
:where(body.ecran-atelier) .options-avancees > summary { list-style: none; cursor: pointer;
  font-size: var(--t-libelle); font-weight: 700; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: .05em; }
:where(body.ecran-atelier) .options-avancees > summary::-webkit-details-marker { display: none; }
:where(body.ecran-atelier) .options-avancees > summary::after { content: ""; display: inline-block;
  width: .4em; height: .4em; margin: 0 0 .2em .5em; border-right: 1.5px solid; border-bottom: 1.5px solid;
  transform: rotate(45deg); }
:where(body.ecran-atelier) .options-avancees[open] > summary::after { transform: rotate(-135deg); margin-bottom: -.1em; }
:where(body.ecran-atelier) .options-avancees > summary:hover { color: var(--text); }

/* Le nom de l'etude s'edite depuis le fil d'Ariane : le trait pointille
   dit que ca se clique, la saisie reste dans la ligne. */
body.ecran-atelier .fil-nom-editable { cursor: text; border-bottom: 1px dashed transparent; }
body.ecran-atelier .fil-nom-editable:hover { border-bottom-color: var(--text-faint); }
body.ecran-atelier .fil-nom-saisie { font: inherit; font-weight: 700; color: var(--text);
  border: 0; border-bottom: 1.5px solid var(--vert); background: none; outline: none;
  padding: 0; margin: 0; width: 16rem; max-width: 40vw; min-height: 0; border-radius: 0; }

/* La pastille du fond de carte, bas-gauche : meme geste que la Carte du
   parc - le clic ouvre les vignettes, qui glissent au-dessus. */
:where(body.ecran-atelier) .controles-fond { position: absolute; bottom: 2.4rem; left: .875rem; z-index: 7; }
:where(body.ecran-atelier) .controles-fond .chef { position: relative; width: 58px; height: 58px;
  border: 2px solid var(--border-carte); border-radius: 12px; padding: 0; overflow: hidden;
  background-size: cover; background-position: center; background-color: var(--bg-card);
  box-shadow: var(--ombre-levee); color: var(--vert); cursor: pointer; }
:where(body.ecran-atelier) .controles-fond .chef .mini-couches { position: absolute; right: 2px; bottom: 2px;
  width: 18px; height: 18px; border-radius: 6px; background: var(--bg-card); color: var(--vert);
  display: grid; place-items: center; box-shadow: var(--ombre-carte); }
:where(body.ecran-atelier) .controles-fond .chef:hover { border-color: var(--vert); }
:where(body.ecran-atelier) .controles-fond.ouvert .chef { border-color: var(--vert); background: var(--vert-pale); }
:where(body.ecran-atelier) .controles-fond .volet { position: absolute; bottom: calc(100% + 8px); left: 0;
  background: var(--bg-card); border: 1px solid var(--border-carte); border-radius: 14px;
  box-shadow: var(--ombre-flottant); padding: .7rem .8rem;
  opacity: 0; transform: translateY(6px); visibility: hidden; pointer-events: none;
  transition: opacity .16s ease, transform .2s ease, visibility 0s linear .2s; }
:where(body.ecran-atelier) .controles-fond.ouvert .volet { opacity: 1; transform: none;
  visibility: visible; pointer-events: auto; transition-delay: 0s; }
/* UNE GRILLE, pas trois boites empilees chacune de son cote : voir le
   meme choix sur la carte du parc. En flex, la hauteur de chaque bouton se
   deduit de son contenu, et une police pas encore chargee ou une vignette
   pas encore arrivee decalait une tuile - le premier clic, qui provoque un
   nouveau calcul de mise en page, les realignait. */
:where(body.ecran-atelier) .controles-fond .fond-carte-choix { display: grid;
  grid-auto-flow: column; grid-auto-columns: 56px; gap: .6rem;
  align-items: start; justify-content: start; }
/* Rangees en PIXELS, et `margin: 0` : voir la carte du parc, meme cause -
   une tuile sans classe prenait la marge du bouton primaire du socle. */
:where(body.ecran-atelier) .controles-fond .fond-carte-choix button { display: grid;
  grid-template-rows: 44px 18px; grid-auto-rows: 0; align-content: start;
  justify-items: center; align-items: center; overflow: hidden;
  gap: 4px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; width: 56px; }
:where(body.ecran-atelier) .controles-fond .etiq { display: block; width: 100%;
  height: 18px; text-align: center; line-height: 18px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(body.ecran-atelier) .controles-fond .vignette { box-sizing: border-box;
  width: 44px; height: 44px; min-height: 44px; max-height: 44px; border-radius: 10px;
  background-size: cover; background-position: center; border: 2px solid var(--border-carte); display: block; }
:where(body.ecran-atelier) .controles-fond .vignette-attenuee { filter: saturate(.35) brightness(1.08); }
:where(body.ecran-atelier) .controles-fond .etiq { font-size: var(--t-libelle); font-weight: 600; color: var(--text-muted); }
:where(body.ecran-atelier) .controles-fond button:hover .vignette { border-color: var(--vert); }
:where(body.ecran-atelier) .controles-fond button.actif .vignette { border-color: var(--vert); }
:where(body.ecran-atelier) .controles-fond button.actif .etiq { color: var(--vert-fonce); }

/* Le bouton de superposition d'une entree de la galerie : deux cercles,
   visible au survol de la ligne ; l'entree superposee le garde allume et
   se teinte - l'etat se lit et s'annule au meme endroit. */
:where(body.ecran-atelier) .entree-carte { position: relative; }
:where(body.ecran-atelier) .superposer-carte { position: absolute; top: 50%; right: .45rem;
  transform: translateY(-50%); width: 24px; height: 24px; display: grid; place-items: center;
  border: 0; border-radius: 7px; background: none; color: var(--text-faint); cursor: pointer;
  opacity: 0; transition: opacity .12s ease; }
:where(body.ecran-atelier) .entree-carte:hover .superposer-carte,
:where(body.ecran-atelier) .superposer-carte:focus-visible { opacity: 1; }
:where(body.ecran-atelier) .superposer-carte:hover { background: var(--bg-survol); color: var(--vert-fonce); }
:where(body.ecran-atelier) .entree-carte.superposee .superposer-carte { opacity: 1; color: var(--vert-fonce); background: var(--vert-pale); }
:where(body.ecran-atelier) .entree-carte.superposee .carte-v { box-shadow: inset 3px 0 0 var(--vert); }

/* L'infobulle d'une zone cliquee : le nom, puis trois lignes chiffrees. */
:where(body.ecran-atelier) .bulle-zone { display: flex; flex-direction: column; gap: .2rem; min-width: 11rem; }
:where(body.ecran-atelier) .bulle-zone b { font-size: var(--t-dense); color: var(--text); margin-bottom: .15rem; }
:where(body.ecran-atelier) .bulle-zone span { display: flex; justify-content: space-between; gap: 1rem;
  font-size: var(--t-dense); font-variant-numeric: tabular-nums; color: var(--text); font-weight: 700; }
:where(body.ecran-atelier) .bulle-zone span i { font-style: normal; font-weight: 400; color: var(--text-muted); }

/* Replie, le bandeau de validation n'est qu'une ligne : sans cadre ni
   fond - une boite blanche autour d'un seul tag se lit comme un rate. */
:where(body.ecran-atelier) .bandeau-validation { border: 0; background: none; box-shadow: none; padding: .2rem 0; }

/* La confirmation d'un deplacement du site : le repere gris marque
   l'origine, cette capsule porte le choix. */
/* La confirmation de position : une ligne verte, coordonnees courtes. */
:where(body.ecran-atelier) .resultat .position-ok { display: inline-flex; align-items: center; gap: .4rem;
  margin: .5rem 0 0; font-size: var(--t-dense); font-weight: 600; color: var(--vert-fonce); }
/* Le point ajuste a la main : une capsule, l'adresse suit le point. */
:where(body.ecran-atelier) .site-badge { display: inline-block; margin-left: .4rem; padding: .05rem .5rem;
  border-radius: 999px; background: var(--ambre-bg); color: var(--ambre-text);
  font-size: var(--t-libelle); font-weight: 700; vertical-align: 1px; }
/* DÉPLACER LE SITE : la fenêtre au premier plan (etude_detail), fond flouté, le reste bloqué. */
.modale-deplacement { width: min(30rem, calc(100vw - 2rem)); max-width: none; box-sizing: border-box;
  margin: auto; padding: 1.5rem 1.5rem 1.25rem; border: 1px solid var(--border-carte); border-radius: 18px;
  background: var(--bg-card); color: var(--text);
  box-shadow: 0 28px 70px -18px rgb(16 24 32 / .45), var(--ombre-flottant); }
.modale-deplacement[open] { animation: deplacement-entree .18s ease-out; }
.modale-deplacement::backdrop { background: rgb(16 24 32 / .38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@keyframes deplacement-entree { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .modale-deplacement[open] { animation: none; } }
.deplacement-tete { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.1rem; }
.deplacement-repere { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem;
  border-radius: 14px; background: var(--vert-pale); color: var(--vert-fonce); }
.deplacement-tete h2 { margin: 0; font-size: var(--t-section); font-weight: 700; color: var(--encre); }
.deplacement-distance { margin: .15rem 0 0; font-size: var(--t-petite); color: var(--text-muted); }
.deplacement-distance:empty { display: none; }
/* Le trajet se lit de haut en bas : l'emplacement actuel, un pointillé, le nouveau. */
.deplacement-trajet { display: grid; gap: .8rem; margin: 0 0 1rem; padding: .9rem 1rem; list-style: none;
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg-survol); }
.deplacement-trajet li { position: relative; display: grid; gap: .1rem; padding-left: 1.5rem; }
.deplacement-trajet li::before { content: ""; position: absolute; left: .15rem; top: .3rem;
  width: .65rem; height: .65rem; box-sizing: border-box; border-radius: 999px; }
.deplacement-trajet .avant::before { background: var(--bg-card); border: 2px solid var(--text-faint); }
.deplacement-trajet .avant::after { content: ""; position: absolute; left: .44rem; top: 1.1rem; bottom: -.85rem;
  border-left: 2px dashed var(--border-champ); }
.deplacement-trajet .apres::before { background: var(--vert); box-shadow: 0 0 0 3px var(--vert-pale); }
.deplacement-trajet .jalon { font-size: var(--t-petite); font-weight: 600; color: var(--text-faint); }
.deplacement-trajet .adresse { font-size: var(--t-dense); font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.deplacement-trajet .avant .adresse { font-weight: 500; color: var(--text-muted); }
.deplacement-alerte { display: flex; gap: .7rem; margin: 0 0 1.25rem; padding: .8rem .95rem; border-radius: 12px;
  border: 1px solid var(--alerte-trait); background: var(--ambre-bg); color: var(--ambre-text); }
.deplacement-alerte svg { flex: none; margin-top: .1rem; }
.deplacement-alerte strong { display: block; font-size: var(--t-dense); }
.deplacement-alerte p { margin: .25rem 0 0; font-size: var(--t-petite); line-height: 1.5; color: var(--text); }
.deplacement-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; }
.deplacement-actions .bouton { display: inline-flex; align-items: center; gap: .45rem; margin: 0; }
.deplacement-actions .bouton-discret { color: var(--text); border-color: var(--border-champ); }
.deplacement-actions .bouton-discret:hover { color: var(--vert-fonce); border-color: var(--vert); }

/* La distance mesuree se lit SUR LE TRACE, plus dans un coin de l'ecran :
   la capsule en haut a droite obligeait a quitter des yeux le trait qu'on
   est en train de tirer. Chaque segment porte sa longueur au-dessus de
   lui, incline comme lui ; le total suit le dernier point des qu'il y a
   plus d'un segment.
   Le calque est pose dans le conteneur MapLibre : il ne prend aucun clic,
   la carte reste entierement manoeuvrable pendant la mesure. */
.mesure-etiquettes { position: absolute; inset: 0; z-index: 3;
  pointer-events: none; overflow: hidden; }
.mesure-etiquettes span { position: absolute; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
/* Le fond suit le texte de pres : incline, une capsule large recouvrirait
   la carte de part et d'autre du trait. */
.mesure-etiquettes .etiq-segment { padding: .1rem .35rem; border-radius: 4px;
  background: var(--voile-carte); color: var(--marine);
  font-size: var(--t-petite); font-weight: 700; letter-spacing: .01em; }
/* Le total tranche sur les longueurs de segment : c'est le chiffre qu'on
   cherche, les autres l'expliquent. */
.mesure-etiquettes .etiq-total { padding: .3rem .7rem; border-radius: 999px;
  background: var(--marine); color: var(--sur-couleur);
  box-shadow: var(--ombre-flottant);
  font-size: var(--t-dense); font-weight: 700; }

/* « EN SAVOIR PLUS » : le detail d'un ecran, replie derriere une ligne.
   Un ecran dit ce qu'on y fait en une phrase ; ce qu'il faut savoir pour
   le faire bien attend derriere ce pli, pour qui le lit la premiere fois. */
.en-savoir-plus { margin: -.4rem 0 1.2rem; }
.en-savoir-plus > summary { list-style: none; cursor: pointer; display: inline-flex;
  align-items: center; gap: .35rem; font-size: var(--t-dense); font-weight: 700;
  color: var(--vert-fonce); }
.en-savoir-plus > summary::-webkit-details-marker { display: none; }
.en-savoir-plus > summary::before { content: ""; width: .4rem; height: .4rem;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .12s ease; }
.en-savoir-plus[open] > summary::before { transform: rotate(45deg); }
.en-savoir-plus > p { margin: .5rem 0 0; max-width: 62rem; font-size: var(--t-dense);
  color: var(--text-muted); line-height: 1.5; }
/* Dans la carte d'un flux, deux boutons pleins de meme poids se lisaient
   comme deux depots. Le dessin d'enregistrement est un contour : deposer
   est l'action, consulter le dessin ne l'est pas. */
.ecran-reseau .flux-pied .voir-panneau.secondaire { background: var(--bg-card); color: var(--vert-fonce);
  border: 1px solid var(--border-champ); box-shadow: none; }
.ecran-reseau .flux-pied .voir-panneau.secondaire:hover { background: var(--vert-pale); border-color: var(--vert); }
/* Le picto du bouton de creation restait pris dans la regle qui pose la
   loupe DANS le champ de recherche (`.rail-chercher svg`, en absolu) : il
   partait s'afficher au bord gauche de l'ecran, dans le menu. */
.ecran-carte-du-parc .rail-chercher .geste-creer svg { position: static; left: auto; top: auto; transform: none; }
/* Mesure : le panneau a .9rem de marge interieure en haut et en bas.
   Un element collant s'arrete au bord du contenu, pas au bord de la
   boite : colle a `bottom: 0`, le pied laissait sous lui une bande de
   .9rem ou le contenu defilait a vue. Il colle donc a -.9rem, au bord de
   la boite, comme la tete le fait deja en haut. */
/* Il deborde du padding bas du panneau, pour s'y coller. */
.atelier .pied-etape { bottom: -.9rem; }

/* Le repere du magasin verifie, sur la carte de la qualite : un point
   plein de la couleur d'action, cercle de blanc, avec l'ombre flottante
   de la charte. Il etait ecrit en clair dans le script, avec sa couleur. */
.ecran-qualite .repere-magasin { width: 14px; height: 14px; border-radius: 50%;
  background: var(--primary); border: 3px solid var(--sur-couleur); box-shadow: var(--ombre-flottant); }
.ecran-qualite .calcul-note { font-size: var(--t-note); color: var(--text-muted); }
.ecran-qualite #carte-parc { height: 380px; border: 1px solid var(--marine-trait); border-radius: 8px; margin-bottom: 0.6rem; }
.ecran-qualite .hz-libelle { color: var(--ambre-text); }
/* Un lien habille en bouton garde la couleur du bouton : `.page a` pese
   plus que `.bouton` et repeignait « Gerer les secteurs » en vert sur
   vert des que le theme sombre eclaircit le vert des liens. */
.page a.bouton, .page a.bouton:hover { color: var(--sur-couleur); }
.page a.bouton-discret, .page a.bouton-tertiaire { color: var(--vert-fonce); }
/* Au survol aussi : `.page a.bouton:hover` posait le blanc du bouton plein
   sur le fond blanc du discret, et « Suivant » disparaissait. */
.page a.bouton-discret:hover, .page a.bouton-tertiaire:hover { color: var(--vert-fonce); }

/* ------------------------------------------------------------------ *
 * Pipeline : l'amorce, quand tout le parc est vide.
 *
 * La maquette ne connait pas ce cas : elle montre huit etudes. Un compte
 * neuf, lui, voyait quatre colonnes marquees « - » et aucune porte - la
 * Liste a son ecran d'accueil de secours, le Pipeline n'en a pas.
 *
 * Le geste vit dans la PREMIERE colonne : une etude nait brouillon, et
 * c'est la qu'on la cherche.
 * ------------------------------------------------------------------ */
.pipeline-amorce { display: block; text-align: center; padding: 1.1rem .9rem;
  border: 1.5px dashed var(--border-champ); border-radius: 11px;
  background: var(--bg-card); color: inherit; text-decoration: none;
  transition: border-color .12s ease, background .12s ease; }
.pipeline-amorce:hover { border-color: var(--vert); background: var(--vert-pale); color: inherit; }
.pipeline-amorce svg { color: var(--vert); margin-bottom: .3rem; }
.pipeline-amorce > span { display: block; font-size: var(--t-dense);
  font-weight: 700; color: var(--vert-fonce); }
.pipeline-amorce .quoi { margin-top: .25rem; font-size: var(--t-libelle);
  font-weight: 400; color: var(--text-faint); line-height: 1.45; }


/* ── Le tiroir des statistiques de zone ──────────────────────────────────
   Un tiroir posé sur la carte, à gauche du rail d'outils : la carte reste
   visible derrière, on lit un chiffre et on regarde où il tombe. En pleine
   page, le lien entre les deux se perd.

   Il partage le vocabulaire du reste de l'atelier : même voile, même flou,
   même ombre que le rail et la légende. Rien de propre à cet écran. */
:where(body.ecran-atelier) .tiroir-stats { position: absolute; top: 4rem; right: 4.9rem;
  z-index: 8; width: min(46rem, calc(100vw - 8rem)); max-height: calc(100vh - 9rem);
  display: flex; flex-direction: column; }
:where(body.ecran-atelier) .atelier.outils-ouverts .tiroir-stats {
  right: calc(var(--l-outils, 21rem) + 5.5rem); }
/* La barre d'assistance occupe le bas de la carte : le tiroir s'arrete
   au-dessus d'elle plutot que de passer dessous. */
:where(body.ecran-atelier) .atelier.ia-ouverte:has(.panneau-ia) .tiroir-stats {
  max-height: calc(100vh - 15rem); }
:where(body.ecran-atelier) .tiroir-stats-corps { display: flex; flex-direction: column;
  min-height: 0; overflow: hidden; border: 1px solid var(--border-carte); border-radius: 12px;
  background: var(--voile-carte); backdrop-filter: blur(12px); box-shadow: var(--ombre-flottant); }

.panneau-stats { display: flex; flex-direction: column; min-height: 0; }
/* LE CONTENU DEFILE, L'EN-TETE ET LES ONGLETS RESTENT.
   Le tiroir a une hauteur bornee, mais rien a l'interieur ne defilait : un
   theme de neuf lignes avec son profil depassait le cadre et se faisait
   couper, sans que rien ne dise qu'il y avait une suite. L'en-tete et les
   onglets restent en place - on change de theme sans remonter. */
.panneau-stats .stats-vue { flex: 1 1 auto; min-height: 0; overflow-y: auto;
  overscroll-behavior: contain; padding-bottom: .5rem; }
.panneau-stats .stats-entete, .panneau-stats .stats-onglets { flex: none; }
.stats-entete { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; padding: .85rem 1rem .6rem; border-bottom: 1px solid var(--border-carte); }
.stats-entete h2 { margin: 0; font-size: var(--t-section); }
.stats-source { margin: .15rem 0 0; font-size: var(--t-libelle); color: var(--text-faint); }
.stats-fermer { border: 0; background: transparent; color: var(--text-faint);
  cursor: pointer; padding: .2rem; border-radius: 6px; display: grid; place-items: center; }
.stats-fermer:hover { color: var(--text); background: var(--bg-survol); }

/* Les onglets : des thèmes, pas des filtres. Un seul actif, marqué par le
   trait bas plutôt que par un aplat, qui alourdirait le tiroir. */
.stats-onglets { display: flex; flex-wrap: wrap; gap: .15rem; padding: .5rem .75rem 0;
  border-bottom: 1px solid var(--border-carte); }
.stats-onglet { display: inline-flex; align-items: center; gap: .35rem;
  border: 0; background: transparent; cursor: pointer; font: inherit;
  font-size: var(--t-dense); color: var(--text-faint); padding: .4rem .6rem;
  border-bottom: 2px solid transparent; border-radius: 6px 6px 0 0; }
.stats-onglet:hover { color: var(--text); background: var(--bg-survol); }
.stats-onglet.actif { color: var(--vert-fonce); border-bottom-color: var(--vert);
  font-weight: 700; }
.stats-onglet svg { flex: 0 0 auto; }

.stats-resume { margin: .6rem 1rem .2rem; font-size: var(--t-libelle); color: var(--text-faint); }
.stats-tableau-cadre { overflow: auto; margin: 0 .25rem; padding: 0 .75rem .25rem; min-height: 0; }
.stats-tableau { width: 100%; border-collapse: collapse; font-size: var(--t-dense); }
.stats-tableau th, .stats-tableau td { text-align: right; padding: .38rem .5rem;
  border-bottom: 1px solid var(--border); white-space: nowrap; }
.stats-tableau thead th { position: sticky; top: 0; z-index: 1;
  background: var(--bg-card); font-size: var(--t-libelle); color: var(--text-faint);
  font-weight: 700; }
.stats-tableau tbody th { text-align: left; font-weight: 500; color: var(--text);
  white-space: normal; }
.stats-tableau .unite { color: var(--text-faint); font-weight: 400; }
.stats-tableau b { font-variant-numeric: tabular-nums; }
/* La part sous le nombre, plus petite : le nombre porte la mesure, la part
   l'ordre de grandeur. Côte à côte et de même taille, on ne sait plus lire. */
.stats-tableau .part { display: block; font-size: var(--t-libelle); color: var(--text-faint);
  font-variant-numeric: tabular-nums; }
.stats-tableau .absent { color: var(--text-faint); }
.stats-tableau .col-total { background: var(--bg-survol); }
.stats-tableau thead .col-total { font-weight: 800; color: var(--text); }
/* LES DEUX COLONNES DE COMPARAISON : la commune du site, la France. Elles
   ne comptent pas dans l'etude - elles la situent. Un fond neutre et un
   texte en retrait les distinguent des colonnes de zone sans les effacer. */
.stats-tableau .col-repere { color: var(--text-muted); background: transparent;
  border-left: 1px dashed var(--border-carte); }
.stats-tableau .col-repere b { font-weight: 600; }
.stats-tableau thead .col-repere { color: var(--text-faint); font-weight: 700; }

/* La colonne reprend la pastille de zone deja definie plus haut
   (`.pastille-proximite`, `.pastille-combat`, `.pastille-complementaire`) :
   la couleur du tableau est celle de la carte, sans second jeu de jetons. */
.stats-tableau thead .pastille { margin-right: .35rem; vertical-align: middle; }

.stats-note { margin: .5rem 1rem .85rem; font-size: var(--t-libelle); color: var(--text-faint); }
.stats-vide { margin: 1.25rem 1rem; font-size: var(--t-corps); color: var(--text-faint); }

@media (max-width: 900px) {
  :where(body.ecran-atelier) .tiroir-stats { left: .875rem; right: .875rem; width: auto; }
  :where(body.ecran-atelier) .atelier.outils-ouverts .tiroir-stats { right: .875rem; }
}

/* Le filtre de la galerie de cartes : le meme champ que le dictionnaire,
   posé en tete des entrees. Pleine largeur du panneau, qui est etroit. */
:where(body.ecran-atelier) .filtre-galerie { margin: 0 0 .5rem; padding: .35rem .6rem; }
:where(body.ecran-atelier) .filtre-galerie input { font-size: var(--t-libelle); }

/* La raison d'un refus, en capsule sur la carte. Meme allure que la
   confirmation de deplacement : c'est une reponse a un geste, elle se lit
   la ou le geste vient d'avoir lieu, et elle s'efface seule.

   L'ambre plutot que le vert : ce n'est pas une reussite. */
:where(body.ecran-atelier) .chip-blocage { position: absolute; top: 4rem; left: 50%;
  transform: translateX(-50%); z-index: 9; max-width: min(34rem, 90vw);
  padding: .45rem 1rem; border-radius: 999px; background: var(--ambre-bg);
  border: 1px solid var(--ambre); color: var(--ambre-text);
  box-shadow: var(--ombre-flottant); font-size: var(--t-dense); font-weight: 600;
  text-align: center; }

/* Les deux capsules partagent la meme place. Quand la confirmation de
   deplacement est ouverte, le refus se pose dessous plutot que dessus :
   deux messages superposes n'en font lire aucun. */
:where(body.ecran-atelier) .atelier:has(#confirme-position[open]) .chip-blocage {
  top: 7.5rem; }

/* Une etape fermee reste CLIQUABLE : elle repond en disant pourquoi. Elle
   doit donc se voir fermee sans etre `disabled`, qui avale le clic. */
:where(body.ecran-atelier) .rail-etapes .etape-puce[aria-disabled="true"] { cursor: help; }
:where(body.ecran-atelier) .bouton.bouton-ferme { opacity: .55; cursor: help; }
:where(body.ecran-atelier) .bouton.bouton-ferme:hover { opacity: .7; }

/* Groupes d'études : cible tactile et liste accessible des projets proches. */
.ecran-carte-du-parc button.groupe { width: 32px; height: 32px; margin: 0; padding: 0; border: 2px solid var(--bg-card); color: var(--sur-couleur); background: var(--primary); box-shadow: 0 0 0 2px var(--vert-pale), var(--ombre-levee); cursor: pointer; font-size: var(--t-moyenne); transition: background .15s, box-shadow .15s; }
.ecran-carte-du-parc button.groupe:hover { background: var(--primary-hover); box-shadow: 0 0 0 4px var(--vert-pale), var(--ombre-levee); }
.ecran-carte-du-parc button.groupe:focus-visible { outline: 3px solid var(--text); outline-offset: 4px; }
/* Les fiches de la carte : une ligne par étude, cliquable en entier ; un groupe
   ajoute son effectif en tête et un bouton pour zoomer. */
.ecran-carte-du-parc .parc-bulle .maplibregl-popup-content { padding: 0; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--border-carte); }
.ecran-carte-du-parc .parc-bulle-contenu { display: grid; min-width: 250px; color: var(--text); }
.ecran-carte-du-parc .parc-bulle-tete { display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem .55rem;
  border-bottom: 1px solid var(--filet); }
.ecran-carte-du-parc .parc-bulle-tete strong { font-size: var(--t-section); }
.ecran-carte-du-parc .parc-bulle-nombre { display: grid; place-items: center; min-width: 1.7rem; height: 1.7rem;
  padding: 0 .35rem; border-radius: 999px; background: var(--marine); color: var(--sur-couleur);
  font-size: var(--t-dense); font-weight: 800; font-variant-numeric: tabular-nums; }
.ecran-carte-du-parc .parc-bulle-liste { list-style: none; margin: 0; padding: .3rem; max-height: 260px; overflow-y: auto; }
.ecran-carte-du-parc .parc-etude { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
  gap: .65rem; padding: .55rem .6rem; border-radius: 10px; color: inherit; text-decoration: none; }
.ecran-carte-du-parc .parc-etude:hover, .ecran-carte-du-parc .parc-etude:focus-visible { background: var(--bg-survol); }
.ecran-carte-du-parc .parc-etude:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.ecran-carte-du-parc .parc-etude-pastille { width: .75rem; height: .75rem; border-radius: 50%; align-self: start;
  margin-top: .3rem; border: 2px solid transparent; }
.ecran-carte-du-parc .parc-etude-pastille.brouillon { border-color: var(--marine); background: var(--bg-card); }
.ecran-carte-du-parc .parc-etude-pastille.soumise { background: var(--ambre); }
.ecran-carte-du-parc .parc-etude-pastille.validee { background: var(--vert); }
.ecran-carte-du-parc .parc-etude-pastille.contractee { background: var(--marine); }
.ecran-carte-du-parc .parc-etude-corps { display: grid; gap: .12rem; min-width: 0; }
.ecran-carte-du-parc .parc-etude-corps strong { font-size: var(--t-corps); color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ecran-carte-du-parc .parc-etude:hover .parc-etude-corps strong { color: var(--vert-fonce); }
.ecran-carte-du-parc .parc-etude-corps small { font-size: var(--t-dense); color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ecran-carte-du-parc .parc-etude-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .45rem;
  font-size: var(--t-libelle); color: var(--text-faint); }
.ecran-carte-du-parc .parc-etude-etat { font-style: normal; font-weight: 700; padding: .05rem .45rem; border-radius: 999px;
  background: var(--tag-fond); color: var(--tag-texte); border: 1px solid var(--tag-trait); }
.ecran-carte-du-parc .parc-etude-etat.soumise { background: var(--alerte-fond); color: var(--alerte); border-color: var(--alerte-trait); }
.ecran-carte-du-parc .parc-etude-etat.validee { background: var(--succes-fond); color: var(--succes); border-color: var(--succes-trait); }
.ecran-carte-du-parc .parc-etude-etat.contractee { background: var(--marine); color: var(--sur-couleur); border-color: var(--marine); }
.ecran-carte-du-parc .parc-etude-fleche { color: var(--text-faint); display: inline-flex; }
.ecran-carte-du-parc .parc-etude:hover .parc-etude-fleche { color: var(--vert-fonce); }
.ecran-carte-du-parc .parc-bulle-zoom { display: flex; align-items: center; justify-content: center; gap: .45rem;
  margin: .2rem .9rem .85rem; }

.ecran-carte-du-parc button.repere-etat { margin: 0; padding: 0; min-width: 0; }
.ecran-carte-du-parc .groupe, .ecran-carte-du-parc .repere-etat { animation: none; }
.ecran-carte-du-parc .groupe strong { display: block; font-size: var(--t-dense); }
@media (prefers-reduced-motion: reduce) {
  .ecran-carte-du-parc .groupe, .ecran-carte-du-parc .repere-etat,
  .ecran-carte-du-parc .groupe strong { animation: none; }
}

/* Repères sans logo : la forme indique le rôle en complément de la couleur. */
/* L'initiale de l'enseigne, quand son logo manque : elle prend la teinte de
   la nature du point, comme l'anneau, et se lit d'un coup d'oeil. */
.marqueur-logo.repere-sans-logo { display: grid; place-items: center;
  color: var(--teinte-nature, var(--text)); background: #fff;
  font-size: var(--t-libelle); font-weight: 800; line-height: 1; }
.marqueur-logo.repere-sans-logo svg { display: block; width: 14px; height: 14px; }
/* Le concurrent passe devant l'attracteur : c'est lui qui prend du CA. */
.marqueur-logo.nature-concurrent { z-index: 2; }

:where(body.ecran-atelier) .rouvrir-panneau svg { flex-shrink: 0; }
:where(body.ecran-atelier) .nom-etape-repliee { color: var(--text); font-size: var(--t-dense); font-weight: 600; }

.ecran-carte-du-parc .parc-resultats { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .5rem 1rem; color: var(--text-muted); font-size: var(--t-libelle); }
.ecran-carte-du-parc .parc-resultats button, .ecran-carte-du-parc .parc-situer { margin: 0; padding: .3rem .55rem; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-card); color: var(--vert-fonce); font-size: var(--t-libelle); }
.ecran-carte-du-parc #rail-etudes li { position: relative; }
.ecran-carte-du-parc #rail-etudes .bas { padding-right: 4rem; }
.ecran-carte-du-parc .parc-situer { position: absolute; bottom: .6rem; right: .8rem; }
.ecran-carte-du-parc .groupe.vise { box-shadow: 0 0 0 4px var(--vert-pale), var(--ombre-levee); }

/* ---------- LES VITRINES DE LA CONCURRENCE ----------
 *
 * Un tableau de surfaces dit qui est gros ; il ne dit pas ce qu'un client voit
 * en arrivant. Ces cartes portent la devanture, la note et les horaires - ce
 * que le dossier Desktop montre depuis longtemps.
 *
 * La grille se règle sur la place disponible et non sur un nombre de colonnes :
 * le panneau de l'atelier change de largeur avec l'étape, et un nombre figé y
 * laissait soit un blanc, soit une carte coupée. */
.vitrines {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: .9rem;
  margin: .6rem 0 0;
}
.vitrine {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-carte);
  border-radius: 12px;
  overflow: hidden;
}
/* Le rapport 3/2 est tenu par le conteneur et non par l'image : une photo
   Google peut arriver dans n'importe quelle proportion, et sans cadre fixe la
   grille sautait d'une ligne à l'autre au chargement. */
.vitrine-image {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--bg-doux, var(--bg-card));
  display: grid;
  place-items: center;
}
.vitrine-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vitrine-sans-image { color: var(--text-faint); }
.vitrine-sans-image svg { width: 32px; height: 32px; }
/* Le crédit photo est une obligation de Google, pas une mention de politesse :
   il reste lisible sur n'importe quelle image, d'où le voile sombre. */
.vitrine-credit {
  position: absolute;
  right: 0; bottom: 0;
  max-width: 100%;
  padding: .1rem .35rem;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: var(--t-libelle);
  border-top-left-radius: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* La pastille du role n'existait que dans le tableau (`.tbl-conc .role-pt`) :
   posee sur une carte, elle ne rendait RIEN - un span sans taille. Elle porte
   donc ici sa propre taille, et le liseré blanc la detache d'une devanture
   sombre comme d'une claire. */
.vitrine-role {
  position: absolute;
  left: .5rem; top: .5rem;
  display: block;
  width: .62rem; height: .62rem;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.vitrine-role.riv { background: var(--nature-concurrent); }
.vitrine-role.att { background: var(--nature-attracteur); }
.vitrine-corps { padding: .6rem .7rem .7rem; display: flex; flex-direction: column; gap: .35rem; }
.vitrine-nom { margin: 0; font-size: var(--t-corps); font-weight: 600; }
.vitrine-note { margin: 0; display: flex; align-items: center; gap: .35rem; font-size: var(--t-dense); }
.vitrine-sans-note { color: var(--text-faint); }
.vitrine-avis { color: var(--text-muted); }
.etoiles { display: inline-flex; gap: 1px; }
/* Le demi n'est pas une coquetterie : arrondir 4,4 à quatre étoiles ou à cinq
   ment dans les deux sens, et c'est la note que l'œil lit en premier. */
.etoile {
  width: 12px; height: 12px;
  background: var(--border-champ);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.etoile.pleine { background: var(--ambre); }
.etoile.demi { background: linear-gradient(to right, var(--ambre) 50%, var(--border-champ) 50%); }
.vitrine-faits { display: flex; gap: .9rem; margin: 0; font-size: var(--t-dense); }
.vitrine-faits div { display: flex; flex-direction: column; }
.vitrine-faits dt { color: var(--text-muted); font-size: var(--t-libelle); }
.vitrine-faits dd { margin: 0; font-weight: 600; }
.vitrine-adresse { margin: 0; color: var(--text-muted); font-size: var(--t-libelle); }
.vitrine-horaires { font-size: var(--t-libelle); }
.vitrine-horaires summary { cursor: pointer; color: var(--text-muted); }
.vitrine-horaires ul { margin: .3rem 0 0; padding-left: 1rem; color: var(--text-muted); }
.vitrine-liens { display: flex; gap: .7rem; margin: 0; font-size: var(--t-libelle); }
.vitrines-absente, .vitrines-source { color: var(--text-muted); font-size: var(--t-dense); }
.vitrines-absente .aide-champ { display: block; }
@media (max-width: 520px) {
  .vitrines { grid-template-columns: 1fr; }
}
/* Le bloc des vitrines est REPLIE au depart : il s'ajoute a l'etape 3 sans
   pousser le tableau des points hors de l'ecran, et son contenu ne se charge
   qu'a l'ouverture. */
.bloc-vitrines { margin-top: 1rem; border-top: 1px solid var(--border-carte); padding-top: .7rem; }
.bloc-vitrines > summary { cursor: pointer; font-weight: 600; font-size: var(--t-dense); }
.bouton-relever { margin-top: .7rem; }

/* ============================================================ *
 * Re-skin Schema Directeur d'apres « Schema-Directeur.dc.html » (Claude
 * Design). Tableaux en cartes, en-tetes de colonnes verts, decision
 * segmentee. Portee stricte body.ecran-schema. Ajoute en fin de feuille
 * pour cohabiter avec les editions paralleles du module.
 * ============================================================ */
body.ecran-schema { --ombre-sd: 0 1px 3px rgba(22,35,63,.03), 0 8px 24px -12px rgba(22,35,63,.08); }
/* Les tableaux du module deviennent des cartes posees. */
body.ecran-schema .tableau-large { border: 1px solid var(--border); border-radius: 18px;
  overflow: hidden; box-shadow: var(--ombre-sd); background: var(--bg-card); }
body.ecran-schema .tableau-large .tableau { font-size: var(--t-dense); }
body.ecran-schema .tableau thead th { background: var(--bg-card); color: #7d9c6b;
  font-size: var(--t-libelle); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; border-bottom: 1px solid #e4efdc; padding: .72rem .8rem; }
body.ecran-schema .tableau tbody td { padding: .68rem .8rem;
  border-bottom: 1px solid var(--trait-sd, #f2f4f2); }
body.ecran-schema .tableau tbody tr:last-child td { border-bottom: 0; }
body.ecran-schema .tableau tbody tr:hover td { background: var(--bg-survol); }

/* La decision : un segmente Retenu / Ecarte, vert / ardoise, comme le design. */
body.ecran-schema .sd-choix { display: inline-flex; gap: 0; border: 1px solid var(--border);
  border-radius: 9px; overflow: hidden; background: var(--bg-page); }
body.ecran-schema .sd-b { border: 0; border-radius: 0; background: none;
  padding: .4rem .7rem; font-size: var(--t-petite); font-weight: 700;
  color: var(--text-faint); min-width: 3.6rem; justify-content: center; transition: background .12s; }
body.ecran-schema .sd-b + .sd-b { border-left: 1px solid var(--border); }
body.ecran-schema .sd-b:not(.on):hover { background: var(--bg-survol); color: var(--text); }
body.ecran-schema .sd-b-retenu.on { background: var(--vert); color: #fff; }
body.ecran-schema .sd-b-ecarte.on { background: #5b6472; color: #fff; }

/* Le compteur des decisions : une pastille posee, pas du texte nu. */
body.ecran-schema .sd-compteur { display: inline-flex; align-items: center; gap: .5rem;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 999px;
  padding: .3rem .9rem; font-size: var(--t-dense); box-shadow: var(--ombre-sd); }
body.ecran-schema .sd-c-retenu { color: var(--vert-fonce); }
body.ecran-schema .sd-c-ecarte { color: #5b6472; }

body.ecran-schema .segment { border: 1px solid var(--border-champ); border-radius: 9px; }
body.ecran-schema .segment button { color: var(--text-muted); font-weight: 600; padding: .45rem .9rem; }
body.ecran-schema .segment button + button { border-left-color: var(--border-champ); }
body.ecran-schema .segment button.on { background: var(--vert-pale); color: var(--vert-fonce);
  box-shadow: inset 0 -2px 0 var(--vert); font-weight: 700; }

/* Regler : les cases de territoire passent au vert (cartes selectionnables). */
body.ecran-schema .sd-typo-case:hover { border-color: var(--vert); }
body.ecran-schema .sd-typo-case:has(input:checked) { background: var(--vert-pale);
  border-color: var(--vert); color: var(--vert-fonce); }
body.ecran-schema .sd-typo-case:has(input:checked) span { color: var(--vert-fonce); }
body.ecran-schema .sd-typo-case:has(input:checked) .sd-typo-seuil--lu b { color: var(--vert-fonce); }

/* Verifier le parc : les sous-onglets deviennent des onglets soulignes. */
body.ecran-schema .sd-sousonglets { gap: .25rem; border-bottom: 1px solid var(--border);
  flex-wrap: wrap; margin-bottom: 1rem; }
body.ecran-schema .sd-sousonglets button { background: none; border: 0; border-radius: 0;
  padding: .55rem .9rem; font-weight: 700; font-size: var(--t-corps); color: var(--text-muted);
  border-bottom: 2.5px solid transparent; margin-bottom: -1px; cursor: pointer; }
body.ecran-schema .sd-sousonglets button:hover { color: var(--marine); }
body.ecran-schema .sd-sousonglets button.on { background: none; color: var(--marine);
  border-bottom-color: var(--vert); }
body.ecran-schema .sd-sousonglets .cpt { display: inline-flex; align-items: center;
  justify-content: center; margin-left: .35rem; background: var(--bg-page); color: var(--text-faint);
  border-radius: 999px; padding: .05rem .5rem; font-size: var(--t-libelle); font-weight: 800; }
body.ecran-schema .sd-sousonglets button.on .cpt { background: var(--vert-pale); color: var(--vert-fonce); }

/* Decider : la barre « rapporte vs n1 » au vert, et le rang en badge (top-3 vert). */
body.ecran-schema .sd-barre::before { background: var(--vert); }
body.ecran-schema .sd-rang { display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.65rem; height: 1.65rem; padding: 0 .35rem; border-radius: 8px;
  background: var(--bg-page); color: var(--text-faint); font-weight: 800;
  font-size: var(--t-petite); font-variant-numeric: tabular-nums; }
body.ecran-schema .sd-rang--haut { background: var(--vert-pale); color: var(--vert-fonce); }

/* Regler : le toggle segmente, facon design. */
body.ecran-schema .sd-gestes { display: flex; flex-wrap: wrap; gap: .5rem; }
body.ecran-schema .sd-gestes br { display: none; }
body.ecran-schema .sd-gestes > label { display: flex; align-items: flex-start; gap: .5rem;
  border: 1px solid var(--border); border-radius: 12px; padding: .6rem .75rem;
  cursor: pointer; flex: 1 1 15rem; margin: 0; transition: border-color .12s, background .12s; }
body.ecran-schema .sd-gestes > label:hover { border-color: var(--vert); }
body.ecran-schema .sd-gestes > label:has(input:checked) { background: var(--vert-pale); border-color: var(--vert); }
body.ecran-schema .sd-gestes > label .discret { display: block; margin-top: .1rem; }
body.ecran-schema .sd-gestes input[type="checkbox"] { margin-top: .15rem; accent-color: var(--vert); flex: none; }

/* Boutons d'action primaires du SD : pleins verts (design Claude Design), au
   lieu du simple contour « brut ». */
body.ecran-schema .sd2-reprendre,
body.ecran-schema .sd2-lancer .onglet-action {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem 1.05rem; border-radius: var(--rayon-bouton);
  font: inherit; font-size: var(--t-dense); line-height: 1.25; white-space: nowrap; cursor: pointer;
  background: var(--vert); color: #fff; border: 1px solid var(--vert);
  font-weight: 700; box-shadow: 0 2px 10px -2px rgba(90,168,50,.35);
  transition: background .12s ease, border-color .12s ease; }
body.ecran-schema .sd2-reprendre:focus-visible,
body.ecran-schema .sd2-lancer .onglet-action:focus-visible { outline: 2px solid var(--vert-fonce); outline-offset: 2px; }
body.ecran-schema .sd2-reprendre:hover,
body.ecran-schema .sd2-lancer .onglet-action:hover {
  background: var(--vert-fonce); border-color: var(--vert-fonce); color: #fff; }
body.ecran-schema .sd2-reprendre svg,
body.ecran-schema .sd2-lancer .onglet-action svg { color: #fff; }

/* ============================================================ *
 * Selecteur de fond de carte : correctif de refactor. Le partial
 * `_fonds_carte.html` (.fonds-principaux / .tuile-fond / .etiq) est inclus
 * dans `.fond-carte-choix` sur les fiches (zones, performance), SANS les IDs
 * #controles-carte / #controles-fond auxquels la mise en forme des tuiles
 * etait scopee - d'ou des labels qui se chevauchent. On style ici les tuiles
 * independamment de l'ID, et on neutralise l'ancienne grille .fond-carte-choix
 * (grid-auto-flow:column, pensee pour des <button> nus qui n'existent plus).
 * ============================================================ */
:is(.ecran-carte-du-parc, .ecran-performance, .ecran-zone-fiche, body) .fond-carte-choix {
  display: block; grid-auto-flow: initial; grid-auto-columns: initial; }
.fond-carte-choix .tuile-fond { display: grid; grid-template-rows: 52px auto; gap: .3rem;
  width: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: pointer;
  justify-items: center; border-radius: 9px; text-align: center; }
.fond-carte-choix .tuile-fond .vignette { box-sizing: border-box; width: 100%;
  height: 52px; min-height: 52px; max-height: 52px; border-radius: 9px; flex: none;
  border: 2px solid var(--border-carte); background-size: cover; background-position: center;
  background-repeat: no-repeat; }
.fond-carte-choix .tuile-fond:hover .vignette,
.fond-carte-choix .tuile-fond.actif .vignette { border-color: var(--vert); }
.fond-carte-choix .tuile-fond .etiq { display: block; width: 100%; min-height: 16px; height: auto;
  line-height: 1.25; font-size: var(--t-libelle); font-weight: 600; color: var(--text-muted);
  white-space: normal; overflow: visible; text-overflow: clip; text-align: center; }
.fond-carte-choix .tuile-fond.actif .etiq { color: var(--vert-fonce); }
.fond-carte-choix .vignette-attenuee { filter: saturate(.35) brightness(1.08); }
.fond-carte-choix .vignette-osm { background-image: url('https://tile.openstreetmap.org/12/2074/1409.png'); }
.fond-carte-choix .vignette-topographique { background-image: url('https://a.tile.opentopomap.org/12/2074/1409.png'); }
.fond-carte-choix .vignette-google { background-image: url('https://mt1.google.com/vt/lyrs=m&x=2074&y=1409&z=12'); }
.fond-carte-choix .vignette-hybride { background-image: url('https://mt1.google.com/vt/lyrs=y&x=2074&y=1409&z=12'); }
.fond-carte-choix .vignette-nuit { background-image: linear-gradient(145deg, var(--marine) 35%, var(--text-muted) 36%, var(--marine) 38%, var(--marine) 65%, var(--text-muted) 66%, var(--marine) 68%); }

/* Zones : « Declarer le point de vente ferme » est un geste destructif -> en
   rouge. Le [aria-controls] cible ce bouton-la (pas « Remettre en activite »)
   et donne la specificite pour gagner sur zones-registre.css. */
.ecran-zones .zc-cycle-ouvrir[aria-controls] { color: var(--danger); font-weight: 700; }
.ecran-zones .zc-cycle-ouvrir[aria-controls]:hover { color: var(--danger); text-decoration: underline; }
.ecran-zones .zc-cycle-ouvrir[aria-controls][aria-expanded="true"] { color: var(--danger); }

/* ============================================================ *
 * SD - volet Regler : reglages en cartes a gauche, colonne collante
 * a droite (lancer, reglages enregistres). Tout est scope a l'ecran.
 * ============================================================ */
body.ecran-schema .sdr-tete { margin: .4rem 0 1rem; }
body.ecran-schema .sdr-titre { margin: 0 0 .35rem; font-size: 1.3rem; font-weight: 650;
  color: var(--marine); letter-spacing: -.01em; }
body.ecran-schema .sd-provenance { display: flex; align-items: flex-start; gap: .45rem; margin: 0;
  font-size: var(--t-petite); color: var(--text-muted); }
body.ecran-schema .sd-provenance svg { flex: none; margin-top: .1rem; color: var(--vert-fonce); }
body.ecran-schema .sd-provenance b { color: var(--marine); font-weight: 650; }

body.ecran-schema .sdr-grille { display: grid; gap: 1rem; align-items: start;
  grid-template-columns: minmax(0, 1fr) 21rem; }
@media (max-width: 1100px) { body.ecran-schema .sdr-grille { grid-template-columns: minmax(0, 1fr); } }
body.ecran-schema .sdr-principal,
body.ecran-schema .sdr-exercice { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
body.ecran-schema .sdr-cote { display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 1rem; }
@media (max-width: 1100px) { body.ecran-schema .sdr-cote { position: static; } }

body.ecran-schema .sdr-carte { background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--ombre-sd); padding: 1rem 1.2rem; min-width: 0; }
body.ecran-schema .sdr-carte-titre { display: flex; align-items: center; gap: .5rem; margin: 0 0 .5rem;
  font-size: var(--t-section); font-weight: 650; color: var(--marine); }
body.ecran-schema .sdr-carte-titre > svg { flex: none; color: var(--vert-fonce); }
body.ecran-schema .sdr-carte-note,
body.ecran-schema .sdr-carte-lien { margin-left: auto; font-size: var(--t-libelle); font-weight: 500;
  color: var(--text-faint); }
body.ecran-schema .sdr-carte-lien { color: var(--vert-fonce); font-weight: 650; text-decoration: none; }
body.ecran-schema .sdr-carte-lien:hover { text-decoration: underline; }

body.ecran-schema .sdr-nombre { width: 5.5rem; text-align: right; font-variant-numeric: tabular-nums; }

/* Les territoires : cartes a cocher, coche dessinee en haut a droite. */
/* Mesure : le socle pose une bordure et un fond sur .tableau-large et table,
   et un margin-top de 1rem sur tout label - d'ou des cases qui debordent. */
body.ecran-schema .sdr-exercice .tableau-large { overflow-x: auto; border: 0; background: none; border-radius: 0; box-shadow: none; }
body.ecran-schema .sdr-exercice .sd-typo { border: 0; background: none; }
body.ecran-schema .sdr-exercice .sd-typo-case,
body.ecran-schema .sdr-exercice .sd-typo { width: 100%; border-collapse: separate; border-spacing: .45rem; margin: -.45rem; }
body.ecran-schema .sdr-exercice .sd-typo th,
body.ecran-schema .sdr-exercice .sd-typo td { background: none; border: 0; padding: 0; vertical-align: middle; }
body.ecran-schema .sdr-exercice .sd-typo thead th { font-size: var(--t-libelle); font-weight: 600;
  color: var(--text-faint); text-transform: none; letter-spacing: 0; text-align: left; padding-left: .2rem; }
body.ecran-schema .sdr-exercice .sd-typo tbody th { width: 1%; white-space: nowrap; text-align: left;
  font-weight: 650; color: var(--marine); font-size: var(--t-petite); padding-right: .4rem; }
body.ecran-schema .sdr-exercice .sd-typo td { height: 1px; }
body.ecran-schema .sdr-exercice .sd-typo-case { position: relative; display: flex; flex-direction: column;
  gap: .15rem; height: 100%; min-width: 9rem; text-align: left; padding: .55rem 2rem .55rem .7rem;
  border-radius: 10px; transition: border-color .12s, background .12s; }
body.ecran-schema .sdr-exercice .sd-typo-case::after { content: ""; position: absolute; top: .6rem; right: .6rem;
  width: .95rem; height: .95rem; border: 1.5px solid var(--border-champ); border-radius: 4px; background: var(--bg-card); }
body.ecran-schema .sdr-exercice .sd-typo-case:has(input:checked)::after { border-color: var(--vert);
  background: var(--vert) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 80% no-repeat; }
body.ecran-schema .sdr-exercice .sd-typo-n { font-weight: 700; color: var(--marine); font-size: var(--t-dense); }
body.ecran-schema .sdr-exercice .sd-typo-case .sd-typo-seuil { margin-top: .2rem; padding-top: .3rem;
  border-top: 1px dashed var(--border); font-size: var(--t-petite); }
body.ecran-schema .sdr-exercice .sd-typo-repere { margin-top: 0; color: var(--text-faint); }
body.ecran-schema .sdr-exercice .sd-typo-vide { display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  height: 100%; min-height: 3.2rem; min-width: 9rem; padding: 0; border-radius: 10px; border: 1px dashed var(--border);
  background: none; color: var(--text-faint); }

body.ecran-schema .sdr-regle { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem;
  margin-top: .9rem; padding-top: .7rem; border-top: 1px solid var(--trait-sd);
  font-size: var(--t-petite); color: var(--text-muted); }
body.ecran-schema .sdr-regle-lib { font-weight: 650; color: var(--text); }
body.ecran-schema .sdr-regle-note { color: var(--alerte); }
body.ecran-schema .sdr-regle .sd-ex-vers-regles { margin-left: auto; color: var(--vert-fonce); font-weight: 650;
  text-decoration: none; }
body.ecran-schema .sdr-vide { margin: 0; padding: .8rem 1rem; border-radius: 10px; background: var(--bg-page);
  color: var(--text-muted); font-size: var(--t-petite); }



/* Colonne laterale : lancer, puis la bibliotheque. */
body.ecran-schema .sdr-lancer { border-top: 3px solid var(--vert); }
body.ecran-schema .sdr-resume { list-style: none; margin: 0 0 .9rem; padding: 0; }
body.ecran-schema .sdr-resume li { display: flex; justify-content: space-between; gap: .8rem;
  padding: .4rem 0; border-bottom: 1px solid var(--trait-sd); font-size: var(--t-petite); }
body.ecran-schema .sdr-resume li span { color: var(--text-faint); }
body.ecran-schema .sdr-resume li b { color: var(--marine); font-weight: 650; text-align: right; }
body.ecran-schema .sdr-resume--vide [data-champ="gestes"] { color: var(--danger); }
body.ecran-schema .sdr-lancer-bouton { width: 100%; }
body.ecran-schema .sdr-lancer .sd-mire-cadre { margin-top: .7rem; }
body.ecran-schema .sdr-lancer .sd-fait { margin-top: .5rem; }
body.ecran-schema .sdr-note { margin: .6rem 0 0; font-size: var(--t-petite); color: var(--text-faint); line-height: 1.45; }
body.ecran-schema .sdr-champ { display: flex; flex-direction: column; gap: .45rem; }
body.ecran-schema .sdr-champ + .sdr-champ,
body.ecran-schema .sdr-note + .sdr-champ { margin-top: .8rem; padding-top: .8rem; border-top: 1px solid var(--trait-sd); }
body.ecran-schema .sdr-champ input,
body.ecran-schema .sdr-champ select { width: 100%; min-width: 0; }
body.ecran-schema .sdr-boutons { display: flex; gap: .4rem; }
body.ecran-schema .sdr-retablir { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  margin: .8rem 0 0; padding-top: .5rem; border-top: 1px solid var(--trait-sd); }
body.ecran-schema .sdr-retablir .bouton-tertiaire { padding-left: 0; font-size: var(--t-petite); }

/* SD - en-tete : titre et vigilance sur une ligne, provenance en pastilles. */
body.ecran-schema .sd-entete { margin: 0 0 1rem; }
body.ecran-schema .sd-entete-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
body.ecran-schema .sd-entete-ligne h1 { margin: 0; }
body.ecran-schema .sd-entete-ligne .avis-vigilance { margin: 0; }
body.ecran-schema .sd-meta { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 0; padding: 0; }
body.ecran-schema .sd-meta li { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .65rem;
  border-radius: 999px; background: var(--bg-card); border: 1px solid var(--border);
  font-size: var(--t-petite); color: var(--text-muted); white-space: nowrap; }
body.ecran-schema .sd-meta li svg { flex: none; color: var(--text-faint); }
body.ecran-schema .sd-meta li b,
body.ecran-schema .sd-meta-fort { color: var(--marine); font-weight: 650; }
body.ecran-schema .sd-meta-fort svg { color: var(--vert-fonce) !important; }
body.ecran-schema .sd-meta-lien { background: none !important; border-color: transparent !important; }
body.ecran-schema .sd-meta-lien a { display: inline-flex; align-items: center; gap: .35rem; color: var(--vert-fonce);
  font-weight: 650; text-decoration: none; }
body.ecran-schema .sd-meta-lien a:hover { text-decoration: underline; }
body.ecran-schema .sd-meta-lien svg { color: var(--vert-fonce) !important; }

/* SD - la barre de progression des volets : pastilles rondes reliees par une
   piste qui se remplit jusqu'a l'etape atteinte. Portee par l'id pour ne pas
   toucher au rail des etudes, qui partage les classes. */
body.ecran-schema #sd-onglets { gap: 0; margin: 0 0 1.2rem; padding: .65rem 1rem;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--ombre-sd); animation: sd-rail-entree .35s ease both; }
body.ecran-schema #sd-onglets .retour { height: 2.1rem; margin: 0 .9rem 0 0; border-color: var(--border);
  color: var(--text-muted); font-size: var(--t-petite); transition: color .15s, border-color .15s, background .15s; }
body.ecran-schema #sd-onglets .retour:hover { color: var(--vert-fonce); border-color: var(--vert); background: var(--vert-pale); }
body.ecran-schema #sd-onglets .etape-puce { height: auto; gap: .5rem; padding: .3rem .45rem; border: 0;
  border-radius: 12px; background: none; box-shadow: none; color: var(--text-muted); font-weight: 600;
  transition: background .15s, color .15s; }
body.ecran-schema #sd-onglets .etape-puce .num { opacity: .6; font-weight: 600; }
body.ecran-schema #sd-onglets .etape-puce :is(.picto, .coche, .cadenas) { flex: none; display: grid; place-items: center;
  width: 1.9rem; height: 1.9rem; border-radius: 999px; box-sizing: border-box; opacity: 1;
  background: var(--bg-page); border: 1.5px solid var(--border); color: var(--text-faint);
  transition: background .25s, border-color .25s, color .25s, transform .25s; }
body.ecran-schema #sd-onglets .etape-puce .coche { background: var(--vert-pale); border-color: var(--vert); color: var(--vert-fonce); }
body.ecran-schema #sd-onglets .etape-puce:disabled { opacity: .55; cursor: not-allowed; }
body.ecran-schema #sd-onglets .etape-puce:disabled .cadenas { border-style: dashed; }
body.ecran-schema #sd-onglets .etape-puce:not(:disabled):not(.active):hover { background: var(--bg-survol); }
body.ecran-schema #sd-onglets .etape-puce:not(:disabled):not(.active):hover :is(.picto, .coche) { border-color: var(--vert); color: var(--vert-fonce); }
/* L'etape active : pastille pleine, arrivee en douceur puis halo lent. */
body.ecran-schema #sd-onglets .etape-puce.active { background: none; color: var(--marine); }
body.ecran-schema #sd-onglets .etape-puce.active .mot { color: var(--marine); font-weight: 700; }
body.ecran-schema #sd-onglets .etape-puce.active .num { opacity: 1; color: var(--vert-fonce); }
body.ecran-schema #sd-onglets .etape-puce.active :is(.picto, .coche, .cadenas) { background: var(--vert);
  border-color: var(--vert); color: #fff; animation: sd-etape-arrivee .4s cubic-bezier(.3, 1.4, .5, 1) both, sd-etape-halo 2.6s ease-out .5s infinite; }
/* La piste : le remplissage glisse de gauche a droite, trait apres trait. */
body.ecran-schema #sd-onglets .trait { position: relative; height: 3px; min-width: 1rem; margin: 0 .3rem;
  border-radius: 3px; background: var(--border); overflow: hidden; }
body.ecran-schema #sd-onglets .trait::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--vert-clair), var(--vert));
  transform: scaleX(0); transform-origin: left center;
  transition: transform .6s cubic-bezier(.4, 0, .2, 1) calc(var(--i, 1) * 90ms); }
body.ecran-schema #sd-onglets .trait.franchi { background: var(--border); }
body.ecran-schema #sd-onglets .trait.franchi::after { transform: scaleX(1); }
@keyframes sd-rail-entree { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes sd-etape-arrivee { from { transform: scale(.7); } to { transform: scale(1); } }
@keyframes sd-etape-halo { 0% { box-shadow: 0 0 0 0 rgba(90, 168, 50, .4); }
  70%, 100% { box-shadow: 0 0 0 8px rgba(90, 168, 50, 0); } }
@media (max-width: 1150px) { body.ecran-schema #sd-onglets .etape-puce.active .mot { display: inline; } }
@media (prefers-reduced-motion: reduce) {
  body.ecran-schema #sd-onglets,
  body.ecran-schema #sd-onglets .etape-puce.active :is(.picto, .coche, .cadenas) { animation: none; }
  body.ecran-schema #sd-onglets .trait::after { transition: none; }
}

/* SD - volet Regler, version resserree : champs en ligne, cases d'une ligne,
   gestes et valeurs lues en pastilles. */
body.ecran-schema .sdr-grille { gap: .8rem; grid-template-columns: minmax(0, 1fr) 19rem; }
@media (max-width: 1100px) { body.ecran-schema .sdr-grille { grid-template-columns: minmax(0, 1fr); } }
body.ecran-schema :is(.sdr-principal, .sdr-exercice, .sdr-cote) { gap: .8rem; }
body.ecran-schema .sdr-carte { padding: .85rem 1rem; border-radius: 14px; }
body.ecran-schema .sdr-carte-titre { font-size: var(--t-corps); margin: 0 0 .7rem; }
body.ecran-schema .sdr-tete { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin: 0 0 .8rem; }
body.ecran-schema .sdr-titre { margin: 0; font-size: 1.15rem; }
body.ecran-schema .sd-provenance { align-items: center; padding: .22rem .7rem; border-radius: 999px;
  background: var(--vert-pale); color: var(--vert-fonce); }
body.ecran-schema .sd-provenance svg { margin-top: 0; }
body.ecran-schema .sd-provenance b { color: var(--vert-fonce); }

body.ecran-schema .sdr-champs { display: grid; gap: .8rem 1rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
body.ecran-schema .sdr-champ-x { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
body.ecran-schema .sdr-etiq { margin: 0; font-size: var(--t-libelle); font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-faint); }
body.ecran-schema .sdr-aide { font-size: var(--t-libelle); line-height: 1.35; color: var(--text-faint); }
body.ecran-schema .sdr-champ-x .segment { display: flex; width: 100%; }
body.ecran-schema .sdr-champ-x .segment button { flex: 1 1 0; padding: .45rem .5rem; white-space: nowrap; }
body.ecran-schema .sdr-champ-x :is(select, .sdr-nombre) { width: 100%; margin: 0; text-align: left; }

/* Territoires : une case = une ligne, coche a gauche. */
body.ecran-schema .sdr-exercice .sd-typo { border-spacing: .35rem; margin: -.35rem; }
body.ecran-schema .sdr-exercice .sd-typo-case { flex-direction: row; flex-wrap: wrap; align-items: center;
  gap: .1rem .6rem; min-width: 0; padding: .42rem .65rem .42rem 2rem; }
body.ecran-schema .sdr-exercice .sd-typo-case::after { top: 50%; left: .6rem; right: auto; transform: translateY(-50%); }
body.ecran-schema .sdr-exercice .sd-typo-n { flex: 1 1 auto; font-size: var(--t-petite); }
body.ecran-schema .sdr-exercice .sd-typo-case .sd-typo-seuil { gap: .2rem; margin: 0; padding: 0; border: 0;
  font-size: var(--t-libelle); color: var(--text-faint); }
body.ecran-schema .sdr-exercice .sd-typo-repere { flex-basis: 100%; font-size: var(--t-libelle); }
body.ecran-schema .sdr-exercice .sd-typo-vide { min-height: 2.25rem; }
body.ecran-schema .sdr-exercice .sd-typo tbody th { font-size: var(--t-petite); }

/* Gestes : pastilles a cocher, deux groupes separes d'un filet. */
body.ecran-schema .sdr-gestes { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
body.ecran-schema .sdr-gestes-titre { font-size: var(--t-libelle); font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-faint); margin-right: .1rem; }
body.ecran-schema .sdr-gestes .sdr-gestes-titre ~ .sdr-gestes-titre { margin-left: .5rem; padding-left: .9rem;
  border-left: 1px solid var(--border); }
body.ecran-schema .sdr-chip { position: relative; display: inline-flex; align-items: center; gap: .4rem; margin: 0;
  padding: .32rem .8rem .32rem .45rem; border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-card); cursor: pointer; font-size: var(--t-petite); font-weight: 600; color: var(--text-muted);
  transition: background .12s, border-color .12s, color .12s; }
body.ecran-schema .sdr-chip input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
body.ecran-schema .sdr-chip span { display: inline-block; }
body.ecran-schema .sdr-chip span::first-letter { text-transform: uppercase; }
body.ecran-schema .sdr-chip::before { content: ""; flex: none; box-sizing: border-box; width: 1rem; height: 1rem;
  border-radius: 999px; border: 1.5px solid var(--border-champ); background: var(--bg-card); }
body.ecran-schema .sdr-chip:hover { border-color: var(--vert); color: var(--text); }
body.ecran-schema .sdr-chip:has(input:checked) { background: var(--vert-pale); border-color: var(--vert); color: var(--vert-fonce); }
body.ecran-schema .sdr-chip:has(input:checked)::before { border-color: var(--vert);
  background: var(--vert) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 72% no-repeat; }
body.ecran-schema .sdr-chip:has(input:focus-visible) { outline: 2px solid var(--vert); outline-offset: 2px; }

/* Ce qui s'applique : valeurs lues en pastilles, le detail au survol. */
body.ecran-schema .sdr-lus { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin: 0; }
body.ecran-schema .sdr-lus-groupe { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
body.ecran-schema .sdr-lus-groupe + .sdr-lus-groupe { padding-left: 1rem; border-left: 1px solid var(--border); }
body.ecran-schema .sdr-lu { display: inline-flex; align-items: baseline; gap: .35rem; padding: .26rem .65rem;
  border-radius: 999px; background: var(--bg-page); font-size: var(--t-petite); color: var(--text-muted); cursor: help; }
body.ecran-schema .sdr-lu b { color: var(--marine); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ============================================================ *
 * SD - volet Decider : en-tete en pastilles, liste a gauche, carte
 * collante a droite avec choix du fond, points aux couleurs de l'appli.
 * ============================================================ */
body.ecran-schema .sdp-tete { gap: .45rem .6rem; }
body.ecran-schema .sdp-tete .sd-compteur { box-shadow: none; padding: .22rem .75rem; font-size: var(--t-petite); }
body.ecran-schema .sdp-pastille { display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .7rem;
  border-radius: 999px; background: var(--bg-card); border: 1px solid var(--border);
  font-size: var(--t-petite); color: var(--text-muted); }
body.ecran-schema .sdp-pastille svg { flex: none; color: var(--vert-fonce); }
body.ecran-schema .sdp-pastille--note { background: var(--alerte-fond); border-color: var(--alerte-trait); color: var(--alerte); }
body.ecran-schema .sdp-pastille--note b { color: var(--alerte); }
body.ecran-schema .sdp-aide { position: relative; margin-left: auto; }
body.ecran-schema .sdp-aide summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem;
  padding: .22rem .7rem; border-radius: 999px; font-size: var(--t-petite); font-weight: 650; color: var(--vert-fonce); }
body.ecran-schema .sdp-aide summary::-webkit-details-marker { display: none; }
body.ecran-schema .sdp-aide summary:hover,
body.ecran-schema .sdp-aide[open] summary { background: var(--vert-pale); }
body.ecran-schema .sdp-aide-panneau { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 20;
  width: min(26rem, 90vw); margin: 0; padding: .8rem 1rem .8rem 1.9rem; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 14px 34px -14px rgba(22, 35, 63, .3);
  font-size: var(--t-petite); line-height: 1.45; color: var(--text-muted); animation: sd-rail-entree .18s ease both; }
body.ecran-schema .sdp-aide-panneau li + li { margin-top: .35rem; }
body.ecran-schema .sdp-aide-panneau li::marker { color: var(--vert); }

body.ecran-schema .sdp-split { display: grid; gap: .8rem; align-items: start;
  grid-template-columns: minmax(0, 1.3fr) minmax(20rem, 1fr); }
body.ecran-schema .sdp-split--sans-carte { grid-template-columns: minmax(0, 1fr); }

/* La liste : carte blanche, en-tete collant, lignes denses. */
body.ecran-schema .sdp-liste { min-width: 0; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--ombre-sd); overflow: hidden; }
body.ecran-schema .sdp-liste .tableau-large { margin: 0; border: 0; border-radius: 0; box-shadow: none; }
body.ecran-schema .sdp-tableau { font-size: var(--t-petite); border-collapse: collapse; }
body.ecran-schema .sdp-tableau thead th { background: var(--bg-card); padding: .6rem; border-bottom: 1px solid var(--border);
  font-size: var(--t-libelle); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); }
body.ecran-schema .sdp-tableau td { padding: .5rem .6rem; border-bottom: 1px solid var(--trait-sd); vertical-align: middle; }
body.ecran-schema .sdp-tableau tbody tr:hover > td { background: var(--bg-survol); }
body.ecran-schema .sdp-nom { display: block; color: var(--marine); font-weight: 650; text-decoration: none; }
body.ecran-schema .sdp-nom:hover { color: var(--vert-fonce); text-decoration: underline; }
body.ecran-schema .sdp-sous { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .4rem; margin-top: .1rem;
  font-size: var(--t-libelle); color: var(--text-faint); }
body.ecran-schema .sdp-sous:empty { display: none; }
body.ecran-schema .sdp-sous .etiquette { margin: 0; padding: .02rem .45rem; font-size: var(--t-libelle);
  text-transform: none; letter-spacing: 0; }
body.ecran-schema .sdp-gain b { display: block; color: var(--marine); font-weight: 700; }
body.ecran-schema .sdp-part { display: flex; align-items: center; justify-content: flex-end; gap: .4rem; margin-top: .2rem; }
body.ecran-schema .sdp-part .sd-barre { width: 4.5rem; min-width: 0; height: .32rem; }
body.ecran-schema .sdp-part .sd-part { min-width: 0; font-size: var(--t-libelle); color: var(--text-faint); }
body.ecran-schema .sdp-tableau .sd-decrochage td { padding: .2rem .6rem; background: none; border: 0; font-style: normal; }
body.ecran-schema .sdp-tableau .sd-decrochage td span { display: flex; align-items: center; gap: .6rem;
  font-size: var(--t-libelle); font-weight: 650; color: var(--alerte); }
body.ecran-schema .sdp-tableau .sd-decrochage td span::before,
body.ecran-schema .sdp-tableau .sd-decrochage td span::after { content: ""; flex: 1; border-top: 1px dashed var(--alerte-trait); }
body.ecran-schema .sdp-tableau tr.ligne-retenue > td { background: color-mix(in srgb, var(--vert-pale) 55%, transparent); }
body.ecran-schema .sdp-tableau tr.ligne-retenue > td:first-child { box-shadow: inset 3px 0 0 var(--vert); }
body.ecran-schema .sdp-tableau tr.ligne-ecartee > td { background: none; color: var(--text-faint); }
body.ecran-schema .sdp-tableau tr.ligne-ecartee .sdp-nom { color: var(--text-muted); }
body.ecran-schema .sdp-tableau tr.ligne-ecartee > td:first-child { box-shadow: inset 3px 0 0 var(--border-champ); }
body.ecran-schema .sdp-tableau tr.ligne-situee td,
body.ecran-schema .sdp-tableau tr.ligne-visee > td { background: var(--vert-pale); box-shadow: none; }
body.ecran-schema .sdp-tableau tr.ligne-situee td:first-child { box-shadow: inset 3px 0 0 var(--vert); }

/* Decision : segment arrondi, icone et libelle ; le libelle se replie si la place manque. */
body.ecran-schema .sdp-tableau .sd-choix { padding: 2px; gap: 2px; border-radius: 999px; background: var(--bg-page); }
body.ecran-schema .sdp-tableau .sd-b { gap: .3rem; min-width: 0; padding: .28rem .6rem; border-radius: 999px;
  font-size: var(--t-libelle); color: var(--text-muted); transform: none; transition: background .12s, color .12s; }
body.ecran-schema .sdp-tableau .sd-b + .sd-b { border-left: 0; }
body.ecran-schema .sdp-tableau .sd-b svg { flex: none; }
body.ecran-schema .sdp-tableau .sd-b-retenu:not(.on):hover { background: var(--vert-pale); color: var(--vert-fonce); }
body.ecran-schema .sdp-tableau .sd-b-ecarte:not(.on):hover { background: var(--danger-fond); color: var(--danger); }
body.ecran-schema .sdp-tableau .sd-b-retenu.on { background: var(--vert); color: #fff; box-shadow: 0 1px 4px -1px rgba(90, 168, 50, .55); }
body.ecran-schema .sdp-tableau .sd-b-ecarte.on { background: var(--danger); color: #fff; }
body.ecran-schema .sdp-tableau .sd-motif { margin-top: .35rem; padding: .3rem .5rem; border-radius: 8px; font-size: var(--t-libelle); }
@media (max-width: 1500px) { body.ecran-schema .sdp-tableau .sd-b-mot { display: none; }
  body.ecran-schema .sdp-tableau .sd-b { padding: .32rem .45rem; } }

/* La carte : collante, outils poses dessus. */
body.ecran-schema .sdp-carte { position: sticky; top: .8rem; height: calc(100vh - 1.6rem); max-height: 56rem; min-height: 26rem;
  overflow: hidden; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--ombre-sd); background: var(--bg-page); }
body.ecran-schema .sdp-carte .sd-carte { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0;
  margin: 0; border: 0; border-radius: 0; }
@media (max-width: 1200px) {
  body.ecran-schema .sdp-split { grid-template-columns: minmax(0, 1fr); }
  body.ecran-schema .sdp-carte { position: relative; top: 0; order: -1; height: 26rem; }
}
body.ecran-schema .sdp-carte-haut { position: absolute; top: .7rem; left: .7rem; z-index: 3; display: flex; flex-direction: column;
  align-items: flex-start; gap: .4rem; max-width: calc(100% - 4rem); }
body.ecran-schema .sdp-carte-outils { display: flex; gap: .35rem; }
body.ecran-schema :is(.sdp-bascule, .sdp-outil) { display: inline-flex; align-items: center; gap: .4rem; box-sizing: border-box;
  height: 2rem; margin: 0; padding: 0 .75rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card);
  box-shadow: 0 2px 8px -2px rgba(22, 35, 63, .22); font-size: var(--t-libelle); font-weight: 650; color: var(--text-muted); cursor: pointer; }
body.ecran-schema .sdp-outil { width: 2rem; padding: 0; justify-content: center; color: var(--marine); }
body.ecran-schema :is(.sdp-bascule, .sdp-outil):hover { border-color: var(--vert); color: var(--vert-fonce); }
body.ecran-schema .sdp-bascule input { margin: 0; accent-color: var(--vert); }
body.ecran-schema .sdp-carte .sd-carte-legende { margin: 0; padding: .4rem .65rem; gap: .25rem .75rem;
  background: color-mix(in srgb, var(--bg-card) 92%, transparent); backdrop-filter: blur(4px);
  border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 2px 8px -2px rgba(22, 35, 63, .22);
  font-size: var(--t-libelle); color: var(--text-muted); }
body.ecran-schema .sdp-hors { color: var(--alerte); }

/* Le choix du fond, meme geste que la Carte du parc. */
body.ecran-schema #sd-controles { position: absolute; bottom: .7rem; left: .7rem; z-index: 3; }
body.ecran-schema #sd-controles .chef { position: relative; width: 52px; height: 52px; margin: 0; padding: 0; overflow: hidden;
  border: 2px solid var(--bg-card); border-radius: 12px; background-color: var(--bg-card); background-size: cover;
  background-position: center; box-shadow: 0 4px 14px -4px rgba(22, 35, 63, .4); cursor: pointer; }
body.ecran-schema #sd-controles .chef .mini-couches { position: absolute; right: 2px; bottom: 2px; width: 18px; height: 18px;
  display: grid; place-items: center; border-radius: 6px; background: var(--bg-card); color: var(--vert); }
body.ecran-schema #sd-controles .chef:hover,
body.ecran-schema #sd-controles.ouvert .chef { border-color: var(--vert); }
body.ecran-schema #sd-controles .volet { position: absolute; bottom: calc(100% + 8px); left: 0; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 14px 34px -14px rgba(22, 35, 63, .4);
  opacity: 0; transform: translateY(6px); visibility: hidden; pointer-events: none;
  transition: opacity .16s ease, transform .2s ease, visibility 0s linear .2s; }
body.ecran-schema #sd-controles.ouvert .volet { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition-delay: 0s; }

/* Les points : rang lisible, nature a la couleur, decision au halo et a la coche. */
body.ecran-schema .sd-pt { border: 2px solid #fff; box-shadow: 0 1px 4px rgba(22, 35, 63, .35);
  font-size: .68rem; font-weight: 800; letter-spacing: -.02em; transition: scale .15s ease, box-shadow .15s ease, opacity .15s ease; }
body.ecran-schema :is(.sd-pt-ouverture, .sd-pt-agrandissement, .sd-pt-densification, .sd-pt-transfert) { width: 1.55rem; height: 1.55rem; }
body.ecran-schema .sd-pt-ouverture { background: var(--marine); }
body.ecran-schema .sd-pt-agrandissement { background: var(--vert); }
body.ecran-schema .sd-pt-densification { background: var(--vert-fonce); }
body.ecran-schema .sd-pt-transfert { background: var(--ambre); }
body.ecran-schema .sd-pt-parc { width: .55rem; height: .55rem; background: #fff; border: 1.5px solid var(--text-faint);
  box-shadow: none; opacity: .85; }
body.ecran-schema .sd-pt-retenu { box-shadow: 0 0 0 2.5px var(--vert), 0 2px 6px rgba(22, 35, 63, .35); }
body.ecran-schema .sd-pt-retenu::after { content: ""; position: absolute; top: -.35rem; right: -.35rem; width: .8rem; height: .8rem;
  box-sizing: border-box; border: 1.5px solid #fff; border-radius: 999px; background: var(--vert) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 70% no-repeat; }
body.ecran-schema .sd-pt-ecarte { opacity: .45; filter: grayscale(1); }
/* `scale` et non `transform` : MapLibre positionne le point par un transform en ligne. */
body.ecran-schema .sd-pt.vise { scale: 1.35; z-index: 5; box-shadow: 0 0 0 4px rgba(90, 168, 50, .35), 0 2px 8px rgba(22, 35, 63, .4); }
body.ecran-schema .sd-legende-pastille { position: relative; width: .85rem; height: .85rem; min-width: .85rem;
  border-width: 1.5px; box-shadow: none; font-size: 0; cursor: default; }
body.ecran-schema .sd-legende-pastille.sd-pt-parc { width: .55rem; height: .55rem; min-width: .55rem; }
body.ecran-schema .sd-legende-pastille::after { display: none; }
body.ecran-schema .sdp-carte .maplibregl-popup-content { border-radius: 10px; padding: .55rem .75rem;
  box-shadow: 0 10px 26px -10px rgba(22, 35, 63, .35); font-size: var(--t-petite); }
body.ecran-schema .sdp-carte .sd-pt-lien { color: var(--vert-fonce); font-weight: 650; }

/* SD - matrice des territoires, correctif mesure : la case heritait d'une
   marge negative et depassait sa cellule (lignes qui se chevauchent). */
body.ecran-schema .sdr-exercice .sd-typo { width: 100%; margin: 0; border-spacing: 0 .3rem; table-layout: fixed; }
body.ecran-schema .sdr-exercice .sd-typo thead th:first-child,
body.ecran-schema .sdr-exercice .sd-typo tbody th { width: 9.5rem; }
body.ecran-schema .sdr-exercice .sd-typo td { height: auto; padding: 0 0 0 .35rem; }
body.ecran-schema .sdr-exercice .sd-typo-case { box-sizing: border-box; width: 100%; height: auto; min-width: 0; margin: 0; }
body.ecran-schema .sdr-exercice .sd-typo-vide { box-sizing: border-box; width: 100%; min-width: 0; height: 2.25rem; }
body.ecran-schema .sdr-exercice .tableau-large { overflow: visible; }

/* SD - Decider, apres capture : la liste prend la place, les noms tiennent
   sur une ligne, la decision en icones (libelle au survol) sous 1800 px. */
body.ecran-schema .sdp-split { grid-template-columns: minmax(0, 1.65fr) minmax(19rem, 1fr); }
body.ecran-schema .sdp-liste .tableau-large { padding: 0; }
body.ecran-schema .sdp-tableau { margin: 0; }
body.ecran-schema .sdp-tableau td:nth-child(2) { min-width: 13rem; }
body.ecran-schema .sdp-tableau .sd-decision { width: 1%; white-space: nowrap; }
@media (max-width: 1800px) {
  body.ecran-schema .sdp-tableau .sd-b-mot { display: none; }
  body.ecran-schema .sdp-tableau .sd-b { padding: .34rem .5rem; }
}

/* SD - Regler, lecture guidee : cartes numerotees, blocs secondaires replies,
   et un bloc de lancement qui dit quand les reglages ont change. */
body.ecran-schema .sdr-num { flex: none; display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem;
  border-radius: 999px; background: var(--vert); color: #fff; font-size: .75rem; font-weight: 800; }
body.ecran-schema .sdr-replie { padding: 0; }
body.ecran-schema .sdr-replie > summary { list-style: none; cursor: pointer; margin: 0; padding: .8rem 1rem;
  border-radius: 14px; transition: background .12s; }
body.ecran-schema .sdr-replie > summary::-webkit-details-marker { display: none; }
body.ecran-schema .sdr-replie > summary::after { content: ""; flex: none; width: .45rem; height: .45rem; margin-left: .6rem;
  border-right: 2px solid var(--text-faint); border-bottom: 2px solid var(--text-faint);
  transform: rotate(-45deg); transition: transform .2s; }
body.ecran-schema .sdr-replie[open] > summary::after { transform: rotate(45deg); }
body.ecran-schema .sdr-replie > summary:hover { background: var(--bg-survol); }
body.ecran-schema .sdr-replie > :not(summary) { margin: 0 1rem; }
body.ecran-schema .sdr-replie > :last-child { margin-bottom: .9rem; }
body.ecran-schema .sdr-replie[open] > :not(summary) { animation: sd-rail-entree .2s ease both; }
body.ecran-schema .sdr-replie .sdr-carte-lien { margin-left: auto; }
body.ecran-schema .sdr-cote .sdr-replie > .sdr-champ,
body.ecran-schema .sdr-cote .sdr-replie > .sdr-note,
body.ecran-schema .sdr-cote .sdr-replie > .sdr-retablir { margin-left: 1rem; margin-right: 1rem; }
body.ecran-schema .sd-typo-seuil--vide { opacity: .45; }

/* Reglages modifies : la note apparait, le bouton appelle le geste. */
body.ecran-schema .sdr-modifie-note { display: flex; align-items: center; gap: .4rem; margin: 0 0 .7rem; padding: .45rem .65rem;
  border-radius: 10px; background: var(--vert-pale); color: var(--vert-fonce); font-size: var(--t-petite); font-weight: 600;
  animation: sd-rail-entree .25s ease both; }
body.ecran-schema .sdr-modifie-note[hidden] { display: none; }
body.ecran-schema .sdr-modifie .sdr-lancer { box-shadow: 0 0 0 3px color-mix(in srgb, var(--vert) 25%, transparent), var(--ombre-sd); }
body.ecran-schema .sdr-modifie .sdr-lancer-bouton:not(:disabled) { animation: sd-etape-halo 2.2s ease-out infinite; }
@media (prefers-reduced-motion: reduce) {
  body.ecran-schema .sdr-modifie .sdr-lancer-bouton, body.ecran-schema .sdr-modifie-note { animation: none; }
}

/* SD - Decider, la carte parle de la decision : ambre = a decider (meme
   couleur que « a decider » sur l'accueil), vert = retenu, gris = ecarte.
   Le parc s'efface en petits points, la legende se pose en bas. */
body.ecran-schema .sdp-carte .sd-pt:not(.sd-pt-parc),
body.ecran-schema .sd-legende-pastille:not(.sd-pt-parc) {
  background: radial-gradient(circle at 32% 28%, #f6c46a, var(--ambre) 62%, #c98a1e);
  border: 2px solid #fff; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .25); }
body.ecran-schema .sdp-carte .sd-pt:not(.sd-pt-parc) { width: 1.6rem; height: 1.6rem; font-size: .7rem; font-weight: 800;
  box-shadow: 0 2px 6px rgba(22, 35, 63, .35), 0 0 0 3px rgba(232, 170, 61, .22); }
body.ecran-schema .sdp-carte .sd-pt.sd-pt-top { width: 1.95rem; height: 1.95rem; font-size: .8rem; z-index: 2; }
body.ecran-schema .sdp-carte .sd-pt.sd-pt-retenu,
body.ecran-schema .sd-legende-pastille.sd-pt-retenu {
  background: radial-gradient(circle at 32% 28%, #8cd06a, var(--vert) 62%, #3f8a22); }
body.ecran-schema .sdp-carte .sd-pt.sd-pt-retenu { box-shadow: 0 2px 6px rgba(22, 35, 63, .35), 0 0 0 3px rgba(90, 168, 50, .28); }
body.ecran-schema .sdp-carte .sd-pt.sd-pt-ecarte,
body.ecran-schema .sd-legende-pastille.sd-pt-ecarte {
  background: radial-gradient(circle at 32% 28%, #c3c9cf, #98a2a8 62%, #7d868d); filter: none; opacity: .85; }
body.ecran-schema .sdp-carte .sd-pt.sd-pt-ecarte { box-shadow: 0 1px 3px rgba(22, 35, 63, .25); }
body.ecran-schema .sdp-carte .sd-pt.sd-pt-parc,
body.ecran-schema .sd-legende-pastille.sd-pt-parc { width: .5rem; height: .5rem; min-width: .5rem;
  background: #7b8794; border: 1px solid #fff; box-shadow: none; opacity: .55; }
body.ecran-schema .sdp-carte .sd-pt:not(.sd-pt-parc):hover { scale: 1.15; z-index: 6; }
body.ecran-schema .sdp-carte .sd-pt.vise { scale: 1.3; z-index: 7; box-shadow: 0 0 0 5px rgba(22, 35, 63, .18), 0 3px 10px rgba(22, 35, 63, .45); }
body.ecran-schema .sd-legende-pastille:not(.sd-pt-parc) { width: .8rem; height: .8rem; min-width: .8rem;
  border-width: 1.5px; box-shadow: 0 1px 2px rgba(22, 35, 63, .3); }

body.ecran-schema .sdp-carte .sd-carte-legende { position: absolute; left: 50%; bottom: .75rem; z-index: 3;
  transform: translateX(-50%); display: flex; flex-wrap: nowrap; align-items: center; gap: .9rem;
  max-width: calc(100% - 9rem); padding: .38rem .9rem; white-space: nowrap; overflow-x: auto;
  border-radius: 999px; background: color-mix(in srgb, var(--bg-card) 94%, transparent); backdrop-filter: blur(6px);
  border: 1px solid var(--border); box-shadow: 0 6px 18px -8px rgba(22, 35, 63, .35);
  font-size: var(--t-libelle); font-weight: 600; color: var(--text-muted); }
body.ecran-schema .sdp-carte .sd-legende-item { gap: .4rem; }

/* Les alertes du tableau : une icone, une pastille lisible, le detail au survol. */
body.ecran-schema .sdp-tableau .sdp-alerte { display: inline-flex; align-items: center; gap: .25rem; cursor: help;
  padding: .06rem .5rem .06rem .4rem; border-radius: 999px; font-weight: 650;
  background: var(--alerte-fond); color: var(--alerte); border: 1px solid var(--alerte-trait); }
body.ecran-schema .sdp-tableau .sdp-alerte svg { flex: none; }
body.ecran-schema .sdp-tableau .sdp-alerte--info { background: var(--bg-page); color: var(--text-muted); border-color: var(--border); }

/* ============================================================ *
 * SD - Verifier le parc : onglets a icone en pastilles, un bloc par
 * tableau (barre d'outils + carte), meme tableau que Decider.
 * ============================================================ */
body.ecran-schema .sdp-tete .sd-sousonglets { display: inline-flex; flex-wrap: wrap; gap: .2rem; margin: 0; padding: 3px;
  border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); box-shadow: var(--ombre-sd); }
body.ecran-schema .sdp-tete .sd-sousonglets button { display: inline-flex; align-items: center; gap: .4rem; margin: 0;
  padding: .36rem .85rem; border: 0; border-radius: 999px; background: none; font-size: var(--t-petite); font-weight: 650;
  color: var(--text-muted); transition: background .15s, color .15s; }
body.ecran-schema .sdp-tete .sd-sousonglets button:hover { color: var(--marine); background: var(--bg-survol); }
body.ecran-schema .sdp-tete .sd-sousonglets button.on { background: var(--vert-pale); color: var(--vert-fonce); }
body.ecran-schema .sdp-tete .sd-sousonglets button svg { flex: none; }
body.ecran-schema .sdp-tete .sd-sousonglets .cpt { margin-left: .1rem; }

body.ecran-schema .sdp-bloc { display: flex; flex-direction: column; gap: .55rem; margin: 0 0 1.1rem; animation: sd-rail-entree .25s ease both; }
body.ecran-schema .sdp-outils { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .6rem; }
body.ecran-schema .sdp-outils .sdp-aide { margin-left: auto; }
body.ecran-schema .sdp-bloc-titre { display: flex; align-items: center; gap: .45rem; margin: 0 .3rem 0 0;
  font-size: var(--t-corps); font-weight: 650; color: var(--marine); }
body.ecran-schema .sdp-bloc-titre svg { flex: none; color: var(--vert-fonce); }
body.ecran-schema .sdp-aide-panneau--texte { padding-left: 1rem; }
body.ecran-schema .sdp-aide-panneau p { margin: 0; }
body.ecran-schema .sdp-aide-panneau p + p { margin-top: .5rem; }
body.ecran-schema .sdp-pastille--ok { background: var(--vert-pale); border-color: color-mix(in srgb, var(--vert) 35%, transparent); color: var(--vert-fonce); }

/* Recherche et filtres, au meme gabarit de pastille. */
body.ecran-schema .sdp-recherche { display: inline-flex; align-items: center; gap: .45rem; box-sizing: border-box; margin: 0;
  height: 2.1rem; padding: 0 .8rem; min-width: min(22rem, 100%); border: 1px solid var(--border-champ); border-radius: 999px;
  background: var(--bg-card); color: var(--text-faint); transition: border-color .15s, box-shadow .15s; }
body.ecran-schema .sdp-recherche:focus-within { border-color: var(--vert); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vert) 18%, transparent); }
body.ecran-schema .sdp-recherche input { flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; outline: 0; box-shadow: none;
  background: none; font: inherit; font-size: var(--t-petite); color: var(--text); }
body.ecran-schema .sdp-filtres { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
body.ecran-schema .sdp-filtres .sd-seuil { padding: .22rem .7rem; border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-card); color: var(--text-muted); font-size: var(--t-petite); font-weight: 650; text-decoration: none; }
body.ecran-schema .sdp-filtres .sd-seuil:hover { border-color: var(--vert); color: var(--vert-fonce); }
body.ecran-schema .sdp-filtres .sd-seuil.actif { background: var(--vert); border-color: var(--vert); color: #fff; }

/* Cellules : nom lisible et code dessous, tri discret, marques. */
body.ecran-schema .sdp-nom-texte { display: block; color: var(--marine); font-weight: 650; }
body.ecran-schema .sdp-sous--droite { justify-content: flex-end; }
body.ecran-schema .sdp-tableau .cl-tri { display: inline-flex; align-items: center; gap: .3rem; color: inherit; text-decoration: none; }
body.ecran-schema .sdp-tableau .cl-tri:hover,
body.ecran-schema .sdp-tableau .cl-tri.on { color: var(--marine); }
body.ecran-schema .sdp-tableau .cl-fleche { font-size: .62rem; opacity: .55; }
body.ecran-schema .sdp-tableau .cl-tri.on .cl-fleche { opacity: 1; color: var(--vert-fonce); }
body.ecran-schema .sdp-tableau .num b { color: var(--marine); }
body.ecran-schema .sdp-part .sd-barre { overflow: hidden; }
body.ecran-schema .sdp-zero { color: var(--text-faint); }
body.ecran-schema .sdp-fleche { margin: 0 .3rem; color: var(--text-faint); }
body.ecran-schema .sdp-tableau .marque-proposee { display: inline-flex; margin-left: .4rem; padding: .02rem .5rem; border-radius: 999px;
  background: var(--vert); color: #fff; font-size: var(--t-libelle); font-weight: 700; text-transform: none; letter-spacing: 0; vertical-align: middle; }
body.ecran-schema .sdp-tableau tr.ligne-proposee > td { background: color-mix(in srgb, var(--vert-pale) 55%, transparent); }
body.ecran-schema .sdp-tableau tr.ligne-proposee > td:first-child { box-shadow: inset 3px 0 0 var(--vert); }
body.ecran-schema .sdp-tableau .sd-geste-bloque { display: inline-flex; padding: .15rem .6rem; border-radius: 999px;
  background: var(--bg-page); font-size: var(--t-libelle); }
body.ecran-schema .sdp-vide { margin: 0 0 1rem; padding: 1.3rem; text-align: center; border: 1px dashed var(--border);
  border-radius: 14px; background: var(--bg-card); color: var(--text-faint); font-size: var(--t-petite); }

/* SD - Decider : la carte tient dans l'ecran des l'arrivee (l'en-tete du volet
   et la barre font ~11 rem), sa legende du bas reste visible sans defiler. */
body.ecran-schema .sdp-carte { height: calc(100vh - 11.5rem); min-height: 24rem; }

/* La legende est dans la carte : ses pastilles ne prennent pas la taille des points. */
body.ecran-schema .sdp-carte .sd-legende-pastille.sd-pt:not(.sd-pt-parc) { width: .8rem; height: .8rem; min-width: .8rem;
  font-size: 0; border-width: 1.5px; box-shadow: 0 1px 2px rgba(22, 35, 63, .3); }

/* SD - Decider : le marqueur ne bouge plus au survol. MapLibre place l'element
   par un transform en ligne ; agrandir ce meme element multipliait le decalage.
   Le cadre garde la position, le point interieur grossit. */
body.ecran-schema .sdp-carte .sd-pt-cadre { display: grid; place-items: center; }
body.ecran-schema .sdp-carte .sd-pt-cadre > .sd-pt { position: relative; transform-origin: center; }
body.ecran-schema .sdp-carte .maplibregl-marker:hover,
body.ecran-schema .sdp-carte .maplibregl-marker:has(.sd-pt.vise) { z-index: 7; }

/* Les chiffres s'alignent : le pourcentage a une largeur fixe, les barres
   partent toutes du meme point. */
body.ecran-schema .sdp-tableau .num { font-variant-numeric: tabular-nums; }
body.ecran-schema .sdp-part { justify-content: flex-end; }
body.ecran-schema .sdp-part .sd-part { display: inline-block; min-width: 2.9rem; text-align: right; }
body.ecran-schema .sdp-part .sd-barre { flex: none; width: 4.5rem; }

/* L'aide repliee : une croix pour fermer. */
body.ecran-schema .sdp-aide-panneau,
body.ecran-schema .sdp-aide-panneau--texte { padding: .85rem 2.4rem .85rem 1rem; }
body.ecran-schema .sdp-aide-liste { margin: 0; padding-left: 1rem; }
body.ecran-schema .sdp-aide-liste li + li { margin-top: .35rem; }
body.ecran-schema .sdp-aide-fermer { position: absolute; top: .45rem; right: .45rem; display: grid; place-items: center;
  width: 1.7rem; height: 1.7rem; margin: 0; padding: 0; border: 0; border-radius: 999px; background: none;
  color: var(--text-faint); cursor: pointer; box-shadow: none; }
body.ecran-schema .sdp-aide-fermer:hover { background: var(--bg-survol); color: var(--marine); }

/* SD - accueil, en-tete aligne : la provenance en une seule barre segmentee,
   la vigilance a droite a la meme hauteur ; la ligne d'etat centree. */
body.ecran-schema .sd-entete { margin: 0 0 .9rem; }
body.ecran-schema .sd-entete-ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; }
body.ecran-schema .sd-meta { display: inline-flex; flex-wrap: wrap; align-items: stretch; gap: 0; margin: 0; padding: 0;
  min-height: 2.25rem; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card);
  box-shadow: var(--ombre-sd); overflow: hidden; }
body.ecran-schema .sd-meta li { display: inline-flex; align-items: center; gap: .4rem; padding: 0 .85rem;
  border: 0; border-radius: 0; background: none; font-size: var(--t-petite); line-height: 1; }
body.ecran-schema .sd-meta li + li { border-left: 1px solid var(--trait-sd, var(--border)); }
body.ecran-schema .sd-meta-lien { background: var(--vert-pale) !important; border-left-color: transparent !important; }
body.ecran-schema .sd-meta-lien a { height: 100%; }
body.ecran-schema .sd-meta-lien:hover { background: color-mix(in srgb, var(--vert-pale) 70%, var(--vert) 12%) !important; }
body.ecran-schema .sd-meta-lien a:hover { text-decoration: none; }
body.ecran-schema .sd-entete-ligne .avis-vigilance-declencheur { box-sizing: border-box; min-height: 2.25rem; padding: 0 .85rem;
  border-radius: 12px; box-shadow: var(--ombre-sd); }

body.ecran-schema .sd2-etat { display: flex; flex-wrap: nowrap; align-items: center; gap: 1rem; padding: 1rem 1.25rem; margin: 0 0 1rem; }
body.ecran-schema .sd2-etat-picto { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem;
  border-radius: 12px; background: var(--vert-pale); color: var(--vert-fonce); }
body.ecran-schema .sd2-etat-texte { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
body.ecran-schema .sd2-etat-titre { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .7rem; }
body.ecran-schema .sd2-etat-titre > b { font-size: 1.25rem; font-weight: 650; color: var(--marine); letter-spacing: -.01em; line-height: 1.2; }
body.ecran-schema .sd2-etat-texte .discret { flex-basis: auto; order: 0; }
body.ecran-schema .sd2-etat .sd2-reprendre { flex: none; margin-left: auto; align-self: center; }
@media (max-width: 700px) { body.ecran-schema .sd2-etat { flex-wrap: wrap; } body.ecran-schema .sd2-etat .sd2-reprendre { width: 100%; justify-content: center; } }

/* SD - Regler, alignement : les quatre controles de l'exercice a la meme
   hauteur, l'aide du type en tete de carte, les libelles de groupe dans
   l'axe des pastilles. */
body.ecran-schema .sdr-champs { align-items: end; }
body.ecran-schema .sdr-champ-x :is(.segment, select, .sdr-nombre) { box-sizing: border-box; height: 2.4rem; margin: 0; }
body.ecran-schema .sdr-champ-x .segment { overflow: hidden; }
body.ecran-schema .sdr-champ-x .segment button { height: 100%; display: inline-flex; align-items: center; justify-content: center; }
body.ecran-schema .sdr-champ-x select,
body.ecran-schema .sdr-champ-x .sdr-nombre { padding: 0 .75rem; border-radius: 9px; }
body.ecran-schema .sdr-carte-titre { flex-wrap: wrap; }
body.ecran-schema .sdr-carte-titre .sdr-carte-note { font-weight: 500; line-height: 1.35; text-align: right; }
body.ecran-schema .sdr-gestes-titre { align-self: center; line-height: 1; }
body.ecran-schema .sdr-gestes { row-gap: .5rem; }
body.ecran-schema .sdr-exercice .sd-typo thead th:first-child,
body.ecran-schema .sdr-exercice .sd-typo tbody th { width: 8.5rem; }
body.ecran-schema .sdr-exercice .sd-typo-vide { background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--border) 45%, transparent) 6px 7px); }
body.ecran-schema .sdr-tete { min-height: 2.25rem; }

/* SD - Regler : la provenance en pastille neutre, discrete a cote du titre. */
body.ecran-schema .sdr-tete .sd-provenance { display: inline-flex; align-items: center; gap: .4rem; margin: 0;
  padding: .28rem .8rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card);
  color: var(--text-muted); font-size: var(--t-petite); line-height: 1.2; }
body.ecran-schema .sdr-tete .sd-provenance svg { flex: none; color: var(--vert-fonce); }
body.ecran-schema .sdr-tete .sd-provenance b { color: var(--marine); font-weight: 650; }

/* SD - en-tetes de volet alignes : titre, compteur, pastilles et aide sur le
   meme axe, a la meme hauteur, sans les marges heritees de chaque composant. */
body.ecran-schema .sdr-tete { align-items: center; }
body.ecran-schema .sdr-tete > * { margin-top: 0; margin-bottom: 0; }
body.ecran-schema .sdr-tete .sdr-titre { line-height: 2rem; }
body.ecran-schema .sdr-tete :is(.sd-compteur, .sdp-pastille, .sd-provenance, .sdp-aide > summary) {
  box-sizing: border-box; display: inline-flex; align-items: center; height: 2rem; padding-top: 0; padding-bottom: 0; line-height: 1; }
body.ecran-schema .sdr-tete .sdp-aide { display: inline-flex; align-items: center; }

/* SD - Verifier le parc : onglets sans anneau de focus au clic (seulement au
   clavier), barre d'outils a hauteur unique, comptes en texte discret. */
body.ecran-schema .sd-sousonglets button:focus { outline: none; }
body.ecran-schema .sd-sousonglets button:focus-visible { outline: 2px solid var(--vert); outline-offset: 2px; }
body.ecran-schema .sdp-tete .sd-sousonglets { padding: 3px; }
body.ecran-schema .sdp-tete .sd-sousonglets button { height: calc(2rem - 6px); padding: 0 .85rem; }
body.ecran-schema .sdp-outils { min-height: 2.1rem; }
body.ecran-schema .sdp-outils > :is(.sdp-recherche, .sdp-pastille, .sdp-filtres, .sdp-bloc-titre) { height: 2.1rem; box-sizing: border-box; }
body.ecran-schema .sdp-outils .sdp-pastille:not(.sdp-pastille--note):not(.sdp-pastille--ok) { border: 0; background: none; padding: 0 .2rem; color: var(--text-faint); }
body.ecran-schema .sdp-outils .sdp-pastille--note { height: 1.7rem; }
body.ecran-schema .sdp-outils .sdp-aide > summary { height: 2.1rem; box-sizing: border-box; }

/* ============================================================ *
 * SD - fiche d'un emplacement : en-tete en pastilles, chiffres cles
 * en une rangee, carte collante a gauche et detail en cartes a droite.
 * ============================================================ */
body.ecran-site-fiche .sdf-entete { display: flex; flex-direction: column; gap: .55rem; margin: 0 0 1rem; }
body.ecran-site-fiche .sdf-retour { display: inline-flex; align-items: center; gap: .3rem; align-self: flex-start;
  height: 1.9rem; padding: 0 .8rem 0 .55rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card);
  color: var(--text-muted); font-size: var(--t-petite); font-weight: 600; text-decoration: none; transition: border-color .15s, color .15s; }
body.ecran-site-fiche .sdf-retour:hover { border-color: var(--vert); color: var(--vert-fonce); }
body.ecran-site-fiche .sdf-titre-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; }
body.ecran-site-fiche .sdf-titre-ligne .sd-rang { height: 2rem; min-width: 2rem; font-size: var(--t-dense); }
body.ecran-site-fiche .sdf-titre { margin: 0; font-size: 1.5rem; font-weight: 650; color: var(--marine); letter-spacing: -.01em; line-height: 1.2; }
body.ecran-site-fiche .sdf-titre-ligne .sdp-pastille { height: 2rem; box-sizing: border-box; }
body.ecran-site-fiche .sdf-titre-ligne .sdp-aide { margin-left: auto; }
body.ecran-site-fiche .sdf-provenance { color: var(--text-faint); font-size: var(--t-libelle); line-height: 1.5; }

body.ecran-site-fiche .sdf-kpis { display: grid; gap: .7rem; margin: 0 0 1rem;
  grid-template-columns: minmax(12rem, 1.4fr) repeat(4, minmax(8rem, 1fr)); }
@media (max-width: 1100px) { body.ecran-site-fiche .sdf-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body.ecran-site-fiche .sdf-kpis .sdf-tuile { display: flex; flex-direction: column; justify-content: center; gap: .2rem;
  margin: 0; padding: .85rem 1rem; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card);
  box-shadow: var(--ombre-sd); text-align: left; }
body.ecran-site-fiche .sdf-kpis .sdf-tuile b { font-size: 1.45rem; font-weight: 700; color: var(--marine); line-height: 1.1;
  font-variant-numeric: tabular-nums; }
body.ecran-site-fiche .sdf-kpis .sdf-tuile > span { font-size: var(--t-libelle); font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-faint); }
/* Pas de degrade sur une tuile de chiffre : un filet vert suffit a la designer. */
body.ecran-site-fiche .sdf-kpis .sdf-tuile-phare { position: relative; padding-left: 1.3rem; background: var(--bg-card);
  border-color: color-mix(in srgb, var(--vert) 30%, var(--border)); }
body.ecran-site-fiche .sdf-kpis .sdf-tuile-phare::before { content: ""; position: absolute; left: .55rem; top: .9rem; bottom: .9rem;
  width: 3px; border-radius: 999px; background: var(--vert-fonce); }
body.ecran-site-fiche .sdf-kpis .sdf-tuile-phare b { font-size: 2rem; color: var(--vert-fonce); }
body.ecran-site-fiche .sdf-kpis .sdf-tuile-phare > span { color: var(--vert-fonce); }
body.ecran-site-fiche .sdf-kpis .sdf-tuile--gain b { color: var(--marine); }
body.ecran-site-fiche .sdf-logos { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin-top: .15rem; }
body.ecran-site-fiche .sdf-logos img { width: 20px; height: 20px; object-fit: contain; border-radius: 5px; background: #fff; }
body.ecran-site-fiche .sdf-logos i { font-style: normal; font-size: var(--t-libelle); color: var(--text-faint); }

body.ecran-site-fiche .sdf-corps { display: grid; gap: 1rem; align-items: start; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 1100px) { body.ecran-site-fiche .sdf-corps { grid-template-columns: minmax(0, 1fr); } }
body.ecran-site-fiche .sdf-carte { position: sticky; top: .8rem; display: flex; flex-direction: column; gap: .5rem; }
@media (max-width: 1100px) { body.ecran-site-fiche .sdf-carte { position: static; } }
body.ecran-site-fiche .sdf-carte .carte-diamap-cadre { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; box-shadow: var(--ombre-sd); }
body.ecran-site-fiche .sdf-detail { display: flex; flex-direction: column; min-width: 0; }
body.ecran-site-fiche .sdf-detail .sdp-bloc { margin-bottom: .9rem; }
body.ecran-site-fiche .sdf-note { display: flex; align-items: center; gap: .35rem; margin: .35rem 0 0; font-size: var(--t-libelle); color: var(--text-faint); }
body.ecran-site-fiche .sdf-pastille { display: inline-block; width: .6rem; height: .6rem; margin-right: .4rem; border-radius: 999px;
  background: var(--ambre); vertical-align: middle; }
body.ecran-site-fiche .sdf-perte { color: var(--danger); font-weight: 700; }
body.ecran-site-fiche .sdp-tableau .sd-rang { height: 1.4rem; min-width: 1.4rem; font-size: var(--t-libelle); margin-right: .2rem; }
body.ecran-site-fiche .sdp-tableau tr.sdf-reste td { color: var(--text-faint); font-style: italic; }
/* L'etiquette de la part perdue, posee a cote du magasin touche. */
body.ecran-site-fiche .sdf-etiquette-perte { padding: .08rem .42rem; border-radius: 999px; background: #fff; color: var(--danger);
  font-size: .7rem; font-weight: 800; white-space: nowrap; box-shadow: 0 1px 4px rgba(22, 35, 63, .3); pointer-events: none; }

/* ============================================================ *
 * SD - Parametres du schema directeur : en-tete et validation en
 * pastilles, les deux ecrans compares en cartes, groupes de regles
 * en cartes a icone, grille des CA minimum compacte.
 * ============================================================ */
body.ecran-regles .sdf-retour { display: inline-flex; align-items: center; gap: .3rem; height: 1.9rem; margin: 0 0 .7rem;
  padding: 0 .8rem 0 .55rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card);
  color: var(--text-muted); font-size: var(--t-petite); font-weight: 600; text-decoration: none; }
body.ecran-regles .sdf-retour:hover { border-color: var(--vert); color: var(--vert-fonce); }
body.ecran-regles .reg-tete { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; margin: 0 0 .9rem; }
body.ecran-regles .reg-titre { margin: 0; font-size: 1.5rem; font-weight: 650; color: var(--marine); letter-spacing: -.01em; }
body.ecran-regles .reg-validation { height: 2rem; box-sizing: border-box; margin: 0; }

body.ecran-regles .reg-deux { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); margin: 0 0 .5rem; }
body.ecran-regles .reg-deux-carte { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; border: 1px solid var(--border);
  border-radius: 14px; background: var(--bg-card); box-shadow: var(--ombre-sd); color: inherit; text-decoration: none;
  transition: border-color .15s, box-shadow .15s; }
body.ecran-regles a.reg-deux-carte:hover { border-color: var(--vert); box-shadow: 0 6px 18px -10px rgba(22, 35, 63, .3); }
body.ecran-regles .reg-deux-carte--ici { border-color: color-mix(in srgb, var(--vert) 45%, var(--border));
  background: var(--bg-card); box-shadow: inset 3px 0 0 var(--vert-fonce), 0 6px 18px -12px rgba(22, 35, 63, .3); }
body.ecran-regles .reg-deux-picto { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 11px;
  background: var(--vert-pale); color: var(--vert-fonce); }
body.ecran-regles .reg-deux-carte--ici .reg-deux-picto { background: var(--vert); color: #fff; }
body.ecran-regles .reg-deux-texte { flex: 1; display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
body.ecran-regles .reg-deux-texte b { color: var(--marine); font-weight: 650; }
body.ecran-regles .reg-deux-texte b em { margin-left: .35rem; padding: .05rem .45rem; border-radius: 999px; background: var(--vert);
  color: #fff; font-size: var(--t-libelle); font-style: normal; font-weight: 700; vertical-align: middle; }
body.ecran-regles .reg-deux-texte > span { font-size: var(--t-petite); color: var(--text-muted); }
body.ecran-regles .reg-deux-chevron { flex: none; color: var(--text-faint); font-size: 1.3rem; }
body.ecran-regles .reg-astuce { display: flex; align-items: center; gap: .45rem; margin: 0 0 1rem; font-size: var(--t-petite); color: var(--text-muted); }
body.ecran-regles .reg-astuce svg { flex: none; color: var(--vert-fonce); }
body.ecran-regles .reg-lecture { margin: 0 0 1rem; height: auto; padding: .45rem .8rem; }

body.ecran-regles .reg-groupe { margin: 0 0 1rem; padding: 1rem 1.2rem 1.15rem; border: 1px solid var(--border); border-radius: 16px;
  background: var(--bg-card); box-shadow: var(--ombre-sd); }
body.ecran-regles .reg-groupe-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; margin: 0 0 .8rem; }
body.ecran-regles .reg-groupe-tete h3 { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: var(--t-corps); font-weight: 650; color: var(--marine); }
body.ecran-regles .reg-groupe > h3::before, body.ecran-regles .reg-groupe-tete h3::before { display: none; }
body.ecran-regles .reg-groupe-tete h3 svg { flex: none; color: var(--vert-fonce); }
body.ecran-regles .reg-groupe-tete .reg-aide { margin: 0; max-width: 46rem; }
body.ecran-regles .reg-aide { color: var(--text-faint); font-size: var(--t-petite); line-height: 1.45; }

/* La grille des CA minimum : une case = libelle, champ court, unite ; mediane dessous. */
body.ecran-regles .sd-typo { width: 100%; border-collapse: separate; border-spacing: .4rem .35rem; margin: -.35rem -.4rem; table-layout: fixed; }
body.ecran-regles .sd-typo th, body.ecran-regles .sd-typo td { background: none; border: 0; padding: 0; vertical-align: middle; }
body.ecran-regles .sd-typo thead th { padding: 0 .2rem .2rem; text-align: left; font-size: var(--t-libelle); font-weight: 650;
  letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); }
body.ecran-regles .sd-typo thead th:first-child, body.ecran-regles .sd-typo tbody th { width: 9rem; }
body.ecran-regles .sd-typo tbody th[scope="row"] { position: static; text-align: left; font-size: var(--t-petite); font-weight: 650; color: var(--marine); }
body.ecran-regles .reg-case { display: flex; flex-direction: column; gap: .15rem; padding: .45rem .6rem; border: 1px solid var(--border);
  border-radius: 10px; background: var(--bg-card); transition: border-color .15s; }
body.ecran-regles .reg-case:focus-within { border-color: var(--vert); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vert) 15%, transparent); }
body.ecran-regles .reg-case .sd-typo-seuil { display: flex; align-items: center; gap: .4rem; margin: 0; padding: 0; border: 0; }
body.ecran-regles .reg-case .sd-typo-seuil label { margin: 0; font-size: var(--t-libelle); color: var(--text-faint); white-space: nowrap; }
body.ecran-regles .reg-case .sd-typo-seuil input { flex: 1; min-width: 0; max-width: 8rem; height: 1.9rem; margin: 0; padding: 0 .5rem;
  border: 1px solid var(--border-champ); border-radius: 8px; text-align: right; font-variant-numeric: tabular-nums; }
body.ecran-regles .reg-case .sd-typo-unite { font-size: var(--t-libelle); color: var(--text-faint); }
body.ecran-regles .reg-case .sd-typo-repere { margin: 0; font-size: var(--t-libelle); color: var(--text-faint); }
body.ecran-regles .sd-typo-vide { display: flex; align-items: center; justify-content: center; height: 2.8rem; border: 1px dashed var(--border);
  border-radius: 10px; color: var(--text-faint);
  background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--border) 45%, transparent) 6px 7px); }

/* Les regles : une tuile par champ, le champ et son unite sur une ligne. */
body.ecran-regles .reg-champs { display: grid; gap: .7rem; margin: 0; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
body.ecran-regles .reg-champ { display: flex; flex-direction: column; gap: .35rem; padding: .75rem .85rem; border: 1px solid var(--border);
  border-radius: 12px; background: var(--bg-page); transition: border-color .15s; }
body.ecran-regles .reg-champ:focus-within { border-color: var(--vert); background: var(--bg-card); }
body.ecran-regles .reg-champ .reg-libelle { margin: 0; font-size: var(--t-petite); font-weight: 650; color: var(--marine); }
body.ecran-regles .reg-saisie { display: flex; align-items: center; gap: .45rem; }
body.ecran-regles .reg-saisie input[type="number"] { width: 9rem; height: 2.2rem; margin: 0; padding: 0 .6rem; border-radius: 9px;
  text-align: right; font-variant-numeric: tabular-nums; }
body.ecran-regles .reg-unite { font-size: var(--t-petite); color: var(--text-faint); }
body.ecran-regles .reg-interrupteur { display: inline-flex; align-items: center; gap: .4rem; margin: 0; font-size: var(--t-petite); color: var(--text-muted); cursor: pointer; }
body.ecran-regles .reg-interrupteur input { margin: 0; accent-color: var(--vert); }
body.ecran-regles .reg-formats-bloc { display: flex; flex-direction: column; gap: .35rem; margin-top: .9rem; padding-top: .85rem; border-top: 1px solid var(--trait-sd); }
body.ecran-regles .reg-formats-bloc .reg-libelle { font-size: var(--t-petite); font-weight: 650; color: var(--marine); }
body.ecran-regles .reg-formats { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .2rem; }

body.ecran-regles .reg-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .9rem; position: sticky; bottom: .6rem; z-index: 5;
  margin: .4rem 0 1rem; padding: .7rem 1rem; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card);
  box-shadow: 0 10px 28px -12px rgba(22, 35, 63, .35); }
body.ecran-regles .reg-actions .bouton { display: inline-flex; align-items: center; gap: .4rem; }
body.ecran-regles .reg-reste { margin: 0 0 1rem; }
body.ecran-regles .reg-reste .sdp-tableau { margin: 0 1rem .9rem; width: calc(100% - 2rem); }

/* SD - fiche : la carte carree tient dans l'ecran (sa legende reste visible). */
body.ecran-site-fiche .sdf-carte .carte-diamap-cadre { width: min(100%, calc(100vh - 12rem)); min-width: 20rem; }
body.ecran-site-fiche .sdf-carte .carte-diamap--carre { width: 100%; }
body.ecran-site-fiche .sdf-corps { grid-template-columns: auto minmax(0, 1fr); }
@media (max-width: 1100px) { body.ecran-site-fiche .sdf-corps { grid-template-columns: minmax(0, 1fr); } }
body.ecran-site-fiche .sdf-etiquette-perte { pointer-events: auto; cursor: help; }

/* SD - parametres : la grille des CA minimum sans cadre ni defilement herites. */
body.ecran-regles .reg-groupe .tableau-large { overflow: visible; border: 0; background: none; box-shadow: none; border-radius: 0; padding: 0; }
body.ecran-regles .sd-typo { margin: 0; width: 100%; border-spacing: 0 .35rem; }
body.ecran-regles .sd-typo td { padding-left: .4rem; }

/* SD - fiche : la carte garde une vraie largeur (la colonne auto se reduisait a son minimum). */
body.ecran-site-fiche .sdf-carte { width: min(46vw, calc(100vh - 12rem)); }
body.ecran-site-fiche .sdf-carte .carte-diamap-cadre { width: 100%; min-width: 0; }
@media (max-width: 1100px) { body.ecran-site-fiche .sdf-carte { width: 100%; } }

/* SD - grilles des territoires (Regler, Parametres) : aucune bordure de tableau
   heritee, seules les cases dessinent la grille. */
body.ecran-schema table.sd-typo,
body.ecran-schema table.sd-typo :is(thead, tbody, tr, th, td) { border: 0; box-shadow: none; }
body.ecran-schema .sd-typo thead th { background: none; }

/* SD - fiche, lecture de la carte : phrase au-dessus, legende des points en haut
   (en bas elle passait sous la legende du CA), magasins touches numerotes comme
   dans le tableau, etiquette du site. */
body.ecran-site-fiche .sdf-carte-lecture { display: flex; align-items: flex-start; gap: .45rem; margin: 0 0 .1rem;
  font-size: var(--t-petite); color: var(--text-muted); line-height: 1.4; }
body.ecran-site-fiche .sdf-carte-lecture svg { flex: none; margin-top: .1rem; color: var(--vert-fonce); }
body.ecran-site-fiche .sdf-carte .carte-diamap-points { top: .7rem; bottom: auto; left: .7rem; display: flex; flex-direction: column; gap: .3rem;
  padding: .55rem .7rem; border: 1px solid var(--border); border-radius: 12px; background: color-mix(in srgb, var(--bg-card) 94%, transparent);
  backdrop-filter: blur(4px); box-shadow: 0 6px 18px -8px rgba(22, 35, 63, .3); font-size: var(--t-libelle); font-weight: 600; color: var(--text-muted); }
body.ecran-site-fiche .sdf-carte .carte-diamap-points > div { display: flex; align-items: center; gap: .45rem; }
body.ecran-site-fiche .sdf-carte .carte-diamap-points span { margin: 0; flex: none; }
body.ecran-site-fiche .sdf-carte .carte-diamap-points .pt-cannibalise { width: .9rem; height: .9rem; border-radius: 999px; background: #d93a3a; border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); }
body.ecran-site-fiche .sdf-leg-trait { width: 1.4rem; height: 0; border-top: 2px dashed #4b5560; }
body.ecran-site-fiche .sdf-leg-bleu { width: 1.4rem; height: .6rem; border-radius: 3px; background: linear-gradient(90deg, #cfe0f1, #1f4e8c); }

body.ecran-site-fiche .sdf-pt-cadre { display: grid; place-items: center; }
body.ecran-site-fiche .sdf-pt-touche { display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 999px;
  background: #d93a3a; color: #fff; border: 2px solid #fff; font-size: .68rem; font-weight: 800; cursor: pointer;
  box-shadow: 0 2px 6px rgba(22, 35, 63, .35); transition: scale .15s ease, box-shadow .15s ease; }
body.ecran-site-fiche .sdf-pt-touche:hover,
body.ecran-site-fiche .sdf-pt-touche.vise { scale: 1.3; box-shadow: 0 0 0 4px rgba(217, 58, 58, .25), 0 3px 8px rgba(22, 35, 63, .4); }
body.ecran-site-fiche .maplibregl-marker:has(.sdf-pt-touche.vise) { z-index: 7; }
body.ecran-site-fiche .sdf-etiquette-site { padding: .12rem .5rem; border-radius: 999px; background: var(--marine); color: #fff;
  font-size: .7rem; font-weight: 700; white-space: nowrap; box-shadow: 0 2px 6px rgba(22, 35, 63, .35); pointer-events: none; }
body.ecran-site-fiche .sdf-bulle-perte { margin-top: .1rem; color: #d93a3a; font-weight: 800; }
body.ecran-site-fiche .sdf-num-touche { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; margin-right: .45rem;
  border-radius: 999px; background: #d93a3a; color: #fff; font-size: .66rem; font-weight: 800; vertical-align: middle; }
body.ecran-site-fiche tr[data-touche] { cursor: default; }
body.ecran-site-fiche tr[data-touche]:hover > td { background: color-mix(in srgb, #d93a3a 7%, transparent); }

/* SD - parc, Diagnostic : le rang en premiere colonne, etroite ; le nom respire. */
body.ecran-schema .sdp-tableau .sdp-col-rang { width: 3.5rem; }
body.ecran-schema .sdp-tableau .sdp-col-nom { width: 32%; }

/* SD - parc : l'onglet actif heritait d'une ombre interieure marine (inset 0 3px),
   mesuree ; la pastille verte suffit a dire l'onglet choisi. */
body.ecran-schema .sdp-tete .sd-sousonglets button,
body.ecran-schema .sdp-tete .sd-sousonglets button.on { box-shadow: none; }

/* ============================================================ *
 * SD - pages du module, une seule grammaire : retour en pastille,
 * titre et pastilles d'etat, cartes, tableaux sdp-tableau.
 * ============================================================ */
body.ecran-schema .sdf-retour { display: inline-flex; align-items: center; gap: .3rem; height: 1.9rem; margin: 0 0 .7rem;
  padding: 0 .8rem 0 .55rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card);
  color: var(--text-muted); font-size: var(--t-petite); font-weight: 600; text-decoration: none; transition: border-color .15s, color .15s; }
body.ecran-schema .sdf-retour:hover { border-color: var(--vert); color: var(--vert-fonce); }
body.ecran-schema .sd-retours { display: flex; flex-wrap: wrap; gap: .4rem; }
body.ecran-schema .sd-page-tete { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; margin: 0 0 1rem; }
body.ecran-schema .sd-page-titre { margin: 0; font-size: 1.5rem; font-weight: 650; color: var(--marine); letter-spacing: -.01em; line-height: 1.2; }
body.ecran-schema .sd-page-tete .sdp-pastille { height: 2rem; box-sizing: border-box; }
body.ecran-schema .sd-section { margin: 0 0 1rem; }
body.ecran-schema .sd-section .sdp-liste { box-shadow: none; }
body.ecran-schema .sd-avis { height: auto; margin: 0 0 .8rem; padding: .5rem .8rem; border-radius: 12px; line-height: 1.45; align-items: flex-start; }
body.ecran-schema .sd-avis svg { flex: none; margin-top: .15rem; }
body.ecran-schema .sd-bouton-petit { height: 1.9rem; padding: 0 .75rem; font-size: var(--t-petite); }

/* Bibliotheque : la comparaison en carte, les deux menus et le bouton sur une ligne. */
body.ecran-biblio .sd-comparer-carte { margin: 0 0 1rem; }
body.ecran-biblio .sd-comparer-ligne { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem 1rem; }
body.ecran-biblio .sd-comparer-ligne .sdr-champ-x { flex: 1 1 16rem; margin: 0; }
body.ecran-biblio .sd-comparer-ligne select { width: 100%; height: 2.4rem; margin: 0; }
body.ecran-biblio .sd-comparer-vs { align-self: center; margin-top: 1.2rem; font-size: var(--t-libelle); font-weight: 700;
  text-transform: uppercase; color: var(--text-faint); }
body.ecran-biblio .sd-comparer-ligne .bouton { height: 2.4rem; }

/* Comparer : A et B en pastilles de couleur, la difference surlignee en ambre. */
body.ecran-comparer .cmp-tagA, body.ecran-comparer .cmp-tagB { display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem;
  margin-right: .25rem; border-radius: 6px; color: #fff; font-size: .7rem; font-weight: 800; vertical-align: middle; }
body.ecran-comparer .cmp-tagA { background: var(--marine); }
body.ecran-comparer .cmp-tagB { background: var(--vert); }
body.ecran-comparer .sdp-tableau .cmp-diff { background: var(--alerte-fond); color: var(--alerte); font-weight: 650; }
body.ecran-comparer .sdp-tableau .cmp-centre { text-align: center; }
body.ecran-comparer .cmp-classements .cmp-colA { background: color-mix(in srgb, var(--marine) 4%, transparent); }
body.ecran-comparer .cmp-classements .cmp-colB { background: color-mix(in srgb, var(--vert) 6%, transparent); }
body.ecran-comparer .cmp-mvt { display: inline-flex; padding: .1rem .55rem; border-radius: 999px; background: var(--bg-page);
  font-size: var(--t-libelle); font-weight: 650; color: var(--text-muted); white-space: nowrap; }

/* Parametres : le libelle de la grille une fois, l'aide au survol, place pour la barre collante. */
body.ecran-regles .reg-formulaire { padding-bottom: 1rem; }
body.ecran-regles .sd-typo thead th.reg-grille-unite { text-transform: none; letter-spacing: 0; color: var(--text-muted); }
body.ecran-regles .reg-masque { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.ecran-regles .reg-case .sd-typo-seuil input { max-width: 9rem; }
body.ecran-regles .reg-libelle-ligne { display: flex; align-items: center; gap: .35rem; }
body.ecran-regles .reg-info { display: inline-grid; place-items: center; color: var(--text-faint); cursor: help; }
body.ecran-regles .reg-info:hover { color: var(--vert-fonce); }
body.ecran-regles .reg-aide--ligne { margin-left: .5rem; font-weight: 500; }
body.ecran-regles .reg-champ { justify-content: flex-start; }
body.ecran-regles .reg-actions { margin-top: 1rem; }

/* SD - parc, Fermetures : le libelle du filtre se lit en phrase, pas en capitales. */
body.ecran-schema .sdp-filtres-lib { margin-right: .2rem; font-size: var(--t-petite); color: var(--text-muted); }

/* SD - parc, Diagnostic : le decompte en texte discret, l'ordre de tri en pastille neutre. */
body.ecran-schema .sdp-compte { display: inline-flex; align-items: center; height: 2.1rem; padding: 0 .2rem;
  font-size: var(--t-petite); color: var(--text-faint); white-space: nowrap; }
body.ecran-schema .sdp-compte b { margin-right: .25rem; color: var(--marine); font-weight: 700; }
body.ecran-schema .sdp-tri { display: inline-flex; align-items: center; gap: .35rem; height: 1.8rem; padding: 0 .7rem;
  border-radius: 999px; background: var(--bg-page); border: 1px solid var(--border);
  font-size: var(--t-libelle); font-weight: 600; color: var(--text-muted); white-space: nowrap; }
body.ecran-schema .sdp-tri svg { flex: none; color: var(--vert-fonce); }

/* ============================================================
 * SD - restitution par zone de vie : en-tete de la fiche, chiffres
 * cles, onglets et tableau a gauche, carte collante a droite.
 * ============================================================ */
body.ecran-restitution [hidden] { display: none !important; }
body.ecran-restitution .sdf-entete { display: flex; flex-direction: column; gap: .55rem; margin: 0 0 1rem; }
body.ecran-restitution .sdf-retour { display: inline-flex; align-items: center; gap: .3rem; align-self: flex-start;
  height: 1.9rem; padding: 0 .8rem 0 .55rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card);
  color: var(--text-muted); font-size: var(--t-petite); font-weight: 600; text-decoration: none; transition: border-color .15s, color .15s; }
body.ecran-restitution .sdf-retour:hover { border-color: var(--vert); color: var(--vert-fonce); }
body.ecran-restitution .sdf-titre-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; }
body.ecran-restitution .sdf-titre { margin: 0; font-size: 1.5rem; font-weight: 650; color: var(--marine); letter-spacing: -.01em; line-height: 1.2; }
body.ecran-restitution .sdf-titre-ligne .sdp-pastille { height: 2rem; box-sizing: border-box; }
body.ecran-restitution .sdf-titre-ligne .sdp-aide { margin-left: auto; }
body.ecran-restitution .zdv-export { display: inline-flex; align-items: center; gap: .4rem; height: 2rem; margin: 0; padding: 0 .9rem;
  border-radius: 999px; font-size: var(--t-petite); }

body.ecran-restitution .zdv-kpis { display: grid; gap: .7rem; margin: 0 0 1rem;
  grid-template-columns: minmax(12rem, 1.4fr) repeat(4, minmax(8rem, 1fr)); }
@media (max-width: 1100px) { body.ecran-restitution .zdv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body.ecran-restitution .zdv-tuile { display: flex; flex-direction: column; justify-content: center; gap: .15rem; margin: 0;
  padding: .8rem 1rem; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card); box-shadow: var(--ombre-sd); }
body.ecran-restitution .zdv-tuile > span { font-size: var(--t-libelle); font-weight: 650; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-faint); }
body.ecran-restitution .zdv-tuile b { font-size: 1.45rem; font-weight: 700; line-height: 1.1; color: var(--marine); font-variant-numeric: tabular-nums; }
body.ecran-restitution .zdv-tuile small { font-size: var(--t-libelle); color: var(--text-muted); }
/* PAS DE DEGRADE VERT. Un aplat en fondu sur une tuile de chiffre fait
   habillage de tableau de bord : c'est le CHIFFRE qui doit porter, pas son
   fond. La tuile reste blanche comme les autres, un filet vert la designe. */
body.ecran-restitution .zdv-tuile-phare { position: relative; padding-left: 1.3rem; background: var(--bg-card);
  border-color: color-mix(in srgb, var(--vert) 30%, var(--border)); }
body.ecran-restitution .zdv-tuile-phare::before { content: ""; position: absolute; left: .55rem; top: .9rem; bottom: .9rem;
  width: 3px; border-radius: 999px; background: var(--vert-fonce); }
body.ecran-restitution .zdv-tuile-phare b { font-size: 1.9rem; color: var(--vert-fonce); }
body.ecran-restitution .zdv-tuile-phare > span { color: var(--text-faint); }

body.ecran-restitution .zdv-split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
body.ecran-restitution .zdv-gauche { display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
body.ecran-restitution .zdv-tete { margin: 0; }
body.ecran-restitution .zdv-consigne,
body.ecran-restitution .zdv-note { display: flex; align-items: center; gap: .4rem; margin: 0; font-size: var(--t-libelle); color: var(--text-muted); }
body.ecran-restitution .zdv-consigne svg,
body.ecran-restitution .zdv-note svg { flex: none; color: var(--vert-fonce); }
body.ecran-restitution .zdv-note--alerte { padding: .45rem .7rem; border: 1px solid var(--alerte-trait); border-radius: 10px;
  background: var(--alerte-fond); color: var(--alerte); }
body.ecran-restitution .zdv-note--alerte svg { color: var(--alerte); }
body.ecran-restitution .zdv-cadre { overflow-x: auto; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card);
  box-shadow: var(--ombre-sd); }
body.ecran-restitution .zdv-tableau { width: 100%; margin: 0; }
body.ecran-restitution .zdv-tableau th.num,
body.ecran-restitution .zdv-tableau td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
body.ecran-restitution .zdv-tableau tbody tr { cursor: pointer; }
body.ecran-restitution .zdv-tableau tbody tr:focus-visible { outline: 2px solid var(--vert); outline-offset: -2px; }
body.ecran-restitution .zdv-tableau .sdp-nom { display: block; color: var(--marine); font-weight: 650; }
/* LE TABLEAU REPREND LA CARTE. Un filet de la couleur de la priorite tient
   lieu de sixieme colonne, les en-tetes s'effacent, et la ligne designee sur
   la carte se reconnait au premier coup d'oeil. */
body.ecran-restitution .zdv-tableau thead th { font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); font-weight: 650; }
body.ecran-restitution .zdv-tableau tbody td { padding-top: .5rem; padding-bottom: .5rem; }
body.ecran-restitution .zdv-tableau tbody tr > td:first-child { position: relative; }
body.ecran-restitution .zdv-tableau tbody tr > td:first-child::before { content: ""; position: absolute; left: 0; top: .35rem; bottom: .35rem;
  width: 3px; border-radius: 999px; background: transparent; }
body.ecran-restitution .zdv-tableau tbody tr[data-priorite="P1"] > td:first-child::before { background: var(--vert-fonce); }
body.ecran-restitution .zdv-tableau tbody tr[data-priorite="P2"] > td:first-child::before { background: var(--vert); }
body.ecran-restitution .zdv-tableau tbody tr[data-priorite="P3"] > td:first-child::before { background: #a8d18b; }
body.ecran-restitution .zdv-tableau tbody tr:hover > td { background: var(--bg-survol); }
body.ecran-restitution .zdv-tableau tbody tr.ligne-situee > td { background: var(--vert-pale); }
body.ecran-restitution .zdv-ca { color: var(--vert-fonce); font-weight: 750; }
body.ecran-restitution .zdv-sous { color: var(--text-faint); }
body.ecran-restitution .zdv-sous { display: block; margin-top: .1rem; font-size: var(--t-libelle); color: var(--text-faint); }
body.ecran-restitution .zdv-neuve { font-style: normal; font-weight: 650; color: var(--vert-fonce); }
body.ecran-restitution .zdv-a-relancer { font-style: normal; font-weight: 650; color: var(--alerte); }
body.ecran-restitution .zdv-ca { font-weight: 700; color: var(--marine); }
body.ecran-restitution .zdv-trajet-texte { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .35rem; }
body.ecran-restitution .zdv-trajet-texte .sdp-nom { display: inline; }
body.ecran-restitution .zdv-trajet-texte svg { flex: none; color: var(--text-faint); }

/* Les priorites : marine, vert, ambre, comme les zones de la carte. */
body.ecran-restitution .zdv-prio { display: inline-grid; place-items: center; min-width: 1.9rem; height: 1.45rem; padding: 0 .35rem;
  box-sizing: border-box; border-radius: 999px; font-size: var(--t-libelle); font-weight: 800; letter-spacing: .02em;
  color: #fff; background: var(--text-faint); }
/* UN CLASSEMENT SE DIT SUR UNE SEULE ECHELLE. Marine, vert, ambre : trois
   familles de couleurs pour un rang, et l'oeil y lit trois natures plutot
   qu'un ordre. Meme rampe verte que la page Valider, du plus soutenu au plus
   clair, pour qu'on passe d'un ecran a l'autre sans reapprendre. */
body.ecran-restitution .zdv-prio--p1 { background: var(--vert-fonce); }
body.ecran-restitution .zdv-prio--p2 { background: var(--vert); }
body.ecran-restitution .zdv-prio--p3 { background: #a8d18b; color: var(--vert-fonce); }
body.ecran-restitution .zdv-prio-carte { border: 2px solid #fff; box-shadow: 0 2px 6px rgba(22, 35, 63, .35); cursor: pointer;
  transition: scale .15s ease, box-shadow .15s ease; }
/* `scale` et non `transform` : MapLibre positionne le cadre par un transform en ligne. */
body.ecran-restitution :is(.zdv-prio-carte, .zdv-repere).vise { scale: 1.3; box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(47, 107, 30, .45), 0 2px 8px rgba(22, 35, 63, .35); }
body.ecran-restitution .zdv-ancre { position: relative; display: grid; place-items: center; }

body.ecran-restitution .zdv-choix { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .45rem; }
body.ecran-restitution .zdv-choix-titre { font-size: var(--t-libelle); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); }
body.ecran-restitution .zdv-choix-carte { display: inline-flex; align-items: center; gap: .35rem; height: 1.9rem; margin: 0; padding: 0 .75rem;
  border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); color: var(--text-muted);
  font-size: var(--t-libelle); font-weight: 650; cursor: pointer; }
body.ecran-restitution button.zdv-choix-carte:hover { border-color: var(--vert); color: var(--vert-fonce); }
body.ecran-restitution .zdv-choix-carte.on { border-color: var(--vert); background: var(--vert-pale); color: var(--vert-fonce); cursor: default; }
body.ecran-restitution .zdv-choix-aide { margin-left: auto; font-size: var(--t-libelle); color: var(--text-faint); }

/* La carte : titre et bascules en haut, detail de zone dessous, legende en bas a droite. */
/* LE NOM DE LA VUE, PAS UNE PASTILLE. En aplat vert sur la carte, il se
   lisait comme un bouton et mangeait le coin ; il dit seulement ce qu'on
   regarde, donc il s'ecrit comme un titre discret. */
body.ecran-restitution .zdv-carte-titre { display: inline-flex; align-items: center; height: 1.8rem; max-width: 22rem; padding: 0 .7rem;
  box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 10px;
  background: color-mix(in srgb, var(--bg-card) 90%, transparent); color: var(--marine);
  font-size: var(--t-libelle); font-weight: 700; box-shadow: 0 1px 6px -3px rgba(22, 35, 63, .3); }
body.ecran-restitution .zdv-carte .sdp-carte-outils { flex-wrap: wrap; }
body.ecran-restitution .zdv-carte .sdp-bascule b { color: var(--marine); }
body.ecran-restitution #zdv-legende { left: auto; right: .7rem; bottom: 1.9rem; top: auto; max-width: 16rem; }
body.ecran-restitution .zdv-detail { width: 17rem; padding: .7rem .8rem; border: 1px solid var(--border); border-radius: 12px;
  background: color-mix(in srgb, var(--bg-card) 95%, transparent); backdrop-filter: blur(4px);
  box-shadow: 0 10px 26px -12px rgba(22, 35, 63, .4); font-size: var(--t-libelle); }
body.ecran-restitution .zdv-detail-tete { display: flex; align-items: center; gap: .45rem; margin-bottom: .45rem; }
body.ecran-restitution .zdv-detail-tete b { color: var(--marine); font-size: var(--t-petite); line-height: 1.25; }
body.ecran-restitution .zdv-detail dl { display: grid; grid-template-columns: auto 1fr; gap: .2rem .6rem; margin: 0; }
body.ecran-restitution .zdv-detail dt { color: var(--text-muted); }
body.ecran-restitution .zdv-detail dd { margin: 0; text-align: right; font-weight: 700; color: var(--marine); font-variant-numeric: tabular-nums; }
body.ecran-restitution .zdv-detail-sites { max-height: 8.5rem; overflow-y: auto; margin: .5rem 0 0; padding: .45rem 0 0 1.1rem;
  border-top: 1px solid var(--trait-sd); }
body.ecran-restitution .zdv-detail-sites:empty { display: none; }
body.ecran-restitution .zdv-detail-sites li { padding: .1rem 0; }
body.ecran-restitution .zdv-detail-sites li::marker { color: var(--vert); font-weight: 700; }
body.ecran-restitution .zdv-detail-sites li span { display: inline-block; max-width: 10.5rem; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; vertical-align: bottom; }
body.ecran-restitution .zdv-detail-sites li b { float: right; color: var(--marine); }
body.ecran-restitution .zdv-detail .zdv-note { margin-top: .5rem; }

/* Reperes : le magasin ferme en croix rouge, le nouveau site en rond vert. */
body.ecran-restitution .zdv-repere { display: grid; place-items: center; box-sizing: border-box; border: 2px solid #fff; border-radius: 999px;
  box-shadow: 0 2px 6px rgba(22, 35, 63, .4); transition: scale .15s ease, box-shadow .15s ease; }
body.ecran-restitution .zdv-repere--ferme { width: 1.35rem; height: 1.35rem; background: var(--danger); color: #fff; font-size: .7rem; font-weight: 800; }
body.ecran-restitution .zdv-repere--nouveau { width: 1.1rem; height: 1.1rem; background: var(--vert); }
body.ecran-restitution .zdv-repere-lib { position: absolute; top: 50%; translate: 0 -50%; padding: .2rem .5rem; border-radius: 8px;
  background: var(--bg-card); color: var(--marine); font-size: var(--t-libelle); font-weight: 700; white-space: nowrap;
  box-shadow: 0 2px 8px -2px rgba(22, 35, 63, .35); pointer-events: none; }
body.ecran-restitution .zdv-repere-lib--gauche { right: calc(100% + .45rem); }
body.ecran-restitution .zdv-repere-lib--droite { left: calc(100% + .45rem); }
body.ecran-restitution .zdv-pt { display: inline-grid; place-items: center; width: .8rem; height: .8rem; box-sizing: border-box;
  border: 1.5px solid #fff; border-radius: 999px; box-shadow: 0 1px 3px rgba(22, 35, 63, .35); overflow: hidden; }
body.ecran-restitution .zdv-pt img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
body.ecran-restitution .zdv-carte .zdv-pt:has(img) { width: 1.3rem; height: 1.3rem; }
body.ecran-restitution .zdv-pt--site { width: 1.1rem; height: 1.1rem; background: var(--marine); border-width: 2px; }
body.ecran-restitution .zdv-pt--gss { background: var(--danger); }
body.ecran-restitution .zdv-pt--gsa { background: var(--ambre); }
body.ecran-restitution .sdp-bascule .zdv-pt { box-shadow: none; }
body.ecran-restitution .sd-restitution-lien { margin: .8rem 0; }
body.ecran-schema .sd-restitution-lien { margin: .8rem 0; }

/* ============================================================
 * SD - gestes apres decision : retenir en lot, abandonner une
 * implantation validee, retirer un calcul de la bibliotheque.
 * ============================================================ */
body.ecran-schema .sdp-lot { display: inline-flex; align-items: center; gap: .35rem; height: 2.1rem; margin: 0; padding: 0 .3rem 0 .8rem;
  box-sizing: border-box; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card);
  font-size: var(--t-libelle); font-weight: 600; color: var(--text-muted); }
body.ecran-schema .sdp-lot label { display: inline-flex; align-items: center; gap: .35rem; margin: 0; }
body.ecran-schema .sdp-lot label svg { flex: none; color: var(--vert-fonce); }
body.ecran-schema .sdp-lot input[type="number"] { width: 4rem; height: 1.55rem; min-height: 0; margin: 0; padding: 0 .35rem; box-sizing: border-box;
  border: 1px solid var(--border-champ); border-radius: 8px; box-shadow: none; font: inherit; line-height: 1; color: var(--marine); text-align: right; }
body.ecran-schema .sdp-lot .sdp-lot-ok { width: 1.6rem; height: 1.6rem; box-shadow: none; color: var(--vert-fonce); }
body.ecran-schema .sdp-lot .sdp-lot-ok:hover { background: var(--vert); border-color: var(--vert); color: #fff; }
body.ecran-schema .sd-abandon h3 { display: flex; align-items: center; gap: .45rem; }
body.ecran-schema .sd-abandon h3 svg { color: var(--danger); }
body.ecran-schema .sd-abandon .onglet-lien { margin-left: .3rem; }
body.ecran-schema .sd-abandon-form { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: .6rem 0 0; }
body.ecran-schema .sd-abandon-form select,
body.ecran-schema .sd-abandon-form input[type="text"] { height: 2.1rem; box-sizing: border-box; margin: 0; padding: 0 .6rem;
  border: 1px solid var(--border-champ); border-radius: 10px; background: var(--bg-card); font: inherit; font-size: var(--t-petite); }
body.ecran-schema .sd-abandon-form select { max-width: 18rem; }
body.ecran-schema .sd-abandon-form input[type="text"] { flex: 1 1 16rem; }
body.ecran-schema .sd-abandon-form .bouton { height: 2.1rem; margin: 0; }
body.ecran-schema .sd-abandonnees { margin: .7rem 0 0; padding: .5rem 0 0 1.1rem; border-top: 1px solid var(--trait-sd);
  font-size: var(--t-petite); }
body.ecran-schema .sd-abandonnees li + li { margin-top: .25rem; }
body.ecran-schema .sd-abandonnees li::marker { color: var(--danger); }
body.ecran-schema .sd-biblio-actions { display: inline-flex; align-items: center; gap: .35rem; }
body.ecran-schema .sd-biblio-actions form { margin: 0; }
body.ecran-schema .sd-biblio-supprimer { width: 2rem; height: 2rem; box-shadow: none; color: var(--text-faint); }
body.ecran-schema .sd-biblio-supprimer:hover { border-color: var(--danger); background: var(--danger-fond); color: var(--danger); }

/* ============================================================
 * SD - parametres : meme en-tete que les autres ecrans du SD,
 * regles a gauche en tuiles blanches, validation collante a droite.
 * ============================================================ */
body.ecran-regles .sdf-entete { display: flex; flex-direction: column; gap: .55rem; margin: 0 0 1rem; }
body.ecran-regles .sdf-entete .sdf-retour { align-self: flex-start; margin: 0; }
body.ecran-regles .sdf-titre-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; }
body.ecran-regles .sdf-titre { margin: 0; font-size: 1.5rem; font-weight: 650; color: var(--marine); letter-spacing: -.01em; line-height: 1.2; }
body.ecran-regles .sdf-titre-ligne .sdp-pastille { height: 2rem; box-sizing: border-box; }
body.ecran-regles .sdf-titre-ligne .sdp-aide { margin-left: auto; }

/* L'ecran voisin, en pastille : Parametres <-> Regler le calcul. */
body.ecran-schema .sd-lien-voisin { display: inline-flex; align-items: center; gap: .4rem; height: 2rem; padding: 0 .7rem 0 .8rem;
  box-sizing: border-box; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card);
  color: var(--marine); font-size: var(--t-petite); font-weight: 650; text-decoration: none; white-space: nowrap;
  transition: border-color .15s, color .15s; }
body.ecran-schema .sd-lien-voisin svg { flex: none; color: var(--vert-fonce); }
body.ecran-schema .sd-lien-voisin:hover { border-color: var(--vert); color: var(--vert-fonce); }
body.ecran-schema .sdr-tete .sd-lien-voisin { margin-left: auto; }

body.ecran-regles .regp-lecture { height: auto; margin: 0 0 1rem; padding: .45rem .8rem; }
body.ecran-regles .regp-page { display: grid; gap: 1rem; align-items: start; grid-template-columns: minmax(0, 1fr) 20rem; margin: 0 0 1.5rem; }
@media (max-width: 1200px) { body.ecran-regles .regp-page { grid-template-columns: minmax(0, 1fr); } }
body.ecran-regles .regp-principal { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
body.ecran-regles .regp-cote { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 1rem; }
@media (max-width: 1200px) { body.ecran-regles .regp-cote { position: static; } }

body.ecran-regles .regp-carte { margin: 0; padding: 1rem 1.15rem; border: 1px solid var(--border); border-radius: 16px;
  background: var(--bg-card); box-shadow: var(--ombre-sd); }
body.ecran-regles .regp-tete { display: flex; flex-direction: column; gap: .2rem; margin: 0 0 .85rem; }
body.ecran-regles .regp-carte h2 { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: var(--t-corps); font-weight: 650; color: var(--marine); }
body.ecran-regles .regp-carte h2 svg { flex: none; color: var(--vert-fonce); }
body.ecran-regles .regp-tete p { margin: 0 0 0 1.55rem; font-size: var(--t-petite); color: var(--text-faint); }
body.ecran-regles .regp-note { margin: 0; font-size: var(--t-petite); font-weight: 400; color: var(--text-muted); line-height: 1.45; }
body.ecran-regles .regp-note b { color: var(--marine); }

/* Un champ : le nombre et son unite dans le meme cadre. */
body.ecran-regles .regp-champ { display: inline-flex; align-items: stretch; width: 100%; max-width: 13rem; height: 2.25rem; box-sizing: border-box;
  overflow: hidden; border: 1px solid var(--border-champ); border-radius: 10px; background: var(--bg-card); transition: border-color .15s, box-shadow .15s; }
body.ecran-regles .regp-champ:hover { border-color: color-mix(in srgb, var(--vert) 45%, var(--border-champ)); }
body.ecran-regles .regp-champ:focus-within { border-color: var(--vert); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vert) 16%, transparent); }
body.ecran-regles .regp-champ input[type="number"] { flex: 1; min-width: 0; width: auto; height: 100%; margin: 0; padding: 0 .65rem; box-sizing: border-box;
  border: 0; border-radius: 0; outline: none; box-shadow: none; background: transparent; text-align: right;
  font: inherit; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--marine); }
body.ecran-regles .regp-champ input::placeholder { color: var(--text-faint); font-weight: 400; }
body.ecran-regles .regp-suffixe { display: grid; place-items: center; min-width: 2.6rem; padding: 0 .55rem; border-left: 1px solid var(--trait-sd);
  background: var(--bg-page); font-size: var(--t-libelle); font-weight: 600; color: var(--text-faint); white-space: nowrap; }
body.ecran-regles .regp-champ:has(input:disabled) { background: var(--bg-page); }

/* La grille des CA minimum : les colonnes remplissent la carte. */
body.ecran-regles .regp-defile { overflow-x: auto; }
body.ecran-regles .regp-grille { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 0; border: 0; box-shadow: none; background: none; }
body.ecran-regles .regp-grille thead, body.ecran-regles .regp-grille tbody { border: 0; background: none; }
body.ecran-regles .regp-grille th, body.ecran-regles .regp-grille td { padding: .5rem 1rem .5rem 0; border: 0; border-bottom: 1px solid var(--trait-sd);
  background: none; text-align: left; vertical-align: middle; }
body.ecran-regles .regp-grille tbody tr:last-child > * { border-bottom: 0; }
body.ecran-regles .regp-grille thead th { padding-top: 0; font-size: var(--t-libelle); font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-faint); }
body.ecran-regles .regp-grille thead th:first-child { width: 12rem; text-transform: none; letter-spacing: 0; color: var(--text-muted); }
body.ecran-regles .regp-grille tbody th { font-size: var(--t-petite); font-weight: 650; color: var(--marine); }
body.ecran-regles .regp-repere { display: block; margin-top: .2rem; font-size: var(--t-libelle); color: var(--text-faint); }
body.ecran-regles .regp-repere b { color: var(--text-muted); }
body.ecran-regles .regp-absent { display: inline-flex; align-items: center; justify-content: center; width: 100%; max-width: 13rem; height: 2.25rem;
  border-radius: 10px; background: var(--bg-page); color: var(--text-faint); cursor: help; }

/* Les regles : une tuile blanche chacune, le libelle au-dessus du champ. */
body.ecran-regles .regp-tuiles { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
body.ecran-regles .regp-tuile { display: flex; flex-direction: column; gap: .5rem; padding: .75rem .85rem; border: 1px solid var(--border);
  border-radius: 12px; background: var(--bg-card); transition: border-color .15s, box-shadow .15s; }
body.ecran-regles .regp-tuile:hover { border-color: color-mix(in srgb, var(--vert) 35%, var(--border)); }
body.ecran-regles .regp-tuile:focus-within { border-color: var(--vert); box-shadow: 0 6px 18px -12px rgba(22, 35, 63, .35); }
body.ecran-regles .regp-tuile-tete { display: flex; align-items: flex-start; gap: .35rem; min-height: 2.4em; }
body.ecran-regles .regp-tuile-tete label { flex: 1; margin: 0; font-size: var(--t-petite); font-weight: 650; line-height: 1.3; color: var(--marine); }
body.ecran-regles .regp-info { flex: none; display: inline-grid; place-items: center; margin-top: .05rem; color: var(--text-faint); cursor: help; }
body.ecran-regles .regp-info:hover { color: var(--vert-fonce); }
body.ecran-regles .regp-tuile .regp-champ { max-width: none; }
body.ecran-regles .regp-interrupteur { display: inline-flex; align-items: center; gap: .35rem; margin: 0; font-size: var(--t-libelle); color: var(--text-muted); cursor: pointer; }
body.ecran-regles .regp-interrupteur input { margin: 0; accent-color: var(--vert); }
body.ecran-regles .regp-formats { display: flex; flex-direction: column; gap: .5rem; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--trait-sd); }
body.ecran-regles .regp-formats-titre { font-size: var(--t-petite); font-weight: 650; color: var(--marine); }
body.ecran-regles .regp-formats-titre .regp-note { margin-left: .35rem; color: var(--text-faint); }
body.ecran-regles .regp-puces { display: flex; flex-wrap: wrap; gap: .4rem; }

/* Le cote : valider, puis ce qui reste au calcul. */
body.ecran-regles .regp-valider { display: flex; flex-direction: column; gap: .7rem; border-color: color-mix(in srgb, var(--vert) 35%, var(--border));
  background: var(--bg-card); box-shadow: inset 0 3px 0 var(--vert-fonce); }
body.ecran-regles .regp-bouton { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; width: 100%; height: 2.5rem; margin: 0; }
body.ecran-regles .regp-reste { display: flex; flex-direction: column; gap: .7rem; }
body.ecran-regles .regp-reste ul { margin: 0; padding: 0; list-style: none; }
body.ecran-regles .regp-reste li { display: flex; flex-direction: column; gap: .1rem; padding: .5rem 0; border-bottom: 1px solid var(--trait-sd); }
body.ecran-regles .regp-reste li:first-child { padding-top: 0; }
body.ecran-regles .regp-reste li b { font-size: var(--t-petite); font-weight: 650; color: var(--marine); }
body.ecran-regles .regp-reste li span { font-size: var(--t-libelle); color: var(--text-faint); line-height: 1.4; }
body.ecran-regles .regp-reste .sd-lien-voisin { align-self: flex-start; }
body.ecran-regles .regp-tete p { max-width: none; }
body.ecran-regles .regp-tuile .regp-champ { margin-top: auto; }

/* SD - restitution : sans bleu, tableau et carte alignes. */
body.ecran-restitution .zdv-bloc { display: flex; flex-direction: column; gap: .6rem; }
body.ecran-restitution .zdv-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; }
body.ecran-restitution .zdv-split { align-items: stretch; }
/* LA CARTE NE SUIT PAS LA HAUTEUR DU TABLEAU. Etiree sur vingt lignes, elle
   devenait un couloir de six cents pixels de large sur mille deux cents de
   haut : cadrer la France dedans montrait l'Ecosse et l'Espagne, et la France
   au milieu. Hauteur bornee, et elle reste en vue pendant qu'on descend. */
body.ecran-restitution .zdv-carte { position: sticky; top: 1rem; height: min(40rem, 76vh); min-height: 26rem; max-height: none; }
@media (max-width: 1200px) { body.ecran-restitution .zdv-carte { position: relative; top: 0; height: 30rem; min-height: 0; } }
body.ecran-restitution .zdv-prio--p1 { background: var(--vert-fonce); }
body.ecran-restitution .zdv-prio--p2 { background: var(--vert); }
body.ecran-restitution .zdv-prio--p3 { background: #a8d18b; color: var(--vert-fonce); }
/* La mention des zones d'exclusivite, posee au bas de la carte : elle dit
   pourquoi le plan laisse des trous. */
/* Decalee vers la droite : la pastille des fonds occupe le coin. */
body.ecran-restitution .zdv-exclu-note { position: absolute; left: 4.6rem; bottom: .9rem; z-index: 2;
  display: inline-flex; align-items: center; gap: .45rem; margin: 0; padding: .3rem .7rem; border-radius: 999px;
  background: color-mix(in srgb, var(--bg-card) 92%, transparent); color: var(--text-muted);
  font-size: var(--t-libelle); box-shadow: 0 2px 8px -4px rgba(22, 35, 63, .35); }
body.ecran-restitution .zdv-outils { display: flex; align-items: center; gap: .6rem; margin: 0 0 .55rem; }
body.ecran-restitution .zdv-chercher { flex: 1; min-width: 0; padding: .4rem .7rem; border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-card); color: var(--text); font: inherit; font-size: var(--t-libelle); }
body.ecran-restitution .zdv-chercher:focus { outline: none; border-color: var(--vert); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vert) 18%, transparent); }
body.ecran-restitution .zdv-compte-filtre { color: var(--text-faint); font-size: var(--t-libelle); white-space: nowrap; }
body.ecran-restitution .zdv-triable { cursor: pointer; user-select: none; }
body.ecran-restitution .zdv-triable:hover { color: var(--marine); }
body.ecran-restitution .zdv-triable[aria-sort="ascending"]::after { content: " \2191"; color: var(--vert-fonce); }
body.ecran-restitution .zdv-triable[aria-sort="descending"]::after { content: " \2193"; color: var(--vert-fonce); }
body.ecran-restitution .zdv-tableau tr[hidden] { display: none; }
/* MOITIE TABLEAU, MOITIE CARTE. La liste avancait sans fin et la carte
   suivait ; chacune tient maintenant sa moitie, et on avance par dix. */
body.ecran-restitution .zdv-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
body.ecran-restitution .zdv-filtres { display: inline-flex; gap: .2rem; padding: .15rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); }
body.ecran-restitution .zdv-filtres button { padding: .22rem .6rem; border: 0; border-radius: 999px; background: transparent;
  color: var(--text-muted); font: inherit; font-size: var(--t-libelle); font-weight: 650; cursor: pointer; }
body.ecran-restitution .zdv-filtres button:hover { color: var(--text); }
body.ecran-restitution .zdv-filtres button.on { background: var(--vert-fonce); color: #fff; }
body.ecran-restitution .zdv-pages { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: .55rem 0 0; }
body.ecran-restitution .zdv-pages button { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .75rem;
  border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); color: var(--text-muted);
  font: inherit; font-size: var(--t-libelle); font-weight: 600; cursor: pointer; }
body.ecran-restitution .zdv-pages button:hover:not(:disabled) { color: var(--text); border-color: var(--marine); }
body.ecran-restitution .zdv-pages button:disabled { opacity: .45; cursor: default; }
body.ecran-restitution .zdv-pages-etat { color: var(--text-faint); font-size: var(--t-libelle); font-variant-numeric: tabular-nums; }
body.ecran-restitution .zdv-pages[hidden] { display: none; }
body.ecran-restitution .zdv-exclu-pastille { flex: none; width: .95rem; height: .8rem; border-radius: 3px;
  border: 1.5px dashed var(--marine); background: color-mix(in srgb, var(--marine) 7%, transparent); }
body.ecran-restitution .zdv-pt--site { background: var(--vert-fonce); }
body.ecran-restitution .zdv-site-point { display: block; width: .55rem; height: .55rem; box-sizing: border-box; border: 1.5px solid #fff;
  border-radius: 999px; background: #1f2a1c; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
body.ecran-restitution .zdv-prio-carte { pointer-events: auto; }
body.ecran-schema .sdr-tete--valider { justify-content: flex-start; }
body.ecran-schema .sdr-tete--valider .sd-lien-voisin { margin-left: 0; }

/* ============================================================
 * SD - parcours en trois etapes : prochaine action, vue
 * d'ensemble, bascule Ouvertures | Parc, menu Outils.
 * ============================================================ */
body.ecran-schema .sd3-suivant { display: flex; align-items: center; gap: .9rem; margin: 0 0 1rem; padding: 1rem 1.2rem;
  border: 1px solid color-mix(in srgb, var(--vert) 40%, var(--border)); border-radius: 16px;
  background: linear-gradient(120deg, var(--vert-pale), var(--bg-card) 65%); box-shadow: var(--ombre-sd); }
body.ecran-schema .sd3-suivant-picto { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 12px;
  background: var(--vert); color: #fff; }
body.ecran-schema .sd3-suivant-texte { flex: 1; display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
body.ecran-schema .sd3-suivant-lib { font-size: var(--t-libelle); font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--vert-fonce); }
body.ecran-schema .sd3-suivant-texte b { font-size: 1.15rem; font-weight: 650; color: var(--marine); line-height: 1.25; }
body.ecran-schema .sd3-suivant-texte > span:last-child:not(.sd3-suivant-lib) { font-size: var(--t-petite); color: var(--text-muted); }
body.ecran-schema .sd3-suivant-bouton { flex: none; display: inline-flex; align-items: center; gap: .35rem; height: 2.4rem; margin: 0; padding: 0 1.1rem; }
body.ecran-schema .sd3-suivant--echec { border-color: var(--danger-trait); background: linear-gradient(120deg, var(--danger-fond), var(--bg-card) 65%); }
body.ecran-schema .sd3-suivant--echec .sd3-suivant-picto { background: var(--danger); }
body.ecran-schema .sd3-suivant--echec .sd3-suivant-lib { color: var(--danger); }
body.ecran-schema .sd3-suivant--calcul .sd3-suivant-picto { background: var(--ambre); }
body.ecran-schema .sd3-suivant--compact { gap: .7rem; margin: 0 0 .8rem; padding: .45rem .5rem .45rem .7rem; border-radius: 12px; box-shadow: none; }
body.ecran-schema .sd3-suivant--compact .sd3-suivant-picto { width: 1.9rem; height: 1.9rem; border-radius: 9px; }
body.ecran-schema .sd3-suivant--compact .sd3-suivant-texte { flex-direction: row; align-items: baseline; gap: .6rem; }
body.ecran-schema .sd3-suivant--compact .sd3-suivant-texte b { font-size: var(--t-corps); }
body.ecran-schema .sd3-suivant--compact .sd3-suivant-bouton { height: 2rem; padding: 0 .85rem; }

body.ecran-schema .sd3-etapes { display: grid; gap: 1rem; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 0 1.5rem; }
@media (max-width: 1100px) { body.ecran-schema .sd3-etapes { grid-template-columns: minmax(0, 1fr); } }
body.ecran-schema .sd3-etape { display: flex; flex-direction: column; gap: .7rem; padding: 1rem 1.15rem; border: 1px solid var(--border);
  border-radius: 16px; background: var(--bg-card); box-shadow: var(--ombre-sd); }
body.ecran-schema .sd3-etape--courante { border-color: var(--vert); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vert) 14%, transparent), var(--ombre-sd); }
body.ecran-schema .sd3-etape--fermee { opacity: .7; }
body.ecran-schema .sd3-etape-tete { display: flex; align-items: center; gap: .55rem; }
body.ecran-schema .sd3-etape-tete h3 { margin: 0; font-size: 1.1rem; font-weight: 650; color: var(--marine); }
body.ecran-schema .sd3-num { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 999px; background: var(--vert-pale);
  color: var(--vert-fonce); font-weight: 800; font-size: var(--t-petite); }
body.ecran-schema .sd3-etape--faite .sd3-num { background: var(--vert); color: #fff; }
body.ecran-schema .sd3-etat { margin-left: auto; display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .55rem; border-radius: 999px;
  font-size: var(--t-libelle); font-weight: 650; }
body.ecran-schema .sd3-etat--ok { background: var(--vert-pale); color: var(--vert-fonce); }
body.ecran-schema .sd3-quoi { margin: 0; font-size: var(--t-petite); color: var(--text-muted); }
body.ecran-schema .sd3-faits { display: flex; flex-direction: column; margin: 0; }
body.ecran-schema .sd3-faits > div { display: flex; justify-content: space-between; gap: .8rem; padding: .4rem 0; border-top: 1px solid var(--trait-sd); }
body.ecran-schema .sd3-faits dt { font-size: var(--t-petite); color: var(--text-muted); }
body.ecran-schema .sd3-faits dd { margin: 0; font-size: var(--t-petite); font-weight: 650; color: var(--marine); text-align: right; font-variant-numeric: tabular-nums; }
body.ecran-schema .sd3-a-faire { color: var(--alerte); }
body.ecran-schema .sd3-etape-bouton { align-self: flex-start; display: inline-flex; align-items: center; gap: .3rem; margin: auto 0 0; }

/* Decider : la bascule Ouvertures | Parc existant. */
body.ecran-schema .sd3-bascule { display: inline-flex; gap: 2px; margin: 0 0 .8rem; padding: 3px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-card); }
body.ecran-schema .sd3-bascule button { display: inline-flex; align-items: center; gap: .4rem; height: 2.1rem; margin: 0; padding: 0 1rem; border: 0;
  border-radius: 999px; background: none; color: var(--text-muted); font-size: var(--t-petite); font-weight: 650; cursor: pointer; }
body.ecran-schema .sd3-bascule button:hover { color: var(--marine); }
body.ecran-schema .sd3-bascule button.on { background: var(--vert); color: #fff; }
body.ecran-schema .sd3-bascule .cpt { display: inline-grid; place-items: center; min-width: 1.3rem; height: 1.3rem; padding: 0 .3rem; border-radius: 999px;
  background: var(--alerte-fond); color: var(--alerte); font-size: var(--t-libelle); font-weight: 750; }
body.ecran-schema .sd3-bascule button.on .cpt { background: rgba(255, 255, 255, .25); color: #fff; }

/* Le menu Outils. */
body.ecran-schema .sd3-outils { position: relative; margin-left: auto; }
body.ecran-schema .sd3-outils > summary { list-style: none; display: inline-flex; align-items: center; gap: .35rem; height: 2.05rem; padding: 0 .75rem;
  border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); color: var(--marine); font-size: var(--t-petite);
  font-weight: 650; cursor: pointer; white-space: nowrap; }
body.ecran-schema .sd3-outils > summary::-webkit-details-marker { display: none; }
body.ecran-schema .sd3-outils > summary:hover, body.ecran-schema .sd3-outils[open] > summary { border-color: var(--vert); color: var(--vert-fonce); }
body.ecran-schema .sd3-outils-menu { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 30; display: flex; flex-direction: column;
  min-width: 18rem; padding: .35rem; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card);
  box-shadow: 0 16px 36px -14px rgba(22, 35, 63, .4); }
body.ecran-schema .sd3-outils-menu a { display: flex; align-items: flex-start; gap: .6rem; padding: .55rem .65rem; border-radius: 10px; color: var(--marine); text-decoration: none; }
body.ecran-schema .sd3-outils-menu a:hover { background: var(--vert-pale); }
body.ecran-schema .sd3-outils-menu a svg { flex: none; margin-top: .1rem; color: var(--vert-fonce); }
body.ecran-schema .sd3-outils-menu b { display: block; font-size: var(--t-petite); font-weight: 650; }
body.ecran-schema .sd3-outils-menu small { display: block; font-size: var(--t-libelle); color: var(--text-faint); }

/* ============================================================
 * SD - pages allegees : outils de liste sur leur ligne, ratios
 * sous l'emplacement, blocs secondaires replies, rappel en ligne.
 * ============================================================ */
body.ecran-schema .sd3-barre-liste { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .6rem; margin: -.2rem 0 .8rem; }
body.ecran-schema .sd3-barre-liste:empty { display: none; }
body.ecran-schema .sd3-ratios { display: flex; flex-wrap: wrap; gap: .1rem .8rem; margin-top: .15rem; font-size: var(--t-libelle); color: var(--text-faint); }
body.ecran-schema .sd3-ratios b { font-weight: 650; color: var(--text-muted); font-variant-numeric: tabular-nums; }

body.ecran-schema .sd3-voir-aussi { padding: 0; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card); }
body.ecran-schema .sd3-voir-aussi > summary { list-style: none; display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; cursor: pointer;
  font-size: var(--t-petite); color: var(--text-muted); }
body.ecran-schema .sd3-voir-aussi > summary::-webkit-details-marker { display: none; }
body.ecran-schema .sd3-voir-aussi > summary b { color: var(--marine); font-weight: 650; }
body.ecran-schema .sd3-voir-aussi > summary svg { flex: none; color: var(--vert-fonce); transition: rotate .2s ease; rotate: -90deg; }
body.ecran-schema .sd3-voir-aussi[open] > summary svg { rotate: 0deg; }
body.ecran-schema .sd3-voir-aussi[open] > summary { border-bottom: 1px solid var(--trait-sd); }
body.ecran-schema .sd3-voir-aussi > :not(summary) { margin-left: 1rem; margin-right: 1rem; }
body.ecran-schema .sd3-voir-aussi > :last-child { margin-bottom: 1rem; }

body.ecran-schema .sd3-rappel { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin: .2rem 0 1rem; font-size: var(--t-petite); color: var(--text-muted); }
body.ecran-schema .sd3-rappel b { color: var(--marine); }
body.ecran-schema .sd3-replie > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: .6rem; cursor: pointer; }
body.ecran-schema .sd3-replie > summary::-webkit-details-marker { display: none; }
body.ecran-schema .sd3-replie > summary h3 { margin: 0; }
body.ecran-schema .sd3-replie > summary > svg { flex: none; color: var(--text-faint); transition: rotate .2s ease; }
body.ecran-schema .sd3-replie[open] > summary > svg { rotate: 180deg; }
body.ecran-schema .sd3-replie[open] > summary { margin-bottom: .7rem; }

/* Preparer : un seuil non regle ne s'affiche pas dans la grille des territoires. */
body.ecran-schema .sd-typo-seuil--lu.sd-typo-seuil--vide { display: none; }

/* ============================================================
 * SD - le parcours en deux temps : mes schemas, parametrer,
 * mon reseau, mes ouvertures, valider. Prefixe pc-.
 * ============================================================ */
body.ecran-parcours .pc-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin: 0 0 1rem; }
body.ecran-parcours .pc-tete-nom { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .8rem; }
body.ecran-parcours .pc-tete .sd-page-titre { margin: 0; }
body.ecran-parcours .pc-sous-titre { margin: .2rem 0 0; color: var(--text-muted); font-size: var(--t-corps); }
body.ecran-parcours .pc-discret { color: var(--text-faint); font-size: var(--t-petite); }
body.ecran-parcours small.pc-discret, body.ecran-parcours td small { display: block; }
body.ecran-parcours .pc-aide-modale { margin: 0 0 .7rem; color: var(--text-muted); font-size: var(--t-petite); }
body.ecran-parcours .pc-pousse { margin-left: auto; }

body.ecran-parcours .pc-badge { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .6rem; border-radius: 999px;
  font-size: var(--t-libelle); font-weight: 650; white-space: nowrap; }
body.ecran-parcours .pc-badge--vert { background: var(--vert-pale); color: var(--vert-fonce); }
body.ecran-parcours .pc-badge--ambre { background: var(--alerte-fond); color: var(--alerte); }
body.ecran-parcours .pc-badge--gris { background: var(--bg-muted, #f1f3f5); color: var(--text-muted); }
body.ecran-parcours .pc-badge--rouge { background: var(--danger-fond); color: var(--danger); }

body.ecran-parcours .pc-bouton-principal { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; height: 2.5rem; padding: 0 1.2rem; }
body.ecran-parcours .pc-plein { width: 100%; box-sizing: border-box; }
body.ecran-parcours .pc-bouton-principal[disabled] { opacity: .5; cursor: not-allowed; }

/* L'accroche d'une page : une ligne, sans cadre ni fond. */
body.ecran-parcours .pc-guide { display: flex; align-items: center; gap: .7rem; margin: 0 0 1.1rem; padding: 0 .2rem; border: 0; border-radius: 0; background: none; box-shadow: none; }
body.ecran-parcours .pc-guide .sd3-suivant-picto { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-card); color: var(--marine); }
body.ecran-parcours .pc-guide .sd3-suivant-texte { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; }
body.ecran-parcours .pc-guide .sd3-suivant-lib { display: none; }
body.ecran-parcours .pc-guide .sd3-suivant-texte b { color: var(--marine); font-size: 1rem; font-weight: 700; }
body.ecran-parcours .pc-guide .sd3-suivant-texte > span:last-child:not(.sd3-suivant-lib) { color: var(--text-muted); font-size: var(--t-petite); }

/* Cartes et grilles. */
body.ecran-parcours .pc-carte { margin: 0 0 1rem; padding: 1rem 1.15rem; border: 1px solid var(--border); border-radius: 16px;
  background: var(--bg-card); box-shadow: var(--ombre-sd); }
body.ecran-parcours .pc-carte--tableau { padding: .4rem .6rem; overflow-x: auto; }
body.ecran-parcours .pc-carte-tete { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin: 0 0 .7rem; }
body.ecran-parcours .pc-carte-tete h2 { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: 1.05rem; font-weight: 650; color: var(--marine); }
body.ecran-parcours .pc-num { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 999px; background: var(--vert-pale);
  color: var(--vert-fonce); font-size: var(--t-libelle); font-weight: 800; }
body.ecran-parcours .pc-grille { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1rem; align-items: start; }
@media (max-width: 1100px) { body.ecran-parcours .pc-grille { grid-template-columns: minmax(0, 1fr); } }
body.ecran-parcours .pc-colonne-cote { position: sticky; top: 1rem; }
body.ecran-parcours .pc-deux { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 900px) { body.ecran-parcours .pc-deux { grid-template-columns: minmax(0, 1fr); } }
body.ecran-parcours .pc-fin { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; }
body.ecran-parcours .pc-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }

/* Mes schemas. */
body.ecran-parcours .pc-comment { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin: 0 0 1rem; padding: 0; list-style: none; }
@media (max-width: 900px) { body.ecran-parcours .pc-comment { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body.ecran-parcours .pc-comment li { display: flex; gap: .6rem; padding: .7rem .8rem; border-radius: 14px; background: var(--vert-pale); }
body.ecran-parcours .pc-comment li b { display: block; font-size: var(--t-petite); color: var(--marine); }
body.ecran-parcours .pc-comment li small { display: block; font-size: var(--t-libelle); color: var(--text-muted); }
body.ecran-parcours .pc-comment-num { flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 999px; background: var(--vert); color: #fff;
  font-size: var(--t-libelle); font-weight: 800; }
body.ecran-parcours .pc-en-service { border-color: color-mix(in srgb, var(--vert) 45%, var(--border)); }
body.ecran-parcours .pc-chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
@media (max-width: 900px) { body.ecran-parcours .pc-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body.ecran-parcours .pc-chiffres > div { display: flex; flex-direction: column; gap: .15rem; padding: .7rem .8rem; border: 1px solid var(--trait-sd); border-radius: 12px; }
body.ecran-parcours .pc-chiffres > div > span { font-size: var(--t-libelle); color: var(--text-muted); }
body.ecran-parcours .pc-chiffres b { font-size: 1.3rem; font-weight: 700; color: var(--marine); font-variant-numeric: tabular-nums; }
body.ecran-parcours .pc-chiffres small { font-size: var(--t-libelle); color: var(--text-faint); }
body.ecran-parcours .pc-liste .pc-geste { text-align: right; white-space: nowrap; }

/* Parametrer. */
body.ecran-parcours .pc-ligne-champ { display: flex; gap: .6rem; }
body.ecran-parcours .pc-champ-nom { flex: 1; font-size: 1.05rem; font-weight: 600; }
body.ecran-parcours .pc-ambition td b { color: var(--marine); }
body.ecran-parcours .pc-gardes { display: flex; flex-direction: column; gap: .5rem; margin: 0 0 1rem; padding: 0; list-style: none; }
body.ecran-parcours .pc-gardes li { display: flex; gap: .45rem; align-items: flex-start; font-size: var(--t-petite); }
body.ecran-parcours .pc-gardes li.ok svg { color: var(--vert); }
body.ecran-parcours .pc-gardes li.ko { color: var(--alerte); }
body.ecran-parcours .pc-hypotheses dd { white-space: nowrap; }

/* Le calcul. */
body.ecran-parcours .pc-attente { display: flex; gap: 1rem; align-items: flex-start; }
body.ecran-parcours .pc-attente h2 { margin: 0 0 .3rem; font-size: 1.1rem; color: var(--marine); }
body.ecran-parcours .pc-attente p { margin: 0 0 .4rem; }
body.ecran-parcours .pc-attente-picto { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 14px; background: var(--alerte-fond); color: var(--alerte); }
body.ecran-parcours .pc-attente--echec .pc-attente-picto { background: var(--danger-fond); color: var(--danger); }
@keyframes pc-tourne { to { rotate: 360deg; } }
body.ecran-parcours .pc-tourne svg { animation: pc-tourne 2.4s linear infinite; }

/* Mon reseau. */
body.ecran-parcours .pc-regle p { margin: 0; font-size: var(--t-petite); color: var(--text-muted); line-height: 1.5; }
body.ecran-parcours .pc-regle b { color: var(--marine); }
body.ecran-parcours .pc-pastilles { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .8rem; }
body.ecran-parcours .pc-pastille { display: inline-flex; align-items: center; gap: .35rem; height: 2rem; margin: 0; padding: 0 .8rem; border: 1px solid var(--border);
  border-radius: 999px; background: var(--bg-card); color: var(--text-muted); font-size: var(--t-petite); font-weight: 600; cursor: pointer; }
body.ecran-parcours .pc-pastille b { color: var(--marine); }
body.ecran-parcours .pc-pastille.on { border-color: var(--vert); background: var(--vert-pale); color: var(--vert-fonce); }
body.ecran-parcours .pc-magasins td { vertical-align: top; }
body.ecran-parcours .pc-mag b { color: var(--marine); }
body.ecran-parcours .pc-pct { font-size: 1.05rem; color: var(--marine); }
body.ecran-parcours .pc-pct--bas { color: var(--alerte); }
body.ecran-parcours .pc-jauge-cell { min-width: 9rem; }
body.ecran-parcours .pc-jauge { position: relative; display: flex; flex-direction: column; gap: 3px; margin-top: .35rem; padding: 2px 0;
  background: linear-gradient(90deg, var(--alerte-fond) 0 40%, transparent 40% 55%, var(--vert-pale) 55% 100%); border-radius: 4px; }
body.ecran-parcours .pc-jauge-barre { display: block; height: 6px; border-radius: 3px; }
body.ecran-parcours .pc-jauge-barre--r { background: var(--alerte); }
body.ecran-parcours .pc-jauge-barre--p { background: var(--vert-fonce); }
body.ecran-parcours .pc-jauge-trait { position: absolute; top: -2px; bottom: -2px; width: 1px; background: var(--text-faint); }
body.ecran-parcours .pc-jauge-trait--cent { width: 2px; background: var(--marine); }
body.ecran-parcours .pc-cas { min-width: 15rem; }
body.ecran-parcours .pc-cas-pastille { display: inline-block; padding: .1rem .55rem; border-radius: 999px; background: var(--bg-muted, #f1f3f5); color: var(--marine);
  font-size: var(--t-libelle); font-weight: 650; }
body.ecran-parcours .pc-cas--ameliorer .pc-cas-pastille { background: var(--vert-pale); color: var(--vert-fonce); }
body.ecran-parcours .pc-cas--trancher .pc-cas-pastille { background: var(--alerte-fond); color: var(--alerte); }
body.ecran-parcours .pc-cas--baisser .pc-cas-pastille, body.ecran-parcours .pc-cas--relocaliser_ou_fermer .pc-cas-pastille { background: var(--danger-fond); color: var(--danger); }
body.ecran-parcours .pc-ampleur { margin-left: .35rem; color: var(--vert-fonce); letter-spacing: .05em; }
body.ecran-parcours .pc-ampleur--ambre { color: var(--alerte); }
body.ecran-parcours .pc-options { margin: .35rem 0 0; padding: 0; list-style: none; font-size: var(--t-libelle); color: var(--text-muted); }
body.ecran-parcours .pc-options li { padding: .1rem 0; }
body.ecran-parcours .pc-options b { color: var(--marine); font-variant-numeric: tabular-nums; }
body.ecran-parcours .pc-intercalaire th { padding-top: 1rem; font-size: var(--t-libelle); font-weight: 650; color: var(--text-faint); text-transform: none; background: none; }
body.ecran-parcours .pc-choix { display: flex; flex-wrap: wrap; gap: .3rem; max-width: 16rem; }
body.ecran-parcours .pc-choix-b { display: inline-flex; align-items: center; height: 1.9rem; margin: 0; padding: 0 .65rem; border: 1px solid var(--border);
  border-radius: 999px; background: var(--bg-card); color: var(--marine); font-size: var(--t-libelle); font-weight: 650; cursor: pointer; white-space: nowrap; }
body.ecran-parcours .pc-choix-b:hover { border-color: var(--vert); }
body.ecran-parcours .pc-choix-b.on { border-color: var(--vert); background: var(--vert); color: #fff; }
body.ecran-parcours .pc-choix--fermer.on { border-color: var(--danger); background: var(--danger); }
body.ecran-parcours .pc-choix--garder.on { border-color: var(--text-muted); background: var(--text-muted); }
body.ecran-parcours .pc-resume .pc-progres { display: flex; flex-direction: column; gap: .35rem; margin: 0 0 .8rem; font-size: var(--t-petite); }
body.ecran-parcours .pc-resume progress { width: 100%; height: .5rem; accent-color: var(--vert); }
body.ecran-parcours .pc-resume form { margin: .6rem 0 0; }

/* Mes ouvertures. */
body.ecran-parcours .pc-regions { display: flex; flex-direction: column; gap: .3rem; }
body.ecran-parcours .pc-region { border: 1px solid var(--trait-sd); border-radius: 10px; }
body.ecran-parcours .pc-region > summary { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .45rem .7rem; cursor: pointer; list-style: none; }
body.ecran-parcours .pc-region > summary::-webkit-details-marker { display: none; }
body.ecran-parcours .pc-region label { display: inline-flex; align-items: center; gap: .45rem; margin: 0; }
body.ecran-parcours .pc-deps { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .2rem .8rem; padding: .3rem .8rem .7rem; }
body.ecran-parcours .pc-dep, body.ecran-parcours .pc-type { display: flex; align-items: center; gap: .45rem; font-size: var(--t-petite); }
body.ecran-parcours .pc-dep small, body.ecran-parcours .pc-type small { display: inline; margin-left: auto; color: var(--text-faint); font-size: var(--t-libelle); }
body.ecran-parcours .pc-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .4rem .9rem; }
body.ecran-parcours .pc-format { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: start; }
@media (max-width: 900px) { body.ecran-parcours .pc-format { grid-template-columns: minmax(0, 1fr); } }
body.ecran-parcours .pc-champ { display: flex; flex-direction: column; gap: .3rem; font-size: var(--t-petite); }
body.ecran-parcours .pc-champ > span { font-weight: 650; color: var(--marine); }
body.ecran-parcours .pc-champ small { color: var(--text-faint); font-size: var(--t-libelle); }
body.ecran-parcours .pc-segment { display: inline-flex; gap: 2px; margin: 0; padding: 3px; border: 1px solid var(--border); border-radius: 999px; }
body.ecran-parcours .pc-segment legend { padding: 0 .3rem; font-size: var(--t-petite); font-weight: 650; color: var(--marine); }
body.ecran-parcours .pc-segment label { display: inline-flex; align-items: center; height: 2rem; padding: 0 .9rem; border-radius: 999px; cursor: pointer; font-size: var(--t-petite); font-weight: 650; color: var(--text-muted); }
body.ecran-parcours .pc-segment label.on { background: var(--vert); color: #fff; }
body.ecran-parcours .pc-segment input { position: absolute; opacity: 0; pointer-events: none; }
body.ecran-parcours .pc-courbe { display: block; width: 100%; height: 12rem; }
body.ecran-parcours .pc-courbe polyline { stroke: var(--vert-fonce); stroke-width: 2; }
body.ecran-parcours .pc-courbe circle { fill: var(--bg-card); stroke: var(--vert-fonce); stroke-width: .5; vector-effect: non-scaling-stroke; }
body.ecran-parcours .pc-courbe circle.retenu { fill: var(--vert); }
body.ecran-parcours .pc-menu-item { display: flex; align-items: flex-start; gap: .6rem; width: 100%; margin: 0; padding: .55rem .65rem; border: 0; border-radius: 10px;
  background: none; color: var(--marine); text-align: left; cursor: pointer; }
body.ecran-parcours .pc-menu-item:hover { background: var(--vert-pale); }
body.ecran-parcours .pc-menu-item b { display: block; font-size: var(--t-petite); }
body.ecran-parcours .pc-menu-item small { display: block; font-size: var(--t-libelle); color: var(--text-faint); }
body.ecran-parcours .pc-situe { min-width: 11rem; }
body.ecran-parcours .pc-situe-chiffres { display: flex; align-items: flex-start; gap: .5rem; }
body.ecran-parcours .pc-situe-chiffres > span { display: flex; flex-direction: column; }
body.ecran-parcours .pc-fleche { color: var(--text-faint); padding-top: .15rem; }
body.ecran-parcours .pc-pct--r { color: var(--alerte); }
body.ecran-parcours .pc-pct--p { color: var(--vert-fonce); }
body.ecran-parcours .pc-legende { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; margin: .5rem 0 0 !important; font-size: var(--t-libelle) !important; }
body.ecran-parcours .pc-legende span { display: inline-block; width: 1.2rem; height: 5px; border-radius: 3px; }
body.ecran-parcours .pc-legende .pc-legende-r { background: var(--alerte); }
body.ecran-parcours .pc-legende .pc-legende-p { margin-left: .6rem; background: var(--vert-fonce); }
body.ecran-parcours .pc-legende .pc-legende-t { width: 2px; height: .8rem; margin-left: .6rem; background: var(--marine); }
body.ecran-parcours .pc-reponse { width: 1%; }
body.ecran-parcours .pc-choix { flex-direction: column; align-items: stretch; min-width: 9.5rem; }
body.ecran-parcours .pc-choix-b { justify-content: center; }
body.ecran-parcours .pc-resume progress { appearance: none; -webkit-appearance: none; border: 0; border-radius: 999px; overflow: hidden; background: var(--trait-sd); }
body.ecran-parcours .pc-resume progress::-webkit-progress-bar { background: var(--trait-sd); border-radius: 999px; }
body.ecran-parcours .pc-resume progress::-webkit-progress-value { background: var(--vert); border-radius: 999px; }
body.ecran-parcours .pc-resume progress::-moz-progress-bar { background: var(--vert); border-radius: 999px; }
body.ecran-parcours .pc-grille--seule { grid-template-columns: minmax(0, 1fr); max-width: 60rem; }
body.ecran-parcours .pc-courbe-zone { position: relative; height: 12rem; margin: .4rem .6rem 0; }
body.ecran-parcours .pc-courbe-zone .pc-courbe { position: absolute; inset: 0; height: 100%; }
body.ecran-parcours .pc-point { position: absolute; width: .6rem; height: .6rem; margin: -.3rem 0 0 -.3rem; border: 2px solid var(--vert-fonce);
  border-radius: 999px; background: var(--bg-card); }
body.ecran-parcours .pc-point.retenu { background: var(--vert); border-color: var(--vert); }
body.ecran-parcours .pc-courbe-axes { display: flex; justify-content: space-between; margin: .5rem 0 .2rem; font-size: var(--t-libelle); color: var(--text-faint); }
body.ecran-parcours .pc-region > summary { padding: .35rem .7rem; }
body.ecran-parcours .pc-suivis { margin: .6rem 0 0; font-size: var(--t-petite); color: var(--text-muted); }

/* Mes schemas : le tableau seul. */
body.ecran-parcours .pc-liste-carte { padding: .8rem 1rem 1rem; }
body.ecran-parcours .pc-liste-outils { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin: 0 0 .8rem; }
body.ecran-parcours .pc-segment--filtre button { display: inline-flex; align-items: center; gap: .35rem; height: 2rem; margin: 0; padding: 0 .85rem; border: 0;
  border-radius: 999px; background: none; color: var(--text-muted); font-size: var(--t-petite); font-weight: 650; cursor: pointer; }
body.ecran-parcours .pc-segment--filtre button b { color: var(--marine); }
body.ecran-parcours .pc-segment--filtre button.on { background: var(--vert); color: #fff; }
body.ecran-parcours .pc-segment--filtre button.on b { color: #fff; }
body.ecran-parcours .pc-liste { width: 100%; }
body.ecran-parcours .pc-liste td { padding-top: .8rem; padding-bottom: .8rem; vertical-align: middle; }
body.ecran-parcours .pc-liste tbody tr:hover { background: color-mix(in srgb, var(--vert-pale) 45%, transparent); }
body.ecran-parcours .pc-ligne--service { background: color-mix(in srgb, var(--vert-pale) 60%, transparent); }
body.ecran-parcours .pc-ligne--service td:first-child { box-shadow: inset 3px 0 0 var(--vert); }
body.ecran-parcours .pc-ligne--archive .pc-liste-nom { color: var(--text-muted); }
body.ecran-parcours .pc-liste-nom { font-weight: 650; color: var(--marine); text-decoration: none; }
body.ecran-parcours .pc-liste-nom:hover { color: var(--vert-fonce); text-decoration: underline; }
body.ecran-parcours .pc-avance { min-width: 15rem; }
body.ecran-parcours .pc-avance-tete { display: flex; align-items: center; gap: .6rem; margin-bottom: .25rem; }
body.ecran-parcours .pc-mini-pas { display: inline-flex; gap: 3px; }
body.ecran-parcours .pc-mini-pas > span { display: block; width: 1.1rem; height: 5px; border-radius: 3px; background: var(--trait-sd); }
body.ecran-parcours .pc-mini-pas > span.fait { background: var(--vert); }
body.ecran-parcours .pc-mini-pas > span.courant { background: var(--ambre); }
body.ecran-parcours .pc-a-faire { display: block; color: var(--alerte); font-size: var(--t-petite); font-weight: 600; }
body.ecran-parcours small.pc-inline { display: inline; }
body.ecran-parcours .pc-liste .pc-geste { text-align: right; white-space: nowrap; }
body.ecran-parcours .pc-geste-boutons { display: inline-flex; align-items: center; gap: .4rem; }
body.ecran-parcours .pc-menu-ligne { position: relative; }
body.ecran-parcours .pc-menu-ligne > summary { list-style: none; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border: 1px solid var(--border);
  border-radius: 10px; color: var(--text-muted); cursor: pointer; }
body.ecran-parcours .pc-menu-ligne > summary::-webkit-details-marker { display: none; }
body.ecran-parcours .pc-menu-ligne > summary:hover, body.ecran-parcours .pc-menu-ligne[open] > summary { border-color: var(--vert); color: var(--vert-fonce); }
body.ecran-parcours .pc-menu-ligne-liste { position: absolute; right: 0; top: calc(100% + .3rem); z-index: 20; display: flex; flex-direction: column; min-width: 11rem;
  padding: .3rem; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); box-shadow: 0 14px 30px -14px rgba(22, 35, 63, .4); }
body.ecran-parcours .pc-menu-ligne-liste button { display: flex; align-items: center; gap: .5rem; width: 100%; margin: 0; padding: .5rem .6rem; border: 0; border-radius: 8px;
  background: none; color: var(--marine); font-size: var(--t-petite); text-align: left; cursor: pointer; }
body.ecran-parcours .pc-menu-ligne-liste button:hover { background: var(--vert-pale); }
body.ecran-parcours .pc-masque { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
body.ecran-parcours .pc-aide-bouton { display: inline-flex; align-items: center; gap: .35rem; height: 2rem; margin: 0; padding: 0 .8rem; border: 1px solid var(--border);
  border-radius: 999px; background: var(--bg-card); color: var(--vert-fonce); font-size: var(--t-petite); font-weight: 650; cursor: pointer; }
body.ecran-parcours .pc-aide-bouton:hover { border-color: var(--vert); background: var(--vert-pale); }
body.ecran-parcours .pc-aide-modale { width: min(40rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); box-sizing: border-box; margin: auto; padding: 1.4rem 1.5rem; overflow-y: auto; box-shadow: var(--ombre-flottant); }
body.ecran-parcours .pc-aide-modale::backdrop { background: rgb(16 24 32 / .4); backdrop-filter: blur(3px); }
body.ecran-parcours .pc-aide-tete { display: flex; gap: .9rem; align-items: flex-start; }
body.ecran-parcours .pc-aide-tete h2 { margin: 0 0 .25rem; color: var(--marine); }
body.ecran-parcours .pc-aide-tete p { margin: 0; color: var(--text-muted); line-height: 1.5; }
body.ecran-parcours .pc-aide-repere { flex: none; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 12px; background: var(--vert-pale); color: var(--vert-fonce); }
body.ecran-parcours .pc-aide-etapes { display: flex; flex-direction: column; gap: .5rem; margin: 1.1rem 0; padding: 0; list-style: none; }
body.ecran-parcours .pc-aide-etapes li { display: flex; gap: .7rem; margin: 0; padding: .65rem .75rem; border-radius: 12px; background: var(--vert-pale); line-height: 1.45; }
body.ecran-parcours .pc-aide-etapes b { color: var(--marine); }
body.ecran-parcours .pc-aide-etapes p { margin: .15rem 0 0; font-size: var(--t-petite); color: var(--text-muted); }
body.ecran-parcours .pc-aide-savoir { margin: 0 0 1.1rem; font-size: var(--t-petite); color: var(--text-muted); }
body.ecran-parcours .pc-aide-savoir b { color: var(--marine); }
body.ecran-parcours .pc-aide-savoir ul { margin: .35rem 0 0; padding-left: 1.1rem; }
body.ecran-parcours .pc-aide-savoir li { margin: .25rem 0; }

/* Mes schemas, version soignee : lignes aerees, separateurs horizontaux seuls. */
body.ecran-parcours .pc-tete { margin-bottom: 1.2rem; }
body.ecran-parcours .pc-liste-carte { padding: .9rem 1.2rem .6rem; border-radius: 18px; }
body.ecran-parcours table.pc-liste { border: 0; border-collapse: separate; border-spacing: 0; font-size: var(--t-petite); }
body.ecran-parcours table.pc-liste thead th { padding: .55rem .9rem; border: 0; border-bottom: 1px solid var(--border); background: none;
  font-size: var(--t-libelle); font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--text-faint); white-space: nowrap; }
body.ecran-parcours table.pc-liste td { padding: 1rem .9rem; border: 0; border-bottom: 1px solid var(--trait-sd); vertical-align: middle; }
body.ecran-parcours table.pc-liste tbody tr:last-child td { border-bottom: 0; }
body.ecran-parcours table.pc-liste tbody tr:hover > td { background: color-mix(in srgb, var(--vert-pale) 40%, transparent); }
body.ecran-parcours table.pc-liste tr.pc-ligne--service > td { background: color-mix(in srgb, var(--vert-pale) 55%, transparent); }
body.ecran-parcours table.pc-liste tr.pc-ligne--service > td:first-child { box-shadow: inset 3px 0 0 var(--vert); }
body.ecran-parcours table.pc-liste td:first-child, body.ecran-parcours table.pc-liste th:first-child { padding-left: 1rem; }
body.ecran-parcours table.pc-liste td.num, body.ecran-parcours table.pc-liste th.num { text-align: right; font-variant-numeric: tabular-nums; }
body.ecran-parcours table.pc-liste td.num b { font-size: var(--t-corps); color: var(--marine); }
body.ecran-parcours .pc-liste-schema { min-width: 16rem; }
body.ecran-parcours .pc-liste-nom { font-size: var(--t-corps); }
body.ecran-parcours .pc-liste-schema small { display: block; margin-top: .2rem; color: var(--text-faint); font-size: var(--t-libelle); }
body.ecran-parcours .pc-puce-service { display: inline-flex; align-items: center; gap: .2rem; margin-left: .5rem; padding: .1rem .5rem; border-radius: 999px;
  background: var(--vert); color: #fff; font-size: var(--t-libelle); font-weight: 700; vertical-align: .1em; }
body.ecran-parcours .pc-avance-tete { display: flex; align-items: center; gap: .55rem; margin: 0 0 .2rem; }
body.ecran-parcours .pc-avance-tete b { font-weight: 650; }
body.ecran-parcours .pc-ton--ambre b { color: var(--alerte); }
body.ecran-parcours .pc-ton--vert b { color: var(--vert-fonce); }
body.ecran-parcours .pc-ton--gris b { color: var(--text-muted); }
body.ecran-parcours .pc-ton--rouge b { color: var(--danger); }
body.ecran-parcours .pc-avance small { display: block; color: var(--text-faint); font-size: var(--t-libelle); }
body.ecran-parcours .pc-avance small.pc-a-faire { color: var(--text-muted); font-weight: 400; }
body.ecran-parcours .pc-mini-pas > span { width: .9rem; height: 4px; }
body.ecran-parcours .pc-geste-boutons .bouton { height: 2.1rem; padding: 0 1rem; font-size: var(--t-petite); }
body.ecran-parcours .pc-menu-ligne > summary { width: 2.1rem; height: 2.1rem; border-color: transparent; font-size: 1.1rem; line-height: 1; }
body.ecran-parcours .pc-menu-ligne > summary:hover, body.ecran-parcours .pc-menu-ligne[open] > summary { border-color: var(--border); background: var(--bg-card); }
body.ecran-parcours .pc-segment--filtre { margin: 0; }

/* La fenetre Comment ca marche : une frise, puis ce qu'il faut savoir. */
body.ecran-parcours .pc-aide-modale { position: relative; width: min(38rem, calc(100vw - 2rem)); padding: 1.6rem 1.7rem 1.3rem; border-radius: 20px; }
body.ecran-parcours .pc-aide-fermer { position: absolute; top: .8rem; right: .8rem; margin: 0; }
body.ecran-parcours .pc-aide-fermer button { display: grid; place-items: center; width: 2rem; height: 2rem; margin: 0; padding: 0; border: 0; border-radius: 10px;
  background: none; color: var(--text-muted); cursor: pointer; }
body.ecran-parcours .pc-aide-fermer button:hover { background: var(--vert-pale); color: var(--vert-fonce); }
body.ecran-parcours .pc-aide-tete { padding-right: 2rem; }
body.ecran-parcours .pc-aide-tete h2 { font-size: 1.25rem; }
body.ecran-parcours .pc-aide-etapes { position: relative; gap: 0; margin: 1.3rem 0 1.2rem; }
body.ecran-parcours .pc-aide-etapes li { position: relative; padding: 0 0 1rem 0; background: none; border-radius: 0; }
body.ecran-parcours .pc-aide-etapes li:not(:last-child)::before { content: ""; position: absolute; left: .85rem; top: 1.9rem; bottom: .1rem; width: 2px; background: var(--vert-pale); }
body.ecran-parcours .pc-aide-num { flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 999px; background: var(--vert);
  color: #fff; font-size: var(--t-libelle); font-weight: 800; box-shadow: 0 0 0 4px var(--vert-pale); }
body.ecran-parcours .pc-aide-etapes b { font-size: var(--t-corps); }
body.ecran-parcours .pc-aide-savoir { padding: .9rem 1rem; border-radius: 14px; background: var(--bg-page, #f6f7f5); }
body.ecran-parcours .pc-aide-savoir h3 { margin: 0 0 .5rem; font-size: var(--t-petite); color: var(--marine); }
body.ecran-parcours .pc-aide-savoir ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .45rem; }
body.ecran-parcours .pc-aide-savoir li { display: flex; gap: .55rem; align-items: flex-start; margin: 0; line-height: 1.45; }
body.ecran-parcours .pc-aide-savoir li svg { flex: none; margin-top: .15rem; color: var(--vert-fonce); }
body.ecran-parcours .pc-aide-pied { display: flex; justify-content: flex-end; margin: 1.1rem 0 0; }
body.ecran-parcours .pc-menu-danger, body.ecran-parcours .pc-menu-ligne-liste button.pc-menu-danger { color: var(--danger); }
body.ecran-parcours .pc-menu-danger:hover, body.ecran-parcours .pc-menu-ligne-liste button.pc-menu-danger:hover { background: var(--danger-fond); }
body.ecran-parcours .pc-segment--filtre a { display: inline-flex; align-items: center; gap: .35rem; height: 2rem; padding: 0 .85rem; border-radius: 999px;
  color: var(--text-muted); font-size: var(--t-petite); font-weight: 650; text-decoration: none; }
body.ecran-parcours .pc-segment--filtre a b { color: var(--marine); }
body.ecran-parcours .pc-segment--filtre a:hover { color: var(--marine); }
body.ecran-parcours .pc-segment--filtre a.on { background: var(--vert); color: #fff; }
body.ecran-parcours .pc-segment--filtre a.on b { color: #fff; }
body.ecran-parcours .pc-liste-carte .pied-tableau { margin: .2rem 0 0; padding: .7rem .2rem .2rem; border-top: 1px solid var(--trait-sd); }
/* Mes schemas : chiffres d'une seule ecriture, boutons d'une seule taille. */
body.ecran-parcours table.pc-liste td.pc-chiffre { white-space: nowrap; line-height: 1.3; }
body.ecran-parcours table.pc-liste .pc-valeur { font-size: var(--t-corps); font-weight: 650; color: var(--marine); font-variant-numeric: tabular-nums; }
body.ecran-parcours table.pc-liste .pc-sur { font-size: var(--t-corps); font-weight: 500; color: var(--text-faint); font-variant-numeric: tabular-nums; }
body.ecran-parcours table.pc-liste .pc-sous { display: block; margin-top: .15rem; font-size: var(--t-libelle); font-weight: 500; color: var(--text-faint); }
body.ecran-parcours table.pc-liste .pc-vide { font-size: var(--t-corps); color: var(--border); }
body.ecran-parcours table.pc-liste td.pc-geste { width: 1%; padding-right: .6rem; }
body.ecran-parcours .pc-geste-boutons { display: inline-flex; align-items: center; gap: .35rem; vertical-align: middle; }
body.ecran-parcours .pc-geste-boutons > .bouton { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  width: 9.5rem; height: 2.25rem; margin: 0; padding: 0 .8rem; border: 1px solid transparent; border-radius: 10px;
  font-size: var(--t-petite); font-weight: 650; line-height: 1; white-space: nowrap; }
body.ecran-parcours .pc-geste-boutons > .bouton.bouton-discret { border-color: var(--border); }
body.ecran-parcours .pc-menu-ligne > summary, body.ecran-parcours .pc-menu-vide { box-sizing: border-box; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; }
body.ecran-parcours table.pc-liste thead th.num { white-space: normal; max-width: 8rem; line-height: 1.25; }
body.ecran-parcours table.pc-liste .pc-avance { min-width: 17rem; }
body.ecran-parcours table.pc-liste .pc-avance-tete b, body.ecran-parcours .pc-insecable { white-space: nowrap; }
body.ecran-parcours .pc-geste-boutons > .bouton { width: 8.5rem; }

/* Mes schemas : la carte du schema en service, au-dessus du tableau. */
body.ecran-parcours .pc-tete-actions { display: flex; align-items: center; gap: .6rem; }
body.ecran-parcours .pc-tete-actions form { margin: 0; }
body.ecran-parcours .pc-bouton-second { display: inline-flex; align-items: center; gap: .4rem; height: 2.5rem; padding: 0 1rem; border-radius: 10px; }
body.ecran-parcours .pc-service { margin: 0 0 1rem; padding: 1rem 1.2rem 1.1rem; border: 1px solid color-mix(in srgb, var(--vert) 45%, var(--border));
  border-radius: 18px; background: linear-gradient(120deg, var(--vert-pale), var(--bg-card) 55%); box-shadow: var(--ombre-sd); }
body.ecran-parcours .pc-service-tete { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; margin: 0 0 .9rem; }
body.ecran-parcours .pc-service-tete .pc-puce-service { margin-left: 0; }
body.ecran-parcours .pc-service-nom { font-size: 1.05rem; font-weight: 700; color: var(--marine); text-decoration: none; }
body.ecran-parcours .pc-service-nom:hover { color: var(--vert-fonce); text-decoration: underline; }
body.ecran-parcours .pc-service-chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }
@media (max-width: 1000px) { body.ecran-parcours .pc-service-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body.ecran-parcours .pc-service-chiffres > div { display: flex; flex-direction: column; gap: .2rem; padding: .8rem .95rem; border: 1px solid var(--trait-sd);
  border-radius: 14px; background: var(--bg-card); }
body.ecran-parcours .pc-service-chiffres span { font-size: var(--t-libelle); font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); }
body.ecran-parcours .pc-service-chiffres b { font-size: 1.5rem; font-weight: 700; color: var(--marine); font-variant-numeric: tabular-nums; line-height: 1.2; }
body.ecran-parcours .pc-service-chiffres b span { font-size: inherit; font-weight: inherit; letter-spacing: 0; text-transform: none; color: inherit; }
body.ecran-parcours .pc-service-chiffres small { font-size: var(--t-libelle); color: var(--text-muted); }
body.ecran-parcours .pc-service-gain b { color: var(--vert-fonce); }

/* Parametrer : une page, un formulaire ; le pied garde les boutons a portee. */
body.ecran-parcours .pc-parametrer { max-width: 72rem; }
body.ecran-parcours .pc-champs { margin: 0; padding: 0; border: 0; min-width: 0; }
body.ecran-parcours .pc-nom { display: flex; align-items: center; gap: 1rem; }
body.ecran-parcours .pc-nom label { display: flex; align-items: center; gap: .5rem; margin: 0; font-weight: 650; color: var(--marine); white-space: nowrap; }
body.ecran-parcours .pc-nom input { flex: 1; max-width: 32rem; height: 2.5rem; padding: 0 .8rem; border-radius: 10px; font-size: 1rem; font-weight: 600; }
body.ecran-parcours .pc-compte-iris { margin-left: auto; padding: .25rem .75rem; border-radius: 999px; background: var(--vert-pale); color: var(--vert-fonce);
  font-size: var(--t-petite); }
body.ecran-parcours .pc-compte-iris b { font-size: var(--t-corps); font-variant-numeric: tabular-nums; }
body.ecran-parcours .pc-territoire { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
@media (max-width: 1000px) { body.ecran-parcours .pc-territoire { grid-template-columns: minmax(0, 1fr); } }
body.ecran-parcours .pc-sous-titre-bloc { margin: 0 0 .5rem; font-size: var(--t-petite); font-weight: 700; color: var(--marine); }
body.ecran-parcours .pc-sous-titre-bloc small { margin-left: .3rem; font-weight: 400; color: var(--text-faint); }
body.ecran-parcours .pc-regions { max-height: 26rem; overflow-y: auto; padding-right: .2rem; }
body.ecran-parcours .pc-dep span { flex: 1; }
body.ecran-parcours .pc-grille-types { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-petite);
  border: 1px solid var(--trait-sd); border-radius: 12px; overflow: hidden; }
body.ecran-parcours .pc-grille-types th, body.ecran-parcours .pc-grille-types td { padding: .55rem .7rem; border-bottom: 1px solid var(--trait-sd); text-align: center; }
body.ecran-parcours .pc-grille-types thead th { background: var(--bg-page, #f6f7f5); font-size: var(--t-libelle); font-weight: 650; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-faint); }
body.ecran-parcours .pc-grille-types tbody th { text-align: left; font-weight: 600; color: var(--marine); }
body.ecran-parcours .pc-grille-types tbody tr:last-child > * { border-bottom: 0; }
body.ecran-parcours .pc-type-case { display: inline-flex; align-items: center; gap: .4rem; margin: 0; cursor: pointer; }
body.ecran-parcours .pc-type-case small { color: var(--text-faint); font-size: var(--t-libelle); }
body.ecran-parcours .pc-vide { color: var(--border); }
body.ecran-parcours .pc-saisie { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); overflow: hidden; }
body.ecran-parcours .pc-saisie input { width: 6.5rem; height: 2.2rem; margin: 0; padding: 0 .6rem; border: 0; border-radius: 0; text-align: right;
  font-variant-numeric: tabular-nums; font-weight: 600; background: none; }
body.ecran-parcours .pc-saisie > span { padding: 0 .6rem; align-self: stretch; display: grid; place-items: center; background: var(--bg-page, #f6f7f5);
  color: var(--text-faint); font-size: var(--t-libelle); border-left: 1px solid var(--border); }
body.ecran-parcours .pc-saisie:focus-within { border-color: var(--vert); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vert) 15%, transparent); }
body.ecran-parcours .pc-champs:disabled .pc-saisie { background: var(--bg-page, #f6f7f5); }
body.ecran-parcours .pc-proposition { margin: 0; padding: .25rem .6rem; border: 1px dashed color-mix(in srgb, var(--vert) 50%, var(--border)); border-radius: 8px;
  background: none; color: var(--vert-fonce); font-size: var(--t-petite); font-weight: 600; cursor: pointer; }
body.ecran-parcours .pc-proposition:hover { background: var(--vert-pale); border-style: solid; }
body.ecran-parcours .pc-petit-bouton { height: 2rem; padding: 0 .8rem; font-size: var(--t-petite); }
body.ecran-parcours .pc-hypotheses { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .8rem; }
body.ecran-parcours .pc-hypothese { display: flex; flex-direction: column; gap: .35rem; margin: 0; padding: .8rem .9rem; border: 1px solid var(--trait-sd); border-radius: 12px; }
body.ecran-parcours .pc-hypothese-nom { font-size: var(--t-petite); font-weight: 650; color: var(--marine); }
body.ecran-parcours .pc-hypothese .pc-saisie { align-self: flex-start; }
body.ecran-parcours .pc-hypothese small { font-size: var(--t-libelle); color: var(--text-faint); line-height: 1.4; }
body.ecran-parcours .pc-pied { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem;
  margin: 0 0 1rem; padding: .8rem 1.1rem; border: 1px solid var(--border); border-radius: 16px; background: color-mix(in srgb, var(--bg-card) 92%, transparent);
  backdrop-filter: blur(6px); box-shadow: 0 -8px 24px -18px rgb(16 24 32 / .35); }
body.ecran-parcours .pc-gardes--ligne { flex-direction: row; flex-wrap: wrap; gap: .3rem 1rem; margin: 0; }
body.ecran-parcours .pc-gardes--ligne li { font-size: var(--t-libelle); }
body.ecran-parcours .pc-pied-boutons { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
body.ecran-parcours .pc-pied-boutons .bouton { height: 2.5rem; margin: 0; }
body.ecran-parcours p.pc-aide { margin: 0 0 .9rem; max-width: 62rem; font-size: var(--t-petite); color: var(--text-muted); line-height: 1.5; }
body.ecran-parcours .pc-pied-boutons .bouton { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; box-sizing: border-box; padding: 0 1rem; }
body.ecran-parcours .pc-nom label::after { content: none; }

/* Parametrer, version compacte : deux colonnes, champs en ligne. */
body.ecran-parcours .pc-parametrer { max-width: none; }
body.ecran-parcours .pc-nom { display: flex; align-items: center; gap: 1rem; padding: .75rem 1.1rem; }
body.ecran-parcours .pc-nom input { flex: 1; max-width: 34rem; height: 2.4rem; }
body.ecran-parcours .pc-param-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
@media (max-width: 1100px) { body.ecran-parcours .pc-param-grille { grid-template-columns: minmax(0, 1fr); } }
body.ecran-parcours .pc-bloc { padding: .95rem 1.1rem 1rem; }
body.ecran-parcours .pc-bloc-tete { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .7rem; margin: 0 0 .35rem; }
body.ecran-parcours .pc-bloc-tete h2 { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: 1.02rem; font-weight: 700; color: var(--marine); }
body.ecran-parcours .pc-bloc p.pc-aide { margin: 0 0 .7rem; font-size: var(--t-libelle); color: var(--text-faint); }
body.ecran-parcours .pc-bloc .pc-sous-titre-bloc { margin: .7rem 0 .4rem; }
body.ecran-parcours .pc-bloc .pc-grille-types th, body.ecran-parcours .pc-bloc .pc-grille-types td { padding: .35rem .6rem; }
body.ecran-parcours .pc-bloc .pc-regions { max-height: 14rem; }
body.ecran-parcours .pc-region > summary { padding: .3rem .6rem; }
body.ecran-parcours .pc-lien { margin: 0; padding: 0; border: 0; background: none; color: var(--vert-fonce); font-size: var(--t-petite); font-weight: 650; cursor: pointer; }
body.ecran-parcours .pc-lien:hover { text-decoration: underline; }
body.ecran-parcours table.pc-ambition { width: 100%; border-collapse: collapse; font-size: var(--t-petite); }
body.ecran-parcours table.pc-ambition th { padding: .3rem .5rem; border-bottom: 1px solid var(--border); font-size: var(--t-libelle); font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-faint); text-align: left; background: none; }
body.ecran-parcours table.pc-ambition th.num, body.ecran-parcours table.pc-ambition td.num { text-align: right; }
body.ecran-parcours table.pc-ambition td { padding: .25rem .5rem; border-bottom: 1px solid var(--trait-sd); color: var(--marine); }
body.ecran-parcours table.pc-ambition tr:last-child td { border-bottom: 0; }
body.ecran-parcours table.pc-ambition .pc-saisie input { width: 5.2rem; height: 1.95rem; }
body.ecran-parcours .pc-mediane { color: var(--text-muted); font-variant-numeric: tabular-nums; }
body.ecran-parcours table.pc-ambition .pc-proposition { margin-left: .3rem; padding: .15rem .45rem; font-size: var(--t-libelle); }
body.ecran-parcours .pc-lignes-champs { display: flex; flex-direction: column; }
body.ecran-parcours .pc-ligne-champ { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--trait-sd);
  font-size: var(--t-petite); color: var(--marine); }
body.ecran-parcours .pc-ligne-champ:last-child { border-bottom: 0; }
body.ecran-parcours .pc-ligne-champ > span:first-child { font-weight: 600; }
body.ecran-parcours .pc-ligne-champ .pc-saisie input { width: 5rem; height: 1.95rem; }
body.ecran-parcours .pc-ligne-champ select { height: 2.1rem; margin: 0; padding: 0 .6rem; border-radius: 10px; }
body.ecran-parcours .pc-ligne-champ .pc-segment { padding: 2px; }
body.ecran-parcours .pc-ligne-champ .pc-segment label { height: 1.8rem; padding: 0 .8rem; }
body.ecran-parcours .pc-info { color: var(--text-faint); vertical-align: -.1em; cursor: help; }
body.ecran-parcours .pc-saisie input[type=number] { box-sizing: border-box; min-height: 0; height: 1.95rem !important; padding-top: 0; padding-bottom: 0; line-height: 1.95rem; }
body.ecran-parcours .pc-saisie > span { min-width: 2.6rem; padding: 0 .5rem; }
body.ecran-parcours .pc-nom input { box-sizing: border-box; min-height: 0; }
body.ecran-parcours .pc-region label b { font-weight: 600; }
body.ecran-parcours .pc-ligne-champ .pc-segment { display: inline-flex; gap: 2px; border: 1px solid var(--border); border-radius: 999px; }
body.ecran-parcours .pc-ligne-champ .pc-segment label { display: inline-flex; align-items: center; margin: 0; border-radius: 999px; cursor: pointer; font-weight: 650; color: var(--text-muted); }
body.ecran-parcours .pc-ligne-champ .pc-segment label.on { background: var(--vert); color: #fff; }
body.ecran-parcours .pc-ligne-champ .pc-segment input { position: absolute; opacity: 0; pointer-events: none; }

/* Mes schemas : des colonnes de largeur fixe, les chiffres centres sous leur titre. */
body.ecran-parcours table.pc-liste { table-layout: fixed; width: 100%; }
body.ecran-parcours table.pc-liste col.pc-col-schema { width: 27%; }
body.ecran-parcours table.pc-liste col.pc-col-avance { width: 25%; }
body.ecran-parcours table.pc-liste col.pc-col-chiffre { width: 11%; }
body.ecran-parcours table.pc-liste col.pc-col-geste { width: 15%; }
body.ecran-parcours table.pc-liste th.num, body.ecran-parcours table.pc-liste td.num { text-align: center; }
body.ecran-parcours table.pc-liste thead th.num { max-width: none; }
body.ecran-parcours table.pc-liste td { overflow: hidden; text-overflow: ellipsis; }
body.ecran-parcours table.pc-liste .pc-avance { min-width: 0; }
body.ecran-parcours table.pc-liste .pc-liste-schema { min-width: 0; }
body.ecran-parcours table.pc-liste .pc-liste-schema small, body.ecran-parcours table.pc-liste .pc-avance small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.ecran-parcours table.pc-liste .pc-vide { color: var(--text-faint); }
body.ecran-parcours table.pc-liste td.pc-geste { width: auto; text-align: right; }

/* Parametrer : trois temps, un a la fois. */
body.ecran-parcours .pc-reglage-tete { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 0 0 1rem; }
body.ecran-parcours .pc-nom-ligne { display: flex; flex: 1; align-items: center; gap: .8rem; max-width: 42rem; margin: 0; }
body.ecran-parcours .pc-nom-ligne > span { font-size: var(--t-petite); font-weight: 650; color: var(--text-muted); white-space: nowrap; }
body.ecran-parcours .pc-nom-ligne input { flex: 1; box-sizing: border-box; height: 2.5rem; min-height: 0; padding: 0 .9rem; border-radius: 12px;
  font-size: 1.02rem; font-weight: 650; color: var(--marine); }
body.ecran-parcours .pc-temps { padding: 1.3rem 1.4rem 1.1rem; }
body.ecran-parcours .pc-temps-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin: 0 0 1rem; }
body.ecran-parcours .pc-temps-tete h2 { margin: 0 0 .25rem; font-size: 1.15rem; font-weight: 700; color: var(--marine); }
body.ecran-parcours .pc-temps-tete p { margin: 0; max-width: 52rem; font-size: var(--t-petite); color: var(--text-muted); line-height: 1.5; }
body.ecran-parcours .pc-temps table.pc-ambition { max-width: 46rem; }
body.ecran-parcours .pc-temps table.pc-ambition td { padding: .35rem .6rem; }
body.ecran-parcours .pc-temps table.pc-ambition th .pc-lien { margin-left: .4rem; text-transform: none; letter-spacing: 0; }
body.ecran-parcours .pc-ligne-champ--seule { max-width: 46rem; margin-top: .8rem; padding: .8rem 0 0; border-top: 1px solid var(--trait-sd); border-bottom: 0; }
body.ecran-parcours .pc-ligne-champ > span:first-child small { display: block; font-weight: 400; font-size: var(--t-libelle); color: var(--text-faint); }
body.ecran-parcours .pc-hypotheses2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .8rem; }
body.ecran-parcours .pc-hypothese2 { display: flex; flex-direction: column; gap: .45rem; margin: 0; padding: .9rem 1rem; border: 1px solid var(--trait-sd); border-radius: 14px;
  background: var(--bg-card); }
body.ecran-parcours .pc-hypothese2:focus-within { border-color: var(--vert); }
body.ecran-parcours .pc-hypothese2-nom { font-size: var(--t-petite); font-weight: 700; color: var(--marine); }
body.ecran-parcours .pc-hypothese2 .pc-saisie { align-self: flex-start; }
body.ecran-parcours .pc-hypothese2 small { font-size: var(--t-libelle); color: var(--text-faint); line-height: 1.45; }
body.ecran-parcours .pc-format-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; margin: 0 0 1.1rem; padding: .8rem 1rem; border-radius: 14px;
  background: var(--bg-page, #f6f7f5); }
body.ecran-parcours .pc-format-ligne .pc-segment { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); }
body.ecran-parcours .pc-format-ligne .pc-segment label { display: inline-flex; align-items: center; height: 2rem; margin: 0; padding: 0 1rem; border-radius: 999px; cursor: pointer;
  font-size: var(--t-petite); font-weight: 650; color: var(--text-muted); }
body.ecran-parcours .pc-format-ligne .pc-segment label.on { background: var(--vert); color: #fff; }
body.ecran-parcours .pc-format-ligne .pc-segment input { position: absolute; opacity: 0; pointer-events: none; }
body.ecran-parcours .pc-format-surface { display: inline-flex; align-items: center; gap: .6rem; margin: 0; font-size: var(--t-petite); font-weight: 650; color: var(--marine); }
body.ecran-parcours .pc-format-surface select { height: 2.2rem; margin: 0; padding: 0 .7rem; border-radius: 10px; }
body.ecran-parcours .pc-territoire2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.3rem; align-items: start; }
@media (max-width: 1100px) { body.ecran-parcours .pc-territoire2 { grid-template-columns: minmax(0, 1fr); } }
body.ecran-parcours .pc-territoire-choix .pc-sous-titre-bloc:first-child { margin-top: 0; }
body.ecran-parcours .pc-territoire-choix .pc-regions { max-height: 17rem; }
body.ecran-parcours .pc-france { display: flex; flex-direction: column; gap: .6rem; margin: 0; padding: .8rem; border: 1px solid var(--trait-sd); border-radius: 16px;
  background: var(--bg-page, #f6f7f5); }
body.ecran-parcours .pc-france svg { display: block; width: 100%; height: auto; max-height: 30rem; }
body.ecran-parcours .pc-forme-dep { fill: var(--bg-card); stroke: var(--border); stroke-width: .02; cursor: pointer; transition: fill .15s ease; }
body.ecran-parcours .pc-forme-dep.choisi { fill: color-mix(in srgb, var(--vert) 55%, var(--bg-card)); stroke: color-mix(in srgb, var(--vert-fonce) 50%, var(--bg-card)); }
/* Le survol n'est pas une selection : de l'ambre, et un trait, sur le departement ou toute sa region. */
body.ecran-parcours .pc-forme-dep.survol { fill: color-mix(in srgb, var(--ambre) 35%, var(--bg-card)); stroke: var(--ambre); stroke-width: .05; }
body.ecran-parcours .pc-forme-dep.choisi.survol { fill: color-mix(in srgb, var(--ambre) 40%, color-mix(in srgb, var(--vert) 55%, var(--bg-card))); }
body.ecran-parcours .pc-forme-region { fill: none; stroke: var(--marine); stroke-width: .035; opacity: .55; pointer-events: none; }
body.ecran-parcours .pc-france figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .8rem; }
body.ecran-parcours .pc-france figcaption small { flex-basis: 100%; font-size: var(--t-libelle); color: var(--text-faint); }
body.ecran-parcours .pc-france .pc-compte-iris { margin: 0; }
body.ecran-parcours .pc-legende-carte { display: inline-flex; align-items: center; gap: .35rem; font-size: var(--t-libelle); color: var(--text-muted); }
body.ecran-parcours .pc-legende-carte i { display: inline-block; width: .9rem; height: .9rem; margin-left: .4rem; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-card); }
body.ecran-parcours .pc-legende-carte i.choisi { background: color-mix(in srgb, var(--vert) 55%, var(--bg-card)); }
body.ecran-parcours .pc-pas-suite { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: 1.2rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--trait-sd); }
body.ecran-parcours .pc-pas-suite .bouton { display: inline-flex; align-items: center; gap: .35rem; height: 2.5rem; margin: 0; padding: 0 1.1rem; border-radius: 10px; }
body.ecran-parcours .pc-pas-fin { display: inline-flex; gap: .5rem; }
body.ecran-parcours fieldset.pc-champs { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
body.ecran-parcours .pc-format-surface > span { white-space: nowrap; }
body.ecran-parcours .pc-gardes--fin { margin: 1.1rem 0 0; }
body.ecran-parcours .pc-temps table.pc-ambition td { padding: .28rem .6rem; }

/* L'en-tete : le nom se renomme sur place, l'etat se lit d'un coup d'oeil. */
body.ecran-parcours input.pc-titre-champ { flex: 0 1 auto; width: auto; field-sizing: content; min-width: 12ch; max-width: min(46rem, 70vw); box-sizing: border-box; height: auto; margin: 0 0 0 -.5rem;
  padding: .15rem .5rem; border: 1px solid transparent; border-radius: 10px; background: transparent; box-shadow: none; color: var(--marine); font: inherit;
  font-size: 1.6rem; font-weight: 700; line-height: 1.25; transition: background .15s ease, border-color .15s ease; }
body.ecran-parcours input.pc-titre-champ:hover { background: color-mix(in srgb, var(--vert-pale) 60%, transparent); }
body.ecran-parcours input.pc-titre-champ:focus { border-color: var(--vert); background: var(--bg-card); outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vert) 15%, transparent); }
body.ecran-parcours .pc-tete input.pc-titre-champ { margin-left: -.5rem; }
body.ecran-parcours .pc-renommer { order: 3; display: inline-flex; align-items: center; gap: .3rem; height: 1.85rem; box-sizing: border-box; margin: 0; padding: 0 .75rem;
  border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); color: var(--text-muted); font-size: var(--t-libelle); font-weight: 650;
  cursor: pointer; transition: all .15s ease; }
body.ecran-parcours .pc-renommer:hover { border-color: var(--vert); background: var(--vert-pale); color: var(--vert-fonce); }
body.ecran-parcours .pc-tete-nom:has(.pc-titre-champ:focus) .pc-renommer { visibility: hidden; }
body.ecran-parcours .pc-etat { gap: .4rem; height: 1.85rem; box-sizing: border-box; padding: 0 .8rem; font-size: var(--t-libelle); font-weight: 700; }
body.ecran-parcours .pc-etat::before { content: ""; width: .45rem; height: .45rem; border-radius: 999px; background: currentColor; }
body.ecran-parcours .pc-badge--brouillon { border: 1px dashed color-mix(in srgb, var(--marine) 40%, transparent); background: var(--bg-card); color: var(--marine); }

/* Les etapes du parcours en frise ; les sous-etapes de l'etape courante pendent sous elle, comme les branches d'un arbre. */
body.ecran-parcours .pc-frise { margin: .2rem 0 1.2rem; padding: 1.1rem 1.2rem 1rem; border: 1px solid var(--border); border-radius: 18px; background: var(--bg-card);
  box-shadow: var(--ombre-sd); }
body.ecran-parcours .pc-frise-etapes { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; margin: 0; padding: 0; list-style: none; }
body.ecran-parcours .pc-frise-etapes > li { position: relative; display: flex; justify-content: center; min-width: 0; }
/* Le trait qui relie chaque etape a la precedente, vert quand elle est faite. */
body.ecran-parcours .pc-frise-etapes > li + li::before { content: ""; position: absolute; top: calc(1.1rem - 1px); left: calc(-50% + 1.7rem); right: calc(50% + 1.7rem);
  height: 2px; border-radius: 2px; background: var(--border); }
body.ecran-parcours .pc-frise-etapes > li.fait + li::before { background: var(--vert); }
body.ecran-parcours .pc-frise-pas { display: flex; flex-direction: column; align-items: center; gap: .45rem; width: 100%; padding: 0 .4rem; color: var(--marine);
  text-align: center; text-decoration: none; }
body.ecran-parcours .pc-frise-rond { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; box-sizing: border-box; border: 2px solid var(--border);
  border-radius: 999px; background: var(--bg-card); color: var(--text-muted); font-size: var(--t-petite); font-weight: 800; transition: transform .15s ease; }
body.ecran-parcours .pc-frise-texte { display: flex; flex-direction: column; gap: .1rem; min-width: 0; max-width: 100%; }
body.ecran-parcours .pc-frise-texte b { font-size: var(--t-petite); font-weight: 700; }
body.ecran-parcours .pc-frise-texte small { overflow: hidden; font-size: var(--t-libelle); color: var(--text-faint); white-space: nowrap; text-overflow: ellipsis; }
body.ecran-parcours .pc-frise-etapes > li.fait .pc-frise-rond { border-color: var(--vert); background: var(--vert); color: #fff; }
body.ecran-parcours .pc-frise-etapes > li.courant .pc-frise-rond { border-color: var(--vert); color: var(--vert-fonce);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--vert) 15%, transparent); }
body.ecran-parcours .pc-frise-etapes > li.courant b { color: var(--vert-fonce); }
body.ecran-parcours .pc-frise-etapes > li.ferme .pc-frise-rond { background: var(--bg-page, #f6f7f5); color: var(--text-faint); }
body.ecran-parcours .pc-frise-etapes > li.ferme b { color: var(--text-faint); }
body.ecran-parcours a.pc-frise-pas:hover .pc-frise-rond { transform: scale(1.07); }
body.ecran-parcours a.pc-frise-pas:hover b { color: var(--vert-fonce); }
/* La branche : la tige descend de l'etape 1 et tourne vers ses sous-etapes, reliees entre elles. */
body.ecran-parcours .pc-branche { position: relative; display: flex; gap: 1.6rem; margin: .7rem 0 0 12.5%; padding: 1rem 0 0 1.6rem; list-style: none; }
body.ecran-parcours .pc-branche::before { content: ""; position: absolute; top: -.35rem; left: -1px; width: 1.6rem; height: 2.95rem; box-sizing: border-box;
  border-left: 2px solid var(--vert); border-bottom: 2px solid var(--vert); border-bottom-left-radius: 14px; }
body.ecran-parcours .pc-branche > li { position: relative; flex: 1 1 0; min-width: 0; }
body.ecran-parcours .pc-branche > li + li::before { content: ""; position: absolute; top: calc(1.6rem - 1px); left: -1.6rem; width: 1.6rem; height: 2px; background: var(--border); }
body.ecran-parcours .pc-branche > li.fait + li::before { background: var(--vert); }
body.ecran-parcours .pc-branche-pas { display: flex; align-items: center; gap: .65rem; width: 100%; min-height: 3.2rem; box-sizing: border-box; margin: 0;
  padding: .45rem .8rem .45rem .5rem; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card); color: var(--marine); text-align: left;
  font: inherit; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
body.ecran-parcours .pc-branche-pas:hover { border-color: color-mix(in srgb, var(--vert) 55%, var(--border)); }
body.ecran-parcours .pc-branche-rond { flex: none; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 10px; background: var(--bg-page, #f6f7f5);
  color: var(--text-muted); font-size: var(--t-libelle); font-weight: 800; font-variant-numeric: tabular-nums; }
body.ecran-parcours .pc-branche-texte { display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
body.ecran-parcours .pc-branche-texte b { font-size: var(--t-petite); font-weight: 700; }
body.ecran-parcours .pc-branche-texte small { overflow: hidden; font-size: var(--t-libelle); color: var(--text-faint); white-space: nowrap; text-overflow: ellipsis; }
body.ecran-parcours .pc-branche > li.courant .pc-branche-pas { border-color: var(--vert); background: color-mix(in srgb, var(--vert-pale) 50%, var(--bg-card));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vert) 12%, transparent); }
body.ecran-parcours .pc-branche > li.courant .pc-branche-rond { background: var(--vert); color: #fff; }
body.ecran-parcours .pc-branche > li.courant b { color: var(--vert-fonce); }
body.ecran-parcours .pc-branche > li.fait .pc-branche-rond { background: var(--vert-pale); color: var(--vert-fonce); }
@media (max-width: 900px) {
  body.ecran-parcours .pc-frise-texte small { display: none; }
  body.ecran-parcours .pc-branche { flex-direction: column; gap: .5rem; margin-left: 1rem; }
  body.ecran-parcours .pc-branche > li + li::before { display: none; }
}

/* L'ambition : une grille familles x taille d'agglo, et a cote ce qu'on regle avec elle. */
body.ecran-parcours .pc-temps-corps { display: grid; grid-template-columns: minmax(0, 1fr) 18rem; gap: 1.4rem; align-items: start; }
@media (max-width: 1100px) { body.ecran-parcours .pc-temps-corps { grid-template-columns: minmax(0, 1fr); } }
body.ecran-parcours table.pc-grille-ambition { width: 100%; border: 1px solid var(--border); border-collapse: separate; border-spacing: 0; border-radius: 14px;
  overflow: hidden; font-size: var(--t-petite); }
body.ecran-parcours .pc-grille-ambition thead th { padding: .6rem 1rem; border-bottom: 1px solid var(--border); background: var(--bg-page, #f6f7f5);
  color: var(--text-muted); font-size: var(--t-libelle); font-weight: 700; letter-spacing: .04em; text-align: left; text-transform: uppercase; }
body.ecran-parcours .pc-grille-ambition tbody th { width: 12rem; padding: .55rem 1rem; color: var(--marine); font-weight: 650; text-align: left; white-space: nowrap; }
body.ecran-parcours .pc-grille-ambition td { padding: .55rem 1rem; border-left: 1px solid var(--trait-sd); }
body.ecran-parcours .pc-grille-ambition tbody tr + tr > * { border-top: 1px solid var(--trait-sd); }
body.ecran-parcours .pc-grille-ambition tbody tr:hover > * { background: color-mix(in srgb, var(--vert-pale) 30%, transparent); }
body.ecran-parcours .pc-case-ambition { display: flex; align-items: center; gap: .7rem; }
body.ecran-parcours .pc-case-ambition .pc-saisie input { width: 5.6rem; font-weight: 700; }
body.ecran-parcours .pc-repere { border-bottom: 1px dotted var(--text-faint); color: var(--text-muted); font-size: var(--t-libelle); font-variant-numeric: tabular-nums; cursor: help; }
body.ecran-parcours .pc-case-ambition .pc-proposition, body.ecran-parcours .pc-proposition--exemple { padding: .15rem .5rem; font-size: var(--t-libelle); }
body.ecran-parcours .pc-proposition--exemple { display: inline-block; cursor: default; }
body.ecran-parcours .pc-temps-cote { display: flex; flex-direction: column; gap: .8rem; }
body.ecran-parcours .pc-encart { padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card); }
body.ecran-parcours .pc-encart h3 { margin: 0 0 .7rem; color: var(--marine); font-size: var(--t-petite); font-weight: 700; }
body.ecran-parcours .pc-encart p { margin: 0 0 .55rem; color: var(--text-muted); font-size: var(--t-libelle); line-height: 1.45; }
body.ecran-parcours .pc-encart small { display: block; margin-top: .55rem; color: var(--text-faint); font-size: var(--t-libelle); line-height: 1.4; }
body.ecran-parcours .pc-encart .bouton { height: 2.2rem; margin: .35rem 0 0; }
body.ecran-parcours .pc-compteur { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg-card); }
body.ecran-parcours .pc-compteur:focus-within { border-color: var(--vert); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vert) 15%, transparent); }
body.ecran-parcours .pc-compteur button { flex: none; width: 2.8rem; height: 2.7rem; margin: 0; padding: 0; border: 0; background: var(--bg-page, #f6f7f5); color: var(--vert-fonce);
  font-size: 1.25rem; font-weight: 700; cursor: pointer; }
body.ecran-parcours .pc-compteur button:hover { background: var(--vert-pale); }
body.ecran-parcours .pc-compteur input { flex: 1; min-width: 0; height: 2.7rem !important; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none;
  color: var(--marine); font-size: 1.3rem; font-weight: 800; text-align: center; -moz-appearance: textfield; appearance: textfield; }
body.ecran-parcours .pc-compteur input::-webkit-inner-spin-button, body.ecran-parcours .pc-compteur input::-webkit-outer-spin-button { margin: 0; -webkit-appearance: none; }

/* Les hypotheses : les montants ont besoin de place, la regle de densite a sa bascule. */
body.ecran-parcours .pc-temps .pc-sous-titre-bloc { margin: 1.1rem 0 .6rem; }
body.ecran-parcours .pc-temps-tete + .pc-sous-titre-bloc { margin-top: 0; }
body.ecran-parcours .pc-saisie--large input { width: 8rem; }
body.ecran-parcours .pc-hypothese2-nom { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
body.ecran-parcours .pc-hypothese2-nom label { margin: 0; font: inherit; color: inherit; cursor: pointer; }
body.ecran-parcours .pc-bascule { position: relative; display: inline-flex; flex: none; }
body.ecran-parcours .pc-bascule input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
body.ecran-parcours .pc-bascule i { position: relative; width: 2.1rem; height: 1.2rem; border-radius: 999px; background: var(--border); transition: background .15s ease; }
body.ecran-parcours .pc-bascule i::after { content: ""; position: absolute; top: .15rem; left: .15rem; width: .9rem; height: .9rem; border-radius: 999px; background: #fff;
  box-shadow: 0 1px 2px rgba(22, 35, 63, .25); transition: transform .15s ease; }
body.ecran-parcours .pc-bascule input:checked + i { background: var(--vert); }
body.ecran-parcours .pc-bascule input:checked + i::after { transform: translateX(.9rem); }

/* Les saisies : la valeur en gras, l'unite discrete dans le meme cadre. */
body.ecran-parcours .pc-saisie > span { min-width: 0; padding: 0 .7rem 0 .1rem; background: transparent; color: var(--text-faint); font-size: var(--t-libelle); }
body.ecran-parcours .pc-saisie input { font-weight: 700; color: var(--marine); }
body.ecran-parcours input[type=checkbox] { accent-color: var(--vert); }

/* L'explication de la grille de l'ambition : une legende, pas un reglage. */
body.ecran-parcours .pc-explication { padding: 1rem 1.1rem; border-radius: 14px; background: color-mix(in srgb, var(--vert-pale) 55%, var(--bg-card)); }
body.ecran-parcours .pc-explication h3 { display: flex; align-items: center; gap: .45rem; margin: 0 0 .8rem; color: var(--vert-fonce); font-size: var(--t-petite); font-weight: 700; }
body.ecran-parcours .pc-legende { display: flex; flex-direction: column; gap: .65rem; margin: 0; }
body.ecran-parcours .pc-legende > div { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); align-items: baseline; gap: .6rem; }
body.ecran-parcours .pc-legende dt { margin: 0; }
body.ecran-parcours .pc-legende dd { margin: 0; color: var(--text-muted); font-size: var(--t-libelle); line-height: 1.45; }
body.ecran-parcours .pc-legende .pc-proposition--exemple { background: var(--bg-card); }
body.ecran-parcours .pc-tout-reprendre { display: inline-flex; align-items: center; gap: .35rem; margin: .9rem 0 0; padding: 0; border: 0; background: none; color: var(--vert-fonce);
  font: inherit; font-size: var(--t-petite); font-weight: 700; cursor: pointer; }
body.ecran-parcours .pc-tout-reprendre:hover { text-decoration: underline; }

/* Les hypotheses : des listes de reglages, chacune dit a quelle etape elle sert. */
body.ecran-parcours .pc-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
@media (max-width: 1100px) { body.ecran-parcours .pc-sections { grid-template-columns: minmax(0, 1fr); } }
body.ecran-parcours .pc-sections-pile { display: flex; flex-direction: column; gap: 1rem; }
body.ecran-parcours .pc-section { border: 1px solid var(--border); border-radius: 14px; background: var(--bg-card); overflow: hidden; }
body.ecran-parcours .pc-section-tete { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .7rem 1rem; border-bottom: 1px solid var(--border);
  background: var(--bg-page, #f6f7f5); }
body.ecran-parcours .pc-section-tete h3 { display: flex; align-items: center; gap: .5rem; margin: 0; color: var(--marine); font-size: var(--t-petite); font-weight: 700; }
body.ecran-parcours .pc-section-tete h3 svg { color: var(--vert); }
body.ecran-parcours .pc-section-etape { padding: .12rem .6rem; border-radius: 999px; background: var(--vert-pale); color: var(--vert-fonce); font-size: var(--t-libelle); font-weight: 650;
  white-space: nowrap; }
body.ecran-parcours .pc-regle { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .15rem 1.2rem; padding: .75rem 1rem; }
body.ecran-parcours .pc-regle + .pc-regle { border-top: 1px solid var(--trait-sd); }
body.ecran-parcours .pc-regle:focus-within { background: color-mix(in srgb, var(--vert-pale) 35%, transparent); }
body.ecran-parcours .pc-regle-nom { display: flex; align-items: center; gap: .6rem; color: var(--marine); font-size: var(--t-petite); font-weight: 650; }
body.ecran-parcours .pc-regle-nom label { margin: 0; font: inherit; color: inherit; cursor: pointer; }
body.ecran-parcours .pc-regle .pc-saisie { grid-column: 2; grid-row: 1 / span 2; }
body.ecran-parcours .pc-regle .pc-saisie input { width: 4.6rem; }
body.ecran-parcours .pc-regle .pc-saisie--large input { width: 7.5rem; }
body.ecran-parcours .pc-regle small { grid-column: 1; color: var(--text-faint); font-size: var(--t-libelle); line-height: 1.4; }

/* Le terrain : une puce par question, les regions en une liste, les types en cases a cocher lisibles. */
body.ecran-parcours .pc-puce { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; margin-right: .2rem; border-radius: 999px; background: var(--vert);
  color: #fff; font-size: var(--t-libelle); font-weight: 800; vertical-align: 1px; }
body.ecran-parcours .pc-territoire-choix .pc-sous-titre-bloc { margin: 1.3rem 0 .6rem; }
body.ecran-parcours .pc-territoire-choix .pc-regions { gap: 0; border: 1px solid var(--border); border-radius: 14px; }
body.ecran-parcours .pc-territoire-choix .pc-region { border: 0; border-radius: 0; }
body.ecran-parcours .pc-territoire-choix .pc-region + .pc-region { border-top: 1px solid var(--trait-sd); }
body.ecran-parcours .pc-territoire-choix .pc-region > summary { padding: .55rem .9rem; }
body.ecran-parcours .pc-territoire-choix .pc-region > summary:hover { background: color-mix(in srgb, var(--vert-pale) 35%, transparent); }
body.ecran-parcours .pc-territoire-choix .pc-region[open] > summary { background: var(--bg-page, #f6f7f5); }
body.ecran-parcours .pc-territoire-choix .pc-region label b { font-size: var(--t-petite); }
body.ecran-parcours .pc-grille-types { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
body.ecran-parcours .pc-grille-types tbody th { background: transparent; }
body.ecran-parcours .pc-grille-types td { padding: .4rem .6rem; }
body.ecran-parcours .pc-type-case { justify-content: center; gap: .45rem; min-width: 8.5rem; padding: .35rem .7rem; border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-card); color: var(--text-muted); font-size: var(--t-libelle); font-weight: 650; transition: all .15s ease; }
body.ecran-parcours .pc-type-case:hover { border-color: color-mix(in srgb, var(--vert) 55%, var(--border)); }
body.ecran-parcours .pc-type-case:has(input:checked) { border-color: var(--vert); background: var(--vert-pale); color: var(--vert-fonce); }
body.ecran-parcours .pc-type-case input { margin: 0; }
body.ecran-parcours .pc-type-case small { font-weight: 500; }
body.ecran-parcours .pc-legende > div { display: flex; align-items: baseline; gap: .7rem; }
body.ecran-parcours .pc-legende dt { flex: none; min-width: 4.4rem; white-space: nowrap; }
body.ecran-parcours .pc-type-case span { white-space: nowrap; }
body.ecran-parcours .pc-type-case small { display: inline; }
body.ecran-parcours .pc-legende > div { align-items: center; }

/* Le terrain, aere : trois questions a gauche, la carte a droite qui reste en vue. */
body.ecran-parcours .pc-terrain { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 2rem; align-items: start; }
@media (max-width: 1100px) { body.ecran-parcours .pc-terrain { grid-template-columns: minmax(0, 1fr); } }
body.ecran-parcours .pc-terrain .pc-sous-titre-bloc { margin: 1.6rem 0 .7rem; font-size: var(--t-corps); }
body.ecran-parcours .pc-terrain .pc-sous-titre-bloc:first-child { margin-top: 0; }
body.ecran-parcours .pc-terrain .pc-regions { max-height: none; overflow: visible; gap: 0; padding: 0; border: 1px solid var(--border); border-radius: 14px; }
body.ecran-parcours .pc-terrain .pc-region { border: 0; border-radius: 0; }
body.ecran-parcours .pc-terrain .pc-region + .pc-region { border-top: 1px solid var(--trait-sd); }
body.ecran-parcours .pc-terrain .pc-region > summary { padding: .5rem .9rem; background: transparent; }
body.ecran-parcours .pc-terrain .pc-region > summary:hover { background: color-mix(in srgb, var(--vert-pale) 35%, transparent); }
body.ecran-parcours .pc-terrain .pc-region label { gap: .6rem; font-size: var(--t-petite); color: var(--marine); cursor: pointer; }
body.ecran-parcours .pc-region-ouvrir { display: grid; place-items: center; color: var(--text-faint); transition: transform .15s ease; }
body.ecran-parcours .pc-region[open] .pc-region-ouvrir { transform: rotate(180deg); }
body.ecran-parcours .pc-terrain .pc-deps { padding: .2rem .9rem .8rem 2.2rem; }
body.ecran-parcours .pc-terrain .pc-dep { color: var(--text-muted); }
body.ecran-parcours .pc-terrain .pc-grille-types { border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
body.ecran-parcours .pc-terrain .pc-grille-types thead th { background: transparent; color: var(--text-faint); }
body.ecran-parcours .pc-terrain .pc-grille-types th, body.ecran-parcours .pc-terrain .pc-grille-types td { padding: .55rem .9rem; }
body.ecran-parcours .pc-terrain .pc-grille-types tbody th { color: var(--marine); font-weight: 500; }
body.ecran-parcours .pc-terrain .pc-grille-types input { width: 1.05rem; height: 1.05rem; margin: 0; cursor: pointer; }
body.ecran-parcours .pc-terrain .pc-format-ligne { gap: .8rem; margin: 0; padding: 0; background: none; }
body.ecran-parcours .pc-terrain .pc-format-ligne select { height: 2.45rem; margin: 0; padding: 0 .8rem; border-radius: 999px; font-weight: 650; }
body.ecran-parcours .pc-terrain .pc-france { position: sticky; top: 1rem; padding: 1.2rem; border: 0; background: var(--bg-page, #f6f7f5); }
body.ecran-parcours .pc-terrain .pc-france figcaption { justify-content: flex-start; }
body.ecran-parcours .pc-gardes--fin:empty { display: none; }
body.ecran-parcours .pc-temps-corps--seul { grid-template-columns: minmax(0, 1fr); }

/* La legende de la grille : une case en exemple, ses parties numerotees, une ligne pour chacune. */
body.ecran-parcours .pc-explication { padding: 1.1rem 1.2rem; border: 1px solid var(--border); background: var(--bg-card); }
body.ecran-parcours .pc-explication h3 { color: var(--marine); }
body.ecran-parcours .pc-explication h3 svg { color: var(--vert); }
body.ecran-parcours .pc-exemple-case { display: flex; align-items: center; justify-content: center; gap: .7rem; padding: 1.35rem .6rem .75rem; border-radius: 10px;
  background: var(--bg-page, #f6f7f5); }
body.ecran-parcours .pc-exemple-case > span { position: relative; }
body.ecran-parcours .pc-exemple-case > span::before { content: attr(data-n); position: absolute; top: -1.2rem; left: 50%; display: grid; place-items: center; width: 1rem; height: 1rem;
  border-radius: 999px; background: var(--vert); color: #fff; font-size: .65rem; font-weight: 800; line-height: 1; transform: translateX(-50%); }
body.ecran-parcours .pc-exemple-saisie { display: inline-flex; align-items: baseline; gap: .3rem; padding: .3rem .55rem; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-card); color: var(--text-faint); font-size: var(--t-libelle); white-space: nowrap; }
body.ecran-parcours .pc-exemple-saisie b { color: var(--marine); font-size: var(--t-petite); }
body.ecran-parcours .pc-exemple-case .pc-repere { cursor: default; white-space: nowrap; }
body.ecran-parcours .pc-exemple-proposition { display: inline-flex; align-items: center; height: 1.6rem; padding: 0 .5rem; border: 1px dashed color-mix(in srgb, var(--vert) 50%, var(--border));
  border-radius: 8px; background: var(--bg-card); color: var(--vert-fonce); font-size: var(--t-libelle); font-weight: 600; line-height: 1; white-space: nowrap; }
body.ecran-parcours ol.pc-legende { display: flex; flex-direction: column; gap: .45rem; margin: .9rem 0 0; padding: 0; list-style: none; }
body.ecran-parcours ol.pc-legende li { display: flex; align-items: baseline; gap: .55rem; color: var(--text-muted); font-size: var(--t-libelle); line-height: 1.45; }
body.ecran-parcours ol.pc-legende li i { flex: none; display: inline-grid; place-items: center; width: 1rem; height: 1rem; border-radius: 999px; background: var(--vert-pale);
  color: var(--vert-fonce); font-size: .65rem; font-style: normal; font-weight: 800; line-height: 1; transform: translateY(2px); }
body.ecran-parcours .pc-explication .pc-tout-reprendre { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--trait-sd); width: 100%; }

/* Le terrain en deux rangees : ou chercher a cote de sa carte, puis le genre d'endroit a cote du format. */
body.ecran-parcours .pc-terrain { display: flex; flex-direction: column; gap: 1.6rem; }
body.ecran-parcours .pc-terrain .pc-sous-titre-bloc { margin: 0 0 .7rem; }
body.ecran-parcours .pc-ou { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 1.2rem; align-items: stretch; }
/* La liste prend la hauteur de la carte et defile dedans. */
body.ecran-parcours .pc-ou .pc-regions { height: 0; min-height: 100%; overflow-y: auto; box-sizing: border-box; }
body.ecran-parcours .pc-terrain .pc-region > summary { padding: .62rem .95rem; }
body.ecran-parcours .pc-ou .pc-france { position: static; padding: 1rem 1.2rem .9rem; }
body.ecran-parcours .pc-ou .pc-france svg { max-height: 27rem; }
body.ecran-parcours .pc-terrain-bas { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.2rem; align-items: start; }
@media (max-width: 1100px) { body.ecran-parcours .pc-ou, body.ecran-parcours .pc-terrain-bas { grid-template-columns: minmax(0, 1fr); }
  body.ecran-parcours .pc-ou .pc-regions { height: auto; max-height: 24rem; } }
body.ecran-parcours .pc-format { display: flex; flex-direction: column; gap: .9rem; padding: 1rem; border: 1px solid var(--border); border-radius: 14px; }
body.ecran-parcours .pc-format .pc-segment { align-self: flex-start; display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 999px; }
body.ecran-parcours .pc-format .pc-segment label { display: inline-flex; align-items: center; height: 2.1rem; margin: 0; padding: 0 1.1rem; border-radius: 999px; cursor: pointer;
  color: var(--text-muted); font-size: var(--t-petite); font-weight: 650; }
body.ecran-parcours .pc-format .pc-segment label.on { background: var(--vert); color: #fff; }
body.ecran-parcours .pc-format .pc-segment input { position: absolute; opacity: 0; pointer-events: none; }
body.ecran-parcours .pc-surfaces { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
body.ecran-parcours .pc-surfaces button { height: 3.1rem; margin: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); color: var(--marine);
  font: inherit; font-size: var(--t-corps); font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; transition: all .15s ease; }
body.ecran-parcours .pc-surfaces button:hover { border-color: color-mix(in srgb, var(--vert) 55%, var(--border)); }
body.ecran-parcours .pc-surfaces button.on { border-color: var(--vert); background: var(--vert-pale); color: var(--vert-fonce); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vert) 12%, transparent); }
body.ecran-parcours .pc-champs:disabled .pc-surfaces button { cursor: default; }

/* L'ambition en tableau : par taille d'agglo, l'objectif puis ses reperes, en colonnes alignees. */
body.ecran-parcours .pc-grille-ambition thead th { padding: .55rem .9rem; }
body.ecran-parcours .pc-grille-ambition thead tr:first-child th.pc-groupe { color: var(--marine); text-align: center; letter-spacing: .06em; }
body.ecran-parcours .pc-grille-ambition .pc-sous-tete th { padding: .4rem .9rem; border-top: 1px solid var(--trait-sd); background: var(--bg-card); color: var(--text-faint);
  font-size: var(--t-libelle); font-weight: 600; letter-spacing: 0; text-transform: none; }
body.ecran-parcours .pc-grille-ambition .pc-sous-tete th.num { text-align: right; }
body.ecran-parcours .pc-grille-ambition .pc-groupe { border-left: 1px solid var(--border); }
body.ecran-parcours .pc-grille-ambition td { border-left: 0; padding: .5rem .9rem; }
body.ecran-parcours .pc-grille-ambition td.pc-groupe { border-left: 1px solid var(--border); }
body.ecran-parcours .pc-grille-ambition td.num { text-align: right; }
body.ecran-parcours .pc-grille-ambition tbody th { width: auto; background: transparent; font-weight: 600; }
body.ecran-parcours .pc-grille-ambition .pc-saisie input { width: 5.8rem; }
body.ecran-parcours .pc-grille-ambition .pc-proposition { padding: .2rem .55rem; font-size: var(--t-libelle); white-space: nowrap; }
body.ecran-parcours .pc-sous-grille { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin: .8rem .2rem 0; }
body.ecran-parcours .pc-sous-grille p { display: inline-flex; align-items: center; gap: .4rem; margin: 0; color: var(--text-faint); font-size: var(--t-libelle); }
body.ecran-parcours .pc-sous-grille .pc-tout-reprendre { margin: 0; }
body.ecran-parcours .pc-terrain { align-items: stretch; }
body.ecran-parcours .pc-surfaces { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); }

/* L'ambition : colonnes reparties, valeurs centrees sous leur titre, texte a la taille du corps. */
body.ecran-parcours table.pc-grille-ambition { table-layout: fixed; font-size: var(--t-corps); }
body.ecran-parcours .pc-grille-ambition col.pc-col-type { width: 19%; }
body.ecran-parcours .pc-grille-ambition thead tr:first-child th { font-size: var(--t-petite); }
body.ecran-parcours .pc-grille-ambition .pc-sous-tete th, body.ecran-parcours .pc-grille-ambition .pc-sous-tete th.num { color: var(--text-muted); font-size: var(--t-petite);
  text-align: center; }
body.ecran-parcours .pc-grille-ambition td, body.ecran-parcours .pc-grille-ambition td.num { padding: .6rem .5rem; text-align: center; }
body.ecran-parcours .pc-grille-ambition tbody th { padding: .6rem 1rem; font-size: var(--t-corps); }
body.ecran-parcours .pc-grille-ambition .pc-saisie input { width: 5.4rem; font-size: var(--t-corps); }
body.ecran-parcours .pc-grille-ambition .pc-repere { color: var(--marine); font-size: var(--t-corps); }
body.ecran-parcours .pc-grille-ambition .pc-proposition { padding: .3rem .7rem; font-size: var(--t-petite); }
body.ecran-parcours .pc-grille-ambition .pc-discret { font-size: var(--t-petite); }
body.ecran-parcours .pc-sous-grille p { font-size: var(--t-petite); }

/* Genre d'endroit et format : des tuiles qu'on allume d'un clic, les deux blocs a la meme hauteur. */
body.ecran-parcours .pc-terrain-bas { align-items: stretch; }
body.ecran-parcours .pc-terrain-bas > .pc-bloc-terrain { display: flex; flex-direction: column; }
body.ecran-parcours .pc-types, body.ecran-parcours .pc-format { flex: 1; display: flex; flex-direction: column; gap: .5rem; padding: 1rem 1.1rem;
  border: 1px solid var(--border); border-radius: 14px; }
body.ecran-parcours .pc-types-ligne { display: grid; grid-template-columns: minmax(8rem, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: .6rem; }
body.ecran-parcours .pc-types-tete span { color: var(--text-faint); font-size: var(--t-libelle); font-weight: 700; letter-spacing: .05em; text-align: center; text-transform: uppercase; }
body.ecran-parcours .pc-types-nom { color: var(--marine); font-size: var(--t-petite); font-weight: 600; }
body.ecran-parcours .pc-tuile { position: relative; display: flex; align-items: center; justify-content: center; gap: .5rem; height: 2.5rem; margin: 0; border: 1px solid var(--border);
  border-radius: 10px; background: var(--bg-card); color: var(--text-muted); cursor: pointer; transition: all .15s ease; }
body.ecran-parcours .pc-tuile input { position: absolute; opacity: 0; pointer-events: none; }
body.ecran-parcours .pc-tuile:hover { border-color: color-mix(in srgb, var(--vert) 55%, var(--border)); }
body.ecran-parcours .pc-tuile-coche { display: grid; place-items: center; width: 1.05rem; height: 1.05rem; box-sizing: border-box; border: 1.5px solid var(--border); border-radius: 5px;
  background: var(--bg-card); color: transparent; transition: all .15s ease; }
body.ecran-parcours .pc-tuile-n { font-size: var(--t-petite); font-weight: 650; font-variant-numeric: tabular-nums; }
body.ecran-parcours .pc-tuile-n small { color: var(--text-faint); font-size: var(--t-libelle); font-weight: 500; }
body.ecran-parcours .pc-tuile:has(input:checked) { border-color: var(--vert); background: var(--vert-pale); color: var(--vert-fonce); }
body.ecran-parcours .pc-tuile:has(input:checked) .pc-tuile-coche { border-color: var(--vert); background: var(--vert); color: #fff; }
body.ecran-parcours .pc-tuile:has(input:focus-visible) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--vert) 20%, transparent); }
body.ecran-parcours .pc-tuile--vide { border-style: dashed; color: var(--text-faint); cursor: default; }
body.ecran-parcours .pc-format { gap: 1rem; }
body.ecran-parcours .pc-surfaces { flex: 1; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(3.4rem, 1fr); }
body.ecran-parcours .pc-surfaces button { position: relative; display: flex; align-items: baseline; justify-content: center; gap: .3rem; height: auto; padding: .8rem;
  color: var(--text-muted); font-size: var(--t-petite); font-weight: 600; }
body.ecran-parcours .pc-surfaces button b { color: var(--marine); font-size: 1.35rem; font-weight: 800; }
body.ecran-parcours .pc-surfaces .pc-tuile-coche { position: absolute; top: .55rem; right: .55rem; }
body.ecran-parcours .pc-surfaces button.on b { color: var(--vert-fonce); }
body.ecran-parcours .pc-surfaces button.on .pc-tuile-coche { border-color: var(--vert); background: var(--vert); color: #fff; }
body.ecran-parcours .pc-types, body.ecran-parcours .pc-format { align-items: stretch; }
/* Sans la carte (fichier des contours injoignable), la liste garde une hauteur lisible. */
body.ecran-parcours .pc-ou .pc-regions { min-height: max(100%, 22rem); }

/* Le terrain en cartes-questions, comme les hypotheses. */
body.ecran-parcours .pc-terrain .pc-section { display: flex; flex-direction: column; }
body.ecran-parcours .pc-terrain .pc-section-tete h3 { font-size: var(--t-corps); }
body.ecran-parcours .pc-section-aide { color: var(--text-faint); font-size: var(--t-libelle); text-align: right; }
body.ecran-parcours .pc-terrain .pc-ou { padding: 1rem; }
body.ecran-parcours .pc-terrain .pc-types, body.ecran-parcours .pc-terrain .pc-format { padding: 1rem 1.1rem; border: 0; border-radius: 0; }
body.ecran-parcours .pc-terrain-bas { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
/* Les cases a cocher du reglage, dessinees comme le reste de l'application. */
body.ecran-parcours .pc-parametrer input[type=checkbox] { appearance: none; -webkit-appearance: none; flex: none; width: 1.1rem; height: 1.1rem; margin: 0; border: 1.5px solid
  color-mix(in srgb, var(--marine) 25%, var(--border)); border-radius: 5px; background: var(--bg-card) center / .8rem no-repeat; cursor: pointer; transition: all .12s ease; }
body.ecran-parcours .pc-parametrer input[type=checkbox]:hover { border-color: var(--vert); }
body.ecran-parcours .pc-parametrer input[type=checkbox]:checked { border-color: var(--vert); background-color: var(--vert); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
body.ecran-parcours .pc-parametrer input[type=checkbox]:indeterminate { border-color: var(--vert); background-color: var(--vert); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' stroke='white' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
body.ecran-parcours .pc-parametrer input[type=checkbox]:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--vert) 22%, transparent); }
/* Les regions : des lignes franches, la region prise se voit. */
body.ecran-parcours .pc-terrain .pc-region > summary { padding: .7rem 1rem; }
body.ecran-parcours .pc-terrain .pc-region label { gap: .7rem; font-size: var(--t-corps); font-weight: 500; }
body.ecran-parcours .pc-terrain .pc-region:has(> summary input:checked) > summary,
body.ecran-parcours .pc-terrain .pc-region:has(> summary input:indeterminate) > summary { background: color-mix(in srgb, var(--vert-pale) 60%, transparent); }
body.ecran-parcours .pc-terrain .pc-region:has(> summary input:checked) label { color: var(--vert-fonce); font-weight: 650; }
body.ecran-parcours .pc-terrain .pc-deps { gap: .45rem 1rem; padding: .6rem 1rem .9rem 2.8rem; }
body.ecran-parcours .pc-terrain .pc-dep { gap: .55rem; font-size: var(--t-petite); }
body.ecran-parcours .pc-terrain .pc-dep:has(input:checked) { color: var(--vert-fonce); font-weight: 600; }
/* Les tuiles : la case visible est celle du dessin, pas la case native. */
body.ecran-parcours .pc-tuile { height: 2.7rem; }
body.ecran-parcours .pc-tuile-n { font-size: var(--t-corps); }
body.ecran-parcours .pc-types-nom { font-size: var(--t-corps); }
body.ecran-parcours .pc-types { gap: .6rem; }
body.ecran-parcours .pc-surfaces button b { font-size: 1.5rem; }
body.ecran-parcours .pc-surfaces button { flex-direction: column; align-items: center; justify-content: center; gap: 0; line-height: 1.1; }

/* Les valeurs du produit en lecture : la valeur, son unite. */
body.ecran-parcours .pc-regle .pc-valeur { grid-column: 2; grid-row: 1 / span 2; color: var(--marine); font-size: var(--t-corps); font-weight: 800; font-variant-numeric: tabular-nums;
  white-space: nowrap; }
body.ecran-parcours .pc-regle .pc-valeur small { color: var(--text-faint); font-size: var(--t-libelle); font-weight: 600; }
body.ecran-parcours .pc-section--seule { margin-top: 1.1rem; }
body.ecran-parcours .pc-section-note { margin: 0; padding: .7rem 1rem .9rem; color: var(--text-faint); font-size: var(--t-libelle); line-height: 1.45; }
/* Le rural : une ligne, sa note a la place de la petite agglo. */
body.ecran-parcours .pc-grille-ambition td.pc-note-rural { color: var(--text-faint); font-size: var(--t-petite); font-style: italic; }
body.ecran-parcours .pc-tuile--large { grid-column: 2 / span 2; }

/* La regle du diagnostic en image : deux pistes sur 0 a 150 % du rendement minimum. */
body.ecran-parcours .pc-echelle { display: flex; flex-direction: column; gap: .9rem; padding: 1rem 1rem .8rem; border-bottom: 1px solid var(--trait-sd);
  background: color-mix(in srgb, var(--vert-pale) 25%, var(--bg-card)); }
body.ecran-parcours .pc-echelle p { margin: 0; color: var(--text-faint); font-size: var(--t-libelle); }
body.ecran-parcours .pc-echelle-ligne { display: grid; grid-template-columns: 9rem minmax(0, 1fr); align-items: center; gap: .3rem .8rem; }
body.ecran-parcours .pc-echelle-nom { color: var(--marine); font-size: var(--t-libelle); font-weight: 700; }
body.ecran-parcours .pc-echelle-ligne small { grid-column: 2; color: var(--text-faint); font-size: var(--t-libelle); }
body.ecran-parcours .pc-piste { position: relative; height: .7rem; margin-top: .9rem; border-radius: 999px; background: var(--trait-sd); }
body.ecran-parcours .pc-zone { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 999px; transition: all .2s ease; }
body.ecran-parcours .pc-zone--alerte, body.ecran-parcours .pc-zone--sature { background: color-mix(in srgb, var(--danger) 45%, var(--bg-card)); }
body.ecran-parcours .pc-zone--trancher { background: color-mix(in srgb, var(--alerte) 55%, var(--bg-card)); border-radius: 0; }
body.ecran-parcours .pc-zone--ameliorer { background: color-mix(in srgb, var(--vert) 60%, var(--bg-card)); }
body.ecran-parcours .pc-marque { position: absolute; bottom: calc(100% + .2rem); transform: translateX(-50%); color: var(--marine); font-size: var(--t-libelle); font-weight: 800;
  font-variant-numeric: tabular-nums; transition: left .2s ease; }
body.ecran-parcours .pc-marque::after { content: ""; position: absolute; top: calc(100% + .15rem); left: 50%; width: 2px; height: calc(.7rem + .25rem); background: var(--marine);
  transform: translateX(-50%); opacity: .55; }
body.ecran-parcours .pc-marque--cent { color: var(--vert-fonce); }
body.ecran-parcours .pc-marque--cent::after { background: var(--vert-fonce); opacity: 1; }
body.ecran-parcours .pc-echelle-cas { display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
body.ecran-parcours .pc-echelle-cas span, body.ecran-parcours .pc-plage small span { display: inline-flex; align-items: center; gap: .3rem; }
body.ecran-parcours .pc-echelle-cas span::before, body.ecran-parcours .pc-plage small span::before { content: ""; width: .6rem; height: .6rem; border-radius: 3px; }
body.ecran-parcours .pc-echelle-cas .sature::before { background: color-mix(in srgb, var(--danger) 45%, var(--bg-card)); }
body.ecran-parcours .pc-echelle-cas .trancher::before { background: color-mix(in srgb, var(--alerte) 55%, var(--bg-card)); }
body.ecran-parcours .pc-echelle-cas .ameliorer::before { background: color-mix(in srgb, var(--vert) 60%, var(--bg-card)); }
/* La plage des surfaces : la franchise, puis l'integree. */
body.ecran-parcours .pc-plage { display: flex; flex-direction: column; gap: .45rem; padding: .9rem 1rem .8rem; border-bottom: 1px solid var(--trait-sd); }
body.ecran-parcours .pc-plage .pc-piste { margin-top: 0; }
body.ecran-parcours .pc-plage small { display: flex; gap: .9rem; color: var(--text-faint); font-size: var(--t-libelle); }
body.ecran-parcours .pc-zone--franchise { background: color-mix(in srgb, var(--alerte) 55%, var(--bg-card)); border-radius: 999px 0 0 999px; }
body.ecran-parcours .pc-zone--integre { background: color-mix(in srgb, var(--vert) 60%, var(--bg-card)); border-radius: 0 999px 999px 0; }
body.ecran-parcours .pc-plage .franchise::before { background: color-mix(in srgb, var(--alerte) 55%, var(--bg-card)); }
body.ecran-parcours .pc-plage .integre::before { background: color-mix(in srgb, var(--vert) 60%, var(--bg-card)); }
body.ecran-parcours .pc-valeur--absente { color: var(--text-faint); font-size: var(--t-libelle); font-weight: 600; }

/* Figé : un bandeau qui dit pourquoi on ne change plus rien, et comment essayer autre chose. */
body.ecran-parcours .pc-fige { display: flex; align-items: center; gap: .7rem; margin: 0 0 1rem; padding: .8rem 1.1rem; border: 1px solid var(--border); border-radius: 14px;
  background: var(--bg-card); color: var(--text-muted); font-size: var(--t-petite); }
body.ecran-parcours .pc-fige svg { flex: none; color: var(--vert-fonce); }
body.ecran-parcours .pc-fige b { color: var(--marine); }

/* L'aide a la lecture du tableau de l'ambition : un numero par colonne. */
body.ecran-parcours .pc-lecture { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin: 0 0 .9rem; padding: 0; list-style: none; }
body.ecran-parcours .pc-lecture li { display: flex; align-items: flex-start; gap: .6rem; padding: .7rem .9rem; border-radius: 12px;
  background: color-mix(in srgb, var(--vert-pale) 45%, var(--bg-card)); color: var(--text-muted); font-size: var(--t-libelle); line-height: 1.45; }
body.ecran-parcours .pc-lecture li b { display: block; color: var(--marine); font-size: var(--t-petite); }
body.ecran-parcours .pc-lecture i, body.ecran-parcours .pc-num-lecture { flex: none; display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem;
  border-radius: 999px; background: var(--vert); color: #fff; font-size: .7rem; font-style: normal; font-weight: 800; line-height: 1; }
body.ecran-parcours .pc-num-lecture { width: 1.1rem; height: 1.1rem; margin-right: .2rem; font-size: .65rem; vertical-align: 1px; }
@media (max-width: 1000px) { body.ecran-parcours .pc-lecture { grid-template-columns: minmax(0, 1fr); } }

/* Une regle en phrase : son nom en petit, la phrase avec sa valeur dedans. */
body.ecran-parcours .pc-regle--phrase { display: block; padding: .8rem 1rem; }
body.ecran-parcours .pc-regle--phrase .pc-regle-nom { display: block; margin: 0 0 .25rem; color: var(--text-faint); font-size: var(--t-libelle); font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase; }
body.ecran-parcours .pc-phrase { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .45rem; margin: 0; color: var(--marine); font-size: var(--t-petite); line-height: 1.5; }
body.ecran-parcours .pc-phrase .pc-valeur { display: inline-flex; align-items: baseline; gap: .2rem; padding: .1rem .55rem; border-radius: 8px; background: var(--vert-pale);
  color: var(--vert-fonce); font-size: var(--t-petite); font-weight: 800; }
body.ecran-parcours .pc-saisie--phrase input { width: 4.6rem; height: 1.9rem !important; }
body.ecran-parcours .pc-saisie--phrase.pc-saisie--large input { width: 7rem; }
body.ecran-parcours .pc-phrase-aide { margin: .45rem 0 0; color: var(--text-faint); font-size: var(--t-libelle); line-height: 1.45; }
body.ecran-parcours .pc-choix-plafond .pc-segment { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 999px; }
body.ecran-parcours .pc-choix-plafond .pc-segment label { display: inline-flex; align-items: center; height: 1.9rem; margin: 0; padding: 0 1rem; border-radius: 999px;
  color: var(--text-muted); font-size: var(--t-petite); font-weight: 650; cursor: pointer; }
body.ecran-parcours .pc-choix-plafond .pc-segment label.on { background: var(--vert); color: #fff; }
body.ecran-parcours .pc-choix-plafond .pc-segment input { position: absolute; opacity: 0; pointer-events: none; }
body.ecran-parcours .pc-note-diamart { display: flex; align-items: center; gap: .45rem; margin: -.3rem 0 1rem; color: var(--text-faint); font-size: var(--t-libelle); }
body.ecran-parcours .pc-echelle-nom small { display: block; color: var(--text-faint); font-size: var(--t-libelle); font-weight: 500; }
body.ecran-parcours .pc-echelle-cas .alerte::before { background: color-mix(in srgb, var(--danger) 45%, var(--bg-card)); }
body.ecran-parcours .pc-echelle-cas .tenu::before { background: var(--trait-sd); border: 1px solid var(--border); }

/* En lecture : les valeurs en texte, et seulement ce qui a ete choisi. */
body.ecran-parcours .pc-champs:disabled .pc-saisie { border-color: transparent; background: transparent; box-shadow: none; }
body.ecran-parcours .pc-champs:disabled .pc-saisie input { background: transparent; color: var(--marine); -webkit-text-fill-color: var(--marine); opacity: 1; }
body.ecran-parcours .pc-ou--lu .pc-region:not(:has(input:checked)):not(:has(input:indeterminate)) { display: none; }
body.ecran-parcours .pc-ou--lu .pc-regions { height: auto; min-height: 0; }
body.ecran-parcours .pc-types--lu .pc-tuile:not(:has(input:checked)) { opacity: .4; }
body.ecran-parcours .pc-tout { margin: 0; padding: .9rem 1rem; color: var(--marine); font-size: var(--t-corps); font-weight: 700; }
body.ecran-parcours .pc-ou .pc-tout { grid-column: 1; }
/* La phrase se lit d'un trait : la valeur est un mot de la phrase, pas une case a part. */
body.ecran-parcours .pc-phrase { display: block; line-height: 2.1; }
body.ecran-parcours .pc-phrase .pc-valeur, body.ecran-parcours .pc-phrase .pc-saisie { vertical-align: middle; margin: 0 .15rem; }
body.ecran-parcours .pc-phrase .pc-saisie { display: inline-flex; }
body.ecran-parcours .pc-choix-plafond { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; line-height: 1.4; }
body.ecran-parcours .pc-choix-plafond .pc-saisie { margin: 0; }
body.ecran-parcours .pc-ou--lu .pc-tout ~ .pc-regions { display: none; }
body.ecran-parcours .pc-ou--lu .pc-tout { align-self: start; padding: 1rem 1.1rem; border: 1px solid var(--border); border-radius: 14px; }
body.ecran-parcours .pc-champs:disabled .pc-aide-saisie { display: none; }

/* L'ambition en liste : une ligne par type, une seule rangee de titres, l'aide a cote. */
body.ecran-parcours .pc-liste-ambition { table-layout: auto; }
body.ecran-parcours .pc-liste-ambition thead th { padding: .7rem 1rem; background: var(--bg-page, #f6f7f5); color: var(--text-muted); font-size: var(--t-petite);
  font-weight: 650; letter-spacing: 0; text-align: center; text-transform: none; }
body.ecran-parcours .pc-liste-ambition thead th:first-child { text-align: left; }
body.ecran-parcours .pc-liste-ambition tbody th { padding: .65rem 1rem; }
body.ecran-parcours .pc-liste-ambition tbody th b { display: block; color: var(--marine); font-size: var(--t-corps); font-weight: 650; }
body.ecran-parcours .pc-liste-ambition tbody th small { display: block; color: var(--text-faint); font-size: var(--t-libelle); font-weight: 500; }
body.ecran-parcours .pc-liste-ambition td { padding: .6rem 1rem; border-left: 0; text-align: center; }
body.ecran-parcours .pc-lecture-courte { display: flex; flex-direction: column; gap: .55rem; margin: 0; padding: 0; list-style: none; }
body.ecran-parcours .pc-lecture-courte li { display: flex; align-items: baseline; gap: .5rem; color: var(--text-muted); font-size: var(--t-libelle); line-height: 1.45; }
body.ecran-parcours .pc-lecture-courte .pc-num-lecture { transform: translateY(1px); }
body.ecran-parcours .pc-encart .pc-tout-reprendre { width: 100%; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--trait-sd); }
body.ecran-parcours .pc-encart .pc-choix-plafond .pc-saisie input { width: 4.4rem; }
body.ecran-parcours .pc-encart .pc-phrase { line-height: 1.5; }

/* Avance : une etiquette discrete, et le bandeau qui dit que Diamart les calibre. */
body.ecran-parcours .pc-etiquette-avance { display: inline-flex; align-items: center; height: 1.35rem; margin-left: .4rem; padding: 0 .55rem; border: 1px solid var(--border);
  border-radius: 999px; background: var(--bg-page, #f6f7f5); color: var(--text-muted); font-size: var(--t-libelle); font-style: normal; font-weight: 700;
  letter-spacing: .03em; vertical-align: 2px; }
body.ecran-parcours .pc-branche-texte .pc-etiquette-avance { height: 1.1rem; margin-left: .3rem; padding: 0 .4rem; font-size: .65rem; }
body.ecran-parcours .pc-calibre { display: flex; align-items: center; gap: .7rem; margin: -.2rem 0 1.1rem; padding: .8rem 1rem; border-radius: 12px;
  background: color-mix(in srgb, var(--vert-pale) 55%, var(--bg-card)); color: var(--text-muted); font-size: var(--t-petite); line-height: 1.45; }
body.ecran-parcours .pc-calibre svg { flex: none; color: var(--vert-fonce); }
body.ecran-parcours .pc-calibre b { color: var(--marine); }

/* Le raisonnement du diagnostic : deux questions, trois issues, les valeurs dedans. */
body.ecran-parcours .pc-arbre { display: flex; flex-direction: column; gap: .55rem; padding: 1rem 1.1rem 1.1rem; }
body.ecran-parcours .pc-question { display: flex; align-items: baseline; gap: .6rem; }
body.ecran-parcours .pc-question p { margin: 0; color: var(--marine); font-size: var(--t-petite); font-weight: 650; line-height: 2.1; }
body.ecran-parcours .pc-question .pc-num-lecture { transform: translateY(-1px); }
body.ecran-parcours .pc-question .pc-valeur, body.ecran-parcours .pc-question .pc-saisie, body.ecran-parcours .pc-issues .pc-valeur, body.ecran-parcours .pc-issues .pc-saisie {
  vertical-align: middle; margin: 0 .15rem; }
body.ecran-parcours .pc-issues { display: flex; flex-direction: column; gap: .4rem; margin: 0 0 0 1.7rem; padding: 0; list-style: none; }
body.ecran-parcours .pc-issues li { display: grid; grid-template-columns: 11rem minmax(0, 1fr); align-items: center; gap: .8rem; padding: .45rem .8rem; border-radius: 10px;
  border-left: 4px solid; color: var(--text-muted); font-size: var(--t-petite); }
body.ecran-parcours .pc-issues li b { color: var(--marine); }
body.ecran-parcours .pc-issues li.vert { border-color: var(--vert); background: color-mix(in srgb, var(--vert-pale) 55%, var(--bg-card)); }
body.ecran-parcours .pc-issues li.ambre { border-color: var(--alerte); background: color-mix(in srgb, var(--alerte-fond) 70%, var(--bg-card)); }
body.ecran-parcours .pc-issues li.rouge { border-color: var(--danger); background: color-mix(in srgb, var(--danger-fond) 70%, var(--bg-card)); }
body.ecran-parcours .pc-question small { display: block; margin-top: -.2rem; color: var(--text-faint); font-size: var(--t-libelle); }
body.ecran-parcours .pc-question p { font-weight: 600; }
body.ecran-parcours .pc-issues li { grid-template-columns: 12rem minmax(0, 1fr); }
body.ecran-parcours .pc-issues li > span { display: flex; flex-direction: column; gap: .05rem; }
body.ecran-parcours .pc-issues li > span:first-child { display: block; line-height: 2; }
body.ecran-parcours .pc-issues li small { display: block; color: var(--text-faint); font-size: var(--t-libelle); font-weight: 500; line-height: 1.35; }
body.ecran-parcours .pc-etiquette-avance { width: auto; min-width: 0; }
body.ecran-parcours .pc-arbre .pc-valeur { display: inline-flex; align-items: baseline; gap: .2rem; padding: .1rem .55rem; border-radius: 8px; background: var(--vert-pale); color: var(--vert-fonce); font-weight: 800; }

/* Moins de mots : le diagnostic en une ligne et trois issues, les regles d'ouverture en libelle et valeur. */
body.ecran-parcours .pc-liste-ambition tbody th small { display: inline; margin-left: .25rem; }
body.ecran-parcours .pc-liste-ambition tbody th, body.ecran-parcours .pc-liste-ambition td { padding-top: .5rem; padding-bottom: .5rem; }
body.ecran-parcours .pc-diag { display: flex; flex-direction: column; gap: .7rem; padding: 1.1rem 1.1rem 1.2rem; }
body.ecran-parcours .pc-diag-entree { margin: 0; color: var(--marine); font-size: var(--t-corps); font-weight: 650; line-height: 2; }
body.ecran-parcours .pc-diag-entree small { display: block; color: var(--text-faint); font-size: var(--t-libelle); font-weight: 500; line-height: 1.3; }
body.ecran-parcours .pc-diag-titre { margin: .3rem 0 0; color: var(--text-muted); font-size: var(--t-petite); }
body.ecran-parcours .pc-diag .pc-issues { margin: 0; }
body.ecran-parcours .pc-diag .pc-issues li { grid-template-columns: 10rem minmax(0, 1fr); padding: .55rem .9rem; }
body.ecran-parcours .pc-diag .pc-issues li > span:first-child small { display: inline; margin-left: .35rem; }
body.ecran-parcours .pc-diag .pc-valeur, body.ecran-parcours .pc-regle-ligne .pc-valeur { display: inline-flex; align-items: baseline; padding: .1rem .55rem; border-radius: 8px;
  background: var(--vert-pale); color: var(--vert-fonce); font-size: var(--t-petite); font-weight: 800; vertical-align: middle; }
body.ecran-parcours .pc-regle-ligne { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1.1rem; }
body.ecran-parcours .pc-regle-ligne + .pc-regle-ligne { border-top: 1px solid var(--trait-sd); }
body.ecran-parcours .pc-regle-court { display: inline-flex; align-items: center; gap: .35rem; color: var(--marine); font-size: var(--t-petite); font-weight: 600; }
body.ecran-parcours .pc-info { display: inline-grid; place-items: center; color: var(--text-faint); cursor: help; }
body.ecran-parcours .pc-info:hover, body.ecran-parcours .pc-info:focus { color: var(--vert-fonce); outline: none; }
body.ecran-parcours .pc-calibre { margin-top: 0; }
/* Combien d'ouvertures : en tete du temps, bien en vue. */
body.ecran-parcours .pc-question-ouvertures { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 0 0 1rem; padding: .8rem 1rem;
  border: 1px solid color-mix(in srgb, var(--vert) 35%, var(--border)); border-radius: 14px; background: color-mix(in srgb, var(--vert-pale) 40%, var(--bg-card)); }
body.ecran-parcours .pc-question-titre { display: inline-flex; align-items: center; gap: .45rem; color: var(--marine); font-size: var(--t-corps); font-weight: 700; }
body.ecran-parcours .pc-question-titre svg { color: var(--vert-fonce); }
body.ecran-parcours .pc-question-ouvertures small { color: var(--text-faint); font-size: var(--t-libelle); }
body.ecran-parcours .pc-question-ouvertures .pc-segment { background: var(--bg-card); }
body.ecran-parcours .pc-question-ouvertures .pc-saisie input { width: 4.4rem; }
body.ecran-parcours .pc-question-ouvertures .pc-valeur { padding: .1rem .6rem; border-radius: 8px; background: var(--vert-pale); color: var(--vert-fonce); font-weight: 800; }
body.ecran-parcours .pc-diag .pc-issues li { grid-template-columns: 13rem minmax(0, 1fr); }
body.ecran-parcours .pc-diag .pc-issues li small { white-space: nowrap; }
body.ecran-parcours .pc-case-libre { display: inline-flex; align-items: center; gap: .45rem; margin: 0; color: var(--marine); font-size: var(--t-petite); font-weight: 600; cursor: pointer; }
body.ecran-parcours .pc-saisie--eteinte { opacity: .45; }
/* L'ambition alignee : la question et le tableau dans une colonne, l'aide a cote, les hauts alignes. */
body.ecran-parcours .pc-temps-principal { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
body.ecran-parcours .pc-temps-principal .pc-question-ouvertures { margin: 0; }
body.ecran-parcours .pc-liste-ambition tbody th b { display: inline; }
body.ecran-parcours .pc-liste-ambition tbody th small { display: inline; margin-left: .3rem; }
body.ecran-parcours .pc-liste-ambition td, body.ecran-parcours .pc-liste-ambition tbody th { height: 3.1rem; padding-top: .35rem; padding-bottom: .35rem; vertical-align: middle; }
body.ecran-parcours .pc-liste-ambition .pc-saisie { vertical-align: middle; }
body.ecran-parcours .pc-question-ouvertures { min-height: 3.4rem; box-sizing: border-box; }
body.ecran-parcours .pc-diag-etape { display: block; margin: 0; color: var(--marine); font-size: var(--t-petite); font-weight: 650; line-height: 2; }
body.ecran-parcours .pc-diag-etape small { display: block; margin-left: 1.6rem; color: var(--text-faint); font-size: var(--t-libelle); font-weight: 500; line-height: 1.3; }
body.ecran-parcours .pc-diag .pc-issues { margin-left: 1.6rem; }
body.ecran-parcours .pc-diag .pc-issues li > span:last-child { display: flex; flex-direction: column; }
body.ecran-parcours .pc-diag .pc-issues li > span:last-child small { color: var(--text-faint); font-size: var(--t-libelle); font-weight: 500; white-space: normal; }
body.ecran-parcours .pc-num-dans-texte { margin: 0 .1rem; transform: translateY(-1px); }

/* La liste des schemas : le menu d'une ligne n'est plus rogne par sa cellule ni par la carte ; les chiffres en valeur. */
body.ecran-parcours table.pc-liste td.pc-geste { overflow: visible; }
@media (min-width: 1100px) { body.ecran-parcours .pc-liste-carte.pc-carte--tableau { overflow: visible; } }
body.ecran-parcours table.pc-liste tbody tr:nth-last-child(-n+2):not(:first-child) .pc-menu-ligne-liste { top: auto; bottom: calc(100% + .3rem); }
body.ecran-parcours table.pc-liste .pc-valeur { font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; }
body.ecran-parcours table.pc-liste .pc-sur { font-size: 1rem; }
body.ecran-parcours table.pc-liste .pc-chiffre--gain .pc-valeur { color: var(--vert-fonce); }
body.ecran-parcours table.pc-liste .pc-sous { font-size: var(--t-petite); }

/* Les sous-etapes : des titres qui se lisent, un resume en mots. */
body.ecran-parcours .pc-branche-pas { min-height: 3.6rem; padding: .55rem .9rem .55rem .6rem; }
body.ecran-parcours .pc-branche-texte b { font-size: var(--t-corps); }
body.ecran-parcours .pc-branche-texte small { font-size: var(--t-petite); color: var(--text-muted); }
body.ecran-parcours .pc-branche-rond { width: 2.3rem; height: 2.3rem; font-size: var(--t-petite); }
body.ecran-parcours .pc-branche::before { height: 3.15rem; }
body.ecran-parcours .pc-branche > li + li::before { top: calc(1.8rem - 1px); }

/* Les types : une ligne par lieu, des bascules grande ou petite agglo. */
body.ecran-parcours .pc-type-ligne { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 0; }
body.ecran-parcours .pc-type-ligne + .pc-type-ligne { border-top: 1px solid var(--trait-sd); }
body.ecran-parcours .pc-type-choix { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: .45rem; }
body.ecran-parcours .pc-bascule-choix { display: inline-flex; align-items: center; gap: .45rem; height: 2.2rem; margin: 0; padding: 0 .9rem 0 .7rem; border: 1px solid var(--border);
  border-radius: 999px; background: var(--bg-card); color: var(--text-muted); font-size: var(--t-petite); font-weight: 600; cursor: pointer; transition: all .15s ease; }
body.ecran-parcours .pc-bascule-choix:hover { border-color: color-mix(in srgb, var(--vert) 55%, var(--border)); }
body.ecran-parcours .pc-bascule-choix:has(input:checked) { border-color: var(--vert); background: var(--vert-pale); color: var(--vert-fonce); }
body.ecran-parcours .pc-types--lu .pc-bascule-choix:not(:has(input:checked)) { opacity: .4; }
body.ecran-parcours .pc-terrain .pc-types { gap: 0; padding: .4rem 1.1rem; }

/* Les surfaces : deux lignes, puis franchise et integree en clair. */
body.ecran-parcours .pc-plage-saisie { display: inline-flex; align-items: center; gap: .4rem; color: var(--text-muted); font-size: var(--t-petite); }
body.ecran-parcours .pc-formats { display: flex; flex-wrap: wrap; gap: .5rem; padding: .9rem 1.1rem 0; }
body.ecran-parcours .pc-format-puce { display: inline-flex; align-items: baseline; gap: .45rem; padding: .45rem .8rem; border-radius: 10px; font-size: var(--t-petite); font-weight: 600; }
body.ecran-parcours .pc-format-puce b { font-weight: 800; }
body.ecran-parcours .pc-format-puce--franchise { background: var(--alerte-fond); color: var(--alerte); }
body.ecran-parcours .pc-format-puce--integre { background: var(--vert-pale); color: var(--vert-fonce); }
body.ecran-parcours .pc-lien-mini { margin: 0; padding: 0; border: 0; background: none; color: var(--vert-fonce); font: inherit; font-weight: 700; cursor: pointer; }
body.ecran-parcours .pc-lien-mini:hover { text-decoration: underline; }
body.ecran-parcours .pc-vide-alerte { grid-column: 1 / -1; display: flex; align-items: center; gap: .4rem; margin: 0; padding: .6rem .9rem; border-radius: 10px;
  background: var(--alerte-fond); color: var(--alerte); font-size: var(--t-petite); font-weight: 600; }
body.ecran-parcours .pc-ou--tout .pc-regions { display: none; }
body.ecran-parcours .pc-diag-etape small { margin-top: .1rem; }
body.ecran-parcours .pc-temps-cote .pc-encart h3 { font-size: var(--t-corps); }
body.ecran-parcours .pc-lecture-courte { gap: .7rem; }
body.ecran-parcours .pc-lecture-courte li { font-size: var(--t-petite); color: var(--marine); }
body.ecran-parcours .pc-lecture-courte .pc-num-lecture { width: 1.35rem; height: 1.35rem; font-size: .75rem; }
body.ecran-parcours .pc-encart .pc-tout-reprendre { font-size: var(--t-corps); }
/* Ou chercher : « Toute la France » en tete de liste, le mode de clic sur la carte. */
body.ecran-parcours .pc-ou-liste { display: flex; flex-direction: column; gap: .5rem; min-width: 0; height: 0; min-height: max(100%, 22rem); }
body.ecran-parcours .pc-ou-liste .pc-regions { flex: 1; height: auto; min-height: 0; }
body.ecran-parcours .pc-ou--lu .pc-ou-liste, body.ecran-parcours .pc-ou--tout .pc-ou-liste { height: auto; min-height: 0; }
body.ecran-parcours .pc-region-tout { display: flex; align-items: center; gap: .7rem; margin: 0; padding: .7rem 1rem; border: 1px solid var(--border); border-radius: 14px;
  background: var(--bg-page, #f6f7f5); color: var(--marine); font-size: var(--t-corps); font-weight: 700; cursor: pointer; }
body.ecran-parcours .pc-ou--lu .pc-region-tout, body.ecran-parcours .pc-ou--tout .pc-region-tout { display: none; }
body.ecran-parcours .pc-france { position: relative; }
body.ecran-parcours .pc-carte-mode { position: absolute; top: .8rem; right: .8rem; z-index: 2; display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--bg-card); }
body.ecran-parcours .pc-carte-mode label { display: inline-flex; align-items: center; height: 1.8rem; margin: 0; padding: 0 .8rem; border-radius: 999px; color: var(--text-muted);
  font-size: var(--t-libelle); font-weight: 650; cursor: pointer; }
body.ecran-parcours .pc-carte-mode label.on { background: var(--vert); color: #fff; }
body.ecran-parcours .pc-carte-mode input { position: absolute; opacity: 0; pointer-events: none; }
/* Les issues du diagnostic : la condition par rapport a l'objectif, le cas, ce qu'il veut dire. */
body.ecran-parcours .pc-issues--sens li { grid-template-columns: 11.5rem minmax(0, 1fr); align-items: start; padding: .7rem .9rem; }
body.ecran-parcours .pc-condition { display: inline-block; justify-self: start; padding: .15rem .55rem; border-radius: 8px; background: var(--bg-card); color: var(--marine);
  font-size: var(--t-petite); font-weight: 700; line-height: 1.5 !important; white-space: nowrap; }
body.ecran-parcours .pc-issues--sens li > span:last-child small { margin-top: .15rem; font-size: var(--t-libelle); line-height: 1.45; color: var(--text-muted); }
body.ecran-parcours .pc-ou .pc-france { position: relative; }
/* Les deux mesures du diagnostic nommees, et un magasin d'exemple qui les traverse. */
body.ecran-parcours .pc-mesure { display: inline-block; margin-right: .3rem; padding: .05rem .5rem; border-radius: 6px; background: var(--bg-page, #f6f7f5); color: var(--marine);
  font-size: var(--t-libelle); font-weight: 800; letter-spacing: .02em; text-transform: uppercase; vertical-align: 1px; }
body.ecran-parcours .pc-exemple-magasin { display: flex; align-items: flex-start; gap: .5rem; margin: .3rem 0 0 1.6rem; padding: .7rem .9rem; border: 1px dashed var(--border);
  border-radius: 10px; color: var(--text-muted); font-size: var(--t-petite); line-height: 1.5; }
body.ecran-parcours .pc-exemple-magasin svg { flex: none; margin-top: .2rem; color: var(--vert-fonce); }
body.ecran-parcours .pc-exemple-magasin b { color: var(--marine); }
body.ecran-parcours .pc-ou--lu .pc-ou-liste { align-self: start; }
body.ecran-parcours .pc-ou--lu .pc-regions { flex: none; }

/* L'attente d'un calcul : un anneau qui tourne, une barre qui file, puis ce que le calcul regarde et comment lire le resultat. */
body.ecran-parcours .pc-attente { display: flex; align-items: center; gap: 1.4rem; padding: 1.5rem 1.6rem; }
body.ecran-parcours .pc-attente-anneau { flex: none; width: 3.4rem; height: 3.4rem; border: 4px solid var(--vert-pale); border-top-color: var(--vert); border-radius: 999px;
  animation: pc-tourne 1s linear infinite; }
@keyframes pc-tourne { to { transform: rotate(360deg); } }
body.ecran-parcours .pc-attente-texte { flex: 1; min-width: 0; }
body.ecran-parcours .pc-attente-texte h2 { margin: 0 0 .3rem; color: var(--marine); font-size: 1.25rem; font-weight: 700; }
body.ecran-parcours .pc-attente-texte p { margin: 0 0 .3rem; color: var(--text-muted); font-size: var(--t-petite); }
body.ecran-parcours .pc-attente-etat { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; }
body.ecran-parcours .pc-voyant { flex: none; display: inline-block; width: .55rem; height: .55rem; border-radius: 999px; }
body.ecran-parcours .pc-voyant--vert { background: var(--vert); box-shadow: 0 0 0 4px color-mix(in srgb, var(--vert) 20%, transparent); }
body.ecran-parcours .pc-voyant--ambre { background: var(--alerte); box-shadow: 0 0 0 4px color-mix(in srgb, var(--alerte) 20%, transparent); }
body.ecran-parcours .pc-attente-barre { position: relative; display: block; height: 4px; margin-top: .8rem; overflow: hidden; border-radius: 999px; background: var(--vert-pale); }
body.ecran-parcours .pc-attente-barre i { position: absolute; top: 0; bottom: 0; left: -30%; width: 30%; border-radius: 999px; background: var(--vert); animation: pc-file 1.6s ease-in-out infinite; }
@keyframes pc-file { to { left: 100%; } }
/* Mouvement reduit : l'attente reste animee, plus lentement ; une page figee se lirait comme une panne. */
@media (prefers-reduced-motion: reduce) { body.ecran-parcours .pc-attente-anneau { animation-duration: 2.4s; } body.ecran-parcours .pc-attente-barre i { animation-duration: 3s; } }
body.ecran-parcours .pc-attente-corps { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1rem; margin-top: 1rem; align-items: start; }
@media (max-width: 1000px) { body.ecran-parcours .pc-attente-corps { grid-template-columns: minmax(0, 1fr); } }
body.ecran-parcours .pc-portee, body.ecran-parcours .pc-conseils { padding: 1.3rem 1.4rem; }
body.ecran-parcours .pc-portee h2, body.ecran-parcours .pc-conseils h2 { display: flex; align-items: center; gap: .45rem; margin: 0 0 1rem; color: var(--marine); font-size: 1.05rem; font-weight: 700; }
body.ecran-parcours .pc-conseils h2 svg { color: var(--vert-fonce); }
body.ecran-parcours .pc-portee-chiffres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .7rem; margin-bottom: 1.2rem; }
body.ecran-parcours .pc-portee-chiffres > div { display: flex; flex-direction: column; gap: .2rem; padding: .9rem 1rem; border-radius: 12px;
  background: color-mix(in srgb, var(--vert-pale) 45%, var(--bg-card)); }
body.ecran-parcours .pc-portee-chiffres b { color: var(--vert-fonce); font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
body.ecran-parcours .pc-portee-chiffres span { color: var(--text-muted); font-size: var(--t-libelle); line-height: 1.35; }
body.ecran-parcours .pc-etapes-calcul { display: flex; flex-direction: column; gap: .55rem; margin: 0; padding: 0; list-style: none; counter-reset: etape; }
body.ecran-parcours .pc-etapes-calcul li { position: relative; padding-left: 2rem; color: var(--marine); font-size: var(--t-petite); line-height: 1.5; counter-increment: etape; }
body.ecran-parcours .pc-etapes-calcul li::before { content: counter(etape); position: absolute; left: 0; top: .05rem; display: grid; place-items: center; width: 1.35rem; height: 1.35rem;
  border-radius: 999px; background: var(--vert-pale); color: var(--vert-fonce); font-size: .72rem; font-weight: 800; }
body.ecran-parcours .pc-conseils ul { display: flex; flex-direction: column; gap: .9rem; margin: 0; padding: 0; list-style: none; }
body.ecran-parcours .pc-conseils li { padding: 0 0 .9rem; border-bottom: 1px solid var(--trait-sd); color: var(--text-muted); font-size: var(--t-petite); line-height: 1.5; }
body.ecran-parcours .pc-conseils li:last-child { padding-bottom: 0; border-bottom: 0; }
body.ecran-parcours .pc-conseils li b { display: block; margin-bottom: .1rem; color: var(--marine); }
body.ecran-parcours .pc-objectif-lu { color: var(--marine); font-size: var(--t-corps); font-weight: 800; font-variant-numeric: tabular-nums; }
body.ecran-parcours .pc-objectif-lu small { color: var(--text-faint); font-size: var(--t-libelle); font-weight: 600; }
body.ecran-parcours .pc-proposition--lue { display: inline-block; cursor: default; opacity: .8; }

/* Mon reseau : la photo du reseau, les onglets, les cartes de magasins, le panneau des gestes. */
body.ecran-parcours .pc-reseau [data-mag][hidden] { display: none !important; }
/* Une couleur par cas, reprise par la barre, les points, les pastilles et le liseré des cartes. */
body.ecran-parcours .pc-cas--ameliorer { --pc-cas: var(--vert); --pc-cas-fond: var(--vert-pale); --pc-cas-texte: var(--vert-fonce); }
body.ecran-parcours .pc-cas--trancher { --pc-cas: var(--ambre); --pc-cas-fond: var(--alerte-fond); --pc-cas-texte: var(--alerte); }
body.ecran-parcours .pc-cas--baisser { --pc-cas: var(--danger); --pc-cas-fond: var(--danger-fond); --pc-cas-texte: var(--danger); }
body.ecran-parcours .pc-cas--relocaliser_ou_fermer { --pc-cas: color-mix(in srgb, var(--danger) 72%, #000); --pc-cas-fond: var(--danger-fond); --pc-cas-texte: var(--danger); }
body.ecran-parcours .pc-cas--fermeture_a_discuter { --pc-cas: var(--text-muted); --pc-cas-fond: var(--bg-page, #f6f7f5); --pc-cas-texte: var(--text-muted); }
body.ecran-parcours .pc-cas--hors_diagnostic { --pc-cas: color-mix(in srgb, var(--vert) 22%, var(--trait-sd)); --pc-cas-fond: var(--bg-page, #f6f7f5); --pc-cas-texte: var(--text-muted); }
body.ecran-parcours .pc-cas--sans_repere { --pc-cas: var(--border); --pc-cas-fond: var(--bg-page, #f6f7f5); --pc-cas-texte: var(--text-faint); }
body.ecran-parcours .pc-cas-point { flex: none; width: .6rem; height: .6rem; border-radius: 999px; background: var(--pc-cas, var(--border)); }

/* La photo du reseau. */
body.ecran-parcours .pc-photo { margin: 0 0 1.3rem; padding: 1.3rem 1.5rem 1.2rem; }
body.ecran-parcours .pc-photo h2 { margin: 0; color: var(--marine); font-size: 1.4rem; font-weight: 750; letter-spacing: -.01em; line-height: 1.2; }
body.ecran-parcours .pc-photo-chiffre { display: flex; flex-direction: column; align-items: flex-end; cursor: help; }
body.ecran-parcours .pc-photo-chiffre b { color: var(--vert-fonce); font-size: 1.4rem; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
body.ecran-parcours .pc-photo-chiffre > span { color: var(--text-faint); font-size: var(--t-libelle); font-weight: 600; }
body.ecran-parcours .pc-photo-legende { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: .85rem 0 0; padding: 0; list-style: none; color: var(--text-muted); font-size: var(--t-petite); }
body.ecran-parcours .pc-photo-legende li { display: inline-flex; align-items: center; gap: .45rem; }
body.ecran-parcours .pc-photo-legende b { color: var(--marine); font-weight: 800; }

/* Les onglets et la recherche, sur une ligne. */
body.ecran-parcours .pc-barre-outils { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1rem; margin: 0 0 1rem; }
body.ecran-parcours .pc-onglets { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); }
body.ecran-parcours .pc-onglets button { display: inline-flex; align-items: center; gap: .5rem; height: 2.3rem; margin: 0; padding: 0 1.1rem; border: 0; border-radius: 999px;
  background: none; color: var(--text-muted); font: inherit; font-size: var(--t-petite); font-weight: 650; cursor: pointer; transition: all .15s ease; }
body.ecran-parcours .pc-onglets button:hover { color: var(--marine); }
body.ecran-parcours .pc-onglets button.on { background: var(--vert); color: #fff; box-shadow: 0 1px 3px color-mix(in srgb, var(--vert) 35%, transparent); }
body.ecran-parcours .pc-onglet-n { min-width: 1.5rem; padding: 0 .4rem; box-sizing: border-box; border-radius: 999px; background: var(--bg-page, #f6f7f5); color: var(--marine);
  font-size: var(--t-libelle); font-weight: 800; line-height: 1.5rem; text-align: center; }
body.ecran-parcours .pc-onglets button.on .pc-onglet-n { background: rgba(255, 255, 255, .25); color: #fff; }
body.ecran-parcours .pc-recherche { display: inline-flex; align-items: center; gap: .5rem; width: min(19rem, 100%); height: 2.5rem; box-sizing: border-box; margin: 0; padding: 0 .9rem;
  border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); color: var(--text-faint); }
body.ecran-parcours .pc-recherche:focus-within { border-color: var(--vert); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vert) 15%, transparent); }
body.ecran-parcours .pc-recherche input { flex: 1; min-width: 0; height: 100% !important; margin: 0; padding: 0; border: 0; background: none; box-shadow: none; font-size: var(--t-petite); outline: none; }

/* Une liste : son accroche, ses filtres, ses cartes, sa pagination. */
body.ecran-parcours .pc-liste-mag { display: flex; flex-direction: column; gap: .9rem; margin: 0 0 1.2rem; }
body.ecran-parcours .pc-liste-intro { margin: 0 0 .1rem; color: var(--text-muted); font-size: var(--t-petite); }
body.ecran-parcours .pc-filtres { display: flex; flex-wrap: wrap; gap: .4rem; }
body.ecran-parcours .pc-filtres button { display: inline-flex; align-items: center; gap: .45rem; height: 2.1rem; margin: 0; padding: 0 .85rem; border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-card); color: var(--text-muted); font: inherit; font-size: var(--t-libelle); font-weight: 650; cursor: pointer; }
body.ecran-parcours .pc-filtres button b { color: var(--marine); }
body.ecran-parcours .pc-filtres button.on { border-color: var(--vert); background: var(--vert-pale); color: var(--vert-fonce); box-shadow: inset 0 0 0 1px var(--vert); }
body.ecran-parcours .pc-rien-a-revoir { display: flex; align-items: center; gap: .5rem; margin: 0; padding: 1rem 1.2rem; border-radius: 14px; background: var(--vert-pale);
  color: var(--vert-fonce); font-weight: 700; }
body.ecran-parcours .pc-pages { display: flex; align-items: center; justify-content: center; gap: 1rem; color: var(--text-muted); font-size: var(--t-petite); }
body.ecran-parcours .pc-pages .bouton { display: inline-flex; align-items: center; gap: .3rem; height: 2.2rem; margin: 0; padding: 0 .9rem; }
body.ecran-parcours .pc-liste-vide { margin: 0; padding: 1rem; border: 1px dashed var(--border); border-radius: 12px; color: var(--text-faint); text-align: center; }

/* La carte d'un magasin : qui il est, ses ventes et son potentiel face a l'objectif, ce qu'on en lit, le choix. */
body.ecran-parcours .pc-mag { position: relative; display: flex; flex-direction: column; gap: 1.1rem; padding: 1.15rem 1.35rem 1rem 1.5rem; border: 1px solid var(--border);
  border-radius: 16px; background: var(--bg-card); box-shadow: 0 1px 2px rgba(20, 40, 30, .04); overflow: hidden; }
body.ecran-parcours .pc-mag::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: var(--pc-cas, var(--border)); }
body.ecran-parcours .pc-mag-tete { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .5rem 1rem; }
body.ecran-parcours .pc-mag-nom h3 { margin: 0; color: var(--marine); font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
body.ecran-parcours .pc-mag-nom p { margin: .15rem 0 0; color: var(--text-faint); font-size: var(--t-libelle); }
body.ecran-parcours .pc-mag .pc-cas-pastille { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .75rem; border-radius: 999px; background: var(--pc-cas-fond, var(--bg-page));
  color: var(--pc-cas-texte, var(--text-muted)); font-size: var(--t-libelle); font-weight: 700; white-space: nowrap; }
body.ecran-parcours .pc-ampleur { font-size: var(--t-petite); letter-spacing: .05em; cursor: help; }
body.ecran-parcours .pc-ampleur--etoiles { color: var(--ambre); }
body.ecran-parcours .pc-ampleur--losanges { color: var(--danger); }
body.ecran-parcours .pc-ampleur--extreme { padding: .05rem .45rem; border-radius: 999px; background: var(--alerte-fond); color: var(--alerte); font-size: var(--t-libelle); font-weight: 700; letter-spacing: 0; }
/* La jauge : deux barres sur la meme echelle, le trait de l'objectif les traverse. */
body.ecran-parcours .pc-rdt { display: flex; flex-direction: column; gap: .6rem; }
body.ecran-parcours .pc-rdt-ligne { display: grid; grid-template-columns: 7.2rem minmax(0, 1fr) 6.4rem; align-items: center; gap: .8rem; }
body.ecran-parcours .pc-rdt-nom { display: inline-flex; align-items: center; gap: .45rem; color: var(--text-muted); font-size: var(--t-petite); font-weight: 600; white-space: nowrap; }
body.ecran-parcours .pc-rdt-point { flex: none; width: .6rem; height: .6rem; border-radius: 3px; }
body.ecran-parcours .pc-rdt-point--r, body.ecran-parcours .pc-rdt-r { background: var(--ambre); }
body.ecran-parcours .pc-rdt-point--p, body.ecran-parcours .pc-rdt-p { background: var(--vert); }
body.ecran-parcours .pc-rdt-piste { position: relative; height: .7rem; border-radius: 999px; background: var(--trait-sd); }
body.ecran-parcours .pc-rdt-piste i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 999px; }
body.ecran-parcours .pc-rdt-piste::after { content: ""; position: absolute; top: -.3rem; bottom: -.3rem; left: var(--objectif); width: 2px; border-radius: 2px; background: var(--text); transform: translateX(-1px); }
body.ecran-parcours .pc-rdt-ligne > b { color: var(--marine); font-size: var(--t-corps); font-weight: 800; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
body.ecran-parcours .pc-rdt-ligne > b small { color: var(--text-faint); font-size: var(--t-libelle); font-weight: 600; }
body.ecran-parcours .pc-rdt-legende { margin-top: -.15rem; }
body.ecran-parcours .pc-rdt-objectif { position: relative; height: 1.25rem; }
body.ecran-parcours .pc-rdt-objectif span { position: absolute; top: 0; left: var(--objectif); transform: translateX(-50%); padding: .05rem .5rem; border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-card); color: var(--text); font-size: .7rem; font-weight: 700; white-space: nowrap; box-shadow: 0 1px 2px rgba(20, 40, 30, .06); }
/* Ce qu'on en lit, dans un encart calme. */
body.ecran-parcours .pc-mag-lecture { display: flex; flex-direction: column; gap: .45rem; margin: 0; padding: .85rem 1rem; border-radius: 12px; background: var(--bg-page, #f6f7f5); }
body.ecran-parcours .pc-mag-lecture p { margin: 0; color: var(--marine); font-size: var(--t-petite); line-height: 1.5; }
body.ecran-parcours .pc-mag-lecture .pc-non-capte { color: var(--text-muted); cursor: help; }
body.ecran-parcours .pc-non-capte b { color: var(--vert-fonce); font-size: 1.05rem; font-weight: 800; }

/* Le panneau : les deux gestes de l'etape, reliés comme un fil. */
body.ecran-parcours .pc-cote-collant { position: sticky; top: 1rem; align-self: start; }
body.ecran-parcours .pc-resume-reseau { padding: 1.25rem 1.25rem 1.2rem; }
body.ecran-parcours .pc-resume-reseau h2 { margin: 0 0 1.1rem; color: var(--marine); font-size: 1.02rem; font-weight: 700; }
body.ecran-parcours .pc-gestes { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
body.ecran-parcours .pc-gestes > li { position: relative; display: grid; grid-template-columns: 1.9rem minmax(0, 1fr); gap: .8rem; padding: 0 0 1.3rem; }
body.ecran-parcours .pc-gestes > li:last-child { padding-bottom: 0; }
body.ecran-parcours .pc-gestes > li:not(:last-child)::before { content: ""; position: absolute; top: 2.2rem; bottom: .3rem; left: .95rem; width: 2px; transform: translateX(-1px);
  border-radius: 2px; background: var(--trait-sd); }
body.ecran-parcours .pc-gestes > li.fait:not(:last-child)::before { background: var(--vert); }
body.ecran-parcours .pc-geste-num { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; box-sizing: border-box; border: 2px solid var(--border); border-radius: 999px;
  background: var(--bg-card); color: var(--text-faint); font-size: var(--t-petite); font-weight: 800; }
body.ecran-parcours .pc-gestes li.en-cours .pc-geste-num { border-color: var(--vert); color: var(--vert-fonce); box-shadow: 0 0 0 4px color-mix(in srgb, var(--vert) 14%, transparent); }
body.ecran-parcours .pc-gestes li.fait .pc-geste-num, body.ecran-parcours .pc-resume-fait .pc-geste-num { border-color: var(--vert); background: var(--vert); color: #fff; }
body.ecran-parcours .pc-geste-corps { display: flex; flex-direction: column; gap: .5rem; min-width: 0; padding-top: .2rem; }
body.ecran-parcours .pc-geste-corps > b { color: var(--marine); font-size: var(--t-petite); font-weight: 700; line-height: 1.35; }
body.ecran-parcours .pc-gestes li:not(.en-cours):not(.fait) .pc-geste-corps > b { color: var(--text-muted); }
body.ecran-parcours .pc-geste-corps > small { margin-top: -.25rem; color: var(--text-faint); font-size: var(--t-libelle); }
body.ecran-parcours .pc-geste-corps form { margin: 0; }
body.ecran-parcours .pc-compte-reponses { display: flex; align-items: baseline; gap: .45rem; }
body.ecran-parcours .pc-compte-reponses span { color: var(--text-muted); font-size: 1rem; font-weight: 700; }
body.ecran-parcours .pc-compte-reponses span b { color: var(--vert-fonce); font-size: 1.7rem; font-weight: 800; line-height: 1; }
body.ecran-parcours .pc-compte-reponses small { color: var(--text-faint); font-size: var(--t-libelle); }
body.ecran-parcours .pc-resume-reseau progress { width: 100%; height: .45rem; margin: 0; }
body.ecran-parcours .pc-manquants { display: flex; flex-direction: column; gap: .2rem; margin: 0; padding: 0; list-style: none; font-size: var(--t-libelle); }
body.ecran-parcours .pc-manquants a { color: var(--marine); font-weight: 600; text-decoration: none; }
body.ecran-parcours .pc-manquants a::before { content: ""; display: inline-block; width: .4rem; height: .4rem; margin-right: .45rem; border-radius: 999px; background: var(--ambre); vertical-align: middle; }
body.ecran-parcours .pc-manquants a:hover { color: var(--vert-fonce); text-decoration: underline; }
body.ecran-parcours .pc-lien-geste { margin: 0; padding: 0; border: 0; background: none; color: var(--vert-fonce); font: inherit; font-size: var(--t-libelle); font-weight: 650;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
body.ecran-parcours .pc-lien-geste:hover { color: var(--marine); }
body.ecran-parcours .pc-resume-fait { display: flex; align-items: center; gap: .75rem; margin: 0 0 1rem; }
body.ecran-parcours .pc-resume-fait b { display: block; color: var(--marine); }
body.ecran-parcours .pc-resume-fait small { color: var(--text-faint); font-size: var(--t-libelle); }
body.ecran-parcours .pc-effets-bloc { margin: 1.2rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--trait-sd); }
body.ecran-parcours .pc-effets-bloc h3 { margin: 0 0 .55rem; color: var(--text-muted); font-size: var(--t-libelle); font-weight: 700; }
body.ecran-parcours .pc-effets { display: flex; flex-direction: column; gap: .35rem; margin: 0; padding: 0; list-style: none; }
body.ecran-parcours .pc-effets li { display: flex; justify-content: space-between; color: var(--text-muted); font-size: var(--t-petite); }
body.ecran-parcours .pc-effets b { color: var(--marine); }
body.ecran-parcours .pc-effets b.plus { color: var(--vert-fonce); }
body.ecran-parcours .pc-effets b.moins { color: var(--danger); }

/* Le rappel du perimetre sous la photo, et la fenetre qui dit comment les magasins sont classes. */
body.ecran-parcours .pc-photo-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin: 1rem 0 0; padding: .9rem 0 0;
  border-top: 1px solid var(--trait-sd); }
body.ecran-parcours .pc-perimetre { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
body.ecran-parcours .pc-perimetre li { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 999px; background: var(--bg-page, #f6f7f5);
  color: var(--text-muted); font-size: var(--t-libelle); font-weight: 600; }
body.ecran-parcours .pc-perimetre li svg { color: var(--vert-fonce); }
body.ecran-parcours .pc-lien-regles { display: inline-flex; align-items: center; gap: .4rem; height: 2.1rem; margin: 0; padding: 0 .9rem; border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-card); color: var(--vert-fonce); font: inherit; font-size: var(--t-petite); font-weight: 650; cursor: pointer; transition: all .15s ease; }
body.ecran-parcours .pc-lien-regles:hover { border-color: var(--vert); background: var(--vert-pale); }
body.ecran-parcours .pc-seuil-lu { display: flex; align-items: baseline; gap: .5rem; }
body.ecran-parcours .pc-seuil-lu .pc-cas-point { position: relative; top: -.05rem; }
body.ecran-parcours .pc-seuil-lu small { color: var(--text-faint); font-size: var(--t-libelle); white-space: nowrap; }
body.ecran-parcours .pc-regles-modale { width: min(42rem, calc(100vw - 2rem)); }
body.ecran-parcours .pc-regles-bloc { margin: 1.3rem 0 0; }
body.ecran-parcours .pc-regles-bloc h3 { margin: 0 0 .6rem; color: var(--text-faint); font-size: var(--t-libelle); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
body.ecran-parcours .pc-regles-note { margin: .5rem 0 0; color: var(--text-faint); font-size: var(--t-libelle); }
body.ecran-parcours .pc-regles-arbre { display: flex; flex-direction: column; gap: .7rem; margin: 0; padding: 0; list-style: none; }
body.ecran-parcours .pc-regles-arbre > li { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: .75rem; padding: .9rem 1rem; border: 1px solid var(--border); border-radius: 14px; }
body.ecran-parcours .pc-regles-arbre > li > div { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
body.ecran-parcours .pc-regles-arbre > li > div > b { color: var(--marine); font-size: var(--t-corps); font-weight: 700; }
body.ecran-parcours .pc-regles-arbre > li > div > small { color: var(--text-muted); font-size: var(--t-petite); line-height: 1.45; }
body.ecran-parcours .pc-regles-issues { display: flex; flex-direction: column; gap: .35rem; margin: .55rem 0 0; padding: 0; list-style: none; }
body.ecran-parcours .pc-regles-issues li { display: grid; grid-template-columns: .6rem minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .45rem .7rem; border-radius: 10px;
  background: var(--bg-page, #f6f7f5); font-size: var(--t-petite); }
body.ecran-parcours .pc-regles-issues li span { color: var(--text-muted); }
body.ecran-parcours .pc-regles-issues li b { padding: .15rem .6rem; border-radius: 999px; background: var(--pc-cas-fond, var(--bg-card)); color: var(--pc-cas-texte, var(--marine));
  font-size: var(--t-libelle); font-weight: 700; white-space: nowrap; }
body.ecran-parcours .pc-cas--hors_diagnostic .pc-regles-issues li b, body.ecran-parcours .pc-regles-issues li.pc-cas--hors_diagnostic b { background: var(--bg-card); }
body.ecran-parcours .pc-regles-table { width: 100%; border-collapse: collapse; font-size: var(--t-petite); }
body.ecran-parcours .pc-regles-table th, body.ecran-parcours .pc-regles-table td { padding: .5rem .6rem; border-bottom: 1px solid var(--trait-sd); text-align: left; }
body.ecran-parcours .pc-regles-table thead th { color: var(--text-faint); font-size: var(--t-libelle); font-weight: 700; }
body.ecran-parcours .pc-regles-table tbody th { color: var(--marine); font-weight: 600; }
body.ecran-parcours .pc-regles-table td { color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
body.ecran-parcours .pc-regles-table td b { color: var(--marine); }
body.ecran-parcours .pc-regles-table td small { color: var(--text-faint); }
body.ecran-parcours .pc-regles-table td em { margin-left: .3rem; color: var(--danger); font-style: normal; font-weight: 700; font-size: var(--t-libelle); }
body.ecran-parcours .pc-regles-table tbody tr:last-child > * { border-bottom: 0; }
body.ecran-parcours .pc-regles-pied { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin: 1.4rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--trait-sd); }
body.ecran-parcours .pc-regles-pied form { margin: 0; }
body.ecran-parcours .pc-regles-pied .bouton { display: inline-flex; align-items: center; gap: .4rem; height: 2.3rem; margin: 0; padding: 0 1rem; }
body.ecran-parcours .pc-regles-modale .pc-regles-arbre, body.ecran-parcours .pc-regles-modale .pc-regles-issues { margin-left: 0; margin-right: 0; padding: 0; }
body.ecran-parcours .pc-regles-modale .pc-regles-arbre > li, body.ecran-parcours .pc-regles-modale .pc-regles-issues li { max-width: none; margin: 0; line-height: 1.4; }
body.ecran-parcours .pc-regles-modale .pc-regles-table th, body.ecran-parcours .pc-regles-modale .pc-regles-table td { background: none; }
body.ecran-parcours .pc-regles-modale .pc-regles-table thead th { background: var(--bg-page, #f6f7f5); }
body.ecran-parcours .pc-regles-modale .pc-regles-table td small { display: inline; }
body.ecran-parcours .pc-regles-modale .pc-regles-table { border: 1px solid var(--border); border-radius: 12px; border-collapse: separate; border-spacing: 0; overflow: hidden; }

/* La photo du reseau : le donut des cas, le titre et sa legende, le CA non capte. */
body.ecran-parcours .pc-photo-corps { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem 1.8rem; }
@media (max-width: 760px) { body.ecran-parcours .pc-photo-corps { grid-template-columns: auto minmax(0, 1fr); }
  body.ecran-parcours .pc-photo-corps .pc-photo-chiffre { grid-column: 1 / -1; align-items: flex-start; } }
body.ecran-parcours .pc-donut { position: relative; width: 7.2rem; height: 7.2rem; margin: 0; }
body.ecran-parcours .pc-donut svg { display: block; width: 100%; height: 100%; }
body.ecran-parcours .pc-donut circle { fill: none; stroke: var(--pc-cas, var(--trait-sd)); stroke-width: 5.4; }
body.ecran-parcours .pc-donut .pc-donut-fond { stroke: var(--trait-sd); }
body.ecran-parcours .pc-donut figcaption { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
body.ecran-parcours .pc-donut figcaption b { color: var(--marine); font-size: 1.55rem; font-weight: 800; line-height: 1.05; }
body.ecran-parcours .pc-donut figcaption span { color: var(--text-faint); font-size: var(--t-libelle); font-weight: 600; }
body.ecran-parcours .pc-photo-texte { min-width: 0; }
body.ecran-parcours .pc-photo-texte p { margin: .25rem 0 0; color: var(--text-muted); font-size: var(--t-petite); }
body.ecran-parcours .pc-photo-texte .pc-photo-legende { margin-top: .75rem; }
body.ecran-parcours .pc-photo-pied { margin-top: 1.1rem; }

/* La carte : le constat a gauche, la decision a droite (en dessous sur ecran etroit). */
body.ecran-parcours .pc-mag-grille { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; gap: 1.3rem; }
@media (max-width: 1150px) { body.ecran-parcours .pc-mag-grille { grid-template-columns: minmax(0, 1fr); } }
body.ecran-parcours .pc-mag-section-tete { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem .6rem; margin: 0 0 .75rem; }
body.ecran-parcours .pc-mag-section-tete h4 { margin: 0; color: var(--marine); font-size: var(--t-petite); font-weight: 700; }
body.ecran-parcours .pc-mag-section-tete h4 em { margin-left: .35rem; padding: .05rem .5rem; border-radius: 999px; background: var(--bg-card); color: var(--text-faint);
  font-size: var(--t-libelle); font-style: normal; font-weight: 600; }
body.ecran-parcours .pc-mag-section-tete small { color: var(--text-faint); font-size: var(--t-libelle); }
body.ecran-parcours .pc-mag-constat { display: flex; flex-direction: column; min-width: 0; }
body.ecran-parcours .pc-mag-constat .pc-mag-lecture { margin-top: .9rem; }
body.ecran-parcours .pc-non-capte small { display: block; margin-top: .1rem; color: var(--text-faint); font-size: var(--t-libelle); }
body.ecran-parcours .pc-mag-decision { display: flex; flex-direction: column; min-width: 0; padding: 1rem 1rem 1.05rem; border: 1px solid var(--border); border-radius: 14px;
  background: var(--bg-page, #f6f7f5); }
body.ecran-parcours .pc-mag-decision .pc-mag-section-tete h4 { color: var(--vert-fonce); }
/* Un choix par ligne : la coche, ce qu'il change, son impact a droite ; le choix retenu passe au vert. */
body.ecran-parcours .pc-options { display: flex; flex-direction: column; gap: .5rem; }
body.ecran-parcours .pc-option { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) auto; align-items: center; gap: .75rem; width: 100%; min-height: 3.3rem; box-sizing: border-box;
  margin: 0; padding: .6rem .95rem; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); color: var(--marine); text-align: left; font: inherit;
  cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
body.ecran-parcours .pc-option:hover { border-color: color-mix(in srgb, var(--vert) 55%, var(--border)); box-shadow: 0 2px 8px rgba(20, 40, 30, .06); }
body.ecran-parcours .pc-option .pc-choix-coche { display: grid; place-items: center; width: 1.25rem; height: 1.25rem; box-sizing: border-box; border: 1.5px solid var(--border);
  border-radius: 999px; background: var(--bg-card); color: transparent; }
body.ecran-parcours .pc-option.on { border-color: var(--vert); background: var(--vert-pale); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vert) 14%, transparent); }
body.ecran-parcours .pc-option.on .pc-choix-coche { border-color: var(--vert); background: var(--vert); color: #fff; }
body.ecran-parcours .pc-option-texte { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
body.ecran-parcours .pc-option-texte b { color: var(--marine); font-size: var(--t-petite); font-weight: 700; }
body.ecran-parcours .pc-option.on .pc-option-texte b { color: var(--vert-fonce); }
body.ecran-parcours .pc-option-texte small { color: var(--text-muted); font-size: var(--t-libelle); line-height: 1.35; }
body.ecran-parcours .pc-option-impact { display: inline-flex; align-items: baseline; gap: .3rem; white-space: nowrap; }
body.ecran-parcours .pc-option-impact b { font-size: 1.02rem; font-weight: 800; font-variant-numeric: tabular-nums; }
body.ecran-parcours .pc-option-impact b.plus { color: var(--vert-fonce); }
body.ecran-parcours .pc-option-impact b.moins { color: var(--danger); }
body.ecran-parcours .pc-option-impact b.nul { color: var(--text-faint); font-weight: 700; }
body.ecran-parcours .pc-option-impact small { color: var(--text-faint); font-size: var(--t-libelle); }
body.ecran-parcours .pc-option--lue { cursor: default; }
body.ecran-parcours .pc-option--lue:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--vert) 14%, transparent); }
/* Le filtre des magasins sans reponse. */
body.ecran-parcours .pc-filtre-sans { --pc-cas: var(--ambre); }
/* Le CA a prendre, mis en avant a droite de la photo. */
body.ecran-parcours .pc-photo-corps .pc-photo-chiffre { flex-direction: row; align-items: center; gap: .85rem; padding: .95rem 1.2rem; border-radius: 16px;
  background: var(--vert-pale); }
body.ecran-parcours .pc-photo-chiffre-ico { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 999px; background: var(--bg-card); color: var(--vert-fonce); }
body.ecran-parcours .pc-photo-chiffre > div { display: flex; flex-direction: column; }
body.ecran-parcours .pc-photo-chiffre > div b { color: var(--vert-fonce); font-size: 1.65rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
body.ecran-parcours .pc-photo-chiffre > div > span { color: var(--vert-fonce); font-size: var(--t-petite); font-weight: 700; }
body.ecran-parcours .pc-photo-chiffre > div small { color: var(--text-muted); font-size: var(--t-libelle); }
/* Liste ou carte : deux boutons colles, comme les onglets en plus discret. */
body.ecran-parcours .pc-barre-outils .pc-vue { margin-left: auto; }
body.ecran-parcours .pc-vue { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); }
body.ecran-parcours .pc-vue button { display: inline-flex; align-items: center; gap: .35rem; height: 2.1rem; margin: 0; padding: 0 .85rem; border: 0; border-radius: 999px; background: none;
  color: var(--text-muted); font: inherit; font-size: var(--t-libelle); font-weight: 650; cursor: pointer; }
body.ecran-parcours .pc-vue button.on { background: var(--vert-pale); color: var(--vert-fonce); }
/* La carte du reseau : les magasins, couleur de leur cas, la legende en bas a gauche. */
body.ecran-parcours .pc-carte-reseau { position: relative; margin: 0 0 1.2rem; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--bg-card); }
body.ecran-parcours .pc-carte-fond { height: min(62vh, 36rem); }
body.ecran-parcours .pc-carte-legende { position: absolute; left: .8rem; bottom: .8rem; display: flex; flex-wrap: wrap; gap: .3rem .9rem; max-width: calc(100% - 1.6rem); margin: 0;
  padding: .5rem .8rem; border-radius: 12px; background: color-mix(in srgb, var(--bg-card) 92%, transparent); box-shadow: 0 2px 10px rgba(20, 40, 30, .12); list-style: none;
  color: var(--text-muted); font-size: var(--t-libelle); }
body.ecran-parcours .pc-carte-legende li { display: inline-flex; align-items: center; gap: .35rem; }
body.ecran-parcours .pc-carte-legende b { color: var(--marine); }
body.ecran-parcours .pc-marqueur { width: .8rem; height: .8rem; margin: 0; padding: 0; border: 2px solid #fff; border-radius: 999px; background: var(--pc-cas, var(--border));
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3); cursor: pointer; }
body.ecran-parcours .pc-marqueur.fort { width: 1.15rem; height: 1.15rem; }
body.ecran-parcours .pc-popup .maplibregl-popup-content { padding: .75rem .9rem; border-radius: 12px; box-shadow: 0 6px 20px rgba(20, 40, 30, .18); }
body.ecran-parcours .pc-bulle { display: flex; flex-direction: column; gap: .3rem; min-width: 12rem; font-family: inherit; }
body.ecran-parcours .pc-bulle b { color: var(--marine); font-size: var(--t-petite); }
body.ecran-parcours .pc-bulle-cas { display: inline-flex; align-items: center; gap: .35rem; color: var(--pc-cas-texte, var(--text-muted)); font-size: var(--t-libelle); font-weight: 700; }
body.ecran-parcours .pc-bulle small { color: var(--text-muted); font-size: var(--t-libelle); }
body.ecran-parcours .pc-bulle-voir { align-self: flex-start; margin: .25rem 0 0; padding: .3rem .75rem; border: 1px solid var(--vert); border-radius: 999px; background: var(--bg-card);
  color: var(--vert-fonce); font: inherit; font-size: var(--t-libelle); font-weight: 700; cursor: pointer; }
body.ecran-parcours .pc-bulle-voir:hover { background: var(--vert-pale); }
/* La recommandation du diagnostic, sur son choix et en un clic dans le panneau. */
body.ecran-parcours .pc-reco { margin-left: .35rem; padding: .05rem .45rem; border-radius: 999px; background: var(--vert-pale); color: var(--vert-fonce); font-size: .68rem; font-style: normal;
  font-weight: 700; vertical-align: 1px; }
body.ecran-parcours .pc-option.on .pc-reco { background: var(--bg-card); }
body.ecran-parcours .pc-bouton-reco { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; height: 2.4rem; margin: .2rem 0 0; border: 1px solid var(--vert);
  background: var(--bg-card); color: var(--vert-fonce); font-weight: 700; box-shadow: none; }
body.ecran-parcours .pc-bouton-reco:hover { background: var(--vert-pale); }
body.ecran-parcours .pc-geste-note { color: var(--text-faint); font-size: var(--t-libelle); }
body.ecran-parcours .pc-marqueur.pc-cas--hors_diagnostic { background: color-mix(in srgb, var(--vert) 60%, var(--bg-card)); }
/* L'etiquette du cas et son ampleur : quatre barres montantes, pleines selon l'ampleur. */
body.ecran-parcours .pc-mag { overflow: visible; }
body.ecran-parcours .pc-mag::before { border-radius: 16px 0 0 16px; }
body.ecran-parcours .pc-mag-cas { display: inline-flex; align-items: center; gap: .55rem; flex: none; }
body.ecran-parcours .pc-mag .pc-cas-pastille { gap: .5rem; padding: .32rem .85rem .32rem .7rem; border: 1px solid color-mix(in srgb, var(--pc-cas, var(--border)) 35%, transparent); }
body.ecran-parcours .pc-ampleur { display: inline-flex; align-items: flex-end; gap: 2px; height: 1rem; padding: .2rem .35rem; border-radius: 6px; background: var(--bg-page, #f6f7f5);
  letter-spacing: 0; cursor: help; }
body.ecran-parcours .pc-ampleur i { width: 4px; border-radius: 2px; background: var(--border); }
body.ecran-parcours .pc-ampleur i:nth-child(1) { height: 35%; }
body.ecran-parcours .pc-ampleur i:nth-child(2) { height: 55%; }
body.ecran-parcours .pc-ampleur i:nth-child(3) { height: 78%; }
body.ecran-parcours .pc-ampleur i:nth-child(4) { height: 100%; }
body.ecran-parcours .pc-ampleur--1 i:nth-child(-n+1), body.ecran-parcours .pc-ampleur--2 i:nth-child(-n+2),
body.ecran-parcours .pc-ampleur--3 i:nth-child(-n+3), body.ecran-parcours .pc-ampleur--4 i { background: var(--pc-cas, var(--text-muted)); }
body.ecran-parcours .pc-ampleur-ecart { padding: .2rem .55rem; border-radius: 999px; background: var(--alerte-fond); color: var(--alerte); font-size: var(--t-libelle); font-weight: 700; cursor: help; }
/* Les infobulles de la page : celles de l'application, sans souligne sous un chiffre ou une etiquette. */
body.ecran-parcours .pc-grille [data-tip] { border-bottom: 0; }
body.ecran-parcours .pc-rdt-nom[data-tip], body.ecran-parcours .pc-non-capte [data-tip] { text-decoration: underline dotted color-mix(in srgb, currentColor 45%, transparent); text-underline-offset: 3px; }
body.ecran-parcours .pc-grille [data-tip]:hover::after { max-width: 17rem; padding: .5rem .7rem; border-radius: 10px; font-size: var(--t-libelle); }
body.ecran-parcours .pc-grille .pc-tip-droite[data-tip]:hover::after, body.ecran-parcours .pc-mag-cas [data-tip]:hover::after { left: auto; right: 0; }
body.ecran-parcours .pc-grille .pc-tip-droite[data-tip]:hover::before, body.ecran-parcours .pc-mag-cas [data-tip]:hover::before { left: auto; right: 12px; }
/* La carte : des points nets, les prioritaires cercles d'un halo, le nom au survol. */
body.ecran-parcours .pc-marqueur { width: .95rem; height: .95rem; border: 2.5px solid #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, .35); transition: scale .12s ease; }
body.ecran-parcours .pc-marqueur:hover { scale: 1.25; z-index: 2; }
body.ecran-parcours .pc-marqueur.fort { width: 1.3rem; height: 1.3rem; box-shadow: 0 0 0 5px color-mix(in srgb, var(--pc-cas) 28%, transparent), 0 1px 5px rgba(0, 0, 0, .35); }
body.ecran-parcours .pc-marqueur[data-tip]:hover::after { left: 50%; transform: translateX(-50%); bottom: calc(100% + 9px); font-size: var(--t-libelle); white-space: nowrap; }
body.ecran-parcours .pc-marqueur[data-tip]:hover::before { left: 50%; transform: translateX(-50%); bottom: calc(100% + 4px); }
body.ecran-parcours .pc-carte-legende { top: .8rem; bottom: auto; flex-direction: column; gap: .35rem; padding: .7rem .9rem; }
body.ecran-parcours .pc-carte-legende-titre { color: var(--marine); font-weight: 700; }
/* Les infobulles du parcours suivent le theme : une carte claire en clair, sombre en sombre. */
body.ecran-parcours [data-tip]:hover::after { border: 1px solid var(--border); background: var(--bg-card); color: var(--text); box-shadow: 0 6px 20px rgba(20, 40, 30, .16); }
body.ecran-parcours [data-tip]:hover::before { border-top-color: var(--bg-card); filter: drop-shadow(0 1px 0 var(--border)); }
/* Mes ouvertures : la photo, la courbe (barres par ouverture, courbe du total, reperes), la liste et la carte. */
body.ecran-parcours .pc-photo-corps--ouv { grid-template-columns: minmax(0, 1fr) auto; }
body.ecran-parcours .pc-format-point { flex: none; width: .6rem; height: .6rem; border-radius: 3px; }
body.ecran-parcours .pc-format-point--franchise { background: var(--ambre); }
body.ecran-parcours .pc-format-point--integre { background: var(--vert); }
body.ecran-parcours .pc-regle-cumul { margin: 0; color: var(--text-muted); font-size: var(--t-petite); line-height: 1.5; }
body.ecran-parcours .pc-regle-cumul svg { margin-right: .35rem; color: var(--vert-fonce); vertical-align: -3px; }
body.ecran-parcours .pc-regle-cumul b { color: var(--marine); }
body.ecran-parcours .pc-courbe-carte { margin: 0 0 1.3rem; padding: 1.3rem 1.5rem 1.1rem; }
body.ecran-parcours .pc-courbe-tete { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .6rem 1.5rem; margin: 0 0 1.2rem; }
body.ecran-parcours .pc-courbe-tete h2 { margin: 0; color: var(--marine); font-size: 1.15rem; font-weight: 750; }
body.ecran-parcours .pc-courbe-tete p { margin: .2rem 0 0; color: var(--text-muted); font-size: var(--t-petite); }
body.ecran-parcours .pc-courbe-legende { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: .2rem 0 0; padding: 0; list-style: none; color: var(--text-muted); font-size: var(--t-libelle); }
body.ecran-parcours .pc-courbe-legende li { display: inline-flex; align-items: center; gap: .4rem; }
body.ecran-parcours .pc-leg-barre { width: .7rem; height: .8rem; border-radius: 2px; background: color-mix(in srgb, var(--vert) 28%, var(--bg-card)); }
body.ecran-parcours .pc-leg-courbe { width: 1.1rem; height: 3px; border-radius: 2px; background: var(--vert-fonce); }
body.ecran-parcours .pc-leg-retenue { width: .7rem; height: .7rem; border: 2px solid var(--vert-fonce); border-radius: 999px; background: var(--vert); box-sizing: border-box; }
body.ecran-parcours .pc-courbe-cadre { display: grid; grid-template-columns: 4.4rem minmax(0, 1fr); grid-template-rows: 15rem auto; }
body.ecran-parcours .pc-courbe-axe-y { position: relative; }
body.ecran-parcours .pc-courbe-axe-y span { position: absolute; right: .7rem; transform: translateY(-50%); color: var(--text-faint); font-size: var(--t-libelle); white-space: nowrap; }
body.ecran-parcours .pc-courbe-dessin { position: relative; border-bottom: 1px solid var(--border); }
body.ecran-parcours .pc-courbe-grille { position: absolute; left: 0; right: 0; height: 1px; background: var(--trait-sd); }
body.ecran-parcours .pc-courbe-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
body.ecran-parcours .pc-courbe-aire { fill: color-mix(in srgb, var(--vert) 9%, transparent); }
body.ecran-parcours .pc-courbe-ligne { fill: none; stroke: var(--vert-fonce); stroke-width: 2.5; stroke-linejoin: round; }
body.ecran-parcours .pc-courbe-repere { position: absolute; top: 0; bottom: 0; border-left: 1.5px dashed var(--ambre); }
body.ecran-parcours .pc-courbe-repere em { position: absolute; top: -.2rem; left: .4rem; padding: .1rem .45rem; border-radius: 999px; background: var(--alerte-fond); color: var(--alerte);
  font-size: .68rem; font-style: normal; font-weight: 700; white-space: nowrap; }
body.ecran-parcours .pc-courbe-point { position: absolute; width: .8rem; height: .8rem; box-sizing: border-box; transform: translate(-50%, -50%); border: 2px solid var(--vert-fonce);
  border-radius: 999px; background: var(--bg-card); cursor: pointer; transition: width .12s ease, height .12s ease; z-index: 1; }
body.ecran-parcours .pc-courbe-point:hover { width: 1.1rem; height: 1.1rem; z-index: 3; }
body.ecran-parcours .pc-courbe-point[data-decision="retenu"] { background: var(--vert); }
body.ecran-parcours .pc-courbe-point[data-decision="ecarte"] { border-color: var(--text-faint); background: var(--bg-page, #f6f7f5); }
body.ecran-parcours .pc-courbe-point[data-tip]:hover::after { left: 50%; transform: translateX(-50%); white-space: nowrap; }
body.ecran-parcours .pc-courbe-point[data-tip]:hover::before { left: 50%; transform: translateX(-50%); }
body.ecran-parcours .pc-courbe-axe-x { grid-column: 2; position: relative; height: 1.5rem; }
body.ecran-parcours .pc-courbe-axe-x span { position: absolute; top: .35rem; transform: translateX(-50%); color: var(--text-faint); font-size: var(--t-libelle); }
body.ecran-parcours .pc-courbe-pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin: 1rem 0 0; padding: .9rem 0 0;
  border-top: 1px solid var(--trait-sd); }
body.ecran-parcours .pc-courbe-pied p { margin: 0; color: var(--text-muted); font-size: var(--t-petite); }
body.ecran-parcours .pc-courbe-pied p b { color: var(--vert-fonce); font-size: 1rem; }
body.ecran-parcours .pc-courbe-pied form { margin: 0; }
body.ecran-parcours .pc-courbe-pied .pc-bouton-reco { padding: 0 1rem; }
body.ecran-parcours .pc-barre-outils--2 { margin-top: -.3rem; }
body.ecran-parcours .pc-barre-outils--2 .pc-recherche { margin-left: auto; }
/* Retenir et ecarter, en toutes lettres. */
body.ecran-parcours .pc-ouvertures .sd-b-mot { display: inline; }
body.ecran-parcours .pc-ouvertures .sd-b { padding: .32rem .7rem; font-weight: 650; }
/* La liste des ouvertures. */
body.ecran-parcours .pc-ouvertures tr[hidden] { display: none; }
body.ecran-parcours .pc-ouvertures td { vertical-align: middle; }
body.ecran-parcours .pc-rang { display: inline-grid; place-items: center; min-width: 1.8rem; height: 1.8rem; padding: 0 .3rem; box-sizing: border-box; border-radius: 999px;
  background: var(--bg-page, #f6f7f5); color: var(--marine); font-weight: 800; font-size: var(--t-petite); }
body.ecran-parcours .pc-lieu { color: var(--marine); font-weight: 700; text-decoration: none; }
body.ecran-parcours .pc-lieu:hover { color: var(--vert-fonce); text-decoration: underline; }
body.ecran-parcours .pc-ouvertures td small { display: block; margin-top: .15rem; color: var(--text-faint); font-size: var(--t-libelle); }
body.ecran-parcours .pc-format { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: var(--t-libelle); font-weight: 700; }
body.ecran-parcours .pc-format--franchise { background: var(--alerte-fond); color: var(--alerte); }
body.ecran-parcours .pc-format--integre { background: var(--vert-pale); color: var(--vert-fonce); }
body.ecran-parcours .pc-gain { color: var(--vert-fonce); font-size: var(--t-corps); font-weight: 800; white-space: nowrap; }
body.ecran-parcours .pc-gain-barre { display: block; width: 5.5rem; height: 4px; margin: .35rem 0 0 auto; border-radius: 999px; background: var(--trait-sd); }
body.ecran-parcours .pc-gain-barre i { display: block; height: 100%; border-radius: 999px; background: var(--vert); }
body.ecran-parcours .pc-cumul { color: var(--text-faint); white-space: nowrap; }
body.ecran-parcours .pc-touche { color: var(--marine); font-weight: 600; }
body.ecran-parcours .pc-ouvertures td small.pc-touche-pct { display: inline-block; padding: .05rem .45rem; border-radius: 999px; background: var(--danger-fond); color: var(--danger); font-weight: 700; }
body.ecran-parcours .pc-a-confirmer { color: var(--alerte); font-weight: 700; }
body.ecran-parcours .pc-gain-retenu { margin: 0; color: var(--text-muted); font-size: var(--t-libelle); }
body.ecran-parcours .pc-gain-retenu b { color: var(--vert-fonce); font-size: var(--t-corps); }
/* La carte des ouvertures : leur rang dans un rond, nos magasins en petits points. */
body.ecran-parcours .pc-marqueur-site { display: grid; place-items: center; width: 1.7rem; height: 1.7rem; margin: 0; padding: 0; border: 2px solid var(--vert-fonce); border-radius: 999px;
  background: #fff; color: var(--vert-fonce); font: inherit; font-size: .72rem; font-weight: 800; box-shadow: 0 1px 5px rgba(0, 0, 0, .3); cursor: pointer; }
body.ecran-parcours .pc-marqueur-site[data-decision="retenu"] { background: var(--vert); color: #fff; }
body.ecran-parcours .pc-marqueur-site[data-decision="ecarte"] { border-color: #98a2a8; color: #98a2a8; }
body.ecran-parcours .pc-marqueur-magasin { display: inline-block; width: .65rem; height: .65rem; border: 2px solid #fff; border-radius: 999px; background: #56606a; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
body.ecran-parcours .pc-leg-site { display: inline-block; width: .85rem; height: .85rem; box-sizing: border-box; border: 2px solid var(--vert-fonce); border-radius: 999px; background: #fff; }
body.ecran-parcours .pc-leg-site.on { background: var(--vert); }
body.ecran-parcours .pc-leg-site.ecarte { border-color: #98a2a8; }
/* La courbe, lue en clair : axes titres, zone ou chaque ouverture rapporte peu. */
body.ecran-parcours .pc-courbe-cadre { grid-template-rows: 16rem auto auto; }
body.ecran-parcours .pc-courbe-axe-y em { position: absolute; top: -1.35rem; right: .7rem; color: var(--text-faint); font-size: .68rem; font-style: normal; font-weight: 700; white-space: nowrap; }
body.ecran-parcours .pc-courbe-titre-x { grid-column: 2; color: var(--text-faint); font-size: .68rem; font-weight: 700; text-align: center; }
body.ecran-parcours .pc-courbe-zone { position: absolute; top: 0; bottom: 0; right: 0; background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--text-faint) 12%, transparent) 6px 7px); }
body.ecran-parcours .pc-leg-zone { width: .9rem; height: .8rem; border-radius: 2px; background: repeating-linear-gradient(135deg, transparent 0 3px, color-mix(in srgb, var(--text-faint) 40%, transparent) 3px 4px);
  border: 1px solid var(--border); }
body.ecran-parcours .pc-courbe-repere em { top: -1.4rem; left: 0; transform: translateX(-50%); }
body.ecran-parcours .pc-courbe-carte .pc-courbe-cadre { margin-top: 1.5rem; }
body.ecran-parcours .pc-courbe-pied p b { font-size: var(--t-petite); }

/* Les colonnes chiffrees d'une ouverture : son CA prevu, ce qu'il prend au reseau, le gain qui reste. */
body.ecran-parcours .pc-surface { display: block; color: var(--marine); font-weight: 700; white-space: nowrap; }
body.ecran-parcours .pc-ouvertures .pc-format { margin-top: .2rem; }
body.ecran-parcours .pc-ca-prevu { color: var(--marine); font-weight: 700; white-space: nowrap; }
body.ecran-parcours .pc-pris { color: var(--danger); font-weight: 700; white-space: nowrap; }
body.ecran-parcours .pc-ouvertures td.num small { text-align: right; }
/* La liste des ouvertures en pleine largeur, sous la courbe. */
body.ecran-parcours .pc-ouvrir-liste { margin-top: .2rem; }
body.ecran-parcours .pc-ouvertures td { padding-top: .75rem; padding-bottom: .75rem; }
body.ecran-parcours .pc-ouvertures .pc-touche { white-space: nowrap; }
/* Retenir et ecarter : deux pastilles distinctes ; retenue en vert plein, ecartee en rouge doux. */
body.ecran-parcours .pc-ouvertures .sd-choix { display: inline-flex; gap: .4rem; padding: 0; border: 0; border-radius: 0; background: none; }
body.ecran-parcours .pc-ouvertures .sd-b { display: inline-flex; align-items: center; gap: .35rem; height: 2rem; padding: 0 .8rem; border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-card); color: var(--text-muted); font-size: var(--t-libelle); font-weight: 700; box-shadow: none; transition: all .15s ease; }
body.ecran-parcours .pc-ouvertures .sd-b + .sd-b { border-left: 1px solid var(--border); }
body.ecran-parcours .pc-ouvertures .sd-b-retenu { border-color: color-mix(in srgb, var(--vert) 55%, var(--border)); color: var(--vert-fonce); }
body.ecran-parcours .pc-ouvertures .sd-b-retenu:not(.on):hover { background: var(--vert-pale); }
body.ecran-parcours .pc-ouvertures .sd-b-retenu.on { border-color: var(--vert); background: var(--vert); color: #fff; box-shadow: 0 1px 4px -1px color-mix(in srgb, var(--vert) 70%, transparent); }
body.ecran-parcours .pc-ouvertures .sd-b-ecarte:not(.on):hover { border-color: var(--danger-trait); background: var(--danger-fond); color: var(--danger); }
body.ecran-parcours .pc-ouvertures .sd-b-ecarte.on { border-color: var(--danger-trait); background: var(--danger-fond); color: var(--danger); }
body.ecran-parcours .pc-ouvertures .sd-motif { width: 100%; max-width: 15rem; margin-top: .4rem; padding: .35rem .6rem; border: 1px solid var(--border); border-radius: 8px; font-size: var(--t-libelle); }
body.ecran-parcours .pc-ouvertures tr:has(.sd-b-retenu.on) > td { background: color-mix(in srgb, var(--vert-pale) 45%, transparent); }
body.ecran-parcours .pc-ouvertures tr:has(.sd-b-retenu.on) > td:first-child { box-shadow: inset 3px 0 0 var(--vert); }
body.ecran-parcours .pc-ouvertures tr:has(.sd-b-ecarte.on) > td { color: var(--text-faint); }
body.ecran-parcours .pc-ouvrir [data-tip] { border-bottom: 0; }
body.ecran-parcours .pc-ouvrir [data-tip]:hover::after { max-width: 17rem; padding: .5rem .7rem; border-radius: 10px; font-size: var(--t-libelle); white-space: normal; }
body.ecran-parcours .pc-ouvrir .pc-tip-droite[data-tip]:hover::after { left: auto; right: 0; }
body.ecran-parcours .pc-ouvrir .pc-tip-droite[data-tip]:hover::before { left: auto; right: 12px; }
/* Le tableau des ouvertures, resserre : chiffres a droite, surface et format sur une ligne. */
body.ecran-parcours .pc-ouvertures th.num, body.ecran-parcours .pc-ouvertures td.num { text-align: right; }
body.ecran-parcours .pc-ouvertures .pc-surface-cell { white-space: nowrap; }
body.ecran-parcours .pc-ouvertures .pc-surface { display: inline; margin-right: .4rem; }
body.ecran-parcours .pc-ouvertures .pc-format { margin-top: 0; vertical-align: 1px; }
body.ecran-parcours .pc-ouvertures td { padding-top: .6rem; padding-bottom: .6rem; }
body.ecran-parcours .pc-gain-barre { width: 4.5rem; }
body.ecran-parcours .pc-a-confirmer { color: var(--text-faint); font-weight: 600; }
body.ecran-parcours .pc-a-confirmer::before { content: ""; display: inline-block; width: .4rem; height: .4rem; margin-right: .3rem; border-radius: 999px; background: var(--ambre); vertical-align: 1px; }
/* Valider : les chiffres du plan, les listes de ce qui change, la lecture par zone de vie. */
body.ecran-parcours .pc-photo-corps .pc-photo-chiffre--moins { background: var(--danger-fond); }
body.ecran-parcours .pc-photo-chiffre--moins > div b, body.ecran-parcours .pc-photo-chiffre--moins > div > span { color: var(--danger); }
body.ecran-parcours .pc-photo-chiffre--moins .pc-photo-chiffre-ico { color: var(--danger); }
body.ecran-parcours .pc-plan-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .7rem; margin: 1.1rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--trait-sd); }
body.ecran-parcours .pc-plan-chiffres > div { display: flex; flex-direction: column; gap: .15rem; padding: .8rem 1rem; border-radius: 12px; background: var(--bg-page, #f6f7f5); }
body.ecran-parcours .pc-plan-chiffres span { color: var(--text-muted); font-size: var(--t-libelle); font-weight: 600; }
body.ecran-parcours .pc-plan-chiffres b { color: var(--marine); font-size: 1.35rem; font-weight: 800; }
body.ecran-parcours .pc-plan-chiffres small { color: var(--text-faint); font-size: var(--t-libelle); }
body.ecran-parcours .pc-plan-chiffres em, body.ecran-parcours .pc-plan-impact em { font-style: normal; font-weight: 800; }
body.ecran-parcours .pc-valider em.plus { color: var(--vert-fonce); }
body.ecran-parcours .pc-valider em.moins { color: var(--danger); }
body.ecran-parcours .pc-valider .pc-deux { margin: 0 0 1.3rem; }
body.ecran-parcours .pc-plan-bloc .pc-carte-tete { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
body.ecran-parcours .pc-lien-revoir { display: inline-flex; align-items: center; gap: .2rem; color: var(--vert-fonce); font-size: var(--t-petite); font-weight: 650; text-decoration: none; }
body.ecran-parcours .pc-lien-revoir:hover { text-decoration: underline; }
body.ecran-parcours .pc-plan-lignes { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
body.ecran-parcours .pc-plan-lignes li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8rem; padding: .7rem 0; border-top: 1px solid var(--trait-sd); }
body.ecran-parcours .pc-plan-lignes li:first-child { border-top: 0; }
body.ecran-parcours .pc-plan-lignes li > div { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
body.ecran-parcours .pc-plan-lignes b { color: var(--marine); font-size: var(--t-petite); }
body.ecran-parcours .pc-plan-lignes small { color: var(--text-faint); font-size: var(--t-libelle); }
body.ecran-parcours .pc-plan-lignes li:has(> div + div) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
body.ecran-parcours .pc-plan-geste { align-self: flex-start; padding: .1rem .55rem; border-radius: 999px; background: var(--bg-page, #f6f7f5); color: var(--marine); font-size: var(--t-libelle); font-weight: 700; }
body.ecran-parcours .pc-plan-geste.pc-choix--fermer { background: var(--danger-fond); color: var(--danger); }
body.ecran-parcours .pc-plan-geste.pc-choix--baisser { background: var(--alerte-fond); color: var(--alerte); }
body.ecran-parcours .pc-plan-geste.pc-choix--agrandir, body.ecran-parcours .pc-plan-geste.pc-choix--relocaliser { background: var(--vert-pale); color: var(--vert-fonce); }
body.ecran-parcours .pc-plan-impact { white-space: nowrap; }
body.ecran-parcours .pc-vide-doux { margin: 0; padding: 1rem; border-radius: 12px; background: var(--bg-page, #f6f7f5); color: var(--text-muted); font-size: var(--t-petite); }
body.ecran-parcours .pc-vide-doux a { color: var(--vert-fonce); font-weight: 650; }
body.ecran-parcours .pc-plan-note { margin: .8rem 0 0; color: var(--text-muted); font-size: var(--t-libelle); }
body.ecran-parcours .pc-plan-note a { display: inline-flex; align-items: center; gap: .35rem; color: var(--vert-fonce); font-weight: 650; text-decoration: none; }
body.ecran-parcours .pc-zdv { padding: 1.3rem 1.5rem 1.2rem; }
body.ecran-parcours .pc-zdv-tete { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .6rem 1.5rem; margin: 0 0 1rem; }
body.ecran-parcours .pc-zdv-tete h2 { margin: 0; color: var(--marine); font-size: 1.15rem; font-weight: 750; }
body.ecran-parcours .pc-zdv-tete p { margin: .2rem 0 0; color: var(--text-muted); font-size: var(--t-petite); }
body.ecran-parcours .pc-zdv-table th.num, body.ecran-parcours .pc-zdv-table td.num { text-align: right; }
body.ecran-parcours .pc-zdv-table td { vertical-align: middle; }
body.ecran-parcours .pc-zdv-table td small { display: block; margin-top: .1rem; color: var(--text-faint); font-size: var(--t-libelle); }
body.ecran-parcours .pc-zdv-nom { color: var(--marine); }
body.ecran-parcours .pc-zdv-neuve { margin-left: .3rem; padding: .05rem .45rem; border-radius: 999px; background: var(--vert-pale); color: var(--vert-fonce); font-size: .68rem; font-weight: 700; }
body.ecran-parcours .pc-priorite { display: inline-grid; place-items: center; min-width: 2rem; height: 1.5rem; border-radius: 999px; font-size: var(--t-libelle); font-weight: 800; }
body.ecran-parcours .pc-priorite--p1 { background: var(--vert); color: #fff; }
body.ecran-parcours .pc-priorite--p2 { background: var(--vert-pale); color: var(--vert-fonce); }
body.ecran-parcours .pc-priorite--p3 { background: var(--bg-page, #f6f7f5); color: var(--text-muted); }
body.ecran-parcours .pc-bouton-suite { margin-top: .5rem; }
/* L'attente d'un calcul : un anneau qui tourne autour du picto, l'etat en pastille, une barre plus franche. */
body.ecran-parcours .pc-attente { padding: 1.6rem 1.8rem; }
body.ecran-parcours .pc-attente-anneau { position: relative; width: 4.2rem; height: 4.2rem; box-sizing: border-box; }
body.ecran-parcours .pc-attente-anneau > span { position: absolute; inset: 0; display: grid; place-items: center; color: var(--vert-fonce); animation: pc-contre-rotation 1s linear infinite; }
@keyframes pc-contre-rotation { to { transform: rotate(-360deg); } }
body.ecran-parcours .pc-attente-etat { padding: .25rem .75rem; border-radius: 999px; background: var(--bg-page, #f6f7f5); color: var(--marine); font-size: var(--t-libelle); }
body.ecran-parcours .pc-attente-note { color: var(--text-faint) !important; font-size: var(--t-libelle) !important; }
body.ecran-parcours .pc-attente-barre { height: 6px; }
@media (prefers-reduced-motion: reduce) { body.ecran-parcours .pc-attente-anneau > span { animation-duration: 2.4s; } }
/* Les ouvertures sur la carte : leur rang dans un rond, couleur de leur format ; retenue pleine, ecartee effacee. */
body.ecran-parcours .pc-marqueur-site { --c: var(--vert); --c-fonce: var(--vert-fonce); width: var(--taille, 1.7rem); height: var(--taille, 1.7rem); border: 2.5px solid var(--c);
  background: #fff; color: var(--c-fonce); font-size: .74rem; font-weight: 800; box-shadow: 0 2px 6px rgba(0, 0, 0, .28); transition: scale .12s ease; }
body.ecran-parcours .pc-marqueur-site.pc-format--franchise, body.ecran-parcours .pc-leg-pin.pc-format--franchise { --c: var(--ambre); --c-fonce: var(--alerte); }
body.ecran-parcours .pc-marqueur-site:hover { scale: 1.12; z-index: 2; }
body.ecran-parcours .pc-marqueur-site[data-decision="retenu"] { background: var(--c); color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 30%, transparent), 0 2px 6px rgba(0, 0, 0, .28); }
body.ecran-parcours .pc-marqueur-site[data-decision="ecarte"] { border-color: #b3bbc0; color: #98a2a8; opacity: .7; box-shadow: none; }
/* DEUX CENT SOIXANTE-CINQ MAGASINS SUR UNE CARTE : en carrés blancs, ils
   recouvraient le territoire et l'on ne voyait plus ni les zones ni les
   ouvertures. Ce sont un repère de fond, pas le sujet. */
body.ecran-parcours .pc-marqueur-magasin { width: .5rem; height: .5rem; border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, .8); background: rgba(27, 46, 75, .62); box-shadow: none; }
body.ecran-parcours .pc-marqueur-magasin:hover { background: var(--marine); }
body.ecran-parcours .pc-legende-ouv { gap: .25rem; min-width: 10rem; }
body.ecran-parcours .pc-legende-ouv > b { margin-top: .25rem; color: var(--marine); font-size: var(--t-libelle); }
body.ecran-parcours .pc-legende-ouv > b:first-child { margin-top: 0; }
body.ecran-parcours .pc-legende-ouv ul { display: flex; flex-direction: column; gap: .3rem; margin: 0; padding: 0; list-style: none; }
body.ecran-parcours .pc-legende-ouv li { display: flex; align-items: center; gap: .45rem; }
body.ecran-parcours .pc-legende-ouv li em { margin-left: auto; color: var(--marine); font-style: normal; font-weight: 800; }
body.ecran-parcours .pc-legende-sep { margin-top: .3rem !important; padding-top: .45rem !important; border-top: 1px solid var(--trait-sd) !important; }
body.ecran-parcours .pc-legende-ouv small { max-width: 11rem; color: var(--text-faint); font-size: .68rem; line-height: 1.35; }
body.ecran-parcours .pc-leg-pin { --c: var(--vert); --c-fonce: var(--vert-fonce); display: inline-grid; place-items: center; flex: none; width: 1.05rem; height: 1.05rem; box-sizing: border-box;
  border: 2px solid var(--c); border-radius: 999px; background: #fff; color: var(--c-fonce); font-size: .56rem; font-style: normal; font-weight: 800; }
body.ecran-parcours .pc-leg-pin.on { background: var(--c); }
body.ecran-parcours .pc-leg-pin.ecarte { border-color: #b3bbc0; opacity: .8; }
body.ecran-parcours .pc-bulle .pc-format { align-self: flex-start; }
body.ecran-parcours .pc-bulle-chiffres { display: grid; grid-template-columns: auto auto; gap: .2rem .9rem; margin: .3rem 0 0; font-size: var(--t-libelle); }
body.ecran-parcours .pc-bulle-chiffres dt { margin: 0; color: var(--text-muted); }
body.ecran-parcours .pc-bulle-chiffres dd { margin: 0; color: var(--marine); font-weight: 800; text-align: right; }
body.ecran-parcours .pc-bulle-chiffres dd.plus { color: var(--vert-fonce); }
body.ecran-parcours .pc-bulle-chiffres dd.moins { color: var(--danger); }
body.ecran-parcours .zdv-volet--carte + * .pc-bulle b, body.ecran-parcours .pc-bulle b { line-height: 1.25; }
body.ecran-parcours .pc-bulle .pc-priorite { margin-top: .1rem; }

/* La carte des zones de vie du plan, et sa legende par priorite. */
body.ecran-parcours .pc-carte-zdv { margin: 0 0 1.1rem; }
body.ecran-parcours .pc-carte-zdv .pc-carte-fond { height: min(34rem, 60vh); }
body.ecran-parcours .pc-carte-zdv { margin-bottom: .55rem; }
/* La legende, sous la carte et sur une ligne : posee dessus, elle mangeait
   un quart du territoire et forcait un cadrage decale. */
body.ecran-parcours .pc-zdv-legende { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1.1rem;
  margin: 0 0 1rem; font-size: var(--t-libelle); color: var(--text-muted); }
body.ecran-parcours .pc-zdv-legende span { display: inline-flex; align-items: center; gap: .4rem; }
body.ecran-parcours .pc-zdv-legende small { color: var(--text-faint); }
body.ecran-parcours .pc-zdv-legende .pc-zdv-legende-sep { margin-left: .4rem; padding-left: 1.1rem; border-left: 1px solid var(--trait-sd, var(--border)); }
body.ecran-parcours .pc-zdv-legende .pc-zdv-legende-aide { margin-left: auto; }
body.ecran-parcours .pc-zdv-compte { margin: 0 0 .7rem; }
body.ecran-parcours .pc-leg-zone { flex: none; width: .95rem; height: .8rem; border: 1.5px solid var(--vert-fonce); border-radius: 3px; }
/* Les pastilles de legende portent EXACTEMENT les teintes de la carte :
   un ecart, meme leger, et la legende ne sert plus a rien. */
body.ecran-parcours .pc-leg-zone--p1 { border-color: var(--vert-fonce); background: color-mix(in srgb, var(--vert-fonce) 74%, #fff); }
body.ecran-parcours .pc-leg-zone--p2 { border-color: var(--vert); background: color-mix(in srgb, var(--vert) 60%, #fff); }
body.ecran-parcours .pc-leg-zone--p3 { border-color: #a8d18b; background: color-mix(in srgb, #a8d18b 46%, #fff); }
body.ecran-parcours .pc-legende-ouv li small { color: var(--text-faint); font-size: .66rem; }
/* DEUX VOLETS : la carte tient sa place pendant qu'on parcourt la liste. En
   dessous de 62rem, ils s'empilent - un demi-ecran ne vaut pas deux quarts. */
body.ecran-parcours .zdv-duo { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 1rem 1.2rem; align-items: start; }
@media (max-width: 62rem) { body.ecran-parcours .zdv-duo { grid-template-columns: minmax(0, 1fr); } }
body.ecran-parcours .zdv-volet--carte { position: sticky; top: 1rem; }
@media (max-width: 62rem) { body.ecran-parcours .zdv-volet--carte { position: static; } }
body.ecran-parcours .zdv-volet--carte .pc-carte-zdv .pc-carte-fond { height: min(31rem, 62vh); }
body.ecran-parcours .zdv-volet--carte .pc-carte-zdv { position: relative; }
/* « Tout voir » : apres un clic sur une ligne, on revient au plan entier
   sans chercher le bouton de zoom. */
body.ecran-parcours .zdv-cadrer { position: absolute; top: .6rem; right: .6rem; z-index: 2; padding: .28rem .7rem; border: 1px solid var(--border);
  border-radius: 999px; background: color-mix(in srgb, var(--bg-card) 92%, transparent); color: var(--text-muted); font-size: var(--t-libelle); font-weight: 600; cursor: pointer; }
body.ecran-parcours .zdv-cadrer:hover { color: var(--text); border-color: var(--marine); }
body.ecran-parcours .zdv-defile { max-height: 31rem; overflow: auto; border: 1px solid var(--border); border-radius: 12px; }
@media (max-width: 62rem) { body.ecran-parcours .zdv-defile { max-height: none; } }
body.ecran-parcours .zdv-defile .pc-zdv-table { margin: 0; width: 100%; table-layout: fixed; }
body.ecran-parcours .zdv-defile .pc-zdv-table th:first-child, body.ecran-parcours .zdv-defile .pc-zdv-table td:first-child { width: 3.6rem; }
body.ecran-parcours .zdv-defile .pc-zdv-table th.num, body.ecran-parcours .zdv-defile .pc-zdv-table td.num { width: 4.2rem; }
body.ecran-parcours .zdv-defile .pc-zdv-table th:last-child, body.ecran-parcours .zdv-defile .pc-zdv-table td:last-child { width: 6.6rem; }
/* La pastille « nouveau bassin » ne se coupe pas en deux lignes. */
body.ecran-parcours .pc-zdv-neuve { white-space: nowrap; }
body.ecran-parcours .zdv-defile .pc-zdv-table td small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
body.ecran-parcours .zdv-defile .pc-zdv-nom { overflow-wrap: anywhere; }
body.ecran-parcours .zdv-defile .pc-zdv-table thead th { position: sticky; top: 0; z-index: 1; background: var(--bg-card); }
body.ecran-parcours .pc-zdv-table tr.on > td { background: var(--vert-pale); }
body.ecran-parcours .pc-zdv-aide { margin: .5rem 0 0; color: var(--text-faint); font-size: var(--t-libelle); }
body.ecran-parcours .zdv-deja { border-top: 1px solid var(--border); }
body.ecran-parcours .zdv-deja > summary { padding: .55rem .8rem; color: var(--text-muted); font-size: var(--t-libelle); cursor: pointer; }
body.ecran-parcours .zdv-deja > summary:hover { color: var(--text); }
body.ecran-parcours .pc-zdv-table--deja td { color: var(--text-muted); }
/* LE PION PORTE LA PRIORITE DE SON BASSIN. A l'echelle d'un pays, la forme
   d'un bassin fait quelques pixels : c'est le pion qui dit le rang, et il
   suit les trois memes verts que les zones. */
body.ecran-parcours .pc-marqueur-site.pc-pion--p1 { --c: var(--vert-fonce); --c-fonce: var(--vert-fonce); }
body.ecran-parcours .pc-marqueur-site.pc-pion--p2 { --c: var(--vert); --c-fonce: var(--vert-fonce); }
body.ecran-parcours .pc-marqueur-site.pc-pion--p3 { --c: #a8d18b; --c-fonce: var(--vert-fonce); }
body.ecran-parcours .pc-marqueur-site.pc-pion--p3[data-decision="retenu"] { color: var(--vert-fonce); }
/* L'aureole entourait le pion d'un anneau epais qui mangeait la zone dessous. */
body.ecran-parcours .zdv-volet--carte .pc-marqueur-site[data-decision="retenu"] {
  box-shadow: 0 0 0 2px #fff, 0 2px 7px rgba(20, 40, 30, .3); }
body.ecran-parcours .zdv-volet--carte .pc-marqueur-site { border-width: 2px; font-size: .7rem; }
/* LES PASTILLES DE PRIORITE, SUR LA MEME ECHELLE QUE LA CARTE. Pleine pour
   P1, teintee pour P2, sobre pour P3 : on retrouve la carte dans le tableau. */
body.ecran-parcours .pc-priorite { min-width: 2.1rem; height: 1.45rem; letter-spacing: .02em; }
body.ecran-parcours .pc-priorite--p1 { background: var(--vert-fonce); color: #fff; }
body.ecran-parcours .pc-priorite--p2 { background: color-mix(in srgb, var(--vert) 22%, #fff); color: var(--vert-fonce); }
body.ecran-parcours .pc-priorite--p3 { background: color-mix(in srgb, #a8d18b 26%, #fff); color: var(--vert-fonce); }
/* « nouveau bassin » ne doit pas rivaliser avec la pastille de priorite :
   un contour suffit a le signaler. */
body.ecran-parcours .pc-zdv-neuve { border: 1px solid color-mix(in srgb, var(--vert) 45%, transparent);
  background: transparent; color: var(--vert-fonce); font-weight: 600; }
/* LE TABLEAU REPREND LA TEINTE DE LA CARTE. Un filet a gauche de chaque
   ligne dit son rang sans ajouter une colonne. */
body.ecran-parcours .zdv-defile .pc-zdv-table tbody tr[data-zone] > td:first-child { position: relative; }
body.ecran-parcours .zdv-defile .pc-zdv-table tbody tr[data-zone] > td:first-child::before {
  content: ""; position: absolute; left: 0; top: .35rem; bottom: .35rem; width: 3px; border-radius: 999px; background: transparent; }
body.ecran-parcours .zdv-defile tr[data-zone]:has(.pc-priorite--p1) > td:first-child::before { background: var(--vert-fonce); }
body.ecran-parcours .zdv-defile tr[data-zone]:has(.pc-priorite--p2) > td:first-child::before { background: var(--vert); }
body.ecran-parcours .zdv-defile tr[data-zone]:has(.pc-priorite--p3) > td:first-child::before { background: #a8d18b; }
body.ecran-parcours .zdv-defile .pc-zdv-table td { padding-top: .5rem; padding-bottom: .5rem; }
body.ecran-parcours .zdv-defile .pc-zdv-table thead th { font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); }
body.ecran-parcours .zdv-defile .pc-zdv-nom { color: var(--marine); }
body.ecran-parcours .zdv-defile .pc-gain { font-variant-numeric: tabular-nums; }
body.ecran-parcours .zdv-defile .pc-zdv-table td.num { font-variant-numeric: tabular-nums; color: var(--text-muted); }
body.ecran-parcours .zdv-defile .pc-zdv-table td.num:last-child { color: var(--vert-fonce); }
/* La barre d'outils de la liste : chercher, et ce que la recherche laisse. */
body.ecran-parcours .zdv-outils { display: flex; align-items: center; gap: .6rem; margin: 0 0 .55rem; }
body.ecran-parcours .zdv-chercher { flex: 1; min-width: 0; padding: .4rem .7rem; border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-card); color: var(--text); font: inherit; font-size: var(--t-libelle); }
body.ecran-parcours .zdv-chercher:focus { outline: none; border-color: var(--vert); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vert) 18%, transparent); }
body.ecran-parcours .zdv-compte-filtre { color: var(--text-faint); font-size: var(--t-libelle); white-space: nowrap; }
/* Un en-tete qui trie doit se voir cliquable, et dire dans quel sens il trie. */
body.ecran-parcours .zdv-triable { cursor: pointer; user-select: none; }
body.ecran-parcours .zdv-triable:hover { color: var(--marine); }
body.ecran-parcours .zdv-triable[aria-sort="ascending"]::after { content: " \2191"; color: var(--vert-fonce); }
body.ecran-parcours .zdv-triable[aria-sort="descending"]::after { content: " \2193"; color: var(--vert-fonce); }
body.ecran-parcours .pc-zdv-table tr[hidden] { display: none; }
body.ecran-parcours .pc-leg-zone--deja { border-color: color-mix(in srgb, #5b7396 40%, #fff); background: color-mix(in srgb, #5b7396 10%, #fff); }
/* Le mode d'emploi de la carte : replie par defaut, il ne prend la place de
   rien tant qu'on ne le demande pas. */
body.ecran-parcours .zdv-lire { margin: 0 0 .9rem; }
body.ecran-parcours .zdv-lire > summary { display: inline-flex; align-items: center; gap: .35rem; color: var(--marine); font-size: var(--t-libelle); font-weight: 600; cursor: pointer; }
body.ecran-parcours .zdv-lire > summary:hover { text-decoration: underline; }
body.ecran-parcours .zdv-lire ul { margin: .5rem 0 0; padding: .7rem .9rem .7rem 1.6rem; border-radius: 12px; background: var(--bg-doux, var(--bg-survol)); color: var(--text-muted); font-size: var(--t-libelle); }
body.ecran-parcours .zdv-lire li + li { margin-top: .3rem; }
body.ecran-parcours .zdv-lire b { color: var(--text); }
body.ecran-parcours .pc-zdv-table tr[data-zone] { cursor: pointer; }
body.ecran-parcours .pc-zdv-table tr[data-zone]:hover > td { background: var(--bg-survol); }
body.ecran-parcours .pc-bulle .pc-priorite { align-self: flex-start; }
body.ecran-parcours .pc-zdv { margin: 0 0 1.3rem; }
body.ecran-parcours .pc-unite { color: var(--text-faint); font-size: var(--t-libelle); }
body.ecran-parcours .pc-compte-rouge { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 .3rem; box-sizing: border-box; border-radius: 999px;
  background: var(--danger-fond); color: var(--danger); font-weight: 800; }
/* « Combien d'ouvertures ? » : la question a gauche, le compteur et la bascule a droite, sur une carte blanche. */
body.ecran-parcours .pc-parametrer .pc-question-ouvertures { justify-content: space-between; gap: .8rem 1.5rem; padding: .9rem 1.1rem; border: 1px solid var(--border); border-radius: 14px;
  background: var(--bg-card); }
body.ecran-parcours .pc-question-texte { display: flex; align-items: center; gap: .8rem; min-width: 0; }
body.ecran-parcours .pc-question-picto { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 12px; background: var(--vert-pale); color: var(--vert-fonce); }
body.ecran-parcours .pc-question-texte b { display: block; color: var(--marine); font-size: var(--t-corps); font-weight: 700; }
body.ecran-parcours .pc-question-texte small { display: block; margin-top: .1rem; color: var(--text-faint); font-size: var(--t-libelle); }
body.ecran-parcours .pc-question-reponse { display: flex; align-items: center; gap: .6rem 1rem; flex-wrap: wrap; }
body.ecran-parcours .pc-compteur { display: inline-flex; align-items: center; gap: .2rem; padding: 3px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); transition: opacity .15s; }
body.ecran-parcours .pc-compteur button { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; margin: 0; padding: 0; border: 0; border-radius: 999px; background: var(--bg-page, #f6f7f5);
  color: var(--marine); font: inherit; font-size: 1.1rem; font-weight: 700; line-height: 1; cursor: pointer; }
body.ecran-parcours .pc-compteur button:hover:not(:disabled) { background: var(--vert-pale); color: var(--vert-fonce); }
body.ecran-parcours .pc-compteur button:disabled { cursor: default; opacity: .5; }
body.ecran-parcours .pc-compteur input { width: 3.4rem; height: 2.1rem !important; margin: 0; padding: 0; border: 0 !important; background: none; box-shadow: none !important; color: var(--marine);
  font-size: 1.15rem; font-weight: 800; text-align: center; -moz-appearance: textfield; }
body.ecran-parcours .pc-compteur input::-webkit-inner-spin-button, body.ecran-parcours .pc-compteur input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
body.ecran-parcours .pc-compteur-unite { color: var(--text-muted); font-size: var(--t-petite); font-weight: 600; }
body.ecran-parcours .pc-compteur--eteint { opacity: .4; }
/* La bascule : une piste et son rond, verte quand elle est mise. */
body.ecran-parcours .pc-bascule { display: inline-flex; align-items: center; gap: .55rem; margin: 0; padding-left: 1rem; border-left: 1px solid var(--trait-sd); color: var(--marine);
  font-size: var(--t-petite); font-weight: 600; cursor: pointer; }
body.ecran-parcours .pc-bascule input { position: absolute; opacity: 0; pointer-events: none; }
body.ecran-parcours .pc-bascule i { position: relative; flex: none; width: 2.3rem; height: 1.3rem; border-radius: 999px; background: var(--border); transition: background .15s; }
body.ecran-parcours .pc-bascule i::after { content: ""; position: absolute; top: .15rem; left: .15rem; width: 1rem; height: 1rem; border-radius: 999px; background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: left .15s; }
body.ecran-parcours .pc-bascule input:checked + i { background: var(--vert); }
body.ecran-parcours .pc-bascule input:checked + i::after { left: 1.15rem; }
body.ecran-parcours .pc-bascule input:focus-visible + i { outline: 2px solid var(--vert-fonce); outline-offset: 2px; }
/* Les types du plan tiennent sur une ligne. */
/* Le voyant d'un calcul en cours bat doucement. */
body.ecran-parcours .pc-attente-etat .pc-voyant--vert { animation: pc-bat 1.6s ease-in-out infinite; }
@keyframes pc-bat { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--vert) 0%, transparent); } }
/* Les cartes du parcours prennent les usages de la Carte du parc : pastille de fond en bas a gauche, zoom en bas a droite, bulles sans croix. */
body.ecran-parcours .pc-carte-reseau .pastille-fond { position: absolute; left: .8rem; bottom: .8rem; z-index: 3; }
body.ecran-parcours .pc-popup .maplibregl-popup-content { border: 1px solid var(--border); border-radius: 14px; }

/* La legende du donut se clique : le cas s'allume sur l'anneau, les autres s'effacent, son info s'affiche. */
body.ecran-parcours .pc-donut circle[class*="pc-cas--"] { cursor: pointer; transition: opacity .2s ease, stroke-width .2s ease; animation: pc-arc 1s ease-out both; }
@keyframes pc-arc { from { stroke-dasharray: 0 100; } }
body.ecran-parcours .pc-donut circle.eteint { opacity: .22; }
body.ecran-parcours .pc-donut circle.vu { stroke-width: 6.6; }
body.ecran-parcours .pc-donut figcaption > span { display: flex; flex-direction: column; align-items: center; }
body.ecran-parcours .pc-donut-cas { color: var(--pc-cas-texte, var(--marine)) !important; }
body.ecran-parcours .pc-legende-cas button { display: inline-flex; align-items: center; gap: .45rem; margin: 0 -.45rem; padding: .25rem .45rem; border: 0; border-radius: 999px; background: none;
  color: inherit; font: inherit; cursor: pointer; transition: background .15s ease, opacity .15s ease; }
body.ecran-parcours .pc-legende-cas button:hover { background: var(--pc-cas-fond, var(--bg-page)); }
body.ecran-parcours .pc-legende-cas button.on { background: var(--pc-cas-fond, var(--bg-page)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc-cas) 45%, transparent); }
body.ecran-parcours .pc-legende-cas button.eteint { opacity: .45; }
body.ecran-parcours .pc-cas-info { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .45rem; margin: .7rem 0 0; padding: .55rem .8rem; border-left: 3px solid var(--pc-cas, var(--border));
  border-radius: 0 10px 10px 0; background: var(--bg-page, #f6f7f5); color: var(--text-muted); font-size: var(--t-libelle); }
body.ecran-parcours .pc-cas-info b { color: var(--marine); }
body.ecran-parcours .pc-cas-info em { color: var(--vert-fonce); font-style: normal; font-weight: 800; }
body.ecran-parcours .pc-cas-info span { flex-basis: 100%; }
@media (prefers-reduced-motion: reduce) { body.ecran-parcours .pc-donut circle[class*="pc-cas--"] { animation-duration: 2s; } }
/* L'ampleur : une jauge de quatre barres, nommee, la meme pour tous les cas. */
body.ecran-parcours .pc-ampleur { gap: 2px; height: auto; padding: .28rem .5rem; align-items: flex-end; }
body.ecran-parcours .pc-ampleur small { margin-right: .3rem; color: var(--text-faint); font-size: .66rem; font-weight: 700; line-height: 1; }
body.ecran-parcours .pc-ampleur i { height: .5rem; }
body.ecran-parcours .pc-ampleur i:nth-child(2) { height: .35rem; }
body.ecran-parcours .pc-ampleur i:nth-child(3) { height: .55rem; }
body.ecran-parcours .pc-ampleur i:nth-child(4) { height: .75rem; }
body.ecran-parcours .pc-ampleur i:nth-child(5) { height: .95rem; }
body.ecran-parcours .pc-ampleur--1 i:nth-of-type(-n+1), body.ecran-parcours .pc-ampleur--2 i:nth-of-type(-n+2),
body.ecran-parcours .pc-ampleur--3 i:nth-of-type(-n+3), body.ecran-parcours .pc-ampleur--4 i { background: var(--pc-cas, var(--text-muted)); }
/* Le centre du donut et l'info des cas se fondent l'un dans l'autre, a place fixe. */
body.ecran-parcours .pc-donut figcaption { display: grid; place-items: center; }
body.ecran-parcours .pc-donut figcaption > span { grid-area: 1 / 1; opacity: 0; transform: scale(.92); transition: opacity .25s ease, transform .25s ease; }
body.ecran-parcours .pc-donut figcaption > span.vu { opacity: 1; transform: none; }
body.ecran-parcours .pc-donut circle[class*="pc-cas--"] { transition: opacity .3s ease, stroke-width .3s ease; }
body.ecran-parcours .pc-cas-infos { display: grid; margin: .7rem 0 0; }
body.ecran-parcours .pc-cas-infos .pc-cas-info { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s; }
body.ecran-parcours .pc-cas-infos .pc-cas-info.vu { opacity: 1; visibility: visible; }
body.ecran-parcours .pc-cas-info--aide { align-items: center; border-left-color: var(--border); color: var(--text-faint); }
body.ecran-parcours .pc-cas-info--aide svg { flex: none; color: var(--text-faint); }
body.ecran-parcours .pc-cas-info > span:first-child { flex-basis: 100%; }
/* Les marqueurs gardent leur bord blanc entier, et les magasins sans souci s'effacent en gris : les prioritaires ressortent. */
body.ecran-parcours .pc-carte-reseau .pc-marqueur { border: 2.5px solid #fff; }
body.ecran-parcours .pc-carte-reseau .pc-marqueur.pc-cas--hors_diagnostic, body.ecran-parcours .pc-carte-reseau .pc-marqueur.pc-cas--sans_repere {
  width: .7rem; height: .7rem; border-width: 2px; background: #7d8a84; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
body.ecran-parcours .pc-carte-reseau .pc-marqueur.pc-cas--relocaliser_ou_fermer { background: #6e1d17; }
body.ecran-parcours .pc-carte-legende .pc-cas--hors_diagnostic .pc-cas-point, body.ecran-parcours .pc-carte-legende .pc-cas--sans_repere .pc-cas-point { background: #7d8a84; }
body.ecran-parcours .pc-popup--survol { pointer-events: none; }
body.ecran-parcours .pc-popup--survol .maplibregl-popup-content { padding: .35rem .65rem; color: var(--marine); font-size: var(--t-libelle); font-weight: 700; white-space: nowrap; }
/* Une teinte par cas, nettement distincte : vert, ambre, terre cuite, rouge ; le reste en gris calme. */
body.ecran-parcours .pc-cas--baisser { --pc-cas: #d9673a; --pc-cas-fond: #fbe9e0; --pc-cas-texte: #b04c22; }
body.ecran-parcours .pc-cas--relocaliser_ou_fermer { --pc-cas: var(--danger); --pc-cas-fond: var(--danger-fond); --pc-cas-texte: var(--danger); }
body.ecran-parcours .pc-cas--fermeture_a_discuter { --pc-cas: #6b7280; --pc-cas-fond: var(--bg-page, #f6f7f5); --pc-cas-texte: #4b5563; }
body.ecran-parcours .pc-cas--hors_diagnostic { --pc-cas: #a9b5ae; --pc-cas-fond: var(--bg-page, #f6f7f5); --pc-cas-texte: var(--text-muted); }
body.ecran-parcours .pc-carte-reseau .pc-marqueur.pc-cas--hors_diagnostic, body.ecran-parcours .pc-carte-reseau .pc-marqueur.pc-cas--sans_repere { background: #8f9c95; }
body.ecran-parcours .pc-carte-reseau .pc-marqueur.pc-cas--relocaliser_ou_fermer { background: var(--danger); }
body.ecran-parcours .pc-carte-legende .pc-cas--hors_diagnostic .pc-cas-point { background: #8f9c95; }
body.ecran-parcours .pc-point-vide { flex: none; width: .6rem; height: .6rem; box-sizing: border-box; border: 2px solid var(--text-muted); border-radius: 999px; }
body.ecran-parcours .pc-filtre-sans { --pc-cas: var(--text-muted); }
/* Ce qu'il reste avant de valider, en clair. */
body.ecran-parcours .pc-reste-a-faire { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .5rem .7rem; border-radius: 10px; background: var(--alerte-fond); }
body.ecran-parcours .pc-reste-a-faire b { color: var(--alerte); font-size: var(--t-libelle); }
body.ecran-parcours .pc-reste-a-faire .pc-lien-geste { color: var(--alerte); }
body.ecran-parcours .pc-manquants a::before { background: var(--text-faint); }
body.ecran-parcours .pc-cas--hors_diagnostic { --pc-cas: #cdd5d0; }
/* Survol d'un marqueur : un halo fixe, sans agrandir ; la bulle du nom laisse passer la souris, sinon elle clignote. */
body.ecran-parcours .pc-popup--survol .maplibregl-popup-content, body.ecran-parcours .pc-popup--survol .maplibregl-popup-tip { pointer-events: none; }
body.ecran-parcours .pc-marqueur:hover, body.ecran-parcours .pc-marqueur-site:hover { scale: none; box-shadow: 0 0 0 4px rgba(255, 255, 255, .85), 0 2px 8px rgba(0, 0, 0, .35); }
body.ecran-parcours .pc-marqueur-magasin:hover { box-shadow: 0 0 0 3px rgba(255, 255, 255, .85); }
body.ecran-parcours .maplibregl-marker:has(:hover) { z-index: 5; }
/* Le panneau de Mon reseau : ce qui reste en carte ambre, le bouton ferme a cadenas, les effets en pastilles. */
body.ecran-parcours .pc-reste { display: flex; flex-direction: column; gap: .55rem; padding: .75rem .8rem .8rem; border: 1px solid var(--alerte-trait); border-radius: 12px; background: var(--alerte-fond); }
body.ecran-parcours .pc-reste-titre { display: flex; align-items: center; gap: .4rem; margin: 0; color: var(--alerte); font-size: var(--t-petite); font-weight: 700; }
body.ecran-parcours .pc-reste-liste { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
body.ecran-parcours .pc-reste-liste button { display: flex; align-items: center; gap: .5rem; width: 100%; margin: 0; padding: .35rem .5rem; border: 0; border-radius: 8px;
  background: color-mix(in srgb, var(--bg-card) 70%, transparent); color: var(--marine); font: inherit; font-size: var(--t-libelle); font-weight: 600; text-align: left; cursor: pointer; }
body.ecran-parcours .pc-reste-liste button span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.ecran-parcours .pc-reste-liste button svg { flex: none; color: var(--text-faint); }
body.ecran-parcours .pc-reste-liste button:hover { background: var(--bg-card); }
body.ecran-parcours .pc-reste-autres { padding: .1rem .5rem; color: var(--text-muted); font-size: var(--t-libelle); }
body.ecran-parcours .pc-reste-gestes { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
body.ecran-parcours .pc-reste-gestes form { margin: 0; }
body.ecran-parcours .pc-bouton-reste { height: 2rem; margin: 0; padding: 0 1rem; border: 1px solid var(--alerte); background: var(--alerte); color: #fff; font-size: var(--t-libelle); font-weight: 700; }
body.ecran-parcours .pc-reste-gestes .pc-lien-geste { color: var(--alerte); }
body.ecran-parcours .pc-bouton-ferme { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
body.ecran-parcours .pc-effets-choix { display: flex; flex-direction: column; gap: .3rem; margin: 0; padding: 0; list-style: none; }
body.ecran-parcours .pc-effets-choix li { display: flex; align-items: center; gap: .55rem; padding: .35rem .55rem; border-radius: 8px; background: var(--bg-page, #f6f7f5); font-size: var(--t-petite); }
body.ecran-parcours .pc-effets-choix li i { flex: none; width: .55rem; height: .55rem; border-radius: 3px; background: var(--c, var(--text-faint)); }
body.ecran-parcours .pc-effets-choix li span { flex: 1; color: var(--text-muted); }
body.ecran-parcours .pc-effets-choix li b { color: var(--marine); font-weight: 800; }
body.ecran-parcours .pc-effet--ameliorer, body.ecran-parcours .pc-effet--agrandir { --c: var(--vert); }
body.ecran-parcours .pc-effet--baisser { --c: #d9673a; }
body.ecran-parcours .pc-effet--relocaliser { --c: var(--ambre); }
body.ecran-parcours .pc-effet--fermer { --c: var(--danger); }
body.ecran-parcours .pc-effet--garder { --c: #a9b5ae; }
body.ecran-parcours .pc-effets-m2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: .4rem; margin-top: .5rem; }
body.ecran-parcours .pc-effets-m2 > div { display: flex; flex-direction: column; padding: .45rem .6rem; border-radius: 8px; background: var(--bg-page, #f6f7f5); }
body.ecran-parcours .pc-effets-m2 b { font-size: var(--t-corps); font-weight: 800; }
body.ecran-parcours .pc-effets-m2 b.plus { color: var(--vert-fonce); }
body.ecran-parcours .pc-effets-m2 b.moins { color: var(--danger); }
body.ecran-parcours .pc-effets-m2 small { color: var(--text-faint); font-size: var(--t-libelle); }
/* Les zones contractuelles respectees, dites a l'attente du calcul. */
body.ecran-parcours .pc-zones-note { display: flex; align-items: center; gap: .5rem; margin: .9rem 0 0; padding: .55rem .8rem; border-radius: 10px; background: var(--bg-page, #f6f7f5);
  color: var(--text-muted); font-size: var(--t-petite); }
body.ecran-parcours .pc-zones-note svg, body.ecran-parcours .pc-photo-legende li > svg { flex: none; color: var(--vert-fonce); }
body.ecran-parcours .pc-zones-note { margin-bottom: .9rem; }
/* Le theme sombre du parcours : le filet des cartes et les teintes fixes des cas prennent leur valeur de nuit. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ecran-schema { --trait-sd: #2b3542; }
  :root:not([data-theme="light"]) body.ecran-parcours .pc-cas--hors_diagnostic { --pc-cas: #55615b; }
  :root:not([data-theme="light"]) body.ecran-parcours .pc-cas--baisser { --pc-cas: #e07a50; --pc-cas-fond: #3a2419; --pc-cas-texte: #f0a07c; }
  :root:not([data-theme="light"]) body.ecran-parcours .pc-cas--fermeture_a_discuter { --pc-cas-texte: #aab2bd; }
}
:root[data-theme="dark"] .ecran-schema { --trait-sd: #2b3542; }
:root[data-theme="dark"] body.ecran-parcours .pc-cas--hors_diagnostic { --pc-cas: #55615b; }
:root[data-theme="dark"] body.ecran-parcours .pc-cas--baisser { --pc-cas: #e07a50; --pc-cas-fond: #3a2419; --pc-cas-texte: #f0a07c; }
:root[data-theme="dark"] body.ecran-parcours .pc-cas--fermeture_a_discuter { --pc-cas-texte: #aab2bd; }
/* Les tableaux de Valider tiennent dans leur carte : les en-tetes passent a la ligne, le type garde une largeur lisible. */
body.ecran-parcours .pc-zdv-table { width: 100%; table-layout: auto; }
body.ecran-parcours .pc-zdv-table th { white-space: normal; line-height: 1.25; }
body.ecran-parcours .pc-zdv-table td:first-child { min-width: 11rem; }
body.ecran-parcours .pc-zdv { overflow-x: auto; }

body.ecran-parcours .pc-zdv-table th, body.ecran-parcours .pc-zdv-table td { padding-left: .55rem; padding-right: .55rem; }
body.ecran-parcours .pc-zdv-table td small.pc-unite { display: inline; }
body.ecran-parcours .pc-zdv-table td:first-child { min-width: 9.5rem; }
body.ecran-parcours .pc-zdv-table td.num { white-space: nowrap; }
/* Le tableau par type : sa deuxieme colonne est un nombre, pas un nom (la regle commune lui donnait 13rem). */
body.ecran-parcours .pc-type-table td:nth-child(2) { min-width: 0; }
body.ecran-parcours .pc-type-table th:first-child { width: 34%; }

/* Ecran etroit : le panneau d'action passe en tete (il ne finit plus sous toute la liste), les sous-titres du rail se taisent. */
@media (max-width: 1100px) {
  body.ecran-parcours .pc-grille > .pc-colonne-cote { order: -1; position: static; }
}
@media (max-width: 1250px) { body.ecran-parcours .pc-frise-texte small { display: none; } }
body.ecran-parcours .pc-cas-info--aide { flex-wrap: nowrap; }
@media (max-width: 1100px) {
  body.ecran-parcours .pc-effets-choix { flex-direction: row; flex-wrap: wrap; }
  body.ecran-parcours .pc-effets-choix li { flex: 1 1 10rem; }
}
body.ecran-parcours .pc-valider .pc-deux { align-items: start; }
body.ecran-site-fiche .sdf-leg-vert { width: 1.4rem; height: .6rem; border-radius: 3px; background: linear-gradient(90deg, #a1d99b, #00441b); }
/* Les infobulles du parcours s'ouvrent aussi au clavier : un survol seul laisse la lecture inaccessible. */
body.ecran-parcours [data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; left: 0; bottom: calc(100% + 7px); z-index: 80; width: max-content; max-width: 17rem;
  padding: .5rem .7rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); color: var(--text); font-size: var(--t-libelle); font-weight: 400;
  line-height: 1.4; white-space: normal; box-shadow: 0 6px 20px rgba(20, 40, 30, .16); pointer-events: none; }
body.ecran-parcours [data-tip]:focus-visible::before { content: ""; position: absolute; left: 10px; bottom: calc(100% + 2px); z-index: 80; border: 5px solid transparent;
  border-top-color: var(--bg-card); filter: drop-shadow(0 1px 0 var(--border)); }

/* ---------- LES ECRANS DE PORTABLE ----------
 *
 * Sur un 14 pouces (souvent 1366 px, et moins encore quand Windows agrandit
 * de 125 %), la page etait dessinee pour un grand ecran : il fallait dezoomer
 * a la main. Le pas de base se resserre par palier, et tout ce qui est en rem
 * suit : titres, cartes, tableaux, marges. */
@media (max-width: 1440px) { html { font-size: 15.5px; } }
@media (max-width: 1280px) { html { font-size: 15px; } .page { padding-left: 1.2rem; padding-right: 1.2rem; } }
@media (max-width: 1100px) { html { font-size: 14.5px; } }
@media (max-width: 900px) { html { font-size: 14px; } }
/* Un montant ne se coupe pas : la colonne du gain garde sa valeur entiere. */
body.ecran-parcours table.pc-liste td.num, body.ecran-parcours table.pc-liste td.num b { overflow: visible; text-overflow: clip; white-space: nowrap; }

/* ============================================================
   L'ATTENTE DU DOSSIER PPTX
   Sortir un dossier prend quelques secondes : la carte se cadre, chaque
   couche s'allume et se photographie, puis le serveur met en page. Un
   bouton gris pendant ce temps se lit comme une panne.
   ============================================================ */
.attente-dossier {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  /* Un voile marine explicite : `--marine` s'eclaircit en theme sombre, et
     le voile y perdait son contraste. */
  background: rgba(27, 46, 75, .55);
  backdrop-filter: blur(3px);
}
.attente-dossier[hidden] { display: none; }
.att-carte {
  width: min(26rem, 92vw); padding: 1.6rem 1.8rem 1.4rem;
  background: var(--bg-card); border: 1px solid var(--filet);
  border-radius: 1rem; box-shadow: 0 1.4rem 3rem rgba(0, 0, 0, .28);
  text-align: center;
}
/* LA MARQUE SE DESSINE PENDANT L'ATTENTE. Une roue generique dirait « ca
   charge » ; le losange de DiaMap qui se trace dit qui travaille, et le trait
   qui avance dit que ca avance. Le cycle : le contour se trace, la croix
   suit, le quartier se remplit, puis tout s'efface et recommence. */
.att-marque { display: block; width: 3rem; height: 3rem; margin: .1rem auto 1rem; overflow: visible; }
/* 76 = le tour du losange (4 cotes de 19.1 unites) : le trait part
   invisible et se deroule. */
.att-marque .am-cadre {
  --am-tour: 76px;
  stroke-dasharray: 76; stroke-dashoffset: 76;
  animation: am-tracer 2.6s cubic-bezier(.65, 0, .35, 1) infinite;
}
.att-marque .am-croix {
  --am-tour: 27px;
  stroke-dasharray: 27; stroke-dashoffset: 27;
  animation: am-tracer 2.6s cubic-bezier(.65, 0, .35, 1) .28s infinite;
}
/* Le quartier plein grandit depuis le centre du losange, une fois le trait pose. */
.att-marque .am-plein {
  transform-origin: 16px 16px; transform: scale(0); opacity: 0;
  animation: am-remplir 2.6s cubic-bezier(.34, 1.3, .64, 1) .6s infinite;
}
@keyframes am-tracer {
  0% { stroke-dashoffset: var(--am-tour); }
  38%, 74% { stroke-dashoffset: 0; }
  92%, 100% { stroke-dashoffset: calc(0px - var(--am-tour)); }
}
@keyframes am-remplir {
  0%, 4% { transform: scale(0); opacity: 0; }
  30%, 62% { transform: scale(1); opacity: 1; }
  82%, 100% { transform: scale(.4); opacity: 0; }
}
.att-titre { margin: 0 0 .2rem; font-size: 1.02rem; font-weight: 700; color: var(--text); }
.att-etape { margin: 0 0 .9rem; font-size: .9rem; color: var(--vert-fonce); font-weight: 600; min-height: 1.2em; }
.att-piste { height: .32rem; border-radius: 1rem; background: var(--filet); overflow: hidden; }
.att-piste > i {
  display: block; height: 100%; width: 4%; border-radius: 1rem;
  background: linear-gradient(90deg, var(--vert-fonce), var(--vert));
  transition: width .45s ease;
}
.att-mot { margin: .8rem 0 0; font-size: .8rem; color: var(--texte-doux, #667085); }
@media (prefers-reduced-motion: reduce) {
  .att-marque .am-cadre, .att-marque .am-croix, .att-marque .am-plein { animation-duration: 7s; }
  .att-piste > i { transition: none; }
}

/* ------------------------------------------------------------------ *
 * TELEPHONE ET TABLETTE : CE QUI NE TIENT PAS SUR UN PETIT ECRAN.
 *
 * Ces regles vivent EN FIN DE FEUILLE a dessein. Les ecrans posent plus bas
 * leurs propres grilles (`.zdv-split`, `.zdv-duo`, `.rail-etapes`) avec la
 * meme specificite : placees plus haut, ces regles perdaient a l'ordre des
 * sources et la page debordait quand meme.
 * ------------------------------------------------------------------ */
@media (max-width: 900px) {
  /* La frise des quatre etapes de l'atelier : elle defile chez elle plutot
     que de pousser la page de cent pixels. */
  .rail-etapes { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .rail-etapes::-webkit-scrollbar { display: none; }
  .rail-etapes > * { flex: none; }
  /* Un tableau large defile dans son cadre, jamais en emportant la page. */
  .zdv-cadre, .zdv-defile, .tableau-cadre, .bloc-table, .sdp-cadre { overflow-x: auto; }
  /* Deux volets cote a cote n'ont pas de sens sur un telephone. */
  body.ecran-restitution .zdv-split,
  body.ecran-parcours .zdv-duo,
  body.ecran-parcours .pc-deux,
  body.ecran-parcours .pc-grille { grid-template-columns: minmax(0, 1fr); }
  body.ecran-restitution .zdv-carte { position: relative; top: 0; height: 22rem; min-height: 0; }
  body.ecran-parcours .zdv-volet--carte { position: static; }
  body.ecran-parcours .zdv-volet--carte .pc-carte-zdv .pc-carte-fond { height: 20rem; }
  body.ecran-parcours .zdv-defile { max-height: none; }
  /* La barre d'outils d'une carte se replie plutot que de sortir de l'ecran. */
  .barre-carte { flex-wrap: wrap; row-gap: .35rem; }
  /* LA FRISE DES ETAPES REVIENT DANS LE FLUX. Posee en absolu et centree sur
     une reference plus large que l'ecran, elle commencait a 218 pixels sur un
     telephone de 390 et sortait par la droite. */
  body.ecran-atelier .rail-etapes {
    position: static; left: auto; right: auto; top: auto; transform: none;
    width: 100%; padding: .35rem .6rem; box-sizing: border-box;
  }
}

/* Repères et actions du suivi des études. */
.ecran-pipeline .pipeline-reperes { margin: 0 0 .9rem; max-width: 62rem;
  font-size: var(--t-dense); color: var(--text-muted); }
.ecran-pipeline .pipeline-description { padding: 0 .35rem; color: var(--text-muted); font-size: var(--t-note); line-height: 1.5; }
.ecran-pipeline .pipeline-zone { display: block; margin-top: .7rem; color: var(--vert-fonce); }
.ecran-pipeline .pipeline-carte[draggable="false"] { cursor: default; }
.ecran-pipeline .pipeline-actions > summary { padding: .45rem 0; color: var(--text); }
.ecran-pipeline .pipeline-actions input:focus-visible,
.ecran-pipeline .pipeline-actions summary:focus-visible,
.ecran-pipeline .pipeline-zone:focus-visible { outline: 2px solid var(--vert); outline-offset: 3px; }

.fiche-point-detail { max-height: min(430px, 60vh); overflow-y: auto; padding: .4rem; }
.fiche-point-detail figure { margin: .6rem 0; }
.fiche-point-detail figcaption, .fiche-point-detail small { font-size: var(--t-note); color: var(--text-muted); }
.fiche-point-detail p { margin: .5rem 0; }