/* ═══════════════════════════════════════════════════════════════
   BUILDPRO — feuille de style
   Navigation latérale, surfaces blanches, accent bleu.
   ═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root{
  --fond:#F5F7FA; --surface:#fff; --surface-2:#F9FAFB;
  --bord:#E4E8EF; --bord-f:#D0D6E0;
  --encre:#0F1B2D; --encre-2:#5A6B7F; --encre-3:#93A0B0;

  --nuit:#101A2B; --nuit-2:#1A2739; --nuit-3:#26374E;

  --accent:#1F5AE0; --accent-h:#1746B8; --accent-d:#EBF1FE;
  --vert:#067647;  --vert-d:#E8F8F0;
  --ambre:#B54708; --ambre-d:#FEF3E2;
  --rouge:#B42318; --rouge-d:#FEF0EE;
  --gris:#475467;  --gris-d:#F1F3F7;

  --fb:'Inter',system-ui,-apple-system,sans-serif;
  --fm:'JetBrains Mono',ui-monospace,monospace;

  --t-micro:10.5px; --t-petit:12px; --t-base:13.5px;
  --t-titre:15px; --t-nombre:26px; --t-page:19px;

  --r:10px; --r-s:7px; --r-p:5px;
  --o1:0 1px 2px rgba(15,27,45,.05);
  --o2:0 1px 3px rgba(15,27,45,.07), 0 4px 12px -4px rgba(15,27,45,.06);
  --o3:0 12px 32px -8px rgba(15,27,45,.20);
  --flanc-l:238px;
}

*{box-sizing:border-box}
body{margin:0;background:var(--fond);color:var(--encre);
  font:400 var(--t-base)/1.55 var(--fb);-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums}
a{color:var(--accent)} a:hover{color:var(--accent-h)}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.014em}

/* ═══════════ COQUILLE ═══════════ */
.app{display:flex;min-height:100vh}

.flanc{width:var(--flanc-l);flex-shrink:0;background:var(--nuit);color:#fff;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.marque{display:flex;align-items:center;gap:10px;padding:19px 18px 17px;
  color:#fff;text-decoration:none}
.marque .sigle{flex-shrink:0;display:block;line-height:0;
  filter:drop-shadow(0 2px 6px rgba(18,60,168,.42))}
.marque .sigle svg{width:100%;height:100%;display:block}
.marque .mot{font-size:16px;font-weight:400;letter-spacing:-.028em;line-height:1}
.marque .mot b{font-weight:700}
.marque:hover .sigle{filter:drop-shadow(0 3px 10px rgba(18,60,168,.58))}

.flanc-projet{padding:0 14px 14px}
.flanc-projet select{width:100%;padding:9px 30px 9px 11px;border-radius:var(--r-s);
  background:var(--nuit-2);color:#fff;border:1px solid var(--nuit-3);
  font:500 var(--t-base) var(--fb);cursor:pointer;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,rgba(255,255,255,.45) 50%),
                   linear-gradient(135deg,rgba(255,255,255,.45) 50%,transparent 50%);
  background-position:calc(100% - 16px) 54%, calc(100% - 11px) 54%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.flanc-projet select:hover{border-color:#33465F}

.flanc-nav{flex:1;overflow-y:auto;padding:2px 10px 12px;scrollbar-width:thin}
.flanc-nav::-webkit-scrollbar{width:5px}
.flanc-nav::-webkit-scrollbar-thumb{background:var(--nuit-3);border-radius:5px}
.bloc{margin-bottom:15px}
.bloc-t{font-size:var(--t-micro);font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:#5F7288;padding:0 10px 6px}

/* Le travail courant : pas de titre, un filet pour le séparer du reste. */
.bloc-vif{padding-bottom:14px;border-bottom:1px solid var(--nuit-2)}

/* Les groupes repliables. Le chevron dit l'état ; le repli n'est qu'un
   rangement, aucun écran n'est retiré. */
.bloc-pli>summary{list-style:none;cursor:pointer;display:flex;align-items:center;
  gap:8px;border-radius:var(--r-s);padding:6px 10px;margin-bottom:2px;
  transition:color .12s,background .12s}
.bloc-pli>summary::-webkit-details-marker{display:none}
.bloc-pli>summary:hover{color:#93A6BC;background:var(--nuit-2)}
.bloc-pli>summary i{margin-left:auto;width:7px;height:7px;flex-shrink:0;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(-45deg) translate(-1px,-1px);transition:transform .15s}
.bloc-pli[open]>summary i{transform:rotate(45deg) translate(-2px,-2px)}
.bloc-pli[open]>summary{color:#7C8FA6}
.flanc-nav a{display:flex;align-items:center;gap:10px;padding:8px 11px;margin-bottom:1px;
  border-radius:var(--r-s);color:#B4C0CF;text-decoration:none;font-size:var(--t-base);
  font-weight:450;transition:background .12s,color .12s}
.flanc-nav a svg{width:16px;height:16px;flex-shrink:0;opacity:.62;transition:opacity .12s}
.flanc-nav a:hover svg{opacity:.9}
.flanc-nav a.actif svg{opacity:1}
.flanc-nav a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flanc-nav a:hover{background:var(--nuit-2);color:#fff}
.flanc-nav a.actif{background:var(--accent);color:#fff;font-weight:550;
  box-shadow:0 1px 2px rgba(31,90,224,.4)}

.compte{border-top:1px solid var(--nuit-2);position:relative}
.compte summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  padding:13px 16px;transition:background .12s}
.compte summary::-webkit-details-marker{display:none}
.compte summary:hover{background:var(--nuit-2)}
.compte .init{width:30px;height:30px;border-radius:9px;background:var(--nuit-3);
  display:grid;place-items:center;font-weight:600;font-size:12.5px;flex-shrink:0}
.compte .qui{flex:1;min-width:0;line-height:1.3}
.compte .qui b{display:block;font-size:var(--t-base);font-weight:550;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.compte .qui em{font-style:normal;font-size:var(--t-petit);color:#6C7F95}
.compte summary i{width:0;height:0;border:4px solid transparent;
  border-bottom-color:#6C7F95;margin-bottom:3px}
.compte[open] summary i{transform:rotate(180deg);margin:3px 0 0}
.volet{position:absolute;left:12px;right:12px;bottom:calc(100% + 6px);z-index:80;
  background:var(--surface);border:1px solid var(--bord);border-radius:var(--r);
  box-shadow:var(--o3);overflow:hidden}
.volet a{display:block;padding:10px 14px;font-size:var(--t-base);color:var(--encre);
  text-decoration:none;border-bottom:1px solid var(--bord)}
.volet a:hover{background:var(--surface-2)}
.volet a.sortie{color:var(--rouge);border-bottom:none}

.principal{flex:1;min-width:0;display:flex;flex-direction:column}
header.barre{background:var(--surface);border-bottom:1px solid var(--bord);
  padding:0 26px;min-height:60px;display:flex;align-items:center;gap:18px;
  flex-wrap:wrap;position:sticky;top:0;z-index:40}
.titre-page{font-size:var(--t-page);font-weight:600;letter-spacing:-.02em}

.chercher{flex:1;max-width:420px;min-width:160px;margin-left:8px;position:relative;
  display:flex;align-items:center}
.chercher .loupe{position:absolute;left:11px;display:flex;color:var(--encre-3);
  pointer-events:none}
.chercher .loupe svg{width:15px;height:15px}
.chercher kbd{position:absolute;right:9px;font:500 10.5px var(--fb);color:var(--encre-3);
  background:var(--surface);border:1px solid var(--bord);border-radius:5px;padding:2px 6px;
  pointer-events:none}
.chercher input:focus ~ kbd{opacity:0}
.chercher input{width:100%;padding:8px 13px 8px 33px;border:1px solid var(--bord);
  border-radius:var(--r-s);font:400 var(--t-base) var(--fb);background:var(--surface-2);
  color:var(--encre);transition:border-color .12s,box-shadow .12s,background .12s}
.chercher input::placeholder{color:var(--encre-3)}
.chercher input:focus{outline:none;border-color:var(--accent);background:var(--surface);
  box-shadow:0 0 0 3px var(--accent-d)}

.millesime{margin-left:auto;display:flex;align-items:center;gap:9px}
.millesime select{padding:6px 28px 6px 11px;border:1px solid var(--bord);border-radius:var(--r-s);
  font:550 var(--t-petit) var(--fb);background:var(--surface-2);color:var(--encre);
  cursor:pointer;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--encre-3) 50%),
                   linear-gradient(135deg,var(--encre-3) 50%,transparent 50%);
  background-position:calc(100% - 14px) 54%, calc(100% - 10px) 54%;
  background-size:4px 4px,4px 4px;background-repeat:no-repeat}
.millesime .etat{font:600 var(--t-micro) var(--fb);letter-spacing:.08em;text-transform:uppercase;
  padding:4px 9px;border-radius:20px}
.millesime .etat.ouv{background:var(--ambre-d);color:var(--ambre)}
.millesime .etat.fig{background:var(--gris-d);color:var(--gris)}
.millesime .etat.def{background:var(--vert-d);color:var(--vert)}
.millesime .coef{font-family:var(--fm);font-size:var(--t-petit);color:var(--encre-2)}

main{padding:24px 26px 64px;max-width:1620px;width:100%}

/* ═══════════ CARTES ═══════════ */
.grille{display:grid;gap:18px}
.carte{background:var(--surface);border:1px solid var(--bord);border-radius:var(--r);
  padding:22px;box-shadow:var(--o1);animation:monter .28s cubic-bezier(.22,.9,.3,1) both}
@keyframes monter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.carte{animation:none}}
.carte.alerte{border-color:#F3D5D0;background:linear-gradient(180deg,#FFFCFC 0,#fff 60px)}

.tete{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  margin-bottom:17px;flex-wrap:wrap}
.tete h2{font-size:var(--t-titre);font-weight:600;line-height:1.3;
  display:flex;align-items:center;gap:9px}
.tete h2::before{content:'';width:4px;height:15px;border-radius:4px;background:var(--encre-3);
  flex-shrink:0}
.carte.terre  .tete h2::before{background:var(--ambre)}
.carte.bati   .tete h2::before{background:var(--accent)}
.carte.gel    .tete h2::before{background:var(--gris)}
.carte.ok     .tete h2::before{background:var(--vert)}
.carte.alerte .tete h2::before{background:var(--rouge)}
.tete .sous{margin:6px 0 0 13px;font-size:var(--t-petit);color:var(--encre-2);
  max-width:78ch;line-height:1.55}
.tete .sous.alerte{color:var(--rouge)}

.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:18px;
  align-items:start}
.cols-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:24px 0}
/* Un filet sépare les indicateurs plutôt qu'un simple écart. */
.cols-4 > .stat{padding:0 24px;border-left:1px solid var(--bord)}
.cols-4 > .stat:first-child{padding-left:0;border-left:none}
@media (max-width:900px){
  .cols-4 > .stat{padding:0;border-left:none}
  .cols-4{gap:22px 26px}
}

/* ═══════════ INDICATEURS ═══════════ */
.stat{min-width:0}
.stat .lb{font-size:var(--t-micro);font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--encre-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat .val{font-family:var(--fm);font-size:var(--t-nombre);font-weight:500;letter-spacing:-.03em;
  line-height:1.08;margin-top:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat .val u{text-decoration:none;font-size:var(--t-petit);font-weight:400;
  color:var(--encre-3);margin-left:5px;letter-spacing:0}
.stat.terre .val{color:var(--ambre)} .stat.bati .val{color:var(--accent)}
.stat.alerte .val{color:var(--rouge)} .stat.ok .val{color:var(--vert)}
.stat .note{font-size:var(--t-petit);color:var(--encre-3);margin-top:8px;line-height:1.5;
  max-width:26ch}

/* ═══════════ TABLEAUX ═══════════ */
table{border-collapse:collapse;width:100%}
th{font:600 var(--t-micro) var(--fb);letter-spacing:.09em;text-transform:uppercase;
  color:var(--encre-3);text-align:right;padding:10px 12px;white-space:nowrap;
  background:var(--surface-2);position:sticky;top:0;z-index:2;
  box-shadow:inset 0 -1px 0 var(--bord), 0 6px 10px -10px rgba(15,27,45,.35)}
th.l,td.l{text-align:left}
td{font:400 var(--t-base) var(--fm);padding:9px 12px;text-align:right;white-space:nowrap;
  border-bottom:1px solid var(--bord)}
td.l{font-family:var(--fb)}
tbody tr{transition:background .1s}
tbody tr:hover{background:var(--surface-2)}
tbody tr:last-child td{border-bottom:none}
tr.total{background:var(--surface-2);font-weight:600}
tr.total td{border-top:1px solid var(--bord-f)}
tr.ecr-debut td{border-top:1px solid var(--bord-f);padding-top:10px}
tr.ecr-fin td{padding-bottom:10px}
.cadre{overflow:auto;border:1px solid var(--bord);border-radius:var(--r-s);
  scrollbar-width:thin}
.cadre::-webkit-scrollbar{width:8px;height:8px}
.cadre::-webkit-scrollbar-thumb{background:var(--bord-f);border-radius:8px}

.fort{font-weight:600}
.discret{color:var(--encre-3)}
/* Ces classes servent d'utilitaires de couleur ET de modificateurs de carte.
   Sans l'exclusion, une carte prend la couleur et tout son contenu en hérite. */
.terre:not(.carte){color:var(--ambre)}
.bati:not(.carte){color:var(--accent)}
.alerte:not(.carte){color:var(--rouge)}
.ok-t:not(.carte){color:var(--vert)}
.carte{color:var(--encre)}

/* ═══════════ ÉTIQUETTES ═══════════ */
.tag{display:inline-block;font:600 var(--t-micro) var(--fb);letter-spacing:.05em;
  padding:3px 9px;border-radius:20px;background:var(--gris-d);color:var(--gris);
  vertical-align:middle;white-space:nowrap}
.t-ok,.t-VENDU,.t-ACTE{background:var(--vert-d);color:var(--vert)}
.t-alerte{background:var(--rouge-d);color:var(--rouge)}
.t-terre,.t-RESERVE,.t-OPTION{background:var(--ambre-d);color:var(--ambre)}
.t-gel,.t-LIBRE{background:var(--gris-d);color:var(--gris)}

/* ═══════════ BOUTONS ═══════════ */
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:var(--r-s);
  border:1px solid var(--bord);background:var(--surface);color:var(--encre);
  font:550 var(--t-base) var(--fb);cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background .12s,border-color .12s,box-shadow .12s}
.btn:hover{background:var(--surface-2);border-color:var(--bord-f);color:var(--encre)}
.btn:active{box-shadow:inset 0 1px 2px rgba(15,27,45,.08)}
.btn.plein{background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:0 1px 2px rgba(31,90,224,.28)}
.btn.plein:hover{background:var(--accent-h);border-color:var(--accent-h);color:#fff}
.btn.danger{color:var(--rouge);border-color:#F0D2CE}
.btn.danger:hover{background:var(--rouge-d)}
.btn.terre{color:var(--ambre);border-color:#F2DEC4}
.btn.terre:hover{background:var(--ambre-d)}
.btn.bati{color:var(--accent);border-color:#CFDEFB}
.btn.bati:hover{background:var(--accent-d)}
.btn.mini{padding:5px 10px;font-size:var(--t-petit)}

/* ═══════════ FORMULAIRES ═══════════ */
.ligne{display:flex;gap:11px;align-items:flex-end;flex-wrap:wrap}
.champ{display:flex;flex-direction:column;gap:5px}
.champ span{font-size:var(--t-micro);font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--encre-3)}
input[type=text],input[type=number],input[type=date],input[type=email],input[type=password],
input[type=search],input[type=file],select,textarea{
  padding:8px 11px;border:1px solid var(--bord);border-radius:var(--r-s);
  font:400 var(--t-base) var(--fb);background:var(--surface);color:var(--encre);
  transition:border-color .12s,box-shadow .12s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-d)}
input:disabled,select:disabled,textarea:disabled{background:var(--surface-2);color:var(--encre-2)}
input.mono,.mono{font-family:var(--fm)}
textarea{min-height:76px;resize:vertical;line-height:1.55}
.filtre{background:var(--surface-2);border:1px solid var(--bord);border-radius:var(--r-s);
  padding:13px 15px}

/* ═══════════ DIVERS ═══════════ */
.encadre{font-size:var(--t-petit);line-height:1.6;color:var(--encre-2);
  background:var(--surface-2);border:1px solid var(--bord);border-left:3px solid var(--bord-f);
  padding:13px 16px;border-radius:0 var(--r-s) var(--r-s) 0;margin:0}
.encadre.terre{background:linear-gradient(180deg,#FEF7EC 0,#FEFBF6 100%);
  border-color:#F2DEC4;border-left:3px solid #E8952C;color:#7A3D0A;
  border-radius:0 var(--r) var(--r) 0;padding:15px 18px;font-size:var(--t-base);line-height:1.62}
.encadre.terre b{color:#5E2F06}
.encadre.alerte{background:var(--rouge-d);border-color:#F3D5D0;border-left-color:var(--rouge);
  color:#8A1D14}
.formule{font-family:var(--fm);font-size:var(--t-petit);background:var(--surface-2);
  padding:4px 9px;border-radius:var(--r-p);border:1px solid var(--bord)}

.jauge{display:inline-block;width:88px;height:6px;background:var(--gris-d);
  border-radius:6px;overflow:hidden;vertical-align:middle}
.jauge i{display:block;height:100%;background:var(--accent);border-radius:6px}
.jauge i.retard{background:var(--rouge)}
/* Bande de répartition — vendus, réservés, libres.
   Elle s'appelait « barre », du nom que porte déjà le bandeau du haut :
   deux composants sans rapport sous une seule classe, et la règle la plus
   basse l'emportait. Le bandeau héritait donc d'une hauteur de 28 px, d'un
   fond gris, d'un débordement masqué et d'une marge basse — ce qui rognait
   le millésime, le sélecteur de thème et le bas du champ de recherche.
   Le composant est renommé ; « div.barre » reste accepté par compatibilité. */
.repartition,div.barre{display:flex;flex-wrap:nowrap;height:28px;border-radius:var(--r-p);
  overflow:hidden;margin-bottom:16px;background:var(--gris-d)}
.repartition i,div.barre i{display:flex;align-items:center;justify-content:center;
  font-style:normal;font-size:var(--t-petit);font-weight:600;color:#fff;min-width:0;
  flex-shrink:1;overflow:hidden;white-space:nowrap}
.repartition .t-VENDU,div.barre .t-VENDU{background:var(--vert)}
.repartition .t-RESERVE,div.barre .t-RESERVE{background:var(--ambre)}
.repartition .t-LIBRE,div.barre .t-LIBRE{background:var(--bord-f);color:var(--encre-2)}

.msg{position:fixed;right:22px;top:74px;z-index:210;max-width:420px;
  padding:13px 17px;font-size:var(--t-base);font-weight:500;border-radius:var(--r);
  background:var(--surface);color:var(--vert);border:1px solid #C9EBD9;
  box-shadow:var(--o3);display:flex;gap:10px;align-items:flex-start;
  animation:surgir .3s cubic-bezier(.22,.9,.3,1) both}
.msg::before{content:'';width:7px;height:7px;border-radius:7px;background:var(--vert);
  margin-top:7px;flex-shrink:0;box-shadow:0 0 0 3px var(--vert-d)}
.msg.err{color:var(--rouge);border-color:#F3D5D0}
.msg.err::before{background:var(--rouge);box-shadow:0 0 0 3px var(--rouge-d)}
@keyframes surgir{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}



/* ═══════════ CARTOUCHE ═══════════ */
.cartouche{background:var(--nuit);color:#fff;border-radius:var(--r);padding:22px 24px;
  display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;
  box-shadow:var(--o2)}
.cartouche-titre h1{font-size:24px;font-weight:600;letter-spacing:-.024em;line-height:1.15}
.cartouche-titre p{margin:7px 0 0;font-size:var(--t-petit);color:rgba(255,255,255,.6)}
.cartouche-cotes{display:flex;gap:0;flex-wrap:wrap;
  border-left:1px solid rgba(255,255,255,.14);padding-left:0}
.cartouche-cotes > div{padding:0 20px;border-left:1px solid rgba(255,255,255,.09)}
.cartouche-cotes > div:first-child{border-left:none}
.cartouche-cotes .k{display:block;font-size:var(--t-micro);letter-spacing:.11em;
  text-transform:uppercase;color:rgba(255,255,255,.42);font-weight:600}
.cartouche-cotes .v{display:block;font-family:var(--fm);font-size:14px;
  color:rgba(255,255,255,.95);margin-top:5px;letter-spacing:-.01em}

/* ═══════════ POINTS D'ATTENTION ═══════════ */
.alerte-ligne{display:flex;gap:12px;align-items:flex-start;padding:13px 12px;margin:0 -12px;
  border-radius:var(--r-s);text-decoration:none;color:inherit;position:relative;
  transition:background .12s}
.alerte-ligne::after{content:'›';position:absolute;right:12px;top:50%;transform:translateY(-50%);
  font-size:17px;color:var(--bord-f);opacity:0;transition:opacity .12s,transform .12s}
.alerte-ligne:hover{background:var(--surface-2);color:inherit}
.alerte-ligne:hover::after{opacity:1;transform:translateY(-50%) translateX(3px)}
.alerte-ligne + .alerte-ligne{border-top:1px solid var(--bord)}
.alerte-ligne b{display:block;font-size:var(--t-base);font-weight:600}
.alerte-ligne em{display:block;font-style:normal;font-size:var(--t-petit);
  color:var(--encre-2);margin-top:2px}
.pastille{width:8px;height:8px;border-radius:8px;margin-top:6px;flex-shrink:0}
.pastille.haute{background:var(--rouge);box-shadow:0 0 0 3px var(--rouge-d)}
.pastille.basse{background:var(--ambre);box-shadow:0 0 0 3px var(--ambre-d)}

/* ═══════════ FRISE DES MILLÉSIMES ═══════════ */
.frise{display:flex;overflow-x:auto;padding:6px 0 4px;scrollbar-width:thin}
.jalon{position:relative;min-width:164px;flex:1;padding-right:18px}
.jalon::before{content:'';position:absolute;left:6px;right:0;top:5px;height:2px;
  background:var(--bord)}
.jalon:last-child::before{right:auto;width:6px}
.jalon .marque{position:absolute;left:0;top:0;width:12px;height:12px;border-radius:12px;
  background:var(--surface);border:2px solid var(--bord-f);z-index:1;padding:0}
.jalon.fige .marque{border-color:var(--gris);background:var(--gris)}
.jalon.ouvert .marque{border-color:var(--ambre);background:var(--ambre)}
.jalon.definitif .marque{border-color:var(--vert);background:var(--vert)}
.jalon.courant .marque{border-color:var(--accent);background:var(--accent);
  box-shadow:0 0 0 4px var(--accent-d)}
.jalon .corps{padding-top:19px}
.jalon .code{font-size:15px;font-weight:600;letter-spacing:-.02em}
.jalon.courant .code{color:var(--accent)}
.jalon .date{font-family:var(--fm);font-size:var(--t-micro);color:var(--encre-3);margin-top:2px}
.jalon .chiffre{font-family:var(--fm);font-size:21px;font-weight:500;color:var(--ambre);
  margin-top:9px;letter-spacing:-.028em}
.jalon .pr{font-family:var(--fm);font-size:var(--t-petit);color:var(--encre-2);margin:3px 0 9px}
.jalon .pr em{font-style:normal;font-weight:600;margin-left:5px}

/* ═══════════ DOSSIER ET LETTRES ═══════════ */
.garde-t .k{font:600 var(--t-micro) var(--fb);letter-spacing:.14em;text-transform:uppercase;
  color:var(--encre-3)}
.garde-t h1{font-size:27px;font-weight:600;margin:9px 0 0;letter-spacing:-.026em}
.garde-t p{margin:8px 0 20px;color:var(--encre-2);font-size:var(--t-base)}
.garde-tab{border-top:2px solid var(--encre)}
.garde-tab td{font-family:var(--fb);text-align:left}
.garde-tab td:first-child{color:var(--encre-2);width:32%}
.lettre{padding:34px 36px;line-height:1.75}
.lettre p{margin:0 0 13px}
.lettre-tete{display:flex;justify-content:space-between;gap:40px;margin-bottom:26px}
.lettre .expediteur{font-size:16px;font-weight:600;letter-spacing:-.02em}
.lettre .destinataire{text-align:right;min-width:210px}
.lettre .lieu{text-align:right;margin-bottom:18px}
.lettre .objet{margin-bottom:20px;padding-bottom:12px;border-bottom:1px solid var(--bord)}
.lettre-tab{margin:16px 0 20px;border:1px solid var(--bord);border-radius:var(--r-s);overflow:hidden}
.lettre-tab th{position:static}
.lettre .signature{margin-top:32px;text-align:right}

/* ═══════════ CONNEXION ═══════════ */
.acces{min-height:100vh;display:grid;grid-template-columns:1.06fr .94fr;background:var(--nuit)}
.acces .scene{position:relative;display:flex;flex-direction:column;justify-content:center;
  padding:46px 44px;color:#fff;overflow:hidden}
.acces .marque.grande{display:flex;align-items:center;gap:13px;color:#fff;margin-bottom:4px}
.acces .marque.grande .mot{font-size:27px;letter-spacing:-.032em}
.acces .titre h1{font-size:31px;font-weight:600;letter-spacing:-.028em;line-height:1.12}
.acces .titre p{margin:12px 0 0;font-size:var(--t-base);color:rgba(255,255,255,.58);max-width:44ch}
.acces .fil{width:44px;height:3px;border-radius:3px;background:var(--accent);margin:22px 0 4px}
.acces .plan{margin:26px 0;display:flex;justify-content:center}
.acces .plan svg{width:100%;max-width:470px;height:auto}
.acces .trace{stroke-dasharray:600;stroke-dashoffset:600;animation:tracer 2s ease forwards}
.acces .lot{opacity:0;animation:poser .5s ease forwards}
@keyframes tracer{to{stroke-dashoffset:0}}
@keyframes poser{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.acces .cote{font-family:var(--fm);font-size:8px;letter-spacing:.05em}
.acces .pied{display:flex;gap:34px;flex-wrap:wrap;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.12)}
.acces .pied .k{display:block;font-size:var(--t-micro);font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.4)}
.acces .pied .v{display:block;font-size:var(--t-base);color:rgba(255,255,255,.92);margin-top:5px}

.acces-volet{background:var(--surface);display:grid;place-items:center;padding:44px 34px}
.acces .boite{width:100%;max-width:356px}
.acces .boite h1{font-size:22px;font-weight:600;letter-spacing:-.024em;margin-bottom:7px}
.acces .intro{font-size:var(--t-base);color:var(--encre-2);margin:0 0 26px}
.acces .boite .champ{margin-bottom:15px}
.acces .boite input{width:100%}
.acces .boite .btn{width:100%;justify-content:center;padding:11px;margin-top:5px}
.acces .mention{font-size:var(--t-petit);color:var(--encre-3);line-height:1.6;
  margin:22px 0 0;padding-top:18px;border-top:1px solid var(--bord)}
@media (max-width:900px){.acces{grid-template-columns:1fr}.acces .scene{display:none}
  .acces-vue{display:none}}

/* ═══════════ ADAPTATIF ═══════════ */
@media (max-width:1000px){
  .app{flex-direction:column}
  .flanc{width:100%;height:auto;position:static;flex-direction:row;flex-wrap:wrap;
    align-items:center;gap:10px;padding:10px 14px}
  .marque{padding:0}
  .flanc-projet{padding:0;flex:1;min-width:180px}
  .flanc-nav{order:9;width:100%;display:flex;overflow-x:auto;padding:6px 0 2px;gap:4px}
  .bloc{margin:0;display:flex;gap:2px}
  .bloc-t{display:none}
  .flanc-nav a{white-space:nowrap}
  .compte{border:none}
  .compte summary{padding:0}
  .compte .qui{display:none}
  .volet{left:auto;right:0;bottom:auto;top:calc(100% + 8px);width:230px}
  header.barre{padding:0 16px} main{padding:18px 16px 48px}
  .cartouche-cotes{border-left:none;padding-left:0;border-top:1px solid rgba(255,255,255,.14);
    padding-top:16px;width:100%}
}

/* ═══════════ IMPRESSION ═══════════ */
@media print{
  body{background:#fff}
  .flanc,header.barre,.noprint,.msg{display:none!important}
  .app{display:block} main{padding:0;max-width:none}
  .carte{border:1px solid #D8DCE3;box-shadow:none;page-break-inside:avoid;margin-bottom:14px}
  .cartouche{background:#fff;color:#000;border:1px solid #000}
  .cartouche-titre p,.cartouche-cotes .k{color:#444}
  .cartouche-cotes .v{color:#000}
  .cartouche-cotes{border-left:1px solid #999}
  th{background:#F2F4F7!important;position:static}
  .lettre{page-break-after:always;border:none;padding:0}
  .lettre:last-child{page-break-after:auto}
  @page{margin:14mm}
}


/* ═══════════ ÉTAT VIDE ═══════════ */
.vide{text-align:center;padding:46px 24px;color:var(--encre-2)}
.vide svg{width:34px;height:34px;color:var(--bord-f);margin-bottom:14px}
.vide b{display:block;font-size:var(--t-titre);font-weight:600;color:var(--encre);
  margin-bottom:6px;letter-spacing:-.014em}
.vide p{margin:0 auto;max-width:52ch;font-size:var(--t-petit);line-height:1.6}
.vide .btn{margin-top:18px}

/* ═══════════ FINITIONS ═══════════ */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-p)}
::selection{background:var(--accent-d);color:var(--accent-h)}
.carte .tete + .cols-4{padding-top:2px}
.filtre .champ span{color:var(--encre-2)}
td a{text-decoration:none;border-bottom:1px solid transparent;transition:border-color .12s}
td a:hover{border-bottom-color:var(--accent)}
.tag + .tag{margin-left:4px}
tr.total td:first-child{letter-spacing:.03em;font-size:var(--t-petit);
  text-transform:uppercase;color:var(--encre-2)}

/* ═══════════ ÉDITION RAPIDE ═══════════ */
.crayon{width:26px;height:26px;padding:0;display:grid;place-items:center;cursor:pointer;
  border:1px solid transparent;background:none;color:var(--encre-3);border-radius:var(--r-p);
  transition:background .12s,color .12s,border-color .12s}
.crayon svg{width:14px;height:14px}
.crayon:hover{background:var(--accent-d);color:var(--accent);border-color:#CFDEFB}
tbody tr.maj{animation:signaler 1.2s ease}
@keyframes signaler{0%{background:var(--accent-d)}100%{background:transparent}}

.tiroir-fond{position:fixed;inset:0;background:rgba(15,27,45,.34);z-index:100;opacity:0;
  transition:opacity .2s;backdrop-filter:blur(1.5px)}
.tiroir-fond.ouvert{opacity:1}
.tiroir{position:fixed;top:0;right:0;bottom:0;width:440px;max-width:94vw;z-index:101;
  background:var(--surface);border-left:1px solid var(--bord);box-shadow:var(--o3);
  display:flex;flex-direction:column;transform:translateX(102%);
  transition:transform .22s cubic-bezier(.22,.9,.3,1)}
.tiroir.ouvert{transform:none}
.tiroir > header{display:flex;justify-content:space-between;align-items:center;gap:14px;
  padding:17px 20px;border-bottom:1px solid var(--bord)}
.tiroir > header .k{display:block;font-size:var(--t-micro);font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--encre-3)}
.tiroir > header b{display:block;font-size:var(--t-titre);font-weight:600;margin-top:3px;
  letter-spacing:-.014em}
.tiroir-corps{flex:1;overflow-y:auto;padding:20px;scrollbar-width:thin}
.tr-grille{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.tr-grille .champ input,.tr-grille .champ select{width:100%}
.tiroir > footer{display:flex;gap:10px;justify-content:space-between;padding:15px 20px;
  border-top:1px solid var(--bord);background:var(--surface-2)}

.tr-calc{margin-top:22px;border:1px solid var(--bord);border-radius:var(--r-s);overflow:hidden}
.tr-calc-t{padding:9px 14px;background:var(--surface-2);font-size:var(--t-micro);font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--encre-3);
  border-bottom:1px solid var(--bord)}
.tr-l{display:flex;justify-content:space-between;gap:14px;padding:9px 14px;
  border-bottom:1px solid var(--bord);font-size:var(--t-base)}
.tr-l:last-child{border-bottom:none}
.tr-l span{color:var(--encre-2)}
.tr-l b{font-family:var(--fm);font-weight:500}
.msg{transition:opacity .3s}
@media (max-width:560px){.tr-grille{grid-template-columns:1fr}}


/* Marque posée sur fond clair : le mot reprend l'encre du texte. */
.acces-volet .marque{padding:0 0 24px;color:var(--encre)}
.acces-volet .marque .mot{font-size:19px}

/* Volet de connexion : quelques repères plutôt qu'un grand vide. */
.acces-atouts{list-style:none;margin:26px 0 0;padding:22px 0 0;
  border-top:1px solid var(--bord);display:grid;gap:11px}
.acces-atouts li{font-size:var(--t-petit);color:var(--encre-2);line-height:1.55;
  padding-left:19px;position:relative}
.acces-atouts li::before{content:'';position:absolute;left:0;top:6px;width:7px;height:7px;
  border-radius:7px;background:var(--accent-d);border:2px solid var(--accent)}
.acces-atouts b{color:var(--encre);font-weight:600}

/* ═══════════ RECOMMANDATIONS ═══════════ */
.reco-bloc{padding:13px 0;border-top:1px solid var(--bord)}
.reco-bloc:first-of-type{border-top:none;padding-top:0}
.reco-t{font-size:var(--t-micro);font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--encre-3);margin-bottom:6px}
.reco-bloc p{margin:0;font-size:var(--t-base);line-height:1.62;color:var(--encre-2)}
.reco-bloc p b{color:var(--encre);font-weight:600}
.reco-bloc.ref p{font-size:var(--t-petit);color:var(--encre-3);font-style:italic}
.reco .tete h2{max-width:66ch}

/* Aperçu sur le tableau de bord */
.reco-mini{display:block;padding:13px 12px;margin:0 -12px;border-radius:var(--r-s);
  border-bottom:1px solid var(--bord);text-decoration:none;color:inherit;
  transition:background .12s}
.reco-mini:last-of-type{border-bottom:none}
.reco-mini:hover{background:var(--surface-2);color:inherit}
.reco-mini .h{display:flex;gap:9px;align-items:baseline;justify-content:space-between}
.reco-mini b{font-size:var(--t-base);font-weight:600;line-height:1.35}
.reco-mini em{display:block;font-style:normal;font-size:var(--t-petit);color:var(--encre-2);
  margin-top:4px;line-height:1.5}

/* ═══════════ GRILLE DE TRAVAIL ═══════════ */
/* La hauteur se prenait sur « 100vh moins 60 px de bandeau ». Le bandeau
   n'a pas toujours 60 px — il enveloppe dès que la place manque — et la
   grille débordait alors par le bas, coupant la ligne des totaux. Elle
   occupe désormais la place que le conteneur lui laisse, quelle qu'elle soit. */
.grille-page{display:flex;flex-direction:column;gap:0;flex:1;min-height:0;
  margin:-24px -26px -64px}
.gr-barre{display:flex;gap:9px;align-items:center;flex-wrap:wrap;padding:11px 22px;
  background:var(--surface);border-bottom:1px solid var(--bord)}
.gr-barre input[type=search]{width:250px}
.gr-barre select{min-width:145px}
.gr-etat{font-size:var(--t-petit);color:var(--encre-2)}
.gr-etat b{color:var(--encre);font-weight:600}
.gr-aide{margin-left:auto;font-size:var(--t-petit);color:var(--encre-3)}

.gr-cadre{flex:1;overflow:auto;background:var(--surface);scrollbar-width:thin;
  scroll-padding-bottom:96px}
.grille-page.avec-barre .gr-cadre{padding-bottom:82px}
.gr-cadre::-webkit-scrollbar{width:11px;height:11px}
.gr-cadre::-webkit-scrollbar-thumb{background:var(--bord-f);border-radius:11px;
  border:3px solid var(--surface)}

table.gr{border-collapse:separate;border-spacing:0;width:100%}
table.gr th{position:sticky;top:0;z-index:3;background:var(--surface-2);
  padding:8px 10px;font-size:var(--t-micro);border-bottom:1px solid var(--bord-f);
  border-right:1px solid var(--bord)}
table.gr td{padding:0;border-bottom:1px solid var(--bord);border-right:1px solid var(--bord);
  font:400 var(--t-base) var(--fm);text-align:right;height:31px;
  white-space:nowrap;line-height:31px;padding-inline:10px}
table.gr td.l{text-align:left;font-family:var(--fb)}
table.gr tbody tr:hover td{background:#FBFCFE}

/* Colonne du repère, figée à gauche */
table.gr .gr-fixe{position:sticky;left:0;z-index:2;background:var(--surface);
  border-right:1px solid var(--bord-f);font-weight:600;min-width:112px}
table.gr th.gr-fixe{z-index:4;background:var(--surface-2)}
table.gr tbody tr:hover .gr-fixe{background:#FBFCFE}
table.gr .gr-fixe a{color:var(--encre);text-decoration:none}
table.gr .gr-fixe a:hover{color:var(--accent)}

/* Cellules saisissables : un fond bleuté très léger */
table.gr td.e{background:#F7FAFF;cursor:cell}
table.gr tbody tr:hover td.e{background:#EFF5FE}
table.gr td.e:hover{box-shadow:inset 0 0 0 1px var(--accent-d)}
table.gr td.k{color:var(--encre-2)}
table.gr td.actif{padding:0;box-shadow:inset 0 0 0 2px var(--accent);background:#fff}
table.gr td.actif input,table.gr td.actif select{width:100%;height:29px;border:none;
  border-radius:0;padding:0 9px;font:400 var(--t-base) var(--fm);text-align:inherit;
  background:transparent}
table.gr td.actif input:focus,table.gr td.actif select:focus{outline:none;box-shadow:none}
table.gr td.actif select{font-family:var(--fb)}
table.gr td.encours{background:#FFFAEB}
table.gr td.juste{animation:cellOk .9s ease}
table.gr td.faux{background:var(--rouge-d);box-shadow:inset 0 0 0 2px var(--rouge)}
@keyframes cellOk{0%{background:#D7F0E2}100%{background:#F7FAFF}}

table.gr tfoot td{position:sticky;bottom:0;z-index:5;background:var(--surface-2);
  border-top:1px solid var(--bord-f);font-weight:600}
table.gr tfoot .gr-fixe{z-index:4}

@media print{
  .grille-page{height:auto;margin:0}
  .gr-barre,.gr-aide{display:none}
  table.gr td.e{background:none}
  table.gr .gr-fixe,table.gr th,table.gr tfoot td{position:static}
}

/* Sélection dans la grille */
table.gr .gr-sel{position:sticky;left:0;z-index:2;background:var(--surface);width:34px;
  min-width:34px;padding:0;text-align:center}
table.gr th.gr-sel{z-index:4;background:var(--surface-2)}
table.gr .gr-fixe{left:34px}
table.gr .gr-sel input{margin:0;cursor:pointer;accent-color:var(--accent)}
table.gr tbody tr:hover .gr-sel{background:#FBFCFE}
table.gr tbody tr.choisie td{background:#EAF2FE}
table.gr tbody tr.choisie .gr-fixe,table.gr tbody tr.choisie .gr-sel{background:#EAF2FE}
table.gr tbody tr.maj td{animation:cellOk 1.2s ease}

/* Barre d'action en masse */
.gr-masse[hidden],.tiroir[hidden],.tiroir-fond[hidden]{display:none !important}
.gr-masse{position:fixed;left:0;right:0;bottom:24px;margin:0 auto;
  width:max-content;max-width:min(94vw,1080px);z-index:200;
  background:var(--nuit);color:#fff;border-radius:12px;
  box-shadow:0 18px 44px -12px rgba(15,27,45,.55), 0 0 0 1px rgba(255,255,255,.06);
  padding:13px 17px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;
  animation:surgir .22s cubic-bezier(.22,.9,.3,1) both}
.gm-t{font-size:var(--t-base);display:flex;align-items:center;gap:11px;white-space:nowrap}
.gm-t b{font-family:var(--fm);font-size:16px;font-weight:600}
.gm-t .btn{background:transparent;border-color:var(--nuit-3);color:#A9B7C7}
.gm-t .btn:hover{background:var(--nuit-2);color:#fff}
.gm-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap;
  padding-left:16px;border-left:1px solid var(--nuit-3)}
.gm-actions select,.gm-actions input{background:var(--nuit-2);color:#fff;
  border:1px solid var(--nuit-3);border-radius:var(--r-s);padding:7px 10px;
  font:400 var(--t-base) var(--fb)}
.gm-actions input.mono{font-family:var(--fm)}
.gm-actions select:focus,.gm-actions input:focus{border-color:#4C86F5;
  box-shadow:0 0 0 3px rgba(76,134,245,.22)}
.gm-note{font-size:var(--t-petit);color:#8496A8;font-style:italic}
@media (max-width:860px){
  .gr-masse{left:12px;right:12px;transform:none;flex-direction:column;align-items:stretch}
  .gm-actions{padding-left:0;border-left:none;border-top:1px solid var(--nuit-3);padding-top:12px}
}

/* Curseur de cellule, hors édition */
table.gr td.curseur{box-shadow:inset 0 0 0 2px var(--accent);position:relative;z-index:1}
table.gr td.curseur.e{background:#EAF2FE}


/* ═══════════ PLAN DE MASSE ═══════════ */
.pl-legende{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pl-pilule{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:20px;
  border:1px solid var(--bord);background:var(--surface);text-decoration:none;
  font-size:var(--t-base);color:var(--encre-2);transition:border-color .12s,background .12s}
.pl-pilule:hover{border-color:var(--bord-f);background:var(--surface-2);color:var(--encre)}
.pl-pilule.actif{border-color:var(--accent);background:var(--accent-d);color:var(--accent-h)}
.pl-pilule i{width:9px;height:9px;border-radius:9px;flex-shrink:0}
.pl-pilule b{font-family:var(--fm);font-weight:600;color:var(--encre)}
.pl-pilule.s-LIBRE i{background:var(--bord-f)}
.pl-pilule.s-RESERVE i{background:#E8952C}
.pl-pilule.s-VENDU i{background:var(--vert)}

.pl-bloc{padding:20px 22px}
.pl-tete{display:flex;justify-content:space-between;align-items:flex-start;gap:22px;
  flex-wrap:wrap;margin-bottom:18px;padding-bottom:15px;border-bottom:1px solid var(--bord)}
.pl-tete h2{font-size:var(--t-titre);font-weight:600}
.pl-tete .sous{margin:5px 0 0;font-size:var(--t-petit);color:var(--encre-2)}
.pl-jauge{text-align:right;min-width:170px}
.pl-jauge-b{display:flex;height:7px;border-radius:7px;overflow:hidden;background:var(--gris-d)}
.pl-jauge-b i{display:block;height:100%}
.pl-jauge-b .s-VENDU{background:var(--vert)}
.pl-jauge-b .s-RESERVE{background:#E8952C}
.pl-jauge span{display:block;margin-top:7px;font-size:var(--t-petit);color:var(--encre-2)}

.pl-niveau{display:flex;gap:16px;align-items:flex-start;padding:11px 0;
  border-bottom:1px dashed var(--bord)}
.pl-niveau:last-child{border-bottom:none;padding-bottom:0}
.pl-niv-lb{flex-shrink:0;width:104px;padding-top:7px;font-size:var(--t-micro);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--encre-3)}
.pl-niv-lb em{display:block;font-style:normal;font-family:var(--fm);font-size:var(--t-petit);
  letter-spacing:0;text-transform:none;color:var(--bord-f);margin-top:3px}
.pl-cases{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0}

.pl-case{position:relative;min-width:52px;padding:7px 9px;border-radius:9px;
  border:1px solid transparent;text-decoration:none;text-align:center;
  transition:transform .12s cubic-bezier(.22,.9,.3,1),box-shadow .12s,border-color .12s}
.pl-case b{display:block;font-size:var(--t-base);font-weight:600;line-height:1.15}
.pl-case span{display:block;font-family:var(--fm);font-size:10px;opacity:.75;margin-top:2px;
  white-space:nowrap}
.pl-case:hover{transform:translateY(-2px);box-shadow:0 6px 14px -5px rgba(15,27,45,.28);z-index:2}
.pl-case .pl-point{position:absolute;top:5px;right:5px;width:6px;height:6px;border-radius:6px;
  background:currentColor;opacity:.55}

.pl-case.s-LIBRE{background:var(--surface-2);border-color:var(--bord);color:var(--encre-2)}
.pl-case.s-LIBRE:hover{border-color:var(--bord-f)}
.pl-case.s-RESERVE{background:#FEF4E4;border-color:#F2DBB4;color:#96500A}
.pl-case.s-RESERVE:hover{border-color:#E8952C}
.pl-case.s-VENDU{background:var(--vert-d);border-color:#B7E7CE;color:#05603A}
.pl-case.s-VENDU:hover{border-color:var(--vert)}

/* Les parkings, identiques par dizaines, tiennent en pastilles. */
.pl-niveau.compact .pl-case{min-width:34px;padding:5px 6px;border-radius:7px}
.pl-niveau.compact .pl-case b{font-size:var(--t-petit)}
.pl-niveau.compact .pl-case span{display:none}
.pl-niveau.compact .pl-point{top:3px;right:3px;width:5px;height:5px}

@media (max-width:760px){
  .pl-niveau{flex-direction:column;gap:7px}
  .pl-niv-lb{width:auto;padding-top:0}
  .pl-niv-lb em{display:inline;margin-left:7px}
}
@media print{
  .pl-case:hover{transform:none;box-shadow:none}
  .pl-bloc{page-break-inside:avoid}
}

/* Mention sous la barre de la grille */
.gr-note{padding:10px 22px;background:#FEF7EC;border-bottom:1px solid #F2DEC4;
  font-size:var(--t-petit);color:#7A3D0A;line-height:1.55}
.gr-note b{font-weight:600;color:#5E2F06}
.gr-note a{margin-left:8px;font-weight:600}

/* Bandeau de période : ce que la grille montre, et ce que la déclaration porte */
.gr-per{padding:10px 22px;background:var(--accent-d);border-bottom:1px solid #D6E4FE;
  font-size:var(--t-petit);color:#1E3A5F;line-height:1.55}
.gr-per b{font-weight:600;color:#12305A}
.gr-per a{margin-left:8px;font-weight:600}

/* Socle : les paramètres du millésime, au-dessus du tableau */
.gr-socle{padding:11px 22px 12px;background:var(--surface-2);
  border-bottom:1px solid var(--bord)}
.gr-socle-t{display:flex;gap:10px;align-items:baseline;margin-bottom:9px}
.gr-socle-h{font-size:var(--t-micro);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--encre-3)}
.gr-socle-p{font-size:var(--t-petit);color:var(--encre-3)}
.gr-socle-t .btn{margin-left:auto}
.gr-socle-c{display:flex;flex-wrap:wrap;gap:11px 20px;align-items:flex-start}
.gr-socle-l{align-self:center;font-size:var(--t-micro);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--encre-3);padding:2px 8px;border-radius:var(--r-p);
  background:var(--surface);border:1px solid var(--bord);white-space:nowrap}
.gr-socle-v{min-width:0}
.gr-socle-v b{display:block;font-family:var(--fm);font-size:13.5px;font-weight:500;
  letter-spacing:-.02em;line-height:1.15;color:var(--encre);white-space:nowrap}
.gr-socle-v i{display:block;margin-top:2px;font-style:normal;font-size:var(--t-micro);
  color:var(--encre-3);white-space:nowrap}
.gr-socle-v.terre b{color:var(--ambre)}
.gr-socle-v.bati  b{color:var(--accent)}
.gr-socle-n{margin:10px 0 0;font-size:var(--t-petit);color:var(--encre-3);line-height:1.55}
.gr-socle.plie .gr-socle-c,.gr-socle.plie .gr-socle-n{display:none}
.gr-socle.plie{padding-bottom:10px}
.gr-socle.plie .gr-socle-t{margin-bottom:0}
@media (max-width:820px){
  .gr-socle{padding:11px 16px 12px}
  .gr-socle-c{gap:11px 16px}
  .gr-socle-l{width:100%;text-align:left}
}
@media print{
  .gr-socle{background:none;border-bottom:1px solid #D8DEE8}
  .gr-socle.plie .gr-socle-c{display:flex}
  .gr-socle.plie .gr-socle-n{display:block}
}

/* Sélecteur de colonnes de la grille */
.gr-volet{padding:14px 22px;background:var(--surface-2);border-bottom:1px solid var(--bord)}
.gr-volet[hidden]{display:none!important}
.gr-volet-t{display:flex;gap:8px;align-items:center;font-size:var(--t-micro);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--encre-3);margin-bottom:11px}
.gr-volet-t .btn{margin-left:0;letter-spacing:0;text-transform:none}
.gr-volet-t .btn:first-of-type{margin-left:auto}
.gr-volet-c{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:7px 18px}
.gr-volet-c label{display:flex;gap:8px;align-items:center;font-size:var(--t-base);
  color:var(--encre-2);cursor:pointer}
.gr-volet-c label:hover{color:var(--encre)}
.gr-volet-p{margin:12px 0 0;font-size:var(--t-petit);color:var(--encre-3)}