/* ===========================================================================
   KIT BUILD UI — tokens des deux thèmes, palette sémantique, coque (sidebar
   noire, logo, navigation, interrupteur de thème) et composants génériques
   (cartes, KPI, boutons, pastilles, jauges, tableaux, champs, modales, toasts).
   Référence visuelle de tous les outils BUILD (cockpit, Qualiopi, Portail…) :
   ce fichier se copie TEL QUEL. Aucun sélecteur propre à un produit ici.
   Thème : <html data-theme="dark|light">, posé avant rendu par theme.js.
   La sidebar reste noire dans les deux thèmes : elle reçoit le bloc sombre.
   Documentation des classes : DESIGN_TOKENS.md, « Kit BUILD UI ».
   Version du kit : 3.2 (04/11/2026). À augmenter à chaque évolution du kit ;
   la copie dans les autres outils passe par scripts/kit-ui.mjs.
   =========================================================================== */
:root,:root[data-theme="dark"],.sidebar{
  color-scheme:dark;
  --bg:#000000; --bg-2:#000000; --panel:#05070e; --panel-2:#080c17; --navy:#0e2a5e;
  --page-bg:#000000;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.16); --line-3:rgba(255,255,255,.28);
  --blue:#2f6bff; --blue-2:#7aa6ff; --cyan:#7aa6ff;
  --text:#ffffff; --text-strong:#ffffff; --text-body:#d3d8ea; --muted:#c2c9da; --muted-2:#808aa0;
  --grad:linear-gradient(125deg,#21539f 0%,#0c265c 100%);
  --grad-text:linear-gradient(95deg,#9cbcff,#3f78ff);
  --grad-soft:linear-gradient(120deg,rgba(47,107,255,.16),rgba(20,50,120,.20));
  --grad-bar:linear-gradient(90deg,#0c265c,#2f6bff);
  /* surfaces */
  --surface:linear-gradient(165deg,var(--panel),var(--bg-2));
  --surface-2:linear-gradient(165deg,var(--panel-2),var(--bg-2));
  --fill:rgba(255,255,255,.03); --fill-2:rgba(255,255,255,.06); --fill-3:rgba(255,255,255,.08);
  --hover:rgba(255,255,255,.025); --track:rgba(255,255,255,.06); --zebra:transparent; --thead-bg:transparent;
  --input-bg:rgba(255,255,255,.025); --input-focus-bg:rgba(47,107,255,.06);
  --topbar-bg:rgba(0,0,0,.72); --toast-bg:rgba(8,12,23,.92); --backdrop:rgba(0,0,0,.7);
  --shadow:none; --shadow-lg:0 40px 90px -30px rgba(0,0,0,.9); --shadow-toast:0 24px 60px -24px rgba(0,0,0,.85);
  --btn-shadow:0 10px 40px -12px rgba(31,79,163,.55); --btn-shadow-hover:0 18px 50px -10px rgba(31,79,163,.7);
  --selection:rgba(31,79,163,.4); --selection-ink:#ffffff;
  --glow-r:9px; /* halo des pastilles (0 en clair) */
  /* sémantique : trait/fond graphique (--x), texte (--x-ink), fond doux (--x-bg), filet (--x-line) */
  --ok:#46d39a; --ok-ink:#46d39a; --ok-bg:rgba(70,211,154,.08); --ok-line:rgba(70,211,154,.3);
  --warn:#ffb454; --warn-ink:#ffb454; --warn-bg:rgba(255,180,84,.08); --warn-line:rgba(255,180,84,.3);
  --danger:#ff6b6b; --danger-ink:#ff8f8f; --danger-bg:rgba(255,107,107,.08); --danger-line:rgba(255,107,107,.3);
  --info:#7aa6ff; --info-ink:#7aa6ff; --info-bg:rgba(47,107,255,.1); --info-line:rgba(91,140,255,.3);
  --neutral-ink:#808aa0; --neutral-bg:rgba(255,255,255,.03); --neutral-line:rgba(255,255,255,.16);
  --fill-ok:linear-gradient(90deg,#1c7f5a,#46d39a);
  --fill-warn:linear-gradient(90deg,#b9791f,#ffb454);
  --fill-danger:linear-gradient(90deg,#a83232,#ff6b6b);
  --on-warn:#000000; /* texte posé sur un aplat --warn-solid */
  --warn-solid:#ffb454;
  /* graphiques : séries (bleu, vert, orange, bleu clair, rouge, bleu nuit) + gris « autres » */
  --series-1:#2f6bff; --series-2:#46d39a; --series-3:#ffb454; --series-4:#9cbcff;
  --series-5:#ff6b6b; --series-6:#5b8cff; --series-muted:#3a4256; --series-machine:#5b6478;
  --chart-grid:rgba(255,255,255,.06); --chart-label:#808aa0; --chart-value:#c2c9da;
  --chart-center:#ffffff; --chart-track:rgba(255,255,255,.05);
  --r:18px; --ease:cubic-bezier(.22,.61,.36,1); --sidebar:248px;
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#f4f6fb; --bg-2:#ffffff; --panel:#ffffff; --panel-2:#ffffff; --navy:#0e2a5e;
  --page-bg:#f4f6fb;
  --line:#e3e8f2; --line-2:#d6ddea; --line-3:#b8c2d6;
  --blue:#2f6bff; --blue-2:#21539f; --cyan:#21539f;
  --text:#05070e; --text-strong:#05070e; --text-body:#39415a; --muted:#5b6680; --muted-2:#677289;
  --grad:linear-gradient(125deg,#21539f 0%,#0c265c 100%);
  --grad-text:linear-gradient(95deg,#21539f,#21539f);
  --grad-soft:linear-gradient(120deg,#eaf1ff,#f3f7ff);
  --grad-bar:linear-gradient(90deg,#5b8cff,#2f6bff);
  --surface:#ffffff; --surface-2:#ffffff;
  --fill:#f6f8fc; --fill-2:#eef2f8; --fill-3:#e6ebf4;
  --hover:#f5f8ff; --track:#e8edf5; --zebra:#fbfcfe; --thead-bg:#f7f9fc;
  --input-bg:#ffffff; --input-focus-bg:#ffffff;
  --topbar-bg:rgba(244,246,251,.86); --toast-bg:#ffffff; --backdrop:rgba(11,18,32,.36);
  --shadow:0 1px 2px rgba(5,7,14,.06),0 12px 32px -20px rgba(5,7,14,.28);
  --shadow-lg:0 30px 70px -24px rgba(5,7,14,.30); --shadow-toast:0 24px 60px -24px rgba(5,7,14,.55);
  --btn-shadow:0 10px 30px -12px rgba(12,38,92,.55); --btn-shadow-hover:0 16px 40px -12px rgba(12,38,92,.65);
  --selection:rgba(47,107,255,.18); --selection-ink:#0b1220;
  --glow-r:0px;
  --ok:#12a150; --ok-ink:#0f7a3d; --ok-bg:#e8f7ef; --ok-line:#b9e5cb;
  --warn:#d97706; --warn-ink:#a14a06; --warn-bg:#fff4e0; --warn-line:#f5d7a1;
  --danger:#e5484d; --danger-ink:#c42b31; --danger-bg:#fdecec; --danger-line:#f5c2c4;
  --info:#2f6bff; --info-ink:#21539f; --info-bg:#eaf1ff; --info-line:#c6d6fb;
  --neutral-ink:#5b6680; --neutral-bg:#f1f3f8; --neutral-line:#dde3ee;
  --fill-ok:linear-gradient(90deg,#12a150,#2cc16c);
  --fill-warn:linear-gradient(90deg,#d97706,#f59e0b);
  --fill-danger:linear-gradient(90deg,#d63a40,#ef5a5f);
  --on-warn:#ffffff; --warn-solid:#b45309;
  --series-1:#2f6bff; --series-2:#12a150; --series-3:#e58a0c; --series-4:#8fb0ff;
  --series-5:#e5484d; --series-6:#1f3f8f; --series-muted:#c3cad8; --series-machine:#a3acbf;
  --chart-grid:#e9edf5; --chart-label:#677289; --chart-value:#3b4660;
  --chart-center:#0b1220; --chart-track:#eef1f7;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--page-bg)}
body{
  background:var(--page-bg);color:var(--text);
  font-family:'General Sans',system-ui,sans-serif;font-size:15.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;position:relative;min-height:100vh;
}
/* grain — overlay de bruit SVG (identique au site) */
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.035;mix-blend-mode:overlay;
}
::selection{background:var(--selection);color:var(--selection-ink)}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:'Clash Display',sans-serif;font-weight:700;line-height:1.05;letter-spacing:-.02em}
.mono{font-family:'Spline Sans Mono',monospace}
.grad-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
:focus-visible{outline:2px solid var(--blue-2);outline-offset:2px;border-radius:6px}

/* halos / orbs flous (jamais trop forts) */
.orb{position:fixed;border-radius:50%;filter:blur(110px);opacity:.26;z-index:0;pointer-events:none}
.orb-1{width:520px;height:520px;background:#1e4fa0;top:-200px;left:160px}
.orb-2{width:460px;height:460px;background:#16356f;bottom:-200px;right:-120px;opacity:.2}

.eyebrow{
  font-family:'Spline Sans Mono',monospace;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--blue-2);display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.6}

/* ===== Layout : sidebar + contenu ===== */
.app{display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:100vh;position:relative;z-index:2}

.sidebar{
  position:sticky;top:0;height:100vh;border-right:1px solid var(--line);color:var(--text);
  background:#000;display:flex;flex-direction:column;padding:22px 14px 16px;gap:2px;z-index:3;
  overflow-y:auto;overflow-x:hidden;
}
/* Logo : cube + « build. » + sous-titre mono, centrés verticalement ; le bord
   gauche du cube s'aligne sur celui des pictos du menu (14 + 1 + 12 px). */
.logo{display:flex;align-items:center;gap:12px;padding:2px 13px 22px;text-decoration:none}
.logo .cube{width:30px;height:30px;flex:none;display:block}
.logo .bt{display:flex;flex-direction:column;justify-content:center;min-width:0}
.logo b{display:block;font-family:'Clash Display',sans-serif;font-weight:700;font-size:21px;line-height:1.05;letter-spacing:-.03em;color:#fff}
.logo small{display:block;font-family:'Spline Sans Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#808aa0;margin-top:4px;white-space:nowrap}
.logo .dot{color:var(--blue-2)}
.nav-label{font-family:'Spline Sans Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#808aa0;padding:16px 13px 6px}
.nav-label:first-child{padding-top:4px}
.nav-item{
  display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px;margin:1px 0;
  color:#c2c9da;font-weight:500;font-size:14.5px;cursor:pointer;transition:background .25s var(--ease),color .25s var(--ease);
  border:1px solid transparent;position:relative;text-decoration:none;
}
button.nav-item{background:transparent;font:inherit;font-weight:500;font-size:14.5px;text-align:left;width:100%}
.nav-item svg{width:18px;height:18px;flex:none;color:#808aa0;transition:color .25s var(--ease)}
.nav-item:hover{background:rgba(255,255,255,.045);color:#fff}
.nav-item:hover svg{color:#d3d8ea}
.nav-item.active{background:rgba(47,107,255,.16);border-color:rgba(122,166,255,.22);color:#fff}
.nav-item.active svg{color:#7aa6ff}
/* Compteur : pastille rouge (quelque chose attend une action). Depuis le kit 3.1,
   le menu porte .n-badge (aplat --alert-solid, blanc à 5,6:1) ; .badge garde le
   même aplat pour les copies qui ne sont pas encore passées à .n-badge. */
.nav-item .badge,.nav-item .n-badge{margin-left:auto}
.nav-item .badge{font-family:'Spline Sans Mono',monospace;font-size:10.5px;min-width:22px;height:20px;padding:0 6px;border-radius:10px;display:grid;place-items:center;background:var(--alert-solid,#c42b31);color:#fff}
.nav-item .badge[hidden],.n-badge[hidden]{display:none}
.sidebar-foot{margin-top:auto;display:flex;flex-direction:column;gap:2px;padding-top:14px;border-top:1px solid var(--line)}
.side-meta{font-family:'Spline Sans Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#808aa0;padding:10px 13px 0}

/* Voile mobile : position:fixed + display:none par défaut pour qu'il ne soit
   JAMAIS un item de la grille (sinon il pousse .main hors de sa colonne). */
.sidebar-scrim{position:fixed;inset:0;background:var(--backdrop);z-index:55;display:none}

/* overflow:clip et non hidden : hidden fait de .main un conteneur de
   défilement, et plus aucun position:sticky ne s'accroche à la fenêtre — la
   barre du haut ne restait donc pas en place au défilement (constaté le
   30/09/2026 avec le bandeau du Budget). clip rogne pareil, sans cet effet.
   hidden reste en repli pour les navigateurs sans clip.
   min-width:0 : .main est un élément de grille ; avec hidden sa largeur minimale
   valait 0 (conteneur de défilement), avec clip elle redevient celle de son
   contenu et un tableau large élargissait toute la page sur iPhone (relecture
   du 30/09 : 7 pages entre 493 et 1126 px pour 390). */
.main{position:relative;min-width:0;min-height:100vh;overflow:hidden;overflow:clip}
.topbar{
  position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:16px;
  padding:18px 34px;border-bottom:1px solid var(--line);
  background:var(--topbar-bg);backdrop-filter:blur(18px);
}
.topbar h1{font-size:23px;font-weight:600}
.topbar .sub{font-family:'Spline Sans Mono';font-size:11.5px;color:var(--muted-2);letter-spacing:.1em;text-transform:uppercase}
.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:12px}
.content{padding:34px;max-width:1240px}

/* ===== Boutons (radius 100px) ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 22px;border-radius:100px;
  font-weight:600;font-size:14.5px;cursor:pointer;border:none;transition:.35s var(--ease);
  font-family:'General Sans',sans-serif;position:relative;white-space:nowrap;
}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--grad);color:#fff;box-shadow:var(--btn-shadow)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--btn-shadow-hover)}
.btn-ghost{background:var(--fill);color:var(--text);border:1px solid var(--line-2)}
.btn-ghost:hover{background:var(--fill-3);border-color:var(--line-3)}
.btn-sm{padding:8px 15px;font-size:13px}
.btn-danger{background:var(--danger-bg);border:1px solid var(--danger-line);color:var(--danger-ink)}
.btn-danger:hover{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-bg)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.icon-btn{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;border:1px solid var(--line-2);background:var(--fill);color:var(--muted);cursor:pointer;transition:.28s var(--ease)}
.icon-btn:hover{color:var(--text-strong);border-color:var(--line-3);background:var(--fill-3)}
.icon-btn svg{width:17px;height:17px}

/* ===== Cartes (bordure dégradée au hover via mask-composite) ===== */
.card{
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);
  border-radius:var(--r);padding:24px;transition:.45s var(--ease);position:relative;overflow:hidden;
}
.card::before{
  content:"";position:absolute;inset:0;border-radius:var(--r);padding:1px;background:var(--grad);
  opacity:0;transition:.45s var(--ease);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.card.hover:hover{transform:translateY(-5px);border-color:transparent}
.card.hover:hover::before{opacity:.55}
.card-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.card-head h3{font-size:18px}
.card-head .eyebrow{margin-bottom:0}

/* ===== KPI ===== */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.kpi .lbl{font-family:'Spline Sans Mono';font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.kpi .val{font-family:'Clash Display';font-weight:600;font-size:38px;margin-top:10px;line-height:1;letter-spacing:-.02em}
.kpi .val.grad{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
.kpi .sub{font-size:13px;color:var(--muted);margin-top:8px}

/* ===== Jauges / barres de progression ===== */
.gauge{margin-top:6px}
.gauge .gauge-top{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px;color:var(--muted);margin-bottom:8px}
.gauge .gauge-top b{color:var(--text);font-weight:600}
.bar{height:11px;border-radius:8px;background:var(--track);overflow:hidden;position:relative}
.bar .fill{position:absolute;left:0;top:0;bottom:0;border-radius:8px;background:var(--grad);transition:width .9s var(--ease)}
.bar .fill.ok{background:var(--fill-ok)}
.bar .fill.warn{background:var(--fill-warn)}
.bar .fill.danger{background:var(--fill-danger)}
.gauge .gauge-pct.ok{color:var(--ok-ink)}.gauge .gauge-pct.warn{color:var(--warn-ink)}.gauge .gauge-pct.danger{color:var(--danger-ink)}

/* ===== Tables ===== */
/* overflow-x:auto (et non hidden) : sur mobile, un tableau plus large que
   l'écran défile dans son cadre au lieu d'être coupé. Le coin arrondi reste
   rogné de la même façon. */
.table-wrap{border:1px solid var(--line);border-radius:var(--r);overflow-x:auto;background:var(--surface);box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse}
thead th{
  text-align:left;font-family:'Spline Sans Mono';font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted-2);padding:15px 18px;border-bottom:1px solid var(--line);font-weight:500;white-space:nowrap;
  background:var(--thead-bg);
}
tbody td{padding:15px 18px;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--text-body);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr{transition:.25s var(--ease);cursor:default}
tbody tr.clickable{cursor:pointer}
tbody tr:nth-child(even){background:var(--zebra)}
tbody tr:hover{background:var(--hover)}
td .name{color:var(--text-strong);font-weight:500}
.num{font-family:'Spline Sans Mono';font-variant-numeric:tabular-nums}
.right{text-align:right}

/* ===== Badges de statut / tags ===== */
.badge-status{display:inline-flex;align-items:center;gap:7px;font-family:'Spline Sans Mono';font-size:11px;letter-spacing:.06em;padding:5px 11px;border-radius:100px;border:1px solid var(--neutral-line);background:var(--neutral-bg);color:var(--neutral-ink);text-transform:uppercase;white-space:nowrap;--tone:var(--muted-2)}
.badge-status .dot{width:7px;height:7px;border-radius:50%;background:var(--tone);box-shadow:0 0 var(--glow-r) var(--tone)}
.badge-status.s-blue{color:var(--info-ink);border-color:var(--info-line);background:var(--info-bg);--tone:var(--info)}
.badge-status.s-ok{color:var(--ok-ink);border-color:var(--ok-line);background:var(--ok-bg);--tone:var(--ok)}
.badge-status.s-warn{color:var(--warn-ink);border-color:var(--warn-line);background:var(--warn-bg);--tone:var(--warn)}
.badge-status.s-danger{color:var(--danger-ink);border-color:var(--danger-line);background:var(--danger-bg);--tone:var(--danger)}

/* Constats de conformité (tableau de bord) — phrases entières, pas des
   étiquettes : ni majuscules ni police monospace, à la différence de
   .badge-status qui reste réservé aux statuts courts. Le liseré porte la
   gravité, le texte reste lisible. */
.constat{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;line-height:1.5;
         padding:8px 12px;border-radius:0 8px 8px 0;margin-top:8px;color:var(--muted)}
.constat .dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;margin-top:6px}
.constat.g-anomalie{border-left:3px solid var(--danger);background:var(--danger-bg);color:var(--text-body)}
.constat.g-anomalie .dot{background:var(--danger);box-shadow:0 0 var(--glow-r) var(--danger)}
.constat.g-avertissement{border-left:3px solid var(--warn);background:var(--warn-bg);color:var(--text-body)}
.constat.g-avertissement .dot{background:var(--warn);box-shadow:0 0 var(--glow-r) var(--warn)}
.constat.g-ok{border-left:3px solid var(--ok);background:var(--ok-bg);color:var(--text-body)}
.constat.g-ok .dot{background:var(--ok)}
.badge-status.s-muted{color:var(--neutral-ink)}
.tag{display:inline-flex;align-items:center;font-family:'Spline Sans Mono';font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:3px 9px;border-radius:7px;border:1px solid var(--line-2);background:var(--fill);color:var(--muted)}

/* ===== Formulaires ===== */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.field label{font-family:'Spline Sans Mono';font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2)}
.field .hint{font-size:12px;color:var(--muted-2);margin-top:-2px}
input,select,textarea{max-width:100%;
  width:100%;background:var(--input-bg);border:1px solid var(--line-2);border-radius:11px;
  padding:11px 13px;color:var(--text);font-family:'General Sans',sans-serif;font-size:14.5px;transition:.25s var(--ease);
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);background:var(--input-focus-bg);box-shadow:0 0 0 3px rgba(47,107,255,.14)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none}
input[type=checkbox],input[type=radio]{accent-color:var(--blue)}
input::placeholder,textarea::placeholder{color:var(--muted-2)}
textarea{resize:vertical;min-height:84px;line-height:1.5}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23808aa0' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;padding-right:36px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.form-grid .full{grid-column:1 / -1}
/* Champ fichier (justificatif PDF) : bouton lisible dans les deux thèmes */
input[type=file]{padding:9px 12px;font-size:13px;cursor:pointer}
input[type=file]::file-selector-button{font-family:'General Sans',sans-serif;font-size:12.5px;color:var(--text);cursor:pointer;background:var(--fill-2);border:1px solid var(--line-2);border-radius:8px;padding:6px 12px;margin-right:12px;transition:.2s var(--ease)}
input[type=file]::file-selector-button:hover{background:var(--fill-3);border-color:var(--line-3)}
/* Lien inline accent BUILD (ouvrir un justificatif…) */
.link{color:var(--blue-2);display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-weight:500}
.link:hover{color:var(--text-strong);text-decoration:underline}
.link svg{flex:none}
fieldset{min-width:0;border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin-bottom:18px}
legend{font-family:'Spline Sans Mono';font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue-2);padding:0 8px}

/* ===== Recherche ===== */
.search{position:relative;flex:1;max-width:360px}
.search input{padding-left:40px}
.search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:17px;height:17px;color:var(--muted-2)}

/* ===== Modal ===== */
.modal-backdrop{position:fixed;inset:0;z-index:100;background:var(--backdrop);backdrop-filter:blur(8px);display:flex;align-items:flex-start;justify-content:center;padding:48px 20px;overflow-y:auto;opacity:0;transition:opacity .3s var(--ease)}
.modal-backdrop.in{opacity:1}
.modal{width:100%;max-width:680px;background:var(--surface-2);color:var(--text);border:1px solid var(--line-2);border-radius:22px;padding:30px;box-shadow:var(--shadow-lg);transform:translateY(14px);transition:transform .3s var(--ease);position:relative}
.modal-backdrop.in .modal{transform:none}
.modal.wide{max-width:920px}
.modal-head{display:flex;align-items:flex-start;gap:16px;margin-bottom:22px}
.modal-head h2{font-size:25px}
.modal-head .close{margin-left:auto}
.modal-foot{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}

/* ===== Toasts : pilule sombre en bas au centre, bouton blanc facultatif ===== */
.toasts{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column-reverse;align-items:center;gap:10px;pointer-events:none;width:max-content;max-width:calc(100vw - 32px)}
.toast{display:flex;align-items:center;gap:10px;background:#05070e;color:#fff;border:1px solid rgba(255,255,255,.10);border-radius:100px;padding:10px 12px 10px 18px;font-size:14px;font-weight:500;box-shadow:var(--shadow-toast);transform:translateY(16px);opacity:0;transition:.3s var(--ease);pointer-events:auto;min-height:44px}
.toast.in{transform:none;opacity:1}
.toast>span:last-child{padding-right:6px}
.toast-ic{display:grid;place-items:center;flex:none;color:#7aa6ff}
.toast.ok .toast-ic{color:#46d39a}.toast.err .toast-ic{color:#ff6b6b}.toast.warn .toast-ic{color:#ffb454}
.toast-btn{border:0;background:#fff;color:#05070e;border-radius:100px;padding:7px 14px;font:600 13px 'General Sans',sans-serif;cursor:pointer;margin-left:4px}
.toast-btn:hover{background:#e8edf7}

/* ===== États vides ===== */
.empty{text-align:center;padding:70px 20px;color:var(--muted-2)}
.empty .ic{width:58px;height:58px;border-radius:15px;background:var(--grad-soft);border:1px solid var(--line-2);display:grid;place-items:center;margin:0 auto 20px;color:var(--blue-2)}
.empty h3{font-size:20px;color:var(--text);margin-bottom:8px}
.empty p{max-width:380px;margin:0 auto 22px;font-size:14.5px}

/* ===== Utilitaires ===== */
.row{display:flex;align-items:center;gap:12px}
.row.wrap{flex-wrap:wrap}
.between{justify-content:space-between}
.gap-lg{gap:18px}
.mt{margin-top:18px}.mt-lg{margin-top:28px}.mb{margin-bottom:18px}
.muted{color:var(--muted)}.muted-2{color:var(--muted-2)}
.ok-text{color:var(--ok-ink)}.danger-text{color:var(--danger-ink)}.info-text{color:var(--info-ink)}
.section-title{display:flex;align-items:center;justify-content:space-between;margin:6px 0 16px}
.section-title h2{font-size:22px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.spinner{width:22px;height:22px;border:2px solid var(--line-2);border-top-color:var(--blue-2);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.center-screen{min-height:60vh;display:grid;place-items:center}

/* reveal — animation d'entrée AUTO en fill-mode 'both' : l'élément finit
   TOUJOURS visible (opacity:1), même sans JS. Impossible de rester bloqué
   en invisible (leçon : ne jamais dépendre d'un JS pour rendre du contenu visible). */
@keyframes reveal-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.reveal{animation:reveal-in .55s var(--ease) both}
.reveal.d1{animation-delay:.05s}.reveal.d2{animation-delay:.10s}
.reveal.d3{animation-delay:.15s}.reveal.d4{animation-delay:.20s}
@media(prefers-reduced-motion:reduce){
  .reveal{animation:none}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;scroll-behavior:auto !important}
  .card.hover:hover,.btn-primary:hover{transform:none}
}

/* ===== Responsive ===== */
@media(max-width:900px){
  :root{--sidebar:0px}
  .app{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;width:248px;transform:translateX(-100%);transition:transform .35s var(--ease);z-index:60}
  .sidebar.open{transform:none}
  .sidebar-scrim.in{display:block} /* base définie plus haut (display:none) */
  .burger{display:inline-grid !important}
  /* minmax(0,1fr) : un <select> à libellé long n'élargit plus la colonne. */
  .form-grid,.grid-2,.grid-3{grid-template-columns:minmax(0,1fr)}
  .content{padding:22px 18px}
  /* Les actions passent sous le titre quand elles ne tiennent plus à côté. */
  .topbar{padding:16px 18px;flex-wrap:wrap}
  .topbar-actions{flex-wrap:wrap;justify-content:flex-end}
}
.burger{display:none}

/* ===========================================================================
   KPI sémantiques — la couleur porte un sens, jamais un décor.
   k-blue : volume / objectif · k-ok : encaissé, positif · k-warn : à provisionner,
   à surveiller · k-danger : retard, négatif. Liseré à gauche + chiffre coloré.
   =========================================================================== */
.kpi.k-blue,.kpi.k-ok,.kpi.k-warn,.kpi.k-danger{--k:var(--info)}
.kpi.k-ok{--k:var(--ok)}.kpi.k-warn{--k:var(--warn)}.kpi.k-danger{--k:var(--danger)}
.kpi.k-blue::after,.kpi.k-ok::after,.kpi.k-warn::after,.kpi.k-danger::after{
  content:"";position:absolute;left:0;top:18px;bottom:18px;width:3px;border-radius:0 3px 3px 0;background:var(--k);pointer-events:none}
.val.t-ok{color:var(--ok-ink)}.val.t-warn{color:var(--warn-ink)}.val.t-danger{color:var(--danger-ink)}.val.t-blue{color:var(--info-ink)}
/* Compteurs « À suivre » du tableau de bord */
.counter .val{font-family:'Clash Display';font-size:26px;font-weight:700}
.counter .lbl{font-family:'Spline Sans Mono';font-size:10.5px;color:var(--muted-2);text-transform:uppercase}
/* ===========================================================================
   Interrupteur clair / sombre (bas de la sidebar, toujours sombre)
   =========================================================================== */
.theme-toggle .ic-sun,.theme-toggle .ic-moon{display:none}
:root[data-theme="dark"] .theme-toggle .ic-sun{display:block}
:root[data-theme="light"] .theme-toggle .ic-moon{display:block}

/* ===========================================================================
   Thème clair — ajustements qui ne se résument pas à un token
   =========================================================================== */
:root[data-theme="light"] body::before,
:root[data-theme="light"] .orb{display:none}  /* ni grain ni halos en clair */
:root[data-theme="light"] .sidebar{border-right-color:#000}
/* Chiffres en dégradé → couleur pleine, lisible sur blanc */
:root[data-theme="light"] .grad-text,
:root[data-theme="light"] .kpi .val.grad{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--blue-2)}
:root[data-theme="light"] .kpi .val{color:var(--text)}
:root[data-theme="light"] .kpi .val.grad{color:var(--blue-2)}
:root[data-theme="light"] .kpi .val.t-ok{color:var(--ok-ink)}
:root[data-theme="light"] .kpi .val.t-warn{color:var(--warn-ink)}
:root[data-theme="light"] .kpi .val.t-danger{color:var(--danger-ink)}
/* Cartes : survol par ombre plutôt que par bordure lumineuse */
:root[data-theme="light"] .card.hover:hover{box-shadow:0 2px 4px rgba(16,24,40,.05),0 14px 32px -12px rgba(16,24,40,.16)}
:root[data-theme="light"] .card::before{background:linear-gradient(125deg,#2f6bff,#8fb0ff)}
:root[data-theme="light"] .btn-ghost{background:#fff}
:root[data-theme="light"] .btn-ghost:hover{border-color:var(--muted-2);background:#fff}
:root[data-theme="light"] .topbar{box-shadow:0 1px 0 var(--line)}
:root[data-theme="light"] .empty .ic{color:var(--blue-2)}
:root[data-theme="light"] .btn-primary:disabled{box-shadow:none}

/* ===========================================================================
   KIT V3 (13/10/2026) — COMPOSANTS COMMUNS À TOUS LES OUTILS BUILD
   Ajoutés sans rien retirer ni modifier au-dessus : aucune classe existante
   ne change. Écrits en mobile d'abord : la règle de base vaut pour le
   téléphone, les @media(min-width:720px) enrichissent pour l'ordinateur.
   Cibles au doigt de 44 px au moins, focus visible (règle :focus-visible du
   kit), contraste AA dans les deux thèmes. Documentation : DESIGN_TOKENS.md,
   « Composants communs (kit V3) » ; règles d'usage : docs/charte-ux-build.md.
   =========================================================================== */
:root,:root[data-theme="dark"],.sidebar{
  --tap:44px; --tap-lg:48px; --r-sm:12px;
  --btn2-ink:#7aa6ff; --btn2-line:#2f6bff; --btn2-hover:rgba(47,107,255,.12);
  --seg-on-bg:#ffffff; --seg-on-ink:#05070e;
  --nav-bottom-h:64px;
  --alert-solid:#c42b31; /* aplat du compteur d'alerte : blanc dessus à 5,6:1 (AA), dans les deux thèmes */
}
:root[data-theme="light"]{
  --btn2-ink:#21539f; --btn2-line:#21539f; --btn2-hover:#eaf1ff;
  --seg-on-bg:#ffffff; --seg-on-ink:#05070e;
}

/* ----- Icônes du kit (public/js/kit-icons.js) ----- */
.kit-icon{flex:none;display:inline-block;vertical-align:middle}

/* ----- En-tête de page : ← (détail seulement), titre court, action principale ----- */
.page-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:0 0 18px}
.page-back{
  display:inline-grid;place-items:center;flex:none;width:var(--tap);height:var(--tap);margin-left:-10px;
  border-radius:var(--r-sm);color:var(--text);transition:background .25s var(--ease);
}
.page-back:hover{background:var(--fill-2)}
.page-back[hidden]{display:none}
.page-back svg{width:22px;height:22px}
.page-title{flex:1 1 200px;min-width:0}
.page-title h1{font-size:24px;font-weight:600;line-height:1.15;overflow-wrap:anywhere}
.page-sub{margin-top:4px;font-size:14.5px;color:var(--muted)}
.page-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* Sur téléphone, l'action principale descend à portée du pouce (.thumb). */
.page-actions.thumb{
  position:fixed;z-index:40;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));
}
.page-actions.thumb .btn{flex:1 1 auto;min-height:var(--tap-lg)}
.has-bottom-nav .page-actions.thumb{bottom:calc(var(--nav-bottom-h) + 12px + env(safe-area-inset-bottom))}
/* À poser sur le conteneur de la page : le bas du contenu n'est pas masqué par le bouton. */
.has-thumb-action::after{content:"";display:block;height:calc(var(--tap-lg) + 28px + env(safe-area-inset-bottom))}
@media(min-width:720px){
  .page-head{margin-bottom:24px}
  .page-title h1{font-size:28px}
  .page-actions{margin-left:auto}
  .page-actions.thumb{position:static}
  .page-actions.thumb .btn{flex:none;min-height:0}
  .has-thumb-action::after{display:none}
}

/* ----- Bouton secondaire cerné de la couleur BUILD ; tailles au doigt ----- */
.btn-secondary{background:transparent;color:var(--btn2-ink);border:1.5px solid var(--btn2-line)}
.btn-secondary:hover{background:var(--btn2-hover)}
.btn-lg{min-height:var(--tap-lg);padding:13px 26px;font-size:15.5px}
.btn-block{display:flex;width:100%}
.btn.is-tap{min-height:var(--tap)}

/* ----- Accordéon de Réglages (modèle Portail) : carte, tuile, titre, résumé, compteur, chevron ----- */
.acc-list{display:flex;flex-direction:column;gap:10px}
.acc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.acc-head{
  display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 14px;cursor:pointer;
  list-style:none;border-radius:var(--r);
}
.acc-head::-webkit-details-marker{display:none}
.acc-head:hover{background:var(--hover)}
.acc-tile{
  display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:var(--r-sm);
  background:var(--info-bg);border:1px solid var(--info-line);color:var(--info-ink);
}
.acc-tile svg{width:20px;height:20px}
.acc-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.acc-title{font-family:'Clash Display',sans-serif;font-weight:600;font-size:16.5px;line-height:1.25;color:var(--text-strong)}
.acc-sum{font-size:13.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc-count{
  flex:none;min-width:26px;height:24px;padding:0 8px;border-radius:100px;display:inline-grid;place-items:center;
  font-family:'Spline Sans Mono',monospace;font-size:11.5px;font-variant-numeric:tabular-nums;
  background:var(--neutral-bg);border:1px solid var(--neutral-line);color:var(--neutral-ink);
}
.acc-count.c-warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn-ink)}
.acc-count.c-danger{background:var(--danger-bg);border-color:var(--danger-line);color:var(--danger-ink)}
.acc-chev{flex:none;display:grid;place-items:center;width:24px;height:24px;color:var(--muted-2);transition:transform .3s var(--ease)}
.acc-chev svg{width:20px;height:20px}
.acc[open] > .acc-head .acc-chev{transform:rotate(180deg)}
.acc[open] > .acc-head{border-radius:var(--r) var(--r) 0 0}
.acc-body{padding:16px 14px 18px;border-top:1px solid var(--line)}
.acc-foot{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:16px}
@media(min-width:720px){
  .acc-head{padding:12px 18px;gap:14px}
  .acc-body{padding:20px 22px 22px}
}

/* ----- Segments (filtrer une liste) et onglets soulignés (changer de sous-page) ----- */
.seg{
  display:inline-flex;gap:2px;padding:3px;max-width:100%;overflow-x:auto;scrollbar-width:none;
  border-radius:100px;background:var(--fill-2);border:1px solid var(--line);
}
.seg::-webkit-scrollbar{display:none}
.seg-item{
  display:inline-flex;align-items:center;gap:7px;flex:none;min-height:var(--tap);padding:0 16px;
  border:0;border-radius:100px;background:transparent;color:var(--muted);cursor:pointer;
  font:500 14px 'General Sans',sans-serif;white-space:nowrap;transition:background .25s var(--ease),color .25s var(--ease);
}
.seg-item:hover{color:var(--text-strong)}
.seg-item[aria-pressed="true"],.seg-item[aria-selected="true"],.seg-item[aria-current]{
  background:var(--seg-on-bg);color:var(--seg-on-ink);box-shadow:0 1px 2px rgba(5,7,14,.12);
}
.seg-n{font-family:'Spline Sans Mono',monospace;font-size:11.5px;font-variant-numeric:tabular-nums;opacity:.8}
.tabnav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line);margin-bottom:18px}
.tabnav::-webkit-scrollbar{display:none}
.tabnav-item{
  display:inline-flex;align-items:center;gap:7px;flex:none;min-height:var(--tap);padding:0 14px;margin-bottom:-1px;
  border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);cursor:pointer;
  font:500 14.5px 'General Sans',sans-serif;white-space:nowrap;transition:color .25s var(--ease),border-color .25s var(--ease);
}
.tabnav-item:hover{color:var(--text-strong)}
.tabnav-item[aria-selected="true"],.tabnav-item[aria-current]{color:var(--text-strong);border-bottom-color:var(--blue)}

/* ----- Pastilles de statut : deux variantes de plus pour .badge-status ----- */
/* s-review : « à valider » (un geste est attendu) ; s-plan : « planifié » (rien à faire, c'est daté). */
.badge-status.s-review{color:var(--warn-ink);border:1px dashed var(--warn-ink);background:var(--warn-bg);--tone:var(--warn)}
.badge-status.s-plan{color:var(--info-ink);border:1px dashed var(--info-line);background:transparent;--tone:transparent}
.badge-status.s-plan .dot{border:1.5px solid var(--info);box-shadow:none}
/* Compteur d'alerte : le seul rouge d'alerte du kit (--danger), menu et barre du bas. */
.n-badge{
  display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:100px;
  font-family:'Spline Sans Mono',monospace;font-size:10.5px;font-variant-numeric:tabular-nums;
  background:var(--alert-solid);color:#fff;
}

/* ----- Carte KPI unifiée : gros chiffre, libellé, flèche si cliquable ; rayon 18 px ----- */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.kpi-row.is-compact{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.kpi-card{
  position:relative;display:flex;flex-direction:column;gap:4px;min-width:0;padding:16px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);
  color:var(--text);text-decoration:none;transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.kpi-num{font-family:'Clash Display',sans-serif;font-weight:600;font-size:30px;line-height:1.05;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--text-strong);overflow-wrap:anywhere}
.kpi-label{font-size:14px;font-weight:600;line-height:1.3;color:var(--text-body)}
.kpi-hint{font-size:12.5px;color:var(--muted)}
.kpi-go{position:absolute;top:14px;right:14px;color:var(--muted-2);transition:transform .3s var(--ease),color .3s var(--ease)}
.kpi-go svg{width:18px;height:18px}
a.kpi-card:hover,button.kpi-card:hover{border-color:var(--line-3)}
a.kpi-card:hover .kpi-go,button.kpi-card:hover .kpi-go{transform:translateX(3px);color:var(--blue-2)}
button.kpi-card{font:inherit;text-align:left;cursor:pointer;width:100%}
.kpi-card.is-ok .kpi-num{color:var(--ok-ink)}
.kpi-card.is-warn .kpi-num{color:var(--warn-ink)}
.kpi-card.is-danger .kpi-num{color:var(--danger-ink)}
.kpi-card.is-info .kpi-num{color:var(--info-ink)}
.kpi-row.is-compact .kpi-card{padding:12px}
.kpi-row.is-compact .kpi-num{font-size:22px}
.kpi-row.is-compact .kpi-label{font-size:12.5px}
.kpi-row.is-compact .kpi-go{display:none}
@media(min-width:720px){
  .kpi-row,.kpi-row.is-compact{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
  .kpi-card,.kpi-row.is-compact .kpi-card{padding:20px}
  .kpi-num,.kpi-row.is-compact .kpi-num{font-size:34px}
  .kpi-row.is-compact .kpi-label{font-size:14px}
  .kpi-row.is-compact .kpi-go{display:block}
}

/* ----- Feuille du bas (téléphone) : <dialog class="bottom-sheet"> ou <div popover class="bottom-sheet"> -----
   Sur téléphone, collée en bas, poignée, boutons en pleine largeur ; à partir
   de 720 px, elle devient une fenêtre centrée. Aucun display ici : l'ouverture
   et la fermeture restent celles du navigateur (dialog / popover). */
.bottom-sheet{
  position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:none;height:auto;max-height:88vh;overflow-y:auto;
  padding:6px 18px calc(18px + env(safe-area-inset-bottom));
  background:var(--surface-2);background-color:var(--panel-2);color:var(--text);
  border:1px solid var(--line-2);border-bottom:0;border-radius:22px 22px 0 0;box-shadow:var(--shadow-lg);
}
.bottom-sheet::backdrop{background:var(--backdrop);backdrop-filter:blur(6px)}
.bottom-sheet[open]{animation:sheet-up .32s var(--ease)}
.bottom-sheet:popover-open{animation:sheet-up .32s var(--ease)}
@keyframes sheet-up{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.sheet-grip{width:40px;height:4px;border-radius:4px;background:var(--line-3);margin:6px auto 14px}
.sheet-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.sheet-head h2{font-size:21px;flex:1 1 auto;min-width:0}
.sheet-head .icon-btn{width:var(--tap);height:var(--tap);flex:none}
.sheet-body{color:var(--text-body);font-size:15px}
.sheet-foot{display:flex;flex-direction:column-reverse;gap:10px;margin-top:20px}
.sheet-foot .btn{width:100%;min-height:var(--tap-lg)}
.sheet-list{display:flex;flex-direction:column;list-style:none;margin:0 -6px}
.sheet-list a,.sheet-list button{
  display:flex;align-items:center;gap:14px;width:100%;min-height:52px;padding:0 12px;border-radius:var(--r-sm);
  border:0;background:transparent;color:var(--text);font:500 15.5px 'General Sans',sans-serif;text-align:left;cursor:pointer;text-decoration:none;
}
.sheet-list a:hover,.sheet-list button:hover{background:var(--fill-2)}
.sheet-list svg{width:20px;height:20px;color:var(--muted-2);flex:none}
.sheet-list .n-badge{margin-left:auto}
.sheet-list .is-danger{color:var(--danger-ink)}
.sheet-list .is-danger svg{color:var(--danger-ink)}
@media(min-width:720px){
  .bottom-sheet{inset:0;margin:auto;width:min(560px,calc(100% - 40px));height:fit-content;max-height:calc(100vh - 80px);
    padding:24px 26px;border-bottom:1px solid var(--line-2);border-radius:22px}
  .sheet-grip{display:none}
  .sheet-foot{flex-direction:row;justify-content:flex-end}
  .sheet-foot .btn{width:auto;min-height:0}
}

/* ----- Menu « Plus » : dans le menu latéral (details) et dans la barre du bas ----- */
.nav-more > summary{list-style:none;min-height:var(--tap)}
.nav-more > summary::-webkit-details-marker{display:none}
.nav-more > summary .acc-chev{margin-left:auto;color:#808aa0}
.nav-more[open] > summary .acc-chev{transform:rotate(180deg)}
.nav-more-list{padding-left:10px}

/* ----- Barre du bas : outils de terrain seulement, sur téléphone (< 720 px) ----- */
.bottom-nav{
  position:fixed;z-index:50;left:0;right:0;bottom:0;display:grid;grid-auto-columns:1fr;grid-auto-flow:column;
  padding:4px 6px env(safe-area-inset-bottom);min-height:calc(var(--nav-bottom-h) + env(safe-area-inset-bottom));
  background:var(--topbar-bg);backdrop-filter:blur(18px);border-top:1px solid var(--line);
}
.bottom-nav-item{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:56px;min-width:var(--tap);padding:4px 2px;border:0;border-radius:var(--r-sm);background:transparent;
  color:var(--muted);font:500 11.5px 'General Sans',sans-serif;text-decoration:none;cursor:pointer;
}
.bottom-nav-item svg{width:22px;height:22px}
.bottom-nav-item[aria-current]{color:var(--blue-2)}
.bottom-nav-item[aria-current]::before{content:"";position:absolute;top:0;left:30%;right:30%;height:2px;border-radius:2px;background:var(--blue)}
.bottom-nav-item .n-badge{position:absolute;top:4px;left:calc(50% + 6px)}
.has-bottom-nav::after{content:"";display:block;height:calc(var(--nav-bottom-h) + env(safe-area-inset-bottom))}
@media(min-width:720px){
  .bottom-nav{display:none}
  .has-bottom-nav::after{display:none}
}

/* ----- Profil en haut à droite : avatar, nom (masqué sur téléphone) ----- */
.profile-btn{
  display:inline-flex;align-items:center;gap:10px;min-height:var(--tap);min-width:var(--tap);padding:4px;
  border:1px solid transparent;border-radius:100px;background:transparent;color:var(--text);cursor:pointer;font:inherit;
}
.profile-btn:hover{background:var(--fill-2);border-color:var(--line)}
.avatar{
  display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;
  background:var(--grad);color:#fff;font:600 13px 'General Sans',sans-serif;letter-spacing:.02em;
}
.profile-name{display:none;flex-direction:column;line-height:1.2;text-align:left;padding-right:10px}
.profile-name b{font-weight:600;font-size:14px}
.profile-name small{font-size:12px;color:var(--muted)}
@media(min-width:720px){.profile-name{display:flex}}

/* ----- Feux tricolores (13/10/2026) : UN SEUL SENS dans toutes les apps BUILD -----
   ROUGE  = je dois faire : en retard ou bloquant. Rare, pour garder sa force.
   ORANGE = en cours, ou à faire rapidement.
   VERT   = c'est OK, rien à faire.
   Réservé aux statuts d'action : jamais pour décorer ni pour classer des
   catégories. Toujours doublé d'un mot (et d'une icône) : lisible sans la
   couleur. Les jetons pointent sur la palette sémantique (AA dans les deux thèmes). */
:root,:root[data-theme="dark"],:root[data-theme="light"],.sidebar{
  --feu-rouge:var(--danger); --feu-rouge-ink:var(--danger-ink); --feu-rouge-bg:var(--danger-bg); --feu-rouge-line:var(--danger-line);
  --feu-orange:var(--warn); --feu-orange-ink:var(--warn-ink); --feu-orange-bg:var(--warn-bg); --feu-orange-line:var(--warn-line);
  --feu-vert:var(--ok); --feu-vert-ink:var(--ok-ink); --feu-vert-bg:var(--ok-bg); --feu-vert-line:var(--ok-line);
}
/* Pastille : <span class="statut feu-rouge"><svg…/>En retard</span> */
/* Valeurs neutres par défaut en :where() (spécificité nulle) : la classe feu-* l'emporte toujours. */
:where(.statut){--feu:var(--neutral-ink);--feu-ink:var(--neutral-ink);--feu-bg:var(--neutral-bg);--feu-line:var(--neutral-line)}
:where(.voyant){--feu:var(--neutral-ink)}
.statut{
  display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:3px 11px 3px 8px;border-radius:100px;
  font:600 13px/1.2 'General Sans',sans-serif;white-space:nowrap;
  color:var(--feu-ink);background:var(--feu-bg);border:1px solid var(--feu-line);
  transition:color .45s var(--ease),background-color .45s var(--ease),border-color .45s var(--ease);
}
.statut svg{width:15px;height:15px;flex:none}
.feu-rouge{--feu:var(--feu-rouge);--feu-ink:var(--feu-rouge-ink);--feu-bg:var(--feu-rouge-bg);--feu-line:var(--feu-rouge-line)}
.feu-orange{--feu:var(--feu-orange);--feu-ink:var(--feu-orange-ink);--feu-bg:var(--feu-orange-bg);--feu-line:var(--feu-orange-line)}
.feu-vert{--feu:var(--feu-vert);--feu-ink:var(--feu-vert-ink);--feu-bg:var(--feu-vert-bg);--feu-line:var(--feu-vert-line)}
/* Voyant : un point lumineux + le mot, pour une ligne de liste. */
.voyant{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--text-body)}
.voyant::before{
  content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--feu);
  box-shadow:0 0 var(--glow-r) var(--feu);transition:background-color .45s var(--ease),box-shadow .45s var(--ease);
}
/* Boucle courte : la classe .vient-de-passer, posée au moment où l'enregistrement
   aboutit, montre le changement d'état sous les yeux (un halo qui s'éteint). */
.statut.vient-de-passer,.voyant.vient-de-passer::before{animation:feu-passe 1.2s var(--ease) 1}
@keyframes feu-passe{0%{box-shadow:0 0 0 0 var(--feu)}40%{box-shadow:0 0 0 6px var(--feu-bg)}100%{box-shadow:0 0 0 0 transparent}}
/* « Rien à faire » : l'état calme quand tout est vert. */
.rien-a-faire{
  display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:var(--r);
  background:var(--feu-vert-bg);border:1px solid var(--feu-vert-line);color:var(--text-body);font-size:15px;
}
.rien-a-faire svg{width:22px;height:22px;flex:none;color:var(--feu-vert-ink)}
.rien-a-faire b{color:var(--feu-vert-ink);font-weight:600}
/* Kit 3.2 (04/11/2026) : l'icône partout. Un voyant qui porte son icône la montre à la place
   du point (charte : couleur, mot et icône, toujours). */
.voyant:has(> svg)::before{display:none}
.voyant > svg{width:16px;height:16px;flex:none;color:var(--feu);filter:drop-shadow(0 0 var(--glow-r) var(--feu))}
/* Compteurs de feux de l'accueil (kit 3.2, maquette Claude Design du 04/11/2026).
   Trois tuiles rouge / orange / vert : icône, chiffre, mot ; chacune ouvre sa liste filtrée.
   <div class="feux-compteurs" role="group" aria-label="Où en sont vos chantiers">
     <a class="compteur feu-rouge" href="…" aria-label="Voir les 2 éléments en retard">
       <svg class="compteur-ico">…</svg><b class="compteur-n">2</b><span class="compteur-mot">En retard</span>
       <span class="compteur-voir" aria-hidden="true"><span class="compteur-voir-mot">Voir </span>→</span></a>…</div>
   Un compteur à zéro : un <div class="compteur est-zero"> (gris, non cliquable). Quand rouge et
   orange sont à zéro, afficher .rien-a-faire dessous. Mobile : trois tuiles en colonne étroite ;
   à partir de 720 px, chaque tuile passe en ligne avec « Voir → ». */
.feux-compteurs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
:where(.compteur){--feu:var(--neutral-ink);--feu-ink:var(--neutral-ink);--feu-bg:var(--neutral-bg);--feu-line:var(--neutral-line)}
.compteur{
  position:relative;display:flex;flex-direction:column;gap:2px;min-height:104px;padding:12px;border-radius:16px;
  background:var(--feu-bg);border:1px solid var(--feu-line);color:var(--feu-ink);text-decoration:none;cursor:pointer;
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease),transform .15s var(--ease),color .45s var(--ease),background-color .45s var(--ease);
}
a.compteur:hover{border-color:var(--feu);box-shadow:0 0 0 3px var(--feu-bg)}
a.compteur:focus-visible{outline:3px solid var(--blue,#2f6bff);outline-offset:3px}
a.compteur:active{transform:scale(.97)}
.compteur.est-zero{--feu:var(--neutral-ink);--feu-ink:var(--neutral-ink);--feu-bg:var(--neutral-bg);--feu-line:var(--neutral-line);cursor:default}
.compteur-ico{width:22px;height:22px;flex:none;color:var(--feu);filter:drop-shadow(0 0 var(--glow-r) var(--feu))}
.compteur-n{font:700 34px/1 'Clash Display',sans-serif;letter-spacing:-.01em;margin-top:8px;font-variant-numeric:tabular-nums}
.compteur-mot{font-weight:600;font-size:13.5px;line-height:1.25;text-wrap:pretty}
.compteur-voir{position:absolute;top:12px;right:12px;font-size:14px;opacity:.7}
.compteur-voir-mot{display:none}
.compteur.est-zero .compteur-voir{display:none}
.compteur.vient-de-passer{animation:compteur-passe 1.2s var(--ease) 1}
@keyframes compteur-passe{0%{box-shadow:0 0 0 0 var(--feu-line)}40%{box-shadow:0 0 0 6px var(--feu-bg),0 0 0 7px var(--feu-line)}100%{box-shadow:0 0 0 0 transparent}}
.feux-compteurs[aria-busy="true"] .compteur-n,.feux-compteurs[aria-busy="true"] .compteur-mot{color:transparent;background:var(--line);border-radius:6px}
.feux-compteurs[aria-busy="true"] .compteur-n{width:44px;height:34px}
.feux-compteurs[aria-busy="true"] .compteur-mot{width:70%;height:14px;margin-top:6px}
@media(min-width:720px){
  .feux-compteurs{gap:14px}
  .compteur{flex-direction:row;align-items:center;gap:14px;min-height:88px;padding:16px 20px}
  .compteur-ico{width:28px;height:28px}
  .compteur-n{font-size:40px;margin-top:0;min-width:56px}
  .compteur-mot{font-size:16px}
  .compteur-voir{position:static;margin-left:auto;font-size:13.5px;font-weight:500;opacity:.85;white-space:nowrap}
  .compteur-voir-mot{display:inline}
}
@media(prefers-reduced-motion:reduce){.compteur,.compteur.vient-de-passer{transition:none;animation:none}}