/* Les écrans du wargame (V16 ; spécification UX §4, §5, §7). Deux thèmes par jetons de couleur, sombre par défaut ; l'ambre en
   accent dans les deux, l'avertissement d'un orange-rouge distinct ; chacun au contraste AA (éprouvé : test_themes_modes). */
:root {
  --barre: 48px;
  --bandeau: 56px;
  --filtres: 36px;
  --bas: 56px;
  --gauche: 260px;
  --droite: 300px;
  --rail: 64px;
  --police-min: 12px;
  --droite-section: 30%;
  --conseiller-comparaison: 45%;
  --bilan-hauteur: 22vh;
  --bilan-hauteur-comparaison: 10vh;
}
@media (max-height: 800px) {
  :root { --droite-section: 24%; }
}
:root,
[data-theme="sombre"] {
  --fond: #0f1419;
  --panneau: #171e26;
  --panneau-2: #1f2832;
  --bord: #36434f;
  --texte: #e6edf3;
  --texte-2: #a9b4c0;
  --accent: #f2b544;
  --sur-accent: #1a1205;
  --avertissement: #ff7a5c;
  --sur-avertissement: #1f0a05;
  --ok: #5dd39e;
  --carte-fond: #0b1016;
  --carte-cellule: #2f6f9f;
  --carte-bord: #0f1419;
  --carte-cat-1: #2f6f9f;
  --carte-cat-2: #3f8f8a;
  --carte-cat-3: #6d6fb5;
  --carte-cat-4: #9a7ab0;
  --carte-cat-5: #5a7f4f;
  --prov-m: #5dd39e;
  --prov-e: #6cb6ff;
  --prov-i: #f2b544;
  --prov-v: #a9b4c0;
}
[data-theme="clair"] {
  --fond: #f6f4ef;
  --panneau: #ffffff;
  --panneau-2: #ece9e1;
  --bord: #bdb7aa;
  --texte: #1c232b;
  --texte-2: #4b5560;
  --accent: #8a5a00;
  --sur-accent: #ffffff;
  --avertissement: #b92f16;
  --sur-avertissement: #ffffff;
  --ok: #1d6b47;
  --carte-fond: #dfe6ea;
  --carte-cellule: #7fb0d0;
  --carte-bord: #f6f4ef;
  --carte-cat-1: #7fb0d0;
  --carte-cat-2: #7cc0b6;
  --carte-cat-3: #a9aadb;
  --carte-cat-4: #c7a8d6;
  --carte-cat-5: #9cbd8c;
  --prov-m: #1d6b47;
  --prov-e: #1c5fa8;
  --prov-i: #8a5a00;
  --prov-v: #4b5560;
}
@media (max-width: 1500px) {
  :root { --gauche: 240px; --droite: 260px; }
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--fond); color: var(--texte); font: 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
small { font-size: 12px; color: var(--texte-2); }
h1 { font-size: 18px; margin: 0 0 4px; }
h2 { font-size: 14px; margin: 0 0 6px; }
h3 { font-size: 13px; margin: 8px 0 4px; }
p { margin: 4px 0; }
a { color: var(--accent); }
code { font-size: 12px; overflow-wrap: anywhere; }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea { background: var(--panneau-2); border: 1px solid var(--bord); border-radius: 4px; padding: 3px 6px; max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
[hidden] { display: none !important; }

.bouton, .segment { background: var(--panneau-2); border: 1px solid var(--bord); border-radius: 4px; padding: 4px 10px; cursor: pointer; text-decoration: none; color: var(--texte); display: inline-block; }
.bouton:hover, .segment:hover { border-color: var(--accent); }
.bouton-accent { background: var(--accent); color: var(--sur-accent); border-color: var(--accent); font-weight: 600; }
.bouton-avertissement { background: var(--avertissement); color: var(--sur-avertissement); border-color: var(--avertissement); font-weight: 600; }
.bouton:disabled { opacity: .55; cursor: not-allowed; }
.htmx-request.bouton, .htmx-request .bouton-accent { opacity: .6; }

/* La barre (UX §5.1) */
.barre { display: flex; align-items: center; gap: 12px; height: var(--barre); padding: 0 12px; background: var(--panneau); border-bottom: 1px solid var(--bord); position: relative; z-index: 1200; }
.marque { font-weight: 700; letter-spacing: .08em; color: var(--accent); text-decoration: none; }
.partie-siege { white-space: nowrap; }
.pastille-acteur { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); margin-right: 6px; }
.pastille-verite { background: var(--avertissement); color: var(--sur-avertissement); border-radius: 3px; padding: 1px 6px; font-weight: 700; font-size: 12px; }
.espace { flex: 1; }
.selecteur-niveau { display: inline-flex; border: 1px solid var(--bord); border-radius: 4px; overflow: hidden; }
.selecteur-niveau .segment { border: 0; border-radius: 0; padding: 4px 12px; background: transparent; }
.selecteur-niveau .segment[aria-checked="true"] { background: var(--accent); color: var(--sur-accent); font-weight: 700; }
.point-tenu { margin-left: 3px; }
.vues { display: flex; align-items: center; gap: 4px; flex: 1; }
.vue-bouton { background: none; border: 0; border-bottom: 2px solid transparent; padding: 6px 8px; cursor: pointer; color: var(--texte); text-decoration: none; }
.vue-bouton[aria-pressed="true"] { border-bottom-color: var(--accent); }
.aide-bouton { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--bord); background: var(--panneau-2); cursor: pointer; }
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; padding: 4px 8px; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-corps { position: absolute; right: 0; top: 100%; min-width: 240px; padding: 8px; background: var(--panneau); border: 1px solid var(--bord); border-radius: 4px; display: flex; flex-direction: column; gap: 4px; z-index: 1300; }
.menu-corps button, .menu-corps a { background: none; border: 0; text-align: left; padding: 3px 4px; cursor: pointer; color: var(--texte); text-decoration: none; }
.menu-corps button:hover, .menu-corps a:hover { color: var(--accent); }
.menu-titre { color: var(--texte-2); font-size: 12px; }
.commutateur { border: 1px solid var(--bord); border-radius: 4px; padding: 4px 8px; margin: 2px 0; display: flex; flex-direction: column; gap: 2px; }
.commutateur legend { font-size: 12px; color: var(--texte-2); }
.inactif { color: var(--texte-2); padding: 3px 4px; }

/* L'accueil de page (U10) */
.accueil-page { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; background: var(--panneau); border: 1px solid var(--accent); border-radius: 6px; padding: 10px 14px; margin-bottom: 12px; }
.accueil-but { font-size: 14px; }
.accueil-fait { color: var(--texte-2); font-size: 13px; }

/* Les pages simples */
.page { max-width: 1200px; margin: 0 auto; padding: 16px; }
.page-etroite { max-width: 560px; }
.grille-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.carte-page { background: var(--panneau); border: 1px solid var(--bord); border-radius: 6px; padding: 12px; margin-bottom: 12px; }
.tableau { width: 100%; border-collapse: collapse; }
.tableau th, .tableau td { border-bottom: 1px solid var(--bord); padding: 4px 6px; text-align: left; vertical-align: top; }
.tableau-serre th, .tableau-serre td { padding: 2px 4px; font-size: 13px; }
.etiquette { font-size: 12px; background: var(--panneau-2); border: 1px solid var(--bord); border-radius: 3px; padding: 0 5px; white-space: nowrap; }
.etiquette-ok { border-color: var(--ok); }
.etiquette-ia { border-color: var(--avertissement); color: var(--avertissement); }
.formulaire .champ { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; flex: 1 1 160px; }
.formulaire label { font-size: 13px; }
.champs-ligne { display: flex; flex-wrap: wrap; gap: 12px; }
.formulaire fieldset { border: 1px solid var(--bord); border-radius: 4px; margin-bottom: 10px; }
.case { display: flex; gap: 6px; align-items: center; }
.refus { color: var(--avertissement); font-weight: 600; }
.refus-champ { color: var(--avertissement); font-size: 13px; }
.messages { position: fixed; bottom: 64px; right: 16px; z-index: 1400; max-width: 480px; }
.message { background: var(--panneau); border: 1px solid var(--accent); border-radius: 4px; padding: 6px 10px; }
.retour-action { position: fixed; left: 50%; transform: translateX(-50%); bottom: 64px; z-index: 1400; max-width: 720px; }
.retour-action:not(:empty) { background: var(--panneau); border: 1px solid var(--avertissement); border-radius: 4px; padding: 6px 12px; }
.vide-explique { color: var(--texte-2); }
.grandeurs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 2px 10px; margin: 4px 0; }
.grandeurs dt { color: var(--texte-2); }
.grandeurs dd { margin: 0; overflow-wrap: anywhere; }
.vides { color: var(--texte-2); }
.liste-sobre { margin: 4px 0; padding-left: 18px; }

/* La création d'une partie : des vignettes, une explication derrière (i). Ce qui dépend du rôle se montre sans script. */
.creation fieldset { padding: 8px 12px 10px; }
.bloc-tete { position: relative; display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.bloc-tete h3 { font-size: 14px; margin: 0; }
.bloc-phrase { color: var(--texte-2); font-size: 13px; margin: 0 0 8px; }
.info > summary { list-style: none; width: 18px; height: 18px; line-height: 16px; text-align: center; font-size: 12px; font-style: italic; font-weight: 700; border: 1px solid var(--bord); border-radius: 50%; cursor: pointer; color: var(--texte-2); }
.info > summary::-webkit-details-marker { display: none; }
.info > summary:hover, .info[open] > summary { border-color: var(--accent); color: var(--accent); }
.info > div { position: absolute; left: 0; top: 100%; z-index: 30; width: min(460px, 90vw); margin-top: 4px; padding: 8px 10px; font-size: 13px; background: var(--panneau-2); border: 1px solid var(--accent); border-radius: 4px; }
.vignettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.vignette { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; background: var(--panneau-2); border: 1px solid var(--bord); border-radius: 6px; cursor: pointer; }
.formulaire label.vignette { font-size: 14px; }
.vignette input { position: absolute; opacity: 0; pointer-events: none; }
.vignette:hover { border-color: var(--accent); }
.vignette:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.vignette:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }

.vignette-titre { font-weight: 600; }
.vignette-phrase { font-size: 13px; color: var(--texte-2); }
.vignette-etiquettes { display: flex; flex-wrap: wrap; gap: 3px; }
.vignette small { font-size: 12px; }
.exemple { display: flex; flex-direction: column; gap: 1px; margin-top: 2px; padding: 4px 6px; font-size: 12px; background: var(--panneau); border: 1px dashed var(--bord); border-radius: 4px; }
.exemple-note { color: var(--texte-2); }
.exemple-ia { color: var(--accent); font-weight: 600; }
.exemple-sans { color: var(--texte-2); text-decoration: line-through; }
.avancees { margin-bottom: 10px; }
.avancees > summary { cursor: pointer; font-weight: 600; font-size: 13px; padding: 3px 0; }
.ligne-graine { display: flex; gap: 6px; align-items: center; }
.champ-graine { width: 150px; }
.creation:has(input[name="mon_role"][value="arbitre"]:checked) .si-joueur,
.creation:has(input[name="mon_role"][value="arbitre"]:checked) .si-les-deux,
.creation:has(input[name="mon_role"][value="joueur"]:checked) .si-les-deux,
.creation:has(input[name="mon_role"][value="joueur"]:checked) .si-arbitre { display: none; }
.lien-role { white-space: nowrap; border-color: var(--accent); }

/* La provenance en pastille (U7) */
.prov { font-size: 12px; font-weight: 600; white-space: nowrap; }
.prov-m { color: var(--prov-m); }
.prov-e { color: var(--prov-e); }
.prov-i { color: var(--prov-i); }
.prov-v { color: var(--prov-v); }

/* L'écran de partie : sept zones (UX §5), une grille dont test_densite relit les jetons */
.ecran-partie { position: relative; display: grid; height: calc(100vh - var(--barre));
  grid-template-columns: var(--gauche) minmax(0, 1fr) var(--droite);
  grid-template-rows: var(--bandeau) var(--filtres) minmax(0, 1fr) var(--bas);
  grid-template-areas: "bandeau bandeau bandeau" "gauche filtres droite" "gauche carte droite" "bas bas bas"; overflow: hidden; }
.ecran-partie > .accueil-page { position: absolute; top: calc(var(--bandeau) + var(--filtres) + 8px); left: calc(var(--gauche) + 16px); width: 560px; z-index: 1100; }
.zone-bandeau { grid-area: bandeau; background: var(--panneau); border-bottom: 1px solid var(--bord); overflow: hidden; }
.bandeau { display: flex; height: 100%; }
.indicateur { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; text-align: left; gap: 0; padding: 3px 10px; background: none; border: 0; border-right: 1px solid var(--bord); cursor: pointer; color: var(--texte); }
.indicateur:hover { background: var(--panneau-2); }
.ind-tete { display: flex; justify-content: space-between; gap: 8px; }
.ind-libelle { font-size: 12px; color: var(--texte-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ind-valeur { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ind-valeur small { font-weight: 400; }
.ind-vide { font-size: 12px; color: var(--texte-2); line-height: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ind-vide em { color: var(--texte); font-weight: 600; font-style: normal; }
.note-bandeau { flex: 0 0 200px; font-size: 12px; line-height: 16px; color: var(--accent); padding: 3px 10px; margin: 0; overflow: hidden; }

.zone-filtres { grid-area: filtres; display: flex; align-items: center; gap: 12px; padding: 0 10px; background: var(--panneau); border-bottom: 1px solid var(--bord); position: relative; z-index: 1050; }
.filtre { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.tiroir { position: absolute; top: 100%; left: 180px; display: flex; flex-direction: column; gap: 6px; padding: 10px; background: var(--panneau); border: 1px solid var(--bord); border-radius: 0 0 4px 4px; }

.zone-gauche { grid-area: gauche; background: var(--panneau); border-right: 1px solid var(--bord); overflow-y: auto; padding: 8px; }
.entete-colonne { display: flex; justify-content: space-between; align-items: baseline; }
.panier-compte { font-size: 12px; color: var(--accent); }
.retour-ordres { font-size: 13px; color: var(--ok); }
.note-lecture { font-size: 13px; color: var(--accent); }
.groupe { margin-bottom: 6px; }
.groupe > summary { cursor: pointer; font-weight: 600; font-size: 13px; padding: 3px 0; }
.option { display: flex; gap: 6px; padding: 5px; margin: 3px 0; border: 1px solid var(--bord); border-radius: 4px; cursor: pointer; }
.option:hover { border-color: var(--accent); }
.option-corps { display: flex; flex-direction: column; min-width: 0; }
.option-libelle { font-size: 13px; }
.option-resume, .option-ruptures { font-size: 12px; color: var(--texte-2); }
.option-interdite { opacity: .72; border-style: dashed; }
/* La comparaison de deux options (étude §4.1) : le bouton reste hors du label, un clic ne coche rien */
.option-bloc { position: relative; }
.option-bloc .option { padding-right: 30px; }
.bouton-comparer { position: absolute; top: 4px; right: 4px; min-width: 24px; padding: 1px 4px; font-size: 13px; line-height: 18px; color: var(--texte); background: transparent; border: 1px solid var(--bord); border-radius: 4px; cursor: pointer; }
.bouton-comparer:hover, .bouton-comparer[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.section-droite[data-comparaison="oui"] { max-height: var(--conseiller-comparaison); }
.section-droite[data-comparaison="oui"] ~ .section-fil .bilan { max-height: var(--bilan-hauteur-comparaison); }
.comparaison-tete { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 0 0 4px; font-size: 13px; }
.comparaison { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13px; }
.comparaison th, .comparaison td { padding: 2px 3px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--bord); overflow-wrap: anywhere; }
.comparaison th[scope="row"] { width: 27%; font-weight: 500; color: var(--texte-2); font-size: 12px; }
.comparaison thead th { position: sticky; top: 0; background: var(--panneau); }
.comparaison small { display: block; font-size: 12px; color: var(--texte-2); }
.marque-axiome { color: var(--avertissement); font-size: 12px; font-weight: 600; }
[data-guide] { display: none; }
.guide-navigation { justify-content: space-between; gap: 8px; }

.zone-carte { grid-area: carte; position: relative; min-height: 0; min-width: 0; overflow: hidden; background: var(--carte-fond); }
#carte-h3 { background: var(--carte-fond); }
#carte-h3[data-fond="aucune"] { background: transparent; }
#carte-h3.leaflet-container { background: var(--carte-fond); }
.carte-controles { position: absolute; top: 8px; right: 8px; z-index: 1000; display: flex; flex-direction: column; gap: 4px; }
.carte-legende { position: absolute; left: 8px; bottom: 8px; z-index: 900; max-width: 340px; background: var(--panneau); border: 1px solid var(--bord); border-radius: 4px; padding: 5px 8px; font-size: 12px; }
.legende-titre { font-weight: 600; margin: 0; }
.legende-compte, .legende-raison { margin: 2px 0 0; }
.legende-raison { color: var(--texte-2); }
.legende-ligne { display: flex; align-items: center; gap: 5px; }
.legende-carre { width: 12px; height: 12px; display: inline-block; border: 1px solid var(--bord); }
.carte-legende.repliee { display: none; }
.vues-panneaux { position: absolute; inset: 0; z-index: 950; pointer-events: none; }
.vue-panneau { position: absolute; inset: 0; pointer-events: auto; overflow: auto; padding: 14px 18px; background: var(--panneau); }

/* Au stratégique, l'échelle d'escalade partage la place avec la carte (UX-Q1) */
.ecran-partie[data-niveau="strategique"] .zone-carte #carte-h3 { width: 60%; }
.ecran-partie[data-niveau="strategique"] .vues-panneaux { left: 60%; }
.ecran-partie[data-niveau="strategique"]:is([data-vue-active="carte"], [data-vue-active="escalade"]) [data-vue-panneau="escalade"] { display: block !important; border-left: 1px solid var(--bord); }
.ecran-partie[data-niveau="strategique"] .vue-panneau { border-left: 1px solid var(--bord); }
.ecran-partie[data-niveau="strategique"] .carte-controles { right: calc(40% + 8px); }

.zone-droite { grid-area: droite; background: var(--panneau); border-left: 1px solid var(--bord); display: flex; flex-direction: column; min-height: 0; }
.section-droite { padding: 8px; border-bottom: 1px solid var(--bord); overflow: auto; max-height: var(--droite-section); flex: 0 0 auto; }
.section-fil { flex: 1 1 auto; max-height: none; min-height: 0; }
.fil-filtres { display: flex; gap: 2px; margin-bottom: 4px; }
.fil-filtres .segment { padding: 1px 6px; font-size: 12px; }
.fil-filtres .segment[aria-pressed="true"] { border-color: var(--accent); }
.fil, .journal { list-style: none; margin: 0; padding: 0; }
.fil-ligne { display: flex; gap: 6px; padding: 2px 0; font-size: 13px; }
.fil-jour { color: var(--texte-2); font-size: 12px; flex: 0 0 auto; }
.fil-texte small { display: block; }
.alerte { border-left: 3px solid var(--avertissement); padding-left: 6px; }
.fil-note { font-size: 12px; color: var(--texte-2); }
/* Le bilan du pas, en tête du Fil (étude §4.1) */
.bilan { margin: 0 0 6px; padding: 4px 6px; border: 1px solid var(--bord); border-radius: 4px; font-size: 13px; max-height: var(--bilan-hauteur); overflow: auto; }
.bilan > summary { cursor: pointer; }
.bilan-resume { display: block; font-size: 12px; color: var(--texte-2); }
.bilan-decide, .bilan-observations { margin: 4px 0 0; }
.bilan-liste { list-style: none; margin: 4px 0 0; padding: 0; }
.bilan-liste li { padding: 2px 0 2px 6px; }
.bilan-liste small, .bilan-observations small { display: block; font-size: 12px; color: var(--texte-2); }
.bilan-observations ul { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.journal-ligne { padding: 2px 0; border-bottom: 1px solid var(--bord); }
.journal-ligne summary { cursor: pointer; }
.note-genre { display: block; font-size: 13px; color: var(--avertissement); }

.zone-bas { grid-area: bas; display: flex; align-items: center; gap: 16px; padding: 0 10px; background: var(--panneau); border-top: 1px solid var(--bord); min-width: 0; }
.zone-frise { flex: 1 1 auto; min-width: 0; }
.frise { display: flex; align-items: center; gap: 10px; }
.frise-tour, .frise-echeance { white-space: nowrap; font-size: 13px; }
.frise-echeance { color: var(--accent); }
.frise-jours { display: flex; list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.frise-jour { position: relative; flex: 1 1 18px; max-width: 28px; min-width: 18px; text-align: center; font-size: 12px; color: var(--texte-2); border-left: 1px solid var(--bord); line-height: 15px; }
.frise-jour.passe { opacity: .55; }
.frise-jour.aujourdhui { background: var(--accent); color: var(--sur-accent); font-weight: 700; }
.frise-jour b { display: block; font-size: 12px; }
.marque-s { color: var(--avertissement); }
.frise-jour.aujourdhui .marque-s { color: var(--sur-accent); }
.marque-reveil { color: var(--accent); }
.etat-partie { display: flex; gap: 10px; white-space: nowrap; font-size: 13px; }
.etat-statut { color: var(--texte-2); }
.etat-dues { color: var(--accent); font-weight: 600; }
.zone-actions { display: flex; gap: 8px; }

/* La modale, peuplée par hx-get */
.modale-fond { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); z-index: 1500; display: flex; align-items: center; justify-content: center; }
.modale { background: var(--panneau); border: 1px solid var(--avertissement); border-radius: 6px; padding: 16px; max-width: 520px; }
.modale-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }

/* La cellule blanche : le gabarit du siège ; ses gestes */
.arbitre-gestes { display: flex; gap: 6px; margin-top: 10px; }
.rejeu-pas { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.rejeu .bandeau { height: auto; flex-wrap: wrap; }

/* Le repli en rail (UX §5.4) */
.ecran-partie[data-repli-gauche="oui"] { grid-template-columns: var(--rail) minmax(0, 1fr) var(--droite); }
.ecran-partie[data-repli-droite="oui"] { grid-template-columns: var(--gauche) minmax(0, 1fr) var(--rail); }
.ecran-partie[data-repli-gauche="oui"][data-repli-droite="oui"] { grid-template-columns: var(--rail) minmax(0, 1fr) var(--rail); }
.ecran-partie[data-repli-gauche="oui"] .zone-gauche > *, .ecran-partie[data-repli-droite="oui"] .zone-droite > * { visibility: hidden; }

/* Le mode guidé (D) : la colonne de gauche devient la file des décisions */
[data-mode="guide"] [data-guide] { display: block; }
[data-mode="guide"] .guide-navigation { display: flex; }
[data-mode="guide"] [data-groupe]:not(.courant) { display: none; }

/* Le mode présentation (B) : la carte plein cadre, panneaux flottants à la demande */
[data-mode="presentation"] .ecran-partie { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) var(--bas); grid-template-areas: "carte" "bas"; }
[data-mode="presentation"] .zone-bandeau { position: absolute; top: 8px; left: 8px; right: 60px; height: var(--bandeau); z-index: 1000; background: none; border: 0; pointer-events: none; }
[data-mode="presentation"] .indicateur { background: var(--panneau); border: 1px solid var(--bord); border-radius: 16px; margin-right: 6px; pointer-events: auto; }
[data-mode="presentation"] .zone-filtres { display: none; }
[data-mode="presentation"] .zone-gauche, [data-mode="presentation"] .zone-droite { display: none; position: absolute; top: 72px; bottom: calc(var(--bas) + 8px); width: 320px; z-index: 1000; border: 1px solid var(--bord); border-radius: 6px; }
[data-mode="presentation"] .zone-gauche { left: 8px; }
[data-mode="presentation"] .zone-droite { right: 8px; }
[data-mode="presentation"] .ecran-partie[data-repli-gauche="oui"] .zone-gauche { display: block; }
[data-mode="presentation"] .ecran-partie[data-repli-droite="oui"] .zone-droite { display: flex; }
[data-mode="presentation"] .ecran-partie[data-repli-gauche="oui"] .zone-gauche > *, [data-mode="presentation"] .ecran-partie[data-repli-droite="oui"] .zone-droite > * { visibility: visible; }
[data-mode="presentation"] .ecran-partie > .accueil-page { top: 80px; left: 16px; }