/* Style « Acier » du Conseil de guerre : clair et sombre, barre latérale, composants communs.
   Chargé par toutes les pages (servi sur /commun/theme.css?v=d17b0ce656). Les anciennes palettes des pages (bois, parchemin, laiton…)
   sont redirigées vers ces jetons : html:root l'emporte sur les :root des pages, quel que soit l'ordre de chargement.
   Les règles de composants sont préfixées par body.cg (posé par /commun/cadre.js?v=d17b0ce656) pour l'emporter sur les anciens habillages. */

html:root{
  color-scheme:light;
  --c-fond:#f5f7fa;--c-panneau:#ffffff;--c-panneau2:#f8fafc;--c-survol:#f1f5f9;
  --c-filet:#e3e8ef;--c-filet2:#cbd5e1;--c-champ-fond:#ffffff;
  --c-texte:#0f172a;--c-texte2:#334155;--c-gris:#64748b;--c-pale:#94a3b8;
  --c-accent:#2f5bd3;--c-accent2:#2549b3;--c-accent-pale:#eef3fe;--c-accent-texte:#1e40af;--c-sur-accent:#ffffff;
  --c-succes:#1f7a4a;--c-succes-pale:#e8f6ee;--c-alerte:#a15c07;--c-alerte-pale:#fdf3e1;
  --c-danger:#b4332b;--c-danger-pale:#fdeceb;--c-violet:#6d4bc9;--c-violet-pale:#f1ecfd;--c-info:#0e7490;--c-info-pale:#e0f2f7;
  --c-lateral:#ffffff;--c-lateral-actif:#eef3fe;
  --c-ombre:0 1px 2px rgba(15,23,42,.04),0 1px 3px rgba(15,23,42,.06);--c-ombre-haute:0 12px 32px rgba(15,23,42,.14);
  --c-rayon:8px;--c-focus:0 0 0 3px rgba(47,91,211,.22);
  --c-police:Inter,"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,sans-serif;
  --c-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  /* anciennes palettes → Acier */
  --fond:var(--c-fond);--carte:var(--c-panneau);--encre:var(--c-texte);--doux:var(--c-gris);--pale:var(--c-pale);
  --trait:var(--c-filet);--trait2:var(--c-filet);--champ:var(--c-filet2);--survol:var(--c-survol);
  --vert:var(--c-accent);--vert2:var(--c-accent2);--vertf:var(--c-accent-pale);
  --ambre:var(--c-alerte);--ambref:var(--c-alerte-pale);--rouge:var(--c-danger);--rougef:var(--c-danger-pale);
  --bleu:var(--c-info);--bleuf:var(--c-info-pale);--violet:var(--c-violet);--violetf:var(--c-violet-pale);
  --bois:var(--c-texte);--bois2:var(--c-texte2);--bois3:var(--c-gris);--laiton:var(--c-filet2);
  --olive:var(--c-accent);--olive2:var(--c-accent2);--parchemin:var(--c-panneau);--parchemin2:var(--c-panneau2);
  --tete:var(--c-panneau);--rayon:var(--c-rayon);--ombre:var(--c-ombre);
  --attaque:var(--c-danger);--attaquef:var(--c-danger-pale);--defense:var(--c-info);--defensef:var(--c-info-pale);
  --ink:var(--c-texte);--ink-2:var(--c-texte2);--ink-3:var(--c-gris);--line:var(--c-filet);--line-2:var(--c-filet2);
  --accent:var(--c-accent);--accent-ink:var(--c-accent-texte);--accent-soft:var(--c-accent-pale);--on-accent:var(--c-sur-accent);
  --warn:var(--c-alerte);--warn-soft:var(--c-alerte-pale);--crit:var(--c-danger);--crit-soft:var(--c-danger-pale);
  --ok:var(--c-succes);--ok-soft:var(--c-succes-pale);
  --sunk:var(--c-panneau2);--surface:var(--c-panneau);--surface-2:var(--c-panneau2);--paper:var(--c-fond);--shadow:var(--c-ombre);--r:var(--c-rayon);
}
html:root[data-theme="sombre"]{
  color-scheme:dark;
  --c-fond:#0b1120;--c-panneau:#111827;--c-panneau2:#0f172a;--c-survol:#172033;
  --c-filet:#1f2a3a;--c-filet2:#334155;--c-champ-fond:#0f172a;
  --c-texte:#e5e9f0;--c-texte2:#cbd5e1;--c-gris:#94a3b8;--c-pale:#64748b;
  --c-accent:#5b85f0;--c-accent2:#7c9ff5;--c-accent-pale:#172444;--c-accent-texte:#a9c1fb;--c-sur-accent:#0b1120;
  --c-succes:#4ade80;--c-succes-pale:#0f2a1c;--c-alerte:#fbbf24;--c-alerte-pale:#2b2008;
  --c-danger:#f87171;--c-danger-pale:#2d1515;--c-violet:#a78bfa;--c-violet-pale:#221a3b;--c-info:#22d3ee;--c-info-pale:#0b2a33;
  --c-lateral:#0f172a;--c-lateral-actif:#172444;
  --c-ombre:0 1px 2px rgba(0,0,0,.3);--c-ombre-haute:0 16px 40px rgba(0,0,0,.5);--c-focus:0 0 0 3px rgba(91,133,240,.3);
}

/* ---------- page ---------- */
html body.cg{margin:0;padding:0;background:var(--c-fond);background-image:none;color:var(--c-texte);font-family:var(--c-police);font-size:14.5px;line-height:1.5;
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh}
body.cg h1,body.cg h2,body.cg h3{font-family:var(--c-police);letter-spacing:-.01em;color:var(--c-texte)}
body.cg h2{font-size:15.5px;font-weight:600}
body.cg h3{font-size:14px;font-weight:600;color:var(--c-texte2)}
body.cg a{color:var(--c-accent)}
body.cg ::selection{background:var(--c-accent-pale)}
body.cg code,body.cg kbd{font-family:var(--c-mono);font-size:12.5px}

/* ---------- fond de page : l'illustration peinte de l'outil, très estompée, couvrant la zone de contenu, derrière tout ---------- */
.cg-filigrane{position:fixed;z-index:-1;top:0;right:0;bottom:0;left:248px;pointer-events:none;background:var(--filigrane) center/cover no-repeat;opacity:.14}
html:root[data-theme="sombre"] .cg-filigrane{opacity:.16}
@media (max-width:900px){.cg-filigrane{left:0}}
.cg-filigrane.par-defaut{display:none}

/* ---------- 3e thème « Épique » : le thème sombre (theme.js pose aussi data-theme="sombre"), avec l'illustration de la page
   en pleines couleurs, derrière tout l'écran, et des panneaux en verre dépoli bleu nuit qui la floutent ---------- */
html:root[data-epique]{
  background:#0b1120;
  --c-fond:rgba(11,17,32,.35);--c-panneau:rgba(15,23,42,.68);--c-panneau2:rgba(2,6,23,.42);--c-survol:rgba(148,163,184,.13);
  --c-filet:rgba(148,163,184,.2);--c-filet2:rgba(148,163,184,.34);--c-champ-fond:rgba(2,6,23,.55);
  --c-lateral:rgba(11,17,32,.72);--c-lateral-actif:rgba(91,133,240,.24);--c-accent-pale:rgba(91,133,240,.2);
  --c-texte2:#dbe3ee;--c-gris:#a9b6c8;--c-pale:#8b9ab0;
  --c-ombre:0 1px 2px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.22);
}
html:root[data-epique] body.cg{background:transparent}
html:root[data-epique] .cg-filigrane,html:root[data-epique] .cg-filigrane.par-defaut{display:block;left:0;opacity:1;
  background:linear-gradient(180deg,rgba(11,17,32,.18),rgba(11,17,32,.5)),var(--filigrane) center/cover no-repeat}
/* verre dépoli : les grands panneaux floutent l'illustration derrière eux */
html:root[data-epique] body.cg :is(.cadre-lateral,section.carte,.carte-cg,details.plus,details.cg-reglages,.panel,.cg-collage,.import-jeu,.kpi,.bloc,.tile,.tuile-rubrique,.tuile-formule,.tuile-calcul,.rubrique,.outil,.page section,.tscroll,.etape,.scenario,.groupe,.equipe,.editeur,.graphe,.rapport,.cv,.parchemin){backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15)}
/* bandeaux collants (en-tête, onglets, pied des étapes) : un verre plus sombre, lisible sur un ciel clair */
html:root[data-epique] body.cg :is(.cadre-contenu>header,.cg-onglets,.pied-etapes){background:rgba(11,17,32,.58);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
/* fenêtres, menus et messages : pleins, ils passent par-dessus le contenu */
html:root[data-epique] :is(dialog,.cg-menu,.suggestions,.cg-message,.ct-fenetre,.cg-volet,.cg-palette,.cadre-mobile){
  --c-fond:#0b1120;--c-panneau:#111827;--c-panneau2:#0f172a;--c-survol:#172033;--c-champ-fond:#0f172a;--c-filet:#1f2a3a;--c-filet2:#334155}
@media print{.cg-filigrane{display:none}}

/* ---------- barre latérale ---------- */
.cadre-lateral{position:sticky;top:0;height:100vh;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding:16px 12px;background:var(--c-lateral);border-right:1px solid var(--c-filet);box-sizing:border-box}
.cadre-marque{display:flex;align-items:center;gap:10px;padding:4px 8px 14px;color:var(--c-texte)!important;text-decoration:none;font-weight:650;font-size:15px;letter-spacing:-.01em}
.cadre-logo{width:28px;height:28px;border-radius:7px;background:var(--c-accent);color:var(--c-sur-accent);display:grid;place-items:center;flex:none}
.cadre-logo svg{width:17px;height:17px}
html body.cg .cadre-lateral .cadre-nav{display:flex;flex-direction:column;flex-wrap:nowrap;gap:1px;padding:0;margin:0;background:transparent;border:0;border-radius:0;box-shadow:none;width:auto;overflow:visible}
.cadre-espaces{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px;margin:0 2px 6px;border-radius:9px;background:var(--c-survol);border:1px solid var(--c-filet)}
.cadre-espaces a{text-align:center;font-size:13px;font-weight:600;padding:6px 4px;border-radius:7px;color:var(--c-gris)!important;text-decoration:none}
.cadre-espaces a:hover{color:var(--c-texte)!important}
.cadre-espaces a.actif{background:var(--c-panneau);box-shadow:var(--c-ombre)}
.cadre-espaces a.actif[data-espace=jeu]{color:var(--c-accent-texte)!important}
.cadre-espaces a.actif[data-espace=alliance]{color:var(--c-violet)!important}
.cadre-choix-groupe{display:flex;flex-direction:column;gap:3px;padding:2px 4px 6px;font-size:12px;color:var(--c-gris)}
.cadre-choix-groupe label{font-weight:600;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--c-pale)}
html body.cg .cadre-choix-groupe select{width:100%;font-size:13px;padding:5px 7px;border-radius:7px}
.cadre-lateral[data-espace=alliance] .cadre-lien.actif{background:var(--c-violet-pale);color:var(--c-violet)!important}
.cadre-lateral[data-espace=alliance] .cadre-lien.actif svg{color:var(--c-violet)}
html body.cg .cadre-intro{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:0 0 4px;font-size:13.5px;color:var(--c-gris);line-height:1.45}
.cadre-etiquette{display:inline-block;padding:1px 9px;border-radius:999px;font-size:11.5px;font-weight:650;letter-spacing:.02em;background:var(--c-accent-pale);color:var(--c-accent-texte);white-space:nowrap}
.cadre-intro[data-espace=alliance] .cadre-etiquette{background:var(--c-violet-pale);color:var(--c-violet)}
.cadre-but{color:var(--c-texte2)}
.cadre-lies{white-space:nowrap}
.cadre-groupe{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--c-pale);padding:14px 10px 5px}
/* rubriques de « Mon jeu » : le nom ouvre la page de la rubrique, la flèche déplie ses outils */
.cadre-rubrique{display:flex;align-items:center;gap:2px;margin-top:10px}
html body.cg .cadre-rubrique-lien{flex:1;min-width:0;font-size:11.5px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--c-gris)!important;text-decoration:none;padding:7px 10px;border-radius:7px}
html body.cg .cadre-rubrique-lien:hover{background:var(--c-survol);color:var(--c-texte)!important}
html body.cg .cadre-rubrique-lien.actif{background:var(--c-lateral-actif);color:var(--c-accent-texte)!important}
html body.cg .cadre-deplier{flex:none;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:0;background:transparent;border-radius:7px;color:var(--c-pale);cursor:pointer;padding:0;box-shadow:none}
html body.cg .cadre-deplier:hover{background:var(--c-survol);color:var(--c-texte)}
.cadre-deplier svg{width:15px;height:15px;transition:transform .15s}
.cadre-deplier[aria-expanded=true] svg{transform:rotate(90deg)}
.cadre-rubrique-outils{display:flex;flex-direction:column;gap:1px}
.cadre-rubrique-outils[hidden]{display:none}
.cadre-lien{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:7px;color:var(--c-texte2)!important;text-decoration:none;font-size:14px;line-height:1.3}
.cadre-lien svg{width:18px;height:18px;flex:none;color:var(--c-gris)}
.cadre-lien:hover{background:var(--c-survol);color:var(--c-texte)!important}
.cadre-lien.actif{background:var(--c-lateral-actif);color:var(--c-accent-texte)!important;font-weight:550}
.cadre-lien.actif svg{color:var(--c-accent)}
.cadre-lien .cadenas{margin-left:auto;font-size:11px;font-weight:600;color:var(--c-pale);display:inline-flex;gap:3px;align-items:center}
.cadre-lien .cadenas svg{width:12px;height:12px;color:var(--c-pale)}
.cadre-lien.verrou{color:var(--c-pale)!important}
.cadre-pied{margin-top:auto;display:flex;flex-direction:column;gap:2px;padding-top:12px;border-top:1px solid var(--c-filet)}
.cadre-compte{display:flex;flex-direction:column;gap:1px;padding:9px 10px;margin-bottom:6px;border:1px solid var(--c-filet);border-radius:8px;background:var(--c-panneau2);color:var(--c-texte)!important;text-decoration:none;font-size:13px}
.cadre-compte:hover{border-color:var(--c-filet2)}
.cadre-compte b{font-weight:600;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cadre-compte span{color:var(--c-gris);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cadre-actions{display:flex;gap:6px;padding:8px 2px 0;flex-wrap:wrap}
.cadre-actions button{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-size:12.5px;padding:6px 8px;border:1px solid var(--c-filet);border-radius:7px;background:var(--c-panneau);color:var(--c-texte2);cursor:pointer}
.cadre-actions button:hover{background:var(--c-survol)}
.cadre-actions svg{width:15px;height:15px}
.cadre-formule{font-size:12px;color:var(--c-gris);padding:4px 10px 0}
.cadre-formule b{color:var(--c-texte2);font-weight:600}
.cadre-mobile{display:none}
.cadre-voile{display:none}
.cadre-contenu{min-width:0;display:flex;flex-direction:column}

/* ---------- en-tête de page et contenu ---------- */
html body.cg .cadre-contenu>header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:10px 18px;flex-wrap:wrap;
  padding:12px 28px;background:color-mix(in srgb,var(--c-fond) 88%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:0;border-bottom:1px solid var(--c-filet);box-shadow:none;color:var(--c-texte)}
html body.cg .cadre-contenu>header h1{margin:0;font-size:19px;font-weight:650;letter-spacing:-.02em;color:var(--c-texte)}
html body.cg .cadre-contenu>header h1>a,html body.cg #retourOutils{display:none!important}
html body.cg .cadre-contenu>main{width:100%;max-width:1360px;margin:0 auto;padding:24px 28px 56px;box-sizing:border-box;background:transparent;background-image:none;border:0;border-radius:0;box-shadow:none}
html body.cg .horloge{color:var(--c-gris);font-size:13px}
html body.cg .horloge b{color:var(--c-texte);font-size:15px;font-weight:600;font-family:var(--c-mono)}
html body.cg nav[role=tablist]{display:flex;gap:2px;flex-wrap:wrap;background:var(--c-survol);border:1px solid var(--c-filet);padding:3px;border-radius:9px}
html body.cg nav[role=tablist] button,html body.cg nav[role=tablist] [role=tab]{font:inherit;font-size:13.5px;font-weight:500;padding:6px 12px;border-radius:7px;border:0;background:transparent;color:var(--c-gris);cursor:pointer;box-shadow:none}
html body.cg nav[role=tablist] button:hover,html body.cg nav[role=tablist] [role=tab]:hover{color:var(--c-texte);background:transparent}
html body.cg nav[role=tablist] [aria-selected=true]{background:var(--c-panneau);color:var(--c-texte);box-shadow:var(--c-ombre)}

/* ---------- cartes, textes ---------- */
html body.cg section.carte,html body.cg .carte-cg{background:var(--c-panneau);border:1px solid var(--c-filet);border-radius:10px;box-shadow:var(--c-ombre);padding:18px 20px}
html body.cg .aide{color:var(--c-gris);font-size:13px}
html body.cg label.champ{color:var(--c-texte2);font-size:13px;font-weight:500}

/* ---------- champs ---------- */
html body.cg input:not([type=checkbox]):not([type=radio]):not([type=range]),html body.cg select,html body.cg textarea{font-family:var(--c-police);font-size:14px;padding:7px 10px;border:1px solid var(--c-filet2);border-radius:7px;background:var(--c-champ-fond);color:var(--c-texte);box-shadow:none}
html body.cg input:not([type=checkbox]):not([type=radio]):not([type=range]):hover,html body.cg select:hover,html body.cg textarea:hover{border-color:var(--c-pale)}
html body.cg input:focus,html body.cg select:focus,html body.cg textarea:focus{outline:none;border-color:var(--c-accent);box-shadow:var(--c-focus)}
html body.cg textarea{font-family:var(--c-mono);font-size:12.5px}
html body.cg input[type=checkbox],html body.cg input[type=radio],html body.cg input[type=range]{accent-color:var(--c-accent)}
html body.cg button:focus-visible,html body.cg a:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}

/* ---------- boutons ---------- */
html body.cg .bouton,html body.cg .btn.primary{font-family:var(--c-police);font-size:14px;font-weight:550;padding:7px 14px;border-radius:7px;border:1px solid var(--c-accent);background:var(--c-accent);background-image:none;color:var(--c-sur-accent);box-shadow:var(--c-ombre);cursor:pointer;text-decoration:none}
html body.cg .bouton:hover{background:var(--c-accent2);border-color:var(--c-accent2)}
html body.cg .bouton.second,html body.cg .bouton.secondaire{background:var(--c-panneau);color:var(--c-texte2);border:1px solid var(--c-filet2);box-shadow:var(--c-ombre)}
html body.cg .bouton.second:hover,html body.cg .bouton.secondaire:hover{background:var(--c-survol);color:var(--c-texte)}
html body.cg .bouton.danger{background:var(--c-panneau);color:var(--c-danger);border:1px solid var(--c-filet2)}
html body.cg .bouton.danger:hover{background:var(--c-danger-pale);border-color:var(--c-danger)}
html body.cg .bouton:disabled{opacity:.5;cursor:default}
html body.cg .petit{font-family:var(--c-police);font-size:13px;padding:3px 9px;border:1px solid var(--c-filet2);border-radius:6px;background:var(--c-panneau);color:var(--c-texte2)}
html body.cg .petit:hover{background:var(--c-survol);color:var(--c-texte)}
html body.cg .petit.rouge{color:var(--c-danger)}
html body.cg .petit.envoyer{background:var(--c-accent);border-color:var(--c-accent);color:var(--c-sur-accent);font-weight:550}

/* ---------- messages, pastilles ---------- */
html body.cg .msg{border-radius:8px;border:1px solid transparent;font-size:13.5px}
html body.cg .msg.ok{background:var(--c-succes-pale);color:var(--c-succes);border-color:color-mix(in srgb,var(--c-succes) 22%,transparent)}
html body.cg .msg.att{background:var(--c-alerte-pale);color:var(--c-alerte);border-color:color-mix(in srgb,var(--c-alerte) 22%,transparent)}
html body.cg .msg.err{background:var(--c-danger-pale);color:var(--c-danger);border-color:color-mix(in srgb,var(--c-danger) 22%,transparent)}
html body.cg .conseil{background:var(--c-accent-pale);color:var(--c-accent-texte);border:1px solid color-mix(in srgb,var(--c-accent) 22%,transparent);border-radius:8px}
html body.cg .pastille{background:var(--c-accent-pale);color:var(--c-accent-texte)}
html body.cg .pastille.exclu{background:var(--c-danger-pale);color:var(--c-danger)}

/* ---------- filtres (moteur d'opérations, plan d'attaque) ---------- */
html body.cg .filtres{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border:1px solid var(--c-filet);border-radius:8px;background:var(--c-panneau2)}
html body.cg .filtre-ligne{display:flex;gap:6px 8px;align-items:center;flex-wrap:wrap}
html body.cg .filtre-titre{font-size:13px;font-weight:600;color:var(--c-gris);min-width:86px}
html body.cg .puces{display:flex;gap:6px;flex-wrap:wrap;max-height:86px;overflow:auto;flex:1;min-width:0}
html body.cg .filtres .bascule,html body.cg .filtres .puce{font-family:var(--c-police);font-size:13px;padding:3px 10px;border:1px solid var(--c-filet2);border-radius:999px;background:var(--c-panneau);color:var(--c-texte2);cursor:pointer;white-space:nowrap}
html body.cg .filtres .bascule:hover,html body.cg .filtres .puce:hover{background:var(--c-survol);color:var(--c-texte)}
html body.cg .filtres .bascule.actif{background:var(--c-accent-pale);border-color:var(--c-accent);color:var(--c-accent-texte)}
html body.cg .filtres .puce.actif{background:var(--c-accent);border-color:var(--c-accent);color:var(--c-sur-accent)}
html body.cg .filtres .puce small{opacity:.75;margin-left:4px}
html body.cg .champ-ligne{display:inline-flex;gap:6px;align-items:center;font-size:13px;color:var(--c-gris)}
html body.cg .champ-ligne select{width:auto;padding:3px 6px;font-size:13px}
/* ---------- tableaux ---------- */
html body.cg .defile{background:var(--c-panneau);border:1px solid var(--c-filet);border-radius:9px}
html body.cg th{background:var(--c-panneau2);color:var(--c-gris);font-size:11.5px;font-weight:600;letter-spacing:.03em;border-bottom:1px solid var(--c-filet)}
html body.cg td{border-bottom:1px solid var(--c-filet);color:var(--c-texte)}
html body.cg tbody tr:hover td{background:var(--c-survol)}
html body.cg tfoot td{background:var(--c-panneau2);border-top:1px solid var(--c-filet2)}
html body.cg td,html body.cg th{font-variant-numeric:tabular-nums}
/* tri au clic (/commun/tableaux.js?v=d17b0ce656) */
html body.cg table[data-tableau] th.triable{cursor:pointer;user-select:none;white-space:nowrap}
html body.cg table[data-tableau] th.triable:hover{color:var(--c-texte)}
html body.cg table[data-tableau] th.triable::after{content:'↕';display:inline-block;margin-left:5px;font-size:10px;opacity:.35}
html body.cg table[data-tableau] th[aria-sort=ascending]::after{content:'▲';opacity:1;color:var(--c-accent)}
html body.cg table[data-tableau] th[aria-sort=descending]::after{content:'▼';opacity:1;color:var(--c-accent)}
html body.cg table[data-tableau] th.triable:focus-visible{outline:2px solid var(--c-accent);outline-offset:-2px}
/* en-têtes fixés : le tableau défile dans son cadre, l'en-tête reste en haut */
html body.cg table[data-tableau] thead th{position:sticky;top:0;z-index:2}
@media (min-width:761px){html body.cg .defile:not(.haut):has(> table[data-tableau]){max-height:calc(100vh - 150px);overflow:auto}}
html body.cg .tri-mobile{display:none}
/* densité compacte */
html[data-densite=compact] body.cg td,html[data-densite=compact] body.cg th{padding-top:3px;padding-bottom:3px;line-height:1.3}
html[data-densite=compact] body.cg td{font-size:13.5px}
html[data-densite=compact] body.cg td .aide,html[data-densite=compact] body.cg td small{font-size:12px}
/* téléphone : chaque ligne devient une carte « libellé : valeur » */
@media (max-width:760px){
  html body.cg .tri-mobile{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--c-gris);margin:0 0 6px}
  html body.cg .tri-mobile select{width:auto;flex:1;font-size:13.5px;padding:5px 7px}
  html body.cg .defile:has(> table[data-tableau]){max-height:none;overflow:visible;border:0;background:transparent}
  html body.cg table[data-tableau],html body.cg table[data-tableau]>tbody,html body.cg table[data-tableau]>tfoot{display:block;width:100%}
  html body.cg table[data-tableau]>thead{display:none}
  html body.cg table[data-tableau] tr{display:block;margin:0 0 8px;padding:8px 12px;border:1px solid var(--c-filet);border-radius:9px;background:var(--c-panneau)}
  html body.cg table[data-tableau] td{display:block;overflow:hidden;padding:4px 0;border:0;white-space:normal;text-align:right;background:transparent!important}
  html body.cg table[data-tableau] td::before{content:attr(data-libelle);float:left;max-width:45%;margin-right:12px;font-size:12px;font-weight:600;line-height:1.9;color:var(--c-gris);text-align:left}
  html body.cg table[data-tableau] td[data-libelle=""]::before,html body.cg table[data-tableau] td:not([data-libelle])::before{content:none}
  html body.cg table[data-tableau] td .actions,html body.cg table[data-tableau] td .troupes{justify-content:flex-end}
  html body.cg table[data-tableau] td[colspan]{display:block;text-align:left}
  html body.cg table[data-tableau] td:first-child{font-size:14.5px}
}

/* ---------- divers ---------- */
html body.cg details.plus{background:var(--c-panneau);border:1px solid var(--c-filet);border-radius:9px}
html body.cg details.plus>summary{color:var(--c-texte2);font-weight:550}
html body.cg .suggestions{background:var(--c-panneau);border:1px solid var(--c-filet2);border-radius:8px;box-shadow:var(--c-ombre-haute)}
html body.cg .suggestions button{color:var(--c-texte);border-bottom:1px solid var(--c-filet)}
html body.cg .suggestions button:hover,html body.cg .suggestions button:focus-visible{background:var(--c-survol)}
html body.cg dialog{background:var(--c-panneau);color:var(--c-texte);border:1px solid var(--c-filet);border-radius:12px;box-shadow:var(--c-ombre-haute)}
html body.cg .ct-fenetre{background:var(--c-panneau);color:var(--c-texte);border-color:var(--c-filet);font-family:var(--c-police)}
html body.cg .ct-tete{background:var(--c-panneau);border-color:var(--c-filet)}
html body.cg .ct-tete h2{font-family:var(--c-police);color:var(--c-texte)}
html body.cg .ct-champ,html body.cg .ct-liste,html body.cg .ct-fermer{background:var(--c-champ-fond);border-color:var(--c-filet2);color:var(--c-texte)}
html body.cg .ct-liste button{color:var(--c-texte);border-color:var(--c-filet)}
html body.cg .ct-liste button:hover,html body.cg .ct-liste button.ct-actif{background:var(--c-survol)}
html body.cg .ct-bouton{background:var(--c-accent);border-color:var(--c-accent);color:var(--c-sur-accent)}
html body.cg .ct-bouton.second{background:var(--c-panneau);color:var(--c-texte2);border-color:var(--c-filet2)}
html body.cg .ct-titre{font-family:var(--c-police);color:var(--c-texte2)}
html body.cg .ct-serveur{background:var(--c-survol);color:var(--c-texte2)}
html body.cg .ct-etiquette,html body.cg .ct-note,html body.cg .ct-vide{color:var(--c-gris)}

/* ---------- téléphone : la barre latérale devient un tiroir ---------- */
@media (max-width:900px){
  html body.cg{grid-template-columns:1fr}
  .cadre-lateral{position:fixed;z-index:60;left:0;top:0;bottom:0;width:272px;height:auto;transform:translateX(-100%);transition:transform .2s ease;box-shadow:var(--c-ombre-haute)}
  body.cadre-ouvert .cadre-lateral{transform:none}
  body.cadre-ouvert .cadre-voile{display:block;position:fixed;inset:0;z-index:55;background:rgba(15,23,42,.4)}
  .cadre-mobile{display:flex;align-items:center;gap:10px;position:sticky;top:0;z-index:30;padding:10px 14px;background:var(--c-panneau);border-bottom:1px solid var(--c-filet)}
  .cadre-mobile button{display:inline-grid;place-items:center;width:36px;height:36px;border:1px solid var(--c-filet);border-radius:8px;background:var(--c-panneau);color:var(--c-texte);cursor:pointer}
  .cadre-mobile button svg{width:19px;height:19px}
  .cadre-mobile .cadre-marque{padding:0}
  html body.cg .cadre-contenu>header{position:static;padding:12px 16px}
  html body.cg .cadre-contenu>main{padding:16px 14px 40px}
}
@media (prefers-reduced-motion:reduce){.cadre-lateral{transition:none}}

/* ---------- navigation : transition douce d'une page à l'autre (Chrome, Edge, Safari ; ailleurs, changement normal) ----------
   La barre latérale ne bouge pas : seul le contenu passe en fondu. */
@view-transition{navigation:auto}
@media (min-width:901px){html body.cg .cadre-lateral{view-transition-name:cadre-lateral}}
::view-transition-old(root),::view-transition-new(root){animation-duration:.16s}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* ---------- finitions : fenêtres de confirmation, messages flottants, squelettes de chargement (ConseilUI, cadre.js) ---------- */
html body.cg dialog.cg-dialogue{width:min(440px,calc(100% - 32px));padding:20px 22px 18px;box-sizing:border-box}
html body.cg dialog.cg-dialogue::backdrop{background:rgba(15,23,42,.38)}
html body.cg dialog.cg-dialogue[open]{animation:cg-entree .14s ease-out}
html body.cg .cg-dialogue .cg-titre{margin:0 0 8px;font-size:16.5px;font-weight:650;color:var(--c-texte)}
html body.cg .cg-dialogue .cg-corps{margin:0;font-size:14.5px;line-height:1.5;color:var(--c-texte2);white-space:pre-line}
html body.cg .cg-dialogue .cg-champ{width:100%;box-sizing:border-box;margin-top:12px}
html body.cg .cg-dialogue .cg-boutons{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}

/* ---------- collage d'une page du jeu (collage.js) : bouton, résumé du dernier collage, fenêtre avec aperçu ---------- */
html body.cg .cg-collage{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:14px 16px;border:1px dashed color-mix(in srgb,var(--c-accent) 50%,transparent);border-radius:12px;background:var(--c-accent-pale);box-sizing:border-box}
html body.cg .cg-collage.petit{padding:10px 12px;gap:6px 12px}
html body.cg .cg-collage .bouton{display:inline-flex;align-items:center;gap:8px}
html body.cg .cg-collage .bouton.grand{font-size:16px;padding:11px 20px}
html body.cg .cg-collage .bouton svg{width:18px;height:18px;flex:none}
html body.cg .cg-collage .bouton:disabled{opacity:.55;cursor:not-allowed}
html body.cg .cg-collage-etat{display:flex;flex-direction:column;gap:2px;font-size:13.5px;line-height:1.4;color:var(--c-texte2);min-width:0}
html body.cg .cg-collage-etat b{color:var(--c-texte);font-weight:600}
html body.cg dialog.cg-collage-dlg{width:min(760px,calc(100% - 32px));max-height:88vh;padding:0;overflow:auto;box-sizing:border-box}
html body.cg dialog.cg-collage-dlg::backdrop{background:rgba(15,23,42,.38)}
html body.cg dialog.cg-collage-dlg[open]{animation:cg-entree .14s ease-out}
html body.cg .cg-collage-dlg .dlg-tete{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 20px;border-bottom:1px solid var(--c-filet);position:sticky;top:0;background:var(--c-panneau);z-index:1}
html body.cg .cg-collage-dlg .dlg-tete h2{margin:0;font-size:18px}
html body.cg .cg-collage-dlg .fermer{width:34px;height:34px;border:1px solid var(--c-filet2);border-radius:7px;background:var(--c-panneau);color:var(--c-texte);font-size:18px;cursor:pointer}
html body.cg .cg-collage-dlg .dlg-corps{padding:16px 20px 20px;display:flex;flex-direction:column;gap:12px}
html body.cg .cg-collage-dlg .etape{border:1px solid var(--c-filet);border-radius:8px;background:var(--c-panneau2);padding:12px 14px}
html body.cg .cg-collage-dlg .etape ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:3px;font-size:14.5px}
html body.cg .cg-collage-dlg kbd{font:500 12.5px var(--c-mono);padding:0 5px;border:1px solid var(--c-filet2);border-bottom-width:2px;border-radius:4px;background:var(--c-panneau)}
html body.cg .cg-collage-dlg textarea{display:block;width:100%;min-height:120px;resize:vertical;box-sizing:border-box;font:inherit;font-size:14px}
html body.cg .cg-collage-dlg .apercu{border:1px dashed var(--c-filet2);border-radius:8px;padding:12px 14px;background:var(--c-panneau);display:flex;flex-direction:column;gap:8px;font-size:14px}
html body.cg .cg-collage-dlg .apercu ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:2px;font-variant-numeric:tabular-nums}
html body.cg .cg-collage-dlg .apercu .msg{padding:8px 12px;margin:0}
html body.cg .cg-collage-dlg .actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
@media (prefers-reduced-motion:reduce){html body.cg dialog.cg-collage-dlg[open]{animation:none}}
html body.cg .bouton.danger-plein{background:var(--c-danger);border-color:var(--c-danger);color:#fff}
html body.cg .bouton.danger-plein:hover{background:color-mix(in srgb,var(--c-danger) 86%,#000);border-color:color-mix(in srgb,var(--c-danger) 86%,#000)}
.cg-messages{position:fixed;right:16px;bottom:16px;z-index:200;display:flex;flex-direction:column;align-items:flex-end;gap:8px;max-width:calc(100% - 32px);pointer-events:none}
.cg-message{pointer-events:auto;display:flex;align-items:center;gap:10px;min-width:220px;max-width:420px;padding:10px 10px 10px 14px;border-radius:10px;background:var(--c-texte);color:var(--c-panneau);box-shadow:var(--c-ombre-haute);font:500 14px/1.4 var(--c-police);animation:cg-entree .16s ease-out}
.cg-message .cg-texte{flex:1}
.cg-message.ok::before,.cg-message.att::before,.cg-message.err::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:#4ade80}
.cg-message.att::before{background:#fbbf24}
.cg-message.err::before{background:#f87171}
.cg-message button{font:600 13.5px var(--c-police);border:0;background:transparent;color:inherit;cursor:pointer;border-radius:6px;padding:5px 8px}
.cg-message .cg-annuler{color:#93b4ff}
.cg-message button:hover{background:rgba(255,255,255,.12)}
.cg-message .cg-fermer{font-size:17px;line-height:1;padding:3px 7px;opacity:.7}
.cg-message.sortie{opacity:0;transform:translateY(6px);transition:opacity .18s,transform .18s}
@keyframes cg-entree{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cg-squelette{display:flex;flex-direction:column;gap:9px;padding:6px 0}
.cg-squelette i{display:block;height:12px;border-radius:6px;background:linear-gradient(90deg,var(--c-survol) 0%,var(--c-filet) 50%,var(--c-survol) 100%);background-size:200% 100%;animation:cg-reflet 1.2s linear infinite}
.cg-lecteur{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@keyframes cg-reflet{from{background-position:100% 0}to{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.cg-message,html body.cg dialog.cg-dialogue[open]{animation:none}.cg-squelette i{animation:none}}
@media (max-width:600px){.cg-messages{left:12px;right:12px;bottom:12px;align-items:stretch}.cg-message{max-width:none}}
html:root[data-theme="sombre"] .cg-message .cg-annuler{color:#1e40af}
html:root[data-theme="sombre"] .cg-message button:hover{background:rgba(15,23,42,.08)}

/* ---------- recherche Ctrl+K (cadre.js) : bouton de la barre latérale, loupe sur téléphone, fenêtre de recherche ---------- */
html body.cg .cadre-recherche{display:flex;align-items:center;gap:8px;width:100%;margin:0 0 8px;padding:7px 9px;border:1px solid var(--c-filet);border-radius:8px;background:var(--c-panneau2);color:var(--c-gris);font:500 13.5px var(--c-police);cursor:pointer;text-align:left;box-sizing:border-box}
html body.cg .cadre-recherche:hover{border-color:var(--c-filet2);color:var(--c-texte2)}
html body.cg .cadre-recherche svg{width:16px;height:16px;flex:none}
html body.cg .cadre-recherche span{flex:1}
html body.cg .cadre-recherche kbd,html body.cg .cg-palette kbd{font:500 11px var(--c-mono);padding:1px 5px;border:1px solid var(--c-filet2);border-bottom-width:2px;border-radius:4px;background:var(--c-panneau);color:var(--c-gris)}
html body.cg .cadre-mobile .cadre-loupe{margin-left:auto}
html body.cg dialog.cg-palette{width:min(620px,calc(100% - 24px));max-height:min(560px,80vh);margin:10vh auto auto;padding:0;display:flex;flex-direction:column;overflow:hidden}
html body.cg dialog.cg-palette:not([open]){display:none}
html body.cg dialog.cg-palette::backdrop{background:rgba(15,23,42,.38)}
html body.cg .cg-palette-champ{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--c-filet)}
html body.cg .cg-palette-champ svg{width:18px;height:18px;flex:none;color:var(--c-gris)}
html body.cg .cg-palette-champ input{flex:1;border:0!important;box-shadow:none!important;background:transparent;font:500 16px var(--c-police);color:var(--c-texte);padding:4px 0;min-width:0}
html body.cg .cg-palette-champ input::-webkit-search-cancel-button{display:none}
html body.cg .cg-palette-liste{overflow-y:auto;padding:6px;flex:1}
html body.cg .cg-palette-groupe{padding:8px 10px 4px;font-size:11.5px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--c-pale)}
html body.cg .cg-palette-item{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:7px;color:var(--c-texte)!important;text-decoration:none!important}
html body.cg .cg-palette-item.actif{background:var(--c-accent-pale)}
html body.cg .cg-palette-item svg{width:17px;height:17px;flex:none;color:var(--c-gris)}
html body.cg .cg-palette-item.actif svg{color:var(--c-accent)}
html body.cg .cg-palette-item b{display:block;font-weight:550;font-size:14px}
html body.cg .cg-palette-item small{display:block;font-size:12.5px;color:var(--c-gris)}
html body.cg .cg-palette-pastille{display:inline-grid;place-items:center;width:22px;height:22px;flex:none;border-radius:6px;background:var(--c-survol);color:var(--c-texte2);font:650 11.5px var(--c-police)}
html body.cg .cg-palette-vide{padding:18px 12px;color:var(--c-gris);font-size:14px}
html body.cg .cg-palette-pied{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:8px 14px;border-top:1px solid var(--c-filet);font-size:12px;color:var(--c-gris);background:var(--c-panneau2)}
@media (max-width:600px){html body.cg dialog.cg-palette{margin-top:12px;max-height:calc(100vh - 24px)}html body.cg .cg-palette-pied span:first-child{display:none}}

/* ---------- en-tête commun (gabarit, cadre.js) : titre et phrase à gauche, réglages, bouton principal et menu « ⋯ » à droite ;
   onglets dans une barre fixée sous l'en-tête ---------- */
html body.cg .cadre-contenu>header.cg-entete{position:relative;z-index:25;display:block;padding:22px 28px 16px;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:1px solid var(--c-filet)}
html body.cg .cg-entete-dedans{max-width:1360px;margin:0 auto;box-sizing:border-box}
html body.cg .cg-entete-haut{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap}
html body.cg .cg-entete-titre{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
html body.cg .cadre-contenu>header.cg-entete h1{font-size:23px;font-weight:680;letter-spacing:-.025em;line-height:1.2}
html body.cg header.cg-entete[data-espace=alliance] .cadre-etiquette{background:var(--c-violet-pale);color:var(--c-violet)}
html body.cg .cg-entete-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
html body.cg .cg-entete-actions:empty{display:none}
html body.cg .cg-entete-actions>div,html body.cg .cg-entete-actions .tete-droite,html body.cg .cg-entete-actions .reglages,html body.cg .cg-entete-actions .outils{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0;padding:0;background:transparent;border:0}
html body.cg .cg-entete-but{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--c-texte2);max-width:880px}
html body.cg .cg-entete-but .cadre-lies{color:var(--c-gris);white-space:normal}
html body.cg .cg-onglets{position:sticky;top:0;z-index:20;padding:8px 28px;background:color-mix(in srgb,var(--c-fond) 90%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--c-filet)}
html body.cg .cg-onglets nav[role=tablist]{display:inline-flex;max-width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
html body.cg .cg-onglets nav[role=tablist] button{white-space:nowrap}
html body.cg .cg-plus{position:relative}
html body.cg .cg-plus-bouton{display:inline-grid;place-items:center;width:36px;height:34px;padding:0;border:1px solid var(--c-filet2);border-radius:7px;background:var(--c-panneau);color:var(--c-texte2);cursor:pointer;box-shadow:var(--c-ombre)}
html body.cg .cg-plus-bouton:hover,html body.cg .cg-plus-bouton[aria-expanded=true]{background:var(--c-survol);color:var(--c-texte)}
html body.cg .cg-plus-bouton svg{width:18px;height:18px;fill:currentColor}
html body.cg .cg-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:230px;padding:5px;background:var(--c-panneau);border:1px solid var(--c-filet);border-radius:10px;box-shadow:var(--c-ombre-haute);display:flex;flex-direction:column}
html body.cg .cg-menu[hidden]{display:none}
/* bulle du compte Travian actif : au centre de l'en-tête, sur toutes les pages ; un clic ouvre le menu des comptes */
html body.cg .cg-entete-haut.avec-bulle{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center}
html body.cg .avec-bulle > .cg-entete-actions{justify-self:end;margin-left:0}
html body.cg .cg-bulle{position:relative;justify-self:center}
html body.cg .cg-bulle-bouton{display:inline-flex;align-items:center;gap:10px;max-width:360px;font:inherit;text-align:left;padding:6px 14px 6px 7px;border-radius:999px;border:1px solid color-mix(in srgb,var(--c-accent) 40%,var(--c-filet));background:var(--c-panneau);color:var(--c-texte);box-shadow:0 2px 12px rgba(15,23,42,.10);cursor:pointer}
html body.cg .cg-bulle-bouton:hover{border-color:var(--c-accent)}
html body.cg .cg-bulle-bouton:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
html body.cg .cg-bulle-bouton > svg{width:16px;height:16px;flex:none;color:var(--c-gris);transform:rotate(90deg)}
html body.cg .cg-bulle-ico{flex:none;width:34px;height:34px;border-radius:50%;background-color:var(--c-accent-pale);background-repeat:no-repeat;background-position:4px 4px}
html body.cg .cg-bulle-texte{display:flex;flex-direction:column;min-width:0;line-height:1.25}
html body.cg .cg-bulle-texte b{font-size:15.5px;font-weight:700;color:var(--c-texte);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body.cg .cg-bulle-texte > span{font-size:12.5px;color:var(--c-gris);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body.cg .cg-bulle-tag{color:var(--c-accent-texte);font-weight:650}
html body.cg .cg-bulle.vide .cg-bulle-bouton{border-color:var(--c-alerte);background:var(--c-alerte-pale)}
html body.cg .cg-bulle.vide .cg-bulle-texte b{color:var(--c-alerte)}
html body.cg .cg-bulle-menu{left:50%;right:auto;transform:translateX(-50%);min-width:270px}
html body.cg .cg-bulle-titre{padding:6px 10px 4px;font-size:12px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--c-gris)}
html body.cg .cg-bulle-menu .cg-menu-item.choisi{background:var(--c-accent-pale)}
html body.cg .cg-bulle-coche{margin-left:auto;color:var(--c-accent);font-weight:700}
@media (max-width:900px){
  html body.cg .cg-entete-haut.avec-bulle{grid-template-columns:minmax(0,1fr) auto}
  html body.cg .cg-bulle{grid-column:1/-1;order:-1;justify-self:center;margin-bottom:4px}
  html body.cg .cg-bulle-bouton{padding:4px 12px 4px 5px;max-width:100%}
  html body.cg .cg-bulle-bouton .cg-bulle-ico{width:28px;height:28px;background-position:1px 1px}
  html body.cg .cg-bulle-bouton .cg-bulle-texte{flex-direction:row;align-items:baseline;gap:6px}
  html body.cg .cg-bulle-bouton .cg-bulle-texte b{font-size:14px}
}
html body.cg .cg-menu hr{border:0;border-top:1px solid var(--c-filet);margin:4px 2px}
html body.cg .cg-menu .cg-menu-item{display:flex;align-items:center;gap:9px;width:100%;margin:0;padding:8px 10px;border:0;border-radius:7px;background:transparent;box-shadow:none;color:var(--c-texte);font:500 14px var(--c-police);text-align:left;text-decoration:none;cursor:pointer}
html body.cg .cg-menu .cg-menu-item:hover,html body.cg .cg-menu .cg-menu-item:focus{background:var(--c-survol);outline:none}
html body.cg .cg-menu .cg-menu-item.danger{color:var(--c-danger)}
html body.cg .cg-menu .cg-menu-item:disabled{opacity:.5;cursor:default}
@media (max-width:900px){
  html body.cg .cadre-contenu>header.cg-entete{padding:16px 16px 12px}
  html body.cg .cadre-contenu>header.cg-entete h1{font-size:20px}
  html body.cg .cg-onglets{top:57px;padding:6px 16px}
}
html body.cg dialog::backdrop{background:rgba(15,23,42,.38)}

/* ---------- gabarit : réglages repliables avec un résumé d'une ligne (<details class="cg-reglages">) ---------- */
html body.cg details.cg-reglages{background:var(--c-panneau);border:1px solid var(--c-filet);border-radius:10px;box-shadow:var(--c-ombre)}
html body.cg details.cg-reglages>summary{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;padding:12px 18px;cursor:pointer;list-style:none;border-radius:10px}
html body.cg details.cg-reglages>summary::-webkit-details-marker{display:none}
html body.cg details.cg-reglages>summary:hover{background:var(--c-panneau2)}
html body.cg .cg-reglages-titre{display:inline-flex;align-items:center;gap:8px;font-weight:620;font-size:14.5px;color:var(--c-texte)}
html body.cg .cg-reglages-titre::before{content:"";width:7px;height:7px;border-right:2px solid var(--c-gris);border-bottom:2px solid var(--c-gris);transform:rotate(-45deg);transition:transform .15s;margin-right:2px}
html body.cg details.cg-reglages[open] .cg-reglages-titre::before{transform:rotate(45deg)}
html body.cg .cg-reglages-resume{flex:1;min-width:0;font-size:13.5px;color:var(--c-texte2)}
html body.cg .cg-reglages-action{margin-left:auto;font-size:13px;font-weight:550;color:var(--c-accent-texte)}
html body.cg .cg-reglages-action::after{content:"Modifier"}
html body.cg details.cg-reglages[open] .cg-reglages-action::after{content:"Replier"}
html body.cg .cg-reglages-corps{padding:16px 18px 18px;border-top:1px solid var(--c-filet)}

html body.cg .bouton.second.danger-texte{color:var(--c-danger)}

/* ---------- volet latéral (ConseilUI.volet) : glisse depuis la droite, la page reste visible à gauche ---------- */
html body.cg dialog.cg-volet{position:fixed;inset:0 0 0 auto;margin:0;width:min(500px,100vw);height:100vh;height:100dvh;max-width:none;max-height:none;padding:0;border:0;border-left:1px solid var(--c-filet);border-radius:0;box-shadow:var(--c-ombre-haute);z-index:60;flex-direction:column}
html body.cg dialog.cg-volet[open]{display:flex;animation:cg-volet .18s ease-out}
html body.cg .cg-volet-tete{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;border-bottom:1px solid var(--c-filet);background:var(--c-panneau)}
html body.cg .cg-volet-tete h2{margin:0;font-size:16.5px;font-weight:650}
html body.cg .cg-volet-fermer{width:34px;height:34px;border:1px solid var(--c-filet2);border-radius:7px;background:var(--c-panneau);color:var(--c-texte);font-size:18px;cursor:pointer}
html body.cg .cg-volet-fermer:hover{background:var(--c-survol)}
html body.cg .cg-volet-corps{flex:1;overflow-y:auto;padding:16px 18px 24px;display:flex;flex-direction:column;gap:14px}
@keyframes cg-volet{from{transform:translateX(28px);opacity:0}to{transform:none;opacity:1}}
@media (min-width:1300px){html body.cg.cg-volet-ouvert .cadre-contenu{margin-right:500px}}
@media (prefers-reduced-motion:reduce){html body.cg dialog.cg-volet[open]{animation:none}}

/* ---------- assistant en étapes (planificateurs, Préparer une opération) : pastilles numérotées cochées, point orange s'il
   manque une saisie, barre de progression, bandeau résumé fixe, Précédent / Suivant fixés en bas ---------- */
html body.cg .cg-onglets nav[role=tablist] button[data-onglet],html body.cg .cg-onglets nav[role=tablist] button[data-etape]{display:inline-flex;align-items:center;gap:7px}
html body.cg .cg-onglets nav button .num{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;box-sizing:border-box;border-radius:999px;background:var(--c-filet);color:var(--c-texte2);font-size:11.5px;font-weight:650;line-height:1}
html body.cg .cg-onglets nav button[aria-selected=true] .num{background:var(--c-accent);color:var(--c-sur-accent)}
html body.cg .cg-onglets nav button[data-etat=ok] .num{background:var(--c-succes);color:#fff}
html body.cg .cg-onglets nav button[data-etat=ok] .num::after{content:" ✓"}
html body.cg .cg-onglets nav button[data-etat=manque]::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--c-alerte);flex:none}
html body.cg .progression-plan{height:3px;margin-top:8px;border-radius:2px;background:var(--c-filet);overflow:hidden}
html body.cg .progression-plan div{height:100%;width:0;background:var(--c-succes);transition:width .3s}
html body.cg .resume-plan{display:flex;gap:4px 18px;flex-wrap:wrap;align-items:baseline;margin-top:7px;font-size:13.5px;color:var(--c-texte2)}
html body.cg .resume-plan b{color:var(--c-texte);font-weight:620}
html body.cg .resume-plan .manque{color:var(--c-alerte)}
html body.cg .resume-plan .complet{color:var(--c-succes)}
/* icônes des ressources (images du jeu) dans les lectures de la page des champs ; stock plein en orange */
html body.cg .ico-res{height:16px;width:auto;vertical-align:-3px;margin-right:5px}
html body.cg .res-plein,html body.cg .res-plein b{color:var(--c-alerte)}
html body.cg .pied-etapes{position:sticky;bottom:0;z-index:15;display:flex;justify-content:space-between;align-items:center;gap:10px;margin:24px 0 0;padding:10px 0;background:color-mix(in srgb,var(--c-fond) 92%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--c-filet)}
html body.cg .pied-etapes .bouton.second::before{content:"‹ "}
html body.cg .pied-etapes .bouton:not(.second)::after{content:" ›"}
@media (prefers-reduced-motion:reduce){html body.cg .progression-plan div{transition:none}}