/* ═══════════════════════════════════════════════════════════════════════
   CHARTE — feuille de styles unique du backoffice admin et de l'espace
   cabinet, appliquée à la lettre des maquettes validées
   (sources/maquette_admin.html et sources/maquette_cabinet.html).

   Servie en fichier statique par `lib/statiques.py` (par Caddy en
   production), sous une URL empreinte du contenu : le navigateur la met en
   cache une fois pour toutes, et une modification change l'URL.

   Il n'y a **qu'une charte** : la partie A pose les tokens, la coquille et
   tous les composants ; la partie B n'ajoute que les six composants propres
   à l'espace cabinet. Aucune valeur brute hors du bloc `:root` de la partie A.

   Ne concerne pas templates/*.html (newsletters), qui portent leur propre
   mise en forme et restent en lecture seule.
   ═══════════════════════════════════════════════════════════════════════ */

/* ███████████████████████████████████████████████████████████████████████
   PARTIE A — Charte commune (issue du backoffice ; le .frame miniature de
   la maquette devient plein écran)
   ███████████████████████████████████████████████████████████████████████ */
/* ═══════════════════════════════════════════════════════════════════════
   1. TOKENS — aucune valeur brute hors de ce bloc.
   Échelle d'espacement 4px · gris chauds 50→900 · couleurs sémantiques.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  /* — Espacement (4px) — */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;

  /* — Rayons — */
  --r-sm:6px; --r-md:8px; --r-lg:12px; --r-full:999px;

  /* — Typographie — */
  --font:ui-sans-serif,-apple-system,"Segoe UI",Roboto,Inter,sans-serif;
  --mono:ui-monospace,"SF Mono",Consolas,monospace;
  --t-xs:11px; --t-sm:12px; --t-md:14px; --t-lg:16px; --t-xl:20px; --t-2xl:24px; --t-3xl:32px;

  /* — Gris chauds — */
  --g50:#faf9f5; --g100:#f5f4ef; --g200:#ebe9e2; --g300:#ddd9cf; --g400:#b3afa3;
  --g500:#767268; --g600:#5c584f; --g700:#46433b; --g800:#2e2c26; --g900:#1a1a17;

  /* — Surfaces & texte (sémantique) — */
  --surface:#ffffff; --surface-2:#faf9f5; --surface-3:#f5f4ef;
  --page:#f5f4ef;
  --line:#e5e3db; --line-strong:#d3cfc4;
  --text:#1a1a17; --text-muted:#5c584f; --text-subtle:#767268;

  /* — Marque : action primaire, état actif, liens, sélection — */
  --brand:#185fa5; --brand-hover:#134d87; --brand-fg:#ffffff;
  --brand-bg:#e8f1fa; --brand-line:#bcd8f0;

  /* — Sémantique : toujours doublée d'une icône ou d'un mot — */
  --ok:#3b6d11; --ok-bg:#edf4e2; --ok-fill:#639922;
  --warn:#7d4a0a; --warn-bg:#fbf0dd; --warn-fill:#ef9f27;
  --err:#a32d2d; --err-bg:#fcecec; --err-fill:#d94a49;
  --info:#185fa5; --info-bg:#e8f1fa;
  --plan:#4d44ad; --plan-bg:#efeefe;

  /* — Élévation : 3 niveaux, très douce — */
  --sh-1:0 1px 2px rgba(26,26,23,.05);
  --sh-2:0 2px 6px rgba(26,26,23,.07),0 1px 2px rgba(26,26,23,.05);
  --sh-3:0 12px 32px rgba(26,26,23,.14),0 2px 8px rgba(26,26,23,.08);

  --focus:var(--brand);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:160ms;

  /* — Alias de compatibilité (styles inline existants) — */
  --bg:var(--page); --card:var(--surface); --side:var(--surface-2);
  --border:var(--line); --border2:var(--line-strong);
  --txt:var(--text); --txt2:var(--text-muted); --txt3:var(--text-subtle);
  --accent:var(--brand); --accent-bg:var(--brand-bg);
  --purple:var(--plan); --purple-bg:var(--plan-bg);
  --radius:var(--r-md);
}

/* — Mode sombre : mêmes tokens sémantiques, jamais une inversion — */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --surface:#24231f; --surface-2:#201f1c; --surface-3:#2b2a25; --page:#1a1917;
    --line:#37352f; --line-strong:#4c4941;
    --text:#f2f1ec; --text-muted:#b8b4a9; --text-subtle:#98948a;
    --brand:#7cb2e8; --brand-hover:#9cc7f2; --brand-fg:#0d2740;
    --brand-bg:#1a2c3d; --brand-line:#2d4a68;
    --ok:#a3cf6e; --ok-bg:#242c1b; --ok-fill:#7ab13c;
    --warn:#e3b36a; --warn-bg:#33291a; --warn-fill:#d99a2c;
    --err:#ef8f8e; --err-bg:#361f1f; --err-fill:#c94947;
    --info:#7cb2e8; --info-bg:#1a2c3d;
    --plan:#a6a0f0; --plan-bg:#26243d;
    --sh-1:0 1px 2px rgba(0,0,0,.4);
    --sh-2:0 2px 6px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.3);
    --sh-3:0 12px 32px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --surface:#24231f; --surface-2:#201f1c; --surface-3:#2b2a25; --page:#1a1917;
  --line:#37352f; --line-strong:#4c4941;
  --text:#f2f1ec; --text-muted:#b8b4a9; --text-subtle:#98948a;
  --brand:#7cb2e8; --brand-hover:#9cc7f2; --brand-fg:#0d2740;
  --brand-bg:#1a2c3d; --brand-line:#2d4a68;
  --ok:#a3cf6e; --ok-bg:#242c1b; --ok-fill:#7ab13c;
  --warn:#e3b36a; --warn-bg:#33291a; --warn-fill:#d99a2c;
  --err:#ef8f8e; --err-bg:#361f1f; --err-fill:#c94947;
  --info:#7cb2e8; --info-bg:#1a2c3d;
  --plan:#a6a0f0; --plan-bg:#26243d;
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 2px 6px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.3);
  --sh-3:0 12px 32px rgba(0,0,0,.55),0 2px 8px rgba(0,0,0,.4);
}

/* ═══════════════════════════════════════════════════════════════════════
   2. BASE
   ═══════════════════════════════════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0;}
body{
  font-family:var(--font);background:var(--page);color:var(--text);
  font-size:var(--t-md);line-height:1.5;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
:where(button,select,input,textarea){font:inherit;color:inherit;}
/* Focus visible partout — jamais supprimé (règle a11y) */
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-sm);}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
}
code{font-family:var(--mono);font-size:.92em;background:var(--surface-3);border-radius:4px;padding:1px 5px;}

/* ═══════════════════════════════════════════════════════════════════════
   3. COQUILLE APPLICATIVE — sidebar + topbar + contenu
   ═══════════════════════════════════════════════════════════════════════ */
.frame{
  display:grid;grid-template-columns:248px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);
  height:100vh;background:var(--surface);overflow:hidden;
}
.frame-plain{display:block;height:auto;overflow:visible;}

/* — Sidebar : 248px, 1 seul niveau, item actif = fond + barre latérale — */
.side{
  grid-column:1;grid-row:1 / 3;background:var(--surface-2);border-right:1px solid var(--line);
  padding:var(--s3);display:flex;flex-direction:column;gap:2px;overflow-y:auto;
}
.logo{font-weight:600;font-size:var(--t-md);padding:var(--s2) var(--s2) var(--s4);letter-spacing:-.01em;}
.ni{
  position:relative;display:flex;align-items:center;gap:var(--s3);
  padding:var(--s2) var(--s3);border-radius:var(--r-sm);color:var(--text-muted);
  font-size:var(--t-md);font-weight:500;cursor:pointer;
  transition:background var(--dur) var(--ease-out),color var(--dur) var(--ease-out);
}
.ni i{font-size:18px;flex-shrink:0;}
.ni:hover{background:var(--surface-3);color:var(--text);}
.ni.on{background:var(--brand-bg);color:var(--brand);font-weight:600;}
.ni.on::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;background:var(--brand);}
.ni .cnt{margin-left:auto;background:var(--warn-bg);color:var(--warn);border-radius:var(--r-full);padding:1px var(--s2);font-size:var(--t-xs);font-weight:600;font-variant-numeric:tabular-nums;}
.ni.foot{margin-top:auto;}

/* — Topbar : contexte global uniquement, jamais d'action métier — */
.topbar{
  grid-column:2;grid-row:1;height:56px;flex-shrink:0;
  display:flex;align-items:center;gap:var(--s2);
  padding:0 var(--s5);border-bottom:1px solid var(--line);background:var(--surface);
}
.tb-search{
  display:flex;align-items:center;gap:var(--s2);height:32px;min-width:220px;max-width:360px;flex:1;
  padding:0 var(--s3);border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--surface-2);color:var(--text-subtle);font-size:var(--t-md);cursor:text;
}
.tb-search:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-bg);}
.tb-search i{font-size:16px;flex-shrink:0;}
.tb-search input{flex:1;min-width:0;border:0;background:transparent;color:var(--text);font-size:var(--t-md);}
.tb-search input:focus{outline:none;}
.tb-search input::placeholder{color:var(--text-subtle);}
.tb-search kbd{
  font-family:var(--font);font-size:var(--t-xs);color:var(--text-subtle);
  border:1px solid var(--line-strong);border-radius:4px;padding:0 5px;background:var(--surface);flex-shrink:0;
}
.icon-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border:0;border-radius:var(--r-sm);background:transparent;
  color:var(--text-muted);cursor:pointer;transition:background var(--dur) var(--ease-out),color var(--dur) var(--ease-out);
}
.icon-btn i{font-size:18px;}
.icon-btn:hover{background:var(--surface-3);color:var(--text);}
.icon-btn .dot-badge{position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--err-fill);border:1.5px solid var(--surface);}
.tb-sep{width:1px;height:20px;background:var(--line);margin:0 var(--s1);}
.topbar>.avatar{margin-right:0;margin-left:var(--s1);}

/* — Zone de contenu — */
.main{grid-column:2;grid-row:2;min-width:0;overflow:auto;padding:var(--s5) var(--s5) var(--s8);}
.wrap{max-width:1200px;}

/* — En-tête de page : titre + description à gauche, 1 action primaire à droite — */
.phead{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:var(--s5);gap:var(--s4);flex-wrap:wrap;}
.phead h2{font-size:var(--t-xl);font-weight:600;letter-spacing:-.01em;line-height:1.3;}
.phead .sub{font-size:var(--t-md);color:var(--text-muted);display:block;margin-top:2px;}
.phead-act{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;}
.phead-act form{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;}

/* ═══════════════════════════════════════════════════════════════════════
   4. COMPOSANTS
   ═══════════════════════════════════════════════════════════════════════ */

/* — Boutons : 3 variantes, 36px, 1 seule action primaire par écran — */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  height:36px;padding:0 var(--s3);border:1px solid var(--line-strong);
  background:var(--surface);border-radius:var(--r-sm);
  font-size:var(--t-md);font-weight:500;color:var(--text);cursor:pointer;white-space:nowrap;
  transition:background var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out);
}
.btn i{font-size:17px;}
.btn:hover{background:var(--surface-3);border-color:var(--text-subtle);}
.btn:active{background:var(--surface-2);}
.btn.pri{background:var(--brand);color:var(--brand-fg);border-color:var(--brand);}
.btn.pri:hover{background:var(--brand-hover);border-color:var(--brand-hover);}
.btn.ghost{border-color:transparent;background:transparent;color:var(--text-muted);}
.btn.ghost:hover{background:var(--surface-3);color:var(--text);}
.btn.danger{color:var(--err);border-color:var(--err-fill);}
.btn.danger:hover{background:var(--err-bg);}
.btn.sm{height:30px;padding:0 var(--s2);font-size:var(--t-sm);}
.btn.is-disabled,.btn[aria-disabled="true"],.btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none;}

/* — Indicateurs — */
.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s3);margin-bottom:var(--s5);}
.metric{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s3) var(--s4);}
.metric .lbl{font-size:var(--t-sm);color:var(--text-muted);font-weight:500;}
.metric .val{font-size:var(--t-2xl);font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.2;margin:2px 0;}
.metric .delta{font-size:var(--t-sm);color:var(--text-subtle);font-variant-numeric:tabular-nums;}
.up{color:var(--ok);} .down{color:var(--err);}

/* — Panneaux — */
.panel{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s4);margin-bottom:var(--s4);background:var(--surface);}
.panel:has(>table){padding:0;overflow-x:auto;}
.panel h3{font-size:var(--t-md);font-weight:600;margin-bottom:var(--s3);display:flex;align-items:center;gap:var(--s2);}
.panel h3 i{font-size:17px;color:var(--text-subtle);}
.cols2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--s4);}
.row{padding:var(--s2) 0;border-bottom:1px solid var(--line);color:var(--text-muted);font-size:var(--t-md);}
.row:last-child{border-bottom:0;}

/* — Badges : pilule, fond clair + texte foncé de la même teinte — */
.badge{
  display:inline-flex;align-items:center;gap:4px;font-size:var(--t-xs);font-weight:600;
  padding:2px var(--s2);border-radius:var(--r-full);white-space:nowrap;line-height:1.6;
}
.b-ok{background:var(--ok-bg);color:var(--ok);}
.b-warn{background:var(--warn-bg);color:var(--warn);}
.b-err{background:var(--err-bg);color:var(--err);}
.b-acc{background:var(--brand-bg);color:var(--brand);}
.b-pur{background:var(--plan-bg);color:var(--plan);}
.b-gray{background:var(--surface-3);color:var(--text-muted);}

/* — Tableaux : en-tête collant, chiffres tabulaires, ligne survolable — */
table{width:100%;border-collapse:collapse;font-size:var(--t-md);font-variant-numeric:tabular-nums;}
th{
  position:sticky;top:0;z-index:1;text-align:left;font-size:var(--t-xs);text-transform:uppercase;
  letter-spacing:.05em;color:var(--text-subtle);font-weight:600;padding:var(--s2) var(--s4);
  border-bottom:1px solid var(--line);background:var(--surface-2);white-space:nowrap;
}
td{padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);vertical-align:middle;}
tr:last-child td{border-bottom:0;}
tbody tr:hover td,table tr:hover td{background:var(--surface-2);}
tr.err-row td{background:var(--err-bg);}
tr.err-row:hover td{background:var(--err-bg);}
tr.rowlink{cursor:pointer;}

/* — Filtres & champs — */
.filters{display:flex;gap:var(--s2);margin-bottom:var(--s4);flex-wrap:wrap;}
.input,select.input{
  height:36px;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  padding:0 var(--s3);font-size:var(--t-md);background:var(--surface);color:var(--text);font-family:inherit;
  transition:border-color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);
}
.input:hover{border-color:var(--text-subtle);}
.input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-bg);}
.input.grow{flex:1;min-width:180px;}
.input.err{border-color:var(--err-fill);}
.input.err:focus{box-shadow:0 0 0 3px var(--err-bg);}
.input::placeholder{color:var(--text-subtle);}
textarea.input{width:100%;height:auto;min-height:110px;padding:var(--s2) var(--s3);resize:vertical;line-height:1.5;}
/* Formulaires : label AU-DESSUS, aide permanente sous le champ */
.form-row{display:flex;flex-direction:column;gap:var(--s1);align-items:flex-start;padding:var(--s3) 0;border-bottom:1px solid var(--line);}
.form-row:last-child{border-bottom:0;}
.form-row label{color:var(--text);font-size:var(--t-md);font-weight:500;}
.form-row .input{width:100%;max-width:520px;}
.form-row textarea.input{max-width:680px;}
.form-row .help{font-size:var(--t-sm);color:var(--text-subtle);}
.form-row .err-msg{font-size:var(--t-sm);color:var(--err);display:flex;align-items:center;gap:4px;}

/* — Progression — */
.progress{display:flex;gap:var(--s2);align-items:center;margin:var(--s3) 0 var(--s2);}
.seg{flex:1;height:6px;border-radius:var(--r-full);background:var(--line);}
.seg.done{background:var(--ok-fill);} .seg.cur{background:var(--warn-fill);}
.steps{display:flex;justify-content:space-between;font-size:var(--t-sm);color:var(--text-subtle);gap:var(--s2);}

/* — Cartes article — */
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--s3);}
.acard{
  border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s4);background:var(--surface);
  display:flex;flex-direction:column;gap:var(--s2);cursor:pointer;
  transition:border-color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),transform var(--dur) var(--ease-out);
}
.acard:hover{border-color:var(--line-strong);box-shadow:var(--sh-2);transform:translateY(-1px);}
.acard .cat{font-size:var(--t-xs);color:var(--text-subtle);text-transform:uppercase;letter-spacing:.05em;font-weight:600;}
.acard .t{font-weight:600;font-size:var(--t-md);line-height:1.4;}
/* Sous-titre : ce qui distingue deux articles aux titres proches. */
.acard .st{font-size:var(--t-sm);color:var(--text-muted);line-height:1.5;margin-top:calc(var(--s2) * -1);}
.acard .foot{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);margin-top:auto;padding-top:var(--s2);font-size:var(--t-sm);color:var(--text-subtle);}

/* — Kanban — */
.kanban{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s3);}
.kcol{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s3);}
.kcol h4{font-size:var(--t-sm);font-weight:600;color:var(--text-muted);margin-bottom:var(--s3);display:flex;justify-content:space-between;text-transform:uppercase;letter-spacing:.05em;}
.kcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s3);margin-bottom:var(--s2);font-size:var(--t-md);box-shadow:var(--sh-1);display:block;}
.kcard:last-child{margin-bottom:0;}
.kcard .who{color:var(--text-subtle);font-size:var(--t-sm);margin-top:var(--s1);display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;}

/* — Graphiques — */
.chart{display:flex;align-items:flex-end;gap:var(--s2);height:140px;padding:var(--s4) 0 0;}
.bar{flex:1;background:var(--brand);border-radius:3px 3px 0 0;position:relative;min-width:8px;}
.bar span{position:absolute;top:-18px;left:0;right:0;text-align:center;font-size:var(--t-xs);color:var(--text-muted);font-variant-numeric:tabular-nums;}
.bar.dim{background:var(--line-strong);}
.chart-x{display:flex;gap:var(--s2);font-size:var(--t-xs);color:var(--text-subtle);margin-top:var(--s1);}
.chart-x div{flex:1;text-align:center;}

/* — Calendrier des éditions — */
.cal{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s2);}
.mois{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s3);font-size:var(--t-md);background:var(--surface);display:block;}
.mois b{display:block;font-size:var(--t-md);margin-bottom:var(--s1);}
.mois.cur{border-color:var(--warn-fill);box-shadow:0 0 0 1px var(--warn-fill);}
a.mois:hover{border-color:var(--line-strong);}
a.mois.cur:hover{border-color:var(--warn-fill);}

/* — Checklist — */
.check{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) 0;color:var(--text-muted);font-size:var(--t-md);}
.check i{font-size:18px;}
.check .ok{color:var(--ok);} .check .todo{color:var(--text-subtle);}
.chk{display:inline-flex;align-items:center;gap:var(--s2);margin:0 var(--s4) var(--s2) 0;font-size:var(--t-md);color:var(--text-muted);}
.chk input{margin:0;}

/* — Avatar — */
.avatar{
  display:inline-flex;width:28px;height:28px;border-radius:50%;background:var(--brand-bg);
  color:var(--brand);font-size:var(--t-xs);font-weight:600;align-items:center;justify-content:center;
  margin-right:var(--s2);flex-shrink:0;
}
.avatar.lg{width:44px;height:44px;font-size:var(--t-lg);margin-right:0;}

/* — Onglets — */
.tabs{display:flex;gap:var(--s5);border-bottom:1px solid var(--line);margin-bottom:var(--s5);}
.tab{padding:var(--s2) 0 var(--s3);font-size:var(--t-md);font-weight:500;color:var(--text-muted);border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;transition:color var(--dur) var(--ease-out);}
.tab:hover{color:var(--text);}
.tab.on{color:var(--brand);font-weight:600;border-bottom-color:var(--brand);}

/* — Fil d'Ariane — */
.crumb{font-size:var(--t-sm);color:var(--text-subtle);margin-bottom:var(--s3);}
.crumb a{color:var(--text-muted);text-decoration:none;}
.crumb a:hover{color:var(--brand);text-decoration:underline;}

/* — Paires clé / valeur — */
.kv{display:flex;justify-content:space-between;gap:var(--s4);padding:var(--s2) 0;font-size:var(--t-md);border-bottom:1px solid var(--line);}
.kv:last-child{border-bottom:0;}
.kv .k{color:var(--text-muted);flex-shrink:0;}

/* — Accordéon — */
.acc{border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:var(--s2);background:var(--surface);overflow:hidden;}
.acc-head{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);font-size:var(--t-md);cursor:pointer;list-style:none;transition:background var(--dur) var(--ease-out);}
.acc-head::-webkit-details-marker{display:none;}
.acc-head:hover{background:var(--surface-2);}
.acc-head i{font-size:17px;color:var(--text-subtle);}
.acc-head i.chev{transition:transform var(--dur) var(--ease-out);}
details[open]>.acc-head i.chev{transform:rotate(90deg);}
.acc-head .stats{margin-left:auto;display:flex;gap:var(--s5);color:var(--text-muted);font-size:var(--t-sm);font-variant-numeric:tabular-nums;align-items:center;flex-wrap:wrap;}
.acc-body{border-top:1px solid var(--line);background:var(--surface-2);padding:var(--s4);}
.art-line{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) 0;font-size:var(--t-md);border-bottom:1px solid var(--line);}
.art-line:last-child{border-bottom:0;}
.art-line i{font-size:17px;flex-shrink:0;}
.art-line .muted{color:var(--text-subtle);}

/* — Bouton icône de tableau (composition d'édition) — */
.ed-ico{border:0;background:none;color:var(--text-subtle);cursor:pointer;padding:var(--s1);font-family:inherit;line-height:1;border-radius:var(--r-sm);transition:background var(--dur) var(--ease-out),color var(--dur) var(--ease-out);}
.ed-ico:hover{background:var(--surface-3);color:var(--text);}
.ed-ico:disabled{opacity:.35;cursor:default;}
.ed-ico i{font-size:17px;}

/* — Visionneuse plein écran — */
.pv-cols{display:flex;align-items:stretch;}
.pv-left{max-width:46%;border-right:1px solid var(--line);}
#tpl-panes .pv-left{border-right:0;}
.viewer-head{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s5);border-bottom:1px solid var(--line);background:var(--surface);flex-wrap:wrap;}
.pane{flex:1;min-width:0;padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3);}
.pane h4{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--text-subtle);font-weight:600;display:flex;align-items:center;gap:var(--s2);}

/* — Aperçus email / page : toujours rendus en clair, quel que soit le thème — */
.device{
  --surface:#ffffff; --surface-2:#faf9f5; --surface-3:#f5f4ef;
  --line:#e5e3db; --line-strong:#d3cfc4;
  --text:#1a1a17; --text-muted:#5c584f; --text-subtle:#767268;
  --brand:#185fa5; --brand-bg:#e8f1fa; --plan:#4d44ad; --plan-bg:#efeefe;
  --border:var(--line); --border2:var(--line-strong);
  --txt:var(--text); --txt2:var(--text-muted); --txt3:var(--text-subtle);
}
.device{
  border:1px solid var(--line-strong);border-radius:var(--r-md);overflow:hidden;
  background:#fff;color:#1a1a17;flex:1;box-shadow:var(--sh-1);display:flex;flex-direction:column;
}
.device-bar{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);background:var(--surface-2);border-bottom:1px solid var(--line);font-size:var(--t-xs);color:var(--text-muted);}
.dot{width:8px;height:8px;border-radius:50%;background:var(--line-strong);flex-shrink:0;}
.url{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:2px var(--s2);flex:1;font-family:var(--mono);font-size:var(--t-xs);color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.device iframe{border:0;width:100%;height:680px;background:#fff;display:block;}

/* ═══════════════════════════════════════════════════════════════════════
   5. ÉTATS — vide, message, légende
   ═══════════════════════════════════════════════════════════════════════ */
.skel{height:10px;border-radius:var(--r-full);
  background:linear-gradient(90deg,var(--line) 25%,var(--surface-3) 37%,var(--line) 63%);
  background-size:400% 100%;animation:shimmer 1.4s ease-in-out infinite;margin:var(--s2) 0;}
@keyframes shimmer{0%{background-position:100% 0;}100%{background-position:0 0;}}
.empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s3);
  padding:var(--s7) var(--s5);text-align:center;
}
.empty .ico{
  width:48px;height:48px;border-radius:var(--r-lg);background:var(--surface-3);
  display:flex;align-items:center;justify-content:center;color:var(--text-subtle);
}
.empty .ico i{font-size:24px;}
.empty h4{font-size:var(--t-lg);font-weight:600;}
.empty p{color:var(--text-muted);max-width:44ch;font-size:var(--t-md);}
.legend{font-size:var(--t-sm);color:var(--text-subtle);margin-top:var(--s3);line-height:1.6;}
.legend a{color:var(--brand);}
.row a,.kv a,.help a{color:var(--brand);}
/* Messages système — même grammaire que les notifications de la maquette */
.msg{
  display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);margin-bottom:var(--s4);
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:var(--r-md);box-shadow:var(--sh-1);font-size:var(--t-md);color:var(--text);
}
.msg.ok{border-left-color:var(--ok-fill);}
.msg.err{border-left-color:var(--err-fill);}
.msg.warn{border-left-color:var(--warn-fill);margin-bottom:0;}
.secret{font-family:var(--mono);font-size:var(--t-md);background:var(--surface-3);padding:var(--s2) var(--s3);border-radius:var(--r-sm);display:inline-block;margin:var(--s1) 0;word-break:break-all;}

/* — Connexion — */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--s5);background:var(--page);}
.login{width:360px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s6);box-shadow:var(--sh-2);}
.login .logo{padding:0 0 var(--s3);}
.login h1{font-size:var(--t-lg);font-weight:600;margin-bottom:2px;}
.login p{color:var(--text-muted);font-size:var(--t-sm);margin-bottom:var(--s3);}
.login label{display:block;font-size:var(--t-sm);color:var(--text);font-weight:500;margin:var(--s3) 0 var(--s1);}
.login .input{width:100%;}
.login .btn{width:100%;justify-content:center;margin-top:var(--s4);}

/* ═══════════════════════════════════════════════════════════════════════
   6. ÉCRANS SPÉCIFIQUES
   ═══════════════════════════════════════════════════════════════════════ */

/* — Éditions : grille annuelle + synthèse — */
.ed-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--s2);margin-bottom:var(--s5);}
.ed-card{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s3);background:var(--surface);cursor:pointer;display:flex;flex-direction:column;gap:var(--s1);
  transition:border-color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);}
.ed-card:hover{border-color:var(--line-strong);box-shadow:var(--sh-2);}
.ed-card.cur{border-color:var(--warn-fill);box-shadow:0 0 0 1px var(--warn-fill);}
.ed-card.sel{outline:2px solid var(--brand);outline-offset:1px;}
.ed-card .ed-m{font-size:var(--t-md);font-weight:600;}
.ed-card .ed-hint{font-size:var(--t-xs);color:var(--text-subtle);}
.ed-syn{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);overflow:hidden;}
.ed-syn .syn-top{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);background:var(--surface-2);}
.ed-syn .syn-top .ttl{font-size:var(--t-lg);font-weight:600;}
.ed-syn .syn-body{padding:var(--s4);}
.syn-steps{display:flex;justify-content:space-between;font-size:var(--t-sm);color:var(--text-subtle);margin-top:var(--s1);}
.syn-steps .st{flex:1;text-align:center;}
.syn-steps .st.on{color:var(--warn);font-weight:600;}
.syn-steps .st.ok{color:var(--ok);}
.syn-steps .st small{display:block;font-size:var(--t-xs);color:var(--text-subtle);font-weight:400;}
.syn-arts{margin-top:var(--s4);}
.syn-arts h4{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--text-subtle);font-weight:600;margin-bottom:var(--s1);}
a.art-line{color:var(--text);text-decoration:none;cursor:pointer;padding:var(--s2) var(--s1);border-radius:var(--r-sm);transition:background var(--dur) var(--ease-out);}
a.art-line:hover{background:var(--brand-bg);}
a.art-line:hover .chev{color:var(--brand);}
.syn-foot{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line);flex-wrap:wrap;}

/* — Saisie de l'édition (formulaire + aperçu en direct) — */
.se-frame{display:flex;align-items:stretch;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;}
.se-form{flex:1.05;min-width:0;padding:var(--s4) var(--s5);border-right:1px solid var(--line);max-height:760px;overflow:auto;}
.se-preview{flex:1;min-width:0;padding:var(--s4);background:var(--surface-2);display:flex;flex-direction:column;}
.se-frame.full .se-form{display:none;}
.se-frame.full .se-preview{border-right:0;}
.se-sep{display:flex;align-items:center;gap:var(--s2);margin:var(--s5) 0 var(--s2);font-size:var(--t-xs);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-subtle);}
.se-sep::after{content:"";flex:1;height:1px;background:var(--line);}
.se-sep i{font-size:17px;color:var(--brand);}
.se-block{margin-bottom:var(--s2);}
.fr{display:flex;flex-direction:column;gap:var(--s1);padding:var(--s3) 0;border-bottom:1px solid var(--line);}
.fr:last-child{border-bottom:0;}
.fr label{color:var(--text);font-size:var(--t-md);font-weight:500;}
.fr label small{display:block;color:var(--text-subtle);font-size:var(--t-sm);font-weight:400;}
.in{width:100%;border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:var(--s2) var(--s3);font-size:var(--t-md);font-family:inherit;color:var(--text);background:var(--surface);
  transition:border-color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out);}
.in:hover{border-color:var(--text-subtle);}
.in:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-bg);}
textarea.in{resize:vertical;min-height:62px;line-height:1.5;}
.se-search{position:relative;margin-bottom:var(--s3);}
.se-search > i{position:absolute;left:var(--s3);top:11px;color:var(--text-subtle);font-size:17px;pointer-events:none;}
.se-search .in{padding-left:36px;}
.se-sugg{position:absolute;top:42px;left:0;right:0;background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-md);box-shadow:var(--sh-3);z-index:30;max-height:250px;overflow:auto;display:none;}
.se-sugg.on{display:block;}
.se-sugg .sg{display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);cursor:pointer;font-size:var(--t-md);border-bottom:1px solid var(--line);}
.se-sugg .sg:last-child{border-bottom:0;}
.se-sugg .sg:hover{background:var(--brand-bg);}
.se-none{padding:var(--s3);color:var(--text-subtle);font-size:var(--t-sm);}
.se-arts{display:flex;flex-direction:column;gap:var(--s2);}
.se-art{display:flex;align-items:center;gap:var(--s2);border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s2) var(--s3);font-size:var(--t-md);background:var(--surface);}
.se-art .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
.se-art .cat{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--text-subtle);margin-left:auto;white-space:nowrap;font-weight:600;}
.se-art .rm{border:0;background:none;color:var(--text-subtle);cursor:pointer;font-size:16px;line-height:1;padding:0 2px;flex-shrink:0;font-family:inherit;}
.se-art .rm:hover{color:var(--err);}
.se-art .grip{color:var(--text-subtle);cursor:grab;font-size:17px;flex-shrink:0;margin-right:-2px;}
.se-art:active .grip{cursor:grabbing;}
.se-art.dragging{opacity:.4;}
.se-art.drop-before{box-shadow:inset 0 3px 0 var(--brand);}
.se-art.drop-after{box-shadow:inset 0 -3px 0 var(--brand);}
.se-empty{font-size:var(--t-sm);color:var(--text-subtle);border:1px dashed var(--line-strong);border-radius:var(--r-md);padding:var(--s4);text-align:center;}
.pv-bar{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3);}
.pv-url{flex:1;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:3px var(--s2);font-family:var(--mono);font-size:var(--t-xs);color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Aperçu rendu avec le vrai gabarit : isolé dans une iframe (styles du gabarit). */
.pv-frame{flex:1;width:100%;min-height:520px;border:1px solid var(--line-strong);border-radius:var(--r-md);background:#fff;display:block;}

/* — Palette des blocs pédagogiques de la charte (saisie d'article) — */
.peda{padding:var(--s3) 0;}
.peda-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:var(--s2);}
.peda-c{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s1);
  padding:var(--s3) var(--s2);border:1px solid var(--line);border-radius:var(--r-md);
  font-family:inherit;font-size:var(--t-xs);font-weight:600;line-height:1.25;text-align:center;
  cursor:pointer;transition:box-shadow var(--dur) var(--ease-out),transform var(--dur) var(--ease-out);
}
.peda-c:hover{box-shadow:var(--sh-2);transform:translateY(-1px);}
.peda-c:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
.peda-c.on{box-shadow:0 0 0 2px var(--brand);}
.peda-c .ico{font-size:19px;line-height:1;}
.peda-pv-wrap{margin-top:var(--s3);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--surface);}
.peda-pv-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  padding:var(--s2) var(--s3);background:var(--surface-2);border-bottom:1px solid var(--line);
  font-size:var(--t-xs);color:var(--text-subtle);
}
.peda-pv-head b{color:var(--text);font-size:var(--t-sm);font-weight:600;}
/* Aperçu du bloc rendu avec la feuille de styles du gabarit : iframe, comme le reste.
   Rendu à la largeur réelle de la page puis réduit — sinon le point de rupture
   mobile de la charte s'applique et montre en une colonne ce qui en fera deux. */
.peda-pv-box{position:relative;overflow:hidden;background:#fff;}
.peda-pv{width:720px;height:160px;border:0;display:block;background:#fff;transform-origin:top left;}

/* ═══════════════════════════════════════════════════════════════════════
   7. RESPONSIVE — 640 / 768 / 1024
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:1024px){
  .frame{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);}
  .side{grid-column:1;grid-row:1;flex-direction:row;align-items:center;gap:var(--s1);
        width:auto;overflow-x:auto;border-right:0;border-bottom:1px solid var(--line);padding:var(--s2) var(--s3);}
  .logo{display:none;}
  .ni{white-space:nowrap;padding:var(--s2);}
  .ni.on::before{display:none;}
  .ni.foot{margin-top:0;}
  .topbar{grid-column:1;grid-row:2;padding:0 var(--s4);}
  .main{grid-column:1;grid-row:3;padding:var(--s4);}
}
@media (max-width:768px){
  .phead{flex-direction:column;align-items:stretch;}
  .phead-act,.phead-act .btn{width:100%;}
  .tb-search{min-width:0;}
  .tb-search kbd{display:none;}
  .acc-head{flex-wrap:wrap;}
  .acc-head .stats{margin-left:0;width:100%;gap:var(--s3);}
  .panel:has(>table){overflow-x:auto;}
  .panel>table{min-width:640px;}
  .pv-cols{flex-direction:column;}
  .pane,.pv-left{max-width:none;border-right:0;}
  .se-frame{flex-direction:column;}
  .se-form{border-right:0;border-bottom:1px solid var(--line);}
}
@media (max-width:640px){
  .btn,.input,select.input{height:44px;}
  .icon-btn{width:44px;height:44px;}
  .ni{min-height:44px;}
  .metrics{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));}
}

/* ███████████████████████████████████████████████████████████████████████
   PARTIE B — Les composants propres à l'espace cabinet

   Tout le reste (tokens, coquille, boutons, panneaux, badges, tableaux,
   graphiques, états vides, mode sombre) vient de la partie A. Ces règles
   viennent après elle, et n'ont de sens qu'avec elle.
   ███████████████████████████████████████████████████████████████████████ */
/* — Contexte cabinet en topbar, à la place de la recherche globale — */
.tb-ctx{display:flex;align-items:center;gap:var(--s2);margin-right:auto;min-width:0;}
.tb-ctx b{font-size:var(--t-md);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.topbar>.avatar{margin-right:0;margin-left:var(--s1);}
.ni .cnt{margin-left:auto;background:var(--warn-bg);color:var(--warn);border-radius:var(--r-full);padding:1px var(--s2);font-size:var(--t-xs);font-weight:600;}

/* — 1. Jauge de destinataires : deux segments — ce qui est déjà facturé, puis
   le dépassement en cours. L'échelle totale est la limite qui s'appliquerait
   après ajout du pack suivant ; le repère marque la limite de la dernière
   facture. Les largeurs sont des données chiffrées, d'où le style en ligne. — */
.quota{display:flex;flex-direction:column;gap:var(--s1);}
.q-top{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);font-size:var(--t-md);flex-wrap:wrap;}
.q-top b{font-variant-numeric:tabular-nums;font-size:var(--t-lg);font-weight:600;}
.q-top .q-max{color:var(--text-muted);font-size:var(--t-sm);}
.qbar{position:relative;display:flex;height:8px;border-radius:var(--r-full);background:var(--line);overflow:hidden;}
.qfill{height:100%;background:var(--ok-fill);}
.qfill.warn{background:var(--warn-fill);}
.qfill.err{background:var(--err-fill);}
.qfill.over{background:var(--warn-fill);}
.q-mark{position:absolute;top:0;bottom:0;width:2px;background:var(--text);opacity:.55;}
.q-scale{display:flex;justify-content:space-between;gap:var(--s3);font-size:var(--t-xs);color:var(--text-subtle);font-variant-numeric:tabular-nums;}
.q-hint{font-size:var(--t-sm);color:var(--text-subtle);}

/* — 2. Carte d'article (écran « Ma sélection »)
   Deux actions sur une même carte, séparées par la géométrie et non par une
   règle invisible : la pastille coche, tout le reste ouvre l'article. La
   pastille est donc une vraie cible cliquable, plus large que son carré. — */
.acard .pick{display:flex;align-items:flex-start;gap:var(--s2);}
.acard input[type=checkbox]{position:absolute;opacity:0;pointer-events:none;}
.pick-lab{
  display:inline-flex;align-items:center;flex-shrink:0;cursor:pointer;
  padding:var(--s2);margin:calc(var(--s2) * -1);border-radius:var(--r-sm);
  transition:background var(--dur) var(--ease-out);
}
.pick-lab:hover{background:var(--surface-3);}
.pick-lab:focus-within{outline:2px solid var(--brand);outline-offset:-2px;}
.pick-box{
  width:20px;height:20px;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  background:var(--surface);color:transparent;font-size:15px;
}
/* Le corps de la carte est un bouton : la lecture est atteignable au clavier
   comme à la souris, sans dépendre de la délégation de clic. */
.open-art{
  flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--s1);text-align:left;
  background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;
}
.open-art:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:2px;}
.acard.sel{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand);}
.acard.sel .pick-box{background:var(--brand);border-color:var(--brand);color:var(--brand-fg);}
.acard .lire{display:inline-flex;align-items:center;gap:var(--s1);color:var(--brand);font-weight:600;}
.acard .retenu{display:inline-flex;align-items:center;gap:var(--s1);color:var(--ok);font-weight:600;}

/* — 2 bis. Popup d'article : le rendu exact de la page internet, isolé dans
   une iframe — les deux chartes ne se mélangent pas et le script du
   simulateur s'exécute vraiment. La hauteur est dictée par le document. — */
dialog.modal.artmodal{width:860px;}
.am-head{
  display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s3) var(--s3) var(--s4);
  border-bottom:1px solid var(--line);font-size:var(--t-sm);color:var(--text-subtle);
}
.am-close{
  margin-left:auto;background:none;border:0;padding:var(--s1);border-radius:var(--r-sm);
  color:var(--text-muted);cursor:pointer;font-size:19px;display:inline-flex;
}
.am-close:hover{background:var(--surface-3);color:var(--text);}
.am-body{max-height:68vh;overflow:auto;background:var(--surface-2);}
.am-body iframe{display:block;width:100%;height:280px;border:0;background:#fff;}
.am-foot{
  display:flex;align-items:center;gap:var(--s2);padding:var(--s3) var(--s4);
  border-top:1px solid var(--line);background:var(--surface-2);
}
.am-foot .am-act{margin-left:auto;display:flex;gap:var(--s2);}

/* — 3. Barre d'action collée en bas de l'écran de sélection — */
.actionbar{
  position:sticky;bottom:0;display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  margin-top:var(--s4);padding:var(--s3) var(--s4);background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-2);
}
.actionbar .ab-info{font-size:var(--t-md);color:var(--text-muted);}
.actionbar .ab-act{margin-left:auto;display:flex;gap:var(--s2);flex-wrap:wrap;}

/* — 4. Cartes de formule — */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s3);}
.plan-c{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s4);background:var(--surface);display:flex;flex-direction:column;gap:var(--s2);}
.plan-c.cur{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand);}
.plan-c .p-name{font-weight:600;font-size:var(--t-lg);display:flex;align-items:center;gap:var(--s2);}
.plan-c .p-price{font-size:var(--t-2xl);font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.plan-c .p-price small{font-size:var(--t-sm);font-weight:400;color:var(--text-muted);}
.plan-c ul{list-style:none;display:flex;flex-direction:column;gap:var(--s1);font-size:var(--t-md);color:var(--text-muted);margin:var(--s1) 0;}
.plan-c li{display:flex;gap:var(--s2);align-items:flex-start;}
.plan-c li i{font-size:17px;color:var(--ok);flex-shrink:0;}
.plan-c li.no i{color:var(--text-subtle);}
.plan-c .btn,.plan-c form{margin-top:auto;}
.plan-c form .btn{width:100%;justify-content:center;}

/* — 5. Boîte de dialogue : récapitulatif chiffré avant toute action
   irréversible. Le verbe du bouton reprend celui de la question. — */
dialog.modal{
  width:480px;max-width:calc(100% - var(--s5));padding:0;border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--sh-3);background:var(--surface);color:var(--text);
}
/* Ouvert par showModal() : le reset global (*{margin:0}) écrase le `margin:auto`
   du navigateur et colle la boîte dans le coin haut gauche — on le rétablit,
   sans toucher aux dialogues posés dans le flux de la page (attribut `open`). */
dialog.modal:modal{margin:auto;}
dialog.modal::backdrop{background:rgba(26,26,23,.45);}
.modal-head{display:flex;align-items:center;gap:var(--s2);padding:var(--s4) var(--s4) var(--s2);font-size:var(--t-lg);font-weight:600;}
.modal-body{padding:0 var(--s4) var(--s4);font-size:var(--t-md);color:var(--text-muted);}
.modal-foot{display:flex;justify-content:flex-end;gap:var(--s2);padding:var(--s3) var(--s4);border-top:1px solid var(--line);background:var(--surface-2);}

/* — Cycle mensuel (accueil : le parcours en cinq temps) — */
.cycle{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--s3);}
.cy{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s3);background:var(--surface);display:flex;flex-direction:column;gap:var(--s1);}
.cy .d{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.05em;font-weight:600;color:var(--text-subtle);}
.cy .w{font-weight:600;font-size:var(--t-md);}
.cy .who{font-size:var(--t-sm);color:var(--text-muted);}
.cy.you{border-color:var(--brand-line);background:var(--brand-bg);}
.cy.you .d,.cy.you .who{color:var(--brand);}

/* — Dépôt de fichier (logo, CSV) — */
.drop{
  border:1px dashed var(--line-strong);border-radius:var(--r-md);padding:var(--s5);
  display:flex;flex-direction:column;align-items:center;gap:var(--s2);text-align:center;
  color:var(--text-muted);background:var(--surface-2);max-width:520px;font-size:var(--t-md);
  cursor:pointer;transition:border-color var(--dur) var(--ease-out),background var(--dur) var(--ease-out);
}
.drop:hover,.drop.over{border-color:var(--brand);background:var(--brand-bg);}
.drop i{font-size:26px;color:var(--text-subtle);}
.drop .hint{font-size:var(--t-sm);color:var(--text-subtle);}
.drop input[type=file]{position:absolute;width:1px;height:1px;opacity:0;}
.logo-prev{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;}
.logo-box{
  width:132px;height:56px;border:1px solid var(--line);border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;background:var(--surface);
  font-weight:600;color:var(--text-muted);font-size:var(--t-sm);flex-shrink:0;overflow:hidden;
}
.logo-box img{max-width:100%;max-height:100%;object-fit:contain;}

/* — Choix de couleur : la valeur est une donnée du cabinet, pas un token — */
.colors{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center;}
.color{width:32px;height:32px;border-radius:var(--r-sm);border:1px solid var(--line-strong);cursor:pointer;padding:0;}
.color.on{box-shadow:0 0 0 2px var(--brand);}

/* — Écran Personnalisation : réglages à gauche, aperçu en direct à droite.
   Même schéma que la saisie d'édition du backoffice — un cabinet ne doit jamais
   avoir à imaginer le résultat d'un réglage, et il doit voir les deux supports. — */
.cfg-frame{display:flex;align-items:stretch;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;}
.cfg-form{flex:1.05;min-width:0;padding:var(--s4) var(--s5);border-right:1px solid var(--line);max-height:780px;overflow:auto;}
.cfg-preview{flex:1;min-width:0;padding:var(--s4);background:var(--surface-2);display:flex;flex-direction:column;}
.cfg-sep{display:flex;align-items:center;gap:var(--s2);margin:var(--s5) 0 var(--s2);font-size:var(--t-xs);font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-subtle);}
.cfg-sep:first-child{margin-top:0;}
.cfg-sep::after{content:"";flex:1;height:1px;background:var(--line);}
.cfg-sep i{font-size:17px;color:var(--brand);}
.cfg-preview .tab{user-select:none;}

/* — Choix visuel (modèle, typographie, appel à l'action) : le cabinet choisit,
   il ne rédige jamais. Une option = une carte cliquable, jamais un champ vide.
   La carte porte le bouton radio : le choix reste atteignable au clavier et le
   formulaire fonctionne même si le script ne s'exécute pas. — */
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:var(--s2);}
.opt{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s3);background:var(--surface);
     cursor:pointer;display:flex;flex-direction:column;gap:var(--s2);text-align:left;font-family:inherit;}
.opt:hover{border-color:var(--text-subtle);}
.opt.on,.opt:has(input:checked){border-color:var(--brand);box-shadow:0 0 0 1px var(--brand);}
.opt:focus-within{outline:2px solid var(--brand);outline-offset:2px;}
.opt input{position:absolute;opacity:0;pointer-events:none;}
.opt .o-name{font-size:var(--t-md);font-weight:600;display:flex;align-items:center;gap:var(--s2);}
.opt .o-name i{font-size:17px;color:var(--text-subtle);}
.opt.on .o-name i,.opt:has(input:checked) .o-name i{color:var(--brand);}
.opt .o-desc{font-size:var(--t-sm);color:var(--text-muted);line-height:1.45;}
/* Vignette schématique d'un modèle : les barres figurent les blocs de la mise en page. */
.o-thumb{height:52px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);padding:6px;display:flex;flex-direction:column;gap:4px;}
.o-thumb .b{background:var(--line-strong);border-radius:2px;height:5px;}
.o-thumb .b.hd{height:13px;background:var(--text-subtle);}
.o-thumb .b.sm{width:60%;}
.o-thumb.two{flex-direction:row;gap:5px;}
.o-thumb.two .col{flex:1;display:flex;flex-direction:column;gap:4px;}

/* — Signataire : le seul endroit où la lettre porte un visage — */
.sig-row{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;}
.sig-photo{width:56px;height:56px;border-radius:50%;background:var(--brand-bg);color:var(--brand);
           display:flex;align-items:center;justify-content:center;font-size:var(--t-lg);font-weight:600;
           flex-shrink:0;border:1px solid var(--line);overflow:hidden;}
.sig-photo img{width:100%;height:100%;object-fit:cover;}

/* — Aperçu email de la personnalisation : toujours rendu en clair, quel que
   soit le thème, comme une vraie boîte de réception. La couleur de marque du
   cabinet est une donnée saisie : elle s'écrit en style en ligne. — */
.device.light{
  --surface:#ffffff; --surface-2:#faf9f5; --surface-3:#f5f4ef;
  --line:#e5e3db; --line-strong:#d3cfc4;
  --text:#1a1a17; --text-muted:#5c584f; --text-subtle:#767268;
  background:#fff;color:#1a1a17;
}
.nl-head{padding:var(--s4);color:#fff;}
.nl-head .cab{font-weight:600;font-size:var(--t-lg);letter-spacing:.02em;}
.nl-head .cab img{max-height:38px;max-width:190px;display:block;}
.nl-head .ed{font-size:var(--t-sm);opacity:.85;}
.nl-art{padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);}
.nl-art .cat{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.05em;font-weight:600;}
.nl-art .t{font-size:var(--t-md);font-weight:600;line-height:1.4;}
.nl-art .x{font-size:var(--t-sm);color:var(--text-muted);}
.nl-art a{font-size:var(--t-sm);font-weight:600;text-decoration:none;}
.nl-foot{padding:var(--s3) var(--s4);font-size:var(--t-xs);color:var(--text-subtle);text-align:center;}
/* Blocs d'aperçu propres à la personnalisation : signature, bouton, sommaire. */
.nl-sig{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);}
.nl-sig .ph{width:40px;height:40px;border-radius:50%;color:#fff;flex-shrink:0;overflow:hidden;
            display:flex;align-items:center;justify-content:center;font-size:var(--t-sm);font-weight:600;}
.nl-sig .ph img{width:100%;height:100%;object-fit:cover;}
.nl-sig .x{font-size:var(--t-xs);color:var(--text-muted);}
.nl-sig .n{font-size:var(--t-sm);font-weight:600;}
.nl-sig .f{font-size:var(--t-xs);color:var(--text-muted);}
.nl-cta{margin:var(--s3) var(--s4);padding:var(--s3);border-radius:var(--r-sm);color:#fff;
        text-align:center;font-size:var(--t-sm);font-weight:600;}
.nl-toc{padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:var(--s1);}
.nl-toc .k{font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--text-subtle);font-weight:600;margin-bottom:2px;}
.nl-toc .l{font-size:var(--t-sm);font-weight:500;}
/* Typographie de l'édition : donnée choisie par le cabinet, d'où les familles brutes. */
.device.serif .nl-head .cab,.device.serif .nl-art .t,.device.serif .nl-toc .l{font-family:Georgia,"Times New Roman",serif;}

/* — Menu d'actions d'une ligne de tableau — */
.rowmenu{position:relative;display:inline-block;}
.rowmenu>summary{
  list-style:none;display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:var(--r-sm);color:var(--text-muted);cursor:pointer;
}
.rowmenu>summary::-webkit-details-marker{display:none;}
.rowmenu>summary:hover{background:var(--surface-3);color:var(--text);}
.rowmenu .menu{
  position:absolute;right:0;top:34px;z-index:5;min-width:250px;padding:var(--s1);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-3);display:flex;flex-direction:column;gap:1px;text-align:left;
}
.rowmenu .menu a,.rowmenu .menu button{
  display:flex;align-items:center;gap:var(--s2);padding:var(--s2) var(--s3);border:0;
  border-radius:var(--r-sm);background:transparent;color:var(--text);font-size:var(--t-md);
  text-decoration:none;cursor:pointer;white-space:nowrap;text-align:left;width:100%;
}
.rowmenu .menu a:hover,.rowmenu .menu button:hover{background:var(--surface-3);}
.rowmenu .menu .danger{color:var(--err);}

/* — Notification ponctuelle — */
.toast{
  position:fixed;right:var(--s5);bottom:var(--s5);z-index:40;
  display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:var(--r-md);box-shadow:var(--sh-3);font-size:var(--t-md);max-width:420px;
}
.toast.ok{border-left-color:var(--ok-fill);}
.toast.err{border-left-color:var(--err-fill);}
.toast i{font-size:18px;}
.toast .t-act{margin-left:auto;color:var(--brand);font-weight:600;white-space:nowrap;}

/* — Contenu pleine largeur dans la coquille : l'écran garde son menu, mais la
   visionneuse va d'un bord à l'autre, sans gouttière ni largeur maximale. — */
.main.flush{padding:0;}
.main.flush .wrap{max-width:none;}
.main.flush .wrap>.msg{margin:var(--s4) var(--s5) 0;}

.legend sup,.q-hint sup,.kv sup{font-size:.7em;vertical-align:super;}
@media (max-width:768px){
  .actionbar{flex-direction:column;align-items:stretch;}
  .actionbar .ab-act{margin-left:0;}
  .actionbar .ab-act .btn{flex:1;}
  .toast{right:var(--s4);left:var(--s4);bottom:var(--s4);max-width:none;}
  /* Personnalisation : les réglages passent au-dessus de l'aperçu, qui reste
     visible en faisant défiler — l'ordre du parcours est conservé. */
  .cfg-frame{flex-direction:column;}
  .cfg-form{border-right:0;border-bottom:1px solid var(--line);max-height:none;overflow:visible;}
}