/* ═══════════════════════════════════════════════════════════════════
   MicroGest v2 — apparence
   Ambiance par défaut « ardoise » : ni noir ni blanc, un gris profond
   adouci qui tient la journée entière. Nuit et Papier en variantes.
   Chaque entreprise choisit son ambiance et son accent.
   ═══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600;8..60,700&family=Manrope:wght@400;500;600;700&family=Karla:wght@400;500;600;700&display=swap');

/* ── Ambiances ── */
/*  Trois ambiances, trois partis pris — pas seulement trois palettes.
    Ardoise : console de studio, cartes posées, angles adoucis.
    Nuit    : régie lumière éteinte, angles nets, pas d'ombre, filet d'accent.
    Papier  : registre comptable, serif, filets fins, beaucoup d'air.        */

[data-ambiance="ardoise"]{
  --titre:'IBM Plex Sans',system-ui,sans-serif;
  --graisse-titre:600;
  --r:6px; --r-petit:5px;
  --pad-carte:18px 20px;
  --bord-carte:1px solid var(--trait);
  --interlettre:.13em;
  --interligne:1.5;
  --casse-titre:none;
  --fond:#252A32; --panneau:#2E343D; --panneau2:#353C46; --creux:#20242B;
  --trait:#3D4550; --trait2:#333A44;
  --texte:#EAEDF1; --texte2:#B8C0CA; --discret:#8792A0;
  --signal:#5BC49A; --signal-bg:#5BC49A1F;
  --watch:#E0A44E;  --watch-bg:#E0A44E1F;
  --clip:#EE7A6E;   --clip-bg:#EE7A6E1F;
  --ombre:0 1px 2px #0000002e, 0 6px 20px #00000024;
  --champ:#20242B;
}
[data-ambiance="nuit"]{
  --titre:'IBM Plex Mono',ui-monospace,monospace;
  --graisse-titre:500;
  --r:2px; --r-petit:2px;
  --pad-carte:15px 17px;
  --bord-carte:1px solid var(--trait);
  --interlettre:.2em;
  --interligne:1.45;
  --casse-titre:uppercase;
  --panneau:#141920; --panneau2:#1A202A; --creux:#090B0F;
  --trait:#272D36; --trait2:#20252D;
  --texte:#E4E8ED; --texte2:#AEB7C2; --discret:#7A838F;
  --signal:#4FBE92; --signal-bg:#4FBE921C;
  --watch:#D99C43;  --watch-bg:#D99C431C;
  --clip:#E8705F;   --clip-bg:#E8705F1C;
  --ombre:0 1px 2px #00000055, 0 6px 20px #00000044;
  --champ:#0C0E12;
}
[data-ambiance="papier"]{
  --titre:'Source Serif 4',Georgia,serif;
  --graisse-titre:600;
  --r:0px; --r-petit:2px;
  --pad-carte:22px 26px;
  --bord-carte:0;
  --interlettre:.09em;
  --interligne:1.62;
  --casse-titre:none;
  --panneau:#FBFAF6; --panneau2:#F5F3EC; --creux:#F5F3EC;
  --trait:#D8D3C6; --trait2:#E6E2D7;
  --texte:#15181B; --texte2:#454E56; --discret:#7B858E;
  --signal:#12805F; --signal-bg:#12805F16;
  --watch:#A8701A;  --watch-bg:#A8701A18;
  --clip:#B33F33;   --clip-bg:#B33F3314;
  --ombre:0 1px 2px #0000000f, 0 4px 14px #0000000d;
  --champ:#FFFFFF;
}


/* ── SOLAIRE — plein soleil sur du papier bouffant. Typo Calibri. ── */
[data-ambiance="solaire"]{
  --titre:Calibri,Carlito,'Segoe UI',Candara,sans-serif;
  --sans:Calibri,Carlito,'Segoe UI',Candara,system-ui,sans-serif;
  --graisse-titre:700;
  --r:11px; --r-petit:8px;
  --pad-carte:21px 24px;
  --bord-carte:1px solid var(--trait);
  --interlettre:.1em;
  --interligne:1.58;
  --casse-titre:none;
  --fond:#F7EEDF; --panneau:#FFFAF1; --panneau2:#F4E9D7; --creux:#F1E4CF;
  --trait:#E3D2B4; --trait2:#EFE3CE;
  --texte:#2E2416; --texte2:#5C4A31; --discret:#8E7A57;
  --signal:#3F7A45; --signal-bg:#3F7A4518;
  --watch:#B0711A;  --watch-bg:#B0711A1C;
  --clip:#B3452B;   --clip-bg:#B3452B14;
  --ombre:0 2px 3px #7a5a2410, 0 10px 26px -12px #7a5a2426;
  --champ:#FFFDF8;
}
[data-ambiance="solaire"]{--accent-brut:#D08A2C}
[data-ambiance="solaire"] body,[data-ambiance="solaire"]{
  background-image:radial-gradient(1100px 460px at 78% -12%, #FFE9BE66, transparent 68%)}
[data-ambiance="solaire"] .entete h1{font-size:28px;letter-spacing:-.01em}
[data-ambiance="solaire"] .titre-section h2{font-family:var(--titre);font-size:13px;
  font-weight:700;letter-spacing:.06em;color:var(--texte2)}
[data-ambiance="solaire"] .somme{font-family:var(--titre);font-weight:700}
[data-ambiance="solaire"] nav.menu a{font-size:14.5px;border-left:0;
  margin:1px 9px;border-radius:8px;padding:9px 12px}
[data-ambiance="solaire"] nav.menu a.actif{background:var(--accent-doux);color:var(--texte)}
[data-ambiance="solaire"] thead th{background:var(--panneau2);border-bottom:1px solid var(--trait)}
[data-ambiance="solaire"] tbody td{padding:12px 14px}
[data-ambiance="solaire"] .etiquette{border-radius:20px;padding:3px 10px}
[data-ambiance="solaire"] .piste{border-radius:14px}
[data-ambiance="solaire"] .niveau{border-radius:14px 14px 0 0}
[data-ambiance="solaire"] .memo{border-radius:9px}

/* ── BLEUTÉE — heure bleue, table lumineuse d'un bureau d'études. ── */
[data-ambiance="bleutee"]{
  --titre:'Manrope',system-ui,sans-serif;
  --sans:'Manrope',system-ui,-apple-system,sans-serif;
  --graisse-titre:700;
  --r:4px; --r-petit:4px;
  --pad-carte:17px 19px;
  --bord-carte:1px solid var(--trait);
  --interlettre:.16em;
  --interligne:1.52;
  --casse-titre:none;
  --fond:#1A2331; --panneau:#212D3F; --panneau2:#28374C; --creux:#161E29;
  --trait:#33455E; --trait2:#2A374A;
  --texte:#E7EEF8; --texte2:#AEC1D8; --discret:#7C8FA8;
  --signal:#4FC2B0; --signal-bg:#4FC2B01F;
  --watch:#E3AC55;  --watch-bg:#E3AC551F;
  --clip:#EE7E86;   --clip-bg:#EE7E861F;
  --ombre:0 1px 2px #0a121e40, 0 10px 26px -12px #0a121e66;
  --champ:#18202C;
}
[data-ambiance="bleutee"]{--trait2:#2A374A; --accent-brut:#5FA8DE}
[data-ambiance="bleutee"] .entete h1{font-size:25px;letter-spacing:-.025em}
[data-ambiance="bleutee"] .titre-section h2{font-family:var(--titre);font-size:11px;
  font-weight:700;letter-spacing:.19em}
[data-ambiance="bleutee"] .carte,[data-ambiance="bleutee"] .tableau{
  background-image:linear-gradient(180deg,#ffffff07,transparent 92px)}
[data-ambiance="bleutee"] .somme{font-family:var(--titre);font-weight:700;letter-spacing:-.035em}
[data-ambiance="bleutee"] nav.menu a{font-size:13.5px;font-weight:500}
[data-ambiance="bleutee"] nav.menu a.actif{background:linear-gradient(90deg,
  var(--accent-doux),transparent)}
[data-ambiance="bleutee"] thead th{background:var(--creux);letter-spacing:.14em}
[data-ambiance="bleutee"] .etiquette{border-radius:3px}
[data-ambiance="bleutee"] .piste{border-radius:2px}

/* ── VERTE — herbier, papier recyclé, encre sombre. ── */
[data-ambiance="verte"]{
  --titre:'Karla',system-ui,sans-serif;
  --sans:'Karla',system-ui,-apple-system,sans-serif;
  --graisse-titre:700;
  --r:3px; --r-petit:3px;
  --pad-carte:20px 22px;
  --bord-carte:1px solid var(--trait);
  --interlettre:.12em;
  --interligne:1.6;
  --casse-titre:none;
  --fond:#E6EBE0; --panneau:#F7F9F3; --panneau2:#EDF1E7; --creux:#E9EEE3;
  --trait:#CAD6C1; --trait2:#DEE6D8;
  --texte:#1B2418; --texte2:#465240; --discret:#78856F;
  --signal:#2E7A4E; --signal-bg:#2E7A4E16;
  --watch:#9C7318;  --watch-bg:#9C731818;
  --clip:#A94430;   --clip-bg:#A9443014;
  --ombre:0 1px 2px #2c3a2410, 0 8px 20px -12px #2c3a2426;
  --champ:#FFFFFF;
}
[data-ambiance="verte"]{--accent-brut:#7FA65C}
[data-ambiance="verte"] .entete h1{font-size:27px;letter-spacing:-.022em}
[data-ambiance="verte"] .titre-section{border-bottom:1px solid var(--trait);padding-bottom:6px}
[data-ambiance="verte"] .titre-section h2{font-family:var(--titre);font-size:12px;
  font-weight:700;letter-spacing:.14em}
[data-ambiance="verte"] .somme{font-family:var(--titre);font-weight:700}
[data-ambiance="verte"] .carte,[data-ambiance="verte"] .tableau{box-shadow:none;
  border-left:3px solid var(--accent-trait)}
[data-ambiance="verte"] nav.menu a{font-size:14px;font-weight:500}
[data-ambiance="verte"] thead th{background:var(--panneau2);
  border-bottom:1px solid var(--trait);letter-spacing:.1em}
[data-ambiance="verte"] tbody td{padding:12px 14px}
[data-ambiance="verte"] .etiquette{border-radius:2px}
[data-ambiance="verte"] .piste{border-radius:1px}

/* ── Accents ── */
[data-accent="laiton"]     { --accent-brut:#C9A455; }
[data-accent="cuivre"]     { --accent-brut:#C87A52; }
[data-accent="vertdegris"] { --accent-brut:#54A88E; }
[data-accent="nuitbleue"]  { --accent-brut:#7093DA; }
[data-accent="prune"]      { --accent-brut:#B47AA6; }
[data-accent="sauge"]      { --accent-brut:#96AF77; }

/* Sur fond sombre l'accent est repris tel quel ; sur fond clair il est
   assombri, sinon il devient illisible. */
html{ --accent:var(--accent-brut, #C9A455); }
[data-ambiance="papier"], [data-ambiance="solaire"], [data-ambiance="verte"]{
  --accent:color-mix(in srgb, var(--accent-brut, #C9A455) 74%, #171208);
  --sur-accent:#FFFFFF;
}

:root{
  --sans:'IBM Plex Sans',system-ui,-apple-system,Segoe UI,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,monospace;
  --rail:236px; --r:6px;
  --accent-doux:color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-trait:color-mix(in srgb, var(--accent) 42%, transparent);
  --sur-accent:#15181B;
}
[data-ambiance="papier"]{ --sur-accent:#FFFFFF; }

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--fond);color:var(--texte);font-family:var(--sans);
  font-size:15px;line-height:var(--interligne,1.5);min-height:100vh}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
::selection{background:var(--accent-doux)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--trait);border-radius:9px}
::-webkit-scrollbar-track{background:transparent}

/* ── Typographie utilitaire ── */
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:var(--interlettre,.13em);text-transform:uppercase;color:var(--discret)}
h1,h2,h3{font-family:var(--titre,var(--sans));font-weight:var(--graisse-titre,600);
  letter-spacing:-.015em;text-transform:var(--casse-titre,none)}

/* ══ Structure ══════════════════════════════════════════════════════ */
.appli{display:flex;min-height:100vh}
.rail{width:var(--rail);flex:none;background:var(--panneau);border-right:1px solid var(--trait);
  display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;overflow-y:auto;z-index:60}
.rail-tete{padding:16px 18px 12px;border-bottom:1px solid var(--trait2)}
.rail-tete .marque{display:flex;align-items:center;gap:10px}
.rail-tete .puce{width:30px;height:30px;border-radius:5px;background:var(--accent-doux);
  border:1px solid var(--accent-trait);display:grid;place-items:center;flex:none;overflow:hidden}
.rail-tete .puce img{width:100%;height:100%;object-fit:contain}
.rail-tete .puce span{font-family:var(--mono);font-weight:600;color:var(--accent);font-size:13px}
.rail-tete b{font-size:15px;font-weight:600;display:block;line-height:1.2}
.rail-tete small{font-size:11px;color:var(--discret)}

.selecteur{padding:10px 14px;border-bottom:1px solid var(--trait2)}
.selecteur label{display:block;margin-bottom:4px}
select,input,textarea{font-family:var(--sans);font-size:14px;color:var(--texte);
  background:var(--champ);border:1px solid var(--trait);border-radius:var(--r-petit,5px);
  padding:8px 10px;width:100%;outline:none;transition:border-color .15s}
select:focus,input:focus,textarea:focus{border-color:var(--accent)}
textarea{resize:vertical;line-height:1.5}
select option{background:var(--panneau);color:var(--texte)}
.selecteur select{font-size:13px;padding:6px 8px}

nav.menu{padding:8px 0;flex:1}
nav.menu a{display:flex;align-items:center;gap:10px;padding:9px 18px;font-size:13.5px;
  font-weight:500;color:var(--texte2);border-left:2px solid transparent}
nav.menu a:hover{color:var(--texte);background:var(--panneau2);text-decoration:none}
nav.menu a.actif{color:var(--texte);background:var(--panneau2);border-left-color:var(--accent)}
nav.menu a svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6}
nav.menu .groupe{padding:14px 18px 5px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--discret)}
nav.menu a .compteur{margin-left:auto;font-family:var(--mono);font-size:10.5px;
  background:var(--clip-bg);color:var(--clip);padding:1px 6px;border-radius:20px}

.rail-pied{padding:12px 16px;border-top:1px solid var(--trait2);font-size:11.5px;
  color:var(--discret);display:flex;flex-direction:column;gap:7px}
.rail-pied a{color:var(--texte2)}
.rail-pied .editeur{margin-top:5px;padding-top:9px;border-top:1px solid var(--trait2);
  font-size:10.5px;line-height:1.65;color:var(--discret)}
.rail-pied .editeur b{color:var(--texte2);font-weight:600}
.rail-pied .editeur a{color:var(--accent);word-break:break-all;font-size:10px}

.page{margin-left:var(--rail);flex:1;padding:26px 30px 60px;max-width:1180px;width:100%}
.entete{display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:20px}
.entete h1{font-size:23px}
.entete p{color:var(--discret);font-size:13.5px;margin-top:2px}

.barre-mobile{display:none}

/* ══ Blocs ══════════════════════════════════════════════════════════ */
.carte{background:var(--panneau);border:var(--bord-carte,1px solid var(--trait));
  border-radius:var(--r);box-shadow:var(--ombre)}
.carte.pad{padding:var(--pad-carte,18px 20px)}
.grille{display:grid;gap:1px;background:var(--trait);border:1px solid var(--trait);
  border-radius:var(--r);overflow:hidden}
.grille > *{background:var(--panneau)}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

.titre-section{display:flex;align-items:baseline;gap:12px;margin:26px 0 11px;flex-wrap:wrap}
.titre-section h2{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--texte2)}
.titre-section .aide{font-size:12.5px;color:var(--discret)}
.titre-section .droite{margin-left:auto;display:flex;gap:8px}

/* ── Réponse principale ── */
.reponse > div{padding:20px 22px}
.somme{font-family:var(--mono);font-weight:600;font-size:clamp(30px,5vw,42px);
  letter-spacing:-.03em;line-height:1}
.somme small{font-size:.44em;margin-left:3px;font-weight:500}
.somme.rouge{color:var(--clip)}
.explication{font-size:13.5px;color:var(--texte2);margin-top:10px;max-width:38ch}
.explication b{color:var(--texte);font-weight:600}
.ligne-info{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:6px 0;border-bottom:1px dotted var(--trait);font-size:13.5px}
.ligne-info:last-of-type{border-bottom:0}
.ligne-info span{color:var(--texte2)}
.ligne-info b{font-family:var(--mono);font-weight:600}
.compte-rebours{display:inline-flex;align-items:center;gap:7px;margin-top:12px;
  font-family:var(--mono);font-size:11.5px;font-weight:500;padding:5px 10px;border-radius:4px;
  background:var(--watch-bg);color:var(--watch)}
.compte-rebours.ok{background:var(--signal-bg);color:var(--signal)}
.compte-rebours.urgent{background:var(--clip-bg);color:var(--clip)}

/* ── Jauges (signature) ── */
.strip{padding:17px 19px 19px;display:flex;flex-direction:column;gap:13px}
.strip-tete{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.strip-tete .quoi{font-size:13.5px;font-weight:600;line-height:1.28}
.strip-tete .quoi em{display:block;font-style:normal;font-size:11.5px;font-weight:400;
  color:var(--discret);margin-top:2px;font-family:var(--mono)}
.strip-tete .taux{font-family:var(--mono);font-size:19px;font-weight:600;letter-spacing:-.02em;
  white-space:nowrap;flex:none}
.jauge{display:flex;gap:12px;height:126px}
.piste{position:relative;width:24px;flex:none;border-radius:3px;border:1px solid var(--trait);
  overflow:hidden;background:linear-gradient(to top,
    var(--signal-bg) 0 65%, var(--watch-bg) 65% 88%, var(--clip-bg) 88% 100%)}
.niveau{position:absolute;left:0;right:0;bottom:0;transition:height .8s cubic-bezier(.2,.7,.3,1)}
.niveau::after{content:'';position:absolute;inset:0 0 auto;height:2px;background:#00000055}
.reperes{flex:1;position:relative;font-family:var(--mono);font-size:10.5px;color:var(--discret)}
.repere{position:absolute;left:0;right:0;display:flex;align-items:center;gap:6px;
  transform:translateY(-50%)}
.repere::before{content:'';width:9px;height:1px;background:var(--trait);flex:none}
.repere.seuil{color:var(--clip);font-weight:600}
.repere.seuil::before{background:var(--clip);width:14px}
.repere.moi{color:var(--texte);font-weight:600}
.repere.moi::before{background:var(--texte);width:14px}
.verdict{font-size:12.5px;line-height:1.45;color:var(--texte2);border-top:1px solid var(--trait2);
  padding-top:11px}
.verdict b{color:var(--texte);font-weight:600}
.verdict.watch b{color:var(--watch)}
.verdict.clip b{color:var(--clip)}

/* ── Créances ── */
.creances{list-style:none;display:flex;flex-direction:column;gap:3px;min-height:126px}
.creances li{display:grid;grid-template-columns:1fr auto;gap:0 10px;padding:8px 11px;
  border-radius:4px;background:var(--panneau2);border-left:2px solid var(--trait)}
.creances li.retard{background:var(--clip-bg);border-left-color:var(--clip)}
.creances .qui{font-size:12.5px;font-weight:500;line-height:1.25}
.creances .quand{font-family:var(--mono);font-size:10px;color:var(--discret)}
.creances li.retard .quand{color:var(--clip)}
.creances .combien{grid-row:1/3;align-self:center;font-family:var(--mono);font-size:13px;
  font-weight:600;white-space:nowrap}
.vide{color:var(--discret);font-size:13px;font-style:italic;padding:14px 0}

/* ── À faire ── */
.taches{border:1px solid var(--trait);border-radius:var(--r);overflow:hidden}
.tache{display:flex;align-items:center;gap:13px;padding:12px 16px;font-size:13.5px;
  border-bottom:1px solid var(--trait2);background:var(--panneau)}
.tache:last-child{border-bottom:0}
.tache .quand{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;padding:3px 7px;border-radius:3px;flex:none;white-space:nowrap}
.quand.now{background:var(--clip-bg);color:var(--clip)}
.quand.soon{background:var(--watch-bg);color:var(--watch)}
.quand.ok{background:var(--signal-bg);color:var(--signal)}
.tache .texte{flex:1;color:var(--texte2)}
.tache .texte b{color:var(--texte);font-weight:600}

/* ── Périodes ── */
.periode{padding:13px 15px}
.periode.courante{box-shadow:inset 3px 0 0 var(--accent)}
.periode.faite{opacity:.62}
.periode .cle{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--discret);display:flex;justify-content:space-between;gap:8px;margin-bottom:7px}
.periode .montant{font-family:var(--mono);font-size:17px;font-weight:600;letter-spacing:-.02em}
.periode .sous{font-size:11.5px;color:var(--texte2);margin-top:4px;line-height:1.45}
.periode .du{color:var(--clip);font-weight:600}

/* ══ Tableaux ══════════════════════════════════════════════════════ */
.tableau{background:var(--panneau);border:1px solid var(--trait);border-radius:var(--r);
  overflow:hidden}
table{width:100%;border-collapse:collapse}
thead th{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--discret);text-align:left;padding:11px 14px;
  border-bottom:1px solid var(--trait);background:var(--panneau2)}
tbody td{padding:11px 14px;border-bottom:1px solid var(--trait2);font-size:13.5px;
  vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--panneau2)}
td.r,th.r{text-align:right}
td.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.sous-ligne{font-size:11.5px;color:var(--discret);margin-top:2px}

/* ══ Éléments ══════════════════════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid transparent;
  border-radius:var(--r-petit,5px);padding:8px 15px;font-size:13.5px;font-weight:500;font-family:var(--sans);
  cursor:pointer;transition:.15s;background:var(--panneau2);color:var(--texte);
  border-color:var(--trait);white-space:nowrap}
.btn:hover{border-color:var(--discret);text-decoration:none}
.btn-principal{background:var(--accent);color:var(--sur-accent);border-color:var(--accent);
  font-weight:600}
.btn-principal:hover{filter:brightness(1.08)}
.btn-danger{color:var(--clip);border-color:var(--clip-bg);background:transparent}
.btn-danger:hover{border-color:var(--clip)}
.btn-sm{padding:5px 11px;font-size:12px}
.btn:disabled{opacity:.45;cursor:not-allowed}

.etiquette{display:inline-block;font-family:var(--mono);font-size:10px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:3px;
  background:var(--panneau2);color:var(--texte2);border:1px solid var(--trait)}
.etiquette.brouillon{color:var(--discret)}
.etiquette.emise,.etiquette.envoye{background:var(--watch-bg);color:var(--watch);border-color:transparent}
.etiquette.soldee,.etiquette.accepte{background:var(--signal-bg);color:var(--signal);border-color:transparent}
.etiquette.annulee,.etiquette.refuse,.etiquette.retard{background:var(--clip-bg);color:var(--clip);
  border-color:transparent}
.etiquette.neuf{background:var(--accent-doux);color:var(--accent);border-color:transparent}

.message{padding:11px 15px;border-radius:5px;font-size:13.5px;margin-bottom:9px;
  border:1px solid transparent}
.message.success{background:var(--signal-bg);color:var(--signal);border-color:var(--signal-bg)}
.message.danger{background:var(--clip-bg);color:var(--clip)}
.message.warning{background:var(--watch-bg);color:var(--watch)}
.message.info{background:var(--panneau2);color:var(--texte2);border-color:var(--trait)}

.note{background:var(--panneau2);border:1px solid var(--trait);border-left:3px solid var(--accent);
  border-radius:4px;padding:11px 15px;font-size:12.5px;color:var(--texte2);line-height:1.6}
.note b{color:var(--texte)}
.note.alerte{border-left-color:var(--clip)}

/* ── Formulaires ── */
.formulaire{display:grid;gap:15px}
.champs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:13px}
.champ{display:flex;flex-direction:column;gap:5px}
.champ.large{grid-column:1/-1}
.champ label{font-size:12px;font-weight:500;color:var(--texte2)}
.champ .aide{font-size:11.5px;color:var(--discret);line-height:1.45}
.interrupteur{display:flex;align-items:flex-start;gap:9px;padding:9px 11px;border-radius:5px;
  border:1px solid var(--trait);background:var(--panneau2);cursor:pointer}
.interrupteur input{width:auto;margin-top:2px;accent-color:var(--accent)}
.interrupteur .txt{font-size:13px;font-weight:500}
.interrupteur .txt em{display:block;font-style:normal;font-size:11.5px;font-weight:400;
  color:var(--discret);margin-top:2px}
.choix{display:grid;gap:7px}
.choix label{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:5px;
  border:1px solid var(--trait);background:var(--panneau2);cursor:pointer;transition:.15s}
.choix label:has(input:checked){border-color:var(--accent);background:var(--accent-doux)}
.choix input{width:auto;margin-top:2px;accent-color:var(--accent)}
.choix .txt{font-size:13px;font-weight:500}
.choix .txt em{display:block;font-style:normal;font-size:11.5px;font-weight:400;
  color:var(--discret);margin-top:2px;line-height:1.45}

.pastilles{display:flex;gap:8px;flex-wrap:wrap}
.pastille{width:30px;height:30px;border-radius:50%;border:2px solid var(--trait);cursor:pointer;
  position:relative}
.pastille input{position:absolute;opacity:0;inset:0;cursor:pointer}
.pastille:has(input:checked){border-color:var(--texte);box-shadow:0 0 0 2px var(--fond)}

/* ── Barres mensuelles ── */
.barres{display:flex;align-items:flex-end;gap:5px;height:112px;padding:14px 4px 0}
.barre{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%;
  justify-content:flex-end}
.barre .tige{width:100%;border-radius:3px 3px 0 0;background:var(--accent);min-height:2px;
  opacity:.85}
.barre .m{font-family:var(--mono);font-size:9px;color:var(--discret)}

/* ── Impression ── */
@media print{
  .rail,.barre-mobile,.btn,.taches{display:none}
  .page{margin:0;padding:0}
  body{background:#fff;color:#000}
}

/* ── Petits écrans ── */
@media (max-width:1000px){
  .g4{grid-template-columns:1fr 1fr}
  .g3{grid-template-columns:1fr}
  .reponse{grid-template-columns:1fr !important}
}
@media (max-width:860px){
  .rail{transform:translateX(-100%);transition:transform .22s ease;box-shadow:var(--ombre)}
  body.rail-ouvert .rail{transform:none}
  .page{margin-left:0;padding:14px 15px 50px}
  .barre-mobile{display:flex;align-items:center;gap:12px;padding:11px 15px;
    background:var(--panneau);border-bottom:1px solid var(--trait);position:sticky;top:0;z-index:50}
  .barre-mobile b{font-size:15px}
  .barre-mobile button{background:none;border:1px solid var(--trait);border-radius:5px;
    color:var(--texte);padding:6px 9px;cursor:pointer;font-size:16px;line-height:1}
  .g2,.g4{grid-template-columns:1fr}
  .voile{position:fixed;inset:0;background:#0008;z-index:55;display:none}
  body.rail-ouvert .voile{display:block}
  table{display:block;overflow-x:auto;white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important}
}

/* ═══════════════════════════════════════════════════════════════════
   Règles propres à chaque ambiance
   Au-delà de la palette : la matière change.
   ═══════════════════════════════════════════════════════════════════ */

/* ── NUIT — régie, lumière éteinte ────────────────────────────────── */
[data-ambiance="nuit"] .carte,
[data-ambiance="nuit"] .tableau,
[data-ambiance="nuit"] .grille,
[data-ambiance="nuit"] .taches{box-shadow:none}
[data-ambiance="nuit"] .carte,
[data-ambiance="nuit"] .tableau{border-top:1px solid var(--accent-trait)}
[data-ambiance="nuit"] .entete h1{font-size:19px;letter-spacing:.06em}
[data-ambiance="nuit"] .titre-section h2{letter-spacing:.22em}
[data-ambiance="nuit"] .rail{border-right:1px solid var(--trait)}
[data-ambiance="nuit"] nav.menu a{font-size:12.5px;letter-spacing:.04em;padding:8px 18px}
[data-ambiance="nuit"] nav.menu a.actif{background:transparent;
  box-shadow:inset 0 0 22px -8px var(--accent)}
[data-ambiance="nuit"] .btn-principal{box-shadow:0 0 18px -7px var(--accent)}
[data-ambiance="nuit"] .somme{font-weight:500;letter-spacing:-.01em}
[data-ambiance="nuit"] .piste{border-radius:0}
[data-ambiance="nuit"] .niveau{box-shadow:0 0 14px -3px currentColor}
[data-ambiance="nuit"] thead th{background:transparent;letter-spacing:.18em;
  border-bottom:1px solid var(--accent-trait)}
[data-ambiance="nuit"] tbody td{padding:9px 14px}
[data-ambiance="nuit"] .etiquette{border-radius:0;letter-spacing:.1em}
[data-ambiance="nuit"] .periode.courante{box-shadow:inset 2px 0 0 var(--accent),
  inset 0 0 30px -14px var(--accent)}

/* ── PAPIER — registre comptable ──────────────────────────────────── */
[data-ambiance="papier"]{--sur-accent:#FFFFFF}
[data-ambiance="papier"] .carte,
[data-ambiance="papier"] .tableau,
[data-ambiance="papier"] .taches{box-shadow:none;border:0;
  border-top:2px solid var(--texte);background:var(--panneau)}
[data-ambiance="papier"] .grille{background:transparent;border:0;gap:0;
  border-top:2px solid var(--texte)}
[data-ambiance="papier"] .grille > *{background:transparent;
  border-right:1px solid var(--trait2)}
[data-ambiance="papier"] .grille > *:last-child{border-right:0}
[data-ambiance="papier"] .entete h1{font-size:29px;letter-spacing:-.02em}
[data-ambiance="papier"] .titre-section{margin:38px 0 13px;
  border-bottom:1px solid var(--trait);padding-bottom:7px}
[data-ambiance="papier"] .titre-section h2{font-family:var(--titre);font-size:15px;
  font-weight:600;letter-spacing:0;text-transform:none;color:var(--texte)}
[data-ambiance="papier"] .somme{font-family:var(--titre);font-weight:700;letter-spacing:-.02em}
[data-ambiance="papier"] .rail{background:var(--panneau2);border-right:1px solid var(--trait)}
[data-ambiance="papier"] nav.menu a{font-family:var(--titre);font-size:14.5px;padding:8px 18px}
[data-ambiance="papier"] nav.menu a.actif{background:transparent;font-weight:600}
[data-ambiance="papier"] thead th{background:transparent;border-bottom:1.5px solid var(--texte);
  font-family:var(--titre);font-size:11px;font-weight:600;letter-spacing:.04em;
  text-transform:none;color:var(--texte2)}
[data-ambiance="papier"] tbody td{padding:13px 14px;border-bottom:1px solid var(--trait2)}
[data-ambiance="papier"] tbody tr:hover{background:var(--panneau2)}
[data-ambiance="papier"] .strip{padding:22px 24px 24px}
[data-ambiance="papier"] .piste{border-radius:0;width:20px}
[data-ambiance="papier"] .etiquette{border-radius:2px;font-family:var(--mono)}
[data-ambiance="papier"] .btn{border-radius:2px}
[data-ambiance="papier"] .note{border-left-width:2px}
[data-ambiance="papier"] .periode{padding:16px 18px}
[data-ambiance="papier"] .tache{padding:14px 18px}

/* ── ARDOISE — la référence, cartes posées ────────────────────────── */
[data-ambiance="ardoise"] .carte:hover{border-color:var(--trait)}

/* ── Contrôle de conformité ───────────────────────────────────────── */
.controle{border:1px solid var(--trait);border-radius:var(--r-petit);overflow:hidden;
  margin-bottom:15px}
.controle-ligne{display:flex;gap:12px;align-items:flex-start;padding:11px 14px;
  border-bottom:1px solid var(--trait2);background:var(--panneau2)}
.controle-ligne:last-child{border-bottom:0}
.pastille-etat{flex:none;width:20px;height:20px;border-radius:50%;display:grid;
  place-items:center;font-size:11px;font-weight:700;font-family:var(--mono);margin-top:1px}
.pastille-etat.fait{background:var(--signal-bg);color:var(--signal)}
.pastille-etat.reste{background:var(--watch-bg);color:var(--watch)}
.controle-ligne .quoi{font-size:13.5px;font-weight:600}
.controle-ligne .pourquoi{font-size:12px;color:var(--discret);line-height:1.55;margin-top:2px}

/* ═══════════════════════════════════════════════════════════════════
   Mémo — des notes que l'on pose sur le tableau
   La couleur porte l'intention, la date fait remonter la note.
   ═══════════════════════════════════════════════════════════════════ */
.memos{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
  gap:14px;align-items:start}
.memo{position:relative;border-radius:2px;padding:14px 15px 12px;min-height:132px;
  display:flex;flex-direction:column;
  background:var(--note);border:1px solid var(--note-bord);
  box-shadow:0 1px 2px #00000026, 0 7px 16px -8px #00000033;
  transition:transform .16s, box-shadow .16s}
.memo:nth-child(3n+1){transform:rotate(-.5deg)}
.memo:nth-child(3n+2){transform:rotate(.4deg)}
.memo:hover{transform:rotate(0) translateY(-2px);box-shadow:0 2px 4px #0000002e,0 12px 22px -10px #0000003d}
.memo::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--note-vif)}

.memo.c-ambre  {--note:#3A3222;--note-bord:#4A4029;--note-vif:#D9A441;--note-texte:#F0E6D2}
.memo.c-rouge  {--note:#3A2825;--note-bord:#4C332E;--note-vif:#E0705F;--note-texte:#F5DED9}
.memo.c-bleu   {--note:#22303C;--note-bord:#2D404F;--note-vif:#6BA3D0;--note-texte:#DDEAF4}
.memo.c-vert   {--note:#243428;--note-bord:#2F4534;--note-vif:#63BC8A;--note-texte:#DCEFE3}
.memo.c-violet {--note:#332839;--note-bord:#43344B;--note-vif:#B183C6;--note-texte:#EEE0F3}
[data-ambiance="papier"] .memo,[data-ambiance="solaire"] .memo,[data-ambiance="verte"] .memo{
  box-shadow:0 1px 2px #00000012,0 8px 18px -10px #0000001f}
[data-ambiance="papier"] .memo.c-ambre,[data-ambiance="solaire"] .memo.c-ambre,
[data-ambiance="verte"] .memo.c-ambre  {--note:#FBF0D5;--note-bord:#EBDCB4;--note-vif:#B4841E;--note-texte:#3A2E13}
[data-ambiance="papier"] .memo.c-rouge,[data-ambiance="solaire"] .memo.c-rouge,
[data-ambiance="verte"] .memo.c-rouge  {--note:#FBE4DF;--note-bord:#EFCCC4;--note-vif:#B24A38;--note-texte:#3D1C16}
[data-ambiance="papier"] .memo.c-bleu,[data-ambiance="solaire"] .memo.c-bleu,
[data-ambiance="verte"] .memo.c-bleu   {--note:#E1EDF7;--note-bord:#C7DBEC;--note-vif:#2F6B9E;--note-texte:#152D40}
[data-ambiance="papier"] .memo.c-vert,[data-ambiance="solaire"] .memo.c-vert,
[data-ambiance="verte"] .memo.c-vert   {--note:#E2F0E5;--note-bord:#C7DFCE;--note-vif:#2C7A50;--note-texte:#15301F}
[data-ambiance="papier"] .memo.c-violet,[data-ambiance="solaire"] .memo.c-violet,
[data-ambiance="verte"] .memo.c-violet {--note:#EFE4F4;--note-bord:#DCCBE4;--note-vif:#7A4E92;--note-texte:#2E1C37}

.memo-date{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:7px}
.memo-date b{font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--note-vif)}
.memo-date span{font-family:var(--mono);font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;opacity:.68;color:var(--note-texte)}
.memo-texte{font-size:13px;line-height:1.5;color:var(--note-texte);flex:1;
  overflow-wrap:anywhere}
.memo-pied{display:flex;align-items:center;justify-content:space-between;gap:8px;
  margin-top:11px;padding-top:8px;border-top:1px solid var(--note-bord)}
.memo-genre{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--note-vif);font-weight:600}
.memo-actions{display:flex;gap:2px;opacity:0;transition:opacity .15s}
.memo:hover .memo-actions,.memo:focus-within .memo-actions{opacity:1}
.memo-actions form{display:inline}
.memo-actions button{background:none;border:0;cursor:pointer;font-size:13px;line-height:1;
  padding:3px 5px;border-radius:3px;color:var(--note-texte);opacity:.7}
.memo-actions button:hover{opacity:1;background:#ffffff1a}

.memo.imminent::before{width:4px;animation:pulse-note 2.4s ease-in-out infinite}
.memo.depasse{border-color:var(--note-vif)}
.memo.depasse .memo-date span{opacity:1;color:var(--note-vif);font-weight:600}
@keyframes pulse-note{0%,100%{opacity:1}50%{opacity:.42}}
.memo.fait{opacity:.5}
.memo.fait .memo-texte{text-decoration:line-through;text-decoration-thickness:1px}

.memo-edition{display:none;flex-direction:column;gap:8px}
.memo.edition .memo-vue,.memo.edition .memo-appel{display:none}
.memo.edition .memo-edition{display:flex}
.memo.edition{transform:rotate(0)}
.memo-edition textarea,.memo-edition input,.memo-edition select{
  background:#ffffff14;border-color:var(--note-bord);color:var(--note-texte);font-size:12.5px}
[data-ambiance="papier"] .memo-edition textarea,[data-ambiance="solaire"] .memo-edition textarea,
[data-ambiance="verte"] .memo-edition textarea,
[data-ambiance="papier"] .memo-edition input,[data-ambiance="solaire"] .memo-edition input,
[data-ambiance="verte"] .memo-edition input,
[data-ambiance="papier"] .memo-edition select,[data-ambiance="solaire"] .memo-edition select,
[data-ambiance="verte"] .memo-edition select{background:#ffffffcc}
.memo-boutons{display:flex;gap:6px}

.memo.neuve{background:transparent;border:1.5px dashed var(--trait);box-shadow:none;
  transform:none;--note-texte:var(--texte);--note-bord:var(--trait);--note-vif:var(--accent)}
.memo.neuve::before{display:none}
.memo.neuve:hover{border-color:var(--accent);transform:none}
.memo-appel{width:100%;flex:1;background:none;border:0;cursor:pointer;color:var(--discret);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  font-family:var(--sans);font-size:12.5px}
.memo-appel .plus{font-size:22px;color:var(--accent)}
.memo-appel:hover{color:var(--texte)}