/* =====================================================================
   PlaceBTP — feuille de style commune.  v3 « Chaux et terre cuite »

   Direction : le papier chaux et la terre cuite. Un fond chaud plutôt
   qu'un gris d'administration, un texte brun-noir, un seul accent —
   la terre cuite — et l'olive pour ce qui va bien. Moins de filets,
   plus de blanc, des formes arrondies : on lit un document de travail,
   pas un tableur.

   Les chiffres — quantités, montants, références — restent en chasse
   fixe : ce sont des données, elles doivent s'aligner.

   ---------------------------------------------------------------------
   Trois principes, tenus dans tout le fichier
   ---------------------------------------------------------------------

   1. Les variables décrivent un ROLE, pas une teinte. `--blanc` est la
      surface qui porte le contenu, `--encre` la couleur du texte et des
      aplats forts, `--papier` le fond de page. En mode sombre ces rôles
      changent de valeur et le reste suit sans être touché. Corollaire :
      `background:var(--encre); color:var(--blanc)` reste lisible dans
      les deux thèmes — d'où l'absence de `#fff` en dur ici.

   2. Aucune police tierce. Le texte utilise la pile système, les
      données une chasse fixe système. Rien n'est chargé depuis un
      serveur extérieur : le premier rendu est immédiat, et aucune
      donnée de navigation ne part chez un tiers.

   3. Une seule couleur d'ACTION (v0.21, lot B) : le bleu de travail
      (`--signal`) est réservé à ce qu'on peut faire — boutons pleins,
      liens, onglet courant, étape courante de la timeline, choix coché —
      et absent de tout ce qu'on lit. Les états gardent leurs tons ET un
      mot : le vert dit « c'est bon », l'ambre « regarde », le rouge
      « ça bloque », l'ardoise informe. La terre cuite, qui tenait les
      deux rôles jusqu'en 0.20 (un bouton « Lire » et un « échue depuis
      38 j » de la même couleur), ne reste que dans la marque.
   ===================================================================== */

/* Un élément marqué `hidden` est caché, quoi qu'en dise sa classe.
   Sans cette règle, un composant qui se donne un `display:flex` reste
   cliquable une fois caché — et intercepte les clics d'une page entière. */
[hidden]{display:none!important}

:root{
  color-scheme:light;

  /* Couleurs (v0.22, lot B) ------------------------------------------
     UNE PALETTE NEUTRE : blanc, trois gris, noir. La couleur ne décore
     pas, elle désigne l'action — un seul accent, le bleu. Les ocres et
     les beiges de la « chaux » (0.10 → 0.21) ont quitté les surfaces et
     les textes ; la terre cuite ne vit plus que dans le logo. Les états
     gardent chacun un ton, désaturé, et toujours un mot à côté. */
  --encre:#111111;        /* texte et aplats forts — le noir */
  --encre-2:#3A3A3C;      /* texte appuyé */
  --encre-3:#6E6E73;      /* gris 3 : texte secondaire */
  --signal:#1E5BB8;       /* LE bleu — la seule couleur d'accent */
  --signal-d:#174A96;     /* variante texte : 7,6:1 sur blanc */
  --signal-btn:#1E5BB8;   /* fond de bouton, blanc dessus à 6,3:1 */
  --signal-l:#EAF1FB;     /* fond léger : choix coché, carte pressentie, bouton de ligne */
  --signal-lh:#DCE7F8;    /* le même, survolé — et le fond du bouton de ligne (v0.22.1) */
  --signal-lhh:#C9DAF3;   /* le bouton de ligne, survolé */
  --marque:#B4472B;       /* terre cuite — le logo, et rien d'autre */
  --papier:#F5F5F7;       /* gris 1 : fond de page */
  --blanc:#FFFFFF;        /* surface : panneaux, en-tête, cartes */
  --surface:var(--blanc);
  --surface-2:#F5F5F7;    /* surface secondaire = gris 1 */
  --surface-3:#EBEBEF;    /* survol, fond d'un contrôle */
  --beton:#6E6E73;        /* texte secondaire = gris 3 (4,9:1 sur blanc) */
  --beton-c:#6E6E73;      /* texte tertiaire : le même — deux gris de texte, pas trois */
  --trait:#E5E5EA;        /* gris 2 : filets, bordures */
  --trait-b:#C7C7CC;      /* v0.22.1 — contour d'un bouton secondaire : un filet à 1,2:1 ne se voyait pas sur blanc */
  --trait-f:#F0F0F2;      /* filets légers */
  --carte:#ECECEF;        /* bordure de carte : à peine visible */

  /* Les états : un ton chacun, désaturé, et un mot. */
  --vert:#3F7A45;  --vert-l:#EAF3EB;
  --ambre:#8A6216; --ambre-l:#F7F0E2;
  --rouge:#A8403A; --rouge-l:#F8E9E8;
  --bleu:#4A6478;  --bleu-l:#EAF0F4;    /* ardoise, pour l'information */

  /* Couleurs dérivées ---------------------------------------------- */
  --sur-signal:#FFFFFF;   /* texte posé sur l'accent */
  --sur-vert:#FFFFFF;
  --vert-h:#33633A;
  --ombre-c:0,0,0;        /* les ombres sont neutres */
  --voile-c:rgba(0,0,0,.45);
  --anneau:rgba(30,91,184,.18);
  --anneau-r:rgba(168,64,58,.14);
  --quadrillage:rgba(0,0,0,.025);
  --sq-a:var(--trait-f); --sq-b:#E2E2E6;   /* dégradé des squelettes */

  /* Typographie ----------------------------------------------------
     Rien n'est chargé depuis l'extérieur. La pile système donne
     Inter sur Windows 11, SF sur Apple, Roboto sur Android : trois
     humanistes qui se ressemblent assez pour que la mise en page ne
     bouge pas d'un écran à l'autre. */
  --f-titre:-apple-system,BlinkMacSystemFont,'Segoe UI Variable Display','Segoe UI',
            Roboto,'Helvetica Neue',Arial,sans-serif;
  --f-texte:-apple-system,BlinkMacSystemFont,'Segoe UI Variable Text','Segoe UI',
            Roboto,'Helvetica Neue',Arial,sans-serif;
  --f-data:ui-monospace,SFMono-Regular,'SF Mono','Cascadia Mono','Segoe UI Mono',
           Menlo,Consolas,monospace;

  /* Échelle (v0.21, lot B) -------------------------------------------
     Corps à 16 px, et SIX tailles nommées — rien entre. Un texte est
     l'une de ces six, ou il n'existe pas. `--t-3` est le corps ; `--t-1`
     est le plus petit qu'on s'autorise sur un 16 pouces à un mètre de
     l'œil ; les données en chasse fixe prennent `--t-2` ou `--t-3`,
     jamais plus grand que le texte qui les entoure. */
  --t-1:13px;   /* annotation, en-tête de colonne, étiquette */
  --t-2:14px;   /* secondaire : aide, résumé, donnée en table */
  --t-3:16px;   /* corps */
  --t-4:18px;   /* mis en avant : montant de carte, sous-titre */
  --t-5:22px;   /* titre de page */
  --t-6:28px;   /* titre d'accueil, grand montant */

  /* Rythme --------------------------------------------------------- */
  --r1:4px; --r2:8px; --r3:12px; --r4:16px; --r5:24px; --r6:32px; --r7:48px;
  /* v0.22, lot A — LA GOUTTIÈRE : la même marge entre le bord (ou le
     flanc) et le contenu, sur les deux faces, à toutes les largeurs.
     Rien ne touche rien. */
  --goutt:24px;
  /* v0.22, lot B — UN rayon pour les surfaces, partout ; la pilule pour
     ce qui se clique ; une ombre courte, neutre. */
  --arr:10px;            /* cartes, panneaux, champs, notes : le même */
  --arr-s:10px;          /* alias — plus de second rayon */
  --arr-p:22px;          /* pilules : boutons, puces, étiquettes */
  --om:0 1px 2px rgba(var(--ombre-c),.06);
  --om-2:0 2px 10px rgba(var(--ombre-c),.08);
  --om-3:0 16px 40px rgba(var(--ombre-c),.18);
  --om-c:0 1px 2px rgba(var(--ombre-c),.05),0 3px 10px rgba(var(--ombre-c),.05); /* la carte */
  /* Mouvement (v0.22, lot B) : 200 ms, une courbe, jamais de rebond.
     `prefers-reduced-motion` met tout à zéro plus bas. */
  --duree:.2s;
  --duree-l:.2s;
  --courbe:cubic-bezier(.2,.8,.3,1);
  --entete:60px;         /* hauteur de l'en-tête collant */
  --flanc:216px;         /* largeur de la navigation latérale */
}

/* ---------------------------------------------------------------------
   Mode sombre — « la chaux la nuit ».

   Le fond n'est pas noir mais brun très sombre : la même famille que le
   thème clair, vue à la lampe. La terre cuite est éclaircie, sinon elle
   passe sous le seuil de contraste pour du texte.
   --------------------------------------------------------------------- */
:root[data-theme="sombre"]{
  color-scheme:dark;
  /* La même palette, inversée : noir, trois gris, blanc — et le même bleu. */
  --encre:#F5F5F7;
  --encre-2:#D1D1D6;
  --encre-3:#98989D;
  --signal:#5A9BF0;
  --signal-d:#8DBBF7;
  --signal-btn:#2B6FD6;
  --signal-l:#16273D; --signal-lh:#1E3352; --signal-lhh:#26406A;
  --marque:#E0704F;
  --papier:#000000;
  --blanc:#1C1C1E;
  --surface-2:#2C2C2E;
  --surface-3:#3A3A3C;
  --beton:#98989D;
  --beton-c:#98989D;
  --trait:#3A3A3C;
  --trait-b:#636366;
  --trait-f:#2C2C2E;
  --carte:#2C2C2E;

  --vert:#7FC084;  --vert-l:#1B2A1D;
  --ambre:#D9AE55; --ambre-l:#2E2716;
  --rouge:#E9837B; --rouge-l:#33201E;
  --bleu:#9DB8CE;  --bleu-l:#1C262E;

  --sur-signal:#FFFFFF;
  --sur-vert:#0F1F11;
  --vert-h:#97CC9B;
  --ombre-c:0,0,0;
  --voile-c:rgba(0,0,0,.7);
  --anneau:rgba(90,155,240,.28);
  --anneau-r:rgba(233,131,123,.22);
  --quadrillage:rgba(255,255,255,.035);
  --sq-a:#2C2C2E; --sq-b:#3A3A3C;
  --om:0 1px 2px rgba(0,0,0,.35);
  --om-2:0 2px 10px rgba(0,0,0,.45);
  --om-3:0 16px 40px rgba(0,0,0,.6);
  --om-c:0 1px 2px rgba(0,0,0,.4);
}

/* Sans choix explicite, on suit le réglage du système. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="clair"]){
    color-scheme:dark;
    --encre:#F5F5F7; --encre-2:#D1D1D6; --encre-3:#98989D;
    --signal:#5A9BF0; --signal-d:#8DBBF7; --signal-btn:#2B6FD6; --signal-l:#16273D; --signal-lh:#1E3352; --signal-lhh:#26406A; --marque:#E0704F;
    --papier:#000000; --blanc:#1C1C1E; --surface-2:#2C2C2E; --surface-3:#3A3A3C;
    --beton:#98989D; --beton-c:#98989D; --trait:#3A3A3C; --trait-b:#636366; --trait-f:#2C2C2E; --carte:#2C2C2E;
    --vert:#7FC084;  --vert-l:#1B2A1D;
    --ambre:#D9AE55; --ambre-l:#2E2716;
    --rouge:#E9837B; --rouge-l:#33201E;
    --bleu:#9DB8CE;  --bleu-l:#1C262E;
    --sur-signal:#FFFFFF; --sur-vert:#0F1F11; --vert-h:#97CC9B;
    --ombre-c:0,0,0; --voile-c:rgba(0,0,0,.7);
    --anneau:rgba(90,155,240,.28); --anneau-r:rgba(233,131,123,.22);
    --quadrillage:rgba(255,255,255,.035); --sq-a:#2C2C2E; --sq-b:#3A3A3C;
    --om:0 1px 2px rgba(0,0,0,.35);
    --om-2:0 2px 10px rgba(0,0,0,.45);
    --om-3:0 16px 40px rgba(0,0,0,.6);
    --om-c:0 1px 2px rgba(0,0,0,.4);
  }
}

@media (prefers-reduced-motion: reduce){
  :root{--duree:0s}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* Contraste renforcé : on épaissit les filets plutôt que de changer les teintes. */
@media (prefers-contrast: more){
  :root{--trait:#B0B0B6;--trait-f:#D0D0D5;--beton:#4A4A4F;--carte:#B0B0B6}
  :root[data-theme="sombre"]{--trait:#6E6E73;--trait-f:#4A4A4F;--beton:#C7C7CC;--carte:#6E6E73}
}

*,*::before,*::after{box-sizing:border-box}
/* v0.17, lot H — LA PLACE DE LA BARRE DE DÉFILEMENT EST TOUJOURS RÉSERVÉE.

   Sans cette ligne, la barre n'apparaît que lorsque le contenu dépasse
   la hauteur de la fenêtre — et son apparition rétrécit la zone utile de
   quinze pixels, ce qui décale d'un coup tout ce qui est centré. Le
   symptôme se voit en naviguant : les colonnes de l'accueil, les
   panneaux, la barre d'onglets sautent latéralement d'un écran à l'autre
   selon que la page est longue ou courte.

   `scrollbar-gutter` réserve la gouttière quoi qu'il arrive, y compris
   sur les navigateurs à barre superposée où elle ne coûte rien. */
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable}
/* v0.22, lot B — un bouton nu hérite de l'échelle : jamais la taille par défaut du navigateur. */
button,input,select,textarea{font:inherit}
body{margin:0;font-family:var(--f-texte);font-size:var(--t-3);line-height:1.5;
     color:var(--encre);background:var(--papier);-webkit-font-smoothing:antialiased;
     padding-bottom:env(safe-area-inset-bottom)}

h1,h2,h3,h4{font-family:var(--f-titre);font-weight:700;letter-spacing:-.022em;
            line-height:1.12;margin:0}
p{margin:0}
/* v0.21, lot B — LES LIENS PORTENT LA COULEUR D'ACTION, comme les boutons
   pleins et l'étape courante de la timeline : c'est ce qui se clique.
   Les composants qui en décident autrement (barre, pied, cartes) le
   disent eux-mêmes. */
a{color:var(--signal-d);text-underline-offset:.14em;text-decoration-thickness:1px}
a:hover{color:var(--signal)}

/* Chiffres et références : chasse fixe, alignement tabulaire. */
/* v0.21, lot B — la chasse fixe est sur la même échelle que le texte, un
   cran en dessous : elle grossit moins vite. Pas de .92em qui fabrique
   des tailles entre deux crans. */
.data,.tbl td.data,.tbl th.data{font-family:var(--f-data);font-variant-numeric:tabular-nums;
  font-size:var(--t-2);letter-spacing:-.01em}
.tbl th.data,.t1 .data{font-size:var(--t-1)}
.num{text-align:right}

/* --- Accès clavier : un anneau visible, jamais supprimé ------------ */
:focus{outline:none}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px;border-radius:var(--arr-s)}
.saut{position:absolute;left:-9999px;top:0;background:var(--encre);color:var(--blanc);
      padding:11px 18px;z-index:999;border-radius:0 0 var(--arr-s) 0;font-weight:600}
.saut:focus{left:0}

/* =====================================================================
   La cote — signature graphique.
   Une ligne de cotation de plan : deux traits d'extrémité, une ligne,
   et l'étiquette qui interrompt la ligne au milieu. Utilisée avec
   parcimonie : c'est une ponctuation, pas un décor.
   ===================================================================== */
.cote{display:flex;align-items:center;gap:0;width:100%;margin:var(--r3) 0}
.cote__t{width:1px;height:13px;background:var(--encre-3);flex:none}
.cote__l{flex:1;height:1px;background:var(--trait);position:relative}
.cote__l--fait{background:var(--vert)}
.cote__e{font-family:var(--f-data);font-size:var(--t-2);font-weight:600;color:var(--encre-2);
  background:var(--papier);padding:0 var(--r2);white-space:nowrap;letter-spacing:.02em}
/* Sur téléphone la cote se plie plutôt que de pousser la page de côté. */
@media(max-width:560px){.cote__e{white-space:normal;text-align:center;line-height:1.35}}
.cote--v{flex-direction:column;width:auto;height:100%;margin:0}
.cote--v .cote__t{width:13px;height:1px}
.cote--v .cote__l{width:1px;height:auto;flex:1}

/* =====================================================================
   En-tête horizontal (pages publiques et outils)
   ===================================================================== */
.top{background:var(--blanc);border-bottom:1px solid var(--trait);
     padding:var(--r3) var(--r5);display:flex;align-items:center;gap:var(--r4);
     flex-wrap:wrap;position:sticky;top:0;z-index:60;
     padding-left:max(var(--r5),env(safe-area-inset-left));
     padding-right:max(var(--r5),env(safe-area-inset-right))}
.marque{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.marque__b{width:30px;height:30px;background:var(--encre);border-radius:var(--arr-s);
  flex:none;position:relative}
.marque__b::after{content:'P';position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-family:var(--f-titre);font-weight:800;font-size:var(--t-4);
  color:var(--blanc)}
/* Le nom et le nom d'espace forment une colonne : le conteneur
   intermédiaire était en `inline`, la marge du second n'avait aucun effet. */
.marque>span:last-child{display:flex;flex-direction:column;justify-content:center;
  line-height:1.1;min-width:0}
.marque__n{font-family:var(--f-titre);font-size:var(--t-4);font-weight:800;letter-spacing:-.02em}
.marque__n span{color:var(--marque)}
.marque__s{font-size:var(--t-2);color:var(--beton);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;max-width:220px}
.top__d{margin-left:auto;display:flex;align-items:center;gap:var(--r2);flex-wrap:wrap}
.qui{font-size:var(--t-2);color:var(--beton);text-align:right;line-height:1.3}
.qui b{display:block;color:var(--encre);font-size:var(--t-2);font-weight:600}

/* Onglets horizontaux — conservés pour les écrans qui s'en servent encore. */
.nav{background:var(--blanc);border-bottom:1px solid var(--trait);
     padding:0 var(--r4);display:flex;gap:4px;overflow-x:auto;
     position:sticky;top:calc(var(--entete) - 1px);z-index:55;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav__b{font-family:var(--f-titre);font-size:var(--t-3);font-weight:600;letter-spacing:-.005em;
  padding:13px 14px 11px;color:var(--beton);background:none;
  border:0;border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;
  display:flex;align-items:center;gap:7px;transition:color var(--duree)}
.nav__b:hover{color:var(--encre)}
a.nav__b{text-decoration:none}
.nav__b[aria-current="page"]{color:var(--signal-d);border-bottom-color:var(--signal)}
.nav__c{font-family:var(--f-data);font-size:var(--t-2);font-weight:600;background:var(--trait-f);
  color:var(--beton);padding:2px 7px;border-radius:20px}
.nav__b[aria-current="page"] .nav__c{background:var(--signal);color:var(--sur-signal)}

/* =====================================================================
   La coquille — navigation latérale.

   C'est la structure des écrans de travail : un flanc étroit qui ne
   bouge pas, un corps qui défile. Sur téléphone le flanc devient un
   tiroir, et une barre d'onglets apparaît en bas — là où se trouve le
   pouce.
   ===================================================================== */
.coq{display:grid;grid-template-columns:var(--flanc) 1fr;min-height:100vh;min-height:100dvh}
.flanc{background:var(--blanc);border-right:1px solid var(--trait);
  padding:var(--r4) var(--r3);display:flex;flex-direction:column;gap:2px;
  position:sticky;top:0;height:100vh;height:100dvh;overflow-y:auto;
  padding-left:max(var(--r3),env(safe-area-inset-left))}
.flanc .marque{padding:var(--r2) var(--r2) var(--r5)}
.flanc__l{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--arr-s);
  font-size:var(--t-2);font-weight:500;color:var(--beton);text-decoration:none;background:none;
  border:0;cursor:pointer;width:100%;text-align:left;font-family:var(--f-texte);
  transition:background var(--duree),color var(--duree)}
.flanc__l:hover{background:var(--surface-2);color:var(--encre)}
.flanc__l svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.flanc__l[aria-current="page"]{background:var(--signal-l);color:var(--signal-d);font-weight:600}
.flanc__l em{margin-left:auto;font-style:normal;font-family:var(--f-data);font-size:var(--t-2);
  font-weight:600;padding:2px 7px;border-radius:20px;background:var(--trait-f);color:var(--beton)}
.flanc__l[aria-current="page"] em{background:var(--signal);color:var(--sur-signal)}
.flanc__s{font-family:var(--f-data);font-size:var(--t-1);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--beton-c);padding:var(--r5) 11px var(--r2)}
.flanc__p{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px 11px;
  border-radius:var(--arr-s);background:var(--surface-2);font-size:var(--t-2);
  text-decoration:none;color:inherit;border:1px solid var(--trait-f)}
.flanc__p:hover{border-color:var(--trait)}
.flanc__q{margin-top:4px;align-self:flex-start}
/* v0.28.1 (A) — LE FLANC SE REPLIE en colonne d'icônes : le bouton est à
   son bord, l'état mémorisé par compte (utilisateurs.preferences). Sous
   900 px le flanc est un tiroir, la règle ne s'applique pas. */
.flanc{position:relative}
.flanc__r{position:absolute;top:14px;right:8px;width:26px;height:26px;border-radius:50%;border:1px solid var(--trait);
  background:var(--blanc);color:var(--beton);cursor:pointer;z-index:5;font-size:16px;line-height:1;padding:0 0 2px;
  display:flex;align-items:center;justify-content:center;font-family:var(--f-texte)}
.flanc__r:hover,.flanc__r:focus-visible{background:var(--surface-2);color:var(--encre)}
@media(min-width:901px){
  .coq[data-flanc="replie"]{grid-template-columns:56px 1fr}
  .coq[data-flanc="replie"] .flanc{padding-left:8px;padding-right:8px;align-items:center;gap:4px}
  .coq[data-flanc="replie"] .flanc .marque{padding:var(--r2) 0 var(--r3)}
  .coq[data-flanc="replie"] .flanc .marque>span:last-child,.coq[data-flanc="replie"] .flanc__l>span,
  .coq[data-flanc="replie"] .flanc__s,.coq[data-flanc="replie"] .flanc__p>span:last-child,.coq[data-flanc="replie"] .flanc__q{display:none}
  .coq[data-flanc="replie"] .flanc__l{position:relative;justify-content:center;padding:10px 0;width:40px}
  .coq[data-flanc="replie"] .flanc__l em{position:absolute;top:0;right:-2px;margin:0;font-size:10px;padding:0 5px;line-height:16px}
  .coq[data-flanc="replie"] .flanc__p{padding:6px;justify-content:center;width:40px}
  .coq[data-flanc="replie"] .flanc__r{position:static;margin:0 auto 4px}
}
@media(max-width:900px){.flanc__r{display:none}}
.flanc__p b{display:block;font-weight:600;overflow-wrap:anywhere}   /* v0.22.1 — « Coffrage Méditerr… » : la raison sociale se replie, elle ne se coupe pas */
/* Le sélecteur vise la ligne SOUS le nom, pas n'importe quel span : la
   pastille d'initiales est elle aussi un span, et la règle générique
   lui retirait sa couleur et son centrage. */
.flanc__p b + span{display:block;font-size:var(--t-2);color:var(--beton);overflow-wrap:anywhere}
.corps{min-width:0;display:flex;flex-direction:column}
/* La gouttière : chaque bloc du corps, en-tête compris, s'aligne sur la
   même marge — des deux faces (v0.25, lot A1). */
.corps>*:not(.tete){padding-left:var(--goutt);padding-right:var(--goutt)}
.corps>.tete{padding-left:var(--goutt);padding-right:var(--goutt)}
/* =====================================================================
   v0.25, lot A1 — LES DEUX LARGEURS, LES MÊMES DES DEUX CÔTÉS (§2.43).

   Un formulaire ou du texte tient dans 1 180 px : au-delà, l'œil perd le
   début de la ligne. Un tableau, une carte, une liste prennent toute la
   largeur. Le donneur d'ordre le faisait avec `.contenu` / `.contenu--l` ;
   le répondant ne le faisait pas du tout — à 1920 px, le profil
   d'entreprise s'étalait d'un bord à l'autre. `.corps--etroit` pose la
   règle sur le corps, quelle que soit la navigation.
   ===================================================================== */
.corps--etroit>*:not(.tete){width:100%;max-width:calc(1180px + 2 * var(--goutt));margin-left:auto;margin-right:auto;box-sizing:border-box}
/* Le gabarit à onglets : l'en-tête d'identité, la barre d'onglets, puis le
   corps — une colonne qui remplit la fenêtre, le pied restant en bas. */
.coq--onglets{display:flex;flex-direction:column;min-height:0}
.coq--onglets .corps{flex:1 0 auto}
#racine>.coq--onglets{flex:1 0 auto}
/* Dans ce gabarit, le corps porte `.contenu` : sa propre gouttière suffit. */
.coq--onglets .corps>.contenu{padding-left:var(--goutt);padding-right:var(--goutt)}

/* Pastille d'initiales — le même objet dans le flanc et dans les listes. */
.av{width:30px;height:30px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;font-family:var(--f-titre);font-size:var(--t-2);font-weight:700;
  background:var(--signal);color:var(--sur-signal);letter-spacing:.01em}
.av--n{background:var(--trait-f);color:var(--beton)}
.avs{display:flex}
.avs .av{width:27px;height:27px;font-size:var(--t-2);margin-left:-7px;
  border:2px solid var(--blanc)}
.avs .av:first-child{margin-left:0}

/* En-tête de page, dans le corps */
.tete{display:flex;align-items:center;gap:var(--r3);flex-wrap:wrap;
  padding:var(--r4) var(--r5);background:var(--blanc);border-bottom:1px solid var(--trait);
  position:sticky;top:0;z-index:50}
.tete h1{font-size:var(--t-5)}
.tete__f{font-size:var(--t-2);color:var(--beton)}
.tete__d{margin-left:auto;display:flex;align-items:center;gap:var(--r2);flex-wrap:wrap}
/* Sur téléphone, l'en-tête collant mangeait deux rangs : le titre puis
   les actions. On resserre, et on retire le rappel du raccourci clavier
   — « Ctrl K » ne veut rien dire au doigt. */
@media(max-width:560px){
  :root{--goutt:16px}
  .tete{padding:var(--r3) var(--goutt);gap:var(--r2)}
  .tete h1{font-size:var(--t-5)}
  .tete__d [data-act="palette"]{display:none}
}

/* Barre d'onglets basse — téléphone uniquement */
.pouce{display:none}

@media(max-width:900px){
  .coq{grid-template-columns:1fr}
  .flanc{position:fixed;inset:0 auto 0 0;width:min(280px,84vw);z-index:200;
    transform:translateX(-102%);transition:transform var(--duree);box-shadow:var(--om-3)}
  .flanc[data-ouvert="1"]{transform:none}
  .corps{padding-bottom:66px}
  .pouce{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:180;
    background:var(--blanc);border-top:1px solid var(--trait);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .pouce a,.pouce button{flex:1;display:flex;flex-direction:column;align-items:center;
    gap:3px;padding:7px 2px;font-size:var(--t-2);font-weight:600;color:var(--beton);
    text-decoration:none;background:none;border:0;cursor:pointer;font-family:var(--f-texte);
    border-radius:var(--arr-s);min-height:48px}
  .pouce svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;
    stroke-linecap:round;stroke-linejoin:round}
  .pouce [aria-current="page"]{color:var(--signal-d)}
}

/* =====================================================================
   Boutons — un seul accent, des états francs
   ===================================================================== */
/* v0.21, lot B — UN BOUTON SE VISE : 40 px de haut à la souris, 44 au
   doigt (`pointer:coarse`), petit bouton compris. La taille du texte
   est celle du corps ; un bouton plus petit que ce qu'il commande se lit
   comme un détail. */
/* v0.22, lot B — DEUX TAILLES, TROIS HIÉRARCHIES. `.btn` (44 px) et
   `.btn--s` (36 px), rien d'autre — `.btn--l` est un alias de `.btn`.
   Plein pour l'action principale (une par écran), contour pour la
   secondaire, texte seul (`.btn--f`) pour la tertiaire. Le vert plein
   d'« Attribuer » (`.btn--v`) est devenu le même bleu : un seul accent. */
.btn{font-family:var(--f-texte);font-size:var(--t-3);font-weight:600;line-height:1.2;
  min-height:44px;padding:9px 20px;border-radius:var(--arr-p);border:1px solid var(--trait-b);
  background:var(--blanc);color:var(--encre);cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;
  transition:background var(--duree),border-color var(--duree),transform var(--duree),
             box-shadow var(--duree),color var(--duree)}
.btn:hover{border-color:var(--encre-3);background:var(--surface-2)}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.btn--p{background:var(--signal-btn);border-color:var(--signal-btn);color:var(--sur-signal);
  box-shadow:var(--om)}
.btn--p:hover{background:var(--signal-d);border-color:var(--signal-d);color:var(--sur-signal)}
.btn--e{background:var(--encre);border-color:var(--encre);color:var(--blanc)}
.btn--e:hover{background:var(--encre-2);border-color:var(--encre-2);color:var(--blanc)}
.btn--f{border-color:transparent;background:transparent;color:var(--encre-2)}   /* v0.22.1 — gris 3 tombait à 4,47:1 sur un fond gris 1 : texte appuyé */
.btn--f.btn--w{border-color:var(--trait-b)}   /* seul sur sa ligne, il doit se voir */
.btn--f:hover{background:var(--surface-2);color:var(--encre)}
.btn--d{color:var(--rouge);border-color:var(--trait-b)}   /* v0.22.1 — même contour que les autres secondaires ; le rouge du texte dit le danger */
.btn--d:hover{background:var(--rouge-l);border-color:var(--rouge);color:var(--rouge)}
.btn--v{background:var(--signal-btn);border-color:var(--signal-btn);color:var(--sur-signal);box-shadow:var(--om)}
.btn--v:hover{background:var(--signal-d);border-color:var(--signal-d);color:var(--sur-signal)}
.btn--s{padding:5px 14px;font-size:var(--t-2);min-height:36px}
/* v0.22.1 — L'ACTION D'UNE LIGNE SE VOIT (§2.23, règle corrigée). Dans une
   liste, l'action de chaque ligne est l'action principale de sa ligne :
   bleu clair, texte bleu foncé (7,5:1). Le contour blanc sur fond blanc
   des listes de la 0.22 était invisible. */
/* v0.22.1 — le bouton de ligne : bleu clair, texte bleu foncé (7,5:1). Le
   fond est le bleu « survolé » de la 0.22 (--signal-lh) et non le bleu de
   fond léger : posé sur une ligne surlignée ou un fond gris 1, le fond
   léger disparaissait (1,05:1). Le survol prend une teinte de plus. */
/* v0.23, lot I — LE BOUTON DE LIGNE NE DOIT PAS SA VISIBILITÉ À SON FOND.
   Sa teinte bleu pâle se voit sur du blanc (1,16:1) ; elle disparaît sur une
   ligne elle-même teintée — les réponses « sans suite » de la fiche
   entreprise, ambre, où la recette l'a relevé trois fois. Le contour prend
   donc le bleu du texte : le bouton garde son bord quel que soit le fond de
   sa ligne, et la règle du §2.23 — « dans une liste, chaque ligne porte son
   action, et elle se voit » — cesse de dépendre de la couleur de la ligne. */
.btn--ligne{background:var(--signal-lh,#DCE7F8);border-color:var(--signal-d);color:var(--signal-d);font-weight:600}
.btn--ligne:hover{background:var(--signal-lhh,#C9DAF3);border-color:var(--signal-d);color:var(--signal-d)}
.tbl .tbl__a{white-space:nowrap;text-align:right}
.tbl .tbl__a .btn+.ico{margin-left:6px}
.btn--l{padding:9px 24px;font-size:var(--t-3);min-height:44px}
/* =====================================================================
   v0.24, lot G — L'ÉCHELLE DES BOUTONS, ET LA CIBLE DE 44 px.

   L'échelle, rappelée ici parce qu'elle se défait par accident : DEUX
   HAUTEURS (44 px pour `.btn`, 36 px pour `.btn--s`) et TROIS RÔLES
   (plein pour l'action principale, une par écran ; contour pour la
   secondaire ; texte seul pour la tertiaire). Rien d'autre — `.btn--l`
   est un alias de `.btn`, et `.btn--v` a rejoint `.btn--p`.

   Un bouton de 36 px SE LIT à 36 px et SE TOUCHE à 44 : sur un écran
   tactile, 36 px font manquer une cible sur cinq, et la cible manquée est
   souvent celle d'à côté. La cible est donc étendue par un calque
   transparent centré sur le bouton, qui ne change ni la mise en page ni
   le dessin — seulement ce que le doigt atteint. Vertical uniquement :
   élargir aussi en largeur ferait recouvrir le bouton voisin sur une
   ligne serrée, et voler son clic.
   ===================================================================== */
.btn--s,.ico,.eto__b{position:relative}
.btn--s::after,.ico::after,.eto__b::after{content:'';position:absolute;
  left:0;right:0;top:50%;transform:translateY(-50%);height:44px}
/* Au clavier et à la souris, le calque ne change rien : il est transparent
   et ne porte aucun style. À l'impression non plus — il n'a pas de fond. */
.btn--w{width:100%}
.btn--c{border-radius:var(--arr-s)}   /* variante à coins droits */

.ico{background:none;border:0;cursor:pointer;font-size:var(--t-3);line-height:1;
  color:var(--beton);padding:7px;border-radius:var(--arr-s);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background var(--duree),color var(--duree)}
.ico:hover{background:var(--surface-2);color:var(--encre)}
.ico svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}

/* =====================================================================
   Panneaux et cartes
   ===================================================================== */
.panel{background:var(--blanc);border:1px solid var(--carte);border-radius:var(--arr);
  margin-bottom:var(--r4);overflow:hidden;box-shadow:var(--om-c)}
.panel__h{display:flex;align-items:center;gap:var(--r3);padding:var(--r3) var(--r4);
  border-bottom:1px solid var(--trait-f);flex-wrap:wrap;background:var(--surface-2)}
.panel__n{font-family:var(--f-data);font-size:var(--t-2);font-weight:600;color:var(--blanc);
  background:var(--encre);width:23px;height:23px;border-radius:var(--arr-s);flex:none;
  display:flex;align-items:center;justify-content:center}
.panel__h h2{font-size:var(--t-5)}
.panel__d{margin-left:auto;display:flex;align-items:center;gap:var(--r2);
  flex-wrap:wrap;font-size:var(--t-2);color:var(--beton)}
.panel__b{padding:var(--r4)}

.bloc{border:1px solid var(--trait-f);border-radius:var(--arr);padding:var(--r3);
  background:var(--surface-2);margin-bottom:var(--r3)}
/* v0.22, lot B — un titre de section se lit comme un titre : grand, serré,
   en bas de casse. Plus de capitales espacées ni de filet qui court. */
.legende{display:flex;align-items:center;gap:var(--r3);font-family:var(--f-titre);
  font-size:var(--t-4);font-weight:700;letter-spacing:-.018em;text-transform:none;
  color:var(--encre);margin:var(--r5) 0 var(--r3)}
.legende::after{content:none}

.card{border:1px solid var(--carte);border-radius:var(--arr);box-shadow:var(--om-c);padding:var(--r3);
  background:var(--blanc);cursor:pointer;text-align:left;font:inherit;color:inherit;
  transition:border-color var(--duree),box-shadow var(--duree),transform var(--duree)}
.card:hover{border-color:var(--beton-c);box-shadow:var(--om-2);transform:translateY(-1px)}
.card[aria-pressed="true"],.card.sel{border-color:var(--signal);
  background:var(--signal-l);box-shadow:0 0 0 1px var(--signal)}

/* Indicateurs de tête — la ligne qui dit où on en est */
.kpis{display:grid;gap:var(--r3);grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  padding:var(--r4) var(--r5) 0}
.kpi{background:var(--blanc);border:1px solid var(--carte);border-radius:var(--arr);box-shadow:var(--om-c);
  padding:var(--r3) var(--r4);text-align:left;font:inherit;color:inherit}
button.kpi{cursor:pointer;transition:border-color var(--duree),box-shadow var(--duree)}
button.kpi:hover{border-color:var(--beton-c);box-shadow:var(--om-2)}
.kpi b{display:block;font-family:var(--f-titre);font-size:var(--t-6);font-weight:800;
  line-height:1;letter-spacing:-.025em}
.kpi span{display:block;font-size:var(--t-2);color:var(--beton);margin-top:6px}
a.kpi{text-decoration:none;color:inherit}
.kpi u{text-decoration:none;font-weight:600;color:var(--vert)}
.kpi--a b{color:var(--ambre)} .kpi--a u{color:var(--ambre)}
.kpi--r b{color:var(--rouge)} .kpi--r u{color:var(--rouge)}
.kpi--o b{color:var(--ambre)} /* v0.21 — « à faire » est une attention, pas une action : ambre, jamais la couleur d'action */
.kpi--v b{color:var(--vert)}
/* Sur téléphone, six indicateurs empilés en colonne prennent les deux
   tiers de l'écran avant qu'on voie quoi que ce soit d'autre. Deux par
   rang : on garde le chiffre lisible et le graphique reste à portée de
   pouce. */
@media(max-width:560px){
  .kpis{grid-template-columns:1fr 1fr;gap:var(--r2);padding:var(--r3) var(--r3) 0}
  .kpi{padding:var(--r2) var(--r3)}
  .kpi b{font-size:var(--t-5)}
  .kpi span{font-size:var(--t-2);margin-top:4px}
}

/* =====================================================================
   Formulaires
   ===================================================================== */
.champ{margin-bottom:var(--r3)}
.champ>label,.lab{display:block;font-family:var(--f-texte);font-size:var(--t-2);font-weight:600;
  margin-bottom:5px;color:var(--encre-2)}
.aide{display:block;font-size:var(--t-2);color:var(--beton);margin-top:5px}

input,select,textarea{font-family:var(--f-texte);font-size:var(--t-3);width:100%;
  padding:10px 12px;border:1px solid var(--trait);border-radius:var(--arr-s);
  background:var(--blanc);color:var(--encre);
  transition:border-color var(--duree),box-shadow var(--duree)}
textarea{min-height:88px;resize:vertical;line-height:1.55}
input[type="checkbox"],input[type="radio"]{width:auto}
input:hover,select:hover,textarea:hover{border-color:var(--beton-c)}
input:focus,select:focus,textarea:focus{
  border-color:var(--signal);box-shadow:0 0 0 3px var(--anneau);outline:none}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--rouge);box-shadow:0 0 0 3px var(--anneau-r)}
input::placeholder,textarea::placeholder{color:var(--beton-c)}
/* v0.22.1 — un champ de saisie fait 44 px, date, texte ou liste : la
   recette a mesuré 48 px pour les dates (locale française, chevron du
   calendrier) contre 41 px pour la liste « Durée ». Même hauteur. */
.champ>input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),.champ>select,.champ>div>select,.g2>.champ select{min-height:44px;box-sizing:border-box}
input[type="date"]{min-height:44px;line-height:22px;box-sizing:border-box}
/* Les zones de texte prennent la hauteur de leur contenu (Chrome 123+) :
   un texte ne défile pas dans un cadre qui défile (§2.22). Les autres
   navigateurs gardent la hauteur de `rows`. */
textarea{field-sizing:content}

.grille{display:grid;gap:var(--r3)}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:720px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* Sélecteur segmenté */
.seg{display:inline-flex;background:var(--trait-f);padding:3px;border-radius:var(--arr-p);
  gap:2px;flex-wrap:wrap}
.seg button{font-family:var(--f-texte);font-size:var(--t-2);font-weight:600;padding:8px 16px;min-height:36px;
  border:0;background:none;color:var(--encre-2);border-radius:var(--arr-p);cursor:pointer;   /* v0.22.1 — gris 3 sur gris 1 tombait à 4,48:1 : sous AA */
  transition:background var(--duree),color var(--duree)}
.seg button:hover{color:var(--encre)}
.seg button[aria-pressed="true"]{background:var(--blanc);color:var(--encre);box-shadow:var(--om)}
.seg--a button[aria-pressed="true"]{background:var(--encre);color:var(--blanc)}

/* Puces sélectionnables */
.puces{display:flex;flex-wrap:wrap;gap:7px}
.puce{font-family:var(--f-texte);font-size:var(--t-2);font-weight:600;padding:7px 14px;
  border:1px solid var(--trait);background:var(--blanc);color:var(--beton);
  border-radius:var(--arr-p);cursor:pointer;white-space:nowrap;
  transition:background var(--duree),border-color var(--duree),color var(--duree)}
.puce:hover{border-color:var(--encre-3);color:var(--encre)}
.puce[aria-pressed="true"]{background:var(--encre);border-color:var(--encre);color:var(--blanc)}
.puce--plus{border-style:dashed;color:var(--signal-d);border-color:var(--signal)}
.puce--plus:hover{background:var(--signal-l);color:var(--signal-d)}
.puce--sug{border-color:var(--signal);color:var(--signal-d);background:var(--signal-l)}
.puce--sug:hover{background:var(--signal);color:var(--sur-signal);border-color:var(--signal)}
.puce--sug[aria-pressed="true"]{background:var(--encre);border-color:var(--encre);color:var(--blanc)}

/* Bascule */
.bascule{display:flex;align-items:center;gap:var(--r3);padding:11px 0;
  border-bottom:1px solid var(--trait-f)}
.bascule:last-child{border-bottom:0}
.bascule__t{flex:1;font-size:var(--t-2)}
.bascule__t small{display:block;color:var(--beton);font-size:var(--t-2);margin-top:2px}
.inter{position:relative;width:42px;height:24px;flex:none}
.inter input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.inter span{position:absolute;inset:0;background:var(--trait-b);border-radius:24px;   /* v0.22.1 — gris 2 sur gris 1 ne se voyait pas : le rail éteint prend le gris du contour */
  transition:background var(--duree);pointer-events:none}
.inter span::before{content:'';position:absolute;width:18px;height:18px;left:3px;top:3px;
  background:#fff;border-radius:50%;transition:transform var(--duree);box-shadow:var(--om)}
.inter input:checked+span{background:var(--vert)}
.inter input:checked+span::before{transform:translateX(18px)}
.inter input:focus-visible+span{outline:2px solid var(--signal);outline-offset:2px}
/* Texte réservé aux lecteurs d'écran */
.sr{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Interrupteur compact, devant chaque condition */
.inter--s{width:34px;height:20px}
.inter--s span::before{width:14px;height:14px}
.inter--s input:checked+span::before{transform:translateX(14px)}
.inter--demo{display:inline-block;vertical-align:middle}
.inter--demo span{position:static;display:block;width:34px;height:20px}

/* Champ avec unité accolée (%, €) */
.suffixe{position:relative;display:inline-block;width:100%}
.suffixe input{padding-right:34px}
.suffixe b{position:absolute;right:11px;top:50%;transform:translateY(-50%);
  font-family:var(--f-data);font-size:var(--t-2);color:var(--beton);pointer-events:none}
.suffixe--pct{max-width:150px}

/* =====================================================================
   Conditions d'une consultation
   Une ligne = interrupteur, intitulé, « sans objet », puis le contrôle.
   Éteinte, elle se grise et ne montre plus de contrôle. Sans objet, elle
   reste allumée mais figure au dossier comme réponse explicite.
   ===================================================================== */
.cond{padding:10px 0;border-bottom:1px solid var(--trait-f)}
.cond:last-child{border-bottom:0}
.cond__h{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.cond__l{font-family:var(--f-texte);font-size:var(--t-2);font-weight:600;color:var(--encre-2);flex:1}
.cond__b{margin:8px 0 0 44px}
.cond--off .cond__l{color:var(--beton-c);text-decoration:line-through;text-decoration-thickness:1px}
.cond__etat{font-family:var(--f-data);font-size:var(--t-1);color:var(--beton-c);text-transform:uppercase;letter-spacing:.06em}
.cond__so{font-family:var(--f-data);font-size:var(--t-1);font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;border:1px dashed var(--trait);background:none;color:var(--beton);
  border-radius:20px;padding:4px 10px;cursor:pointer;transition:all var(--duree)}
.cond__so:hover{border-color:var(--encre-3);color:var(--encre)}
.cond__so[aria-pressed="true"]{background:var(--bleu-l);border-style:solid;border-color:var(--bleu);color:var(--bleu)}
.cond--so .cond__l{color:var(--bleu)}
.cond-mode{display:flex;gap:var(--r4);flex-wrap:wrap}
/* v0.25 — en ligne, pas en flex : en flex, « Une ligne », « éteinte » et la
   suite étaient trois boîtes qui pliaient chacune de leur côté sur 390 px. */
.cond-mode__i{display:inline;line-height:1.6}
.cond-mode__i .inter--demo,.cond-mode__i .cond__so{margin-right:6px;vertical-align:middle}
.pli--so{border-style:dashed}
.pli--so .pli__n{color:var(--beton)}
.dos-so{color:var(--bleu);font-style:italic;font-weight:400}
@media(max-width:640px){ .cond__b{margin-left:0} }

/* Plages horaires par jours */
.plage{border:1px solid var(--trait);border-radius:var(--arr-s);padding:9px 11px;margin-bottom:8px;
  background:var(--surface-2)}
.puces--jours{gap:4px;margin-bottom:8px}
.puce--j{padding:5px 9px;font-size:var(--t-2);min-width:42px;text-align:center}
.plage__h input[type="time"]{width:120px;min-height:38px}

/* Pièces jointes */
.pieces{list-style:none;margin:0;padding:0}
.piece{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--trait-f);font-size:var(--t-2)}
.piece:last-child{border-bottom:0}
.piece a{color:var(--signal-d);text-decoration:none;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.piece a:hover{text-decoration:underline}
.piece__t{font-size:var(--t-2);color:var(--beton)}
.logo-apercu{max-height:56px;max-width:180px;border:1px solid var(--trait);border-radius:var(--arr-s);padding:4px;background:#fff}
.dos-logo{max-height:52px;max-width:200px;display:block;margin-bottom:8px}

/* Pénalités libres */
.penalite{display:grid;grid-template-columns:1fr 100px auto 34px;gap:8px;align-items:center;margin-bottom:8px}
.penalite__v{text-align:right}
@media(max-width:640px){ .penalite{grid-template-columns:1fr 90px;} .penalite .seg{grid-column:1} }

/* =====================================================================
   Tableaux
   ===================================================================== */
.tbl{width:100%;border-collapse:collapse;font-size:var(--t-2)}
.tbl th{font-family:var(--f-data);font-size:var(--t-1);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--beton-c);text-align:left;padding:10px 10px;
  border-bottom:1px solid var(--trait)}
.tbl th.num{text-align:right}
.tbl td{padding:13px 10px;border-bottom:1px solid var(--trait-f);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tr.clic:hover{background:var(--surface-2);cursor:pointer}
.tbl tr.sel td{background:var(--blanc)}
.tbl--c td{vertical-align:top}
.tbl__t{font-weight:600;font-size:var(--t-2)}
.tbl__s{font-size:var(--t-2);color:var(--beton);margin-top:2px}
/* v0.22.1 — une ligne mise en veille (compte suspendu) : son texte passe
   au gris secondaire, ses actions gardent leur contraste. */
.tbl__r--susp td{color:var(--beton)}
.tbl__r--susp .tbl__t,.tbl__r--susp b{color:var(--beton);font-weight:600}

/* v0.22.1 — un nombre ne se casse pas : « 259 155 » puis « € » à la
   ligne, « 0 devis » sur deux lignes, « le 16/05/2026 » coupé après
   « le » — les cellules de chiffres et de dates tiennent sur une ligne. */
.tbl--r td.num,.tbl--r td.data,.tbl--r td.date,.tbl--r td.nb{white-space:nowrap}
.tbl--r td.num .tbl__s{white-space:nowrap}
/* v0.25 — une RÉFÉRENCE non plus : à 900 px la colonne « Réf. » de Mes
   réponses coupait « CONS-017 » en « CONS- » et « 017 », le tiret en fin
   de ligne. Le nom du chantier, dessous, se plie ; la référence, jamais.
   Les seules colonnes de référence : une adresse e-mail, elle, doit
   pouvoir se plier sur un téléphone. */
.tbl--r td[data-col="Réf."] span.data,.tbl--r td[data-col="Référence"] span.data{white-space:nowrap}
/* …et la ligne de dessous (le chantier sous la référence, le devis sous le
   montant) passe DESSOUS, pas à côté. En ligne, elle collait à la
   référence sans espace sécable — « CONS-017Plateforme » ne se coupait
   qu'au tiret, d'où « CONS- » / « 017 » —, et dans « Mon offre » le
   montant et le devis faisaient 180 px d'un seul tenant : à 900 px le
   tableau sortait de 41 px sous la barre du volet. Deux lignes tiennent
   dans la hauteur d'un rang. */
.tbl--r td[data-col="Réf."] .tbl__s,.tbl--r td[data-col="Référence"] .tbl__s,.tbl--r td.num .tbl__s{display:block;margin-left:0}
/* …mais l'amplitude de la bibliothèque de prix (« 12,50 € à 18,00 € »,
   chaque montant insécable, et « +44 % depuis la 1re fois » dessous) se
   plie, sans quoi la table débordait de 77 px à 1366. */
.tbl--r td[data-col="Amplitude"],.tbl--r td[data-col="Amplitude"] .tbl__s{white-space:normal}

/* Sur petit écran, chaque ligne devient une fiche : le libellé passe à
   gauche, la valeur à droite. Un tableau à six colonnes ne se lit pas
   sur un téléphone. */
@media(max-width:680px){
  /* Le tableau lui-même devient un bloc : sinon sa largeur suit la plus
     longue cellule et il pousse la page de côté (v0.21, lot B). */
  .tbl--r,.tbl--r tbody{display:block;width:100%;min-width:0}
  /* v0.22.1 — l'en-tête sort du flux comme dans `.tbl--c` : posé en
     absolu à 1 px, ses cellules débordaient tout de même et portaient la
     page des invitations à 426 px pour un écran de 390. Chaque cellule
     porte son intitulé (`data-col`), rien ne se perd. */
  .tbl--r thead{display:none}
  .tbl--r tr{display:block;border:1px solid var(--carte);border-radius:var(--arr);box-shadow:var(--om-c);
    padding:var(--r2) var(--r3);margin-bottom:var(--r2);background:var(--blanc)}
  /* v0.22.1 — une grille à deux colonnes, l'étiquette à gauche et TOUT
     le contenu empilé à droite, aligné à gauche : la recette a vu la même
     valeur tantôt au centre, tantôt à droite, tantôt sous l'étiquette,
     selon sa longueur. Les nombres restent à droite. */
  /* v0.25 (recette à 390) — l'étiquette a au moins 8 em : dans une fiche
     étroite (la décomposition du dossier reçu), 34 % faisaient 86 px et
     « DÉSIGNATION » se coupait en « DÉSIGNATI » / « ON ». Un mot se plie
     aux espaces ; il ne se coupe que s'il ne tient pas seul. */
  .tbl--r td{display:grid;grid-template-columns:max(34%,8em) minmax(0,1fr);column-gap:10px;row-gap:2px;align-items:baseline;
    border:0;padding:6px 0;text-align:left;min-width:0;height:auto}
  .tbl--r td::before{content:attr(data-col);font-family:var(--f-data);font-size:var(--t-1);
    letter-spacing:.06em;text-transform:uppercase;color:var(--beton);text-align:left;grid-column:1;grid-row:1;
    white-space:normal;overflow-wrap:break-word;line-height:1.3}
  .tbl--r td>*{grid-column:2;min-width:0;justify-self:start}
  .tbl--r td.num{text-align:right}
  .tbl--r td.num>*{justify-self:end}
  .tbl--r td>.tbl__s{margin-top:0}
  /* Une pastille d'état se plie dans une fiche : « Compte créé, mot de
     passe à choisir » sortait de la carte et de l'écran. */
  .tbl--r td>.et{white-space:normal}
  .tbl--r td[data-col=""],.tbl--r td.tbl__a{display:flex;justify-content:flex-end;gap:8px;padding-top:8px}
  .tbl--r td:empty{display:none}
}

/* =====================================================================
   Étiquettes, notes, états
   ===================================================================== */
.et{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-texte);
  font-size:var(--t-2);font-weight:600;padding:5px 10px;border-radius:var(--arr-p);
  background:var(--trait-f);color:var(--beton);white-space:nowrap}
.et--v{background:var(--vert-l);color:var(--vert)}
.et--r{background:var(--rouge-l);color:var(--rouge)}
.et--a{background:var(--ambre-l);color:var(--ambre)}
.et--b{background:var(--bleu-l);color:var(--bleu)}
/* v0.14, lot 4.1 — la variante PLEINE d'une puce. Réservée à ce qui doit
   peser plus lourd qu'un bouton voisin : « tout accepté » face à
   « 3 réserves ». Fond plein, texte sur papier — le contraste est celui
   des boutons pleins du même rôle, déjà mesuré. */
.et--plein{background:var(--vert);color:var(--papier);font-weight:600}
.et--plein svg{flex:none}
/* v0.21, lot B — l'état « brouillon », l'écart, le motif : un ton neutre
   appuyé. La couleur d'action ne se lit pas, elle se clique. */
.et--o{background:var(--trait-f);color:var(--encre-2);border:1px solid var(--trait)}
.pt{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

.tag{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-data);font-size:var(--t-1);
  letter-spacing:.05em;text-transform:uppercase;color:var(--beton);
  border:1px solid var(--trait);border-radius:var(--arr-p);padding:3px 9px;white-space:nowrap}
.tag--o{border-color:var(--trait);color:var(--encre-2);background:var(--trait-f)}

.note{padding:12px 15px;border-left:3px solid var(--trait);background:var(--surface-2);
  border-radius:0 var(--arr-s) var(--arr-s) 0;font-size:var(--t-2);margin:var(--r3) 0;
  color:var(--encre-2)}
.note--a{background:var(--ambre-l);border-left-color:var(--ambre);color:var(--encre)}
.note--i{background:var(--bleu-l);border-left-color:var(--bleu);color:var(--encre)}
.note--v{background:var(--vert-l);border-left-color:var(--vert);color:var(--encre)}
.note--r{background:var(--rouge-l);border-left-color:var(--rouge);color:var(--encre)}

.vide{text-align:center;padding:var(--r7) var(--r4);color:var(--beton);font-size:var(--t-2)}
.vide b{display:block;font-family:var(--f-titre);font-size:var(--t-5);font-weight:800;
  color:var(--encre);margin-bottom:6px;letter-spacing:-.015em}
.vide .btn{margin-top:var(--r3)}
/* v0.23, lot I — UN ÉTAT VIDE D'ÉCRAN EST DANS UNE CARTE BLANCHE. La
   recette 0.22.1 a relevé le journal d'administration posé sur le fond
   gris, quand le reste de l'administration montre ses listes dans du
   blanc : un écran vide avait l'air d'un écran pas encore chargé. La
   carte est la même que celle des tableaux — bord, arrondi, ombre — de
   sorte qu'un écran vide et un écran garni occupent la même place. */
.vide--c{background:var(--blanc);border:1px solid var(--carte);
  border-radius:var(--arr);box-shadow:var(--om-c);padding:var(--r6) var(--r4)}

/* `display` explicite : posée dans un `.rang` en flex la jauge était
   blockifiée et prenait sa hauteur ; posée dans une cellule de tableau
   (v0.12) elle restait en ligne et l'ignorait. */
.jauge{display:inline-block;vertical-align:middle;height:6px;background:var(--trait-f);
  border-radius:20px;overflow:hidden;position:relative;min-width:70px}
.jauge i{display:block;height:100%;background:var(--encre-3);border-radius:20px;
  transition:width var(--duree)}
.jauge--v i{background:var(--vert)} .jauge--a i{background:var(--ambre)}
.jauge--r i{background:var(--rouge)} .jauge--o i{background:var(--ambre)}

/* Statistiques compactes — conservées pour les écrans historiques */
.stats{display:flex;gap:var(--r5);flex-wrap:wrap}
.stat{min-width:54px;background:none;border:0;padding:0;text-align:left;
  font:inherit;color:inherit;cursor:pointer}
.stat__n{font-family:var(--f-titre);font-size:var(--t-6);font-weight:800;line-height:1;
  letter-spacing:-.025em;display:block}
.stat__l{font-size:var(--t-2);color:var(--beton);display:block;margin-top:4px}
.stat--o .stat__n{color:var(--ambre)}
.stat--v .stat__n{color:var(--vert)}
.stat--b .stat__n{color:var(--bleu)}
.stat--a .stat__n{color:var(--ambre)}
.stat--r .stat__n{color:var(--rouge)}

.rang{display:flex;gap:var(--r2);align-items:center;flex-wrap:wrap}
.pousse{margin-left:auto}
/* v0.25 (recette) — le bandeau d'état d'un devis déposé n'avait AUCUNE
   règle depuis son arrivée (v0.13) : la pastille, la phrase et la date se
   suivaient en ligne, « …par le donneur d'ordre.déposée le 11/08/2026 ».
   Une rangée : l'état, ce qu'il veut dire, la date poussée à droite. */
.bandeau-etat{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 var(--r3);
  font-size:var(--t-2);color:var(--encre-2)}
.bandeau-etat>.et{font-size:var(--t-2)}
.bandeau-etat .pousse{margin-left:auto;color:var(--beton)}
.bandeau-etat--var{color:var(--encre)}
/* Dans la colonne d'actions d'un tableau, le retour à la ligne faisait
   tomber la croix de suppression sous les deux autres icônes : trois
   boutons alignés tiennent en 96 px, autant les garder sur un rang. */
td.rang{flex-wrap:nowrap;gap:2px;justify-content:flex-end;white-space:nowrap}
/* v0.23.1, lot A — LA COLONNE D'ACTIONS DE LA LISTE D'ACCÈS. La règle
   ci-dessus vise une cellule QUI EST un rang ; ici le rang est un enfant
   de la cellule, et il repliait ses trois boutons l'un sous l'autre. Sur
   une ligne haute — adresse, nom, entreprise, SIRET —, le groupe centré
   débordait au-dessus et en dessous de son texte, et le premier bouton
   se lisait comme appartenant à la ligne précédente. Les actions tiennent
   sur un rang, calées en HAUT de la ligne : elles commencent où commence
   l'adresse dont elles parlent. */
.tbl--r td:has(>.rang){vertical-align:top;padding-top:10px}
.tbl--r td>.rang{justify-content:flex-end;gap:4px}
/* Le rang d'un seul tenant demande de la place : au-dessous de 1000 px,
   la table débordait de 22 px pour le garder (mesuré par la recette, à
   900). Les actions se replient donc là, et c'est le CALAGE EN HAUT
   ci-dessus qui fait le travail : repliées ou non, elles commencent où
   commence l'adresse dont elles parlent. */
@media(min-width:1000px){ .tbl--r td>.rang{flex-wrap:nowrap} }
.ico--vide{visibility:hidden;pointer-events:none;min-width:28px}
.ico:disabled{opacity:.35;cursor:not-allowed}
@media(max-width:680px){.tbl--r td.rang{justify-content:flex-start}}

/* =====================================================================
   Dialogues, tiroirs, toasts
   ===================================================================== */
.voile{position:fixed;inset:0;background:var(--voile-c);backdrop-filter:blur(3px);
  z-index:400;display:none;align-items:center;justify-content:center;padding:var(--r4)}
.voile[open],.voile.on{display:flex}
.modale{background:var(--blanc);border-radius:var(--arr);padding:var(--r5);
  width:100%;max-width:440px;box-shadow:var(--om-3);border:1px solid var(--trait);
  max-height:90vh;
  /* v0.24, lot I — LE BOUTON D'ENVOI RESTE VISIBLE.

     « Demander un accès » fait six champs : la fenêtre prenait toute la
     hauteur de l'écran, et son bouton passait sous la ligne de flottaison
     au moment précis où le visiteur venait de se décider. Il fallait
     défiler DANS la fenêtre pour trouver quoi cliquer, et rien ne disait
     qu'il y avait quelque chose plus bas.

     La fenêtre est donc une colonne : les champs défilent, le bouton et
     ses secours restent collés en bas. */
  display:flex;flex-direction:column;overflow:hidden}
.modale__z{overflow:auto;min-height:0;flex:1 1 auto;
  /* Une ombre en pied quand il reste à lire : elle dit que ça continue. */
  -webkit-overflow-scrolling:touch}
.modale__pied{flex:none;padding-top:var(--r3);margin-top:var(--r2);
  border-top:1px solid var(--trait);background:var(--blanc)}
.modale h2{font-size:var(--t-5);margin-bottom:6px}
.modale__s{font-size:var(--t-2);color:var(--beton);margin-bottom:var(--r4)}
/* v0.22, lot E — les deux secours sous le bouton de connexion. */
.modale__liens{display:flex;flex-wrap:wrap;gap:var(--r1);justify-content:center;margin-top:var(--r3)}
#m-sortie:not(:empty){margin-top:var(--r3)}

.tiroir{position:fixed;inset:0;z-index:700;background:var(--voile-c);
  backdrop-filter:blur(3px);display:none}
.tiroir.on{display:block}
.tiroir__p{position:absolute;top:0;right:0;bottom:0;width:min(520px,100%);
  background:var(--papier);border-left:1px solid var(--trait);box-shadow:var(--om-3);
  display:flex;flex-direction:column;animation:gliss .2s cubic-bezier(.2,.8,.3,1)}
@keyframes gliss{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.tiroir__h{display:flex;align-items:center;gap:var(--r3);padding:var(--r4);
  border-bottom:1px solid var(--trait);background:var(--blanc)}
/* v0.25 (recette à 390) — le titre d'un tiroir se PLIE : coupé en
   « Demander à répondre —… », il perdait la référence de la consultation,
   c'est-à-dire la seule chose qui dit de quoi on parle. */
.tiroir__h h2{font-size:var(--t-5);min-width:0;overflow-wrap:break-word;line-height:1.25}
.tiroir__b{flex:1;overflow:auto;padding:var(--r4)}
.tiroir__f{padding:var(--r3) var(--r4);border-top:1px solid var(--trait);
  background:var(--blanc);display:flex;gap:var(--r2);align-items:center;flex-wrap:wrap}
@media(max-width:560px){.tiroir__p{width:100%;border-left:0}}

.toasts{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom));left:50%;
  transform:translateX(-50%);z-index:760;display:flex;flex-direction:column;
  gap:var(--r2);align-items:center;pointer-events:none;padding:0 var(--r4)}
.toast{background:var(--encre);color:var(--blanc);padding:12px 20px;border-radius:var(--arr-p);
  font-size:var(--t-2);font-weight:500;box-shadow:var(--om-3);
  animation:monte .2s cubic-bezier(.2,.8,.3,1)}
@keyframes monte{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.toast--v{background:var(--vert);color:var(--sur-vert)}
.toast--r{background:var(--rouge);color:#fff}

/* =====================================================================
   Pied de page
   ===================================================================== */
.pied{border-top:1px solid var(--trait);background:var(--blanc);
  padding:var(--r6) var(--r5) var(--r5);margin-top:var(--r6)}
.pied__g{max-width:1180px;margin:0 auto;display:flex;gap:var(--r6);flex-wrap:wrap}
.pied__c{min-width:150px}
.pied h3{font-family:var(--f-titre);font-size:var(--t-1);letter-spacing:.09em;text-transform:uppercase;
  color:var(--beton);margin-bottom:var(--r3);font-weight:700}
.pied ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pied a{color:var(--encre-2);text-decoration:none;font-size:var(--t-2)}
.pied li{font-size:var(--t-2);color:var(--encre-2)}   /* v0.22.1 — « Données hébergées en France » au même corps que les liens voisins */
.pied a:hover{color:var(--signal-d);text-decoration:underline}
.pied__bas{max-width:1180px;margin:var(--r5) auto 0;padding-top:var(--r3);
  border-top:1px solid var(--trait-f);display:flex;flex-wrap:wrap;gap:var(--r3);
  font-size:var(--t-2);color:var(--beton)}
.pied--app{margin-top:var(--r6);padding:var(--r4) var(--r5)}
.pied--app .pied__bas{margin-top:0;border-top:0;padding-top:0;justify-content:center;
  gap:var(--r4)}

/* =====================================================================
   Documents longs (mentions, CGU, confidentialité)
   ===================================================================== */
.doc{max-width:760px;margin:0 auto;padding:var(--r7) var(--r5) 0}
.doc h1{font-size:clamp(var(--t-6),5vw,42px);margin-bottom:var(--r2)}
.doc__date{font-family:var(--f-data);font-size:var(--t-2);color:var(--beton);
  margin-bottom:var(--r5)}
.doc h2{font-size:var(--t-6);margin:var(--r6) 0 var(--r3);padding-top:var(--r3);
  border-top:1px solid var(--trait)}
.doc h3{font-size:var(--t-4);margin:var(--r4) 0 var(--r1)}
.doc p,.doc li{font-size:var(--t-3);line-height:1.7;color:var(--encre-2)}
.doc p{margin-bottom:var(--r3)}
.doc ul,.doc ol{margin:0 0 var(--r3);padding-left:var(--r5)}
.doc li{margin-bottom:7px}
.doc a{color:var(--signal-d)}
/* v0.22.1 — la colonne des termes est bornée (une étiquette longue ne
   vole plus la place de sa définition), et sur téléphone terme et
   définition s'empilent. */
.doc dl{display:grid;grid-template-columns:minmax(140px,240px) minmax(0,1fr);gap:7px var(--r4);
  margin:0 0 var(--r4)}
.doc dt{font-weight:600;color:var(--encre);overflow-wrap:anywhere}
.doc dd{margin:0;color:var(--encre-2)}
@media(max-width:640px){
  .doc dl{grid-template-columns:1fr;gap:2px}
  .doc dt{margin-top:8px}
}
.arem{background:var(--ambre-l);border-left:3px solid var(--ambre);padding:13px 16px;
  border-radius:0 var(--arr-s) var(--arr-s) 0;margin:var(--r4) 0;font-size:var(--t-3)}

.contenu{max-width:1180px;margin:0 auto;padding:var(--r4) var(--goutt) var(--r7);width:100%}
/* v0.22.1 — le pied de page reste en bas même quand la page est courte
   (Chantiers, Réglages, la messagerie) : l'espace du donneur d'ordre est
   une colonne qui remplit la fenêtre, et le contenu prend le reste. */
#racine{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
#racine>main{flex:1 0 auto}
.contenu--l{max-width:none}

/* =====================================================================
   Suggestions et autocomplétion
   ===================================================================== */
.sug{position:relative}
.sug__l{position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:40;
  background:var(--blanc);border:1px solid var(--carte);border-radius:var(--arr);box-shadow:var(--om-c);
  box-shadow:var(--om-2);max-height:300px;overflow:auto;display:none;padding:5px}
.sug__l[data-ouvert="1"]{display:block}
.sug__i{display:block;width:100%;text-align:left;font:inherit;color:inherit;
  background:none;border:0;padding:9px 11px;cursor:pointer;border-radius:var(--arr-s)}
.sug__i:hover,.sug__i[aria-selected="true"]{background:var(--signal-l)}
.sug__i b{display:block;font-size:var(--t-2);font-weight:600}
.sug__i span{display:block;font-size:var(--t-2);color:var(--beton);margin-top:2px}
.sug__i em{font-style:normal;font-family:var(--f-data);font-size:var(--t-2);color:var(--encre-3)}
.sug__v{padding:11px 13px;font-size:var(--t-2);color:var(--beton)}
.sug__c{position:absolute;right:11px;top:36px;font-family:var(--f-data);
  font-size:var(--t-2);color:var(--beton)}

/* Champ de recherche */
.rech{position:relative;display:flex;align-items:center;flex:1;min-width:180px}
.rech svg{position:absolute;left:12px;width:15px;height:15px;pointer-events:none;
  fill:none;stroke:var(--beton);stroke-width:1.9;stroke-linecap:round}
.rech input{width:100%;padding-left:36px;padding-right:36px;border-radius:var(--arr-p)}
.rech input::-webkit-search-cancel-button{display:none}
.rech__x{position:absolute;right:7px;width:25px;height:25px;border:0;border-radius:50%;
  background:none;color:var(--beton);cursor:pointer;font-size:var(--t-4);line-height:1;
  display:none;align-items:center;justify-content:center}
.rech__x:hover{background:var(--trait-f);color:var(--encre)}
.rech input:not(:placeholder-shown)~.rech__x{display:flex}

/* Touche clavier */
.kbd{font-family:var(--f-data);font-size:var(--t-1);font-weight:600;line-height:1;
  padding:3px 6px;border:1px solid var(--trait);border-bottom-width:2px;
  border-radius:5px;background:var(--surface-2);color:var(--beton);white-space:nowrap}

/* =====================================================================
   Blocs dépliants
   ===================================================================== */
.pli{border:1px solid var(--carte);border-radius:var(--arr);box-shadow:var(--om-c);background:var(--blanc);
  margin-bottom:var(--r2);overflow:hidden}
.pli[open]{border-color:var(--beton-c);box-shadow:var(--om)}
.pli__t{list-style:none;cursor:pointer;padding:12px 14px;display:flex;align-items:center;
  gap:var(--r3);flex-wrap:wrap}
.pli__t::-webkit-details-marker{display:none}
.pli__t:hover{background:var(--surface-2)}
.pli__t::before{content:'';width:0;height:0;flex:none;
  border-left:5px solid var(--beton);border-top:4px solid transparent;
  border-bottom:4px solid transparent;transition:transform var(--duree)}
.pli[open] .pli__t::before{transform:rotate(90deg)}
.pli__n{font-family:var(--f-titre);font-size:var(--t-3);font-weight:700;letter-spacing:-.01em}
.pli__r{flex:1;font-size:var(--t-2);color:var(--beton);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;min-width:60px}
.pli__c{font-family:var(--f-data);font-size:var(--t-2);color:var(--beton);
  background:var(--trait-f);padding:2px 7px;border-radius:20px;margin-left:auto}
@media(max-width:640px){
  .pli__r{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;flex:1 1 100%;order:3}
  .pli__t{flex-wrap:wrap}
}
.pli__b{padding:0 14px 14px;border-top:1px solid var(--trait-f);padding-top:14px}
.pli__t:focus-visible{outline:2px solid var(--signal);outline-offset:-2px}

.cadre{border:1px dashed var(--encre-3);border-radius:var(--arr);padding:13px 15px;
  background:var(--surface-2);margin:var(--r3) 0}
.actions{display:flex;align-items:center;gap:var(--r3);margin-top:var(--r4);flex-wrap:wrap}
.actions__i{font-family:var(--f-data);font-size:var(--t-2);color:var(--beton)}

/* =====================================================================
   Alertes de tête — v0.19, lot A : le bloc `.alerte` a été retiré. Ce
   qu'il y a à faire vit dans `.ajd` (les actions du jour), plus bas.
   ===================================================================== */

.ruban{display:flex;align-items:center;gap:var(--r3);padding:10px var(--r5);
  background:var(--signal-l);color:var(--signal-d);font-size:var(--t-2);
  border-bottom:1px solid var(--trait)}
.ruban b{font-weight:600}
.ruban button{margin-left:auto;background:none;border:0;color:inherit;cursor:pointer;
  font-size:var(--t-4);line-height:1;padding:2px 7px;border-radius:var(--arr-s)}
.ruban button:hover{background:rgba(var(--ombre-c),.08)}

@keyframes apparait{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.etape-anim{animation:apparait .22s cubic-bezier(.2,.8,.3,1)}

/* Squelettes de chargement */
.sk,.sq{background:linear-gradient(90deg,var(--sq-a) 25%,var(--sq-b) 37%,var(--sq-a) 63%);
  background-size:400% 100%;animation:sk 1.3s ease infinite;border-radius:var(--arr-s);
  height:14px}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* =====================================================================
   Bascule de thème — trois états : système, clair, sombre
   ===================================================================== */
.theme{width:36px;height:36px;padding:0;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--trait);background:var(--blanc);color:var(--beton);
  cursor:pointer;transition:color var(--duree),border-color var(--duree),background var(--duree)}
.theme:hover{color:var(--encre);border-color:var(--beton-c)}
.theme svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.theme .i-auto,.theme .i-clair,.theme .i-sombre{display:none}
:root .theme .i-auto{display:block}
:root[data-theme="clair"] .theme .i-auto{display:none}
:root[data-theme="clair"] .theme .i-clair{display:block}
:root[data-theme="sombre"] .theme .i-auto{display:none}
:root[data-theme="sombre"] .theme .i-sombre{display:block}

/* Infobulle */
.tip{position:relative}
.tip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 7px);left:50%;
  transform:translateX(-50%) translateY(3px);background:var(--encre);color:var(--blanc);
  font-family:var(--f-texte);font-size:var(--t-2);font-weight:400;line-height:1.35;
  padding:7px 10px;border-radius:var(--arr-s);white-space:nowrap;pointer-events:none;
  opacity:0;transition:opacity var(--duree),transform var(--duree);z-index:400;
  box-shadow:var(--om-2)}
.tip:hover::after,.tip:focus-visible::after{opacity:1;transform:translateX(-50%)}
@media(hover:none){.tip::after{display:none}}

/* =====================================================================
   Palette de commandes
   ===================================================================== */
.pal{position:fixed;inset:0;z-index:800;background:var(--voile-c);backdrop-filter:blur(3px);
  display:none;align-items:flex-start;justify-content:center;padding:10vh var(--r4) var(--r4)}
.pal.on{display:flex}
.pal__b{width:100%;max-width:580px;background:var(--blanc);border:1px solid var(--trait);
  border-radius:var(--arr);box-shadow:var(--om-3);overflow:hidden;
  animation:pal-e .18s cubic-bezier(.2,.8,.3,1)}
@keyframes pal-e{from{opacity:0;transform:translateY(-8px) scale(.985)}to{opacity:1;transform:none}}
.pal__c{display:flex;align-items:center;gap:var(--r2);padding:var(--r3) var(--r4);
  border-bottom:1px solid var(--trait)}
.pal__c input{border:0;background:none;font-size:var(--t-4);flex:1;padding:0;color:var(--encre)}
.pal__c input:focus{box-shadow:none;outline:none}
.pal__l{max-height:min(52vh,420px);overflow:auto;padding:var(--r2);margin:0;list-style:none}
.pal__i{display:flex;align-items:center;gap:var(--r3);width:100%;text-align:left;
  font:inherit;color:inherit;background:none;border:0;padding:10px 12px;
  border-radius:var(--arr-s);cursor:pointer}
.pal__i[aria-selected="true"]{background:var(--signal-l);color:var(--signal-d)}
.pal__i b{font-weight:600;font-size:var(--t-2)}
.pal__i span{margin-left:auto;font-family:var(--f-data);font-size:var(--t-2);color:var(--beton)}
.pal__g{font-family:var(--f-data);font-size:var(--t-1);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--beton-c);padding:11px 12px 4px}
.pal__v{padding:var(--r5);text-align:center;color:var(--beton);font-size:var(--t-2)}
.pal__p{display:flex;gap:var(--r4);padding:9px var(--r4);border-top:1px solid var(--trait-f);
  font-size:var(--t-2);color:var(--beton);align-items:center;flex-wrap:wrap}
@media(max-width:600px){
  .pal{padding:0;align-items:stretch}
  .pal__b{max-width:none;border-radius:0;border:0;height:100%;display:flex;flex-direction:column}
  .pal__l{max-height:none;flex:1}
  .pal__p{display:none}
}

/* =====================================================================
   Bandeau des outils intégrés (classes conservées, styles portés par
   pb-outil.js qui reste autonome)
   ===================================================================== */
.pbar{position:sticky;top:0;z-index:9000;display:flex;align-items:center;gap:var(--r2);
  padding:7px var(--r3);background:var(--encre);color:var(--blanc);font-size:var(--t-2)}
.pbar__n{font-family:var(--f-titre);font-size:var(--t-3);font-weight:800;white-space:nowrap}
.pbar__t{font-size:var(--t-2);opacity:.72;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pbar__d{margin-left:auto;display:flex;align-items:center;gap:var(--r2)}
.pbar__e{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-data);
  font-size:var(--t-2);padding:5px 10px;border-radius:20px;background:rgba(255,255,255,.10)}

/* =====================================================================
   Le dossier de consultation — mise en page d'impression
   ===================================================================== */
.dossier-cadre{background:var(--surface-2);padding:var(--r4);border-radius:var(--arr);
  border:1px solid var(--trait)}
.dos{background:var(--blanc);border:1px solid var(--carte);border-radius:var(--arr);box-shadow:var(--om-c);
  padding:var(--r6);max-width:820px;margin:0 auto;font-size:var(--t-2)}
.dos-tete{display:flex;justify-content:space-between;gap:var(--r4);align-items:flex-start;
  border-bottom:2px solid var(--encre);padding-bottom:var(--r3);margin-bottom:var(--r4);
  flex-wrap:wrap}
.dos-sur{font-family:var(--f-data);font-size:var(--t-1);letter-spacing:.1em;text-transform:uppercase;
  color:var(--beton)}
.dos-t{font-size:var(--t-6);margin-top:4px}
.dos-sous{font-size:var(--t-2);color:var(--encre-2);margin-top:4px}
.dos-refbloc{text-align:right;flex:none}
.dos-ref{font-family:var(--f-data);font-size:var(--t-3);font-weight:600;display:block}
.dos-date{font-family:var(--f-data);font-size:var(--t-2);color:var(--beton);display:block}   /* v0.22.1 — sous la référence, pas collé à elle (« CONS-040édité le ») */
.dos-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--r3);margin:0 0 var(--r4);padding:0}
.dos-meta dt{font-family:var(--f-data);font-size:var(--t-1);letter-spacing:.08em;
  text-transform:uppercase;color:var(--beton);font-weight:600}
.dos-meta dd{margin:3px 0 0;font-weight:600}
.dos-lim dd{color:var(--ambre)}
.dos-sec{font-family:var(--f-titre);font-size:var(--t-3);font-weight:800;letter-spacing:-.01em;
  border-bottom:1px solid var(--trait);padding-bottom:6px;margin:var(--r5) 0 var(--r3)}
.dos-ssec{font-family:var(--f-titre);font-size:var(--t-2);font-weight:700;color:var(--encre-3);
  margin:var(--r3) 0 6px}
.dos-p{line-height:1.65;margin:0 0 var(--r2)}
.dos-tbl{width:100%;border-collapse:collapse;font-size:var(--t-2)}
.dos-tbl th{font-family:var(--f-data);font-size:var(--t-1);letter-spacing:.06em;
  text-transform:uppercase;border-bottom:1.5px solid var(--encre);padding:7px 8px;text-align:left}
.dos-tbl th.num{text-align:right}
.dos-tbl td{border-bottom:1px solid var(--trait-f);padding:7px 8px;vertical-align:top}
.dos-tbl tfoot td{border-top:1.5px solid var(--encre);border-bottom:0;font-weight:700;
  text-align:right}
.dos-vide{background:repeating-linear-gradient(45deg,transparent 0 6px,var(--trait-f) 6px 7px);
  min-width:70px}
.dos-note{font-size:var(--t-2);color:var(--beton);margin-top:8px;font-style:italic}
.dos-cond{display:grid;grid-template-columns:1fr;gap:6px;margin:0}
.dos-cond>div{display:flex;gap:var(--r3);align-items:baseline}
.dos-cond dt{flex:none;width:230px;font-weight:600;font-size:var(--t-2)}
.dos-cond dd{margin:0;color:var(--encre-2)}
@media(max-width:640px){.dos-cond>div{flex-direction:column;gap:1px}.dos-cond dt{width:auto}}
.dos-ul{margin:0;padding-left:20px;line-height:1.7}
.dos-pied{display:flex;justify-content:space-between;gap:var(--r4);align-items:flex-end;
  border-top:1px solid var(--trait);margin-top:var(--r5);padding-top:var(--r3);
  font-size:var(--t-2);flex-wrap:wrap}
.dos-pied span{font-family:var(--f-data);font-size:var(--t-2);color:var(--beton-c)}

/* Quadrillage de fond — discret, il rappelle le papier millimétré */
.quadrille{background-image:linear-gradient(var(--quadrillage) 1px,transparent 1px),
  linear-gradient(90deg,var(--quadrillage) 1px,transparent 1px);
  background-size:28px 28px}

/* Cibles tactiles : 44 px, seuil au-delà duquel on ne rate plus le bouton
   avec un gant de chantier. */
@media(pointer:coarse){
  .btn,.btn--s,.ico,.nav__b,.flanc__l,.seg button,.tri,.tb__ab,.ajd__ref,.oc__kb,.cyc__b,.filc__b button,
  .sous__b,.volet__pb,.msgv__t,.agd__e,.agd__c,[data-msg-ouvrir],.et--btn,.lien,
  select,input[type="date"],input[type="file"],
  .leaflet-bar a{min-height:44px}
  .theme{width:44px;height:44px}
  .ico{min-width:44px}
  .leaflet-bar a{width:44px;line-height:44px}
  .ajd__ref{display:inline-flex;align-items:center}
}

/* =====================================================================
   Impression — le thème clair, toujours, et rien que le contenu
   ===================================================================== */
#zone-imp{display:none}
@media print{
  @page{margin:14mm}
  :root,:root[data-theme="sombre"]{
    color-scheme:light;
    --encre:#241E19;--encre-2:#4A4038;--encre-3:#6B5F55;
    --signal:#1E5BB8;--signal-d:#174A96;--signal-l:#E4EDFA;--marque:#8E3520;
    --papier:#FFFFFF;--blanc:#FFFFFF;--surface-2:#FFFFFF;
    --beton:#5A5049;--beton-c:#7B7169;--trait:#C7BCAE;--trait-f:#E0D8CD;
    --om:none;--om-2:none;--om-3:none
  }
  .pbar,.theme,.pal,.ruban,.saut,.flanc,.pouce,.tiroir{display:none!important}
  .coq{grid-template-columns:1fr}
  body.mode-imp #racine,body.mode-imp .toasts,.cmp-fige{display:none!important}
  body.mode-imp #zone-imp{display:block}
  body.mode-imp{background:#fff!important}
  #zone-imp .dos{border:0;box-shadow:none;padding:0;border-radius:0}
  #zone-imp .dos-vide{background:none;border-bottom:1px solid #999}
}

/* =====================================================================
   Carte de localisation (chantier)
   ===================================================================== */
.carte{height:300px;width:100%;border:1px solid var(--carte);border-radius:var(--arr);box-shadow:var(--om-c);
  background:var(--trait-f);z-index:1;position:relative;isolation:isolate}
.carte:focus-within{border-color:var(--signal);box-shadow:0 0 0 3px var(--anneau)}
.carte-ko{display:flex;align-items:center;justify-content:center;height:100%;
  padding:var(--r4);text-align:center;font-size:var(--t-2);color:var(--beton)}
/* Le champ ville/adresse porte une liste de suggestions : il lui faut un
   contexte de positionnement, déjà fourni par .sug — rien à ajouter. */
@media(max-width:640px){ .carte{height:240px} }
/* Carte des destinataires : la carte, puis sa légende */
.carte-dest{margin-bottom:var(--r3)}
.carte-dest .carte{height:340px}
.carte-leg{display:flex;gap:var(--r3);flex-wrap:wrap;align-items:center;margin-top:7px;
  font-size:var(--t-2);color:var(--beton)}
.carte-leg span{display:inline-flex;align-items:center;gap:5px}
.carte-leg__c{width:10px;height:10px;border-radius:2px;display:inline-block}
.carte-leg__p{width:11px;height:11px;border-radius:50%;display:inline-block;
  background:#84B4D2;border:1.5px solid #2F5B78}
.carte-leg__p--sel{background:#8FB56A;border:2.5px solid #4A6530}
.carte-leg__p--ko{background:#D9D2C8;border-color:#8A7D71}
.carte-leg__r{width:14px;height:14px;border-radius:50%;display:inline-block;
  border:1.5px dashed var(--signal);background:var(--anneau)}
.leaflet-tooltip{font-family:var(--f-texte);font-size:var(--t-2)}

/* Mention optionnelle sur un libellé de champ */
.opt{font-family:var(--f-texte);font-weight:400;font-size:var(--t-2);text-transform:none;
  letter-spacing:0;color:var(--beton-c)}

/* Sélecteur de fond de carte (Leaflet layers control) dans la charte */
.leaflet-control-layers{border:1px solid var(--trait)!important;border-radius:var(--arr-s)!important;
  box-shadow:var(--om)!important;font-family:var(--f-texte)!important;font-size:var(--t-2)!important}
.leaflet-control-layers-expanded{padding:8px 10px!important;color:var(--encre)!important}
.leaflet-control-layers label{margin:2px 0!important;font-weight:600!important;font-size:var(--t-2)!important}
.leaflet-container{font-size:var(--t-2)!important}
.leaflet-control-attribution{font-size:var(--t-1)!important}
.leaflet-bar a{color:var(--encre)!important}

/* =====================================================================
   Bac à sable — bandeau permanent quand un administrateur endosse un
   compte factice. Volontairement voyant : il ne doit jamais passer pour
   une session ordinaire.
   ===================================================================== */
.bac{position:sticky;top:0;z-index:200;display:flex;align-items:center;gap:var(--r3);flex-wrap:wrap;
  min-height:42px;box-sizing:border-box;padding:6px var(--r5);background:repeating-linear-gradient(-45deg,var(--ambre-l) 0 12px,var(--blanc) 12px 24px);
  border-bottom:2px solid var(--ambre);font-size:var(--t-2);color:var(--encre)}
.bac__t{flex:1 1 320px;min-width:0;overflow-wrap:anywhere}
html.bac-a-sable{--bac-h:42px}
html.bac-a-sable .top{top:var(--bac-h)}
html.bac-a-sable .nav{top:calc(var(--entete) + var(--bac-h) - 1px)}
html.bac-a-sable .flanc{top:var(--bac-h);height:calc(100vh - var(--bac-h))}
.bac__e{font-family:var(--f-data);font-size:var(--t-2);color:var(--beton)}
.bac__b{font-family:var(--f-texte);font-size:var(--t-2);font-weight:600;padding:6px 12px;
  border:1px solid var(--encre);background:var(--encre);color:var(--blanc);border-radius:var(--arr-p);cursor:pointer}
.bac__b:hover{background:var(--encre-2)}
.bac__b[disabled]{opacity:.5}
@media(max-width:640px){ .bac{font-size:var(--t-2);padding:7px var(--r3)} }

/* Aperçu des gabarits d'e-mail (administration) */
.email-apercu{width:100%;height:520px;border:1px solid var(--trait);border-radius:var(--arr-s);background:#F7F4EF}
.email-texte{font-family:var(--f-data);font-size:var(--t-2);line-height:1.6;white-space:pre-wrap;
  background:var(--surface-2);border:1px solid var(--trait);border-radius:var(--arr-s);padding:var(--r3);margin:0}

/* =====================================================================
   Le volet latéral — conteneur à panneaux (pb-volet.js)

   Ancré au bord droit plutôt que flottant : il ne recouvre jamais la
   colonne de saisie, la page se resserre. Sous 720 px il devient une
   feuille basse, geste connu au doigt.
   ===================================================================== */
:root{ --volet:360px; }

/* v0.21, lot C — LA TRANCHE : trois pictogrammes sur le bord droit,
   calculatrice, messagerie, agenda ; un compteur sur les deux derniers
   quand il y a quelque chose aujourd'hui. Un seul panneau ouvert à la
   fois ; la tranche se décale avec lui. */
/* v0.22, lot A — LA BARRE FERMÉE : 48 px de large, au quart de la
   hauteur, et SOUS les contrôles de la carte dans l'ordre d'empilement
   (z 8, la carte à 9) : le panneau ouvert peut être large, la barre ne
   l'est pas, et elle ne recouvre rien qu'on voudrait cliquer. */
/* =====================================================================
   v0.24, lot F — LE VOLET FLOTTE ET NE RÉSERVE RIEN (§2.37).

   La 0.22.1 réservait une gouttière droite de 48 px sur TOUTE LA HAUTEUR
   des pages à volet, bandeaux compris, au nom de « rien ne touche rien ».
   Résultat : une bande vide permanente le long de chaque écran, visible à
   chaque session depuis trois versions, et écartée trois fois des
   correctifs parce qu'elle ne cassait rien. Une bande vide ne casse rien,
   en effet — elle dit seulement que personne ne regarde.

   La barre fermée ne réserve donc plus rien : elle flotte. Elle ne fait
   que 140 px de haut, au quart de la hauteur, sur un fond blanc à ombre
   portée ; ce qui passe dessous est le flanc droit d'une carte ou d'un
   tableau, sur trois lignes. Le contenu qui arriverait EXACTEMENT dessous
   se décale de la largeur de la barre, et lui seul.

   Ce qui arrive dessous, en pratique : L'ACTION D'UNE LIGNE, collée au
   bord droit (§2.23). Un « Analyser » sous la barre ne se clique pas —
   c'est le seul cas où le flottement coûte quelque chose, et il se règle
   en décalant la colonne d'action de cinquante-six pixels. Le reste de la
   page garde toute sa largeur : plus de bande vide sur la hauteur, plus de
   liseré le long des bandeaux.

   `.volet-dessous` reste posable à la main sur un bloc qui en aurait
   besoin ailleurs.

   Le panneau ouvert, lui, recouvre — c'est un panneau, on le referme.
   ===================================================================== */
/* LE CONTENU se décale, la PAGE et les BANDES non.

   C'est la différence entre la 0.22.1 et ici, et elle se voit : là-bas
   `body` portait la gouttière, donc l'en-tête, les onglets et le pied
   étaient repoussés eux aussi, avec un liseré de papier le long de toute
   la hauteur ; ici la colonne de travail garde ses derniers cinquante
   pixels libres, et tout le reste va d'un bord à l'autre. Le fond de la
   page est continu, les bandeaux traversent, et aucune commande ne se
   retrouve sous la barre.

   `.volet-dessous` reste posable à la main sur un bloc particulier. */
html.avec-volet .contenu,
html.avec-volet .corps > *:not(.tete),
html.avec-volet .volet-dessous{padding-right:calc(var(--goutt) + var(--volet-l,48px))}
.volet__rail{position:fixed;right:0;top:25%;z-index:8;width:48px;box-sizing:border-box;
  display:flex;flex-direction:column;gap:2px;padding:4px 0 4px 4px;
  border:1px solid var(--trait);border-right:0;border-radius:var(--arr) 0 0 var(--arr);
  background:var(--blanc);box-shadow:var(--om-2);transition:right var(--duree) var(--courbe)}
.leaflet-container{position:relative;z-index:9}
html.a-volet .volet__rail{right:var(--volet)}
.volet__pb{position:relative;width:44px;height:44px;border:0;background:none;color:var(--beton);
  border-radius:var(--arr-s) 0 0 var(--arr-s);cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-family:var(--f-data);font-size:var(--t-4);font-weight:600;
  transition:color var(--duree),background var(--duree)}
.volet__pb:hover{background:var(--surface-2);color:var(--encre)}
.volet__pb[aria-pressed="true"]{background:var(--signal-l);color:var(--signal-d)}
.volet__pb:focus-visible{outline:2px solid var(--signal);outline-offset:-2px}
/* v0.22.1 — LA PASTILLE NE MASQUE PLUS LE PICTOGRAMME. À deux chiffres
   (« 20 non lues »), elle prenait 28 des 44 px du bouton, centrée sur le
   signe : la cloche n'était plus reconnaissable. Elle remonte dans
   l'angle, elle maigrit, et le signe descend d'un cran sous elle. */
.volet__n{position:absolute;top:1px;right:1px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;
  background:var(--signal);color:var(--sur-signal);font-family:var(--f-data);font-size:var(--t-1);font-weight:700;
  font-style:normal;line-height:16px;text-align:center;box-shadow:0 0 0 2px var(--blanc)}
.volet__pb:has(.volet__n:not([hidden])){align-items:flex-end;padding-bottom:5px}
/* Le panneau arrive de la droite (bureau) ou du bas (téléphone). */
.volet--vient{animation:gliss var(--duree-l) var(--courbe)}

.volet{position:fixed;top:0;right:0;bottom:0;width:var(--volet);z-index:149;
  background:var(--blanc);border-left:1px solid var(--trait);box-shadow:var(--om-2);
  display:flex;flex-direction:column;overflow:hidden}
/* v0.24, lot F — le panneau ouvert recouvre, et la barre fermée ne réserve
   plus rien : la page fait toute la largeur, panneau ouvert ou non. */
html.a-volet.bac-a-sable .volet{top:var(--bac-h)}
.volet__t{display:flex;align-items:center;gap:var(--r2);padding:var(--r2) var(--r3);
  border-bottom:1px solid var(--trait);background:var(--surface-2);flex:none}
/* v0.21 — la tranche est l'onglet : dans l'en-tête, le nom du panneau
   ouvert suffit ; la rangée d'onglets reste dans le DOM pour les lecteurs
   d'écran et disparaît à l'œil. */
.volet__o{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.volet__titre{display:inline-flex;align-items:center;gap:8px;flex:1;font-size:var(--t-3);font-weight:700;color:var(--encre)}
.volet__titre .volet__pi svg{width:18px;height:18px;color:var(--signal-d)}
.volet__o::-webkit-scrollbar{display:none}
.volet__ong{font-family:var(--f-texte);font-size:var(--t-2);font-weight:600;padding:6px 12px;min-height:36px;
  border:0;background:none;color:var(--beton);border-radius:var(--arr-p);cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center}
.volet__ong[aria-selected="true"]{background:var(--encre);color:var(--blanc)}
.volet__ong:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.volet__x{border:0;background:none;color:var(--beton);font-size:var(--t-5);line-height:1;
  padding:2px 8px;cursor:pointer;border-radius:var(--arr-s);flex:none}
.volet__x:hover{background:var(--trait-f);color:var(--encre)}
.volet__z{padding:var(--r3);overflow-y:auto;flex:1}

@media(max-width:720px){
  /* Feuille basse : elle passe par-dessus la barre du pouce plutôt que de
     la chevaucher à moitié. On la referme pour retrouver la navigation. */
  .volet{top:auto;left:0;width:auto;max-height:74vh;z-index:190;border-left:0;
    border-top:1px solid var(--trait);border-radius:var(--arr) var(--arr) 0 0;
    box-shadow:var(--om-3);padding-bottom:env(safe-area-inset-bottom)}
  /* v0.24, lot F — au doigt, la barre est en bas à droite, au-dessus de la
     barre du pouce : elle ne longe plus le flanc, et la page n'a rien à
     réserver sur sa hauteur. Le décalage de la colonne d'action, LUI,
     reste : la barre flotte toujours au-dessus du coin bas-droit, et un
     « Analyser » sous elle ne se clique pas plus à 390 px qu'à 1366. */
  html.avec-volet body,html.a-volet body{padding-right:0}
  html.a-volet.bac-a-sable .volet{top:auto}
  .volet__rail{top:auto;bottom:78px;transform:none;padding:4px 0 4px 4px}
  html.a-volet .volet__rail{display:none}
  .volet--vient{animation:monte var(--duree-l) var(--courbe)}
}

/* La calculatrice (pb-calc.js) */
.calcv__s{font-size:var(--t-4);padding:11px 12px;text-align:right}
.calcv__r{display:block;text-align:right;font-size:var(--t-6);font-weight:700;letter-spacing:-.5px;
  color:var(--encre);padding:8px 2px 10px;overflow-x:auto;white-space:nowrap}
.calcv__r--ko{color:var(--beton-c);font-weight:500}
.calcv__a{display:flex;gap:var(--r2);margin-bottom:var(--r3)}
.calcv__a .btn{flex:1;justify-content:center}
.calcv__c{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.calcv__k{font-family:var(--f-data);font-size:var(--t-3);font-weight:600;padding:11px 0;
  border:1px solid var(--trait);background:var(--blanc);color:var(--encre);
  border-radius:var(--arr-s);cursor:pointer;transition:background var(--duree),border-color var(--duree)}
.calcv__k:hover{background:var(--surface-2);border-color:var(--beton-c)}
.calcv__k:focus-visible{outline:2px solid var(--signal);outline-offset:1px}
.calcv__k--op{color:var(--signal-d);background:var(--surface-2)}
.calcv__k--c{color:var(--rouge)}
.calcv__k--eq{background:var(--encre);border-color:var(--encre);color:var(--blanc)}
.calcv__k--eq:hover{background:var(--encre-2);border-color:var(--encre-2)}
.calcv__h{margin-top:var(--r4);border-top:1px solid var(--trait-f);padding-top:var(--r3)}
.calcv__ht{font-family:var(--f-data);font-size:var(--t-1);letter-spacing:.08em;text-transform:uppercase;
  color:var(--beton-c);margin-bottom:6px}
.calcv__vide{font-size:var(--t-2);color:var(--beton-c);margin:0}
.calcv__l{display:flex;align-items:center;gap:2px;border-bottom:1px solid var(--trait-f)}
.calcv__l:last-of-type{border-bottom:0}
.calcv__reprendre{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;
  gap:1px;border:0;background:none;cursor:pointer;padding:7px 4px;text-align:left;border-radius:var(--arr-s)}
.calcv__reprendre:hover{background:var(--surface-2)}
.calcv__reprendre span{font-family:var(--f-data);font-size:var(--t-2);color:var(--beton);
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calcv__reprendre b{font-family:var(--f-data);font-size:var(--t-2);color:var(--encre)}
.calcv__vider{margin-top:var(--r2);width:100%;justify-content:center}
.calcv__aide{margin-top:var(--r3)}

@media print{ .volet,.volet__rail{display:none!important}
  html.a-volet body,html.avec-volet body{padding-right:0}
  html.avec-volet .volet-dessous,
  html.avec-volet .ajd__a,
  html.avec-volet .tb__l,
  html.avec-volet .tbl .tbl__a{padding-right:0} }

/* =====================================================================
   v0.15 — LE COMPARATIF LIGNE À LIGNE, REFONDU.

   La version précédente empilait trois informations par cellule — prix,
   écart, barre — sur une cinquantaine de cellules. Ici : une seule, et
   un sélecteur pour dire laquelle. Le reste vit au survol, où il ne
   coûte aucune encre.

   Le tableau se lit en deux sections : ce qui appelle une décision, puis
   ce qui s'accorde, atténué et replié. La première colonne et l'en-tête
   restent en place au défilement, et le total est collé en bas.
   ===================================================================== */

/* --- la barre d'outils ----------------------------------------------- */
.cmp-outils{display:flex;flex-wrap:wrap;gap:var(--r3) var(--r5);align-items:center;
  padding:11px 13px;margin-bottom:10px;background:var(--surface-2);
  border:1px solid var(--trait-f);border-radius:var(--arr)}
.cmp-outils__g{display:flex;align-items:center;gap:var(--r2)}
/* Les offres prennent une ligne à elles : cinq puces à la suite des trois
   réglages fabriquent une barre qu'on ne lit plus. */
.cmp-outils__g--w{flex:1 1 100%;align-items:flex-start;
  border-top:1px solid var(--trait-f);padding-top:var(--r3)}

/* --- v0.16, lot A : une puce, deux gestes ----------------------------
   Le NOM désigne la référence, la CROIX met de côté. Deux boutons dans
   une même bordure — et non un bouton dans un bouton, que le HTML
   interdit et que le clavier ne saurait pas parcourir. La bordure est
   portée par le conteneur ; les deux boutons sont nus, séparés par un
   filet, et chacun garde sa propre cible tactile de 32 px.

   La zone du nom est volontairement plus large que la croix : c'est le
   geste courant. Sortir une offre du comparatif est rare, et un doigt
   qui rate la croix ne casse rien — il change la référence, ce qui se
   défait d'un appui. */
.cmp-chips{display:flex;flex-wrap:wrap;gap:6px}
.cmp-chip{display:inline-flex;align-items:stretch;font-size:var(--t-2);font-weight:600;
  border-radius:var(--arr-p);overflow:hidden;
  border:1px solid var(--trait);background:var(--blanc);color:var(--encre-2)}
.cmp-chip:hover{border-color:var(--encre-3)}
.cmp-chip__n,.cmp-chip__x{font:inherit;color:inherit;background:none;border:0;
  display:inline-flex;align-items:center;gap:5px;min-height:32px;cursor:pointer}
.cmp-chip__n{padding:4px 10px}
.cmp-chip__n--fixe{cursor:default}
.cmp-chip__x{font-family:var(--f-data);font-size:var(--t-3);line-height:1;padding:4px 9px;
  border-left:1px solid var(--trait);color:var(--beton)}
.cmp-chip__x:hover{background:var(--surface-2);color:var(--encre)}
.cmp-chip__n:focus-visible,.cmp-chip__x:focus-visible{outline:2px solid var(--signal);
  outline-offset:-2px}
/* La référence : c'est un RÉGLAGE, il se voit et il se relâche. */
.cmp-chip--ref{border-color:var(--signal);background:var(--signal-btn);color:var(--sur-signal)}
.cmp-chip--ref .cmp-chip__x{border-left-color:var(--sur-signal);color:var(--sur-signal);
  opacity:.75}
.cmp-chip--ref .cmp-chip__x:hover{background:rgba(0,0,0,.14);opacity:1}
/* Mise de côté : elle ne pèse plus sur la référence, et ça se lit. */
.cmp-chip--hors{background:var(--surface-2);border-style:dashed}
.cmp-chip--hors .cmp-chip__n{text-decoration:line-through;color:var(--beton)}
/* Le marqueur de moins-disante conforme : PERMANENT. Il n'a pas d'état
   pressé, il ne se clique pas — c'est une information, pas un réglage. */
.cmp-chip__md{font-style:normal;font-size:var(--t-2);line-height:1;color:var(--vert);
  vertical-align:1px}
.cmp-chip--ref .cmp-chip__md{color:var(--sur-signal)}
.cmp-chip--hors .cmp-chip__md{color:var(--beton)}
.cmp-aide{margin:0 0 10px}
.cmp-aide b{color:var(--encre)}

/* --- le tableau : première colonne figée ---------------------------
   `table-layout:fixed` : sans lui la largeur d'une colonne collante est
   une suggestion que le contenu contredit, et « Poste » passe sous la
   colonne suivante. Les largeurs viennent du <colgroup>.
   v0.25 (recette) — LE CADRE NE DÉFILE PLUS EN HAUTEUR. Borné à 72 % de
   la fenêtre, il défilait dans la page dès que le tableau dépassait :
   à 1366 px, les chapitres et leurs sous-totaux de la 0.25 portaient le
   comparatif de CONS-023 à 600 px pour 551 de cadre — un ascenseur dans
   un ascenseur, ce que §2.22 exclut. Le cadre prend la hauteur du
   tableau et ne défile qu'en largeur (§2.14). L'en-tête reste collant
   dans le cadre : il ne se fige plus sur la page. */
.cmp-cadre{overflow-x:auto;
  border:1px solid var(--carte);border-radius:var(--arr);box-shadow:var(--om-c);background:var(--blanc)}
/* v0.28 (B1) — le clone d'en-tête : fixé au niveau de la page sous le
   bandeau, montré et placé par figerEnTeteComparatif() quand l'en-tête
   du cadre passe sous le bandeau. Fixé et non collant : le panneau qui
   contient le comparatif rogne son débordement (.panel), ce qui
   confinerait un élément collant au panneau. Le volet intérieur cache
   son débordement et reçoit le défilement horizontal du cadre. */
.cmp-fige{position:fixed;z-index:40}
.cmp-fige__v{overflow:hidden;background:var(--blanc);border:1px solid var(--carte);border-top:0;
  box-shadow:var(--om-c)}
.cmp-fige__v .cmp2 thead th{position:sticky}
.cmp-fige__v .cmp2 thead th.cmp2__p{left:0}
.cmp2{border-collapse:separate;border-spacing:0;width:100%;font-size:var(--t-2);
  table-layout:fixed}
.cmp2 th,.cmp2 td{padding:0;border-bottom:1px solid var(--trait-f)}
.cmp2 thead th{position:sticky;top:0;z-index:3;background:var(--blanc);
  border-bottom:1px solid var(--trait);padding:9px 12px;text-align:right;
  font-family:var(--f-titre);font-size:var(--t-2);font-weight:600;letter-spacing:.02em;
  color:var(--encre);vertical-align:bottom}
.cmp2 thead th.cmp2__p{text-align:left;left:0;z-index:5}
.cmp2 thead th.cmp2__ax{text-align:left}
.cmp2__p{position:sticky;left:0;background:var(--blanc);z-index:2}
.cmp2 tbody th.cmp2__p{text-align:left;font-weight:500;color:var(--encre);
  padding:9px 12px;line-height:1.4;font-size:var(--t-2)}
.cmp2 tbody th.cmp2__p b{display:block;font-weight:600}
/* La quantité descend sous le nom du poste : depuis que les cellules
   portent des TOTAUX (lot A.1) elle ne sert plus à comparer, seulement à
   se rappeler de quoi on parle. Sa colonne était redondante. */
.cmp2__q{display:block;font-family:var(--f-data);font-size:var(--t-2);color:var(--beton);
  margin-top:2px}
.cmp2 tbody tr:hover th.cmp2__p,.cmp2 tbody tr:hover td{background:var(--surface-2)}
.cmp2__c{text-align:right;padding:9px 12px;font-family:var(--f-data);font-size:var(--t-2);
  color:var(--encre);white-space:nowrap;background:var(--blanc);
  overflow:hidden;text-overflow:ellipsis}
.cmp2__c--ref{color:var(--beton);font-weight:400}
/* Le moins-disant du poste se voit PAR LA COULEUR, sans changer l'ordre
   des colonnes (lot A.2) : l'ordre est celui des dépôts et ne doit rien
   souffler. */
.cmp2__c--bas{color:var(--vert);font-weight:700}
/* --- v0.16, lot A : deux tons ----------------------------------------
   Le beige de la v0.15 supposait implicitement du positif. Avec une
   référence désignée, « −18 % » est une bonne nouvelle : il mérite
   l'attention autant qu'un « +18 % », mais pas le même signal.
   Ambre = je paie plus cher qu'elle ; olive = elle est déjà mieux
   placée. Le moins-disant du poste garde son vert de TEXTE, sans fond :
   quand une cellule est les deux, le fond gagne. */
.cmp2__c--fort{background:var(--ambre-l);color:var(--ambre);font-weight:700}
.cmp2__c--fortb{background:var(--vert-l);color:var(--vert);font-weight:700}
.cmp2__c--ko{background:var(--rouge-l);color:var(--rouge);font-weight:700;
  font-family:var(--f-texte);font-size:var(--t-2)}
.cmp2__c--ex{background:var(--trait-f);color:var(--beton);font-style:italic;
  font-family:var(--f-texte);font-size:var(--t-2)}
/* La variante porte un FOND, pas un filet : un filet à gauche se lit
   comme la bordure droite de la colonne précédente, et on ne sait plus à
   qui il appartient. */
.cmp2__c--v,.cmp2 thead th.cmp2__e--v{background:var(--bleu-l)}
.cmp2__c--v.cmp2__c--fort{background:var(--ambre-l)}
.cmp2__c--v.cmp2__c--fortb{background:var(--vert-l)}
.cmp2 thead th.cmp2__e--r{box-shadow:inset 0 -3px 0 var(--signal)}
/* La moins-disante conforme : un filet olive, permanent. Quand elle est
   aussi la référence, le filet du réglage passe devant — la mention
   textuelle sous le nom porte alors les deux. */
.cmp2 thead th.cmp2__e--md{box-shadow:inset 0 -3px 0 var(--vert)}
.cmp2 thead th.cmp2__e--r.cmp2__e--md{box-shadow:inset 0 -3px 0 var(--signal)}
.cmp2__c--r{background:var(--signal-l)}
.cmp2 tfoot td,.cmp2 tfoot th{position:sticky;bottom:0;z-index:3;
  background:var(--surface-2);border-top:1px solid var(--trait);border-bottom:0;
  padding:10px 12px;font-weight:700}
.cmp2 tfoot th.cmp2__p{left:0;z-index:5;text-align:left}
.cmp2 tfoot td{text-align:right;font-family:var(--f-data)}
.cmp2__tot-a{text-align:left;font-family:var(--f-texte);font-weight:400;
  font-size:var(--t-2);color:var(--beton)}
.cmp2__va{display:block;font-family:var(--f-data);font-size:var(--t-2);letter-spacing:.1em;
  color:var(--bleu);font-weight:700}
.cmp2__sd{display:block;font-weight:400;font-size:var(--t-2);color:var(--beton);
  font-family:var(--f-texte);letter-spacing:0}

/* --- les deux sections : ce qui appelle une décision, et le reste ---- */
.cmp2__sec th{position:sticky;left:0;z-index:4;padding:0!important;text-align:left}
.cmp2__bande{display:flex;align-items:center;gap:10px;padding:7px 12px;
  background:var(--encre);color:var(--papier);
  font-family:var(--f-titre);font-size:var(--t-1);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase}
.cmp2__bande--calme{background:var(--trait-f);color:var(--encre-2)}   /* v0.25 — 4,46:1 en beton sur ce gris : encre-2 tient 4,5 */
.cmp2__bande em{font-style:normal;font-weight:400;letter-spacing:0;text-transform:none;
  font-size:var(--t-2)}
.cmp2__pli{margin-left:auto;background:none;border:1px solid currentColor;color:inherit;
  border-radius:var(--arr-p);padding:2px 10px;font:inherit;font-size:var(--t-2);cursor:pointer;
  letter-spacing:.04em}
/* Un fond de survol translucide se pose sur un fond qu'on ne connaît
   pas : le contraste n'est plus calculable. Deux teintes pleines. */
.cmp2__pli:hover{background:var(--blanc);color:var(--encre);border-color:var(--encre)}
.cmp2__pli:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
/* Les postes qui s'accordent sont ATTÉNUÉS par une teinte pleine, pas
   par une opacité : une opacité rend le contraste impossible à mesurer. */
.cmp2 tr.calme th.cmp2__p,.cmp2 tr.calme td{color:var(--beton)}
.cmp2 tr.calme th.cmp2__p b{font-weight:500}
.cmp2 tr.calme:hover th.cmp2__p,.cmp2 tr.calme:hover td{color:var(--encre)}

/* --- la lecture par points -------------------------------------------
   Une ligne par poste, un axe, un point par entreprise. On ne lit aucun
   chiffre et on voit le point isolé. Les bornes sont écrites DE PART ET
   D'AUTRE de l'axe : un nombre posé sous le point le plus à gauche se
   superpose au point, et on ne lit plus ni l'un ni l'autre. */
.cmp-pt{display:flex;align-items:center;gap:12px;height:30px;padding:0 12px}
.cmp-pt__v{font-family:var(--f-data);font-size:var(--t-2);color:var(--beton);
  flex:none;width:82px;text-align:right}
.cmp-pt__v--d{text-align:left}
.cmp-pt__z{position:relative;flex:1;height:100%;min-width:130px}
.cmp-pt__a{position:absolute;left:0;right:0;top:50%;height:2px;border-radius:2px;
  background:var(--trait);transform:translateY(-50%)}
.cmp-pt__g{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;
  transform:translate(-50%,-50%);background:var(--encre-3);
  box-shadow:0 0 0 2px var(--blanc)}
.cmp-pt__g--bas{background:var(--vert)}
.cmp-pt__g--fort{background:var(--ambre);width:15px;height:15px}
.cmp-pt__g--v{background:var(--bleu)}
.cmp2 tr:hover .cmp-pt__g{box-shadow:0 0 0 2px var(--surface-2)}

/* --- la légende ------------------------------------------------------ */
.cmp-leg{display:flex;gap:var(--r3);flex-wrap:wrap;align-items:center;margin-top:9px;
  font-size:var(--t-2);color:var(--beton)}
.cmp-leg span{display:inline-flex;align-items:center;gap:5px}
.cmp-leg__c{width:11px;height:11px;border-radius:3px;display:inline-block;
  border:1px solid var(--trait)}
.cmp-leg__c--ko{background:var(--rouge-l);border-color:var(--rouge)}
.cmp-leg__c--ex{background:var(--trait-f);border-color:var(--beton)}
.cmp-leg__c--fort{background:var(--ambre-l);border-color:var(--ambre)}
.cmp-leg__c--fortb{background:var(--vert-l);border-color:var(--vert)}
.cmp-leg__c--bas{background:var(--vert);border-color:var(--vert)}
.cmp-leg__c--var{background:var(--bleu-l);border-color:var(--bleu)}

/* La bande d'anomalies par entreprise (`.cmp-al`) est retirée en v0.15 :
   l'accroche en tête de comparatif dit la même chose en une phrase, et
   la nomme au bon endroit — au-dessus du tableau, pas entre les
   réglages et les colonnes. */

/* v0.22.1 — les fiches d'entreprises proposées : une grille de colonnes
   égales, pas des cartes à la largeur de leur contenu rangées en 1, 1, 2,
   2, 1 avec 500 px de vide à droite. */
/* v0.22.1 — `min(340px,100%)` : sous 340 px de colonne, la carte suit la
   colonne au lieu de déborder du panneau et d'être coupée. */
#dest-liste{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));gap:10px;align-items:stretch}
#dest-liste>.vide,#dest-liste>.ecartes,#dest-liste>.note,#dest-liste>p{grid-column:1/-1}
#dest-liste>.card{margin:0}
/* v0.22.1 — une pile de choix (les chantiers de l'étape 1) : des cartes de
   même largeur, l'une sous l'autre, pas quatre largeurs ajustées au nom. */
.cards-pile{display:grid;gap:8px}
.cards-pile>.card{width:100%;margin:0}
.cards-pile>.card .pousse{margin-left:auto;text-align:right}
/* --- répondant : « L'essentiel », étiquette au-dessus de sa valeur ------ */
.ess__l{padding:8px 0;border-bottom:1px solid var(--trait-f);min-width:0}
.ess__k{display:block;font-family:var(--f-data);font-size:var(--t-1);letter-spacing:.08em;text-transform:uppercase;color:var(--beton);margin-bottom:2px}
.ess__v{display:block;font-size:var(--t-2);overflow-wrap:anywhere}
.ess__v .et{white-space:normal}
/* --- destinataires : les écartés, en tableau compact ----------------- */
.ecartes{border:1px solid var(--carte);border-radius:var(--arr);box-shadow:var(--om-c);
  background:var(--blanc);margin-top:10px;overflow:hidden}
.ecartes__h{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;
  padding:9px 12px;background:var(--surface-2);border-bottom:1px solid var(--trait)}
.ecartes__h b{font-size:var(--t-2)}
.ecartes__h span{font-size:var(--t-2);color:var(--beton);flex:1 1 240px}
.ecartes__l{list-style:none;margin:0;padding:0}   /* v0.22.1 — plus de hauteur bornée : un conteneur ne défile pas dans la page (§2.22) ; la liste se déplie entière */
.ecartes__l li{display:flex;gap:10px;align-items:baseline;padding:4px 12px;
  font-size:var(--t-2);border-bottom:1px solid var(--trait-f)}
.ecartes__l li:last-child{border-bottom:0}
.ecartes__e{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ecartes__v{flex:none;width:120px;color:var(--beton)}
.ecartes__m{flex:none;width:150px;text-align:right;font-family:var(--f-data);
  font-size:var(--t-2);color:var(--beton-c)}
.ecartes__s{list-style:none;cursor:pointer;padding:8px 12px;font-size:var(--t-2);font-weight:600;color:var(--signal-d)}
.ecartes__s::-webkit-details-marker{display:none}
.ecartes__s::before{content:'▸ '}
.ecartes__pli[open]>.ecartes__s::before{content:'▾ '}
@media(max-width:640px){.ecartes__v{display:none}.ecartes__l li{flex-wrap:wrap}.ecartes__e{white-space:normal;flex:1 1 100%}.ecartes__m{width:auto;text-align:left}}

/* Le pictogramme d'un panneau, sur la tranche et dans l'onglet. */
.volet__pi{display:flex;align-items:center;justify-content:center}
.volet__ong .volet__pi{display:inline-flex;margin-right:6px;vertical-align:-3px}
.volet__ong .volet__pi svg{width:16px;height:16px}
.volet__pi svg{width:19px;height:19px;fill:none;stroke:currentColor;
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}

/* =====================================================================
   v0.12, lot 5 — LE POSTE DE TRAVAIL

   Ce qui suit ne change ni la charte ni les rôles de couleur : mêmes
   jetons, mêmes contrastes. Ce qui change est le rythme.

   Le constat : l'espace principal respirait comme une page de vente —
   grandes cartes, marges larges, une quinzaine de lignes sur 1 900 px de
   défilement. Les huit outils intégrés, eux, sont des postes de travail :
   barre d'onglets, compteurs collés aux onglets, tableaux serrés, actions
   à portée immédiate. C'est cette densité-là qu'on adopte ici, celle du
   planning main-d'œuvre.

   Trois règles tiennent tout le reste :
     · une hauteur de ligne unique (--rang) dont découlent les tableaux ;
     · les chiffres en chasse fixe et en chiffres tabulaires, pour que
       les colonnes s'alignent à l'œil sans qu'on les compte ;
     · aucune information n'est répétée sur deux bandes.

   Ce qui ne bouge pas : les contrastes vérifiés WCAG AA, le parcours au
   clavier, les cibles tactiles à 44 px sur écran étroit (voir plus bas).
   ===================================================================== */
:root{
  --rang:36px;           /* la hauteur d'une ligne de tableau (v0.21 : 16 px de corps) */
  --entete:48px;         /* la barre d'identité, mince */
  --onglets:44px;        /* la barre d'onglets — une cible de 44 px */
}

/* --- la barre d'identité : une ligne, jamais deux ------------------- */
.top{padding:0 var(--r4);height:var(--entete);gap:var(--r3);flex-wrap:nowrap;
  padding-left:max(var(--r4),env(safe-area-inset-left));
  padding-right:max(var(--r4),env(safe-area-inset-right))}
.top .marque{gap:8px}
.top .marque__b{width:22px;height:22px;border-radius:5px}
.top .marque__b::after{font-size:var(--t-2)}
.top .marque{flex:none}
/* Dans la barre mince, le nom et l'espace ne forment plus une colonne :
   la règle historique empilait « Place » et « BTP ». */
.top .marque>span:last-child{display:inline;white-space:nowrap}
.top .marque__n{font-size:var(--t-3);white-space:nowrap}
.top__e{font-size:var(--t-2);color:var(--beton);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;min-width:0}
.top__d{gap:var(--r1);flex-wrap:nowrap}

/* --- la barre d'onglets : navigation + compteurs + alertes ---------- */
.nav{padding:0 var(--r3);gap:0;align-items:stretch;min-height:var(--onglets)}
.nav__o{gap:0;min-width:0}
.nav__b{font-size:var(--t-2);padding:8px 13px 6px;border-bottom-width:2.5px;gap:7px}
.nav__b[aria-selected="true"]{color:var(--encre);border-bottom-color:var(--signal)}
.nav__b:hover{background:var(--surface-2)}
.nav__c{font-style:normal;font-size:var(--t-2);padding:1px 6px;border-radius:9px}
/* `--signal-btn` plutôt que `--signal` : en thème sombre le signal
   s'éclaircit pour rester lisible en texte, et du blanc dessus retombe à
   3,2:1. Le jeton de bouton, lui, tient 5,4:1 dans les deux thèmes. */
.nav__b[aria-selected="true"] .nav__c{background:var(--signal-btn);color:#FFF}
.nav__c--b{background:var(--ambre-l);color:var(--ambre)}
.nav__b[aria-selected="true"] .nav__c--b{background:var(--ambre-l);color:var(--ambre)}
.nav__a{margin-left:auto;display:flex;align-items:center;gap:6px;padding-left:var(--r3);
  flex-wrap:wrap}
.nav__a .et{border:0;cursor:pointer;font-family:inherit}
.nav__a .et:hover{filter:brightness(.95)}
@media(max-width:900px){.nav__a{display:none}}

/* --- les tableaux : la densité du planning main-d'œuvre ------------- */
.tbl{font-size:var(--t-2)}
.tbl th{font-size:var(--t-2);letter-spacing:.09em;padding:5px 8px}
.tbl td{padding:0 8px;height:var(--rang);vertical-align:middle}
.tbl td .et{font-size:var(--t-2);padding:1px 7px}
.tbl tbody tr{border-bottom:1px solid var(--trait-f)}
.tbl .data,.tbl .num{font-variant-numeric:tabular-nums}
/* Une cellule à deux étages (objet + type) reste sur une ligne : le
   second étage passe en gris, à la suite, plutôt qu'en dessous. */
.tbl .tbl__s{display:inline;margin-left:6px;font-size:var(--t-2);color:var(--beton)}
.tbl__h2{font-weight:600}

/* --- les panneaux : une carte calme, de l'air (v0.22, lot B) -------- */
.contenu{padding:var(--r4) var(--goutt) var(--r6)}
.panel{border-radius:var(--arr);margin-bottom:var(--r4);box-shadow:var(--om-c)}
.panel__h{padding:10px 16px;gap:var(--r2);min-height:0;background:var(--blanc);border-bottom-color:var(--trait-f)}
.panel__h h2{font-size:var(--t-4)}
.panel__d{font-size:var(--t-2)}
.panel__b{padding:var(--r3) var(--r4) var(--r4)}
.panel__b>.bloc:first-child{margin-top:0}
.bloc{margin-bottom:var(--r3)}
.legende{font-size:var(--t-4);letter-spacing:-.018em;margin-bottom:8px}
.panel__n{width:19px;height:19px;font-size:var(--t-2)}

/* v0.19, lot A — la barre d'état du bas (`.etat`) a été retirée. */

/* --- écrans étroits : la densité cède devant le doigt ---------------
   Sur un téléphone, une ligne de 30 px n'est pas cliquable. On rend au
   tableau la hauteur qu'il faut, et les cartes reprennent la main via
   les règles responsives existantes. */
@media(max-width:760px){
  :root{--rang:auto}
  .tbl td{padding:8px;height:auto}
  .nav__b{padding:11px 13px 9px;font-size:var(--t-2)}
  /* La barre mince redevient souple : à 390 px, trois boutons et le nom
     de l'espace ne tiennent pas sur une ligne, et `nowrap` les faisait
     déborder de la page. */
  .top{height:auto;padding-top:6px;padding-bottom:6px;flex-wrap:wrap;row-gap:4px}
  .top__d{flex-wrap:wrap}
  .top__e{flex-basis:100%;order:3}
  /* v0.21, lot B — à 16 px, la barre prenait trois rangs sur téléphone :
     la marque, les trois boutons, l'espace. Les boutons se resserrent
     (44 px de haut, mais pas plus larges que leur mot) et la ligne de
     l'espace passe en petit : deux rangs, pas trois. */
  .top__d .btn--f{padding:6px 8px;font-size:var(--t-2)}
  .top__e{font-size:var(--t-2);order:3}
}

/* --- les sous-onglets d'un tableau : filtrer sans quitter l'écran --- */
.sous{gap:0;padding:0 var(--r3);background:var(--surface-2);border-bottom:1px solid var(--trait)}
.sous__b{border:0;background:none;font:inherit;font-size:var(--t-2);font-weight:600;
  color:var(--beton);padding:6px 11px 5px;border-bottom:2px solid transparent;
  cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:6px}
.sous__b:hover:not(:disabled){color:var(--encre)}
.sous__b:disabled{opacity:.42;cursor:default}
.sous__b[aria-selected="true"]{color:var(--encre);border-bottom-color:var(--encre)}
.sous__n{font-style:normal;font-family:var(--f-data);font-size:var(--t-2);font-weight:700;
  background:var(--trait-f);color:var(--encre-2);border-radius:9px;padding:0 6px}
.sous__b[aria-selected="true"] .sous__n{background:var(--encre);color:var(--papier)}
.sous__b:focus-visible{outline:2px solid var(--signal);outline-offset:-2px}

/* v0.22.1 — sur téléphone, les onglets et la bande de filtres SE REPLIENT
   sur deux lignes : un défilement horizontal caché coupait « Fournisseurs »
   au bord droit sans rien pour dire qu'il y avait une suite, et le
   sélecteur de chantier dépassait de l'écran. */
@media(max-width:640px){
  /* Un bouton se replie plutôt que de sortir de sa carte (« Envoyer la
     demande à SMTP Terra… » coupé à 390 px). */
  .btn{white-space:normal;max-width:100%}
  .nav,.nav__o,.sous{flex-wrap:wrap;overflow-x:visible}
  .nav{min-height:0}
  .nav__b{padding:9px 7px 7px;gap:5px}
  .sous__ch{margin-left:0;flex:1 1 100%;padding:6px 0}
  .sous__ch .cmp-sel{max-width:100%;width:100%}
}

/* v0.22.1 — sur téléphone, un tableau de contenu (`.tbl--c`) devient une
   PILE DE FICHES : une ligne par cellule, l'en-tête de colonne devant
   (`data-l`). La recette visuelle a vu le panel fournisseurs, les
   chantiers et la direction coupés au bord droit à 390 px, et la barre du
   volet posée sur leurs dernières colonnes. Les tableaux de chiffres
   (fiche d'une offre) gardent leur cadre qui défile : on y compare des
   colonnes, pas des fiches. */
@media(max-width:700px){
  .tbl--c:not(.fo__tbl){display:block}
  .tbl--c:not(.fo__tbl) thead,.tbl--c:not(.fo__tbl) colgroup{display:none}
  .tbl--c:not(.fo__tbl) tbody,.tbl--c:not(.fo__tbl) tr{display:block}
  .tbl--c:not(.fo__tbl) tbody tr{padding:8px 8px;border-bottom:1px solid var(--trait)}
  .tbl--c:not(.fo__tbl) td>.et{white-space:normal}
  .dir__t .cyc--c .cyc__e--courante .cyc__t{white-space:normal}
  .dir__t .cyc--c .cyc__e--avenir{display:none}   /* dans une fiche de téléphone, l'étape où elle en est ; pas les six suivantes */
  .dir__t .cyc--c .cyc__fin{display:inline}        /* … mais « clôturée », « remplacée », « sans suite » se lisent */
  .puce{max-width:100%;white-space:normal;text-align:left}
  /* Une grille à deux colonnes : l'en-tête à gauche, et tout le contenu
     de la cellule empilé à droite — un nom, son badge, son contact. */
  .tbl--c:not(.fo__tbl) td{display:grid;grid-template-columns:max(34%,8em) minmax(0,1fr);column-gap:10px;row-gap:2px;align-items:baseline;
    height:auto;min-height:0;padding:3px 0;border:0;text-align:left;max-width:none;white-space:normal;overflow:visible}
  /* L'étiquette se PLIE : « QUI LA TIENT », « ANTÉRIORITÉ »,
     « DÉSIGNATION » dépassaient de leur colonne et venaient toucher la
     valeur — la recette visuelle lisait « QUI LA TIENTNadia Bertin ». */
  .tbl--c:not(.fo__tbl) td[data-l]:not([data-l=""])::before{content:attr(data-l);grid-column:1;grid-row:1;text-align:left;
    font-family:var(--f-data);font-size:var(--t-1);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--beton);
    white-space:normal;overflow-wrap:break-word;line-height:1.3}
  .tbl--c:not(.fo__tbl) td>*{grid-column:2;min-width:0;justify-self:start}
  .tbl--c:not(.fo__tbl) td.num>*{justify-self:end}
  .tbl--c:not(.fo__tbl) td>br{display:none}
  .tbl--c:not(.fo__tbl) td.num{text-align:right}
  .tbl--c:not(.fo__tbl) td[data-l=""],.tbl--c:not(.fo__tbl) td:not([data-l]),.tbl--c:not(.fo__tbl) td.tbl__a{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;padding-top:8px}
  .tbl--c:not(.fo__tbl) td[data-l="Alignement"] input,.tbl--c:not(.fo__tbl) td[data-l="Commentaire"] input{max-width:none;flex:1 1 auto}
  /* Une cellule sans contenu ne garde pas son étiquette : la direction
     affichait « SIGNAL » suivi de rien sur vingt consultations. */
  .tbl--c:not(.fo__tbl) td:empty{display:none}
  /* Ce qui a sa propre largeur — la frise du cycle — prend la colonne
     entière au lieu de déborder de la fiche. */
  .tbl--c:not(.fo__tbl) td>.cyc{justify-self:stretch;width:100%}
  .dir__t .cyc--c .cyc__l{flex-wrap:wrap;row-gap:6px}
  .dir__t .cyc--c .cyc__e{flex:0 1 auto;min-width:46px}
  .dir__t .cyc--c .cyc__e::before{display:none}
  .tbl-cadre:has(> .tbl--c:not(.fo__tbl)){overflow-x:visible}
}

/* Colonnes de tableau qui doivent se couper plutôt que pousser la ligne.
   v0.22.1 — l'objet a droit à deux lignes avant les points de suspension :
   « Démolition de dallage — quai de chargemen… » se lisait mal, et la
   ligne de 36 px n'était pas un dogme. Le chantier reste sur une ligne. */
.tbl__o,.tbl__c{max-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tbl__o b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tbl__c{color:var(--beton)}
.jr{font-family:var(--f-data);font-size:var(--t-2);white-space:nowrap}
.jr--r{color:var(--rouge);font-weight:700}
.jr--a{color:var(--ambre);font-weight:700}
@media(max-width:760px){.tbl__o,.tbl__c{max-width:none;white-space:normal}}

/* Le pied de page laisse la place à la barre d'état collante. */
.contenu{padding-bottom:var(--r6)}

/* --- le classement des offres, en tableau --------------------------- */
.clst th small{display:block;font-weight:400;letter-spacing:0;text-transform:none;
  font-size:var(--t-2);color:var(--beton-c);margin-top:1px}
.clst td{padding-top:3px;padding-bottom:3px}
.clst--1{background:var(--surface-2)}   /* v0.22.1 — gris 1 et non bleu léger : le bouton de ligne, bleu clair, s'y confondait */
.clst--1 td:first-child{box-shadow:inset 3px 0 0 var(--signal)}
.clst__b{display:block;height:3px;border-radius:2px;background:var(--trait);
  margin-top:3px;overflow:hidden}
.clst__b i{display:block;height:100%;background:var(--encre-3);border-radius:2px}
.clst--1 .clst__b i{background:var(--signal)}
.clst__t{border-left:1px solid var(--trait);white-space:nowrap}   /* v0.22.1 — « 38,0 / 40 » sur une ligne, virgule décimale comme partout */
.clst__t b{font-size:var(--t-3)}

/* --- comparatif : la densité du niveau « complet » ------------------
   Une cellule ne portant plus qu'UNE information (v0.15), il n'y a plus
   deux étages à comprimer : on resserre seulement les marges. */
.cmp2 tbody th.cmp2__p,.cmp2 .cmp2__c{padding-top:6px;padding-bottom:6px}
.cmp2 thead th{padding-top:6px;padding-bottom:6px}

/* --- la coquille de l'espace répondant, à la même densité ------------
   Même raisonnement que côté donneur d'ordre : le flanc et l'en-tête
   sont des repères, pas le contenu. Ils rendent leur place au travail. */
:root{--flanc:206px}   /* v0.22.1 — 194 px cassaient « Bibliothèque de prix » en gras sur deux lignes */
.flanc{padding:var(--r2) 9px;gap:1px;padding-left:max(9px,env(safe-area-inset-left))}
.flanc .marque{padding:6px var(--r2) var(--r3);gap:8px}
.flanc .marque__b{width:24px;height:24px;border-radius:6px}
.flanc .marque__b::after{font-size:var(--t-3)}
.flanc .marque__n{font-size:var(--t-3)}
.flanc .marque__s{font-size:var(--t-2)}
.flanc__l{padding:6px 10px;font-size:var(--t-2);gap:9px}
.flanc__l svg{width:16px;height:16px}
.flanc__s{padding:var(--r3) 10px 4px;font-size:var(--t-2)}
.flanc__p{padding:7px 10px;font-size:var(--t-2)}
.flanc__p .av{width:26px;height:26px;font-size:var(--t-2)}

.tete{padding:10px var(--goutt);gap:var(--r3)}
.tete h1{font-size:var(--t-5);letter-spacing:-.022em}
.tete__f{font-size:var(--t-2)}
.corps .chiff{padding-top:var(--r3)}

/* =====================================================================
   v0.13 — les engagements contractuels du répondant.

   Une ligne par condition, sur trois colonnes : ce qui est demandé, la
   position, et le commentaire quand il y en a un. Le commentaire
   n'existe pas tant que la position est « accepté » — celui qui est
   d'accord sur tout ne voit jamais un champ de texte.
   ===================================================================== */
.eng{list-style:none;margin:0;padding:0}
.eng__l{display:grid;grid-template-columns:1fr 232px;gap:var(--r3);align-items:start;
  padding:9px 4px;border-bottom:1px solid var(--trait-f)}
.eng__l:last-child{border-bottom:0}
.eng__l--x{background:var(--surface-2);border-radius:var(--arr-s)}
.eng__t{min-width:0}
.eng__t b{font-size:var(--t-2);display:block}
.eng__v{display:block;font-size:var(--t-2);color:var(--encre-2);margin-top:1px}
.eng__p{display:block;font-size:var(--t-2);color:var(--beton);margin-top:2px;line-height:1.45}
.eng__s{align-self:start}
.eng__s button{flex:1;padding:5px 8px;font-size:var(--t-2)}
.eng__c{grid-column:1 / -1;margin-top:2px}
.eng__c input{width:100%;font-size:var(--t-2);padding:6px 9px;border-style:dashed}
@media(max-width:640px){.eng__l{grid-template-columns:1fr}}

/* Le rappel dans le dossier : les conditions engageantes, en tête. */
.panel--eng{border-left:3px solid var(--ambre)}
.dos-cond--eng dd{font-family:var(--f-data);font-size:var(--t-2)}

/* --- vignettes de pièces jointes (lot 6.3) -------------------------- */
.vignettes{list-style:none;display:flex;flex-wrap:wrap;gap:var(--r2);margin:0;padding:0}
.vig__a{display:flex;flex-direction:column;gap:3px;width:132px;text-decoration:none;
  color:inherit;border:1px solid var(--trait);border-radius:var(--arr-s);
  padding:6px;background:var(--blanc)}
.vig__a:hover{border-color:var(--beton-c)}
.vig__i,.vig__x{display:block;width:100%;height:74px;border-radius:5px;
  background:var(--surface-2);object-fit:cover}
.vig__x{display:grid;place-items:center;font-family:var(--f-data);font-size:var(--t-2);
  font-weight:700;color:var(--beton)}
.vig__n{font-size:var(--t-2);line-height:1.3;overflow:hidden;text-overflow:ellipsis;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.vig__t{font-size:var(--t-2);color:var(--beton-c)}

/* =====================================================================
   v0.13, lot 4 — la notation en étoiles.

   Chaque étoile porte deux boutons invisibles superposés : la moitié
   gauche vaut le demi-point, la droite le point entier. Ce sont de VRAIS
   boutons — le clavier les atteint, le lecteur d'écran les annonce, et
   `aria-pressed` dit celui qui porte la valeur. Recliquer efface.
   ===================================================================== */
.eto{display:inline-flex;align-items:center;gap:1px}
.eto__u{position:relative;width:19px;height:19px;display:block;flex:none}
.eto__u svg{width:19px;height:19px;fill:none;stroke:var(--beton-c);stroke-width:1.5;
  stroke-linejoin:round;pointer-events:none;display:block}
.eto__u--p svg{fill:var(--ambre);stroke:var(--ambre)}
.eto__u--d svg{stroke:var(--ambre)}
/* La moitié pleine d'une demi-étoile : un calque coupé en deux. */
.eto__u--d::after{content:'';position:absolute;inset:0 50% 0 0;overflow:hidden;
  background:var(--ambre);pointer-events:none;
  -webkit-mask:var(--eto-m) 0 0/19px 19px no-repeat;mask:var(--eto-m) 0 0/19px 19px no-repeat}
:root{--eto-m:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3.2l2.7 5.6 6.1.9-4.4 4.3 1 6.1-5.4-2.9-5.4 2.9 1-6.1L3.2 9.7l6.1-.9z' fill='black'/></svg>")}
.eto__b{position:absolute;top:0;bottom:0;width:50%;padding:0;border:0;background:none;
  cursor:pointer;z-index:1}
.eto__b--g{left:0} .eto__b--d{right:0}
.eto__b:focus-visible{outline:2px solid var(--signal);outline-offset:1px;border-radius:2px}
.eto__u:hover svg{stroke:var(--ambre)}
.eto__v{margin-left:5px;font-size:var(--t-2);color:var(--beton);min-width:20px}

/* Le sous-titre d'une cellule ou d'un en-tête : l'unité, la provenance. */
.th__s{display:block;font-weight:400;text-transform:none;letter-spacing:0;
  font-size:var(--t-2);color:var(--beton-c);font-family:var(--f-texte)}

/* --- le détail des réserves, déplié sous une ligne d'offre ---------- */
.res-l td{background:var(--surface-2);padding:0 !important;height:auto !important}
.res{padding:8px 12px 10px;border-left:3px solid var(--ambre)}
.res__t{font-size:var(--t-2);display:block;margin-bottom:5px}
.res__u{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.res__i{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;font-size:var(--t-2);
  padding:3px 0;border-bottom:1px solid var(--trait-f)}
.res__i:last-child{border-bottom:0}
.res__i--ok{opacity:.62}
.res__n{font-weight:600;min-width:172px}
.res__d{font-family:var(--f-data);font-size:var(--t-2);color:var(--beton);min-width:150px}
.res__c{flex:1 1 100%;color:var(--encre-2);font-style:italic;padding-left:172px}
@media(max-width:760px){.res__n,.res__d{min-width:0}.res__c{padding-left:0}}

/* Les styles v0.13 du comparatif — liseré de variante, marques ▼ ▲,
   barres — sont retirés en v0.15 : les barres répétaient le pourcentage,
   et la variante porte désormais un fond plutôt qu'un filet ambigu. Les
   règles qui restaient utiles ont été reprises dans le bloc `.cmp2`
   ci-dessus. */

/* =====================================================================
   v0.13, lot 3 — l'après-attribution.

   L'avertissement n'est pas une note parmi d'autres : il est en tête, il
   ne se replie pas, et il porte le seul liseré rouge de l'écran. Le
   vocabulaire engage — le produit doit dire lui-même ce qu'il n'est pas.
   ===================================================================== */
.panel--avert{border-left:3px solid var(--rouge)}
.avert{border:1px solid var(--rouge);border-radius:var(--arr-s);background:var(--rouge-l);
  padding:10px 14px;margin-bottom:var(--r3)}
.avert b{display:block;font-size:var(--t-3);color:var(--rouge);margin-bottom:3px}
.avert p{margin:0;font-size:var(--t-2);line-height:1.55}

/* Les suites : des cartes d'action, chacune menant quelque part. */
.suites{display:grid;grid-template-columns:repeat(auto-fit,minmax(212px,1fr));
  gap:var(--r2);margin:var(--r3) 0}
.suite{display:flex;flex-direction:column;gap:2px;align-items:flex-start;text-align:left;
  border:1px solid var(--trait);border-radius:var(--arr-s);background:var(--blanc);
  padding:10px 12px;font:inherit;color:inherit;cursor:pointer;
  transition:border-color var(--duree),background var(--duree)}
.suite:hover{border-color:var(--signal);background:var(--surface-2)}
.suite:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
/* v0.22, lot D — le bouton attendu : visible, grisé, sans clic. */
.suite--attendu,.btn--attendu{opacity:.55;cursor:not-allowed;pointer-events:auto}
.suite--attendu:hover,.btn--attendu:hover{border-color:var(--trait);background:var(--blanc);filter:none}
.suite--attendu .attendu{font-style:normal;font-size:var(--t-1);letter-spacing:.06em;text-transform:uppercase;
  color:var(--beton);margin-top:6px}

.suite b{font-size:var(--t-2)}
.suite span{font-size:var(--t-2);color:var(--beton);line-height:1.4}

/* Le message relu avant envoi : un vrai champ, pas une boîte du navigateur. */
.mail-edit{width:100%;font-family:var(--f-texte);font-size:var(--t-2);line-height:1.6;
  padding:10px 12px;border:1px solid var(--trait);border-radius:var(--arr-s);
  background:var(--blanc);color:inherit;resize:vertical}
.mail-edit:focus{border-color:var(--signal);outline:2px solid var(--anneau);outline-offset:0}

/* Le formulaire de transfert : un bloc dans la page, pas une boîte. */
.transf{border:1px solid var(--signal);border-radius:var(--arr-s);
  background:var(--signal-l);padding:10px 14px 12px;margin-bottom:var(--r3)}
.transf .legende{margin-top:0}

/* =====================================================================
   v0.13, lot 7.3 — la frise de vie d'une consultation.

   Une ligne de cote, pas un graphique : un axe, des repères posés
   dessus, et le trait de « maintenant ». L'échelle est celle du TEMPS —
   c'est ce qui la rend informative plutôt que décorative.
   ===================================================================== */
.frise{margin:0 0 var(--r3);padding:16px 12px 0}
.frise__a{position:relative;height:3px;background:var(--trait);border-radius:2px;
  margin:26px 0 0}
.frise__p{position:absolute;left:0;top:0;bottom:0;background:var(--encre-3);
  border-radius:2px;opacity:.5}
.frise__j{position:absolute;top:50%;transform:translate(-50%,-50%);
  width:9px;height:9px;border-radius:50%;background:var(--beton);
  border:2px solid var(--blanc);box-shadow:0 0 0 1px var(--trait)}
.frise__j b{position:absolute;bottom:13px;left:50%;transform:translateX(-50%);
  font-size:var(--t-2);font-weight:600;white-space:nowrap;color:var(--beton);
  font-family:var(--f-texte)}
.frise__j--of{width:7px;height:7px}
.frise__j--of b{bottom:auto;top:12px;font-weight:400;font-size:var(--t-2)}
.frise__j--v{background:var(--vert)} .frise__j--v b{color:var(--vert)}
.frise__j--a{background:var(--ambre)} .frise__j--a b{color:var(--ambre)}
.frise__j--r{background:var(--rouge)} .frise__j--r b{color:var(--rouge)}
.frise__j--o{background:var(--ambre)}
/* Le trait de « maintenant » : le seul repère vertical de la frise. */
.frise__n{position:absolute;top:-7px;bottom:-7px;width:1.5px;background:var(--encre);
  opacity:.55;border-radius:1px}
.frise__l{display:flex;gap:var(--r3);margin-top:26px;
  font-family:var(--f-data);font-size:var(--t-2);color:var(--beton)}
@media(max-width:760px){
  .frise__j b{display:none}
  .frise__j--of{display:none}
  .frise{padding-top:6px}
  .frise__a{margin-top:8px}
  .frise__l{margin-top:8px}
}

/* Le réglage d'isochrone, dans la légende de la carte (lot 7.1). */
.carte-leg__i{display:flex;align-items:center;gap:6px}
.carte-leg__i .seg button{padding:2px 7px;font-size:var(--t-2)}
.carte-leg__i em{font-style:normal;font-size:var(--t-2);color:var(--beton-c);
  font-family:var(--f-data)}
.carte-leg__z{width:11px;height:11px;border-radius:3px;flex:none;
  border:1.5px dashed var(--bleu);background:color-mix(in srgb,var(--bleu) 12%,transparent)}
@supports not (background:color-mix(in srgb,red 10%,transparent)){
  .carte-leg__z{background:var(--bleu-l)}
}

/* =====================================================================
   v0.14, lot 1 — le dossier technique du répondant.

   Une carte par entreprise, en grille : côte à côte tant que la place
   le permet, empilées ensuite. Rien n'est replié — le défaut corrigé
   ici était précisément que ce dossier ne se voyait pas.
   ===================================================================== */
.dost__g{display:grid;gap:var(--r3);align-items:start;
  grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.dost{border:1px solid var(--carte);border-radius:var(--arr);box-shadow:var(--om-c);
  background:var(--surface-2);padding:11px 13px 12px}
.dost__e{font-family:var(--f-titre);font-size:var(--t-3);margin:0 0 8px;
  padding-bottom:7px;border-bottom:1px solid var(--trait-f);color:var(--encre)}
.dost__s{margin-top:9px}
.dost__s:first-of-type{margin-top:0}
.dost__t{display:block;font-size:var(--t-1);letter-spacing:.08em;text-transform:uppercase;
  color:var(--beton-c);margin-bottom:3px}
.dost__t .et{margin-left:6px;letter-spacing:0;text-transform:none}
.dost__p{margin:0;font-size:var(--t-2);line-height:1.55;color:var(--encre-2);
  white-space:pre-wrap}
.dost__s--v{border-left:3px solid var(--bleu);padding-left:9px}
.dost .pieces{margin-top:2px}
.dost .piece{padding:5px 0;gap:8px;flex-wrap:wrap}
/* Dans une carte étroite, un nom de fichier tronqué ne s'identifie
   plus : il passe à la ligne plutôt que de finir en points de suspension. */
.dost .piece a:first-child{font-size:var(--t-2);white-space:normal;overflow-wrap:anywhere;
  flex:1 1 100%}

/* =====================================================================
   v0.14, lot 3 — le transfert : les collègues d'abord.
   ===================================================================== */
.transf__r{margin:0 0 11px;font-size:var(--t-2);color:var(--encre-2);
  border-left:3px solid var(--bleu);padding-left:9px}
.transf__l{display:grid;gap:8px;margin-bottom:12px;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.mbr{display:block;width:100%;text-align:left;cursor:pointer;
  border:1px solid var(--carte);border-radius:var(--arr);box-shadow:var(--om-c);background:var(--blanc);
  padding:9px 11px;transition:border-color var(--duree),box-shadow var(--duree)}
.mbr:hover{border-color:var(--encre)}
.mbr b{display:block;font-size:var(--t-2);color:var(--encre)}
.mbr__r{display:block;font-size:var(--t-2);color:var(--beton);margin-top:1px}
.mbr__e{display:block;font-size:var(--t-2);color:var(--beton-c);margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mbr[aria-pressed="true"]{border-color:var(--signal);background:var(--signal-l);
  box-shadow:0 0 0 2px rgba(236,102,8,.16)}
.mbr--i{border-style:dashed}
.transf__x{border-top:1px solid var(--trait-f);padding-top:10px;margin-top:2px}
/* Un dépliant discret : c'est le SECOND choix, il ne doit pas peser
   autant qu'un bouton. */
.lienb{background:none;border:0;padding:0;cursor:pointer;font:inherit;
  font-size:var(--t-2);color:var(--bleu);text-align:left}
.lienb:hover{text-decoration:underline}


/* =====================================================================
   Le planning du répondant — v0.14, remonté ici en v0.15 (lot 4).

   Ces règles vivaient dans un bloc <style> de `public/repondre.html`.
   C'était une entorse au principe n° 1 de cette feuille : les couleurs
   n'y sont des RÔLES qu'ici, et c'est ce qui fait suivre le thème sombre
   sans un mot de plus. Une règle isolée dans une page échappe à cette
   garantie — et il aurait fallu la dupliquer le jour où le donneur
   d'ordre afficherait le planning reçu avec une offre.

   Aucune valeur n'a changé au passage : seule l'indentation est reprise.
   ===================================================================== */
/* v0.25 (recette) — `overflow-x:auto` rend aussi l'axe vertical
   défilant : 183 px de contenu pour 180 de cadre, trois pixels de
   défilement imbriqué (§2.22). Le cadre ne défile qu'en largeur. */

/* =====================================================================
   v0.15 — L'ANALYSE DES OFFRES.
   ===================================================================== */

/* --- lot A.3 : les pastilles de réserves, toutes du même gabarit -----
   Trois états, trois textes de longueurs différentes, une seule
   largeur. Ce qui distingue « tout accepté » de « 3 réserves », c'est
   la couleur — pas la taille : une pastille plus large attire l'œil
   pour une raison qui n'a rien à voir avec l'information. */
.pastille{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  width:112px;min-height:30px;padding:5px 8px;border-radius:var(--arr-p);
  font-family:var(--f-texte);font-size:var(--t-2);font-weight:600;white-space:nowrap;
  border:1px solid transparent;background:var(--trait-f);color:var(--beton)}
.pastille--b{cursor:pointer;transition:filter var(--duree)}
.pastille--b:hover{filter:brightness(.96)}
.pastille--b:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.pastille--v{background:var(--vert);color:var(--sur-vert)}
.pastille--a{background:var(--ambre-l);color:var(--ambre);border-color:var(--ambre)}
.pastille--r{background:var(--rouge-l);color:var(--rouge);border-color:var(--rouge)}
.pastille--n{background:none;border-color:var(--trait);color:var(--beton)}
.pastille__k{width:13px;height:13px;flex:none}
.pastille__p{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}

/* --- l'accroche : le chiffre dans une phrase, pas dans une case ------
   Lot 3 du brief de refonte : « la mise en valeur d'un mot dans une
   phrase — le chiffre qui compte dans une phrase de contexte, plutôt
   qu'un nombre nu dans un tableau ». */
.accroche{margin:0 0 var(--r4);font-size:var(--t-3);line-height:1.7;color:var(--encre-2);
  max-width:78ch}
.accroche__n{font-family:var(--f-data);font-size:var(--t-6);font-weight:700;color:var(--ambre);
  line-height:1;margin-right:3px}
.accroche b{color:var(--encre);font-weight:600}
.accroche__s{display:block;font-size:var(--t-2);color:var(--beton);margin-top:3px}

/* --- lot C : la marge de négociation ---------------------------------
   Court dans la zone de décision ; l'explication se déplie sous le
   bouton « i ». */
.marge{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--r3);
  padding:12px 15px;margin-bottom:var(--r4);border-radius:var(--arr);
  background:var(--vert-l);border-left:3px solid var(--vert)}
.marge__n{font-family:var(--f-data);font-size:var(--t-6);font-weight:700;color:var(--vert);
  line-height:1.1;flex:none}
.marge > span{flex:1 1 320px;font-size:var(--t-2);line-height:1.6;color:var(--encre-2)}
.marge > span b{color:var(--encre)}
.marge--z{background:var(--surface-2);border-left-color:var(--beton)}
.marge--z .marge__n{color:var(--beton)}
.marge--non{background:var(--ambre-l);border-left-color:var(--ambre)}
.marge--non > b{color:var(--ambre);flex:none}
.marge__i{width:20px;height:20px;flex:none;margin-left:7px;vertical-align:-3px;
  border-radius:50%;border:1px solid currentColor;background:none;color:var(--encre-2); /* v0.22.1 — le gris 3 tombait à 4,47:1 sur la surface grise de la négociation */
  font-family:var(--f-data);font-size:var(--t-2);font-weight:700;line-height:1;cursor:pointer}
.marge__i:hover{background:var(--blanc);color:var(--encre)}
.marge__i:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
/* L'explication est un BLOC, pas quatre éléments flexibles. Posés
   directement dans le flex, les paragraphes étaient bornés par leur
   `max-width` de lecture (~610 px), deux tenaient sur une ligne, et le
   texte se rangeait en colonnes irrégulières. Un conteneur qui prend
   toute la largeur, et des paragraphes qui s'empilent dedans. */
.marge__x{flex:0 0 100%;width:100%;margin-top:9px;padding-top:9px;
  border-top:1px solid rgba(var(--ombre-c),.10)}
.marge__d{margin:0;font-size:var(--t-2);line-height:1.65;color:var(--encre-2);max-width:88ch}
.marge__d + .marge__d{margin-top:7px}

/* --- v0.15, lot B : le chemin hors plateforme, déconseillé ------------
   On ne bloque pas — quelqu'un qui a l'offre en main doit pouvoir
   l'enregistrer — mais on cesse de traiter ce chemin comme neutre. Le
   ton est celui d'un avertissement, pas d'une erreur : rien n'est cassé,
   c'est une occasion manquée. */
.hp{border:1px solid var(--ambre);border-left-width:3px;border-radius:var(--arr);
  background:var(--ambre-l);padding:12px 15px;margin-top:var(--r3);
  transition:box-shadow var(--duree)}
.hp--dest{margin:0 0 var(--r3)}
.hp__t{display:block;font-size:var(--t-3);color:var(--ambre);margin-bottom:5px}
.hp__p{margin:0 0 7px;font-size:var(--t-2);line-height:1.6;color:var(--encre-2);max-width:96ch}
.hp__p b{color:var(--encre)}
.hp__a{display:flex;flex-wrap:wrap;gap:7px;align-items:center}

/* =====================================================================
   v0.15, lot 2 — LE TABLEAU DE BORD DE L'ACCUEIL.

   Deux colonnes : les chantiers et leur carte à gauche, ce qui arrive et
   ce qui vient de se passer à droite. Sur un espace peu rempli, ce sont
   les blocs vides qui portent l'information — ils orientent au lieu de
   laisser un blanc.
   ===================================================================== */
.tb{margin-bottom:var(--r5)}
/* v0.24, lot D — la salutation. Une ligne, pas un titre : elle nomme,
   elle ne prend pas la place de ce qui décide la journée. */
.tb__b{margin:0 0 var(--r3);font-size:var(--t-4);font-weight:600;color:var(--encre)}
.tb__bm{font-weight:400;color:var(--beton-c)}
.tb__g{display:grid;gap:var(--r3);grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:start}
@media(max-width:1000px){.tb__g{grid-template-columns:minmax(0,1fr)}}
.tb__d{display:grid;gap:var(--r3)}
.tb__c{background:var(--blanc);border:1px solid var(--carte);border-radius:var(--arr);box-shadow:var(--om-c);
  padding:var(--r3) var(--r4) var(--r4)}
.tb__c .legende{margin-top:0}
.tb__c--amorce{border-color:var(--signal);background:var(--signal-l)}

/* La carte : une hauteur fixe, sinon elle s'effondre à zéro — Leaflet
   mesure son conteneur au montage. */
.carte--tb{height:230px;margin-bottom:0}
/* v0.22.1, lot C — la carte des chantiers en tête, repliable, à hauteur fixe. */
.tb--carte{border:1px solid var(--carte);border-radius:var(--arr);box-shadow:var(--om-c);background:var(--blanc);padding:0;margin:0 0 var(--r4)}
.tb--carte>summary.tb__sum{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 14px;cursor:pointer;list-style:none}
.tb--carte>summary.tb__sum::-webkit-details-marker{display:none}
.tb--carte[open]>summary.tb__sum{border-bottom:1px solid var(--trait)}
.tb--carte .tb__g{padding:var(--r3);margin:0}
.tb--carte .tb__c{border:0;box-shadow:none;padding:0;background:none}

.tb__l{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.tb__l li{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;
  padding:6px 0;border-bottom:1px solid var(--trait-f)}
.tb__l li:last-child{border-bottom:0}
.tb__ch{background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left;
  cursor:pointer;flex:1 1 auto;min-width:0}
.tb__ch b{font-size:var(--t-2);display:block}
/* v0.24.1 — sous la carte, la liste des noms tient sur une ligne : la cible
   tactile reste de 44 px. */
.tb__l--sous .tb__ch{min-height:44px;display:flex;align-items:center}
.tb__ch span{font-size:var(--t-2);color:var(--beton)}
.tb__ch:hover b{color:var(--signal-d);text-decoration:underline}
.tb__ch:focus-visible{outline:2px solid var(--signal);outline-offset:2px;border-radius:3px}
/* v0.24.1, lot A3 — la ligne que le repère survolé désigne, et l'inverse. */
.tb__ch--vise b{color:var(--signal-d);text-decoration:underline}
.tb__n{font-family:var(--f-data);font-size:var(--t-2);color:var(--beton)}
.tb__l .tb__n{flex:0 0 100%}   /* v0.22.1 — dans la liste, toujours sous le nom, jamais coupé au bord de la carte */
.tb--carte>summary.tb__sum .ajd__x{margin-left:auto}

/* Ce qui arrive : une ligne par échéance, le reste à courir aligné. */
.tb__e,.tb__a{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.tb__ei{display:flex;align-items:baseline;gap:10px;padding:6px 0 6px 9px;
  border-bottom:1px solid var(--trait-f);border-left:3px solid transparent}
.tb__ei:last-child{border-bottom:0}
.tb__ei--r{border-left-color:var(--rouge)}
.tb__ei--a{border-left-color:var(--ambre)}
.tb__ei--v{border-left-color:var(--vert)}
.tb__eb{background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left;
  cursor:pointer;flex:1 1 auto;min-width:0;display:flex;align-items:baseline;gap:8px}
.tb__eb b{font-size:var(--t-2);flex:none}
.tb__eb span{font-size:var(--t-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb__eb:hover span{color:var(--signal-d);text-decoration:underline}
.tb__eb:focus-visible{outline:2px solid var(--signal);outline-offset:2px;border-radius:3px}
.tb__ej{font-size:var(--t-2);color:var(--beton);white-space:nowrap;flex:none}
.tb__ei--r .tb__ej{color:var(--rouge);font-weight:600}
.tb__ei--a .tb__ej{color:var(--ambre);font-weight:600}
.tb__eo{font-size:var(--t-2);color:var(--beton-c);white-space:nowrap;flex:none;min-width:76px;
  text-align:right}
/* Une ligne de flex ne descend jamais sous la largeur de ses éléments :
   trois textes en `nowrap` côte à côte imposaient 487 px au bloc, qui
   poussait la page entière au-delà de l'écran à 390 px. L'objet se
   tronque, et à l'étroit la ligne passe sur deux étages. */
.tb__eb{min-width:0}
@media(max-width:520px){
  .tb__ei{flex-wrap:wrap}
  .tb__eb{flex:1 1 100%}
  .tb__eo{min-width:0;text-align:left;margin-left:auto}
}

/* L'activité : une pastille de sens, la ligne, la date. */
.tb__a li{display:flex;align-items:baseline;gap:9px;padding:5px 0;
  border-bottom:1px solid var(--trait-f)}
.tb__a li:last-child{border-bottom:0}
.tb__ap{width:7px;height:7px;border-radius:50%;background:var(--beton-c);flex:none;
  transform:translateY(-1px)}
.tb__ap--o{background:var(--ambre)}
.tb__ap--v{background:var(--vert)}
.tb__ap--r{background:var(--rouge)}
.tb__ab{background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left;
  cursor:pointer;flex:1 1 auto;min-width:0;font-size:var(--t-2);line-height:1.45}
.tb__ab b{font-size:var(--t-2);color:var(--beton)}
.tb__ab:hover{color:var(--signal-d)}
.tb__ab:focus-visible{outline:2px solid var(--signal);outline-offset:2px;border-radius:3px}
.tb__ad{font-size:var(--t-2);color:var(--beton-c);white-space:nowrap;flex:none}

/* Pour bien démarrer : ce qui manque, nommé, avec le geste à côté. */
.tb__m{list-style:none;margin:0;padding:0;display:grid;gap:var(--r3)}
.tb__m li{display:grid;gap:3px}
.tb__m b{font-size:var(--t-2)}
.tb__m span{font-size:var(--t-2);color:var(--encre-2);line-height:1.55}
.tb__m .btn{justify-self:start;margin-top:3px}

/* Un écran vide est un écran à part entière : il dit ce qui manque et
   ce que ça change, il n'affiche pas « Aucun résultat » et ne laisse
   pas un blanc. Moins haut que le vide de pleine page, parce qu'il vit
   dans un bloc. */
.vide--tb{padding:var(--r4) var(--r2);text-align:left;line-height:1.6}
.vide--tb b{font-size:var(--t-3);margin-bottom:4px}
.vide--tb .btn{margin-top:var(--r2)}

/* --- v0.15, lot 3 : le curseur des valeurs bornées --------------------
   `<input type="range">` natif, habillé aux jetons de la charte. La
   valeur est écrite à côté, en chasse fixe : un curseur seul ne se lit
   pas au chiffre près. La borne, en dessous, dit où la course s'arrête
   et pourquoi. */
.curs{display:inline-flex;align-items:center;gap:11px;flex-wrap:wrap;
  min-width:236px;flex:0 1 330px}
.curs__i{-webkit-appearance:none;appearance:none;flex:1 1 130px;min-width:110px;
  height:22px;background:none;cursor:pointer;margin:0;padding:0;border:0}
.curs__i::-webkit-slider-runnable-track{height:5px;border-radius:3px;
  background:var(--trait);border:0}
.curs__i::-moz-range-track{height:5px;border-radius:3px;background:var(--trait);border:0}
.curs__i::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:19px;height:19px;border-radius:50%;background:var(--signal-btn);
  border:2px solid var(--blanc);box-shadow:0 1px 3px rgba(var(--ombre-c),.30);
  margin-top:-7px}
.curs__i::-moz-range-thumb{width:19px;height:19px;border-radius:50%;
  background:var(--signal-btn);border:2px solid var(--blanc);
  box-shadow:0 1px 3px rgba(var(--ombre-c),.30)}
.curs__i:focus-visible{outline:none}
.curs__i:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--anneau)}
.curs__i:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px var(--anneau)}
.curs__v{font-size:var(--t-3);font-weight:700;color:var(--encre);white-space:nowrap;
  min-width:76px}
.curs__b{flex:1 1 100%;font-size:var(--t-2);color:var(--beton);font-family:var(--f-texte)}

/* =====================================================================
   v0.16, lot B — LE RÉCAPITULATIF DE SÉLECTION.

   Il ne ressemble à aucun autre bloc de l'écran, et c'est voulu : c'est
   le seul qui porte une DÉCISION. Un filet de signal à gauche, un fond
   de surface, et deux boutons en tête — relâcher, ou attribuer.

   Aucune couleur d'alerte : pressentir n'est ni un succès ni un danger,
   c'est un état de travail. Le vert est réservé au bouton qui engage.
   ===================================================================== */
.sel{border-left:3px solid var(--signal);background:var(--surface-2);
  padding-left:calc(var(--r4) - 3px)}
.sel__h{display:flex;flex-wrap:wrap;gap:var(--r3);align-items:center;
  justify-content:space-between;margin-bottom:6px}
.sel__n{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;min-width:0}
.sel__n b{font-size:var(--t-5);color:var(--encre)}
.sel__v{font-size:var(--t-2);color:var(--beton)}
.sel__d{display:flex;gap:var(--r2);flex-wrap:wrap}
.sel__a{margin:0 0 var(--r3);max-width:82ch}

/* Les quatre chiffres de la décision. `minmax(0,1fr)` et non `1fr` :
   un montant long imposerait sinon sa largeur à la grille entière. */
.sel__g{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
  gap:1px;background:var(--trait-f);border:1px solid var(--trait-f);
  border-radius:var(--arr);overflow:hidden;margin-bottom:var(--r3)}
.sel__s{background:var(--blanc);padding:10px 13px;min-width:0}
.sel__sl{display:block;font-size:var(--t-1);font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--beton);margin-bottom:3px}
.sel__sv{display:block;font-size:var(--t-3);color:var(--encre);min-width:0;
  overflow-wrap:anywhere}
.sel__sv .th__s{display:block;font-size:var(--t-2);color:var(--beton);font-weight:400;
  margin-top:2px}

/* Les points durs : ce qu'on emporte au téléphone. */
.sel__pts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
  gap:var(--r3);margin-bottom:var(--r3)}
.sel__p{min-width:0}
.sel__pl{display:block;font-size:var(--t-1);font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--beton);margin-bottom:5px}
.sel__l{margin:0;padding-left:17px;font-size:var(--t-2);line-height:1.65}
.sel__l i{color:var(--beton)}
.sel__t{margin:0 0 4px;font-size:var(--t-2);font-style:italic;color:var(--encre-2)}
.sel__ok,.sel__ko{margin:0;font-size:var(--t-2)}
.sel__ok{color:var(--beton)}
.sel__ko{color:var(--ambre)}

/* Les coordonnées. Le téléphone est un lien : sur mobile il compose. */
.sel__co{margin-bottom:var(--r3)}
.sel__cl{display:flex;flex-wrap:wrap;gap:6px}
.sel__ci{font-size:var(--t-2);padding:5px 10px;border-radius:var(--arr-p);
  background:var(--blanc);border:1px solid var(--trait);color:var(--encre-2)}
.sel__ci--a{color:var(--signal);text-decoration:none}
.sel__ci--a:hover{border-color:var(--signal)}
.sel__ci--x{color:var(--beton);font-style:italic;border-style:dashed}

/* Le motif : c'est lui, la trace. Il occupe la place qu'il mérite. */
.sel__m textarea{width:100%;font-family:var(--f-texte);font-size:var(--t-2);line-height:1.55;
  padding:9px 11px;border:1px solid var(--trait);border-radius:var(--arr-s);
  background:var(--blanc);color:var(--encre);resize:vertical}
.sel__m textarea:focus-visible{outline:2px solid var(--signal);outline-offset:1px}
.sel__mb{display:flex;flex-wrap:wrap;gap:var(--r2);align-items:center;margin-top:6px}

/* =====================================================================
   v0.16, lot C — LA NÉGOCIATION.

   Elle vit DANS le récapitulatif de sélection, repliée par défaut :
   c'est une étape optionnelle, et une étape optionnelle dépliée d'office
   se lit comme une étape obligatoire. Le mot « optionnelle » est écrit
   en toutes lettres à côté du bouton, pas seulement suggéré par le pli.
   ===================================================================== */
.neg{border-top:1px solid var(--trait-f);padding-top:var(--r3);margin-bottom:var(--r3)}
.neg__h{display:flex;flex-wrap:wrap;gap:var(--r2);align-items:center}
.neg__h .sel__pl{margin:0;flex:0 0 auto}
.neg__o{font-size:var(--t-2);color:var(--beton);font-style:italic;flex:1 1 auto}
.neg__h .et{flex:0 0 auto}
.neg__h .btn{margin-left:auto}

/* Ce qui a déjà été demandé. Une demande sans réponse n'est pas un
   échec : c'est un état, et il porte le bouton qui le referme. */
.neg__l{list-style:none;margin:var(--r3) 0 0;padding:0;display:grid;gap:6px}
.neg__i{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;font-size:var(--t-2);
  padding:9px 11px;background:var(--blanc);border:1px solid var(--trait-f);
  border-radius:var(--arr-s)}
.neg__d{font-family:var(--f-data);font-size:var(--t-2);color:var(--beton);min-width:78px}
.neg__q{font-size:var(--t-2);color:var(--beton)}
.neg__r{flex:1 1 100%;font-size:var(--t-2);color:var(--encre-2)}
.neg__t{flex:1 1 100%;font-size:var(--t-2);font-style:italic;color:var(--beton)}
.neg__i .btn{margin-left:auto}

/* Le formulaire. Il ne s'ouvre que demandé. */
.neg__f{margin-top:var(--r3);padding:var(--r3);background:var(--blanc);
  border:1px solid var(--trait-f);border-radius:var(--arr)}
.neg__s{margin:0 0 var(--r3);font-size:var(--t-2);line-height:1.65;color:var(--encre-2);
  max-width:86ch}
.neg__s b{color:var(--encre)}
.neg__x{margin:0 0 8px}
.neg__g{display:flex;flex-wrap:wrap;gap:var(--r3);align-items:flex-end;
  margin-bottom:var(--r3)}
.neg__c{display:flex;flex-direction:column;gap:3px;min-width:0;flex:0 1 220px}
.neg__c span{font-size:var(--t-1);font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--beton)}
/* L'unité est COLLÉE au champ, pas dessous : « 4462 » suivi d'un « € HT »
   à la ligne suivante se lit comme deux informations séparées. */
.neg__z{display:flex;align-items:center;gap:7px;min-width:0}
.neg__c input{font-family:var(--f-data);font-size:var(--t-3);padding:7px 10px;min-width:0;
  flex:1 1 auto;width:100%;text-align:right;
  border:1px solid var(--trait);border-radius:var(--arr-s);
  background:var(--blanc);color:var(--encre)}
.neg__c input:focus-visible{outline:2px solid var(--signal);outline-offset:1px}
.neg__c i{font-style:normal;font-size:var(--t-2);color:var(--beton);white-space:nowrap;
  flex:0 0 auto}
/* La bascule montant/taux s'aligne sur le champ, pas sur son bas. */
.neg__g .seg{align-self:center}

/* L'ordre : deux choix côte à côte, avec leur conséquence écrite. Ni
   liste déroulante ni case à cocher — le texte EST le choix. */
.neg__o2{margin-bottom:var(--r3)}
.neg__k{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));
  gap:var(--r2)}
.neg__ch{text-align:left;font:inherit;cursor:pointer;min-width:0;
  padding:10px 12px;border-radius:var(--arr-s);
  border:1px solid var(--trait);background:var(--surface-2);color:var(--encre-2)}
.neg__ch b{display:block;font-size:var(--t-2);color:var(--encre);margin-bottom:3px}
.neg__ch span{display:block;font-size:var(--t-2);line-height:1.55;color:var(--beton)}
.neg__ch:hover{border-color:var(--encre-3)}
.neg__ch:focus-visible{outline:2px solid var(--signal);outline-offset:1px}
.neg__ch[aria-pressed="true"]{border-color:var(--signal);background:var(--blanc);
  box-shadow:inset 3px 0 0 var(--signal)}

/* Le délai. Ambre quand il ne reste pas de quoi préparer le chantier. */
.neg__j{margin:0 0 var(--r3);font-size:var(--t-2);line-height:1.6;color:var(--encre-2);
  padding:9px 12px;border-radius:var(--arr-s);background:var(--surface-2);
  border-left:3px solid var(--trait)}
.neg__j--a{background:var(--ambre-l);border-left-color:var(--ambre);color:var(--ambre)}
.neg__j b{color:inherit}

/* L'avis : les chiffres d'abord, la phrase ensuite, et sa source dite. */
.neg__ia{margin-bottom:var(--r3);display:flex;flex-wrap:wrap;gap:var(--r2);
  align-items:center}
.neg__av{list-style:none;margin:0;padding:0;display:grid;gap:5px;flex:1 1 100%}
.neg__a{font-size:var(--t-2);line-height:1.6;padding:8px 11px;border-radius:var(--arr-s);
  border-left:3px solid var(--trait);background:var(--surface-2);color:var(--encre-2)}
.neg__a--a{background:var(--ambre-l);border-left-color:var(--ambre);color:var(--ambre)}
.neg__ko{font-size:var(--t-2);color:var(--ambre);flex:1 1 100%}

.neg__f textarea{width:100%;font-family:var(--f-texte);font-size:var(--t-2);line-height:1.55;
  padding:9px 11px;border:1px solid var(--trait);border-radius:var(--arr-s);
  background:var(--blanc);color:var(--encre);resize:vertical}
.neg__f textarea:focus-visible{outline:2px solid var(--signal);outline-offset:1px}
.neg__b{display:flex;flex-wrap:wrap;gap:var(--r2);align-items:center;margin-top:var(--r3)}

/* =====================================================================
   v0.16, lot D — L'ATTRIBUTION : CE QU'ELLE FIGE, ET CE QU'ELLE ENVOIE.
   ===================================================================== */
.fige{border-left:3px solid var(--trait);padding-left:calc(var(--r4) - 3px)}
.fige__a{margin:0 0 var(--r3);max-width:86ch}
.fige__g{display:flex;flex-wrap:wrap;gap:var(--r3);align-items:flex-end;
  margin-bottom:var(--r3)}
.fige__k{margin:0 0 var(--r3);font-size:var(--t-2);line-height:1.6;color:var(--ambre);
  padding:9px 12px;border-radius:var(--arr-s);background:var(--ambre-l);
  border-left:3px solid var(--ambre);max-width:86ch}
.fige__n{display:block}
.fige__n textarea{width:100%;font-family:var(--f-texte);font-size:var(--t-2);line-height:1.55;
  padding:9px 11px;border:1px solid var(--trait);border-radius:var(--arr-s);
  background:var(--blanc);color:var(--encre);resize:vertical;margin-top:4px}
.fige__n textarea:focus-visible{outline:2px solid var(--signal);outline-offset:1px}
/* Les réserves : case, puis texte. Le texte n'est pas dans le <label>
   de la case — la bascule habillée du produit occupe déjà ce <label>. */
.fige__r{display:grid;grid-template-columns:auto 1fr;gap:8px var(--r2);
  align-items:center;margin-bottom:var(--r3)}
.fige__ct{font-size:var(--t-2);color:var(--encre)}
.fige__d{margin-bottom:var(--r3);flex:0 1 220px}
.fige__p{margin:0;font-size:var(--t-2);line-height:1.6;color:var(--encre);
  padding:11px 13px;border-radius:var(--arr-s);background:var(--surface-2);
  border:1px dashed var(--trait);max-width:86ch}
.fige__b{margin-bottom:var(--r3)}

/* Un mail par entreprise non retenue. */
.nr{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.nr__i{border:1px solid var(--trait-f);border-radius:var(--arr-s);
  background:var(--blanc);padding:10px 12px}
.nr__h{display:flex;flex-wrap:wrap;gap:8px;align-items:center;min-width:0}
.nr__h b{font-size:var(--t-2);color:var(--encre)}
.nr__e{font-size:var(--t-2);color:var(--beton);overflow-wrap:anywhere;min-width:0}
.nr__e--x{color:var(--ambre);font-style:italic}
.nr__s{font-size:var(--t-2);color:var(--beton);font-family:var(--f-data)}
.nr__h .btn{margin-left:auto}
.nr__t{width:100%;margin-top:8px}

/* =====================================================================
   v0.16, lot E — LA DÉSATTRIBUTION.

   « Bloquante, et sérieuse — sans être théâtrale. » Ce qui veut dire :
   pas de rouge partout, pas de bordures épaisses, pas de pictogramme
   d'alerte. Le sérieux vient du TEXTE et de l'ordre des blocs — le
   téléphone avant le formulaire, le cas avant tout le reste, les
   conséquences avant le bouton — pas de la couleur.

   L'ambre n'apparaît qu'à un seul endroit : la ligne qui annonce une
   trace d'antériorité. C'est la seule conséquence irréversible de
   l'écran, et c'est la seule qui se colore.
   ===================================================================== */
.da-tel{display:flex;flex-wrap:wrap;gap:var(--r3);align-items:center;
  margin-bottom:var(--r4)}
.da-tel__x{font-size:var(--t-2);color:var(--ambre);font-style:italic}

/* Les quatre cas. Des cartes, pas une liste déroulante : chaque cas
   porte sa conséquence, et une liste déroulante les cacherait toutes
   sauf une — au moment précis où il faut les comparer. */
.da-cas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));
  gap:var(--r2)}
.da-c{text-align:left;font:inherit;cursor:pointer;min-width:0;
  padding:12px 14px;border-radius:var(--arr-s);
  border:1px solid var(--trait-b);background:var(--blanc);color:var(--encre-2);
  display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch}   /* v0.22.1 — un bouton centre son contenu : « Rectification », plus court, flottait au milieu de sa carte ; tout part du haut */
.da-c b{display:block;font-size:var(--t-3);color:var(--encre);margin-bottom:4px}
.da-c span{display:block;font-size:var(--t-2);line-height:1.55;color:var(--beton);
  margin-bottom:7px}
.da-c__t{display:inline-block;font-style:normal;font-size:var(--t-1);font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border-radius:var(--arr-p);
  background:var(--surface-2);color:var(--beton)}
.da-c__t--o{background:var(--ambre-l);color:var(--ambre)}
.da-c:hover{border-color:var(--encre-3)}
.da-c:focus-visible{outline:2px solid var(--signal);outline-offset:1px}
.da-c[aria-pressed="true"]{border-color:var(--encre);background:var(--surface-2);
  box-shadow:inset 3px 0 0 var(--encre)}

/* Les conséquences, annoncées avant l'action. */
.da-cons{border-left:3px solid var(--trait);padding-left:calc(var(--r4) - 3px)}
.da-l{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:var(--t-2);
  line-height:1.65;color:var(--encre-2)}
.da-l b{color:var(--encre)}
.da-l--o{padding:10px 13px;border-radius:var(--arr-s);background:var(--ambre-l);
  border-left:3px solid var(--ambre);color:var(--ambre)}
.da-l--o b{color:var(--ambre)}
.da-n{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px}
.da-n li{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;font-size:var(--t-2)}
.da-e{font-size:var(--t-2);color:var(--beton);overflow-wrap:anywhere;min-width:0}
.da-e--x{color:var(--ambre);font-style:italic}
.da-opt{font-size:var(--t-2);font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--beton);font-style:italic}

/* La jauge du motif : elle dit ce qui manque, pas « invalide ». */
.da-jauge{margin-top:6px;font-size:var(--t-2);color:var(--ambre)}
.da-jauge--ok{color:var(--vert)}
.da-mail{overflow:visible}   /* v0.22.1 — le mail se lit en entier, il ne défile pas dans un cadre (§2.22) */
.fige__d input[type="date"]{max-width:220px}   /* v0.22.1 — même largeur que les deux autres dates, pas toute la ligne */

/* Ce qui reste après. */
.da-hist{border-left:3px solid var(--trait);padding-left:calc(var(--r4) - 3px)}
.da-hl{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.da-hi{padding:11px 13px;border-radius:var(--arr-s);background:var(--surface-2);
  border:1px solid var(--trait-f)}
.da-hi--o{background:var(--ambre-l);border-color:var(--ambre)}
.da-hh{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.da-hh b{font-size:var(--t-2);color:var(--encre)}
.da-hd{font-size:var(--t-2);color:var(--beton);font-family:var(--f-data)}
.da-hf{font-size:var(--t-2);color:var(--encre-2);margin-left:auto}
.da-hm{margin:6px 0 0;font-size:var(--t-2);line-height:1.6;font-style:italic;color:var(--encre-2)}
.da-hp{margin:6px 0 0;font-size:var(--t-2);line-height:1.6;color:var(--beton)}
.da-hi--o .da-hp b{color:var(--ambre)}

/* Le second tour. */
.da-t2{margin-top:var(--r3);padding-top:var(--r3);border-top:1px solid var(--trait-f)}
.da-t2l{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--r3)}
.da-t2c{cursor:pointer;padding:5px 11px;gap:7px;align-items:center}
.da-t2c input{margin:0;accent-color:var(--signal)}
.da-t2c:has(input:checked){border-color:var(--encre);background:var(--encre);
  color:var(--blanc)}

/* --- v0.16, lot E : l'antériorité sur la fiche fournisseur -----------
   Sobre, et à côté des retours d'expérience : c'est le même sujet vu
   par l'autre bout. Pas de rouge — on rapporte un fait daté, on ne
   prononce pas une sanction. */
.ant{border-left:3px solid var(--ambre);padding-left:calc(var(--r4) - 3px)}
.ant__l{list-style:none;margin:0 0 var(--r3);padding:0;display:grid;gap:8px}
.ant__i{padding:10px 12px;border-radius:var(--arr-s);background:var(--ambre-l);
  border:1px solid var(--ambre)}
.ant__h{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.ant__h b{font-size:var(--t-2);color:var(--ambre);font-family:var(--f-data)}
.ant__d{font-size:var(--t-2);color:var(--ambre);font-family:var(--f-data);margin-left:auto}
.ant__m{margin:5px 0 0;font-size:var(--t-2);line-height:1.6;color:var(--encre-2)}
.ant__c{margin:5px 0 0;font-size:var(--t-2);font-style:italic;color:var(--beton)}
.ant__a{margin:0;max-width:86ch}

/* =====================================================================
   v0.16, lot F — L'ÉCRAN ÉTROIT.

   « L'écran mobile actuel est l'écran de bureau avec un défilement
   horizontal. » Trois réponses, et aucune n'est un rétrécissement :

   1. La liste des consultations devient des CARTES (le HTML change, pas
      seulement sa mise en page — voir `mediaEtroit()` dans app.html).
   2. Le comparatif s'ouvre en vue POINTS, la seule qui ne dépende pas
      de la largeur.
   3. Là où le défilement horizontal reste (vues Prix et Écart), il est
      ANNONCÉ : un dégradé au bord droit, et une phrase qui dit combien
      d'offres attendent.
   ===================================================================== */

/* --- la bande de filtres, avec le chantier qui s'y cumule ----------- */
.sous__ch{margin-left:auto;display:flex;align-items:center;padding-left:var(--r2)}
.sous__ch .cmp-sel{max-width:220px}
.lien{font:inherit;font-size:inherit;background:none;border:0;padding:0;cursor:pointer;
  color:var(--signal);text-decoration:underline;text-underline-offset:2px}
.lien:focus-visible{outline:2px solid var(--signal);outline-offset:2px}

/* --- les cartes de consultation, sous 700 px ------------------------ */
.cl{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cl__i{border:1px solid var(--carte);border-radius:var(--arr);box-shadow:var(--om-c);background:var(--blanc);
  overflow:hidden}
/* La carte entière est le bouton : la cible tactile est la carte, pas
   un lien de deux millimètres dans un coin. */
.cl__b{display:block;width:100%;text-align:left;font:inherit;color:inherit;
  background:none;border:0;padding:12px 14px;cursor:pointer}
.cl__b:hover{background:var(--surface-2)}
.cl__b:focus-visible{outline:2px solid var(--signal);outline-offset:-2px}
.cl__t{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:6px}
.cl__r{font-size:var(--t-2);color:var(--beton);letter-spacing:.02em}
.cl__o{display:block;font-size:var(--t-3);line-height:1.35;color:var(--encre);margin-bottom:4px}
.cl__c{display:block;font-size:var(--t-2);color:var(--beton);margin-bottom:4px}
.cl__d{display:inline-block;font-family:var(--f-data);font-size:var(--t-2)}
.cl__a{display:block;width:calc(100% - 28px);margin:0 14px 12px;text-align:center}

/* --- le défilement du comparatif, annoncé -------------------------- */
.cmp-glisse{display:none;margin:0 0 6px;font-size:var(--t-2);color:var(--beton)}
.cmp-glisse span::after{content:' ›››';letter-spacing:.14em;color:var(--encre-3)}

@media (max-width: 700px){
  .cmp-glisse{display:block}
  /* Le dégradé de bord : il dit qu'il y a une suite. Posé sur le cadre
     et non sur le tableau, pour ne pas défiler avec lui — un indicateur
     qui part avec le contenu qu'il annonce ne sert à rien. */
  .cmp-cadre{position:relative}
  .cmp-cadre::after{content:'';position:sticky;float:right;top:0;right:0;
    width:22px;height:100%;pointer-events:none;
    background:linear-gradient(to right,transparent,var(--blanc))}
  .cmp-outils{padding:9px 10px;gap:var(--r2) var(--r3)}
  .cmp-outils__g{flex:1 1 100%}
  .cmp-outils__g--w{border-top:1px solid var(--trait-f);padding-top:var(--r2)}
  /* Les puces au doigt : 34 px de haut, et la croix garde sa propre
     cible — un doigt qui rate la croix change la référence, ce qui se
     défait d'un appui. */
  .cmp-chip__n,.cmp-chip__x{min-height:34px}
  .cmp-chip__x{padding-left:12px;padding-right:12px}
  /* Le récapitulatif de sélection et l'attribution : une colonne. */
  .sel__g,.sel__pts,.fige__g,.neg__g,.neg__k{grid-template-columns:1fr;display:grid}
  .sel__d,.neg__b,.fige__g{width:100%}
  .sel__d .btn,.neg__b .btn{flex:1 1 auto}
  .neg__c{flex:1 1 100%}
  .da-cas{grid-template-columns:1fr}
}

/* =====================================================================
   v0.17, lot B — LE COMPARATIF DE BASE.

   Une seule question, une seule réponse : laquelle, et combien coûte le
   fait de choisir autrement. Le comparatif ligne à ligne existe toujours
   — il est devenu le second niveau.

   La règle de forme qui gouverne tout le bloc : LE MONTANT ET L'ÉCART
   NE DOIVENT PAS SE RESSEMBLER. Le montant servira au contrat, l'écart
   sert à décider ; les confondre du coin de l'œil, c'est prendre un
   chiffre indicatif pour un engagement. D'où deux traitements qui n'ont
   rien en commun : chasse fixe sombre alignée à droite d'un côté,
   pastille arrondie à fond teinté de l'autre.
   ===================================================================== */
/* v0.18 — fond blanc et non plus teinté : la phrase est LA RÉPONSE, pas
   une alerte, et un fond rose se lit comme une alerte. Le trait terre
   cuite suffit à la distinguer. */
.cb__p{margin:0 0 var(--r4);font-size:var(--t-4);line-height:1.55;color:var(--encre);
  padding:14px 16px;background:var(--blanc);border:1px solid var(--trait);
  border-left:3px solid var(--signal);border-radius:var(--arr-s);max-width:80ch}
.cb__p .data{font-family:var(--f-data);font-weight:700;font-size:var(--t-3)}
/* v0.18 — la liste classée (.cb__l en grille, .cb__i, .cb__r, .cb__n)
   est remplacée par les cartes du tableau de décision (.dec, .oc), plus
   bas. Les classes qui portent un SENS — la phrase, le montant, l'écart,
   les mots, le pied — sont conservées sur les cartes : ce sont les mêmes
   rôles. */
/* LE MONTANT — il servira au contrat. */
.cb__m{font-family:var(--f-data);font-size:var(--t-4);color:var(--encre);white-space:nowrap;
  text-align:right}
.cb__ms{display:block;font-size:var(--t-2);color:var(--beton);font-weight:400}
/* L'ÉCART — il sert à décider, et il est arrondi. */
.cb__e{font-family:var(--f-data);font-size:var(--t-2);font-weight:700;white-space:nowrap;
  padding:3px 9px;border-radius:var(--arr-p);background:var(--ambre-l);color:var(--ambre)}
.cb__e--0{background:var(--vert-l);color:var(--vert)}
/* Sous le seuil : ni vert ni ambre. Ce n'est pas une bonne nouvelle, ce
   n'est pas un signal — c'est un non-événement, et il se dit en mots. */
.cb__e--p{background:var(--surface-2);color:var(--beton);font-weight:400}
.cb__s{font-size:var(--t-2);line-height:1.5;color:var(--beton)}
.cb__s b{color:var(--ambre);font-weight:600}
.cb__pied{margin:var(--r3) 0 0;font-size:var(--t-2);line-height:1.6;color:var(--beton);
  max-width:86ch}
.cb__pied b{color:var(--encre)}
.cb__d{display:flex;flex-wrap:wrap;gap:var(--r3);align-items:center;
  margin-top:var(--r4);padding-top:var(--r3);border-top:1px solid var(--trait-f);
  max-width:900px}


/* =====================================================================
   v0.17, lot C — L'ALIGNEMENT TECHNIQUE, EXPLIQUÉ.

   L'encart porte une phrase qui doit rester lisible même survolée :
   le montant aligné n'est le prix de personne. Le reste est un détail
   de comptes — quel poste, à quel prix, et laquelle des deux natures de
   trou on regarde.

   Le fond est neutre, pas alarmant : aligner n'est pas accuser. Ce qui
   se colore, c'est la nature du trou, et seulement à l'endroit où elle
   se lit — un liseré à gauche de chaque poste.
   ===================================================================== */
.alg{margin:var(--r4) 0 0;border:1px solid var(--carte);border-radius:var(--arr);box-shadow:var(--om-c);
  background:var(--surface-2);padding:13px 15px;max-width:900px}
.alg__t{margin:0 0 6px;font-size:var(--t-1);font-weight:600;letter-spacing:.03em;
  text-transform:uppercase;color:var(--encre)}
.alg__i{margin:0 0 var(--r3);font-size:var(--t-2);line-height:1.65;color:var(--encre-2);
  max-width:88ch}
.alg__i b{color:var(--encre)}
.alg__l{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.alg__o{background:var(--blanc);border:1px solid var(--trait-f);border-radius:var(--arr-s);
  padding:10px 12px}
.alg__h{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.alg__h b{font-size:var(--t-2);color:var(--encre)}
.alg__c{display:flex;flex-wrap:wrap;gap:7px;align-items:baseline;margin-left:auto;
  font-family:var(--f-data);font-size:var(--t-2)}
.alg__cr{color:var(--beton);text-decoration:line-through}
.alg__cf{color:var(--beton)}
.alg__ca{color:var(--encre);font-weight:700}
.alg__p{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
/* Les positions sont EXPLICITES : l'ordre du HTML met l'explication
   avant le montant — c'est l'ordre de lecture, et c'est celui qu'un
   lecteur d'écran doit entendre — mais à l'œil le montant appartient à
   la première ligne, à droite du nom du poste. Sans ces positions, le
   placement automatique le renvoyait sur une troisième ligne. */
.alg__pi{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;
  padding:7px 10px;border-radius:var(--arr-s);background:var(--surface-2);
  border-left:3px solid var(--trait)}
.alg__pn{grid-area:1 / 1}
.alg__pm{grid-area:1 / 2;align-self:start}
.alg__pq{grid-area:2 / 1 / auto / -1}
/* Les deux natures de trou, distinguées là où on les lit. */
.alg__pi--vide{border-left-color:var(--rouge);background:var(--rouge-l)}
.alg__pi--exclu{border-left-color:var(--ambre);background:var(--ambre-l)}
.alg__pi--x{border-left-color:var(--beton)}
.alg__pn{font-size:var(--t-2);font-weight:600;color:var(--encre);min-width:0}
.alg__pq{font-size:var(--t-2);line-height:1.55;color:var(--encre-2)}
.alg__pm{font-family:var(--f-data);font-size:var(--t-2);font-weight:700;color:var(--encre);
  white-space:nowrap}
.alg__z{margin:var(--r3) 0 0;font-size:var(--t-2);line-height:1.6;color:var(--beton);max-width:88ch}
.alg__z b{color:var(--encre)}

@media (max-width: 700px){
  .alg__c{margin-left:0;flex:1 1 100%}
}

/* =====================================================================
   v0.17, lot D — LE DOSSIER TECHNIQUE, UNE FICHE PAR LIGNE.

   Le bandeau horizontal de la v0.14 laissait la cinquième fiche
   décrocher sous la ligne de flottaison, et une offre qu'on ne voit pas
   est une offre qu'on ne note pas. Cinq en-têtes repliés tiennent dans
   un écran ; cinq fiches ouvertes, non.

   La note vit dans l'EN-TÊTE, jamais dans le dépli : on doit pouvoir
   noter les cinq en balayant, et ne déplier que ce dont on doute.
   ===================================================================== */
.doss__l{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--trait-f);
  border:1px solid var(--trait-f);border-radius:var(--arr);overflow:hidden;max-width:900px}
.doss__i{background:var(--blanc)}
/* Rien fourni : le fond le dit, mais le mot le dit aussi (« rien
   fourni » dans le résumé) — jamais la couleur seule. */
.doss__i--v{background:var(--surface-2)}
.doss__h{display:flex;flex-wrap:wrap;gap:8px var(--r3);align-items:center;padding:9px 12px}
.doss__b{flex:1 1 260px;min-width:0;display:flex;align-items:baseline;gap:9px;
  font:inherit;color:inherit;background:none;border:0;padding:4px 0;cursor:pointer;
  text-align:left}
.doss__b[disabled]{cursor:default}
.doss__b:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.doss__x{font-size:var(--t-2);color:var(--beton);width:11px;flex:0 0 auto}
/* v0.23.1, lot G — le nom sort du bouton : il est un LIEN vers la fiche,
   comme partout ailleurs, et le reste de la ligne ouvre le dossier. */
.doss__n{font-size:var(--t-3);font-weight:600;color:var(--encre);min-width:0;flex:0 0 auto}
.doss__n .lien-e{font-weight:600}
.doss__q{font-size:var(--t-2);color:var(--beton);min-width:0}
.doss__i--v .doss__q{color:var(--ambre)}
.doss__note{flex:0 0 auto;margin-left:auto}
.doss__p{margin:0;padding:0 12px 10px;font-size:var(--t-2);line-height:1.6;color:var(--encre-2);
  display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.doss__d{padding:0 12px 12px;border-top:1px solid var(--trait-f);margin-top:2px}
.doss__t{display:flex;flex-wrap:wrap;gap:var(--r3);align-items:center;margin-top:var(--r3);
  max-width:900px}

@media (max-width: 700px){
  /* La note passe sous le nom, mais reste dans l'en-tête : on note
     toujours sans déplier. */
  .doss__note{margin-left:0;flex:1 1 100%}
}

/* =====================================================================
   v0.17, lot A — LA PAGE INSTRUITE SECTION PAR SECTION.

   Quatre sections numérotées, et un fil de progression collant. La
   numérotation n'est pas décorative : elle dit que l'ordre compte —
   on instruit le prix, le dossier, le planning, PUIS on décide.
   ===================================================================== */
.sec{margin:0 0 var(--r6)}
.sec:focus{outline:none}
.sec:focus-visible{outline:2px solid var(--signal);outline-offset:6px;border-radius:var(--arr)}
/* v0.18 — le titre est un BOUTON : il replie et déplie la section. Il
   garde l'allure d'un titre — pas de fond, pas de bordure de bouton —
   et le chevron à droite dit qu'il se plie. */
.sec__t{display:flex;flex-wrap:wrap;gap:4px var(--r3);align-items:baseline;width:100%;
  margin:0 0 var(--r3);padding:0 0 8px;border:0;border-bottom:2px solid var(--trait);
  background:none;font:inherit;text-align:left;cursor:pointer;color:inherit;border-radius:0}
.sec__t:hover h3{color:var(--signal-d)}
.sec__t:focus-visible{outline:2px solid var(--signal);outline-offset:4px;border-radius:var(--arr-s)}
.sec__x{margin-left:auto;color:var(--beton-c);font-size:var(--t-3);align-self:center}
.sec--r{margin-bottom:var(--r4)}
.sec--r .sec__t{margin-bottom:0}
.sec__n{font-family:var(--f-data);font-size:var(--t-2);font-weight:700;
  width:24px;height:24px;flex:0 0 auto;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--encre);color:var(--papier)}
.sec__t h3{margin:0;font-size:var(--t-5);color:var(--encre)}
.sec__s{font-size:var(--t-2);color:var(--beton);flex:1 1 260px;min-width:0}
/* La dernière — celle où l'on décide — se distingue : c'est la seule qui
   engage quelque chose. */
.sec--d .sec__t{border-bottom-color:var(--signal)}
.sec--d .sec__n{background:var(--signal-btn);color:var(--sur-signal)}

/* --- le fil de progression ------------------------------------------
   Collant, parce que son intérêt est d'être là QUAND ON EST PERDU au
   milieu de la troisième section — pas en haut de page où l'on n'en a
   pas besoin. Il dit ce qui reste à instruire, pas où l'on en est du
   défilement : un fil qui suit le défilement est décoratif. */
.fil-a{position:sticky;top:0;z-index:5;margin:0 0 var(--r5);
  background:var(--papier);border-bottom:1px solid var(--trait);
  padding:8px 0;display:flex;flex-wrap:wrap;gap:8px var(--r3);align-items:center}
.fil-a__l{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;
  flex:1 1 auto;min-width:0}
.fil-a__i{min-width:0}
.fil-a__i a{display:flex;align-items:center;gap:8px;text-decoration:none;
  padding:6px 11px;border-radius:var(--arr-p);border:1px solid var(--trait);
  background:var(--blanc);color:var(--encre-2);min-height:34px}
.fil-a__i a:hover{border-color:var(--encre-3)}
.fil-a__i a:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.fil-a__n{font-family:var(--f-data);font-size:var(--t-2);font-weight:700;
  width:19px;height:19px;flex:0 0 auto;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-2);color:var(--beton)}
.fil-a__t{font-size:var(--t-2);font-weight:600;color:var(--encre);white-space:nowrap}
.fil-a__s{font-size:var(--t-2);color:var(--beton);white-space:nowrap}
/* Instruite : la coche. Neutralisée : atténuée, et le sous-titre le dit
   en mots — jamais la couleur seule. */
.fil-a__i--ok a{border-color:var(--vert)}
.fil-a__i--ok .fil-a__n{background:var(--vert);color:var(--blanc)}
.fil-a__i--n a{background:var(--surface-2)}
.fil-a__i--n .fil-a__t{color:var(--beton)}
.fil-a__r{font-size:var(--t-2);color:var(--beton);white-space:nowrap;margin-left:auto}

/* --- le coefficient, réglé au fil des sections ---------------------- */
.coef{margin:var(--r4) 0 0;padding:11px 13px;border:1px dashed var(--trait);
  border-radius:var(--arr);background:var(--surface-2);max-width:640px}
.coef--n{opacity:.72}
.coef__l{display:block;font-size:var(--t-1);font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--beton);margin-bottom:6px}
.coef__z{display:flex;align-items:center;gap:12px}
.coef__z .curs__i{flex:1 1 auto;min-width:110px}
.coef__v{font-family:var(--f-data);font-size:var(--t-3);color:var(--encre);white-space:nowrap;
  min-width:56px;text-align:right}
.coef__b{display:block;margin-top:6px;font-size:var(--t-2);line-height:1.55;color:var(--beton)}
.coef__b b{color:var(--encre)}

/* --- le planning reçu, en lecture seule ----------------------------- */

@media (max-width: 700px){
  /* Sur téléphone le fil défile horizontalement plutôt que d'empiler
     quatre lignes : il doit rester une bande, pas devenir un sommaire. */
  .fil-a__l{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .fil-a__s{display:none}
  .fil-a__r{margin-left:0;flex:1 1 100%}
  .sec__t h3{font-size:var(--t-4)}
}

/* =====================================================================
   v0.17, lot E — LA FENÊTRE D'ENVOI.

   Modale, parce que ce qu'elle demande n'est pas un réglage : c'est un
   accord. Elle occupe tout l'écran sur téléphone — le texte à relire est
   long, et le lire dans un carré de 300 px reviendrait à ne pas le lire.
   ===================================================================== */
/* z-index 750 : AU-DESSUS DU VOLET (149/150), qui est fixe lui aussi,
   et du tiroir (700) — v0.28 (C1) : une question posée depuis un tiroir
   (supprimer un compte, suspendre) s'ouvrait DESSOUS, et le tiroir
   interceptait le clic. À 80, sa languette flottait par-dessus le bouton
   « Envoyer » sur téléphone — un accessoire qui recouvre la seule
   décision de l'écran. En dessous des toasts (760) et de la palette
   (800), qui doivent rester lisibles par-dessus. */
.fen{position:fixed;inset:0;z-index:750;display:flex;align-items:center;
  justify-content:center;padding:var(--r4);background:rgba(30,26,22,.52);
  backdrop-filter:blur(2px)}
/* v0.22, lot A — 960 px au moins sur bureau : on relit une lettre, pas
   un SMS. Et deux règles pour toute l'interface (HISTORIQUE §2.21) : un
   conteneur ne défile jamais dans un conteneur qui défile ; une bande
   d'onglets a la hauteur de son contenu. */
.fen__c{display:flex;flex-direction:column;width:100%;max-width:960px;max-height:94vh;
  background:var(--surface);border:1px solid var(--trait);border-radius:var(--arr-g);
  box-shadow:0 18px 48px rgba(30,26,22,.28);overflow:hidden}
.fen__h{display:flex;align-items:center;gap:10px;padding:14px 16px;
  border-bottom:1px solid var(--trait);background:var(--surface-2)}
.fen__h h2{margin:0;font-size:var(--t-4);font-weight:700;letter-spacing:-.2px;color:var(--encre)}
.fen__n{font-size:var(--t-2);color:var(--beton);white-space:nowrap}
.fen__x{margin-left:auto;border:0;background:none;font-size:var(--t-4);line-height:1;
  color:var(--beton);cursor:pointer;padding:4px 6px;border-radius:6px}
.fen__x:hover{background:var(--surface-3);color:var(--encre)}

/* Un onglet par destinataire : on relit chacun, on n'envoie qu'une fois. */
/* v0.23, lot A3 — LA BANDE D'ONGLETS EST UN COMPOSANT. Quatre bandes
   partagent la même mécanique — la fenêtre d'envoi (`.fen__o`), la fiche
   d'une offre (`.fo__o`), les onglets de page (`.sous`) et ceux de la
   barre (`.nav__o`) : elle a la hauteur de son contenu, se replie sur
   plusieurs lignes, n'a jamais de barre de défilement, et le soulignement
   de l'onglet actif passe sous son sous-libellé. Le défaut de la 0.21 avait
   été corrigé sur la fenêtre seule (0.22) ; il est corrigé ici, une fois,
   et chaque bande l'hérite. § 2 : un défaut de composant se corrige dans
   le composant. */
.fen__o,.fo__o,.sous,.nav__o{display:flex;flex-wrap:wrap;overflow:visible;overflow-x:visible;scrollbar-width:auto;height:auto;max-height:none}
.fen__o::-webkit-scrollbar,.fo__o::-webkit-scrollbar,.sous::-webkit-scrollbar,.nav__o::-webkit-scrollbar{display:initial}
.fen__o{gap:2px;padding:0 10px;border-bottom:1px solid var(--trait);
  background:var(--surface-2)}
.fen__t{display:flex;flex-direction:column;gap:2px;align-items:flex-start;
  padding:9px 11px 8px;border:0;border-bottom:2px solid transparent;background:none;
  font:inherit;font-size:var(--t-2);color:var(--beton);cursor:pointer;white-space:nowrap;
  min-height:44px;margin-bottom:-1px}
.fen__t--a{color:var(--encre);border-bottom-color:var(--signal);font-weight:600}
/* Une pastille dit qu'un texte a été corrigé : sans elle, on ne sait
   plus lequel des quatre on a repris. */
.fen__t--c .fen__tr::after{content:" ●";color:var(--signal);font-size:var(--t-2)}
.fen__tr{font-size:var(--t-2)}
.fen__tb{font-size:var(--t-1);letter-spacing:.03em;text-transform:uppercase;color:var(--vert)}
.fen__tb--g{color:var(--beton)}

.fen__b{flex:1 1 auto;overflow-y:auto;padding:14px 16px}
.fen__a{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:12px;
  padding-bottom:10px;border-bottom:1px dashed var(--trait)}
.fen__al{font-size:var(--t-1);letter-spacing:.05em;text-transform:uppercase;color:var(--beton)}
.fen__ae{font-family:var(--f-data);font-size:var(--t-2);color:var(--beton)}
/* Le texte à relire est en chasse fixe : il part en clair, et une police
   proportionnelle ferait croire à une mise en page qui n'existe pas. */
.fen__x2{font-family:var(--f-data);font-size:var(--t-2);line-height:1.6;resize:none;overflow:hidden;
  min-height:220px;white-space:pre-wrap}
.fen__i{margin:8px 0 0;font-size:var(--t-2);line-height:1.55}

.fen__p{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;
  border-top:1px solid var(--trait);background:var(--surface-2)}
.fen__s{flex:1 1 180px;font-size:var(--t-2);color:var(--beton);line-height:1.45}
.fen__p .btn--p{margin-left:auto}

/* =====================================================================
   v0.23.1, lot F — LES FENÊTRES QUI REMPLACENT LES BOÎTES DU NAVIGATEUR.

   Même coquille que la fenêtre d'envoi, en plus étroit : une question
   fermée, une saisie, un avertissement. Elles vivent DANS le document —
   c'est tout l'intérêt : la recette les photographie et les scripts les
   cliquent, ce qu'aucune boîte native n'a jamais permis.
   ===================================================================== */
.fen--d{align-items:center}
.fen__c--d{max-width:480px}
.fen__b--d{padding:16px}
.fen__d{margin:0;font-size:var(--t-4);line-height:1.55;color:var(--encre)}
.fen__p .btn--r{margin-left:auto}
/* Le rouge d'un geste qu'on ne défait pas. Il n'existait pas : la seule
   couleur d'accent est le bleu (§2.23), et un bouton destructeur est
   l'exception que cette règle admet — accompagné d'un mot, toujours. */
/* =====================================================================
   v0.23.1, lot H — LE MODE LARGEUR TÉLÉPHONE.

   La page entière est contrainte à 390 px, centrée sur un fond sombre qui
   dit qu'on n'est pas dans un navigateur ordinaire. Les requêtes média
   basées sur la largeur de la FENÊTRE ne se déclenchent pas pour autant —
   c'est la limite de l'exercice, et l'encadré le dit —, mais tout ce qui
   dépend de la largeur DISPONIBLE (grilles, tableaux, cartes, repli des
   colonnes) se voit exactement comme sur un téléphone.
   ===================================================================== */
/* v0.23.1, lot G — le compte d'étapes, sous les pastilles, à la place de
   la réglette et de la timeline : un seul indicateur, celui qui se clique. */
.etapes__c{margin:6px 0 var(--r4)}

html.pb-tel body{max-width:390px;margin:0 auto;
  box-shadow:0 0 0 1px var(--trait),0 0 40px rgba(0,0,0,.18);
  min-height:100vh;overflow-x:hidden}
html.pb-tel{background:var(--encre-2)}
html.pb-tel .top,html.pb-tel .contenu,html.pb-tel .nav,html.pb-tel .flanc{max-width:390px}
/* Le repère : on sait toujours qu'on regarde une page contrainte. */
html.pb-tel body::before{content:"Largeur téléphone — 390 px";position:fixed;
  left:50%;transform:translateX(-50%);top:0;z-index:900;
  background:var(--encre);color:#fff;font-size:11px;letter-spacing:.04em;
  padding:2px 10px;border-radius:0 0 8px 8px;pointer-events:none;opacity:.88}

/* v0.23.1, lot G — le badge de conformité des écrans de décision est un
   BOUTON : il mène au détail. Il garde l'allure d'une étiquette. */
.oc__b--c{cursor:pointer;font:inherit;font-size:var(--t-2);line-height:inherit}
.oc__b--c:hover{filter:brightness(.96)}
.btn--r{background:var(--rouge);border-color:var(--rouge);color:#fff;font-weight:600}
.btn--r:hover{background:var(--rouge-d,var(--rouge));border-color:var(--rouge-d,var(--rouge));
  filter:brightness(.94)}

@media (max-width: 700px){
  .fen{padding:0;align-items:stretch}
  .fen__c{max-width:none;max-height:none;height:100%;border:0;border-radius:0}
  .fen__p .btn--p{margin-left:0;flex:1 1 100%}
  .fen__s{flex:1 1 100%;order:3}
}

/* =====================================================================
   v0.17, lot F — LA MESSAGERIE-REGISTRE.

   Une liste d'entreprises, une ligne chacune, puis le fil. Pas de
   colonne latérale : sur un téléphone tenu d'une main dans une voiture,
   une messagerie en deux colonnes se replie en deux écrans qu'on perd.
   ===================================================================== */
.msgl{list-style:none;margin:0 0 var(--r4);padding:0;border:1px solid var(--trait);
  border-radius:var(--arr);overflow:hidden;background:var(--surface)}
.msgl__i+.msgl__i{border-top:1px solid var(--trait-f)}
/* La ligne ouverte porte un trait, pas seulement un fond : entre
   `surface` et `surface-2` l'écart est d'un cheveu en thème clair, et
   rien ne reliait la ligne choisie au fil affiché en dessous. */
.msgl__i--a{background:var(--surface-2);box-shadow:inset 3px 0 0 var(--signal)}
.msgl__b{display:flex;align-items:center;gap:10px;width:100%;padding:11px 13px;
  border:0;background:none;font:inherit;text-align:left;cursor:pointer;min-height:46px}
.msgl__b:hover:not([disabled]){background:var(--surface-3)}
.msgl__b[disabled]{cursor:default;opacity:.6}
.msgl__n{font-weight:600;color:var(--encre);font-size:var(--t-3)}
.msgl__q{font-size:var(--t-2);color:var(--beton);margin-left:auto;white-space:nowrap}
.msgl__e{flex:0 0 auto}

.fil2__l{list-style:none;margin:0 0 var(--r4);padding:0;display:flex;
  flex-direction:column;gap:10px}
/* Le sens se lit à la position ET au libellé. Une couleur seule ne se
   lit pas, et un registre où l'on ne sait plus qui a écrit quoi ne vaut
   rien comme registre. */
.msg{padding:11px 13px;border-radius:var(--arr);border:1px solid var(--trait);
  background:var(--surface)}
.msg--m{background:var(--surface-2);margin-left:var(--r5)}
.msg__q{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:5px;
  font-size:var(--t-2);color:var(--beton)}
.msg__n{font-weight:600;color:var(--encre);font-size:var(--t-2)}
.msg__t{margin:0;font-size:var(--t-3);line-height:1.6;color:var(--encre);white-space:pre-wrap}
@media(max-width:600px){
  .msg--m{margin-left:var(--r4)}
  .msgl__b{flex-wrap:wrap}
  .msgl__q{margin-left:0;flex:1 1 100%}
}

/* =====================================================================
   v0.17, lot G — L'ASSISTANCE DANS LE FLUX DE LECTURE.

   PAS DE BULLE FLOTTANTE. C'est le motif que tout le monde a appris à
   ignorer : il annonce l'assistance au lieu de la rendre utile, et il
   recouvre ce qu'on est en train de lire. Ces constats vivent DANS la
   page, à l'endroit où la question se pose, et ils se lisent comme le
   reste — même corps, même colonne, pas de fond coloré qui crie.

   Le trait à gauche suffit à les distinguer : c'est ce que fait une
   citation, et c'est exactement le statut de ces phrases — un avis, pas
   une donnée du dossier.
   ===================================================================== */
.aide-ia{margin:var(--r3) 0 0;padding:0 0 0 12px;border-left:2px solid var(--trait)}
.aide-ia--p{margin:0 0 var(--r3);font-size:var(--t-2);line-height:1.6;color:var(--beton)}
.aide-ia--p b{color:var(--encre)}
.aide-ia__l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.aide-ia__i{font-size:var(--t-2);line-height:1.6;color:var(--beton)}
/* Le ton se lit au MOT, pas seulement à la couleur : un constat qui
   appelle une action commence par un signe, et le signe a un texte. */
.aide-ia__i--a{color:var(--encre)}
.aide-ia__i--a::before{content:"À vérifier — ";font-weight:600;color:var(--ambre)}

/* =====================================================================
   v0.18 — LE TABLEAU DE DÉCISION.

   La réponse d'abord, le dossier dessous. Les offres en cartes côte à
   côte, la recommandée surélevée, les barres qui font voir l'écart, la
   carte qui dit d'où elles viennent.

   LE PRINCIPE DE MISE EN PAGE : les mêmes faits à la même hauteur sur
   toutes les cartes. C'est l'alignement horizontal qui fait un
   comparateur — l'œil balaie une ligne et lit cinq réponses à la même
   question. Chaque zone a donc une hauteur fixée, pas « ce que son
   contenu demande ».
   ===================================================================== */
.dec{margin:0 0 var(--r5)}
.dec__h{display:flex;align-items:flex-start;gap:var(--r4);flex-wrap:wrap;margin-bottom:var(--r4)}
.dec__h .cb__p{flex:1 1 420px;margin:0}
.dec__etat{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding-top:8px}
.dec__reste{font-size:var(--t-2);font-weight:600;color:var(--signal-d);text-decoration:none;
  padding:6px 12px;border:1px solid var(--signal);border-radius:var(--arr-p);white-space:nowrap}
.dec__reste--ok{color:var(--vert);border-color:var(--vert-l);background:var(--vert-l)}
.dec__reste:hover{background:var(--signal-l)}
.dec__reste--ok{color:var(--vert);border-color:var(--vert)}

/* Les cartes : une grille, jamais une rangée qui défile (v0.22.1, lot A).
   Jusqu'à cinq, une colonne par offre — à 1366 la cinquième tient en
   resserrant la carte ; à six et plus, deux lignes. Sous 1180 px, autant
   de colonnes que la place en donne. */
.dec__c{display:grid;grid-template-columns:repeat(var(--oc-cols,5),minmax(0,1fr));gap:var(--r3);
  grid-template-rows:repeat(6,auto);padding:10px 0 14px;margin:0}
@media (max-width:1180px){ .dec__c{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} }
.oc{min-width:0;display:flex;flex-direction:column;
  background:var(--blanc);border:1px solid var(--carte);border-radius:var(--arr);box-shadow:var(--om-c);
  padding:14px 15px 15px;position:relative;cursor:pointer;
  transition:transform var(--duree) var(--courbe),box-shadow var(--duree) var(--courbe),border-color var(--duree) var(--courbe)}
.oc:hover{border-color:var(--beton-c);box-shadow:var(--om-2)}
.oc--f{border-color:var(--encre);box-shadow:var(--om-2)}
/* La principale — la pressentie, sinon la moins chère — est SURÉLEVÉE :
   un trait, une ombre, et un rien plus haute. Pas un fond coloré, qui se
   lirait comme une alerte. */
.oc--p{border-color:var(--signal);box-shadow:0 8px 28px var(--anneau);
  transform:translateY(-4px)}
.oc--sel{border-color:var(--vert)}
/* Deux lignes de nom + la ville : la même hauteur sur toutes les
   cartes, qu'un nom tienne sur une ligne ou deux. */
.oc__t{display:flex;gap:10px;align-items:flex-start;min-height:60px}
.oc__r{flex:0 0 26px;height:26px;border-radius:50%;background:var(--encre);color:var(--blanc);
  font-family:var(--f-data);font-size:var(--t-2);font-weight:700;display:flex;
  align-items:center;justify-content:center}
/* v0.21, lot B — le rang reste encre sur la carte proposée : le cadre
   la distingue déjà, et la couleur d'action ne se lit pas. */
.oc--p .oc__r{background:var(--encre)}
.oc--sel .oc__r{background:var(--vert)}
.oc__id{min-width:0}
.oc__n{margin:0;font-size:var(--t-3);line-height:1.25;font-weight:700;color:var(--encre);
  overflow-wrap:anywhere}   /* v0.22.1 — le nom se replie en entier : « Provence Terrassement… » coupait la raison sociale */
.oc__v{display:block;font-size:var(--t-2);color:var(--beton);margin-top:3px;line-height:1.4}
/* 26 px : la hauteur d'une pastille REX ou « défaillance ». Réservée sur
   TOUTES les cartes, même vides — sinon la carte qui en porte une
   descend de six pixels et l'alignement des montants se perd. */
.oc__bd{min-height:26px;display:flex;gap:4px;flex-wrap:wrap;align-items:center;margin:6px 0 4px}
.oc__b{font-size:var(--t-1);font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  padding:2px 8px;border-radius:var(--arr-p);background:var(--surface-2);color:var(--beton)}
.oc__b--p{background:var(--vert-l);color:var(--vert)}
.oc__b--1{background:var(--trait-f);color:var(--encre)}
/* LE MONTANT : le fait premier, gros, en chasse fixe — il servira au contrat. */
.oc .oc__m{text-align:left;font-size:var(--t-5);line-height:1.1;margin:4px 0 2px;min-height:40px;
  display:flex;flex-direction:column;justify-content:flex-start}
.oc .oc__m b{font-weight:700;letter-spacing:-.3px;font-size:var(--t-4)}
.oc .oc__m{white-space:normal}   /* v0.22.1 — les trois montants se replient, ils ne se coupent pas */
.oc__ms{font-size:var(--t-2);color:var(--beton);font-weight:400;margin-top:3px;white-space:normal;line-height:1.3}
/* L'ÉCART : la pastille, à la même hauteur partout. */
.oc .oc__e{display:inline-block;align-self:flex-start;margin:4px 0 10px;min-height:24px}
/* LES FAITS : quatre ou cinq lignes, dans le même ordre sur chaque carte. */
.oc__f{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:4px;
  flex:1 1 auto;color:var(--encre)}
.oc__k{font-size:var(--t-2);line-height:1.45;padding-left:18px;position:relative;color:var(--encre)}
.oc__k::before{content:"·";position:absolute;left:4px;top:0;font-weight:700;color:var(--beton-c)}
.oc__k--ok{color:var(--vert)}
.oc__k--ok::before{content:"✓";color:var(--vert);left:2px}
.oc__k--a{color:var(--ambre)}
.oc__k--a::before{content:"!";color:var(--ambre);left:5px}
.oc__k--r{color:var(--rouge)}
.oc__k--r::before{content:"✕";color:var(--rouge);left:2px;font-size:var(--t-2)}
.oc__k--m{color:var(--beton)}
.oc__k--n{font-family:var(--f-data);color:var(--encre);border-top:1px dashed var(--trait);
  padding-top:5px;margin-top:2px}
.oc__k--n::before{content:""}
.oc__a{display:flex;gap:6px;flex-wrap:wrap;align-items:center;min-height:36px}
.oc__a .btn{flex:1 1 auto;justify-content:center}
.oc__a .btn--s{flex:0 0 auto}

/* v0.22.1 — UN COMPARATEUR ALIGNE SES BANDES. La carte a six bandes —
   identité, badges, montant, écart, faits, action — et elle les accroche
   aux lignes de la grille (`subgrid`) : un nom qui tient sur trois lignes
   ne descend plus le montant de sa seule carte, et l'œil compare
   horizontalement sans compter les lignes. Le navigateur qui ignore
   `subgrid` retrouve la colonne flex d'avant, alignée ou non. */
@supports (grid-template-rows:subgrid){
  .oc{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:0}
}

/* v0.19, lot D — les barres ont été retirées ; sous les cartes, le
   détail poste par poste (le tableau ligne à ligne de la v0.16) derrière
   un bouton, puis la carte géographique, seule sur sa rangée. */
.dec__d{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:var(--r3)}
.dec > .cb__pied{margin-top:8px}
#cmp-detail-b{margin-top:var(--r3)}
#cmp-detail-b .cmp-cadre{background:var(--blanc)}
.dec__b{display:grid;grid-template-columns:1fr;gap:var(--r4);margin-top:var(--r3)}
.dec__map{background:var(--blanc);border:1px solid var(--trait);
  border-radius:var(--arr);padding:14px 16px}
.dec__mapb{height:300px;border-radius:var(--arr-s);overflow:hidden;background:var(--surface-2)}
.dec__map .cb__pied{margin-top:10px}

@media (max-width: 700px){
  /* v0.21, lot B — plus de défilement horizontal, nulle part : sur
     téléphone les cartes s'empilent, la principale en tête. Le glissement
     latéral de la 0.18 (« une carte à la fois, la suivante qui dépasse »)
     était le seul endroit où la page défilait de côté. */
  .dec__c{display:grid;grid-template-columns:1fr;overflow:visible;scroll-snap-type:none;
    padding:8px 0 12px;margin:0;gap:var(--r3)}
  .oc{flex-basis:auto;max-width:none;width:100%}
  .oc--p{transform:none}
  .dec__mapb{height:220px}
}

/* --- v0.18 — le « ? » : la raison, à la demande ---------------------- */
.expl__b{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  margin:0 0 0 4px;padding:0;border:1px solid var(--trait);border-radius:50%;
  background:var(--blanc);color:var(--beton);font:600 var(--t-2)/1 var(--f-data);cursor:pointer;
  vertical-align:middle}
.expl__b:hover,.expl__b[aria-expanded="true"]{background:var(--encre);color:var(--blanc);
  border-color:var(--encre)}
.expl{display:block;margin-top:6px;font-size:var(--t-2);line-height:1.55;color:var(--beton);
  font-weight:400}

/* v0.18 — les épingles de l'accueil : un chiffre, un nom. v0.25, lot A4 —
   remplacées par les repères communs (`.rp`, en fin de feuille). */
@media(max-width:640px){
  .leaflet-control-layers-expanded{padding:4px 8px;font-size:var(--t-1)}
}

/* =====================================================================
   v0.19, lot B — LA FICHE PAR OFFRE.

   Quasi plein écran, par-dessus l'analyse. Même z-index que la fenêtre
   d'envoi (400) : elle passe au-dessus du volet, sous les toasts. Trois
   onglets en haut ; l'en-tête porte ce qui identifie l'entreprise et ce
   qui se lit sans onglet — montant, écart, conditions.
   ===================================================================== */
.fo{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;
  padding:var(--r4);background:rgba(30,26,22,.52);backdrop-filter:blur(2px)}
.fo__c{display:flex;flex-direction:column;width:100%;max-width:1040px;height:min(92vh,980px);
  background:var(--surface);border:1px solid var(--trait);border-radius:var(--arr-g);
  box-shadow:0 18px 48px rgba(30,26,22,.28);overflow:hidden}
.fo__h{display:flex;align-items:flex-start;gap:12px;padding:14px 18px 10px;
  background:var(--surface-2);border-bottom:1px solid var(--trait-f)}
.fo__r0{margin-top:2px}
.fo__id{min-width:0;flex:1 1 auto}
.fo__n{margin:0;font-size:var(--t-5);font-weight:800;letter-spacing:-.3px;line-height:1.2;color:var(--encre)}
.fo__v{display:block;font-size:var(--t-2);color:var(--beton);margin-top:3px;line-height:1.45}
.fo__bd{display:flex;flex-wrap:wrap;gap:5px;align-items:center;justify-content:flex-end;
  max-width:40%}
.fo__x{margin-left:0;flex:0 0 auto;font-size:var(--t-5);padding:6px 8px}
.fo__k{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding:10px 18px;
  background:var(--surface-2);border-bottom:1px solid var(--trait)}
.fo__m{display:flex;flex-direction:column;line-height:1.15}
.fo__m b{font-size:var(--t-5);letter-spacing:-.3px}
.fo__m small{font-size:var(--t-2);color:var(--beton);margin-top:2px}
.fo__res{padding:0 18px;background:var(--surface-2)}
.fo__res .tbl{margin:0 0 10px}
/* Les onglets : la même mécanique que la fenêtre d'envoi, avec un
   sous-titre qui dit l'état de chaque volet — la note posée, ou ce
   qu'il reste à faire — pour qu'on sache où aller avant d'y aller. */
.fo__o{gap:2px;padding:0 10px;border-bottom:1px solid var(--trait);background:var(--surface-2)}
.fo__t{margin-bottom:-1px}   /* le soulignement passe sous le sous-libellé, au ras du filet */
.fo__t{display:flex;flex-direction:column;gap:2px;align-items:flex-start;padding:10px 12px 8px;
  border:0;border-bottom:3px solid transparent;background:none;font:inherit;color:var(--beton);
  cursor:pointer;white-space:nowrap;min-height:48px}
.fo__t--a{color:var(--encre);border-bottom-color:var(--signal)}
.fo__t:focus-visible{outline:2px solid var(--signal);outline-offset:-2px}
.fo__tl{font-size:var(--t-3);font-weight:600}
.fo__ts{font-family:var(--f-data);font-size:var(--t-2);color:var(--beton)}
.fo__b{flex:1 1 auto;overflow-y:auto;padding:16px 18px}
.fo__note{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:0 0 14px;
  padding:10px 12px;border:1px solid var(--carte);border-radius:var(--arr);box-shadow:var(--om-c);background:var(--blanc)}
.fo__nl{font-size:var(--t-1);letter-spacing:.06em;text-transform:uppercase;color:var(--beton);font-weight:600}
.fo__d{margin:0 0 10px;font-size:var(--t-2)}
/* v0.24 — LE CADRE LAISSE LA PLACE DE SES CIBLES TACTILES. `overflow-x`
   sur un seul axe fait passer l'autre à `auto` : le cadre se met alors à
   défiler verticalement de six pixels, parce que l'incrustation de 44 px
   des petits boutons de la DERNIÈRE ligne dépasse la table qui les porte.
   Un défilement imbriqué de six pixels ne se voit pas mais capte la
   molette et le glissement du doigt au-dessus du tableau. Sept pixels —
   la moitié de l'écart entre 44 et les 30 px d'un bouton-icône — rendent
   l'incrustation entière, et le cadre ne défile plus que là où il doit. */
.tbl-cadre{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:7px}
.fo__tbl{margin:0;min-width:560px}
.fo__tbl th,.fo__tbl td{vertical-align:top}
.fo__tbl tfoot th{text-align:right;font-weight:600;color:var(--encre-2)}
.fo__tbl tfoot td{color:var(--encre-2);font-size:var(--t-2)}
.fo__tbl td.num,.fo__tbl tfoot td{white-space:nowrap}   /* v0.22.1 — « 312 081 € » sur une ligne, le « € » ne descend pas seul */
.fo__r--ex td,.fo__r--ko td{background:var(--surface-2)}
.fo__r--ko td:nth-child(3) b{color:var(--rouge)}
.fo__r--ex td:nth-child(3){color:var(--beton);font-style:italic}
.fo__r--bas td:first-child{box-shadow:inset 3px 0 0 var(--vert)}
.fo__var{margin-top:18px;padding-top:14px;border-top:1px dashed var(--trait)}
.fo__var .dost__p{margin:4px 0 10px}
.fo__p{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 18px;
  border-top:1px solid var(--trait);background:var(--surface-2)}
.fo__p .btn--p,.fo__p .btn--v{margin-left:auto}
/* Le bouton « Détails » de la carte : un renfort, en retrait. */
.oc__det{margin-left:auto}
.oc:focus-visible{outline:2px solid var(--signal);outline-offset:2px}

@media (max-width: 700px){
  .fo{padding:0;align-items:stretch}
  .fo__c{max-width:none;height:100%;border:0;border-radius:0}
  .fo__h{padding:12px 14px 8px;flex-wrap:wrap}   /* v0.22.1 — sans repli, le titre était comprimé sur 120 px et le ✕ posé au milieu */
  .fo__id{flex:1 1 200px}
  .fo__bd{max-width:none;justify-content:flex-start;flex:1 1 100%;order:3}
  .fo__x{margin-left:auto;order:2}
  .fo__k,.fo__b,.fo__p{padding-left:14px;padding-right:14px}
  .fo__p .btn--p,.fo__p .btn--v{margin-left:0;flex:1 1 100%}
  .fo__p .fen__s{flex:1 1 100%;order:3}
  .fo__t{padding:8px 9px 6px;min-height:40px}
  .fo__tl{font-size:var(--t-2)}
  .fo__o{flex-wrap:wrap;overflow-x:visible}   /* v0.22.1 — les onglets de la fiche se replient, ils ne défilent pas hors de l'écran */
}

/* =====================================================================
   v0.19, lot A — LE TABLEAU DE BORD : DEUX RYTHMES, PAS UN.

   En haut, LES ACTIONS DU JOUR : une liste dense, une ligne par geste,
   trait fin, fond blanc, bouton à droite — elle se lit comme une liste
   de tâches, et elle se vide. En bas, LA LISTE, aérée, dans un panneau.
   Deux zones qui ne se ressemblent pas se distinguent sans qu'on ait à
   les lire.
   ===================================================================== */
.ajd{margin:0 0 var(--r5);border:1px solid var(--carte);border-radius:var(--arr);box-shadow:var(--om-c);
  background:var(--blanc);overflow:hidden}
.ajd__h{display:flex;align-items:baseline;gap:10px;padding:9px 14px 7px;
  border-bottom:1px solid var(--trait)}
.ajd__t{margin:0;font-size:var(--t-1);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--encre-2)}
.ajd__n{font-size:var(--t-2);color:var(--beton)}
/* v0.22.1, lot C — le bloc est un <details> : la ligne de résumé est le titre. */
details.ajd>summary.ajd__h{cursor:pointer;list-style:none;align-items:center;flex-wrap:wrap}
details.ajd>summary.ajd__h::-webkit-details-marker{display:none}
details.ajd:not([open])>summary.ajd__h{border-bottom:0}
.ajd__r{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--t-2);color:var(--encre-2)}
.ajd__c{border:0;background:none;padding:2px 4px;font:inherit;font-size:var(--t-2);color:var(--encre-2);cursor:pointer;border-radius:var(--arr-s);min-height:28px}
.ajd__c b{color:var(--encre)}
.ajd__c:hover{background:var(--surface-2)}
.ajd__c--on{background:var(--signal-l);color:var(--signal-d)} .ajd__c--on b{color:var(--signal-d)}
/* v0.22.1, lot C — les comptes du résumé filtrent la liste d'un appui :
   ce sont des cibles, pas du texte, et au doigt elles font 44 px. La
   règle est ici et pas dans le bloc des cibles tactiles, qui vient plus
   haut dans la feuille : à égalité, la dernière l'emporte. */
@media(pointer:coarse){ .ajd__c{min-height:44px;display:inline-flex;align-items:center;gap:4px} }
.ajd__sep{color:var(--beton)}
.ajd__x{margin-left:auto;color:var(--beton);font-size:var(--t-2)}
.ajd__vide{margin:0;padding:14px;font-size:var(--t-2);color:var(--beton)}
.ajd__vide b{color:var(--vert)}
.ajd__l{list-style:none;margin:0;padding:0}
/* v0.20, lot A — la colonne des boutons a une largeur FIXE : même bord
   gauche sur toutes les lignes, et un seul style (plein). */
.ajd__i{display:grid;grid-template-columns:104px minmax(140px,1fr) minmax(120px,1fr) minmax(0,1.4fr) 124px;
  gap:6px 14px;align-items:center;padding:4px 14px;min-height:40px;
  border-bottom:1px solid var(--trait-f);box-shadow:inset 3px 0 0 var(--trait)}
.ajd__i:last-child{border-bottom:0}
.ajd__i--r{box-shadow:inset 3px 0 0 var(--rouge)}
.ajd__i--a{box-shadow:inset 3px 0 0 var(--ambre)}
.ajd__i--b{box-shadow:inset 3px 0 0 var(--bleu)}
.ajd__ref{font-family:var(--f-data);font-size:var(--t-2);font-weight:700;color:var(--encre);
  background:none;border:0;padding:0;cursor:pointer;text-align:left}
.ajd__ref:hover{color:var(--signal)}
.ajd__q{font-size:var(--t-2);color:var(--encre)}
.ajd__i--r .ajd__q{color:var(--rouge);font-weight:600}
.ajd__i--a .ajd__q{color:var(--ambre);font-weight:600}
.ajd__s{font-size:var(--t-2);color:var(--encre-2)}
.ajd__o{font-size:var(--t-2);color:var(--beton);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ajd__a{justify-self:stretch}
.ajd__a .ajd__b{width:100%;min-width:0;justify-content:center;white-space:nowrap}

/* La liste : un panneau aéré, et des en-têtes qui trient. */
.lst .panel__b{padding-top:var(--r3)}
.lst .tbl td{height:47px}
/* `--beton` et non la couleur de l'en-tête : un en-tête qui se clique
   est du texte utile, il doit tenir le contraste AA. */
.tri{background:none;border:0;padding:0;font:inherit;color:var(--beton);cursor:pointer;
  display:inline-flex;align-items:center;gap:4px;text-transform:inherit;letter-spacing:inherit}
.tri:hover{color:var(--encre)}
.tri--a{color:var(--encre)}
.tri__i{font-style:normal;font-size:var(--t-2);min-width:8px;color:var(--signal)}
.tri:focus-visible{outline:2px solid var(--signal);outline-offset:2px;border-radius:3px}
th[aria-sort] .tri{white-space:nowrap}

@media (max-width: 900px){
  .ajd__i{grid-template-columns:96px minmax(0,1fr) 116px;grid-template-areas:
    "ref quoi act" "ref etat act" "ref objet act"}
  .ajd__ref{grid-area:ref}.ajd__q{grid-area:quoi}.ajd__s{grid-area:etat}
  .ajd__o{grid-area:objet}.ajd__a{grid-area:act}
  .ajd__i{gap:1px 10px;padding:8px 12px}
}
@media (max-width: 700px){
  .ajd__i{grid-template-columns:minmax(0,1fr) 108px;grid-template-areas:
    "ref act" "quoi act" "etat act" "objet act"}
  .ajd__o{white-space:normal}   /* v0.22.1 — l'objet se lit en entier sur téléphone, il ne se coupe pas en « Levage — pose des pou… » */
}

/* =====================================================================
   v0.20, lot A — QUI A ÉTÉ INFORMÉ ; LA DÉFAILLANCE QUI SE LIT ; LA
   FENÊTRE D'ENVOI PAR DESTINATAIRE.
   ===================================================================== */
.inf{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:0 0 var(--r3);
  padding:9px 14px;border:1px solid var(--carte);border-radius:var(--arr);box-shadow:var(--om-c);background:var(--blanc)}
.inf--ok{border-color:var(--vert-l)}
.inf--ko{border-color:var(--ambre);box-shadow:inset 3px 0 0 var(--ambre)}
.inf__t{font-size:var(--t-2);color:var(--encre)}
.inf--ok .inf__t{color:var(--vert)}
.inf__l{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 12px;
  font-size:var(--t-2);color:var(--encre-2)}
.inf__l li::before{content:"manque ";color:var(--beton)}
/* La pastille-bouton, et ce qu'elle ouvre. */
.et--btn{cursor:pointer;border:0;font:inherit;font-size:inherit;text-decoration:underline dotted;
  text-underline-offset:3px}
.et--btn:hover{filter:brightness(.92)}
.et--btn:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.oc__bd,.fo__bd{position:relative}
.def{position:absolute;z-index:6;top:calc(100% + 6px);left:0;width:min(420px,calc(100vw - 48px));
  background:var(--surface);border:1px solid var(--carte);border-radius:var(--arr);box-shadow:var(--om-c);
  box-shadow:0 10px 30px rgba(0,0,0,.14);padding:12px 14px;text-align:left;cursor:default;
  font-family:var(--f-texte);font-weight:400;font-size:var(--t-2);line-height:1.5;color:var(--encre);
  text-transform:none;letter-spacing:0}
.fo__bd .def{left:auto;right:0}
/* v0.22.1 — le survol flottant : fixé dans la fenêtre, ancré à la pastille. */
.def--flot{position:fixed;top:auto;left:auto;z-index:160;right:auto}
#pb-def .def:hover{box-shadow:0 10px 30px rgba(0,0,0,.18)}
.def__h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;
  font-size:var(--t-2)}
.def__x{position:static;width:26px;height:26px;font-size:var(--t-2)}
.def__i{padding:8px 0;border-top:1px solid var(--trait-f)}
.def__k{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center;font-size:var(--t-2);color:var(--encre-2)}
.def__m{margin:6px 0 0;font-size:var(--t-2);color:var(--encre);white-space:pre-line}
.def__a{margin:8px 0 0;font-size:var(--t-2);color:var(--beton);line-height:1.45}
.rexe{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap}
.rexe__s{color:var(--beton);font-size:var(--t-2)}
.rexe__v{font-size:var(--t-2);color:var(--encre)}
.oc__kb{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-align:left;
  display:inline-flex;align-items:center;gap:5px}
.oc__kb:hover{color:var(--signal)}
.oc__q{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;
  border-radius:50%;border:1px solid var(--beton-c);font-size:var(--t-2);font-family:var(--f-texte);
  color:var(--beton)}
.fo__tot{font-size:var(--t-4);margin-right:8px}
/* La fin prévisionnelle : calculée, ou refusée. */
.neg__c--ko input{border-color:var(--rouge);box-shadow:0 0 0 2px var(--rouge-l)}
.fige__ko{margin:6px 0 10px}
.fige__calc b{color:var(--encre)}
/* La fenêtre : l'état par onglet, et par destinataire. */
.fen__tb--v{color:var(--vert)}
.fen__tb--r{color:var(--rouge)}
.fen__t--e .fen__tr{color:var(--beton)}
.fen__st{font-size:var(--t-2);font-weight:600;margin-left:auto;padding:2px 8px;border-radius:12px}
.fen__st--v{color:var(--vert);background:var(--vert-l)}
.fen__st--r{color:var(--rouge);background:var(--rouge-l)}
.fen__ch{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-2);color:var(--encre-2);
  margin-left:auto;cursor:pointer;white-space:nowrap}
.fen__ch input{margin:0;accent-color:var(--signal)}
.fen__def{margin:0 0 12px}
@media (max-width: 700px){
  .fen__ch{margin-left:0}
  .fen__st{margin-left:0}
}

/* =====================================================================
   v0.19, lot E — L'ASSISTANCE QUI SE DEMANDE.

   Un seul habillage pour tout texte produit : l'en-tête « Assistance IA
   — proposé, à relire », le pouce à droite, le texte dessous. Le bloc
   se reconnaît d'un écran à l'autre sans qu'on ait à le lire.
   ===================================================================== */
.ia{margin-top:10px;border:1px solid var(--trait);border-left:3px solid var(--bleu);
  border-radius:var(--arr-s);background:var(--blanc);padding:8px 12px 10px}
.ia--fen{margin:0 0 10px}
.ia__h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.ia__s{font-size:var(--t-1);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--bleu)}
.ia__l{margin:0;padding-left:18px;font-size:var(--t-2);line-height:1.55;color:var(--encre-2)}
.ia__l li+li{margin-top:3px}
.ia__p{margin:0;font-size:var(--t-2);line-height:1.65;color:var(--encre)}
.ia__d{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin-top:10px}
.ia__ko{margin:8px 0 0}
.ia__etat{margin:0 0 10px;font-size:var(--t-2);line-height:1.7}
.ia__on{color:var(--vert)}.ia__off{color:var(--beton)}
.utile{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:var(--t-2);color:var(--beton)}
.utile__l{margin-right:2px}
.utile__b{border:1px solid var(--trait);background:var(--surface-2);border-radius:999px;
  padding:1px 9px;font:inherit;font-size:var(--t-2);color:var(--encre-2);cursor:pointer;min-height:24px}
.utile__b[aria-pressed="true"]{background:var(--encre);color:var(--papier);border-color:var(--encre)}
.utile__b:focus-visible{outline:2px solid var(--signal);outline-offset:1px}

/* La relecture avant envoi, en trois niveaux. */
.rel{margin:0 0 var(--r4)}
.rel__b{padding:9px 12px;border:1px solid var(--rouge);border-left-width:3px;border-radius:var(--arr-s);
  background:var(--rouge-l);font-size:var(--t-2);color:var(--encre);margin-bottom:10px}
.rel__h{margin:0 0 6px;font-size:var(--t-1);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--encre-2)}
.rel__l{list-style:none;margin:0 0 8px;padding:0;border:1px solid var(--trait);border-radius:var(--arr-s);
  background:var(--blanc)}
.rel__i{display:flex;gap:10px;align-items:baseline;padding:6px 12px;border-bottom:1px solid var(--trait-f);
  font-size:var(--t-2);line-height:1.5;box-shadow:inset 3px 0 0 var(--ambre)}
.rel__i:last-child{border-bottom:0}
.rel__i--info{box-shadow:inset 3px 0 0 var(--trait)}
.rel__l--i .rel__i{color:var(--beton)}
.rel__t{flex:1 1 auto}
.rel__a{flex:0 0 auto;border:0;background:none;padding:0;font:inherit;font-size:var(--t-2);font-weight:600;
  color:var(--signal-d);cursor:pointer;white-space:nowrap}
.rel__a:hover{text-decoration:underline}
.rel__ok{margin:0 0 8px;font-size:var(--t-2);color:var(--encre-2)}
.rel__ok b{color:var(--vert)}

/* La barre de rédaction de la fenêtre d'envoi. */
.fen__ia{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding:8px 16px;
  border-bottom:1px solid var(--trait);background:var(--blanc)}
.fen__opt{font-size:var(--t-2);color:var(--encre-2);display:inline-flex;align-items:center;gap:5px}
.syn{margin-top:var(--r4)}

/* =====================================================================
   v0.20, lot B — LA TIMELINE DU CYCLE. Un seul composant, deux faces,
   collant en haut. Une ligne, jamais deux : sous 700 px, seules l'étape
   courante et ses deux voisines gardent leur libellé, les autres sont
   des points. `--cyc-top` dit sous quoi elle se colle (l'en-tête de
   l'espace) ; chaque page le pose.
   ===================================================================== */
.cyc{position:sticky;top:var(--cyc-top,0);z-index:40;margin:0 0 var(--r4);
  padding:6px 0 4px;background:var(--papier);border-bottom:1px solid var(--trait);
  display:flex;align-items:center;gap:var(--r3)}
.cyc__l{list-style:none;margin:0;padding:0;display:flex;align-items:flex-start;
  flex:1 1 auto;min-width:0}
.cyc__e{flex:1 1 0;min-width:0;position:relative;text-align:center}
/* Le trait qui relie : de la moitié d'une étape à la moitié de la suivante. */
.cyc__e::before{content:"";position:absolute;left:0;right:0;top:14px;height:2px;
  background:var(--trait)}
.cyc__e:first-child::before{left:50%}
.cyc__e:last-child::before{right:50%}
.cyc__e--faite::before{background:var(--vert)}
.cyc__e--faite + .cyc__e::before{background:linear-gradient(90deg,var(--vert) 50%,var(--trait) 50%)}
.cyc__e--faite + .cyc__e--faite::before{background:var(--vert)}
.cyc__b{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;
  width:100%;background:none;border:0;padding:4px 2px 2px;font:inherit;color:inherit;
  cursor:default;text-decoration:none;min-width:0}
button.cyc__b{cursor:pointer;border-radius:var(--arr-s)}
button.cyc__b:hover .cyc__t{color:var(--signal-d)}
button.cyc__b:focus-visible{outline:2px solid var(--signal);outline-offset:1px}
.cyc__p{width:22px;height:22px;border-radius:50%;border:2px solid var(--trait);
  background:var(--papier);display:flex;align-items:center;justify-content:center;
  font-style:normal;font-size:var(--t-2);font-weight:700;line-height:1;color:var(--beton);flex:none}
.cyc__e--faite .cyc__p{background:var(--vert);border-color:var(--vert);color:#fff}
.cyc__e--courante .cyc__p{background:var(--signal);border-color:var(--signal);
  box-shadow:0 0 0 3px var(--signal-l)}
.cyc__e--passee .cyc__p{background:var(--trait-f);border-color:var(--trait);color:var(--beton)}
.cyc__t{font-size:var(--t-2);line-height:1.2;color:var(--encre-2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cyc__e--courante .cyc__t{color:var(--encre);font-weight:700}
.cyc__e--avenir .cyc__t{color:var(--beton)}
.cyc__e--passee .cyc__t{color:var(--beton);font-style:italic}
.cyc__s{font-family:var(--f-data);font-size:var(--t-2);line-height:1.2;color:var(--beton);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cyc__e--courante .cyc__s{color:var(--signal-d)}
/* v0.23, lot I — un sous-libellé de DEUX PARTIES tient sur deux lignes au
   lieu de perdre la seconde dans des points de suspension : « 06/09 ·
   Enrobés de liaison » se lisait « 06/09 · Enrobés d… » à 1366 px, où huit
   étapes se partagent la largeur de la page. La date garde sa ligne, le nom
   la sienne, et seul un nom trop long pour sa colonne se coupe encore — le
   survol porte le tout. */
.cyc__s--2{white-space:normal;overflow:visible;text-overflow:clip;display:block}
.cyc__sp{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cyc__sp--d{color:var(--beton)}
.cyc__e--courante .cyc__sp--d{color:var(--signal-d)}
/* v0.23, lot A1 — l'étape attendue (REX) : grisée, sans clic, « Bientôt
   disponible » au survol — comme un bouton dont la fonction est attendue. */
.cyc__e--attendu .cyc__b{cursor:not-allowed;opacity:.55}
.cyc__e--attendu .cyc__p{border-style:dashed}
.cyc__fin{flex:none;font-size:var(--t-1);font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--beton);padding:3px 9px;border:1px solid var(--trait);border-radius:20px;
  margin-right:var(--r3)}
/* Compacte : dans une ligne de tableau (vue de direction). Pas collante,
   pas de bouton, et seule l'étape courante garde son nom. */
.cyc--c{position:static;margin:0;padding:0;background:none;border:0;display:block}
.cyc--c .cyc__e::before{top:6px;height:2px}
.cyc--c .cyc__p{width:16px;height:16px;border-width:1.5px;font-size:var(--t-1);line-height:1}
.cyc--c .cyc__e--courante .cyc__p{box-shadow:0 0 0 2px var(--signal-l)}
.cyc--c .cyc__b{padding:0;gap:2px}
.cyc--c .cyc__t,.cyc--c .cyc__s{display:none}
.cyc--c .cyc__e--courante .cyc__t{display:block;font-size:var(--t-2)}
@media (max-width: 700px){
  .cyc{margin-left:calc(-1 * var(--r3));margin-right:calc(-1 * var(--r3));
    padding-left:var(--r2);padding-right:var(--r2)}
  .cyc__t,.cyc__s{display:none}
  .cyc__e--courante .cyc__t,.cyc__e--proche .cyc__t,.cyc__e--courante .cyc__s{display:block}
  /* v0.22.1 — un mot ENTIER plutôt que « Envoy… » ou « Négocia / tion » :
     le libellé se replie entre les mots, jamais au milieu de l'un d'eux,
     et l'étape courante prend la place qu'il lui faut. */
  .cyc__e--courante .cyc__t,.cyc__e--proche .cyc__t{white-space:normal;overflow:visible;text-overflow:clip;font-size:var(--t-1);overflow-wrap:normal;word-break:keep-all;hyphens:none}
  .cyc__e--proche{flex:2 1 0}
  .cyc__e--courante{flex:5 1 0}
  .cyc__p{width:18px;height:18px;font-size:var(--t-1)}
  .cyc__e::before{top:11px}
  .cyc__fin{display:none}
}
/* La timeline dans l'en-tête collant du répondant : un rang de pleine
   largeur sous le titre, qui colle avec lui. */
.tete__s{flex-basis:100%;width:100%;min-width:0}
.tete .cyc{position:static;margin:2px 0 0;padding:2px 0 0;border:0;background:none}
/* v0.28.1 (A) — LA FRISE SE REPLIE en une ligne d'état ; le bouton qui
   replie ou déplie est au bout, l'état mémorisé par compte. */
.cyc__pli{flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--trait);background:var(--blanc);
  color:var(--beton);cursor:pointer;font-size:var(--t-1);padding:0;font-family:var(--f-texte);align-self:center}
.cyc__pli:hover,.cyc__pli:focus-visible{background:var(--surface-2);color:var(--encre)}
.cyc--r{display:flex;align-items:center;gap:var(--r3);padding:4px 0}
.cyc__etat{font-size:var(--t-2);font-weight:600;color:var(--encre);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tete .cyc--r{margin:0;padding:0}

/* =====================================================================
   v0.20, lot C — L'OUVERTURE, LES CANDIDATURES (donneur d'ordre).
   ===================================================================== */
.ouv__l{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
.ouv__o{display:flex;flex-direction:column;gap:3px;padding:10px 12px;border:1px solid var(--trait);
  border-radius:var(--arr);background:var(--blanc);cursor:pointer;position:relative}
.ouv__o input{position:absolute;top:12px;right:12px;margin:0;accent-color:var(--signal)}
.ouv__o--a{border-color:var(--signal);box-shadow:0 0 0 2px var(--signal-l)}
.ouv__o--x{opacity:.55;cursor:not-allowed}
.ouv__t{font-weight:600;font-size:var(--t-2);padding-right:22px}
.ouv__s{font-size:var(--t-2);color:var(--beton);line-height:1.4}
.ouv__r{margin:8px 0 0;color:var(--ambre)}
.ouv__n{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:10px 0 0;font-size:var(--t-2);cursor:pointer}
.ouv__n input{margin:0;accent-color:var(--signal)}
.ouv__n small{flex-basis:100%;color:var(--beton);font-size:var(--t-2)}
.ouv__q{margin:8px 0 0}
.cand__l{list-style:none;margin:0;padding:0}
.cand__i{padding:10px 0;border-top:1px solid var(--trait-f)}
.cand__i:first-child{border-top:0;padding-top:0}
.cand__h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.cand__h .btn{margin-left:auto}
.cand__d{font-size:var(--t-2);color:var(--beton)}
.cand__m{margin:6px 0 0;font-size:var(--t-2);color:var(--encre-2);font-style:italic}
.cand__f{margin-top:10px;padding:12px 14px;border:1px solid var(--carte);border-radius:var(--arr);box-shadow:var(--om-c);
  background:var(--surface-2)}
.cand__p{margin-top:10px}
.cand__pl{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px}
.cand__pi{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:var(--t-2)}
.cand__pi > span:first-child{min-width:220px;color:var(--encre-2)}
.cand__pi--x > span:first-child,.cand__pi--e > span:first-child{color:var(--rouge)}

/* =====================================================================
   v0.20, lot C — LE FIL ET LE PROFIL D'ENTREPRISE (répondant).
   ===================================================================== */
.filc{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:var(--r3)}
.filc__i{border:1px solid var(--carte);border-radius:var(--arr);box-shadow:var(--om-c);background:var(--blanc);padding:14px 16px;
  display:flex;flex-direction:column;gap:6px;min-width:0}
.filc__i--loin{opacity:.78}
.filc__i--cible{border-color:var(--signal);box-shadow:0 0 0 3px var(--signal-l)}
.filc__h{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.filc__r{font-size:var(--t-2);font-weight:700}
.filc__t{margin:0;font-size:var(--t-4);line-height:1.25}
.filc__k{display:flex;flex-direction:column;gap:2px;font-size:var(--t-2);color:var(--encre-2)}
.filc__k b{color:var(--encre)}
.filc__a{margin:2px 0 0;font-size:var(--t-2);color:var(--beton);line-height:1.45}
.filc__b{margin-top:auto;padding-top:8px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}

/* =====================================================================
   v0.21, lot D — « CE QUI M'ATTEND » : l'accueil du répondant.
   Invitations, carte, fil dans mes métiers, autres repliées, état.
   Sur grand écran la carte tient la colonne de droite, collante ; en
   dessous de 1100 px elle se range dans le flux, après les invitations.
   ===================================================================== */
.attend{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--r5);min-width:0}
.attend__s{min-width:0}
.attend__carte{height:280px;width:100%;border:1px solid var(--carte);border-radius:var(--arr);box-shadow:var(--om-c);
  background:var(--surface-2);overflow:hidden;position:relative;z-index:0}
.attend__carte:focus-within{border-color:var(--signal);box-shadow:0 0 0 3px var(--anneau)}
.attend__leg{margin:8px 0 0}
.vide--c{padding:var(--r4)}
/* v0.22.1 — la grille lit la largeur DU CORPS, pas de la fenêtre : volet
   ouvert (360 px de moins), la carte à droite recouvrait les invitations.
   Une requête de conteneur ; les navigateurs sans la connaissent restent
   sur une colonne. */
.corps{container-type:inline-size}
@container (min-width:1040px){
  .attend{grid-template-columns:minmax(0,1fr) 380px;column-gap:var(--r5);align-items:start}
  .attend__s--inv{grid-column:1;grid-row:1}
  .attend__s--fil{grid-column:1;grid-row:2}
  .attend__s--autres{grid-column:1;grid-row:3}
  .attend__s--etat{grid-column:1 / -1;grid-row:4}
  .attend__s--carte{grid-column:2;grid-row:1 / span 3;position:sticky;top:calc(var(--entete) + 12px)}
  .attend__carte{height:460px}
}
.attend__s--etat{margin-bottom:var(--r5)}   /* v0.22.1 — les tuiles ne touchent plus le bas de la page */
.attend__s--etat .kpis{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
/* Les invitations : une ligne par consultation, cinq colonnes. */
.inv{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:8px;container-type:inline-size;container-name:inv}
/* v0.25, lot A3 — LES COLONNES D'ÉTAT ET D'ACTION PRENNENT LEUR CONTENU.
   Bornées à 130 et 112 px, elles laissaient « pas commencée » passer sur
   « remise le … » et « Reprendre » sortir de sa carte dès que le libellé
   était plus long que celui du jeu d'essai. `max-content` : la colonne
   s'élargit à ce qu'elle porte, et c'est l'objet — la seule colonne
   élastique — qui cède. La grille de la liste (`.inv`) est `minmax(0,1fr)`
   par construction : une carte ne peut pas dépasser sa liste. */
.inv__i{display:grid;grid-template-columns:minmax(0,96px) minmax(160px,1fr) max-content max-content max-content;align-items:center;gap:6px 14px;   /* v0.22.1 — des colonnes alignées d'une invitation à l'autre, mais qui cèdent avant d'écraser l'objet */
  padding:10px 14px;background:var(--blanc);border:1px solid var(--carte);border-radius:var(--arr);box-shadow:var(--om-c);cursor:pointer;
  transition:border-color var(--duree),box-shadow var(--duree)}
.inv__i:hover{border-color:var(--beton-c)}
.inv__r{font-weight:700;font-size:var(--t-2)}
.inv__o{display:flex;flex-direction:column;gap:2px;min-width:0}
.inv__o b{font-size:var(--t-3);line-height:1.3}
.inv__c{font-size:var(--t-2);color:var(--encre-2);overflow-wrap:anywhere}   /* v0.22.1 — le lieu se lit en entier, il ne se coupe plus en « Vit… » */
.inv__e{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.inv__d{font-size:var(--t-2);color:var(--beton);white-space:nowrap}
.inv__t{white-space:nowrap}
.inv__a .btn{white-space:nowrap}
/* Sous 720 px de LISTE — volet ouvert, carte à côté, tablette —, la carte
   passe sur trois rangs : l'état sous la date, l'action en bas. Une requête
   de conteneur sur la liste elle-même, pas sur la fenêtre : c'est la place
   réelle qui décide. */
@container inv (max-width:760px){
  /* La place manque pour cinq colonnes : LA PASTILLE PASSE SOUS LA DATE,
     et l'action garde sa colonne. */
  .inv__i{grid-template-columns:auto minmax(0,1fr) max-content max-content;grid-template-areas:"r o e a" "r o t a";row-gap:2px}
  .inv__r{grid-area:r} .inv__o{grid-area:o} .inv__e{grid-area:e} .inv__t{grid-area:t;justify-self:start} .inv__a{grid-area:a}
}
/* v0.25, lot A3 — sous 560 px, l'état et l'échéance ont CHACUN leur rang, et
   les pastilles peuvent se replier : « consultation classée sans suite » à
   côté de « remise reportée au 31/12/2026 » ne tenait pas sur une ligne de
   390 px, la seconde passait sur la date et la carte débordait. */
@container inv (max-width:560px){
  .inv__i{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"r o" "e e" "t t" "a a";row-gap:6px}
  .inv__t{justify-self:start;white-space:normal}
  .inv__e .et,.inv__t .et{white-space:normal;line-height:1.35;height:auto;min-height:0;padding-top:3px;padding-bottom:3px}
  .inv__a .btn{width:100%}
  .inv__c{white-space:normal}
}
@media(max-width:760px){
  .inv__i{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"r o" "e e" "t t" "a a"}
  .inv__r{grid-area:r} .inv__o{grid-area:o} .inv__e{grid-area:e} .inv__t{grid-area:t;justify-self:start;white-space:normal} .inv__a{grid-area:a}
  .inv__e .et,.inv__t .et{white-space:normal;line-height:1.35;height:auto;min-height:0;padding-top:3px;padding-bottom:3px}
  .inv__a .btn{width:100%}
  .inv__c{white-space:normal}
}
/* Carte et liste liées : survoler l'un éclaire l'autre. */
.attend--vise{border-color:var(--signal)!important;box-shadow:0 0 0 3px var(--signal-l)}
.attend__autres .filc{margin-top:4px}
.attend__crit{margin:-6px 0 var(--r3)}
.pe__pl{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pe__pi{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;
  padding:10px 12px;border:1px solid var(--carte);border-radius:var(--arr);box-shadow:var(--om-c);background:var(--blanc)}
.pe__pn{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:var(--t-2);min-width:0}
.pe__pa{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 12px}
.pe__pa .neg__c{flex:0 1 170px}
/* v0.21, lot E — l'état d'une validité se lit au filet de gauche AUTANT
   qu'au mot : la couleur seule ne dit rien à qui ne la voit pas. */
.pe__pi{border-left:3px solid var(--trait)}
.pe__pi--a_jour{border-left-color:var(--vert)}
.pe__pi--bientot{border-left-color:var(--ambre)}
.pe__pi--expire{border-left-color:var(--rouge)}
.pe__pi--absent{border-left-color:var(--beton-c)}
.pe__pn b{font-size:var(--t-3)}

/* Le résumé des validités, sur la fiche de l'offre et sur la candidature. */
.val{margin:0;display:grid;gap:6px;list-style:none;padding:0}
.val__i{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:var(--t-2);
  padding:7px 10px;border:1px solid var(--trait);border-left-width:3px;border-radius:var(--arr-s);background:var(--blanc)}
.val__i--a_jour{border-left-color:var(--vert)}
.val__i--bientot{border-left-color:var(--ambre)}
.val__i--expire{border-left-color:var(--rouge)}
.val__i--absent{border-left-color:var(--beton-c)}
.val__l{font-weight:600;color:var(--encre)}
.val__f{margin-left:auto;font-size:var(--t-2);color:var(--beton)}
.val__avert{margin:8px 0 0;font-size:var(--t-2);color:var(--beton);line-height:1.5}
/* v0.22, lot A — le commentaire d'alignement, à côté du montant. */
.al__c{display:block;font-size:var(--t-2);color:var(--encre-2);line-height:1.45;margin-top:3px}
.al__com{display:block;width:100%;margin:0;font-size:var(--t-2);min-height:36px}
/* v0.22.1, lot B — le tableau d'alignement : largeurs fixes, l'entreprise
   à gauche, les trois montants côte à côte, le commentaire prend le reste. */
.tbl td[data-l="Réf."]{white-space:nowrap}   /* v0.22.1 — « CONS-028 » ne se coupe pas en deux quand la page se resserre */
.tbl--al{table-layout:fixed;width:100%}
.tbl--al .tbl--al__e{width:26%}
.tbl--al col.al-m{width:132px} .tbl--al col.al-a{width:150px} .tbl--al col.al-r{width:124px} .tbl--al col.al-n{width:118px}
/* v0.23, lot A2 / A6 — AUCUN EN-TÊTE À LA VERTICALE, AUCUN TABLEAU QUI
   DÉBORDE À 900 PX. Un en-tête ne se casse pas lettre à lettre : il garde
   sa largeur, et c'est le cadre qui défile s'il le faut. La colonne Objet
   (`.obj`) est la dernière à se réduire — vingt caractères au moins ; les
   colonnes secondaires (`.sec`) se replient avant elle, sous 1000 px. */
.tbl th{overflow-wrap:normal;word-break:keep-all;hyphens:none}   /* un mot d'en-tête ne se casse jamais lettre à lettre ; deux mots peuvent se replier */
.tbl th.obj{min-width:20ch}
@media(max-width:1000px){
  .tbl .sec{display:none}
  .tbl--tri th{width:auto!important}
  .tbl--al{table-layout:auto}
  .tbl--al .tbl--al__e{width:auto;min-width:130px}
  .tbl--al col.al-m{width:96px} .tbl--al col.al-a{width:108px} .tbl--al col.al-r{width:92px} .tbl--al col.al-n{width:84px}
  .tbl--al td[data-l="Alignement"] input{max-width:100px}
  .dir__cyc{min-width:170px;width:auto}
  .clst th{font-size:var(--t-1)}
  .tbl td,.tbl th{padding-left:8px;padding-right:8px}
  .tbl td .et,.tbl td.rang{white-space:normal}
  .tbl--tri th[style]{width:auto!important}
  .tbl td.rang .btn{white-space:normal}
}
.tbl--al td,.tbl--al th{overflow-wrap:anywhere}
.tbl--al td[data-l="Alignement"] input{width:100%;max-width:138px;padding-left:8px;padding-right:8px}   /* v0.22.1 — « + 68 596 € » se lit en entier */
.al__com[aria-invalid="true"]{border-color:var(--rouge)}

/* =====================================================================
   v0.21, lot F — la checklist des pièces de contractualisation.
   Une barre d'avancement, une ligne par pièce, et l'état en mots.
   ===================================================================== */
.ctr__b{height:8px;border-radius:6px;background:var(--trait-f);overflow:hidden;margin:0 0 6px}
.ctr__j{height:100%;background:var(--vert);transition:width var(--duree-l) var(--courbe)}
.ctr__r{margin:0 0 var(--r3);font-size:var(--t-2);color:var(--beton)}
.ctr__r b{color:var(--encre);font-family:var(--f-data)}
.ctr{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ctr__i{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 14px;align-items:start;
  padding:10px 14px;background:var(--blanc);border:1px solid var(--trait);
  border-left:3px solid var(--ambre);border-radius:var(--arr)}
.ctr__i--recue{border-left-color:var(--vert)}
.ctr__i--na{border-left-color:var(--beton-c);opacity:.82}
.ctr__t{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-width:0}
.ctr__t b{font-size:var(--t-3)}
.ctr__n{font-size:var(--t-2);color:var(--beton);flex-basis:100%}
.ctr__c{font-size:var(--t-2);color:var(--encre-2);flex-basis:100%}
.ctr__d{font-size:var(--t-2);color:var(--encre-2);flex-basis:100%;
  border-left:2px solid var(--trait);padding-left:8px}
.ctr__a{display:flex;gap:8px;align-items:center}
.ctr__f{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 12px;
  margin-top:8px;padding-top:10px;border-top:1px solid var(--trait-f)}
.ctr__f .ctr__mot{flex:1 1 260px}
.ctr__f .ctr__mot input{width:100%}
@media(max-width:640px){
  .ctr__i{grid-template-columns:minmax(0,1fr)}
  .ctr__a .btn{width:100%}
}
@media (max-width:700px){.filc{grid-template-columns:1fr}}

/* =====================================================================
   v0.20, lot D — LA VUE DE DIRECTION. Une ligne par consultation, triée
   par risque ; la timeline compacte dans la colonne du milieu.
   ===================================================================== */
.dir__a{margin:0 0 10px}
.dir__f{margin:0 0 12px}
.dir__f .puce i{font-style:normal;font-size:var(--t-2);margin-left:4px;color:var(--beton)}
.dir__t td{vertical-align:middle}
/* v0.21, lot B — à 1366 px et 16 px de corps, la ligne se lit sans se
   pencher : la référence ne se coupe pas, l'objet et le chantier
   prennent la place qu'il faut, la timeline garde ses mots. */
.dir__t td:first-child b{white-space:nowrap}
/* v0.22.1 — la recette visuelle a vu l'objet et le chantier sur quatre
   lignes (≈100 px) face à une timeline et un signal de 330 px chacun :
   la timeline prend 24 %, le signal ne dépasse pas 220 px, l'objet et
   le chantier ont au moins 170 px. */
.dir__cyc{min-width:260px;width:24%}
/* v0.22.1 — le signal de la direction se plie. La colonne est bornée et
   la ligne porte maintenant son action (lot B) : sans pliure, la pastille
   passait sous le bouton « Ouvrir ». */
.dir__t td[data-l="Signal"] .et{white-space:normal;text-align:left}
.dir__t th:nth-child(2),.dir__t th:nth-child(3){min-width:170px}
.dir__t td[data-l="Signal"]{max-width:220px}
.dir__t td[data-l="Qui la tient"]{white-space:nowrap}
.dir__t th:nth-child(4){white-space:nowrap}
.dir__t .cyc--c .cyc__e--courante .cyc__t{font-size:var(--t-2);white-space:nowrap;overflow:visible}
.dir__r--r{box-shadow:inset 3px 0 0 var(--rouge)}
.dir__r--a{box-shadow:inset 3px 0 0 var(--ambre)}
.dir__r:focus-visible{outline:2px solid var(--signal);outline-offset:-2px}
@media (max-width:900px){
  .dir__cyc{min-width:0;width:auto}
  .dir__t .cyc--c .cyc__l{max-width:320px}
}

/* =====================================================================
   v0.21, lot B — Le mouvement dit ce qui s'est passé (app.html, `MOUV`).
   Une durée, une courbe, jamais de rebond ; tout se coupe avec
   `prefers-reduced-motion` (les durées passent à zéro plus haut).
   ===================================================================== */
.contenu--vient{animation:apparait var(--duree) var(--courbe)}
.ajd__i--part{animation:ajd-part var(--duree-l) var(--courbe) forwards;pointer-events:none;overflow:hidden}
@keyframes ajd-part{from{opacity:1;max-height:120px}to{opacity:0;max-height:0;padding-top:0;padding-bottom:0;border-width:0}}
.cyc__e--vient .cyc__p{animation:cyc-coche var(--duree-l) var(--courbe)}
/* Pas de rebond : la pastille grandit jusqu'à sa taille et l'anneau se
   dissipe — une seule direction, une seule courbe. */
@keyframes cyc-coche{from{transform:scale(.6);box-shadow:0 0 0 0 var(--vert-l)}to{transform:none;box-shadow:0 0 0 8px transparent}}
.nav__c--change{animation:compte var(--duree-l) var(--courbe)}
@keyframes compte{from{transform:translateY(-4px);opacity:.3}to{transform:none;opacity:1}}
details.pli[open] .pli__b{animation:apparait var(--duree) var(--courbe)}
.fo{animation:apparait var(--duree) var(--courbe)}

/* =====================================================================
   v0.25, lot C — LE MOUVEMENT INFORME (public/pb-mouvement.js).
   Quatre gestes, 180 ms, rien au chargement, rien sous
   `prefers-reduced-motion` (le module ne pose alors aucune classe).
   ===================================================================== */
/* C1 — l'élément qui glisse vers sa nouvelle place reste cliquable et
   passe au-dessus de ses voisins le temps du trajet. */
.pb-mvt{position:relative;z-index:2;will-change:transform}
/* C2 — la fiche grandit depuis la carte : l'origine est posée par le module. */
.fo__c.pb-depuis{animation:pb-depuis 180ms cubic-bezier(.2,.7,.2,1) both}
@keyframes pb-depuis{from{transform:scale(.94);opacity:.4}to{transform:none;opacity:1}}
/* C4 — un chiffre qui change : un éclat sur la valeur, pas un compteur. */
.pb-eclat{animation:pb-eclat 600ms cubic-bezier(.2,.7,.2,1)}
@keyframes pb-eclat{0%{background-color:var(--signal-l,#DCE9FA);box-shadow:0 0 0 4px var(--signal-l,#DCE9FA)}100%{background-color:transparent;box-shadow:0 0 0 0 transparent}}
td.pb-eclat,li.pb-eclat{border-radius:4px}

/* =====================================================================
   v0.21, lot C — Les panneaux de la barre d'outils : messagerie, agenda.
   ===================================================================== */
.msgv__h{margin:0 0 10px;font-size:var(--t-2);color:var(--beton)}
/* v0.22.1, lot C — le panneau des notifications. */
.ntf__h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 10px}
.ntf__l{list-style:none;margin:0;padding:0}
.ntf__i{border:1px solid var(--trait);border-radius:var(--arr-s);background:var(--blanc);margin-bottom:6px;overflow:hidden}
.ntf__i--nl{border-color:var(--signal);box-shadow:inset 3px 0 0 var(--signal)}
.ntf__b{display:block;width:100%;text-align:left;border:0;background:none;padding:8px 10px;cursor:pointer;font:inherit;color:var(--encre)}
.ntf__b:hover{background:var(--surface-2)}
.ntf__k{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:4px}
.ntf__q{font-size:var(--t-1);color:var(--beton);font-family:var(--f-data)}
.ntf__t{display:block;font-size:var(--t-2);font-weight:600}
.ntf__d{display:block;font-size:var(--t-2);color:var(--encre-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msgv__vide{margin:0;font-size:var(--t-2);color:var(--beton)}
.msgv__g{margin:0 0 14px}
.msgv__c{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:var(--t-2);font-weight:700;
  padding-bottom:4px;border-bottom:1px solid var(--trait-f)}
.msgv__o{font-weight:400;color:var(--encre-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.msgv__n{font-style:normal;font-family:var(--f-data);font-size:var(--t-1);font-weight:700;background:var(--signal);
  color:var(--sur-signal);border-radius:9px;padding:0 6px;line-height:18px;flex:none}
.msgv__f{border:1px solid var(--trait);border-radius:var(--arr-s);background:var(--blanc);margin-bottom:6px;overflow:hidden}
.msgv__f--nl{border-color:var(--signal);box-shadow:inset 3px 0 0 var(--signal)}
.msgv__t{display:block;width:100%;text-align:left;border:0;background:none;padding:8px 10px;cursor:pointer;font:inherit;color:var(--encre)}
.msgv__t:hover{background:var(--surface-2)}
.msgv__avec{display:flex;align-items:center;gap:6px;font-weight:600;font-size:var(--t-2)}
.msgv__d{display:block;font-size:var(--t-1);color:var(--beton);margin-top:2px}
.msgv__x{display:block;font-size:var(--t-2);color:var(--encre-2);margin-top:3px}
.msgv__f--nl .msgv__x{color:var(--encre);font-weight:500}
.msgv__b{border-top:1px solid var(--trait-f);padding:8px 10px 10px;background:var(--surface-2)}
.msgv__m{margin:0 0 8px;padding:8px 10px;border-radius:var(--arr-s);background:var(--blanc);border:1px solid var(--trait-f)}
.msgv__m--moi{background:var(--signal-l);border-color:transparent}
.msgv__m--nl{border-color:var(--signal)}
.msgv__q{font-size:var(--t-1);font-weight:700;color:var(--encre-2);margin-bottom:3px}
.msgv__q span{font-weight:400;color:var(--beton);margin-left:6px}
.msgv__p{font-size:var(--t-2);line-height:1.5;white-space:pre-wrap}
.msgv__r textarea{min-height:64px;font-size:var(--t-2)}
.msgv__ra{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:6px}

.agd__h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.agd__nav{display:flex;align-items:center;justify-content:space-between;gap:6px;margin:0 0 8px}
.agd__titre{font-size:var(--t-2);text-align:center;flex:1}
.agd__j{padding:6px 0 8px;border-top:1px solid var(--trait-f)}
.agd__j--auj{background:var(--surface-2);border-radius:var(--arr-s);padding:6px 8px 8px;border-top:0;margin:0 -8px}
.agd__j--vide{padding:4px 0}
.agd__jt{display:flex;align-items:center;gap:8px;font-size:var(--t-2);font-weight:700;margin-bottom:4px}
.agd__jt .et{text-transform:none;font-weight:600}
.agd__j--vide .agd__jt{font-weight:500;color:var(--beton);margin:0;display:inline-flex}
.agd__rien{font-size:var(--t-2);color:var(--beton-c);margin-left:8px}
.agd__e{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;align-items:baseline;padding:6px 8px;margin:3px 0;
  border-radius:var(--arr-s);border:1px solid var(--trait);background:var(--blanc);text-decoration:none;color:var(--encre)}
.agd__e:hover{border-color:var(--signal)}
.agd__l{font-size:var(--t-1);font-weight:700;letter-spacing:.03em;text-transform:uppercase;grid-column:1/3}
.agd__e--a .agd__l{color:var(--ambre)} .agd__e--r .agd__l{color:var(--rouge)} .agd__e--v .agd__l{color:var(--vert)} .agd__e--b .agd__l{color:var(--bleu)}
.agd__r{font-size:var(--t-2);grid-column:1/3}
.agd__a{font-size:var(--t-1);color:var(--beton);grid-column:1/3}
.agd__grille{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:8px}
.agd__en{font-family:var(--f-data);font-size:var(--t-1);text-transform:uppercase;color:var(--beton-c);text-align:center;padding:2px 0}
.agd__c{position:relative;border:1px solid var(--trait-f);background:var(--blanc);border-radius:var(--arr-s);min-height:44px;
  font:inherit;font-size:var(--t-2);color:var(--encre);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.agd__c--hors{color:var(--beton-c);background:transparent}
.agd__c--auj{border-color:var(--signal);font-weight:700}
.agd__c--sel{background:var(--signal-l)}
.agd__pt{font-style:normal;font-family:var(--f-data);font-size:var(--t-1);font-weight:700;background:var(--signal);color:var(--sur-signal);border-radius:9px;min-width:18px;line-height:18px;text-align:center}
.agd__note{margin:8px 0 10px}
.agd__ics{border-top:1px solid var(--trait);padding-top:8px}
.agd__ics summary{cursor:pointer;font-weight:600;font-size:var(--t-2)}
.agd__adr{margin:8px 0}
.agd__adr input{font-family:var(--f-data);font-size:var(--t-1)}
.agd__ab{display:flex;flex-wrap:wrap;gap:6px}

/* =====================================================================
   v0.23, lot C — L'ÉQUITÉ RENDUE VISIBLE

   Les plis scellés, le barème lu par le répondant, le bilan du
   non-retenu, le dossier tel qu'envoyé.
   ===================================================================== */
.pli-s__n{margin:0 0 6px;font-size:var(--t-4)}
.pli-s__n b{font-size:var(--t-6);letter-spacing:-.5px}
/* Le barème : une ligne par critère, les points à droite, ce que le
   critère mesure sous son nom. */
.bar__l{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.bar__i{display:flex;align-items:baseline;justify-content:space-between;gap:var(--r3);
  padding:7px 0;border-bottom:1px solid var(--trait-f)}
.bar__i:last-child{border-bottom:0}
.bar__i>span:first-child{min-width:0}
.bar__m{display:block;font-size:var(--t-2);color:var(--beton);line-height:1.4;margin-top:2px}
.bar__p{flex:none;font-weight:700;color:var(--encre)}
/* Les poids en modification : un champ court, aligné sur la colonne des
   points, assez haut pour le doigt. */
.bar__c{flex:none;width:6ch;text-align:right;padding:6px 8px;min-height:44px}
.bar__f{margin-top:var(--r3);padding-top:var(--r3);border-top:1px solid var(--trait-f)}
/* Le bilan : la ligne de l'entreprise se distingue des anonymes. */
.bil--moi td{background:var(--signal-l)}
.bil--moi td:first-child{box-shadow:inset 3px 0 0 var(--signal)}
/* Le dossier tel qu'envoyé : une liste de faits, repliée. */
.dos-e{border:1px solid var(--trait);border-radius:var(--arr);padding:0;margin:var(--r3) 0 0;background:var(--blanc)}
.dos-e__h{display:flex;align-items:baseline;gap:var(--r3);flex-wrap:wrap;padding:10px 14px;cursor:pointer;list-style:none}
.dos-e__h::-webkit-details-marker{display:none}
.dos-e[open]>.dos-e__h{border-bottom:1px solid var(--trait)}
.dos-e__b{padding:10px 14px 14px}
.dos-e__l{display:grid;grid-template-columns:minmax(150px,200px) minmax(0,1fr);gap:4px var(--r3);
  padding:6px 0;border-bottom:1px solid var(--trait-f)}
.dos-e__l:last-of-type{border-bottom:0}
.dos-e__k{font-family:var(--f-data);font-size:var(--t-1);letter-spacing:.06em;text-transform:uppercase;color:var(--beton)}
@media(max-width:640px){ .dos-e__l{grid-template-columns:1fr} }

/* =====================================================================
   v0.23, lots D et E — LA FICHE ENTREPRISE, ET LES TRAJETS.

   La fiche est un écran de lecture : des faits en lignes, une carte, une
   table. Rien n'y clignote, et ce qui se clique se voit.
   ===================================================================== */
/* Un nom d'entreprise est un lien, partout : souligné à la demande, de la
   couleur du texte — un tableau où trente noms sont bleus ne se lit plus. */
.lien-e{color:inherit;text-decoration:none;border-bottom:1px dotted var(--beton)}
.lien-e:hover,.lien-e:focus-visible{color:var(--signal-d);border-bottom-color:var(--signal)}
/* « Temps hors trafic » : une fois par écran, et discret. */
.hors-tr{font-size:var(--t-2);color:var(--beton)}
/* Ce qu'on lui doit, en tête de fiche. */
.fic-ss__l{margin:6px 0 0;padding-left:18px}
.fic-ss__l li{margin:2px 0}
.fic-en--ss td{background:var(--ambre-l)}
.fic-en--ss td:first-child{box-shadow:inset 3px 0 0 var(--ambre)}
/* Identité : une liste de faits, comme le dossier envoyé. */
.fic-bd{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 var(--r3)}
.fic-id{display:grid;gap:0}
.fic-id__l{display:grid;grid-template-columns:minmax(120px,170px) minmax(0,1fr);gap:4px var(--r3);
  padding:6px 0;border-bottom:1px solid var(--trait-f)}
.fic-id__l:last-child{border-bottom:0}
.fic-id__k{font-family:var(--f-data);font-size:var(--t-1);letter-spacing:.06em;text-transform:uppercase;color:var(--beton)}
/* v0.25, lot B9 — la ligne « Compte répondant » : le compte, par quoi le lien tient, et le geste pour le poser. */
.fic-cpt__p{color:var(--beton);font-size:var(--t-2);margin-left:4px}
.fic-cpt__f{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
.fic-cpt__f input{flex:1 1 220px;min-width:0;max-width:340px}
/* v0.25, lot D1 — la conséquence des passages, sous le trajet de la carte d'offre. */
.oc__pas{display:block;font-size:var(--t-1);color:var(--encre-2);margin-top:2px}
/* Validités : une ligne par pièce, son état à droite. */
.fic-va{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.fic-va__i{display:flex;align-items:baseline;justify-content:space-between;gap:var(--r3);
  padding:6px 0;border-bottom:1px solid var(--trait-f)}
.fic-va__i:last-child{border-bottom:0}
/* Ancienneté : quatre nombres, et ce qu'ils comptent. */
.fic-fa{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:var(--r3)}
.fic-fa__i{display:flex;flex-direction:column;gap:2px;padding:8px 10px;
  border:1px solid var(--trait-f);border-radius:var(--arr-s);background:var(--surface-2)}
.fic-fa__i b{font-size:var(--t-6);letter-spacing:-.5px;line-height:1.1}
.fic-fa__i span{font-size:var(--t-2);color:var(--beton)}
/* Retours d'expérience : un par chantier, la note puis le mot. */
.fic-rex{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.fic-rex__i{padding:8px 10px;border:1px solid var(--trait-f);border-radius:var(--arr-s);background:var(--blanc)}
.fic-rex__h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--r3)}
.fic-rex__t{margin:4px 0 0;font-size:var(--t-3);line-height:1.5}
@media(max-width:640px){ .fic-id__l{grid-template-columns:1fr} }
/* v0.23, lot E — les repères se lisent sur satellite. v0.25, lot A4 — le
   halo et la forme viennent maintenant du repère commun (`.rp`). */
/* v0.23, lot F — la synthèse qui suggère. Le texte se lit d'un souffle ;
   la ligne du dessous ne bouge jamais, et rappelle qui décide. */
.syn__t{max-width:74ch}
.syn__f{margin:0;white-space:pre-wrap;font-family:var(--f-data);font-size:var(--t-3);line-height:1.6}
.syn__a{max-width:74ch}
/* v0.24, lot F/G — une synthèse écrite avant les dernières notes se lit
   encore, mais elle ne se lit plus comme l'état du dossier : elle pâlit, et
   le bandeau au-dessous dit pourquoi. */
.syn__t--vieille,.syn__f--vieille{opacity:.62}
.syn__v{margin:8px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--r2)}

/* =====================================================================
   v0.23, lot H — « SIGNALER », À PART DANS LA BARRE.

   Un outil sert à travailler ; celui-là sert à dire que ça ne marche pas.
   Il descend en bas de la barre, derrière un filet, et son panneau montre
   ce qui partira avec le message — sans rien demander.
   ===================================================================== */
.volet__pb--part{margin-top:8px;border-top:1px solid var(--trait)}
.sig__i{margin:0 0 var(--r3)}
/* v0.25 (recette à 390) — trois colonnes de 110 px coupaient « consultations »
   en « consultati » / « ons » : deux colonnes de 140 px au moins, et un mot
   ne se coupe que s'il ne tient pas seul sur sa ligne (un identifiant
   long, oui ; un mot, non). */
.sig__f{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:6px;margin:var(--r3) 0 0}
.sig__f div{padding:6px 8px;border:1px solid var(--trait-f);border-radius:var(--arr-s);background:var(--surface-2)}
.sig__f dt{font-family:var(--f-data);font-size:var(--t-1);letter-spacing:.06em;text-transform:uppercase;color:var(--beton)}
.sig__f dd{margin:2px 0 0;font-size:var(--t-3);overflow-wrap:break-word}
.sig__e{margin:6px 0 0;padding-left:18px;font-family:var(--f-data);font-size:var(--t-2);color:var(--rouge)}
.sig__e:empty{display:none;margin:0}
.sig__c{margin-top:var(--r3);display:grid;gap:6px;justify-items:start}
.sig__c img{max-width:100%;border:1px solid var(--trait);border-radius:var(--arr-s)}
/* v0.23.1, lot C — L'ATTENTE DE L'IMAGE SE VOIT. La capture du document
   prend une fraction de seconde ; le bouton d'envoi reste inactif tant
   qu'elle n'est pas tranchée, et cette ligne dit pourquoi. Un bouton
   inactif sans raison écrite est une panne aux yeux de qui l'attend. */
.sig__a{margin:var(--r3) 0 0;padding:8px 10px;border:1px dashed var(--trait);
  border-radius:var(--arr-s);background:var(--surface-2);color:var(--encre-2);
  font-size:var(--t-2)}
.sig__p{margin:var(--r3) 0 0}
/* Les signalements dans l'administration : un bloc par retour, ce que la
   page savait d'elle-même en dessous, et les traités en retrait. */
.sgl{display:grid;gap:10px}
.sgl__i{padding:10px 12px;border:1px solid var(--trait);border-radius:var(--arr);background:var(--blanc)}
.sgl__i--t{opacity:.62}
.sgl__h{display:flex;align-items:baseline;gap:var(--r3);flex-wrap:wrap}
.sgl__t{margin:6px 0 0;line-height:1.55;white-space:pre-wrap}
.sgl__f{display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:6px;font-size:var(--t-2);color:var(--beton)}
.sgl__e{margin:6px 0 0;padding-left:18px;font-family:var(--f-data);font-size:var(--t-2);color:var(--rouge)}
.sgl__c{display:inline-block;margin-top:6px;font-size:var(--t-2)}
/* v0.23, lot H — les notifications groupées par consultation : une
   référence, puis ce qui est arrivé dessus. */
.ntf__g{margin:0 0 var(--r3)}
.ntf__gr{display:flex;align-items:baseline;justify-content:space-between;gap:var(--r3);
  margin:0 0 4px;font-size:var(--t-3);font-weight:600}
.ntf__gn{font-size:var(--t-2);color:var(--beton);font-weight:400}

/* =====================================================================
   v0.23, lot I — LES PAGES 404 ET 500, DANS LA COQUILLE.

   Une page d'erreur en texte nu fait croire le site cassé, et ne donne
   aucun chemin de retour. Celles-ci portent la marque, disent ce qui
   s'est passé en une phrase, et proposent trois sorties.
   ===================================================================== */
.page-err{min-height:100vh;display:flex;flex-direction:column;background:var(--fond)}
.err{flex:1;display:flex;flex-direction:column;justify-content:center;
  max-width:62ch;margin:0 auto;padding:var(--r5) var(--r4)}
.err__c{font-size:64px;line-height:1;color:var(--trait);letter-spacing:-2px;margin:0}
.err__t{margin:var(--r3) 0 0;font-size:var(--t-6);line-height:1.15}
.err__p{margin:var(--r3) 0 0;font-size:var(--t-4);line-height:1.6}
.err__q{margin:8px 0 0;color:var(--beton);line-height:1.6}
.err__b{margin-top:var(--r4)}
/* L'écran dont l'API ne répond pas : la même écriture, mais DANS
   l'application, sans le grand chiffre — le numéro de statut ne dit rien à
   personne, alors que « votre connexion semble coupée » dit tout. Le
   message technique reste, en bas et en petit : un testeur le recopie dans
   un signalement. */
.err--api{padding-top:var(--r5);min-height:52vh;justify-content:flex-start}
.err__d{margin:var(--r4) 0 0;font-family:var(--f-data);font-size:var(--t-1);
  color:var(--beton);word-break:break-word}

/* v0.24.1, lot E — le registre de consultation : la même grammaire que
   les fils, un cadre ambre pour ce qui attend une réponse. */
.reg__l{list-style:none;margin:0 0 var(--r3);padding:0;display:grid;gap:8px}
.reg__i{padding:10px 12px;border:1px solid var(--trait);border-radius:var(--arr);background:var(--blanc)}
.reg__i--q{border-color:var(--ambre);box-shadow:inset 3px 0 0 var(--ambre)}
.reg__f{margin-top:8px;padding-top:8px;border-top:1px dashed var(--trait)}
.msg-ethique{font-size:var(--t-2)}

/* v0.24.1, lot B — les sorties d'une ligne ancienne prennent une ligne
   sous les cinq colonnes ; le reste de la zone est un pli dans le pli. */
.ajd__x2{grid-column:1 / -1;display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:0 0 4px}
.ajd__d{max-width:170px;padding:4px 8px;min-height:36px}
.ajd__reste{margin:0}
.ajd__rs{display:flex;align-items:center;gap:8px;padding:8px 14px;cursor:pointer;list-style:none;
  font-size:var(--t-2);color:var(--encre-2);border-top:1px solid var(--trait-f)}
.ajd__rs::-webkit-details-marker{display:none}
.ajd__rs .ajd__x{margin-left:auto}
@media(max-width:700px){.ajd__x2{grid-column:1 / -1;grid-area:auto}}
/* v0.24.1, lot B — une seule présentation des chantiers à la fois. */
.tb__g--une{grid-template-columns:minmax(0,1fr)}
.tb__bascule{display:flex;gap:6px;margin:0 0 var(--r2)}
.tb__l--sous{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px}
.tb__l--sous li{display:inline}
/* v0.24.1, lot C — les métriques de la synthèse : des tuiles de lecture,
   la première plus large parce qu'elle compte plus. */
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--r3);margin:0 0 var(--r3)}
.kpi{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--carte);border-radius:var(--arr);background:var(--blanc);box-shadow:var(--om-c)}
.kpi[data-kpi="concentration"]{grid-column:span 2;border-color:var(--encre)}
/* v0.25 (recette à 1920) — la Synthèse a neuf tuiles, la première sur
   deux colonnes : dix cases. À cinq colonnes, deux rangs pleins ; en
   `auto-fill`, la seconde rangée laissait trois cases vides à 1920. Le
   tableau de bord de l'administration a six tuiles : six par rang sur un
   grand écran, trois par rang en dessous — la règle à cinq colonnes
   l'avait laissé à cinq et une seule. À 1366, six colonnes donneraient
   140 px de texte à « 3 986 341 € » : deux rangs de trois. Chaque grille
   dit son compte. */
@media(min-width:1200px){ .kpis--dix{grid-template-columns:repeat(5,minmax(0,1fr))} }
@media(min-width:1600px){ .kpis--six{grid-template-columns:repeat(6,minmax(0,1fr))} }
@media(min-width:561px) and (max-width:1599px){ .kpis--six{grid-template-columns:repeat(3,minmax(0,1fr))} }
/* Les deux tables des montants ne s'étirent pas sur 900 px chacune. */
.kpi-t{max-width:640px}
.kpi__v{font-size:var(--t-6);line-height:1.1;font-weight:700}
.kpi__l{font-size:var(--t-2);color:var(--encre-2)}
.kpi__n{font-size:var(--t-1);color:var(--beton)}
.kpi-det{margin:0 0 var(--r2)}
.kpi-det summary{cursor:pointer;display:flex;align-items:center;gap:8px;min-height:44px;list-style:none}
.kpi-det summary::-webkit-details-marker{display:none}
/* Un pli se reconnaît à sa flèche : sans elle, un titre replié se lit
   comme un bloc vide (relecture 0.24.1). */
.kpi-det summary::after{content:'▾';font-size:var(--t-2);color:var(--beton);transition:transform .15s}
.kpi-det[open] summary::after{transform:rotate(180deg)}
.kpi-t td.num{text-align:right;font-family:var(--f-data)}
@media(max-width:700px){.kpi[data-kpi="concentration"]{grid-column:span 1}}
/* v0.24.1, lot F — le repli se présente comme un repli. */
.syn__repli{margin:0 0 6px;font-size:var(--t-2);color:var(--encre-2)}
.syn__reste{display:block}
/* v0.24.1, lot F — la lecture de la semaine, et la phrase du tableau de bord. */
.lect__t{margin:0;font-size:var(--t-3);line-height:1.5}
.lect__t--calc{color:var(--encre-2)}
.tb__phrase{margin:0 0 var(--r2);padding:6px 12px;border-left:3px solid var(--encre);background:var(--surface-2);border-radius:0 var(--arr) var(--arr) 0;font-size:var(--t-2);line-height:1.4}
/* v0.24.1, lot D — les qualifications et le bloc « déclaré par l'entreprise ». */
.qua__f{margin:0 0 4px;border:1px solid var(--trait);border-radius:var(--arr);padding:4px 10px}
.qua__fs{cursor:pointer;font-size:var(--t-2);font-weight:600;color:var(--encre-2);list-style:none;padding:4px 0}
.qua__fs::-webkit-details-marker{display:none}
.qua__l{display:flex;gap:8px;align-items:center;padding:4px 0;font-size:var(--t-2)}
.qua__l--on{color:var(--encre);font-weight:600}
.qua__u{font-style:normal;font-size:var(--t-1);color:var(--beton);border:1px solid var(--trait);border-radius:10px;padding:0 6px}
.qua__d{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 6px 26px}
.qua__n{max-width:180px;padding:4px 8px;min-height:36px}
.qua__j{max-width:170px;padding:4px 8px;min-height:36px}
.qua__t{display:inline-block;margin:0 8px 4px 0}
.decl{border-left:3px solid var(--signal)}
.decl__l{display:grid;grid-template-columns:140px minmax(0,1fr);gap:4px 12px;margin:0;font-size:var(--t-2)}
.decl__l div{display:contents}
.decl__l dt{color:var(--beton)}
.decl__l dd{margin:0}
/* v0.25 — LA DÉCOMPOSITION SUR TÉLÉPHONE. Cinq colonnes de champs (numéro,
   désignation, unité, quantité, retirer) ne tiennent pas dans les 276 px
   que laisse la barre du volet : le tableau sortait de 22 px et la croix
   « Retirer » était hors de l'écran — une ligne ne pouvait plus se
   retirer. Chaque ligne devient une petite grille : la désignation en
   haut, l'unité et la quantité en dessous, la croix à droite sur les deux
   rangs ; un chapitre garde son nom et son « + ». */
@media(max-width:700px){
  .tbl--dp,.tbl--dp tbody{display:block}
  .tbl--dp thead{display:none}
  .tbl--dp tr{display:grid;grid-template-columns:22px minmax(0,1fr) minmax(0,1fr) 44px;
    grid-template-areas:"n des des x" "n u q x";gap:4px 6px;align-items:center;
    padding:8px 0;border-bottom:1px solid var(--trait-f)}
  .tbl--dp td,.tbl--dp th{display:block;padding:0;border:0;height:auto;min-width:0}
  .tbl--dp td:nth-child(1){grid-area:n}
  .tbl--dp td:nth-child(2){grid-area:des}
  .tbl--dp td:nth-child(3){grid-area:u}
  .tbl--dp td:nth-child(4){grid-area:q}
  .tbl--dp td:nth-child(5){grid-area:x;justify-self:end}
  .tbl--dp td input,.tbl--dp td select{width:100%;max-width:none}
  .tbl--dp tr.dp__chap{grid-template-columns:minmax(0,1fr) 44px;grid-template-areas:"c x"}
  .tbl--dp tr.dp__chap th{grid-area:c}
  .tbl--dp tr.dp__chap td{grid-area:x;justify-self:end}
}
/* v0.25 (recette à 390) — LES CRITÈRES DE LA GRILLE, même mal que la
   décomposition : cinq colonnes dans 276 px, les libellés réduits à
   « Répor », « Antéri », le type réduit à sa flèche, et la croix
   « Retirer » sous le bord de la carte. Chaque critère devient une petite
   grille : le libellé, puis le type en entier (« Note manuelle » ne tient
   pas dans un tiers de ligne), puis les points et le poids ; la croix à
   droite. */
@media(max-width:700px){
  .tbl--gc,.tbl--gc tbody{display:block}
  .tbl--gc thead{display:none}
  .tbl--gc tr{display:grid;grid-template-columns:minmax(0,1fr) auto 44px;
    grid-template-areas:"l l x" "t t x" "p w x";gap:4px 8px;align-items:center;
    padding:8px 0;border-bottom:1px solid var(--trait-f)}
  .tbl--gc td{display:block;padding:0;border:0;height:auto;min-width:0}
  .tbl--gc td:nth-child(1){grid-area:l}
  .tbl--gc td:nth-child(2){grid-area:t}
  .tbl--gc td:nth-child(3){grid-area:p}
  .tbl--gc td:nth-child(4){grid-area:w;white-space:nowrap}
  .tbl--gc td:nth-child(5){grid-area:x;justify-self:end}
  .tbl--gc td input,.tbl--gc td select{width:100%;max-width:none}
}
/* v0.25 — sur un téléphone, la colonne des libellés (140 px) laissait 110 px
   aux valeurs : le SIRET touchait le bord, les métiers tombaient mot à mot.
   Le libellé passe au-dessus de sa valeur. */
@media(max-width:560px){
  .decl__l{grid-template-columns:minmax(0,1fr);gap:0}
  .decl__l dt{margin-top:6px}
  .decl__l div:first-child dt{margin-top:0}
}

/* v0.24.1 — un tableau à quatre colonnes qui doit tenir sur 390 px : les
   cellules se serrent au doigt, et rien ne passe sous la barre du volet. */
.tbl--serre__sq{display:none}
@media(max-width:640px){
  .tbl--serre th,.tbl--serre td{padding:6px 3px;font-size:var(--t-1)}
  .tbl--serre td.num{white-space:nowrap}
  .tbl--serre th{white-space:normal;letter-spacing:0}
  .tbl--serre .tbl--serre__q{width:0;padding:0 !important;font-size:0 !important;line-height:0;overflow:hidden;border:0;white-space:nowrap}
  .tbl--serre__sq{display:block;color:var(--beton);font-size:var(--t-1)}
}

/* =====================================================================
   v0.25, lot A4 — LES REPÈRES DE CARTE (PB.carte.repere), UNE SEULE LANGUE.

   Chaque repère est un `divIcon` : un disque (`i`) dans un cadre carré de
   `--rp` pixels, et un halo BLANC de 2,5 px qui le détache de la photo
   aérienne — un point plein sans halo disparaît dans le sol ; un anneau
   en pointillés ne se voyait pas du tout. L'épingle (`.rp--lieu`) est le
   même disque, étiré en goutte par un coin non arrondi.
   ===================================================================== */
.rp-w{background:none;border:0;display:flex;align-items:center;justify-content:center}   /* la cible fait 44 px, le dessin est au centre */
.rp{position:relative;display:block;width:var(--rp);height:var(--rp);flex:none}
.rp i{position:absolute;inset:0;border-radius:50%;background:var(--signal);
  box-shadow:0 0 0 2.5px #FFFFFF,0 1px 3px rgba(17,17,17,.45);
  display:flex;align-items:center;justify-content:center;font-style:normal;
  font-family:var(--f-data);font-size:var(--t-1);font-weight:700;   /* l’échelle nommée : 13 px, pas 11 */color:#FFFFFF;line-height:1;
  transition:transform var(--duree),box-shadow var(--duree)}
.rp--inv i{background:#FFFFFF;border:3px solid var(--signal);color:var(--encre);box-sizing:border-box}
.rp--autre i{background:#6E6E73;box-shadow:0 0 0 2px #FFFFFF,0 1px 2px rgba(17,17,17,.35)}
.rp--lieu i{border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:#FFFFFF;border:3px solid var(--signal);box-sizing:border-box}
.rp--lieu i::after{content:'';position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--signal)}
.rp--mise i{box-shadow:0 0 0 2.5px #FFFFFF,0 0 0 6px var(--signal),0 1px 4px rgba(17,17,17,.45)}
.rp--a i{background:var(--signal-d)}
/* Une position approchée (centroïde de commune) : la même forme, un peu
   moins pleine — et l'infobulle le dit. */
.rp--approx i{opacity:.8}
.rp--vise i,.rp-w:hover .rp i{transform:scale(1.18);box-shadow:0 0 0 2.5px #FFFFFF,0 0 0 6px var(--signal-l),0 1px 4px rgba(17,17,17,.45)}
.rp--lieu.rp--vise i,.rp-w:hover .rp--lieu i{transform:rotate(-45deg) scale(1.15)}
/* L'étiquette (nom du chantier) à droite du repère, comme l'ancien `.pin__n`. */
.rp__n{position:absolute;left:calc(var(--rp) + 7px);top:50%;transform:translateY(-50%);white-space:nowrap;
  font-size:var(--t-2);font-weight:600;color:var(--encre);text-shadow:0 0 3px #FFFFFF,0 0 6px #FFFFFF,0 1px 2px #FFFFFF;pointer-events:none}
.rp--g .rp__n{left:auto;right:calc(var(--rp) + 7px)}
@media(max-width:640px){ .rp__n{display:none} }
@media (prefers-reduced-motion: reduce){ .rp i{transition:none} }

/* v0.25, lot B3 — partir d'un modèle : des cartes cliquables, par source. */
.modl{border:1px solid var(--trait);border-radius:var(--arr);padding:var(--r3);margin:0 0 var(--r3);background:var(--surface-2)}
.modl__t{font-family:var(--f-titre);font-size:var(--t-1);letter-spacing:.08em;text-transform:uppercase;color:var(--beton);margin:var(--r3) 0 6px}
.modl__g{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.modl__w{position:relative;display:block;min-width:0}
.modl__c{display:flex;flex-direction:column;gap:3px;text-align:left;width:100%;padding:10px 12px;border:1px solid var(--trait);border-radius:var(--arr-s);
  background:var(--blanc);cursor:pointer;font:inherit;color:inherit;min-height:44px}
.modl__c:hover{border-color:var(--signal);box-shadow:0 0 0 2px var(--signal-l)}
.modl__c b{font-size:var(--t-2)}
.modl__c span{font-size:var(--t-1);color:var(--beton);overflow-wrap:anywhere}
.modl__c i{font-style:normal;font-size:var(--t-1);color:var(--beton)}
.modl__x{position:absolute;top:6px;right:6px}
.modl__k{flex-wrap:wrap}
/* v0.25, lot B4 — un chapitre dans la saisie : une ligne de titre. */
.dp__chap th{background:var(--surface-2);padding:6px 8px}
.dp__chap-i{width:100%;font-weight:600;font-family:var(--f-titre);border:0;background:transparent;font-size:var(--t-2);padding:6px 4px}
.dp__chap-i:focus{outline:2px solid var(--signal);border-radius:3px}
.dp__st td{background:var(--surface-2);font-weight:600}
.dp__st th{background:var(--surface-2)}
/* v0.25, lot B4 — les chapitres dans le comparatif. */
.cmp2__ch{display:block;font-size:var(--t-1);color:var(--beton);font-family:var(--f-titre);letter-spacing:.04em;text-transform:uppercase;margin-top:2px}
.cmp2__inc{font-style:normal;font-family:var(--f-texte);font-size:var(--t-1);color:var(--ambre);margin-left:4px}
.cmp2__h4{font-size:var(--t-2);font-family:var(--f-titre);letter-spacing:.06em;text-transform:uppercase;color:var(--beton);margin:var(--r3) 0 6px}
.cmp2--chap{margin-bottom:var(--r3)}
/* v0.25, lot B4 — chapitres et sous-totaux dans les tableaux de chiffrage. */
.lg__chap th,.lg__chap td{background:var(--surface-2);font-family:var(--f-titre);font-weight:600;font-size:var(--t-2);padding:8px 10px;text-align:left;letter-spacing:.02em}
.lg__st th{text-align:right;font-weight:600;background:var(--surface-2);font-size:var(--t-2)}
.lg__st td{background:var(--surface-2);font-weight:600}
/* v0.25 — « 1 sans prix » sous le sous-total, pas à côté : à côté, la
   colonne Montant (insécable) s'élargissait de 100 px et le tableau du
   chiffrage passait sous le panneau de calcul à 1366 px. */
.lg__inc{display:block;font-style:normal;font-size:var(--t-1);color:var(--ambre);font-weight:400;white-space:normal}
/* v0.25, lot B5 — le comparatif imprimé. */
.dos--cmp .dos-cmp{width:100%;font-size:11px}
.dos--cmp .dos-cmp th,.dos--cmp .dos-cmp td{padding:4px 6px;vertical-align:top}
.dos--cmp .dos-cmp td:nth-child(2){min-width:170px}
.dos--cmp .dos-cmp small{color:#666}
@media print{ .dos--cmp .dos-cmp{page-break-inside:auto} .dos--cmp tr{page-break-inside:avoid} }

/* =====================================================================
   planning — v0.27 : un module, trois usages (§2.49). Le composant
   `pb-planning.js` rend cette grille pour le répondant, l'analyse et la
   page du chantier ; ses défauts se corrigent ici, une fois (§2.27).
   Les couleurs des barres sont des DONNÉES (une par entreprise), posées
   en ligne par le module ; tout le reste est en rôles.
   ===================================================================== */
.pln{display:flex;flex-direction:column;gap:var(--r3);min-width:0}
/* v0.28.2, H — L'EN-TÊTE COMPACT, tel qu'Achraf l'a dessiné : une bande
   sur deux lignes. Au centre la consultation puis le chantier ; à gauche
   l'entreprise consultante avec son logo, puis la date ; à droite
   l'entreprise répondante avec son logo. Logos à 56 px (72 était trop pour
   une bande), 20 mm à l'impression. À 390 px les trois zones s'empilent :
   centre, gauche, droite. */
.pln__en{display:grid;grid-template-columns:1fr minmax(0,1.6fr) 1fr;gap:var(--r3) var(--r4);align-items:center;
  padding:8px 12px;border:1px solid var(--carte);border-radius:var(--arr);background:var(--blanc)}
.pln__en-g,.pln__en-d{display:flex;align-items:center;gap:10px;min-width:0}
.pln__en-d{justify-content:flex-end;text-align:right}
.pln__en-d .pln__en-t{order:-1}
.pln__en-c{text-align:center;min-width:0}
.pln__en-c .pln__lib{white-space:normal;max-width:none;overflow:visible;text-overflow:clip}
.pln__en-t{display:flex;flex-direction:column;gap:2px;min-width:0}
.pln__en-n{font-weight:600;font-size:var(--t-3);color:var(--encre);overflow-wrap:anywhere}
.pln__en-s{font-size:var(--t-2);color:var(--beton)}
.pln__en-ch{margin:2px 0 0;font-size:var(--t-2);color:var(--beton)}
.pln__logo{height:56px;width:auto;max-width:180px;object-fit:contain;display:block;flex:none}
.pln__h{margin:0;font-size:var(--t-4);font-weight:600;color:var(--encre)}
@media(max-width:600px){
  .pln__en{grid-template-columns:1fr;text-align:center}
  .pln__en-c{order:0}
  .pln__en-g{order:1;justify-content:center}
  .pln__en-d{order:2;justify-content:center;text-align:center}
  .pln__en-d .pln__en-t{order:0}
}
.pln__b{display:flex;align-items:center;gap:var(--r3);flex-wrap:wrap}
.pln__g{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.pln__lab{font-size:var(--t-1);color:var(--beton);font-weight:600}
.pln__pb{font-family:var(--f-texte);font-size:var(--t-1);font-weight:700;min-height:32px;padding:4px 10px;border-radius:var(--arr-p);
  border:1px solid var(--trait-b);background:var(--blanc);color:var(--encre);cursor:pointer}
.pln__pb[aria-pressed="true"]{background:var(--encre);color:var(--papier);border-color:var(--encre)}
.pln__pb--g{border-style:dashed}
/* 0.28.3 (E) — l'intervenant actif : une pastille par intervenant, la
   couleur dans un carré, l'actif foncé comme le pinceau choisi. */
.pln__iv{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-texte);font-size:var(--t-1);font-weight:600;min-height:32px;padding:4px 10px 4px 6px;border-radius:999px;
  border:1px solid var(--trait-b);background:var(--blanc);color:var(--encre);cursor:pointer;max-width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pln__iv .pln__sw{flex:none;margin-right:0}
.pln__iv[aria-pressed="true"]{background:var(--encre);color:var(--papier);border-color:var(--encre)}
.pln__iv[aria-pressed="true"] .pln__sw{box-shadow:0 0 0 2px var(--papier)}
.pln__pm{width:32px;height:32px;border-radius:50%;border:1px solid var(--trait-b);background:var(--blanc);color:var(--encre);
  font-size:var(--t-3);line-height:1;cursor:pointer;font-family:var(--f-texte)}
.pln__pm:hover:not(:disabled){background:var(--surface-3)}
.pln__pm:disabled{opacity:.4;cursor:default}
.pln__n{width:58px;text-align:center;min-height:32px;padding:2px 6px}
.pln__hz input[type=date]{min-height:32px;padding:2px 8px}
/* Le cadre défile en largeur, jamais la page dans la page (§2.22) : la
   première colonne est figée. */
.pln__cadre{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;border:1px solid var(--carte);border-radius:var(--arr);
  background:var(--blanc);box-shadow:var(--om-c);scrollbar-width:auto;scrollbar-color:var(--trait-b) var(--surface-2)}
/* v0.28.2 (A) — la largeur se lit, le reste défile : la barre du cadre se
   voit toujours, même sur un système à barres qui s'effacent. */
.pln__cadre::-webkit-scrollbar{height:12px}
.pln__cadre::-webkit-scrollbar-track{background:var(--surface-2)}
.pln__cadre::-webkit-scrollbar-thumb{background:var(--trait-b);border-radius:6px;border:2px solid var(--surface-2)}
/* v0.28.1, C — la grille vit dans un volet à sa largeur ; le calque SVG des
   liens se pose dessus et défile avec elle. */
.pln__sc{position:relative}
.pln__t{border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:var(--t-2)}
.pln__liens{position:absolute;left:0;top:0;pointer-events:none;z-index:1;overflow:visible}
/* 0.28.4 (B) — les liens passent SOUS les barres, jamais dessus : les
   barres (z 2) au-dessus du calque des flèches (z 1), la colonne collante
   des noms (z 3) au-dessus des deux. */
.pln__lien{fill:none;stroke:var(--encre);stroke-width:2;stroke-linejoin:round}
.pln__lien--inv{stroke:var(--rouge)}
.pln__fl{fill:var(--encre)}
.pln__fl--inv{fill:var(--rouge)}
.pln__lienh{fill:none;stroke:transparent;stroke-width:8;pointer-events:stroke;cursor:pointer}
.pln__lienh:hover + *,.pln__lienh:hover{stroke:rgba(0,0,0,.06)}
.pln__j--dep{box-shadow:inset 0 0 0 2px var(--signal)!important}
.pln__pb--l{border-style:double}
.pln__env{color:var(--rouge)}
.pln__sw--l{background:transparent;position:relative;border:0}
.pln__sw--l::before{content:'';position:absolute;left:0;right:6px;top:7px;height:2px;background:var(--encre)}
.pln__sw--l::after{content:'';position:absolute;right:0;top:3px;border-left:6px solid var(--encre);border-top:5px solid transparent;border-bottom:5px solid transparent}
.pln__t col.pln__cph{width:44px}
.pln__t col.pln__ct{width:220px}
.pln__t col.pln__cj{width:30px}
.pln__t col.pln__cs{width:72px}
.pln__t th,.pln__t td{border-right:1px solid var(--trait);border-bottom:1px solid var(--trait);padding:0;text-align:center;height:32px;position:relative;vertical-align:middle}
.pln__t tbody tr:last-child td,.pln__t tbody tr:last-child th{border-bottom:0}
.pln__t thead th{background:var(--surface-2);color:var(--encre-2);font-family:var(--f-data);font-size:var(--t-1);font-weight:600;position:sticky;top:0;z-index:2}
.pln__t th.pln__cph,.pln__t td.pln__ph{position:sticky;left:0;z-index:3;background:var(--surface-2);font-size:var(--t-1);color:var(--beton);font-weight:700}
.pln__t th.pln__ct,.pln__t th.pln__tt{position:sticky;left:44px;z-index:3;background:var(--blanc);text-align:left}
.pln__t thead th.pln__ct,.pln__t thead th.pln__cph{z-index:4;background:var(--surface-2)}
.pln__t thead th.pln__ct{font-family:var(--f-titre);font-size:var(--t-2);padding-left:10px}
.pln__m th{background:var(--encre)!important;color:var(--papier)!important;font-family:var(--f-titre)!important;font-size:var(--t-1)!important;letter-spacing:.03em;text-transform:uppercase;height:26px}
.pln__ws{background:var(--encre)!important;color:var(--papier)!important;font-family:var(--f-titre)!important;font-size:var(--t-2)!important;height:40px!important;line-height:1.2}
.pln__ws--c{background:var(--signal)!important;color:var(--sur-signal)!important}
.pln__ws b{display:block}
.pln__wd{display:block;font-size:11px;font-weight:400;opacity:.85}
.pln__tag{display:inline-block;font-style:normal;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:rgba(255,255,255,.22);padding:0 5px;border-radius:3px;vertical-align:middle}
.pln__dj{line-height:1.1;height:34px!important;color:var(--beton)}
.pln__dj[role=button]{cursor:pointer}
.pln__dj[role=button]:hover,.pln__dj[role=button]:focus-visible{outline:2px solid var(--signal);outline-offset:-2px}
.pln__dn{display:block;font-size:var(--t-1);color:var(--encre)}
.pln__dl{display:block;font-size:10px}
.pln__dj--we{background:var(--surface-3)!important;color:var(--beton)}
.pln__dj--we .pln__dn{color:var(--beton)}
.pln__dj--fe{background:repeating-linear-gradient(45deg,var(--surface-3),var(--surface-3) 4px,var(--surface-2) 4px,var(--surface-2) 8px)!important}
.pln__dj--fe .pln__dn{color:var(--ambre)}
.pln__dj--auj{box-shadow:inset 0 -3px 0 var(--signal)}
.pln__dj[aria-pressed="true"] .pln__dn{color:var(--ambre)}
/* v0.28.1, B — un jour chômé posé à la main : « chômé » dans l'en-tête.
   0.28.3 (C) — hachuré comme le férié, sur toute la hauteur (la règle des
   cellules est plus bas, après `.pln__j`). */
.pln__dj--ch{background:repeating-linear-gradient(45deg,var(--surface-3),var(--surface-3) 4px,var(--surface-2) 4px,var(--surface-2) 8px)!important}
.pln__dj--ch .pln__dn{color:var(--encre-2)}
.pln__dj--ch .pln__dl{font-size:8px;letter-spacing:.02em;text-transform:uppercase;color:var(--encre-2)}
.pln__pb--ch{border-style:dotted}
/* v0.28.2 (C) — LE PLEIN ÉCRAN : la fenêtre du produit à 95 % de la
   fenêtre du navigateur, le planning seul dedans, le corps défile en
   hauteur et le cadre de la grille en largeur. */
.fen--plein .fen__c{max-width:95vw;width:95vw;height:95vh;max-height:95vh}
.fen--plein .fen__b{padding:12px 16px}
.pln-plein{min-width:0}
/* 0.28.3 (B) — L'AIDE DU PLANNING EN FENÊTRE, EN DIAPORAMA : une étape par
   diapositive, un GIF de l'écran au-dessus de sa phrase, des points pour
   aller d'une étape à l'autre. Une seule diapositive visible à la fois. */
.fen--tuto .fen__c{max-width:720px}
.tuto{display:flex;flex-direction:column;gap:10px}
.tuto__pic{width:96px;height:64px;color:var(--signal);align-self:center}
.tuto__s{margin:0;display:flex;flex-direction:column;gap:10px}
.tuto__s[aria-hidden="true"]{display:none}
.tuto__img{display:block;width:100%;height:auto;aspect-ratio:16/9;border:1px solid var(--trait);border-radius:var(--arr);background:var(--surface-2)}
.tuto__img--p{display:flex;align-items:center;justify-content:center}
.tuto__f{display:flex;gap:10px;align-items:flex-start;font-size:var(--t-3);color:var(--encre-2);min-height:3.2em}
.tuto__f b{color:var(--encre)}
.tuto__n{flex:none;width:24px;height:24px;border-radius:50%;background:var(--encre);color:var(--papier);font-size:var(--t-1);font-weight:700;display:flex;align-items:center;justify-content:center;font-family:var(--f-data)}
.tuto__pts{display:flex;justify-content:center;gap:4px}
.tuto__pt{width:32px;height:32px;border:0;background:none;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%}
.tuto__pt::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--trait-b)}
.tuto__pt[aria-current="true"]::before{background:var(--signal);width:12px;height:12px}
.tuto__pt:focus-visible{outline:2px solid var(--signal);outline-offset:-2px}
@media (max-width:600px){ .tuto__pt{width:44px;height:44px} .tuto__f{font-size:var(--t-2)} }
.pln__aide{font-weight:700}
.pln__s th{background:var(--surface-2);text-align:left;font-family:var(--f-titre);font-weight:700;font-size:var(--t-2);padding:4px 10px;color:var(--encre);position:sticky;left:0;z-index:3}
.pln__s th{overflow:visible}
.pln__st{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;background:var(--surface-2);padding-right:8px;position:relative}
.pln__sw{display:inline-block;width:14px;height:14px;border-radius:3px;vertical-align:-2px;margin-right:8px;flex:none;border:1px solid rgba(0,0,0,.1)}
.pln__lib{min-width:1ch;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
.pln__lib[contenteditable]{cursor:text;padding:2px 4px;margin:-2px -4px;border-radius:3px}
.pln__lib[contenteditable]:hover{background:var(--signal-l)}
.pln__lib[contenteditable]:focus{outline:2px solid var(--signal);outline-offset:0;white-space:normal;background:var(--blanc)}
.pln__ph .pln__lib{font-family:var(--f-data);font-size:var(--t-1)}
.pln__tt{font-weight:500;font-size:var(--t-2);color:var(--encre)}
.pln__ti{display:flex;align-items:center;gap:6px;padding:0 6px 0 10px;min-width:0;position:relative}
.pln__ti .pln__lib{flex:1 1 auto;min-width:0}
.pln__q{flex:none;font-size:var(--t-1);color:var(--beton);white-space:nowrap}
/* 03/10/2026 — sur une récap, le nom du poste garde sa ligne entière et la
   quantité passe dessous : avec la colonne à 220 px (0.28.2, A), le nom se
   coupait à sept lettres (« Déblai … 4 800 m³ · 3 j ouvrés »). Une récap
   fait deux lignes, une sous-tâche une seule. */
.pln__r--rec .pln__ti{flex-wrap:nowrap;gap:8px}
/* 0.28.4 (B) — la récap tient sur une ligne de 32 px, comme une
   sous-tâche : le nom en gras, coupé avec « … » s'il est long (entier en
   bulle) ; la quantité et les jours à droite en 13 px tant qu'il reste la
   place — c'est elle qui cède d'abord. */
.pln__r--rec .pln__ti .pln__lib{flex:0 1 auto;min-width:4ch}
.pln__r--rec .pln__q{flex:0 1000 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:13px;font-weight:400}
.pln__ro{display:inline-flex;gap:2px;align-items:center;flex:none;opacity:0;transition:opacity var(--duree)}
/* Dans une ligne de tâche, les outils se superposent à la fin du libellé au
   survol : hors survol ils ne prennent aucune place, le libellé la garde. */
/* 0.28.4 (A) — le « ⋯ » prend sa place au bout de la cellule du nom, sans
   rien recouvrir : le nom garde la sienne, entier et éditable. Les outils
   sont dans le menu qu'il ouvre (`.pln__mn`). */
.pln__ti .pln__ro{margin-left:auto}
.pln__ro:has([aria-expanded="true"]){opacity:1}
.pln__mb{font-size:15px;font-weight:700;letter-spacing:.04em;background:transparent}
.pln__r:hover .pln__mb,.pln__r:focus-within .pln__mb,.pln__s:hover .pln__mb,.pln__s:focus-within .pln__mb,.pln__mb[aria-expanded="true"]{background:var(--surface-3)}
.pln__mn{position:fixed;z-index:760;display:flex;flex-direction:column;gap:1px;min-width:220px;max-width:calc(100vw - 16px);padding:4px;background:var(--blanc);border:1px solid var(--trait-b);border-radius:var(--arr);box-shadow:var(--om-3);font-family:var(--f-texte);font-weight:400;font-size:var(--t-2);color:var(--encre);text-align:left;white-space:nowrap}
.pln__mn[hidden]{display:none}
.pln__mi{display:flex;align-items:center;gap:10px;min-height:34px;padding:4px 10px;border:0;border-radius:4px;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.pln__mi:hover,.pln__mi:focus-visible,.pln__mi:focus-within{background:var(--surface-3);outline:none}
.pln__mi .pln__sw{margin:0}
.pln__mi--x{color:var(--rouge)}
.pln__mi--s{cursor:default;justify-content:space-between}
.pln__mn .pln__ps{display:inline-block;max-width:150px;min-height:28px;font-size:var(--t-1)}
.pln__mk{width:16px;text-align:center;flex:none;color:var(--encre-2)}
.pln__mi[aria-checked="true"] .pln__mk{color:var(--signal)}
.pln__r:hover .pln__tt,.pln__r:focus-within .pln__tt{background:var(--surface-2)}
.pln__r:hover .pln__ro,.pln__r:focus-within .pln__ro,.pln__s:hover .pln__ro,.pln__s:focus-within .pln__ro{opacity:1}
@media (hover:none){.pln__ro{opacity:1}}
.pln__s .pln__ro{margin-left:10px;font-weight:400}
.pln__rb{width:22px;height:22px;border:0;border-radius:4px;background:var(--surface-3);color:var(--encre-2);font-size:12px;line-height:1;cursor:pointer;padding:0;font-family:var(--f-texte)}
.pln__rb:hover{background:var(--signal);color:var(--sur-signal)}
.pln__rb:focus-visible{outline:2px solid var(--signal);outline-offset:1px}
.pln__ps{display:none;max-width:120px;min-height:24px;font-size:11px;padding:1px 4px;border:1px solid var(--trait-b);border-radius:4px;background:var(--blanc);color:var(--encre)}
/* La liste des postes se montre quand la ligne est en cours d'édition :
   nommer une tâche, puis la rattacher à un poste. */
.pln__r:focus-within .pln__ps{display:inline-block}
.pln__r--f .pln__tt{color:var(--encre-2)}
/* v0.28.1, E — la ligne récap d'un poste : calculée, une bande fine du
   premier au dernier jour de ses sous-tâches ; les sous-tâches en retrait ;
   la ligne « Nouvelle tâche » qui attend sous chaque récap. */
.pln__r--rec .pln__tt,.pln__r--rec .pln__ph{background:var(--surface-2)}
.pln__r--rec .pln__tt{font-weight:600}
/* v0.28.2 (D) — une récap se calcule, ne se peint pas : le curseur le dit. */
/* 0.28.4 (B) — LA BARRE RÉCAPITULATIVE : 6 px, couleur encre, un crochet
   vers le bas à chaque bout (le repère des logiciels de planning). */
.pln__som{position:absolute;top:10px;height:6px;left:0;right:-1px;background:var(--encre);z-index:2}
.pln__som--d{left:3px}
.pln__som--f{right:3px}
.pln__som--d::before,.pln__som--f::after{content:'';position:absolute;top:100%;width:0;height:0;border-top:7px solid var(--encre)}
.pln__som--d::before{left:0;border-right:7px solid transparent}
.pln__som--f::after{right:0;border-left:7px solid transparent}
.pln__r--sous .pln__ti{padding-left:26px}
.pln__r--v .pln__lib{color:var(--beton)}
.pln__rl--rec .pln__rn{font-weight:600}
.pln__rl--sous{padding-left:16px}
/* 0.28.3 (D) — les signalements : une ligne courte, cliquable, qui amène
   sa ligne ; la ligne visée s'éclaire un instant. */
.pln__sg{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px}
.pln__sgb{font:inherit;text-align:left;background:none;border:0;padding:2px 0;color:var(--encre);cursor:pointer;text-decoration:underline;text-decoration-color:var(--trait-b);text-underline-offset:3px}
.pln__sgb:hover{text-decoration-color:var(--signal)}
.pln__rv{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px}
.pln__ia-r{flex-basis:100%;margin-top:4px}
/* 0.28.4 (D) — la relecture en deux parties ; une piste cliquée surligne ses deux postes. */
.pln__ia-t{margin:10px 0 2px;font-size:var(--t-1);font-weight:600;color:var(--encre-2);text-transform:uppercase;letter-spacing:.04em}
.pln__ia-t:first-of-type{margin-top:4px}
.pln__pi li{margin:4px 0}
.pln__pib{display:block}
.pln__pib b{font-weight:600}
.pln__pic,.pln__pig{display:block;font-size:var(--t-2);color:var(--beton)}
.pln__pib[aria-pressed="true"]{text-decoration-color:var(--signal);text-decoration-thickness:2px}
.pln__r--piste>th,.pln__r--piste>td{box-shadow:inset 0 2px 0 var(--signal),inset 0 -2px 0 var(--signal)}
.pln__r--piste th.pln__tt{background:var(--signal-l)}
.pln__r--vise>*{box-shadow:inset 0 2px 0 var(--signal),inset 0 -2px 0 var(--signal)}
.pln__j{background:var(--blanc);cursor:default}
.pln__j--sec{background:var(--surface-2)}
.pln__j[tabindex]{cursor:pointer}
/* 0.28.2 (D) — une récap se calcule : le curseur le dit, après la règle générale de la cellule. */
.pln__j--calc{cursor:not-allowed}
.pln__j[tabindex]:hover{box-shadow:inset 0 0 0 2px var(--signal-lh)}
.pln__j[tabindex]:focus-visible{outline:2px solid var(--signal);outline-offset:-2px}
/* 0.28.3 (C) — LE NON-TRAVAILLÉ, UNE SEULE RÈGLE (décidée par Achraf) :
   fériés et jours chômés hachurés, week-ends en fond gris, de haut en bas
   de la grille, toutes sortes de lignes, à l'écran, en plein écran, à
   l'impression et sur la page autonome. Écrite APRÈS `.pln__j` : la règle
   du chômé, posée plus haut en 0.28.1, perdait contre le fond blanc de la
   cellule — même poids, écrite après — et la colonne restait blanche. */
.pln__j--we{background:var(--surface-3)}
.pln__j--fe,.pln__j--ch{background:repeating-linear-gradient(45deg,var(--trait-b),var(--trait-b) 3px,var(--surface-2) 3px,var(--surface-2) 7px)}
.pln__j--auj{box-shadow:inset 2px 0 0 var(--signal),inset -2px 0 0 var(--signal)}
.pln__j--sc{box-shadow:inset 2px 0 0 var(--signal),inset -2px 0 0 var(--signal)}
.pln__bar{position:absolute;z-index:2;top:5px;bottom:5px;left:0;right:0;display:flex;align-items:center;justify-content:center;font-style:normal;
  font-family:var(--f-data);font-size:10px;font-weight:700;color:#fff;letter-spacing:.02em;background:var(--c);overflow:hidden;white-space:nowrap}
.pln__bar--d{left:3px;border-radius:4px 0 0 4px}
.pln__bar--f{right:3px;border-radius:0 4px 4px 0}
.pln__bar--d.pln__bar--f{border-radius:4px}
.pln__bar--att{background:repeating-linear-gradient(45deg,var(--c),var(--c) 3px,#fff 3px,#fff 7px);color:#fff;text-shadow:0 0 2px #000,0 0 2px #000}
.pln__bar--hors{background-image:repeating-linear-gradient(-45deg,rgba(255,255,255,.45),rgba(255,255,255,.45) 3px,transparent 3px,transparent 7px)}
/* 0.28.4 (C) — une barre sur un week-end n'est pas hachurée : le hachuré
   dit le férié et le chômé ; le week-end se dit en gris, la barre s'éclaircit. */
.pln__bar--we{background-image:linear-gradient(rgba(255,255,255,.38),rgba(255,255,255,.38))}
.pln__jl{position:absolute;z-index:2;top:50%;left:50%;width:13px;height:13px;transform:translate(-50%,-50%) rotate(45deg);border:1.5px solid #fff;box-shadow:0 0 0 1px var(--encre)}
.pln__ch{position:absolute;top:50%;left:0;right:0;height:3px;transform:translateY(-50%)}
.pln__ch::after{content:'';position:absolute;right:0;top:50%;transform:translateY(-50%);border-left:6px solid var(--encre);border-top:5px solid transparent;border-bottom:5px solid transparent}
.pln__vide{color:var(--beton);padding:14px!important}
.pln__rc{font-size:var(--t-2)}
.pln__rp{margin:0;color:var(--encre)}
.pln__rl{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:2px 18px}
.pln__rl li{display:flex;justify-content:space-between;gap:10px;min-width:0;border-bottom:1px solid var(--trait-f);padding:3px 0}
.pln__rn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--encre-2)}
.pln__al{margin:8px 0 0;padding:8px 12px;border-left:3px solid var(--ambre);background:var(--ambre-l);border-radius:0 var(--arr) var(--arr) 0;color:var(--encre)}
.pln__lg{position:relative}
.pln__ll{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 20px;font-size:var(--t-2)}
.pln__li{display:inline-flex;align-items:center;gap:6px}
.pln__li .pln__sw{margin-right:0;width:24px;height:15px}
.pln__sw--b{border:1px solid rgba(0,0,0,.15);cursor:pointer;padding:0}
.pln__sw--b:hover,.pln__sw--b[aria-expanded="true"]{box-shadow:0 0 0 2px var(--signal)}
.pln__sw--j{background:transparent;position:relative;border:0}
.pln__sw--j::before{content:'';position:absolute;left:6px;top:1px;width:11px;height:11px;background:var(--encre);transform:rotate(45deg)}
.pln__sw--we{background:var(--surface-3);border:1px solid var(--trait-b)}
.pln__sw--fe{background:repeating-linear-gradient(45deg,var(--surface-3),var(--surface-3) 4px,var(--surface-2) 4px,var(--surface-2) 8px);border:1px solid var(--trait-b)}
.pln__lc{font-size:11px;color:var(--beton);min-width:18px}
/* v0.28.2 (E) — la palette est posée dans la fenêtre, sous son bouton :
   douze teintes sur deux rangs, l'hexadécimal libre dessous. */
.pln__pal{position:fixed;z-index:760;background:var(--blanc);border:1px solid var(--trait-b);border-radius:var(--arr);padding:8px;box-shadow:var(--om-3);
  display:grid;grid-template-columns:repeat(6,24px);gap:6px}
.pln__pal[hidden]{display:none}
.pln__pc{width:24px;height:24px;border-radius:4px;border:1px solid rgba(0,0,0,.12);cursor:pointer;padding:0}
.pln__pc:hover,.pln__pc:focus-visible{outline:2px solid var(--encre);outline-offset:1px}
/* v0.28.1, D — les couleurs sont au répondant : une pastille par ligne,
   la hachure, un intervenant nommé, une teinte libre en hexadécimal. */
.pln__rb--c{border:1px solid rgba(0,0,0,.15)}
.pln__rb[aria-pressed="true"]{background:var(--encre);color:var(--papier)}
.pln__li--a{gap:8px;flex-wrap:wrap;max-width:100%}
.pln__ia{max-width:100%}
.pln__ia{min-height:32px;font-size:var(--t-2);padding:2px 8px;border:1px solid var(--trait-b);border-radius:4px;background:var(--blanc);color:var(--encre);width:170px;font-family:var(--f-texte)}
.pln__pl{grid-column:1/-1;display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding-top:6px;border-top:1px solid var(--trait-b)}
.pln__hx{width:92px;min-height:32px;padding:2px 6px;border:1px solid var(--trait-b);border-radius:4px;background:var(--blanc);color:var(--encre)}
.pln__hx[aria-invalid="true"]{border-color:var(--rouge)}
.pln__li .pln__rb--x{width:18px;height:18px;font-size:10px}
.pln__cm{border:1px solid var(--carte);border-radius:var(--arr);background:var(--blanc);box-shadow:var(--om-c)}
.pln__ch4{margin:0;padding:8px 14px;border-bottom:1px solid var(--trait);font-size:var(--t-1);font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--encre-2);background:var(--surface-2);border-radius:var(--arr) var(--arr) 0 0}
.pln__cl{list-style:none;margin:0;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.pln__ci{display:flex;align-items:flex-start;gap:10px;padding:7px 11px;border-radius:6px;border-left:4px solid var(--encre-3);background:var(--surface-2);font-size:var(--t-2)}
.pln__ci--info{border-color:var(--vert);background:var(--vert-l)}
.pln__ci--action{border-color:var(--ambre);background:var(--ambre-l)}
.pln__ci--urgent{border-color:var(--rouge);background:var(--rouge-l)}
.pln__cn{flex:none;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--encre-2);padding-top:2px;min-width:92px}
.pln__ct2{flex:1;min-width:0;color:var(--encre)}
.pln__cv{margin:0;padding:10px 12px}
.pln__cc{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:0 12px 12px}
.pln__cin{flex:1 1 220px;min-height:36px;padding:6px 10px;border:1px solid var(--trait-b);border-radius:var(--arr);font-family:var(--f-texte);font-size:var(--t-2);background:var(--blanc);color:var(--encre)}
.pln--ro .pln__t th.pln__tt{cursor:default}
@media (max-width:900px){
  .pln__t col.pln__ct{width:170px}
  .pln__t th.pln__ct,.pln__t th.pln__tt{left:44px}
  .pln__t col.pln__cph{width:44px}
  .pln__ps{display:none}
}
/* L'impression : A3 paysage, l'horizon entier, l'en-tête, la légende —
   et rien d'autre. La copie `.pln-impression` est posée au corps de la
   page par le module, le temps de l'impression. */
.pln-impression{display:none}
@media print{
  body.pln-imp>*:not(.pln-impression){display:none!important}
  body.pln-imp .pln-impression{display:block;background:#fff;color:#000}
}
/* 0.28.4 (C) — les règles de la copie hors de `@media print` : la copie
   n'est visible qu'à l'impression, et le module la MESURE avant, posée
   hors de l'écran à la largeur de la feuille (`--mesure`). */
.pln-impression.pln-impression--mesure{display:block;position:absolute;left:-40000px;top:0;width:1527px;visibility:hidden;background:#fff;color:#000}
.pln-impression--mesure .pln-page{min-height:0!important}
@media all{
  .pln-impression *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  .pln-impression__t{display:flex;gap:18px;align-items:baseline;flex-wrap:wrap;font-size:12px;margin-bottom:8px}
  .pln-impression__t b{font-size:15px}
  .pln-impression .pln__cadre{overflow:visible;border:1px solid #444;box-shadow:none;border-radius:0}
  /* 0.28.4 (C) — LA FEUILLE EST REMPLIE. Le module pose la géométrie A3
     (colonnes et rangs en pixels, `imprimer`) : la grille prend toute la
     largeur utile, la hauteur des lignes (`--rang-imp`) remplit la page
     entre 7 et 14 mm, et aucun texte ne descend sous 9 pt (12 px). Une
     page par tranche de treize semaines, en-tête et noms répétés. */
  .pln-impression{font-size:12px;--rang-imp:27px;--lignes-imp:2}
  .pln-page{break-after:page;page-break-after:always;display:flex;flex-direction:column}
  .pln-page>.pln{flex:1 1 auto;display:flex;flex-direction:column}
  .pln-page .pln__cadre{margin-bottom:auto}
  .pln-page:last-child{break-after:auto;page-break-after:auto}
  .pln-page__pied{margin:6px 0 0;text-align:right;font-size:12px;color:#333}
  .pln-impression .pln__t{min-width:0}
  .pln-impression .pln__logo{height:20mm;max-width:60mm}
  .pln-impression .pln__t td,.pln-impression .pln__t th{overflow:hidden}
  /* 02/10/2026 — `position:static` était posé sur TOUTES les cellules pour
     défaire les colonnes collantes : il défaisait aussi le repère des
     barres peintes (absolues dans leur cellule). Seules les cellules
     collantes redeviennent statiques — l'en-tête compris (0.28.4) : en
     vue semaine, la bande des semaines, collante, s'imprimait au bas de
     la grille, là où était le défilement. */
  .pln-impression .pln__t th,.pln-impression .pln__t td{font-size:12px;border-color:#888;padding-top:0;padding-bottom:0}
  .pln-impression .pln__t tbody th,.pln-impression .pln__t tbody td{height:var(--rang-imp);max-height:var(--rang-imp)}
  .pln-impression .pln__t th.pln__cph,.pln-impression .pln__t td.pln__ph,
  .pln-impression .pln__t th.pln__ct,.pln-impression .pln__t th.pln__tt,.pln-impression .pln__s th,
  .pln-impression .pln__t thead th{position:static}
  .pln-impression .pln__m th{height:26px;font-size:12px!important}
  .pln-impression .pln__ws{height:40px!important;font-size:12px!important;line-height:1.15}
  .pln-impression .pln__ws *{font-size:12px!important}
  .pln-impression .pln__dj{height:34px!important;line-height:1.1;padding-left:0;padding-right:0}
  .pln-impression .pln__dn,.pln-impression .pln__dl{font-size:12px!important;line-height:1.1;letter-spacing:-.04em}
  /* Les noms passent sur deux lignes — plus si le rang les tient —
     plutôt que d'être coupés. */
  .pln-impression .pln__ti{white-space:normal;gap:6px}
  .pln-impression .pln__lib{white-space:normal;display:-webkit-box;-webkit-line-clamp:var(--lignes-imp,2);-webkit-box-orient:vertical;overflow:hidden;text-overflow:clip;line-height:1.1;padding-top:0;padding-bottom:0}
  .pln-impression .pln__tt,.pln-impression .pln__ph,.pln-impression .pln__ph .pln__lib{font-size:12px}
  .pln-impression .pln__q{font-size:12px!important}
  /* La récap imprimée n'a pas de bulle : la quantité et les jours passent
     sous le nom, entiers, au lieu d'être coupés à sa droite. */
  .pln-impression .pln__r--rec .pln__ti{flex-wrap:wrap;align-content:center;row-gap:0}
  .pln-impression .pln__r--rec .pln__ti .pln__lib{flex:1 1 100%;-webkit-line-clamp:var(--lignes-rec,2)}
  .pln-impression .pln__r--rec .pln__q{flex:1 1 100%;white-space:normal;overflow:hidden;text-overflow:clip;line-height:1.1}
  .pln-impression .pln__bar{top:26%;bottom:26%;font-size:12px}
  .pln-impression .pln__som{top:calc(50% - 6px)}
  .pln-impression .pln__rc,.pln-impression .pln__lg,.pln-impression .pln__cm{page-break-inside:avoid;font-size:12px}
  .pln-impression .pln__rc *,.pln-impression .pln__lg *,.pln-impression .pln__en *{font-size:max(12px,1em)}
  .pln-impression .pln__cl{flex-direction:row;flex-wrap:wrap}
  .pln-impression .pln__ci{flex:1 1 30%}
}
/* Le planning du répondant : les faits du devis et de la consultation, sur une ligne. */
.pl-faits{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:var(--t-2);color:var(--beton);margin-bottom:var(--r3)}
.pl-faits__s{color:var(--trait-b)}
.pl-aide{margin:var(--r3) 0 0;max-width:88ch}
/* La comparaison des plannings, dans l'analyse : l'un sous l'autre, même échelle. */
.plcmp{display:flex;flex-direction:column;gap:var(--r3);margin-top:var(--r3)}
.plcmp__o{min-width:0}
.plcmp__h{margin:0 0 6px;font-size:var(--t-2);font-weight:600;display:flex;align-items:center;gap:6px}
.plcmp__t{width:100%}
.plcmp__ko{color:var(--ambre);font-weight:600}
/* v0.28, A1 — répartir un total sur les postes (mode rapide). */
.repartir{display:flex;align-items:center;gap:var(--r2);flex-wrap:wrap;padding:8px 14px;border-bottom:1px solid var(--trait-f);background:var(--surface-2)}
.repartir label{font-size:var(--t-2);font-weight:600;color:var(--encre-2)}
.repartir input{width:150px;min-height:36px;padding:4px 10px;text-align:right}
.repartir .aide{flex:1 1 260px;margin:0}
/* =====================================================================
   v0.29 — LE CONTRAT GÉNÉRÉ (pb-contrat-modele.js). Une page dans la
   coquille, sa feuille d'impression A4 : le PDF vient du navigateur.
   Les trois états d'un champ sont des rôles (§2.7) : rempli depuis le
   dossier (succès), proposé par défaut (neutre), à compléter (ambre).
   ===================================================================== */
.ctd{max-width:210mm;margin:0 auto;background:var(--blanc);color:var(--encre);padding:24px 28px;font-size:var(--t-2);line-height:1.5;border:1px solid var(--trait-f);border-radius:var(--arr)}
.ctd__t{border-bottom:2px solid var(--encre);margin-bottom:16px;padding-bottom:10px}
.ctd__num{font-size:var(--t-1);color:var(--beton);margin:0}
.ctd__src{font-size:var(--t-1);margin:6px 0}
.ctd__h{font-size:1.25rem;line-height:1.3;margin:8px 0 2px}
.ctd__st{font-size:var(--t-1);font-weight:600;margin:0}
.ctd__av{font-size:var(--t-1);font-style:italic;margin:6px 0 0}
.ctd__a{margin:16px 0}
.ctd__ah{font-size:var(--t-2);font-weight:700;text-transform:uppercase;letter-spacing:.02em;margin:0 0 6px;padding-bottom:2px;border-bottom:1px solid var(--trait-b);break-after:avoid;page-break-after:avoid}
.ctd__b{display:grid;grid-template-columns:72px minmax(0,1fr);gap:0 10px;margin:4px 0}
.ctd__b>:not(.ctd__bn){grid-column:2}
.ctd__bn{grid-column:1;grid-row:1/span 40;font-weight:700}
.ctd__b p{margin:0 0 3px}
.ctd__v{font-weight:600}
.ctd__nt,.ctd__so{color:var(--beton);font-style:italic}
.ctd__cc{display:inline-block;min-width:1.1em}
.ctd__ol{margin:2px 0 6px;padding-left:22px}
.ctd__sig{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:12px}
.ctd__sg p{margin:0 0 4px;font-weight:600}
.ctd__sz{height:80px;border:1px solid var(--trait-b);border-radius:4px}
.ctd__pied{margin-top:20px;padding-top:8px;border-top:1px solid var(--trait-b);font-size:var(--t-1);color:var(--beton)}
.ctd__fi{width:100%;border-collapse:collapse}
.ctd__fi th,.ctd__fi td{border:1px solid var(--trait-b);padding:6px 8px;vertical-align:top;text-align:left}
.ctd__fi th{width:36px}
@media (max-width:600px){
  .ctd{padding:14px 12px}
  .ctd__b{grid-template-columns:minmax(0,1fr)}
  .ctd__bn{grid-row:auto}
  .ctd__b>:not(.ctd__bn){grid-column:1}
  .ctd__sig{grid-template-columns:1fr}
}
/* L'impression : la copie `.ctd-impression` posée au corps, A4 portrait. */
.ctd-impression{display:none}
@media print{
  body.ctd-imp>*:not(.ctd-impression){display:none!important}
  body.ctd-imp .ctd-impression{display:block;background:#fff;color:#000}
  .ctd-impression .ctd{border:0;border-radius:0;padding:0;max-width:none;font-size:10pt;line-height:1.4;color:#000}
  .ctd-impression .ctd__num,.ctd-impression .ctd__nt,.ctd-impression .ctd__so,.ctd-impression .ctd__pied{color:#333}
  .ctd-impression .ctd__fin{break-inside:avoid;page-break-inside:avoid}
  .ctd-impression .ctd__b{break-inside:avoid;page-break-inside:avoid}
  .ctd-impression .ctd__ah{break-inside:avoid;page-break-inside:avoid}
}
/* v0.29 — l'étape Contrat, la préparation (pb-app-contrat.js). Un champ
   par ligne : son libellé, sa valeur, son état et sa source. */
.ctp__st{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 10px}
.ctp__st label{font-weight:600}
.ctp__cpt{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.ctp__k{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px}
.ctp__ki{padding:6px 10px;border-left:3px solid var(--trait-b);background:var(--surface-2);border-radius:0 var(--arr) var(--arr) 0;font-size:var(--t-2)}
.ctp__ki--alerte{border-left-color:var(--ambre)}
.ctp__kb{font:inherit;text-align:left;background:none;border:0;padding:0;color:var(--encre);cursor:pointer;text-decoration:underline;text-decoration-color:var(--trait-b);text-underline-offset:3px}
.ctp__arts{display:grid;gap:6px;margin:0 0 12px}
.ctp__art{border:1px solid var(--trait-f);border-radius:var(--arr);background:var(--blanc)}
.ctp__art>summary{cursor:pointer;padding:8px 12px;font-weight:600;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ctp__art[open]>summary{border-bottom:1px solid var(--trait-f)}
.ctp__l{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.3fr) minmax(0,1fr);gap:6px 12px;align-items:start;padding:8px 12px;border-left:3px solid transparent}
.ctp__l+.ctp__l{border-top:1px solid var(--trait-f)}
.ctp__l--a_completer{border-left-color:var(--ambre)}
.ctp__l--rempli{border-left-color:var(--vert)}
.ctp__lb{font-size:var(--t-2);font-weight:500;padding-top:6px}
.ctp__v input,.ctp__v select,.ctp__v textarea{width:100%;min-height:36px;font:inherit;font-size:var(--t-2)}
.ctp__s{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center;font-size:var(--t-1)}
.ctp__src{color:var(--beton)}
.ctp__act{margin:0 0 12px}
.ctp__lec{margin:0 0 12px}
.ctp__lh{margin:10px 0 4px;font-size:var(--t-2)}
.ctp__lu{margin:0;padding-left:20px;font-size:var(--t-2)}
.ctp__doc{margin:10px 0;max-height:none}
.ctp__vh{margin:16px 0 6px;font-size:var(--t-2)}
.ctp__vs{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px}
.ctp__vi{padding:8px 12px;border:1px solid var(--trait-f);border-radius:var(--arr);display:grid;gap:6px}
.ctp__sf{display:flex;flex-wrap:wrap;gap:8px;align-items:end}
.ctp__dc4{margin-top:8px}
@media (max-width:760px){
  .ctp__l{grid-template-columns:minmax(0,1fr)}
  .ctp__lb{padding-top:0}
}