/* interface/base.css — variables, thème, typographie, boutons, barre supérieure
   Extrait de styles.css à l'étape 8 du découpage. L'ordre de chargement (index.html) est celui
   de l'ancienne feuille : à spécificité égale, la dernière règle l'emporte (voir CARTE.md, CSS). */
 /* =============================================================================
    FEUILLE DE STYLE — plan (rechercher le titre entre « ==== » pour y aller)
    A. SOCLE ET COMPOSANTS — chaque composant regroupe ses règles, sous-blocs compris
       Variables (:root) · BARRE SUPÉRIEURE · RECHERCHE ET FILTRES (+ puces du filtre) ·
       TABLEAU KANBAN (+ listes à deux colonnes, netteté des éléments déplacés, titres de
       listes) · PALETTES DE COULEURS · FENÊTRES MODALES (+ Importer, fenêtres déplaçables,
       Nouvelle liste, fenêtres carte) · AGENDA · ADAPTATION AUX PETITS ÉCRANS · Vue
       d'ensemble des 4 tableaux · PARAMÈTRES (+ couleur des flèches) · FENÊTRES ÉTIQUETTES
       ET FICHE CARTE (compléments)
    B. SURCHARGES ORDONNÉES — une trentaine de règles, qui DOIVENT rester ici
       Ajustements actions cartes/formulaires · FENÊTRES COMPACTES · blocs « — suite » ·
       ÉTAT DE LA PERSISTANCE · Correctifs taille d'interface. Chacune l'emporte sur une
       règle générique de même spécificité visant le même élément ; la remonter changerait
       le rendu, et la neutraliser demanderait de toucher trop de règles à la fois.
    C. MODULES AUTONOMES
       ICÔNES SVG · RÈGLES ET RELANCES · INTRO · ARÈNE DE SURVIE (mini-jeu)
    Remise en ordre (25–26/09/2026), sans aucun changement de rendu :
    - La partie B est passée d'environ 145 à environ 30 règles : blocs entiers ou partiels
      déplacés vers leur composant, règles rapatriées une à une, fenêtre Étiquettes et
      fiche carte sorties de la section Paramètres, déclarations de même sélecteur
      fusionnées, déclarations jamais appliquées retirées.
    - Quand une surcharge ne gagnait que par sa position, la dépendance a été rendue
      explicite par la spécificité : soit le style générique passe dans :where() (4 cas,
      « :where(.add-card-modal) … »), soit la surcharge répète sa classe (5 cas, « .a.a »,
      commentés « spécificité renforcée »). Ces deux écritures ne changent pas les
      éléments visés.
    - Critère : une règle ne change de place ou de spécificité que si, pour chaque autre
      règle pouvant viser un même élément avec une propriété de même famille, le vainqueur
      de la cascade (importance, spécificité, ordre) est le même avant et après. « Pouvant
      viser » s'appuie sur le recensement de toutes les façons dont le code pose les
      classes (className, class="…", classList, svgEl, identifiants) et sur les
      combinaisons de classes réellement observées dans le navigateur.
    - Preuve : style calculé identique (éléments + ::before/::after) sur 83 états de
      l'interface × 3 largeurs d'écran, survol, focus, glisser, recherche et filtre compris
      (≈ 115 000 éléments comparés). Outils : outils_css.zip.
    Conventions :
    - Toute dimension s'écrit calc(Npx * var(--ui-scale-factor)) : elle suit la taille
      d'interface (75 % / 100 %). Le CONTENU du tableau utilise les variables --m-*
      (échelle modèle fixe) car le zoom du tableau s'applique par-dessus.
    - Les couleurs passent par les variables (--accent, --surface…), pilotées en JS
      par applyAppearancePreferences().
    - Nouveau style : l'écrire dans la section de son composant (partie A ou C). Une
      surcharge de B ne se déplace qu'avec le critère ci-dessus, puis vérification par le
      banc de non-régression visuelle.
    ============================================================================= */
 :root{
 /* Echelle globale de l'interface (curseur Parametres > Interface).
    75 = apparence compacte actuelle (facteur 1, aucun changement).
    100 = apparence d'origine avant compactage (facteur 100/75).
    Cette valeur est ecrasee en JS (applyAppearancePreferences) depuis
    state.settings.uiScale ; la valeur ci-dessous n'est qu'un repli. */
 --ui-scale-pct:75;
 --ui-scale-factor:calc(var(--ui-scale-pct) / 75);
 --bg:#12141a;
 --board-bg-1:#10141c;
 --board-bg-2:#1b2430;
 --surface:#1a1d26;
 --surface-2:#20232d;
 --surface-3:#282c38;
 --border:#333a48;
 --border-soft:#262a35;
 --text:#e7e9ee;
 --text-dim:#8891a3;
 --text-faint:#5c6376;
 --accent:#5fb3a3;
 --accent-dim:#3d7268;
 --card-border-width:calc(1px * var(--ui-scale-factor));
 --card-border-color:rgba(255,255,255,.16);
 --card-radius:calc(4.5px * var(--ui-scale-factor));
 --list-radius:calc(5.25px * var(--ui-scale-factor));
 --card-shadow-opacity:.16;
 --card-font-size:calc(10px * var(--ui-scale-factor));
 --card-gap:calc(5.25px * var(--ui-scale-factor));
 --list-width:calc(204px * var(--ui-scale-factor));
 --list-title-size:calc(12.75px * var(--ui-scale-factor));
 --list-title-fx:1;
 --list-shadow-opacity:0;
 --accent-2:#e0a458;
 --danger:#d9584f;
 --swatch-size:calc(15px * var(--ui-scale-factor));
 --swatch-radius:calc(3.75px * var(--ui-scale-factor));
 --swatch-gap:calc(3px * var(--ui-scale-factor));
 --remind:#e3b155;
 --remind-bg:rgba(217,161,61,.16);
 --remind-text:#ffd792;
 }
 *{box-sizing:border-box;}
 html,body{height:100%;}
 body{
 margin:0; background:var(--bg); color:var(--text);
 font-family:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
 /* Netteté des petites polices : rendu natif, sans filtre de contraste ou
    transformation qui pourrait brouiller les glyphes et les coordonnées. */
 -webkit-font-smoothing:antialiased;
 -moz-osx-font-smoothing:grayscale;
 text-rendering:optimizeLegibility;
 font-kerning:normal;
 font-optical-sizing:auto;
 font-synthesis:none;
 -webkit-text-size-adjust:100%;
 overflow:hidden;
 }
 input,textarea,button,select{font-family:inherit; color:inherit; font-synthesis:none;}
 button{cursor:pointer;}
 ::-webkit-scrollbar{height:calc(7.5px * var(--ui-scale-factor));width:calc(7.5px * var(--ui-scale-factor));}
 ::-webkit-scrollbar-track{background:transparent;}
 ::-webkit-scrollbar-thumb{background:var(--border);border-radius:calc(7.5px * var(--ui-scale-factor));}
 ::-webkit-scrollbar-thumb:hover{background:var(--border-hover,#414a5c);}
 /* Contraste / luminosité de l'interface : filtre posé UNIQUEMENT s'il change quelque chose.
    Même neutre (contrast(1) brightness(1)), un filtre sur #app oblige le navigateur à composer
    toute l'interface dans une surface intermédiaire : les éléments en mouvement 3D (listes,
    Paramètres) y étaient rééchantillonnés (flou) puis « se recalaient » à l'arrêt. Les fenêtres
    hors de #app (+ Liste, Étiquettes, fiches) n'avaient pas ce défaut, d'où la différence. */
 #app{ height:100dvh; display:flex; flex-direction:column; filter:var(--ui-filter,none);}
 /* Fond du tableau et de l’agenda.
 Un petit canvas ditheré est étiré derrière le contenu afin de limiter les
 bandes visibles (« banding ») dans les dégradés sombres. */
 /* Le bitmap dégradé est peint sur la fenêtre de chaque vue, pas sur le
 contenu défilant : il couvre toujours l'écran, sur les deux axes, à tout zoom. */
 #boardView,#agendaView{
 position:relative;background-color:var(--board-bg-1);
 background-size:100% 100%;background-position:0 0;
 background-repeat:no-repeat;background-attachment:scroll;
 }
 #boardView > *,#agendaView > *{position:relative;z-index:1;}
 /* ==================== BARRE SUPÉRIEURE ==================== */
 .topbar{
 display:flex; align-items:center; gap:calc(10.5px * var(--ui-scale-factor));
 padding:calc(7.5px * var(--ui-scale-factor)) calc(12px * var(--ui-scale-factor)); border-bottom:calc(1px * var(--ui-scale-factor)) solid var(--border-soft);
 background:var(--surface); flex-shrink:0; flex-wrap:wrap;
 }
 .brand{display:flex; align-items:center; gap:calc(6.75px * var(--ui-scale-factor)); min-width:0;}
 .brand-mark{
 width:calc(19.5px * var(--ui-scale-factor)); height:calc(19.5px * var(--ui-scale-factor)); border-radius:calc(4.5px * var(--ui-scale-factor)); flex-shrink:0;
 background:linear-gradient(155deg,var(--accent),var(--accent-dim));
 display:flex; align-items:center; justify-content:center;
 font-family:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; font-weight:700; font-size:calc(11px * var(--ui-scale-factor)); color:#0e1512;
 }
 .board-title-input{
 background:transparent; border:calc(1px * var(--ui-scale-factor)) solid transparent; border-radius:calc(4.5px * var(--ui-scale-factor));
 font-family:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; font-weight:600; font-size:calc(13px * var(--ui-scale-factor)); line-height:1.18;
 color:var(--text); padding:calc(3.75px * var(--ui-scale-factor)) calc(6px * var(--ui-scale-factor)); width:calc(165px * var(--ui-scale-factor)); min-width:calc(45px * var(--ui-scale-factor)); max-width:46vw;
 resize:none; overflow:hidden; white-space:pre-wrap; overflow-wrap:anywhere; box-sizing:border-box;
 /* Hauteur en lignes (--board-title-lines, posé par fitBoardTitle) et non en pixels : elle suit
    aussitôt la taille d'interface (75 % / 100 %) sans décaler le texte dans le champ.
    9.5px = marges intérieures (2 × 3,75) + bordures (2 × 1) ; 1.18em = line-height. Plus de
    max-height (3.7em) : il coupait la 3e ligne en deux, surtout en 75 %. */
 height:calc(var(--board-title-lines,1) * 1.18em + calc(9.5px * var(--ui-scale-factor)));
 }
 .board-title-input:hover{border-color:var(--border);}
 .board-title-input:focus{outline:none; border-color:var(--accent); background:var(--surface-2);}
 .view-switch{
 display:flex; background:var(--surface-2); border:calc(1px * var(--ui-scale-factor)) solid var(--border-soft);
 border-radius:calc(6px * var(--ui-scale-factor)); padding:calc(2.25px * var(--ui-scale-factor)); gap:calc(1.5px * var(--ui-scale-factor));
 }
 .view-btn{
 border:none; background:transparent; color:var(--text-dim);
 font-size:calc(10px * var(--ui-scale-factor)); font-weight:600; padding:calc(4.5px * var(--ui-scale-factor)) calc(10.5px * var(--ui-scale-factor)); border-radius:calc(4.5px * var(--ui-scale-factor));
 }
 .view-btn.active{background:var(--surface-3); color:var(--text);}
 .topbar-actions{display:flex; gap:calc(6px * var(--ui-scale-factor)); margin-left:auto; align-items:center;}
 .settings-wrap{position:relative;}
 .settings-btn{width:calc(25.5px * var(--ui-scale-factor)); height:calc(25.5px * var(--ui-scale-factor)); padding:0; display:flex; align-items:center; justify-content:center; font-size:calc(14px * var(--ui-scale-factor)); line-height:1; border-radius:calc(5.25px * var(--ui-scale-factor));}
 .settings-btn:hover{border-color:var(--text-faint);}
 .settings-menu{
 position:absolute; right:0; top:calc(100% + calc(5.25px * var(--ui-scale-factor))); z-index:5000; width:calc(225px * var(--ui-scale-factor));
 /* Le menu reste entièrement accessible même avec beaucoup de réglages. */
 max-height:calc(100vh - calc(60px * var(--ui-scale-factor)));
 overflow-y:auto;
 overscroll-behavior:contain;
 scrollbar-gutter:stable;
 background:var(--surface-2); border:calc(1px * var(--ui-scale-factor)) solid var(--border); border-radius:calc(6.75px * var(--ui-scale-factor));
 box-shadow:0 calc(9px * var(--ui-scale-factor)) calc(22.5px * var(--ui-scale-factor)) rgba(0,0,0,.3); padding:calc(9px * var(--ui-scale-factor)); display:none;
 }
 .settings-menu.open{display:block;}
 .settings-menu h3{margin:0 0 calc(9px * var(--ui-scale-factor)); font-family:system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; font-size:calc(11px * var(--ui-scale-factor)); font-weight:600;}
 .settings-section{padding:calc(7.5px * var(--ui-scale-factor)) 0; border-top:calc(1px * var(--ui-scale-factor)) solid var(--border-soft);}
 .settings-section:first-of-type{border-top:none; padding-top:0;}
 .settings-group{border-top:calc(1px * var(--ui-scale-factor)) solid var(--border-soft);}
 .settings-group:first-of-type{border-top:none;}
 .settings-group-icon{width:calc(12px * var(--ui-scale-factor));min-width:calc(12px * var(--ui-scale-factor));display:inline-flex;align-items:center;justify-content:center;color:currentColor;font-family:system-ui,-apple-system,'Segoe UI Symbol','Segoe UI',sans-serif;font-size:calc(11px * var(--ui-scale-factor));font-weight:700;line-height:1;filter:none;}
 .settings-group-title{font-weight:700;}
 .settings-group-content{display:none;padding:0 0 calc(3.75px * var(--ui-scale-factor));}
 .settings-group.open .settings-group-content{display:block;}
 .settings-group-content .settings-section{padding:calc(6.75px * var(--ui-scale-factor)) calc(1.5px * var(--ui-scale-factor));border-top:calc(1px * var(--ui-scale-factor)) solid rgba(255,255,255,.045);}
 .settings-group-content .settings-section:first-child{border-top:0;padding-top:calc(3px * var(--ui-scale-factor));}
 .settings-reset{margin-top:calc(7.5px * var(--ui-scale-factor));padding-top:calc(9px * var(--ui-scale-factor));border-top:calc(1px * var(--ui-scale-factor)) solid var(--border-soft);}
 .settings-label{display:flex; align-items:center; justify-content:space-between; gap:calc(9px * var(--ui-scale-factor)); font-size:calc(9px * var(--ui-scale-factor)); font-weight:600; color:var(--text-dim); margin-bottom:calc(6.75px * var(--ui-scale-factor));}
 .settings-value{color:var(--text); font-variant-numeric:tabular-nums;}
 .settings-range{width:100%; accent-color:var(--accent); cursor:pointer; display:block; margin:0;}
 /* Réglages à curseur : réserve la même hauteur aux intitulés, qu’ils tiennent
 sur une ou deux lignes. Tous les curseurs démarrent ainsi au même niveau
 et restent nettement séparés du texte placé au-dessus. */
 .settings-section:has(> .settings-range) .settings-label{
 min-height:calc(25.5px * var(--ui-scale-factor));
 margin-bottom:calc(9px * var(--ui-scale-factor));
 align-items:flex-start;
 line-height:1.35;
 }
 .settings-section:has(> .settings-range) .settings-label > span:first-child{
 flex:1 1 auto;
 min-width:0;
 padding-right:calc(6px * var(--ui-scale-factor));
 }
 .settings-section:has(> .settings-range) .settings-value{
 flex:0 0 auto;
 line-height:1.35;
 white-space:nowrap;
 }
 .theme-swatch.selected{
 position:relative;
 }
 .gradient-color-field{display:flex;align-items:center;gap:calc(6px * var(--ui-scale-factor));padding:calc(5.25px * var(--ui-scale-factor)) calc(6.75px * var(--ui-scale-factor));border:calc(1px * var(--ui-scale-factor)) solid var(--border);border-radius:calc(5.25px * var(--ui-scale-factor));background:var(--surface);font-size:calc(9px * var(--ui-scale-factor));color:var(--text-dim);}
 .gradient-color-field input[type=color]{width:calc(25.5px * var(--ui-scale-factor));height:calc(21px * var(--ui-scale-factor));padding:0;border:0;background:transparent;cursor:pointer;flex-shrink:0;}
 .gradient-preview{width:calc(22.5px * var(--ui-scale-factor));height:calc(18px * var(--ui-scale-factor));border-radius:calc(3.75px * var(--ui-scale-factor));border:calc(1px * var(--ui-scale-factor)) solid rgba(255,255,255,.28);box-shadow:inset 0 0 0 calc(1px * var(--ui-scale-factor)) rgba(0,0,0,.18);flex-shrink:0;}
 .background-color-palette{margin-top:calc(6.75px * var(--ui-scale-factor));padding:calc(7.5px * var(--ui-scale-factor));border:calc(1px * var(--ui-scale-factor)) solid var(--border);border-radius:calc(6px * var(--ui-scale-factor));background:var(--surface-2);box-shadow:0 calc(7.5px * var(--ui-scale-factor)) calc(18.75px * var(--ui-scale-factor)) rgba(0,0,0,.28);}
 .background-palette-title{display:flex;align-items:center;justify-content:space-between;gap:calc(7.5px * var(--ui-scale-factor));font-size:calc(9px * var(--ui-scale-factor));font-weight:700;margin-bottom:calc(6px * var(--ui-scale-factor));color:var(--text);}
 .background-palette-legend{display:flex;align-items:center;gap:calc(4.5px * var(--ui-scale-factor));}
 .bg-legend-preview{position:relative;width:calc(18px * var(--ui-scale-factor));height:calc(18px * var(--ui-scale-factor));border-radius:calc(4.5px * var(--ui-scale-factor));border:calc(1px * var(--ui-scale-factor)) solid rgba(255,255,255,.28);box-shadow:inset 0 0 0 calc(1px * var(--ui-scale-factor)) rgba(0,0,0,.18);flex-shrink:0;}
 .bg-legend-chip{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:calc(8px * var(--ui-scale-factor));font-weight:800;color:#fff;text-shadow:0 calc(1px * var(--ui-scale-factor)) calc(1.5px * var(--ui-scale-factor)) rgba(0,0,0,.9);pointer-events:none;}
 .background-palette-swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:calc(4.5px * var(--ui-scale-factor));}
 .background-palette-swatch.has-marker{border-color:#fff;box-shadow:0 0 0 calc(1.5px * var(--ui-scale-factor)) rgba(255,255,255,.22);}
 .background-palette-swatch.drag-target{transform:scale(1.12);border-color:#fff;box-shadow:0 0 0 calc(1.5px * var(--ui-scale-factor)) rgba(255,255,255,.5);z-index:3;}
 /* Repères « 1 » et « 2 » : petites pastilles que l'on fait glisser d'une case à l'autre. */
 .bg-palette-marker{
 position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
 width:calc(12px * var(--ui-scale-factor));height:calc(12px * var(--ui-scale-factor));border-radius:50%;
 background:rgba(10,12,16,.75);border:calc(1.125px * var(--ui-scale-factor)) solid #fff;
 display:flex;align-items:center;justify-content:center;
 font-size:calc(8px * var(--ui-scale-factor));font-weight:800;line-height:1;color:#fff;
 text-shadow:0 calc(1px * var(--ui-scale-factor)) calc(1.5px * var(--ui-scale-factor)) rgba(0,0,0,.9);
 cursor:grab;touch-action:none;user-select:none;
 box-shadow:0 calc(1px * var(--ui-scale-factor)) calc(2.25px * var(--ui-scale-factor)) rgba(0,0,0,.5);
 z-index:2;
 }
 .bg-palette-marker:active{cursor:grabbing;}
 .bg-palette-marker.is-dragging{opacity:.25;}
 .background-palette-swatch.has-both-markers .bg-palette-marker[data-key="boardBgColor1"]{transform:translate(-115%,-50%);}
 .background-palette-swatch.has-both-markers .bg-palette-marker[data-key="boardBgColor2"]{transform:translate(15%,-50%);}
 .bg-palette-marker-ghost{
 position:fixed;width:calc(16.5px * var(--ui-scale-factor));height:calc(16.5px * var(--ui-scale-factor));border-radius:50%;
 background:rgba(10,12,16,.85);border:calc(1.125px * var(--ui-scale-factor)) solid #fff;
 display:flex;align-items:center;justify-content:center;
 font-size:calc(9px * var(--ui-scale-factor));font-weight:800;color:#fff;
 text-shadow:0 calc(1px * var(--ui-scale-factor)) calc(1.5px * var(--ui-scale-factor)) rgba(0,0,0,.9);
 pointer-events:none;z-index:99999;
 box-shadow:0 calc(3px * var(--ui-scale-factor)) calc(10.5px * var(--ui-scale-factor)) rgba(0,0,0,.55);
 transform:translate(-50%,-50%);
 }
 .settings-help{margin-top:calc(5.25px * var(--ui-scale-factor)); color:var(--text-faint); font-size:calc(8px * var(--ui-scale-factor)); line-height:1.35; font-weight:400;}
 .help-btn{width:calc(25.5px * var(--ui-scale-factor));height:calc(25.5px * var(--ui-scale-factor));padding:0;display:flex;align-items:center;justify-content:center;font-size:calc(13px * var(--ui-scale-factor));font-weight:750;line-height:1;border-radius:calc(5.25px * var(--ui-scale-factor));}
 .help-btn:hover{border-color:var(--text-faint);}
 /* Aide : sommaire à gauche, contenu à droite, hauteur fixe (seul le contenu défile). */
 .overlay:has(>.help-modal){padding:calc(12px * var(--ui-scale-factor));align-items:center;}
 .modal.help-modal{width:min(calc(820px * var(--ui-scale-factor)),100%);max-width:calc(820px * var(--ui-scale-factor));height:min(calc(580px * var(--ui-scale-factor)),calc(100dvh - calc(24px * var(--ui-scale-factor))));max-height:none;display:flex;flex-direction:column;border-radius:calc(12px * var(--ui-scale-factor));overflow:hidden;}
 /* Description des fenêtres carte : même corps que les autres champs (sinon 16 px navigateur). */
 .modal .description-editor-field{font-size:calc(11px * var(--ui-scale-factor));line-height:1.45;}
 .help-modal .modal-head{padding:calc(10.5px * var(--ui-scale-factor)) calc(13.5px * var(--ui-scale-factor)) calc(9px * var(--ui-scale-factor));flex-shrink:0;border-bottom:calc(1px * var(--ui-scale-factor)) solid var(--border-soft);}
 .help-modal .modal-head h2{font-size:calc(13px * var(--ui-scale-factor));letter-spacing:-.02em;}
 .help-modal .modal-foot{padding:calc(7.5px * var(--ui-scale-factor)) calc(12px * var(--ui-scale-factor));border-top:calc(1px * var(--ui-scale-factor)) solid var(--border-soft);flex-shrink:0;}
 .help-layout{flex:1;min-height:0;display:grid;grid-template-columns:calc(168px * var(--ui-scale-factor)) minmax(0,1fr);}
 .help-nav{display:flex;flex-direction:column;gap:calc(2px * var(--ui-scale-factor));padding:calc(10px * var(--ui-scale-factor)) calc(8px * var(--ui-scale-factor));border-right:calc(1px * var(--ui-scale-factor)) solid var(--border-soft);background:rgba(0,0,0,.12);overflow-y:auto;}
 .help-nav-item{position:relative;display:flex;align-items:center;gap:calc(8px * var(--ui-scale-factor));width:100%;padding:calc(6.5px * var(--ui-scale-factor)) calc(9px * var(--ui-scale-factor));border:0;border-radius:calc(6px * var(--ui-scale-factor));background:transparent;color:var(--text-dim);font:inherit;font-size:calc(10px * var(--ui-scale-factor));font-weight:600;text-align:left;cursor:pointer;white-space:nowrap;}
 .help-nav-item:hover{background:rgba(255,255,255,.04);color:var(--text);}
 .help-nav-item[aria-selected="true"]{background:var(--surface-3);color:var(--text);}
 .help-nav-item[aria-selected="true"]::before{content:'';position:absolute;left:0;top:calc(6px * var(--ui-scale-factor));bottom:calc(6px * var(--ui-scale-factor));width:calc(2.5px * var(--ui-scale-factor));border-radius:calc(2px * var(--ui-scale-factor));background:var(--accent);}
 .help-nav-item:focus-visible{outline:calc(1.5px * var(--ui-scale-factor)) solid var(--accent);outline-offset:calc(-1.5px * var(--ui-scale-factor));}
 .help-nav-icon{flex-shrink:0;width:calc(16px * var(--ui-scale-factor));text-align:center;color:var(--text-faint);font-size:calc(11px * var(--ui-scale-factor));line-height:1;}
 .help-nav-item[aria-selected="true"] .help-nav-icon{color:var(--accent);}
 .help-nav-label{min-width:0;overflow:hidden;text-overflow:ellipsis;}
 .help-panel{min-width:0;min-height:0;overflow-y:auto;padding:calc(14px * var(--ui-scale-factor)) calc(18px * var(--ui-scale-factor)) calc(16px * var(--ui-scale-factor));outline:none;}
 .help-panel-head{margin-bottom:calc(10px * var(--ui-scale-factor));}
 .help-panel-head h3{display:flex;align-items:center;gap:calc(7px * var(--ui-scale-factor));margin:0 0 calc(4px * var(--ui-scale-factor));font-size:calc(13px * var(--ui-scale-factor));font-weight:700;letter-spacing:-.015em;color:var(--text);}
 .help-panel-head h3 span{color:var(--accent);font-size:calc(12px * var(--ui-scale-factor));}
 .help-panel-head p{margin:0;color:var(--text-dim);font-size:calc(9.5px * var(--ui-scale-factor));line-height:1.45;max-width:62ch;}
 .help-panel-body{display:flex;flex-direction:column;gap:calc(8px * var(--ui-scale-factor));}
 .help-card{min-width:0;border:calc(1px * var(--ui-scale-factor)) solid var(--border-soft);background:rgba(255,255,255,.025);border-radius:calc(7.5px * var(--ui-scale-factor));padding:calc(9px * var(--ui-scale-factor)) calc(11px * var(--ui-scale-factor));}
 .help-card h3{margin:0 0 calc(5px * var(--ui-scale-factor));font-size:calc(10px * var(--ui-scale-factor));font-weight:700;letter-spacing:-.01em;color:var(--text);}
 .help-card p{margin:0;color:var(--text-dim);font-size:calc(9.5px * var(--ui-scale-factor));line-height:1.5;}
 .help-card p+p{margin-top:calc(6px * var(--ui-scale-factor));}
 .help-flow{display:flex;align-items:center;justify-content:flex-start;gap:calc(3.75px * var(--ui-scale-factor));flex-wrap:wrap;margin:calc(2px * var(--ui-scale-factor)) 0 calc(7px * var(--ui-scale-factor));}
 .help-flow-step{padding:calc(3.75px * var(--ui-scale-factor)) calc(5.25px * var(--ui-scale-factor));border:calc(1px * var(--ui-scale-factor)) solid var(--border-soft);background:var(--surface-2);border-radius:calc(4.5px * var(--ui-scale-factor));color:var(--text);font-size:calc(8px * var(--ui-scale-factor));font-weight:650;}
 .help-flow-key,.help-key{display:inline-flex;align-items:center;justify-content:center;min-width:calc(16.5px * var(--ui-scale-factor));padding:calc(1.5px * var(--ui-scale-factor)) calc(3.75px * var(--ui-scale-factor));border:calc(1px * var(--ui-scale-factor)) solid rgba(255,255,255,.16);border-bottom-color:rgba(255,255,255,.28);border-radius:calc(3.75px * var(--ui-scale-factor));background:rgba(255,255,255,.055);color:var(--text);font-size:calc(8px * var(--ui-scale-factor));font-weight:700;line-height:1.25;white-space:nowrap;box-shadow:0 calc(1px * var(--ui-scale-factor)) 0 rgba(0,0,0,.25);}
 .help-flow-arrow{color:var(--text-faint);font-size:calc(9px * var(--ui-scale-factor));}
 /* Raccourcis : quatre familles en grille 2 × 2, touche alignée à gauche, action à droite. */
 .help-keys-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(8px * var(--ui-scale-factor));}
 /* Sous-grille : dans une famille, toutes les actions démarrent à la même abscisse. */
 .help-shortcuts{display:grid;grid-template-columns:max-content minmax(0,1fr);}
 .help-shortcut{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;align-items:center;column-gap:calc(8px * var(--ui-scale-factor));color:var(--text-dim);font-size:calc(9px * var(--ui-scale-factor));line-height:1.35;padding:calc(4.5px * var(--ui-scale-factor)) 0;border-bottom:calc(1px * var(--ui-scale-factor)) solid var(--border-soft);}
 .help-shortcut:first-child{padding-top:0;}
 .help-shortcut:last-child{border-bottom:0;padding-bottom:0;}
 .help-shortcut>.help-key{justify-self:start;}
 .help-footer-signature{margin-right:auto;color:var(--text-faint);font-size:calc(8px * var(--ui-scale-factor));letter-spacing:.05em;}
 @media (max-width:700px){
 .overlay:has(>.help-modal){padding:calc(6px * var(--ui-scale-factor));}
 .modal.help-modal{height:calc(100dvh - calc(12px * var(--ui-scale-factor)));margin:0;}
 .help-layout{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);}
 .help-nav{flex-direction:row;overflow-x:auto;overflow-y:hidden;border-right:0;border-bottom:calc(1px * var(--ui-scale-factor)) solid var(--border-soft);padding:calc(6px * var(--ui-scale-factor));scrollbar-width:none;}
 .help-nav::-webkit-scrollbar{display:none;}
 .help-nav-item{width:auto;flex-shrink:0;}
 .help-nav-item[aria-selected="true"]::before{left:calc(9px * var(--ui-scale-factor));right:calc(9px * var(--ui-scale-factor));top:auto;bottom:0;width:auto;height:calc(2px * var(--ui-scale-factor));}
 .help-panel{padding:calc(12px * var(--ui-scale-factor));}
 .help-keys-grid{grid-template-columns:1fr;}
 }
 /* Seul le contenu du tableau change d'échelle ; la barre et l'agenda restent fixes. */
 .board-zoom{display:flex;align-items:center;flex:0 0 auto;gap:calc(1.5px * var(--ui-scale-factor));padding:calc(2.25px * var(--ui-scale-factor));border:calc(1px * var(--ui-scale-factor)) solid var(--border-soft);border-radius:calc(5.25px * var(--ui-scale-factor));background:var(--surface-2);}
 .board-zoom button{height:calc(19.5px * var(--ui-scale-factor));min-width:calc(18px * var(--ui-scale-factor));padding:0 calc(3px * var(--ui-scale-factor));border:0;border-radius:calc(3px * var(--ui-scale-factor));background:transparent;color:var(--text);font:600 calc(10px * var(--ui-scale-factor)) system-ui;}
 .board-zoom button:hover{background:var(--surface-3);}
 .board-zoom button:disabled{opacity:.3;cursor:default;}
 #boardZoomReset{min-width:calc(38.25px * var(--ui-scale-factor));font-size:calc(8px * var(--ui-scale-factor));font-variant-numeric:tabular-nums;}
 #boardRow{min-width:0;min-height:0;}
 .topbar-search{
 display:flex; align-items:center; gap:calc(4.5px * var(--ui-scale-factor)); min-width:calc(127.5px * var(--ui-scale-factor)); max-width:calc(225px * var(--ui-scale-factor)); flex:1 1 calc(165px * var(--ui-scale-factor));
 background:var(--surface-2); border:calc(1px * var(--ui-scale-factor)) solid var(--border-soft); border-radius:calc(5.25px * var(--ui-scale-factor)); padding:0 calc(6.75px * var(--ui-scale-factor));
 /* Place du bouton ⚡ : la recherche garde sa largeur utile (flex-grow) mais part d'une base
   plus petite, pour que la barre du haut tienne toujours sur une ligne en 1920 px. */
 flex-basis:calc(130px * var(--ui-scale-factor));
 }
 .topbar-search span{color:var(--text-faint);font-size:calc(11px * var(--ui-scale-factor));}
 .topbar-search input{width:100%; background:transparent; border:0; outline:none; color:var(--text); font:inherit; font-size:calc(11px * var(--ui-scale-factor)); line-height:1.3; padding:calc(5.25px * var(--ui-scale-factor)) calc(1.5px * var(--ui-scale-factor));}
 .topbar-search input::placeholder{color:var(--text-faint);}
 .topbar-search input::-webkit-search-cancel-button{display:none;}
 .topbar-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 calc(0.1125px * var(--ui-scale-factor)) var(--accent);}
 .search-clear{
 display:none; flex:0 0 auto; align-items:center; justify-content:center; width:calc(15px * var(--ui-scale-factor)); height:calc(15px * var(--ui-scale-factor)); padding:0;
 border:0; background:transparent; color:#fff; font:700 calc(12px * var(--ui-scale-factor))/1 Arial,sans-serif; cursor:pointer; opacity:.72; border-radius:calc(3px * var(--ui-scale-factor));
 }
 .search-clear:hover{opacity:1;background:rgba(255,255,255,.08);}
 .search-clear.visible{display:flex;}
 .history-group{display:flex; gap:calc(3px * var(--ui-scale-factor));}
 .history-btn{width:calc(25.5px * var(--ui-scale-factor)); padding:calc(5.25px * var(--ui-scale-factor)) 0;}
 .history-btn:disabled{opacity:.35;cursor:not-allowed;}
 .btn-ghost, .btn-primary{
 border-radius:calc(5.25px * var(--ui-scale-factor)); font-size:calc(10px * var(--ui-scale-factor)); font-weight:600; padding:calc(5.25px * var(--ui-scale-factor)) calc(9.75px * var(--ui-scale-factor)); border:calc(1px * var(--ui-scale-factor)) solid var(--border);
 background:var(--surface-2); color:var(--text); white-space:normal;
 }
 .btn-ghost:hover{border-color:var(--text-faint);}
 .btn-primary:hover{border-color:var(--text-faint);}
 .label-close-btn{min-width:calc(66px * var(--ui-scale-factor));text-align:center;}
 .btn-danger{background:transparent; border:calc(1px * var(--ui-scale-factor)) solid var(--danger); color:var(--danger); border-radius:calc(5.25px * var(--ui-scale-factor)); font-weight:600; font-size:calc(10px * var(--ui-scale-factor)); padding:calc(5.25px * var(--ui-scale-factor)) calc(9px * var(--ui-scale-factor));}
 .btn-danger:hover{background:rgba(217,88,79,.12);}