/* ══════════════════════════════════════════════════════════════════════════════
   Saṃsāra — Carte (bookmap). Feuille propre à bookmap.html : la page est autonome.
   La carte suit le TON du thème choisi sur le terminal (js/liaison.js : clair ou sombre, et sa
   couleur d'accent, posés sur <html data-theme-mode> avant le premier rendu). Sombre par défaut
   (aucun thème décrit) ; claire, la chaleur a sa palette claire (js/bookmap-calc.js, BM.PALETTES :
   peu d'ordres ≈ le fond, beaucoup = foncé). Les feuilles de thème du terminal ne sont pas lues.
   Un thème CARRÉ du terminal (data-theme-carre, posé par js/liaison.js) met tous les angles à 0.
   Contrat de performance (tests/test_contrat.py) : ni flou, ni mix-blend-mode, ni
   animation infinie, ni @import ; aucune ressource externe.
   ══════════════════════════════════════════════════════════════════════════════ */
:root {
  color-scheme: dark;
  /* Le plus grand rayon permis : chaque coin s'écrit min(Npx, var(--r-angle)). Aucun plafond par
     défaut ; 0 quand le thème du terminal est carré (ci-dessous). Lu aussi par js/bookmap.js pour
     les pastilles dessinées. Les ronds numérotés (.num) restent ronds : ce sont ceux de la carte. */
  --r-angle: 999px;
  --police-carte: 'Segoe UI Variable Text', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Segoe UI', Roboto, sans-serif;
  --fond-page: #070910;
  --carte-fond: #090c14;
  --carte-non-observe: #0d111b;
  --carte-hachure: #222a3c;
  --carte-panneau: #0b0e16;
  --carte-grille: rgba(255, 255, 255, 0.055);
  --carte-pastille: rgba(8, 11, 19, 0.88);
  --carte-prix: #ffffff;
  --carte-mur-bid: #3ee6b5;
  --carte-mur-ask: #ff7a93;
  --carte-gamma: #c9a7ff;
  --carte-live: #7cc4ff;
  --carte-publie: #ffd166;
  /* La carte dessinée (canevas) : le trait « maintenant », les repères numérotés et le prix venu du
     terminal (--carte-accent, et l'encre posée dessus) ; l'encre de l'étiquette du prix ; la croix. */
  --carte-accent: #ffd166;
  --carte-sur-accent: #0b0b12;
  --carte-prix-texte: #0b0b12;
  --carte-prix-halo: rgba(0, 0, 0, 0.6);
  --carte-sur-gamma: #0b0b12;
  --carte-croix: rgba(255, 255, 255, 0.35);
  --ink-1: #eef2ff;
  --ink-2: #b3bbd3;
  --ink-3: #8b94ae;
  --up: #22c39a;
  --down: #ff5a7a;
  /* L'accent du CADRE (interrupteur de mode, boutons qui disent l'action, explication) : celui du
     thème du terminal quand il est décrit (js/liaison.js le pose sur <html>), sinon ce jaune. */
  --accent: #ffd166;
  --accent-fond: rgba(255, 209, 102, 0.16);
  --accent-bord: rgba(255, 209, 102, 0.55);
  --bord: rgba(255, 255, 255, 0.09);
  --surface: #10141f;
  --surface-2: #161b29;
  --actif: rgba(124, 196, 255, 0.16);
  --actif-ink: #bfe2ff;
  --actif-bord: rgba(124, 196, 255, 0.45);
  --ombre: 0, 0, 0;        /* la couleur des ombres portées (rgba(var(--ombre), a)) */
  --statut-fond: rgba(60, 14, 24, 0.92);
  --statut-ink: #ffd0d8;
  --statut-bord: rgba(255, 90, 122, 0.5);
  --lecture-max: 440px;    /* largeur maximale de la lecture au pointeur (lue aussi par js/bookmap.js) */
}
/* Thème CARRÉ du terminal (ses coins sont à 0 ; un oui ou un non, jamais son nom) : la carte aussi,
   boutons, pastilles, panneaux et étiquettes dessinées. Avant, elle restait arrondie, même ouverte
   depuis Bureau 95, le thème par défaut (revue du 14/10, M18 ; décision du 11/10 « carré partout »). */
:root[data-theme-carre] { --r-angle: 0px; }
/* Thème CLAIR du terminal : la carte claire. Fond presque blanc, encres foncées ; les couleurs
   des repères foncées d'autant (turquoise, rose, violet restent leurs noms) ; « maintenant » en
   orange (le jaune ne se lit pas sur du blanc) ; la ligne du prix du Complet en noir. La ligne
   « à fil noir » du Lisible ne change pas (blanche, fil noir, bord sombre : js/bookmap.js). */
:root[data-theme-mode="clair"] {
  color-scheme: light;
  --fond-page: #e9edf4;
  --carte-fond: #f4f6fa;
  --carte-non-observe: #e7eaf1;
  --carte-hachure: #b3bccc;
  --carte-panneau: #f8f9fc;
  --carte-grille: rgba(15, 23, 42, 0.07);
  --carte-pastille: rgba(255, 255, 255, 0.92);
  --carte-prix: #0f172a;
  --carte-mur-bid: #0d8c80;
  --carte-mur-ask: #d0336f;
  --carte-gamma: #7c3aed;
  --carte-live: #0369a1;
  --carte-publie: #b45309;
  --carte-accent: #c2410c;
  --carte-sur-accent: #ffffff;
  --carte-prix-texte: #ffffff;
  --carte-prix-halo: rgba(255, 255, 255, 0.85);
  --carte-sur-gamma: #ffffff;
  --carte-croix: rgba(15, 23, 42, 0.4);
  --ink-1: #0f172a;
  --ink-2: #334155;
  --ink-3: #566074;
  --up: #0f9a6e;
  --down: #e0364f;
  --accent: #0b84b0;
  --accent-fond: rgba(11, 132, 176, 0.16);
  --accent-bord: rgba(11, 132, 176, 0.55);
  --bord: rgba(15, 23, 42, 0.13);
  --surface: #ffffff;
  --surface-2: #eef2f7;
  --actif: rgba(3, 105, 161, 0.12);
  --actif-ink: #075985;
  --actif-bord: rgba(3, 105, 161, 0.4);
  --ombre: 60, 72, 96;
  --statut-fond: rgba(255, 236, 239, 0.96);
  --statut-ink: #9f1239;
  --statut-bord: rgba(224, 54, 79, 0.45);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--fond-page);
  color: var(--ink-1);
  font-family: var(--police-carte);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ─── Barre ───
   Les puces des calques tiennent sur UNE ligne qui défile horizontalement : sur la ligne du titre
   quand il y a la place (≥ 1280 px), sinon sur leur propre ligne. Elles ne s'empilent jamais en
   colonne (entre 641 et ~1900 px, l'en-tête montait à 332 px et écrasait la carte). */
.barre {
  display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap;
  padding: 6px 12px; border-bottom: 1px solid var(--bord); background: var(--carte-panneau);
}
.barre-gauche { display: flex; align-items: baseline; gap: 12px; min-width: 0; flex: 0 1 auto; }
.barre h1 { font-size: 15px; margin: 0; font-weight: 650; letter-spacing: 0.2px; white-space: nowrap; }
.barre .sous { font-weight: 400; color: var(--ink-3); font-size: 12px; margin-left: 6px; }
.retour { color: var(--ink-2); text-decoration: none; font-size: 12.5px; padding: 4px 8px; border-radius: min(8px, var(--r-angle)); border: 1px solid var(--bord); }
.retour:hover, .retour:focus-visible { color: var(--ink-1); background: var(--surface-2); }
.calques { display: flex; flex-wrap: nowrap; gap: 4px; flex: 1 1 0; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.barre-droite { display: flex; gap: 6px; flex: 0 0 auto; }
@media (max-width: 1599px) { .barre .sous { display: none; } }
@media (max-width: 1279px) { .calques { order: 3; flex: 1 1 100%; } }
/* Marge intérieure de 8 px (comme sous 640 px) : les noms justes (« Gros paquets », « ≡ Rafales ») sont
   plus longs que les anciens, et la rangée garde autant de puces entièrement visibles. */
.puce, .bouton {
  font: inherit; font-size: 12px; color: var(--ink-2); background: transparent;
  border: 1px solid var(--bord); border-radius: min(999px, var(--r-angle)); padding: 4px 8px; cursor: pointer;
}
.puce, .bouton { white-space: nowrap; }
.bouton { border-radius: min(8px, var(--r-angle)); }
.puce:hover, .bouton:hover { color: var(--ink-1); background: var(--surface-2); }
.puce[aria-pressed="true"], .bouton[aria-pressed="true"], .bouton[aria-expanded="true"] {
  color: var(--actif-ink); background: var(--actif); border-color: var(--actif-bord);
}
.puce:focus-visible, .bouton:focus-visible, .retour:focus-visible, select:focus-visible, input:focus-visible, .fermer:focus-visible {
  outline: 2px solid var(--carte-live); outline-offset: 1px;
}

/* ─── Scène ─── */
.scene { position: relative; flex: 1; min-height: 160px; }
#carte { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
.statut {
  position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px);
  background: var(--statut-fond); color: var(--statut-ink); border: 1px solid var(--statut-bord);
  border-radius: min(8px, var(--r-angle)); padding: 5px 9px; font-size: 12px; pointer-events: none;
}

/* ─── Lecture au pointeur ─── */
.lecture {
  position: fixed; left: 0; top: 0; z-index: 20; pointer-events: none;
  background: var(--carte-pastille); border: 1px solid var(--bord); border-radius: min(8px, var(--r-angle));
  padding: 6px 9px; font-size: 12px; line-height: 1.45; color: var(--ink-2); max-width: min(var(--lecture-max), 92vw);
  box-shadow: 0 8px 24px rgba(var(--ombre), 0.45);
}
.lecture b { color: var(--ink-1); }
/* Le lien d'un repère vers le graphique (« Voir sur le graphique ▸ ») : le seul endroit de la
   lecture qui prend le pointeur (la page la garde ouverte pendant qu'on y va : js/bookmap.js). */
.lecture .lecture-lien {
  display: inline-block; margin-top: 4px; padding: 3px 0; pointer-events: auto;
  color: var(--carte-live); font-weight: 600; text-decoration: none;
}
.lecture .lecture-lien[hidden] { display: none; }
.lecture .lecture-lien:hover, .lecture .lecture-lien:focus-visible { text-decoration: underline; }
@media (pointer: coarse) { .lecture .lecture-lien { padding: 9px 0 6px; } }

/* ─── Panneaux ─── */
/* Sous la barre RÉELLE (--haut-barre : son bas, mesuré par la page) et jamais plus bas que l'écran
   visible (dvh : sans les barres du navigateur mobile) — le bas d'un panneau reste atteignable. */
.panneau-flottant {
  position: fixed; z-index: 30; top: calc(var(--haut-barre, 52px) + 6px); right: 12px; width: min(360px, calc(100vw - 24px));
  max-height: calc(100vh - var(--haut-barre, 52px) - 14px); max-height: calc(100dvh - var(--haut-barre, 52px) - 14px);
  overflow: auto; overscroll-behavior: contain;
  background: var(--surface); border: 1px solid var(--bord); border-radius: min(12px, var(--r-angle));
  padding: 10px 14px 14px; box-shadow: 0 18px 50px rgba(var(--ombre), 0.55);
}
.panneau-flottant.large { width: min(560px, calc(100vw - 24px)); }
.panneau-tete { display: flex; align-items: center; justify-content: space-between; }
.panneau-flottant h2 { font-size: 14px; margin: 4px 0; }
.panneau-flottant h3 { font-size: 13px; margin: 14px 0 4px; color: var(--ink-1); }
.panneau-flottant p, .panneau-flottant dd { color: var(--ink-2); line-height: 1.5; margin: 4px 0; }
.panneau-flottant dt { color: var(--ink-1); font-weight: 600; margin-top: 8px; }
.panneau-flottant dd { margin-left: 0; }
.note { font-size: 12px; color: var(--ink-3) !important; }
/* Les dernières rafales : une par ligne, chiffres alignés (la lecture compare des tailles). */
.liste-rafales { margin: 6px 0 0; padding-left: 0; list-style: none; font-size: 12px; font-variant-numeric: tabular-nums; }
.liste-rafales li { padding: 3px 0; border-bottom: 1px solid var(--bord); color: var(--ink-2); }
.liste-rafales li b { color: var(--ink-1); font-weight: 600; }
.liste-rafales .achat { color: var(--up); }
.liste-rafales .vente { color: var(--down); }
.fermer { font: inherit; font-size: 18px; line-height: 1; background: none; border: 0; color: var(--ink-2); cursor: pointer; padding: 4px 6px; border-radius: min(6px, var(--r-angle)); }
.fermer:hover { color: var(--ink-1); background: var(--surface-2); }
fieldset { border: 1px solid var(--bord); border-radius: min(10px, var(--r-angle)); margin: 10px 0; padding: 6px 10px 10px; }
legend { color: var(--ink-2); font-size: 12px; padding: 0 4px; }
label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--ink-2); margin-top: 8px; }
label output, .champ output { color: var(--ink-1); font-weight: 600; }
.champ { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; font-size: 12px; color: var(--ink-2); margin-top: 8px; }
.champ label { display: inline; margin: 0; }
.champ input[type="range"] { flex: 1 1 100%; }
select, input[type="range"] { width: 100%; }
select {
  font: inherit; font-size: 12.5px; color: var(--ink-1); background: var(--surface-2);
  border: 1px solid var(--bord); border-radius: min(8px, var(--r-angle)); padding: 5px 8px;
}
input[type="range"] { accent-color: var(--carte-live); }
.barre-couleurs { margin: 6px 0 2px; }
/* Une rampe par côté peint (deux pour « bid / ask teintés ») ; le contour ne prend pas de place,
   pour que chaque libellé de .grad tombe sous SA couleur. */
#barreCouleurs .rampe { height: 12px; border-radius: min(3px, var(--r-angle)); background-size: 100% 100%; image-rendering: pixelated; outline: 1px solid var(--bord); }
.rampe-nom { display: block; font-size: 11px; color: var(--ink-3); margin: 6px 0 2px; }
.grad { position: relative; height: 15px; font-size: 11px; color: var(--ink-3); margin-top: 4px; }
.grad span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.grad span.debut { left: 0 !important; transform: none; }
.grad span.fin { left: 100% !important; transform: translateX(-100%); }

/* ─── Guide ───
   Le résumé : une bande de hauteur FIXE sous la barre, là dès l'ouverture (« lecture… ») : le canevas
   ne change pas de taille quand la phrase arrive ou change. Un appui la déplie (phrase entière). */
.resume-carte {
  flex: 0 0 auto; height: 42px; padding: 4px 12px 0; overflow: hidden; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; cursor: pointer;
  font-size: 12.5px; line-height: 18px; color: var(--ink-1); background: var(--surface); border-bottom: 1px solid var(--bord);
}
/* Deux lignes (trois sur un téléphone) au plus : la phrase commence par son âge ; coupée, elle le garde.
   Hauteur = lignes entières (haut + lignes + 1 px + bord) : aucune ligne coupée à moitié. */
@media (max-width: 640px) { .resume-carte { height: 56px; font-size: 12px; line-height: 17px; padding: 3px 8px 0; -webkit-line-clamp: 3; } }
/* Écran bas (téléphone couché) : une ligne, la carte garde sa hauteur. */
@media (max-height: 420px) { .resume-carte { height: 24px; display: block; white-space: nowrap; line-height: 17px; padding: 3px 8px; } }
.resume-carte.ouvert { height: auto; max-height: 40vh; overflow-y: auto; display: block; white-space: normal; -webkit-line-clamp: unset; padding-bottom: 4px; }
.resume-carte[hidden] { display: none; }
/* « Comment lire cette carte » : posée sur la carte, sans prendre le pointeur (hors de ses boutons). */
.guide-intro {
  position: absolute; left: 8px; bottom: 8px; z-index: 5; width: min(430px, calc(100% - 16px)); max-height: calc(100% - 16px); overflow: hidden;
  background: var(--surface); border: 1px solid var(--accent-bord); border-radius: min(12px, var(--r-angle)); padding: 6px 12px 10px;
  box-shadow: 0 12px 34px rgba(var(--ombre), 0.5); pointer-events: none; font-size: 12.5px; color: var(--ink-2);
}
.guide-intro h2 { font-size: 14px; margin: 4px 0; color: var(--ink-1); }
.guide-intro button { pointer-events: auto; }
.guide-intro .note { margin: 6px 0 8px; line-height: 1.45; }
.statut { z-index: 6; }
.intro-liste { margin: 4px 0 0; padding: 0; list-style: none; }
.intro-liste li { display: grid; grid-template-columns: 22px 1fr; gap: 6px; margin: 5px 0; line-height: 1.4; }
.intro-liste b { color: var(--ink-1); font-weight: 600; }
.intro-liste i { color: var(--ink-3); }
.intro-liste .num {
  width: 19px; height: 19px; border-radius: 50%; background: var(--carte-accent); color: var(--carte-sur-accent); font-weight: 700; font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center;
}
.pastille-couleur { display: inline-block; width: 10px; height: 10px; border-radius: min(2px, var(--r-angle)); vertical-align: -1px; }
.mot-couleur { white-space: nowrap; }
.liste-journal time { color: var(--ink-3); }
.liste-journal .sym { display: inline-block; min-width: 1.1em; text-align: center; font-weight: 700; }
.leg-guide dd { margin-bottom: 6px; }
/* Puces qui débordent : un fondu au bord qui dit « il y en a d'autres, faire défiler ». */
.calques.deborde-droite { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent); }
/* Écran étroit ou bas : l'explication passe EN HAUT de la carte (le prix et les bulles, en bas, restent
   visibles), compacte (titres seuls, détail au survol de la légende), et défile si besoin. */
@media (max-width: 640px), (max-height: 560px) {
  .guide-intro { top: 6px; bottom: auto; max-height: calc(100% - 12px); overflow-y: auto; padding: 4px 10px 8px; }
  .guide-intro .detail:not(.garde) { display: none; }
  .guide-intro .note { margin: 4px 0 6px; }
  /* Quand l'explication défile, « J'ai compris » reste au bas du cadre, visible sans défiler. */
  .guide-intro #guideIntroOk { position: sticky; bottom: 0; display: block; width: 100%; background: var(--surface); box-shadow: 0 6px 0 2px var(--surface), 0 -8px 8px var(--surface); }
}
/* Écran bas ou étroit (téléphone), ou explication qui couvre plus de la moitié de la carte (classe
   .couvre, posée par la page) : elle prend le pointeur — un appui ou un glissement sur ce qu'on lit
   ne touche pas la carte cachée dessous, et l'explication défile jusqu'à « J'ai compris ». */
@media (max-width: 640px), (max-height: 560px) { .guide-intro { pointer-events: auto; } }
.guide-intro.couvre { pointer-events: auto; }

@media (max-width: 640px) {
  .guide-intro { font-size: 12px; padding: 4px 10px 8px; }
  .intro-liste li { margin: 3px 0; }
  .barre { padding: 6px 8px; gap: 6px; }
  .barre .sous { display: none; }
  .puce { padding: 3px 8px; font-size: 11.5px; }
  .calques { order: 3; flex-basis: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .barre h1 { font-size: 14px; }
  .bouton { padding: 4px 8px; }
  .panneau-flottant { right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

/* ─── Mode Lisible / Complet ───
   Le mode est posé sur <html data-mode> avant le premier rendu (script de tête de bookmap.html ; le
   même réglage que le terminal, gardé 'debutant' / 'expert'). Lisible : un écran calme — titre, Guide,
   mode, Suivre, Journal, Légende ; le reste (puces des calques, Réglages, Rafales) est en Complet. */
/* Lisible est le DÉFAUT de la feuille (aucun attribut, ou une valeur inconnue) : rien du mode Complet
   ne s'affiche avant que la page ait lu le mode, même un instant. */
html:not([data-mode="expert"]) .expert-seul, [data-mode="expert"] .debutant-seul { display: none !important; }
html:not([data-mode="expert"]) .calques .puce:not([data-calque="guide"]) { display: none; }
html:not([data-mode="expert"]) .calques { flex: 0 0 auto; order: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; }
/* L'en-tête : les boutons de la page à droite (plus d'interrupteur de mode depuis le 11/10/2026 :
   « Le détail » est une case du panneau « Choisir l'affichage »). */
.barre { justify-content: flex-end; }
.barre-gauche { margin-right: auto; }
html:not([data-mode="expert"]) .barre-gauche { margin-right: 0; }
/* Téléphone couché en Expert (568 px) : la première rangée garde ses huit boutons. */
@media (max-width: 640px) { [data-mode="expert"] .barre-droite { gap: 4px; } [data-mode="expert"] .barre .bouton { padding: 4px 6px; } }
/* « Suivre » rappelé (bord accent, sans animation) quand la carte montre le passé en mode débutant. */
.bouton.accent { border-color: var(--accent); color: var(--ink-1); }
/* La ligne du haut : UNE ligne de hauteur fixe (la carte ne change pas de taille quand elle arrive) ;
   ouverte par un appui, elle montre son détail sur plusieurs lignes. */
html:not([data-mode="expert"]) .resume-carte { height: 26px; display: block; white-space: nowrap; text-overflow: ellipsis; line-height: 18px; padding: 4px 12px 0; -webkit-line-clamp: unset; }
@media (max-width: 640px) { html:not([data-mode="expert"]) .resume-carte { height: 26px; padding: 4px 8px 0; font-size: 12px; } }
@media (max-width: 380px) { html:not([data-mode="expert"]) .resume-carte { font-size: 11.5px; } }
/* Ouverte : une feuille PAR-DESSUS la carte (js : marge basse négative de ce qu'elle dépasse) ; la
   carte garde sa taille et son échelle. */
html:not([data-mode="expert"]) .resume-carte.ouvert { height: auto; max-height: 40vh; overflow-y: auto; white-space: pre-line; padding-bottom: 6px;
  position: relative; z-index: 12; box-shadow: 0 10px 24px rgba(var(--ombre), 0.5); }
/* Détail au toucher : la ligne des âges, plus discrète. */
.lecture .lecture-ages { color: var(--ink-3); }
/* L'indice « Touchez pour le détail » (téléphone, mode débutant) : une seule fois, sans prendre le
   pointeur ; un fondu unique à l'apparition. */
.indice-tap {
  position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); z-index: 4; pointer-events: none;
  background: var(--surface); color: var(--ink-1); border: 1px solid var(--accent-bord); border-radius: min(999px, var(--r-angle));
  padding: 5px 12px; font-size: 12.5px; white-space: nowrap; box-shadow: 0 6px 18px rgba(var(--ombre), 0.45);
  animation: indice-fondu 300ms ease-out 1;
}
.indice-tap[hidden] { display: none; }
@keyframes indice-fondu { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .indice-tap { animation: none; } }

/* Détail au toucher (débutant) : un fond plein — ni la chaleur, ni un repère, ni l'axe ne
   transparaissent sous le texte. */
html:not([data-mode="expert"]) .lecture { background: var(--surface); }
/* Statut d'erreur (débutant) : une ligne, au-dessus de l'axe du temps. */
html:not([data-mode="expert"]) .statut { bottom: 26px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Légende débutante : les gestes du doigt sur un écran tactile, ceux de la souris ailleurs ; trois
   graduations seulement sous 480 px (les nombres ne se touchent pas). */
.geste-doigt { display: none; }
@media (pointer: coarse) { .geste-souris { display: none; } .geste-doigt { display: inline; } }
@media (max-width: 479px) { #gradBarre span.mi { display: none; } }

/* ─── « Choisir l'affichage » ───
   Un seul panneau : « Tout afficher » et « Revenir au départ » en tête, puis les calques rangés par
   question, chacun avec sa phrase « C'est quoi ? » (petite, grise : du détail), et tout en bas, replié,
   les réglages fins (Complet). Le bouton dit son nom entier, « Affichage » quand la place manque :
   jamais coupé. */
.bouton-affichage .aff-court { display: none; }
/* Où le nom entier ne tient pas (mesuré : 121 px contre 73) — Complet : sous 800 px (à 650, la barre
   passait sur trois rangées) et dès 1280 px, où les puces des calques partagent la rangée (une puce de
   moins à 1280, 1366 et 1680 px) ; Lisible : sous 360 px. */
@media (max-width: 799px), (min-width: 1280px) {
  [data-mode="expert"] .bouton-affichage .aff-long { display: none; }
  [data-mode="expert"] .bouton-affichage .aff-court { display: inline; }
}
@media (max-width: 359px) {
  .bouton-affichage .aff-long { display: none; }
  .bouton-affichage .aff-court { display: inline; }
}
.affichage .aff-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.affichage .aff-actions .bouton { flex: 1 1 auto; padding: 7px 10px; color: var(--ink-1); }
.panneau-flottant .aff-note { margin: 6px 0 2px; }
.aff-groupe { padding: 2px 10px 8px; }
.aff-groupe legend { color: var(--ink-1); font-weight: 600; font-size: 12.5px; }
.aff-calque { margin-top: 4px; }
.aff-calque label { flex-direction: row; align-items: center; gap: 8px; margin: 0; min-height: 28px; color: var(--ink-1); font-size: 12.5px; cursor: pointer; }
.aff-calque input { flex-shrink: 0; width: 16px; height: 16px; margin: 0; accent-color: var(--carte-live); cursor: pointer; }
.aff-calque input:disabled { cursor: default; }
.aff-toujours { margin-left: auto; font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.panneau-flottant .aff-quoi { margin: 0 0 2px 24px; font-size: 11.5px; line-height: 1.4; color: var(--ink-3); }
.aff-qq { color: var(--ink-2); font-weight: 600; }
.reglages-fins { margin-top: 12px; border-top: 1px solid var(--bord); padding-top: 4px; }
.reglages-fins > summary { cursor: pointer; padding: 6px 0; font-size: 13px; font-weight: 600; color: var(--ink-1); }
.reglages-fins > summary:focus-visible { outline: 2px solid var(--carte-live); outline-offset: 1px; }

/* ─── Lisible : la mini-clé des couleurs (js : placerMiniCle) ───
   Petite, permanente, dans un coin libre de la carte ; inerte au pointeur (les gestes vont à la carte).
   Fond plein, comme la bulle du Lisible : une rangée jaune de la chaleur ne transparaît pas sous ses mots. */
.mini-cle {
  position: absolute; z-index: 3; left: 8px; top: 8px; pointer-events: none;
  display: flex; flex-direction: column; gap: 3px; padding: 4px 8px 5px;
  background: var(--surface); border: 1px solid var(--bord); border-radius: min(8px, var(--r-angle));
  font-size: 11px; line-height: 1.25; color: var(--ink-2); white-space: nowrap;
}
.mini-cle[hidden] { display: none; }
.mc-ligne { display: flex; align-items: center; gap: 5px; }
.mc-ligne b { min-width: 3.3em; color: var(--ink-1); font-weight: 600; }
.mc-rampe { flex-shrink: 0; width: 56px; height: 8px; border-radius: min(2px, var(--r-angle)); background-size: 100% 100%; image-rendering: pixelated; outline: 1px solid var(--bord); }
.mc-sens { font-size: 10.5px; color: var(--ink-3); }

/* ─── Au doigt (pointer: coarse) : des cibles d'au moins 40 × 40 px dans la barre ───
   « ← Terminal », chaque bouton et chaque puce : 32 px de haut et 40 de large au moins, et un ::before
   transparent, centré, qui porte la zone de toucher à 40 px de côté (4 px au-dessus et au-dessous, dans
   la marge de la barre et dans l'écart de 9 px entre ses rangées : 1 px entre les zones, qui ne se
   couvrent pas). Les puces de Complet sont dans une rangée qui défile, qui les rognerait : elle a 4 px de
   marge haute et basse. Le bouton de mode (un autre chantier) ne change pas. Lisible à 390 px : la barre
   fait 82 px (deux rangées, ≤ 82). */
@media (pointer: coarse) {
  .barre { padding-top: 4px; padding-bottom: 4px; row-gap: 9px; }
  .barre .retour, .barre .puce, .barre .bouton {
    position: relative; flex-shrink: 0; min-width: 40px; min-height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .barre .retour::before, .barre .puce::before, .barre .bouton::before {
    content: ''; position: absolute; inset: min(0px, calc(50% - 20px));
  }
  [data-mode="expert"] .calques { padding-top: 4px; padding-bottom: 4px; }
}