/* SPDX-License-Identifier: AGPL-3.0-only
   SPDX-FileCopyrightText: 2026 Com'Together
   Com'Together — Ma communication. Copyright (C) 2026 Com'Together.
   Programme libre sous AGPL-3.0-only — voir LICENSE. */
/* ============================================================================
 * Com'Together CAA — styles
 * Accessibilité : cibles ≥ 64px, contrastes AA, focus visible, mode sombre,
 * code couleur Fitzgerald modifié (repérage / motor planning).
 * ==========================================================================*/
:root {
  /* Fitzgerald modifié — familles de mots */
  --c-pronom:    #ffd93b;  --c-pronom-txt:  #3a2f00;
  --c-verbe:     #6fcf6f;  --c-verbe-txt:   #123512;  --c-verbe-ink:#2e7d32;/* vert LISIBLE en texte sur fond clair (le vert de famille sert de fond) */
  --c-descriptif:#4dabf7;  --c-descriptif-txt:#04233f;
  --c-nom:       #ffa94d;  --c-nom-txt:     #4a2400;
  --c-social:    #f7a7d0;  --c-social-txt:  #4a0c31;
  --c-question:  #b197fc;  --c-question-txt:#25074d;
  --c-petit:     #ffffff;  --c-petit-txt:   #222;
  --c-negation:  #ff8787;  --c-negation-txt:#490000;
  --c-advocacy:  #ffe066;  --c-advocacy-txt:#3a2f00;

  /* ---- Marque Com'Together (charte) ---- */
  --ct-aubergine:#3a0577; --ct-aubergine-2:#4b169a; --ct-aubergine-3:#2a0357;
  --ct-violet:#a52bfc; --ct-soleil:#ffce1b; --ct-grenadine:#f85a5a; --ct-creme:#fffcf3;
  /* ---- Tokens sémantiques remappés sur la marque ---- */
  --bg: var(--ct-creme); --bg-2:#f6efe0; --surface:#ffffff; --surface-2:#fbf6ea;
  --ink: var(--ct-aubergine); --muted:#6a5b86;
  --line:#e7ddf1; --line-soft:#f0e9fa;
  --accent:var(--ct-aubergine); --accent-2:var(--ct-violet); --accent-ink:#ffffff;  /* aubergine sur crème/blanc ≈ 13:1 */
  --radius:14px; --radius-lg:20px; --radius-pill:999px;
  --tile-min:96px; --gap:8px; --font-scale:1;
  --shadow-sm: 0 1px 2px rgba(16,32,48,.06), 0 1px 3px rgba(16,32,48,.05);
  --shadow: 0 2px 8px rgba(16,32,48,.08), 0 1px 3px rgba(16,32,48,.06);
  --shadow-lg: 0 12px 32px rgba(16,32,48,.16), 0 2px 8px rgba(16,32,48,.08);
  --tr: 140ms cubic-bezier(.2,.6,.2,1);
  font-size: calc(16px * var(--font-scale));
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
:root[data-theme="dark"] {
  --bg:#160a24; --bg-2:#0f0619; --surface:#241338; --surface-2:#2e1a45;
  --ink:#f6f1ff; --muted:#b9a9d6;
  --line:#3a2857; --line-soft:#2c1c43; --accent:#c98bff; --accent-2:#ffce1b; --accent-ink:#1a0533;
  --c-petit:#2e1a45; --c-petit-txt:#f6f1ff;
  --c-verbe-ink:#6fcf6f;   /* thème sombre : le vert clair redevient lisible (fond sombre) */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow: 0 2px 10px rgba(0,0,0,.45);
  --shadow-lg: 0 16px 40px rgba(0,0,0,.6);
}
/* Haut contraste : fond blanc, texte + bords noirs, couleur de famille en liseré épais */
:root[data-contrast="high"] {
  --line:#000; --ink:#000; --muted:#000; --bg:#fff; --surface:#fff;
  --accent:#000; --accent-ink:#fff;
}
:root[data-contrast="high"] .tile:not(.back) {
  background:#fff !important; color:#000 !important; border:3px solid #000; border-top-width:11px; font-weight:800;
}
:root[data-contrast="high"] .tile[data-color="pronom"]{ border-top-color:#a67c00; }
:root[data-contrast="high"] .tile[data-color="verbe"]{ border-top-color:#1f7a1f; }
:root[data-contrast="high"] .tile[data-color="descriptif"]{ border-top-color:#0b5cad; }
:root[data-contrast="high"] .tile[data-color="nom"]{ border-top-color:#b8510a; }
:root[data-contrast="high"] .tile[data-color="social"]{ border-top-color:#a3167c; }
:root[data-contrast="high"] .tile[data-color="question"]{ border-top-color:#5b2fbf; }
:root[data-contrast="high"] .tile[data-color="negation"]{ border-top-color:#c00000; }
:root[data-contrast="high"] .tile[data-color="advocacy"]{ border-top-color:#a67c00; }
:root[data-contrast="high"] .tile[data-color="petit"]{ border-top-color:#444; }
:root[data-contrast="high"] .vcol-head { background:#fff !important; color:#000 !important; border:2px solid #000; border-bottom-width:6px; }
:root[data-contrast="high"] .tab, :root[data-contrast="high"] .key, :root[data-contrast="high"] .icon-btn { border:2px solid #000; }
:root[data-contrast="high"] .tab.is-active, :root[data-contrast="high"] .icon-btn.big, :root[data-contrast="high"] .icon-btn.is-on { background:#000; color:#fff; }

* { box-sizing: border-box; }
/* L'attribut hidden doit toujours l'emporter, même sur les display de classe */
[hidden] { display: none !important; }
/* Contenu réservé aux lecteurs d'écran (titre de structure, etc.) */
.visually-hidden { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
html, body { margin:0; height:100%; }
body {
  font-family: "Atkinson Hyperlegible", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  background: var(--bg); color: var(--ink);
  display:flex; flex-direction:column; height:100dvh; overflow:hidden;
  -webkit-tap-highlight-color: transparent;
}
button { font-family: inherit; cursor: pointer; }
:focus-visible { outline: 4px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* --- Barre de message --- */
.msgbar {
  display:flex; align-items:stretch; gap:var(--gap);
  padding:6px var(--gap); background:var(--surface); border-bottom:2px solid var(--line);
}
/* Ergonomie : barres du haut compactes, la grille garde le maximum de place */
.grammarbar { padding:4px var(--gap); min-height:40px; box-sizing:border-box; }
/* Au repos : invisible mais l'espace est CONSERVÉ -> la grille ne se redimensionne
   plus quand on touche une cellule (reste fixe). */
.grammarbar.gb-resting { visibility:hidden; }
/* Bouton « masquer la barre » (×) : discret, à droite, cible tactile ≥ 24×24 (WCAG 2.5.8). */
.gb-close { margin-left:8px; border:none; background:transparent; color:var(--muted);
  font-size:1rem; line-height:1; padding:6px 8px; min-width:32px; min-height:32px;
  border-radius:8px; cursor:pointer; flex:0 0 auto; }
.gb-close:hover, .gb-close:focus { background:var(--line-soft); color:var(--ink); outline:none; }
/* Barre de ton : même principe — au repos, invisible mais la place reste réservée (grille fixe). */
.tonebar { min-height:40px; box-sizing:border-box; }
.tonebar.tb-resting { visibility:hidden; }
.tabs { padding:4px var(--gap); }
.morph-btn.is-on { background:var(--c-social); border-color:var(--c-social); color:var(--c-social-txt); }
.message {
  /* hauteur FIXE : identique à vide et rempli -> la barre ne grandit pas quand on ajoute un mot */
  flex:1; height:64px; min-height:64px; display:flex; align-items:center; gap:6px;
  padding:5px 10px; background:var(--bg); border-radius:var(--radius);
  overflow-x:auto; overflow-y:hidden; white-space:nowrap;
}
.message:empty::before { content:"Touchez des mots pour composer votre message…"; color:var(--muted); font-size:.95rem; }
.msg-token {
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:60px; padding:4px 8px; border-radius:10px; background:var(--surface);
  border:2px solid var(--line); font-weight:700; font-size:.95rem; flex:0 0 auto;
}
.msg-token img { width:34px; height:34px; }
.msgbar-actions { display:flex; gap:var(--gap); flex-wrap:wrap; justify-content:flex-end; }
/* « Dire » (positif) séparé des actions destructrices (Effacer / Vider) : un intervalle franc
   réduit les taps accidentels — bénéfice sur TOUS les appareils (P0 espacement, WCAG 2.2). */
.msgbar-actions #backspace { margin-left:16px; }
/* Menu « ⋯ » : dans le DOM, masqué par défaut ; il n'apparaît QUE sur téléphone (voir @media)
   pour replier les actions secondaires. Ordinateur/tablette : tout reste visible, rien ne change. */
#more-toggle { display:none; }
.more-menu { position:fixed; z-index:60; background:var(--surface); border:2px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:6px; min-width:210px;
  display:flex; flex-direction:column; gap:2px; }
.more-item { display:flex; align-items:center; gap:10px; text-align:left; width:100%;
  padding:11px 12px; min-height:44px; border:1px solid transparent; border-radius:10px;
  background:transparent; color:var(--ink); font-weight:700; font-size:1rem; cursor:pointer; }
.more-item:hover, .more-item:focus-visible { background:color-mix(in srgb, var(--accent) 12%, var(--surface)); outline:none; }
.more-item.on { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.more-item .more-ic { font-size:1.25rem; line-height:1; width:26px; text-align:center; }
.icon-btn {
  min-width:64px; border:2px solid var(--line); background:var(--surface);
  border-radius:var(--radius); font-size:1.5rem; color:var(--ink);
}
.icon-btn.big { min-width:84px; background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.icon-btn.is-on { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
/* HIÉRARCHIE DU REGARD (esprit Jobs, ZÉRO clic ajouté) : « Dire » est le héros ; les autres icônes
   restent EXACTEMENT en place (un seul tap) mais s'EFFACENT visuellement pour que l'œil se pose.
   Les toggles ACTIFS (.is-on) restent colorés (état visible) ; le contraste élevé rétablit les bordures. */
.icon-btn:not(.big):not(.is-on) { background:transparent; border-color:transparent;
  color:color-mix(in srgb, var(--ink) 60%, var(--surface)); }
/* Lisibilité (WCAG AA) : le LIBELLÉ sous l'icône reste bien contrasté même quand le
   bouton est estompé — l'estompage passe par le fond/la bordure, jamais le texte lisible. */
.icon-btn:not(.big):not(.is-on) .icon-lab { color:var(--ink); }
.icon-btn:not(.big):not(.is-on):hover, .icon-btn:not(.big):not(.is-on):focus-visible {
  background:var(--surface); border-color:var(--line); color:var(--ink); }
.icon-btn.big { min-width:104px; font-size:1.7rem; }   /* le héros, plus présent */
/* Icônes SVG cohérentes (barre d'outils, menu, thème) : rendu identique sur tous les OS,
   couleur héritée (currentColor) donc suit le thème + l'estompage/héros. */
.ct-ic { display:inline-flex; align-items:center; justify-content:center; line-height:0; }
.ct-ic svg { width:26px; height:26px; display:block; }
.icon-btn.big .ct-ic svg { width:30px; height:30px; }
.tool-ico.ct-ic svg, .tool .tool-ico.ct-ic svg { width:24px; height:24px; }
.ct-ic-inline { display:inline-flex; vertical-align:-4px; margin-right:2px; }
.ct-ic-inline svg { width:18px; height:18px; }
/* Icône en tête de libellé de bouton (Réglages) — remplace les emoji, même style au trait */
.ct-ic-btn { display:inline-flex; vertical-align:-4px; margin-right:6px; }
.ct-ic-btn svg { width:20px; height:20px; }
.ct-ic-face { display:inline-flex; vertical-align:-4px; }
.ct-ic-face svg { width:19px; height:19px; }
.tone-btn .ct-ic-face svg { width:20px; height:20px; }
/* petits badges sur les cases (édité / suggestion épinglée) */
.ct-ic-badge svg { width:13px; height:13px; }
.cat-launcher .ct-ic svg { width:22px; height:22px; }

/* --- Aperçu de la phrase (français élidé) --- */
.preview {
  margin:0; padding:3px 12px; background:var(--surface); border-bottom:2px solid var(--line);
  font-size:1rem; font-weight:700; color:var(--ink); min-height:1.3em;
  overflow-x:auto; white-space:nowrap;
}
/* vide : invisible mais la LIGNE reste réservée -> la grille ne bouge pas à l'ajout d'un mot */
.preview:empty { visibility:hidden; }
.preview { cursor:pointer; }
.preview:hover { color:var(--accent); }
.preview::after { content:" 🔊"; opacity:.55; font-size:.85em; }
/* Littératie — lecture accompagnée : mot en cours de lecture surligné (voix système). */
.preview .pw { border-radius:6px; padding:0 1px; cursor:pointer; transition:background-color .08s linear, color .08s linear; }
.preview .pw.pw-on { background:var(--accent); color:#fff; box-shadow:0 0 0 2px var(--accent); }
.preview .pw:active { background:var(--line-soft); }

/* Littératie — décodeur graphémique (T2L) : superposition premium + chips graphèmes. */
.ct-decoder .dec-inner { max-width:660px; box-shadow:0 -10px 44px rgba(0,0,0,.20); }
.dec-whole { display:flex; flex-wrap:wrap; justify-content:center; gap:4px; font-size:2.2rem; font-weight:900;
  letter-spacing:.01em; padding:16px 10px 8px; }
.dec-w-g { padding:2px 7px; border-radius:12px; transition:background-color .15s, color .15s, transform .15s, box-shadow .15s; }
.dec-w-g:nth-child(odd) { color:var(--accent); }
.dec-w-g:nth-child(even) { color:var(--accent-2); }
.dec-w-g.on { background:var(--accent); color:var(--accent-ink); transform:translateY(-2px);
  box-shadow:0 6px 16px color-mix(in srgb, var(--accent) 45%, transparent); }
/* Badge d'état du son humain sur une chip graphème */
.dec-phon-badge { font-size:1rem; }
.dec-voice { text-align:center; font-size:.85rem; color:var(--muted); margin:2px 0 0; }
.dec-voice .linklike { font-weight:800; }
/* Vue « Mon état, mes besoins » (soutien) : gros boutons, calme, faible charge cognitive */
.board.etat-view { display:block; grid-template-columns:none; }
.etat-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:14px; padding:8px 4px 16px; }
.etat-card { min-height:96px; border:3px solid var(--accent); border-radius:var(--radius-lg);
  background:color-mix(in srgb, var(--accent) 8%, var(--surface)); color:var(--ink);
  font-size:1.35rem; font-weight:800; line-height:1.25; padding:14px 16px; text-align:center; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  box-shadow:0 4px 14px rgba(0,0,0,.06); transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease; }
.etat-card-ico { width:64px; height:64px; flex:0 0 auto; }
.etat-card-txt { display:block; }
.etat-card:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.12); }
.etat-card:active { background:var(--accent); color:var(--accent-ink); }
/* Mon état : sous-navigation */
.etat-sub { display:flex; flex-wrap:wrap; gap:8px; padding:8px 4px; }
.etat-tab { display:inline-flex; align-items:center; gap:8px; border:2px solid var(--line); background:var(--surface); color:var(--ink); border-radius:var(--radius-pill);
  padding:8px 16px; font-weight:800; min-height:44px; cursor:pointer; }
.etat-tab.on { background:var(--accent); color:var(--accent-ink); border-color:transparent; }
/* Outil douleur */
.pain-instr { text-align:center; color:var(--muted); margin:4px 0 8px; }
/* Barre phrase (aperçu + Dire ma phrase + réglage), toujours visible */
.pain-bar { display:flex; flex-wrap:wrap; align-items:center; gap:10px; justify-content:center;
  background:color-mix(in srgb, var(--accent) 7%, var(--surface)); border:2px solid var(--line);
  border-radius:var(--radius); padding:8px 12px; margin:0 0 10px; }
.pain-preview { flex:1 1 220px; min-width:180px; font-weight:800; font-size:1.1rem; color:var(--ink); }
.pain-preview.empty { color:var(--muted); font-weight:600; font-size:1rem; }
.pain-dire { border-radius:var(--radius-pill); padding:10px 18px; font-size:1.05rem; }
.pain-toggle { display:flex; align-items:center; gap:6px; font-size:.9rem; color:var(--muted); cursor:pointer; }
.pain-toggle input { width:20px; height:20px; }
/* Deux colonnes : corps | (picto survolé + thermomètre) — évite le scroll */
.pain-cols { display:flex; flex-wrap:wrap; gap:14px; align-items:flex-start; justify-content:center; }
.pain-left { flex:1 1 240px; min-width:220px; }
.pain-right { flex:0 1 200px; min-width:170px; }
.pain-body-wrap { display:flex; justify-content:center; }
.pain-body { width:min(240px,68vw); height:auto; }
.pain-figure { fill:color-mix(in srgb, var(--accent) 12%, var(--surface)); stroke:color-mix(in srgb, var(--accent) 40%, var(--surface)); stroke-width:1.5; }
.pain-zone { fill:color-mix(in srgb, var(--accent) 14%, transparent); stroke:color-mix(in srgb, var(--accent) 50%, transparent); stroke-width:1.5; cursor:pointer; transition:fill .12s; }
.pain-zone:hover, .pain-zone:focus { fill:color-mix(in srgb, var(--accent) 32%, transparent); outline:none; }
.pain-zone.on { fill:color-mix(in srgb, #e11d48 60%, transparent); stroke:#e11d48; stroke-width:2.5; }
/* Picto de la zone survolée */
.pain-hover { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  min-height:110px; border:2px dashed var(--line); border-radius:var(--radius); padding:8px; margin-bottom:10px; }
.pain-hover-img { width:72px; height:72px; object-fit:contain; }
.pain-hover-lab { font-weight:800; text-align:center; color:var(--accent); }
/* Endroits spéciaux + Effacer */
.pain-spec-row { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:8px 0 2px; }
.pain-spec { border:2px solid var(--accent); background:var(--surface); color:var(--ink); border-radius:var(--radius-pill);
  padding:8px 14px; font-weight:700; min-height:42px; cursor:pointer; }
.pain-spec.on { background:color-mix(in srgb, #e11d48 60%, transparent); color:#fff; border-color:#e11d48; }
.pain-clear { border-radius:var(--radius-pill); padding:8px 16px; }
.pain-h { text-align:center; margin:12px 0 6px; color:var(--accent); }
.pain-right .pain-h { margin-top:0; }
.pain-desc-row { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.pain-desc { display:flex; align-items:center; gap:8px; border:2px solid var(--accent); background:var(--surface); color:var(--ink);
  border-radius:var(--radius-pill); padding:8px 14px; font-weight:800; min-height:48px; font-size:1.05rem; cursor:pointer; }
.pain-desc-pic { width:32px; height:32px; object-fit:contain; }
.pain-desc.on, .pain-desc:active { background:var(--accent); color:var(--accent-ink); }
.pain-thermo { display:flex; flex-direction:column; gap:5px; }
.pain-level { display:flex; align-items:center; gap:8px; border:2px solid var(--line); border-radius:var(--radius);
  padding:6px 10px; min-height:42px; cursor:pointer; font-weight:800; background:var(--surface); color:var(--ink); font-size:.95rem; }
.pain-level .pl-face { display:inline-flex; align-items:center; justify-content:center; width:30px; flex:0 0 30px; }
.thermo-ico { width:22px; height:44px; }
.pain-level.lvl1 { border-color:#22c55e; } .pain-level.lvl2 { border-color:#84cc16; } .pain-level.lvl3 { border-color:#eab308; }
.pain-level.lvl4 { border-color:#f97316; } .pain-level.lvl5 { border-color:#ef4444; } .pain-level.lvl6 { border-color:#b91c1c; }
/* Icônes-pictos Mulberry (onglets, étapes, modes, catégories) */
.ct-ico { object-fit:contain; vertical-align:middle; }
.etat-tab-ico { width:24px; height:24px; }
.dim-h-ico { width:28px; height:28px; }
.dim-h { display:flex; align-items:center; justify-content:center; gap:8px; }
.ps-ico { width:30px; height:30px; }
.pm-ico { width:22px; height:22px; }
.pain-level.on, .pain-level:active { background:var(--accent); color:var(--accent-ink); }
/* Barre de sécurité épinglée (messages essentiels, toujours accessibles) */
.safety-strip { box-sizing:border-box; width:100%; display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding:6px 8px; margin:0 0 6px; flex:0 0 auto;
  background:color-mix(in srgb, #e11d48 7%, var(--surface)); border:2px solid color-mix(in srgb, #e11d48 30%, var(--line));
  border-radius:var(--radius); }
.safety-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:46px; flex:1 1 100px; padding:4px 12px; cursor:pointer;
  border:2px solid color-mix(in srgb, #e11d48 40%, var(--line)); border-radius:var(--radius-pill);
  background:var(--surface); color:var(--ink); font-weight:800; font-size:1rem; white-space:nowrap; }
.safety-btn img { width:26px; height:26px; object-fit:contain; flex:0 0 auto; }
.safety-btn:active { background:#e11d48; color:#fff; border-color:#e11d48; }
/* Suggestion contextuelle (mot enrichi lié au verbe) : emplacement explicite, jamais un réordonnancement silencieux */
.tile.tile-suggestion { position:relative; box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent) inset; }
.tile.tile-pinned { box-shadow:0 0 0 2px color-mix(in srgb, #eab308 75%, transparent) inset; }
/* Conteneur d'une suggestion : la case (bouton) remplit la cellule, le badge d'options
   est un SIBLING en overlay (jamais enfant du bouton -> pas de bouton-dans-bouton, WCAG 4.1.2). */
.sugg-wrap { position:relative; display:flex; min-width:0; }
.sugg-wrap > .tile { flex:1 1 auto; width:100%; }
/* Le badge DÉBORDE le coin haut-gauche (comme le crayon d'édition) : une cible de 24×24 posée
   en coin ne recouvre qu'un carré de ~20×20 de la case, qui garde donc une bande libre ≥ 24×24
   (WCAG 2.5.8) — quelle que soit la taille des cases, y compris sur mobile (~47×32 px). */
.sugg-badge { position:absolute; top:-4px; left:-4px; z-index:3;
  min-width:24px; min-height:24px; display:inline-flex; align-items:center; justify-content:center;
  padding:0; line-height:1; border:none; border-radius:8px; background:var(--surface); cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.28); }
.sugg-badge:hover, .sugg-badge:focus { background:color-mix(in srgb, var(--accent) 22%, transparent); outline:none; }
.sugg-menu { position:fixed; z-index:60; background:var(--surface); border:2px solid var(--line); border-radius:var(--radius); box-shadow:0 8px 24px rgba(0,0,0,.22); padding:6px; min-width:210px; display:flex; flex-direction:column; gap:4px; }
.sugg-menu-h { font-weight:800; font-size:.85rem; color:var(--muted); padding:2px 6px 4px; }
.sugg-menu-b { text-align:left; padding:9px 10px; border-radius:8px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-weight:700; cursor:pointer; font-size:.95rem; }
.sugg-menu-b.on { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, var(--surface)); }
/* Profils locaux */
.profiles-list { display:flex; flex-direction:column; gap:6px; margin:6px 0; }
.prof-row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); }
.prof-row.on { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.prof-name { font-weight:800; }
.prof-actions { display:flex; flex-wrap:wrap; gap:6px; }
.prof-actions .btn-secondary { padding:5px 10px; min-height:36px; border-radius:var(--radius-pill); font-size:.9rem; }
.prof-cur { color:var(--accent); font-style:italic; font-weight:700; }
/* Volet partenaire (secondaire, replié) */
.pain-partner { margin:18px auto 4px; max-width:560px; border:1px dashed var(--line); border-radius:var(--radius);
  background:color-mix(in srgb, var(--muted) 7%, var(--surface)); padding:4px 12px; }
.pain-partner-sum { cursor:pointer; font-weight:700; color:var(--muted); padding:8px 2px; font-size:.98rem; }
.pain-partner[open] .pain-partner-sum { color:var(--ink); }
.pain-partner-intro, .pain-partner-base { font-size:.9rem; color:var(--muted); margin:4px 0; line-height:1.35; }
.pain-partner-base { font-weight:700; color:var(--ink); }
.pain-transmit { display:flex; flex-direction:column; gap:8px; margin:8px 0; }
.pain-transmit-item { display:flex; flex-direction:column; gap:3px; }
.pain-transmit-lab { font-size:.88rem; font-weight:700; color:var(--ink); }
.pain-transmit-in { width:100%; box-sizing:border-box; resize:none; overflow:hidden; min-height:38px;
  font:inherit; font-size:.95rem; padding:8px 10px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); color:var(--ink); }
.pain-transmit-check { display:flex; align-items:center; gap:8px; font-size:.95rem; font-weight:700; cursor:pointer; margin-top:2px; }
.pain-transmit-check input { width:20px; height:20px; }
.pain-transmit-actions { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0; }
.pain-transmit-actions .btn-secondary { border-radius:var(--radius-pill); padding:8px 14px; }
.pain-transmit-out { white-space:pre-wrap; font-size:.92rem; color:var(--ink); background:color-mix(in srgb, var(--accent) 8%, var(--surface));
  border-left:4px solid var(--accent); border-radius:6px; padding:8px 10px; margin:6px 0; line-height:1.4; }
.pain-partner-src { font-size:.82rem; color:var(--muted); margin:6px 0 4px; line-height:1.3; font-style:italic; }
/* Décrire — 4 dimensions */
.dim-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; margin-bottom:6px; }
.dim-card { border:2px solid var(--line); background:var(--surface); color:var(--ink); border-radius:var(--radius);
  padding:12px 10px; font-weight:700; min-height:52px; cursor:pointer; text-align:center; }
.dim-card:active { background:var(--accent); color:var(--accent-ink); }
/* Passage douleur → Je fais le point */
.pain-bridge { display:flex; justify-content:center; margin:14px 0 4px; }
.pain-bridge .btn-secondary { display:inline-flex; align-items:center; gap:8px; border-radius:var(--radius-pill); padding:10px 18px; font-weight:700; }
/* Je fais le point (SODA original) */
.point-mode { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:6px 0 10px; }
.point-mode-btn { display:inline-flex; align-items:center; gap:6px; border:2px solid var(--line); background:var(--surface); color:var(--ink); border-radius:var(--radius-pill);
  padding:8px 14px; font-weight:700; min-height:42px; cursor:pointer; }
.point-mode-btn.on { background:var(--accent); color:var(--accent-ink); border-color:transparent; }
.point-steps { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-bottom:10px; }
.point-step { display:flex; flex-direction:column; align-items:center; gap:2px; border:2px solid var(--line);
  background:var(--surface); color:var(--ink); border-radius:var(--radius); padding:8px 12px; min-width:88px; cursor:pointer; }
.point-step .ps-ico { font-size:1.3rem; }
.point-step .ps-lab { font-size:.78rem; font-weight:700; text-align:center; line-height:1.15; }
.point-step.on { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.point-panel .pain-h { margin-top:4px; }
.point-step-intro { text-align:center; color:var(--muted); margin:0 0 10px; }
.point-grp { text-align:center; color:var(--ink); margin:12px 0 6px; font-size:1rem; }
.point-grp-meta { color:var(--muted); font-style:italic; }
.point-cards { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.point-card { border:2px solid var(--accent); background:var(--surface); color:var(--ink); border-radius:var(--radius-pill);
  padding:10px 16px; font-weight:700; min-height:46px; font-size:1rem; cursor:pointer; }
.point-card.on { background:var(--accent); color:var(--accent-ink); }
.point-cards-meta .point-card { border-color:var(--muted); border-style:dashed; }
.point-cards-meta .point-card.on { background:var(--muted); color:var(--surface); border-style:solid; }
.point-nav { display:flex; justify-content:space-between; gap:10px; margin:12px 0; }
.point-nav .btn-secondary { border-radius:var(--radius-pill); padding:9px 18px; }
.point-nav .btn-secondary:disabled { opacity:.4; cursor:default; }
.point-bar { margin-top:4px; }
.point-saved { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:10px 0 4px; }
.point-saved-lab { font-weight:700; color:var(--muted); font-size:.9rem; }
.point-saved-chip { display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:var(--radius-pill); overflow:hidden; background:var(--surface); }
.point-saved-say { border:none; background:transparent; color:var(--ink); padding:6px 10px; font-weight:700; cursor:pointer; font-size:.9rem; }
.point-saved-del { border:none; background:transparent; color:var(--muted); padding:6px 8px; cursor:pointer; font-size:.9rem; }
.point-saved-del:hover { color:#e11d48; }
/* Guide d'enregistrement */
.guide-h { margin:14px 0 4px; color:var(--accent); }
.guide-p { margin:0 0 8px; }
.guide-ul { margin:2px 0 6px; padding-left:20px; }
.guide-ul li { margin:3px 0; line-height:1.35; }
/* Banque de sons (voix humaine) */
.phon-voices { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:8px 0; }
.phon-voices select { min-height:40px; font-size:1rem; padding:4px 8px; border-radius:var(--radius); border:2px solid var(--line); background:var(--surface); color:var(--ink); }
.phon-voices .btn-secondary { padding:6px 12px; min-height:40px; border-radius:var(--radius-pill); }
.phon-prog { font-weight:800; color:var(--accent); }
.phon-grp { margin:12px 0 4px; color:var(--accent); }
.phon-row { display:flex; flex-wrap:wrap; gap:8px; }
.phon-cell { display:flex; flex-direction:column; align-items:center; gap:1px; min-width:66px; padding:8px 10px;
  border:2px solid var(--line); border-radius:var(--radius); background:var(--surface); cursor:pointer; }
.phon-cell.has { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, var(--surface)); }
.phon-ipa { font-size:1.2rem; font-weight:900; color:var(--ink); }
.phon-ex { font-size:.72rem; color:var(--muted); }
.phon-state { font-size:1rem; }
/* Sélecteur de MODES d'exploration */
.dec-modes-q { text-align:center; font-weight:800; color:var(--ink); margin:8px 0 2px; }
.dec-son { white-space:nowrap; }
.dec-levels { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; padding:4px 4px 2px; }
.dec-lvl { border:2px solid var(--line); background:var(--surface); color:var(--ink); border-radius:var(--radius-pill);
  padding:8px 16px; font-weight:800; min-height:44px; cursor:pointer; transition:border-color .15s, background-color .15s, color .15s; }
.dec-lvl:hover { border-color:var(--accent); }
.dec-lvl.on { background:var(--accent); color:var(--accent-ink); border-color:transparent; }
.dec-syl .dec-graph { font-size:1.7rem; }
.dec-chips { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; padding:10px 4px 4px; }
.dec-chip { display:flex; flex-direction:column; align-items:center; gap:2px; min-width:64px; padding:10px 14px;
  border:2px solid var(--line); border-radius:var(--radius-lg); background:var(--surface); cursor:pointer; line-height:1.15;
  box-shadow:0 3px 10px rgba(0,0,0,.06);
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease; }
.dec-chip:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,.13); }
.dec-chip.on { border-color:transparent; background:linear-gradient(160deg, var(--accent), var(--accent-2));
  box-shadow:0 10px 26px color-mix(in srgb, var(--accent) 42%, transparent); }
.dec-chip.on .dec-graph, .dec-chip.on .dec-son, .dec-chip.on .dec-ex { color:var(--accent-ink); }
.dec-chip.fuse { transform:scale(1.1) translateY(-2px); }
.dec-graph { font-size:1.6rem; font-weight:900; color:var(--ink); }
.dec-son { font-size:.9rem; font-weight:800; color:var(--accent); letter-spacing:.02em; }
.dec-ex { font-size:.74rem; color:var(--muted); }
.dec-note { font-size:.8rem; color:var(--muted); text-align:center; margin:8px 12px 6px; }
.dec-piper { font-size:.82rem; text-align:center; margin:0 12px 10px; padding:6px 10px; border-radius:var(--radius); }
.dec-piper.ok { color:var(--accent); font-weight:700; }
.dec-piper.warn { background:color-mix(in srgb, #d97706 14%, var(--surface)); border:1px solid color-mix(in srgb, #d97706 40%, transparent); color:var(--ink); }
.dec-piper .linklike { font-weight:800; }
.dec-btns { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; padding:2px 4px 10px; }
.dec-btns .btn-primary { border-radius:var(--radius-pill); box-shadow:0 8px 22px color-mix(in srgb, var(--accent) 40%, transparent); }
/* Boutons secondaires du décodeur (le mot / lentement / Fermer) : pilules premium teintées. */
.ct-decoder .btn-secondary {
  background:color-mix(in srgb, var(--accent) 8%, var(--surface));
  color:var(--accent); border:2px solid color-mix(in srgb, var(--accent) 32%, transparent);
  border-radius:var(--radius-pill); font-weight:800; box-shadow:0 3px 10px rgba(0,0,0,.06);
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
}
.ct-decoder .btn-secondary:hover {
  transform:translateY(-2px); border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 16%, var(--surface));
  box-shadow:0 8px 20px rgba(0,0,0,.13);
}
.ct-decoder .popup-head { align-items:center; }
.ct-decoder .popup-head .btn-secondary { padding:8px 16px; min-height:40px; }
.ct-decoder .popup-head strong { flex:1; text-align:center; }
.dec-nav { min-width:44px; font-size:1.5rem; font-weight:900; line-height:1; }
.dec-nav:disabled { opacity:.35; }
/* Picto du mot (sens) */
.dec-pic { display:flex; justify-content:center; padding:8px 0 0; min-height:0; }
.dec-pic-img { width:112px; height:112px; object-fit:contain; padding:10px; background:var(--surface-2);
  border:2px solid var(--line); border-radius:var(--radius-lg); box-shadow:0 4px 16px rgba(0,0,0,.09); }
/* Mot-repère illustré (apparaît au tap d'un morceau) */
.dec-key { display:flex; flex-direction:column; align-items:center; gap:2px; padding:4px 0 2px; animation:dec-key-in .18s ease; }
.dec-key-img { width:92px; height:92px; object-fit:contain; padding:8px; background:var(--surface-2);
  border:2px solid var(--line); border-radius:var(--radius-lg); box-shadow:0 4px 14px rgba(0,0,0,.08); }
.dec-key-cap { font-weight:800; color:var(--accent); }
@keyframes dec-key-in { from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }

/* Illustration locale (scène visuelle / photo / vidéo) */
.dec-scene { padding:6px 4px 10px; }
.dec-scene-cap { text-align:center; font-weight:800; color:var(--accent); margin-bottom:6px; }
.dec-scene-frame { position:relative; max-width:520px; margin:0 auto; border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:0 8px 26px rgba(0,0,0,.16); }
.dec-scene-media { display:block; width:100%; height:auto; }
.dec-scene-hot { position:absolute; border:3px solid var(--accent); border-radius:12px;
  box-shadow:0 0 0 9999px color-mix(in srgb, var(--accent) 12%, transparent); animation:dec-hot 1.4s ease-in-out infinite; }
@keyframes dec-hot { 0%,100%{ box-shadow:0 0 0 9999px color-mix(in srgb, var(--accent) 10%, transparent), 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  50%{ box-shadow:0 0 0 9999px color-mix(in srgb, var(--accent) 10%, transparent), 0 0 0 8px color-mix(in srgb, var(--accent) 0%, transparent); } }
.dec-linkedit { min-width:0; padding:8px 12px; }

/* Lexique de prononciation (identité vocale) */
.pron-manager { display:flex; flex-direction:column; gap:8px; margin-bottom:8px; }
.pron-row { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  border:2px solid var(--line); border-radius:var(--radius); padding:8px 12px; background:var(--surface); }
.pron-info { display:flex; align-items:center; gap:8px; flex-wrap:wrap; min-width:0; }
.pron-disp { font-weight:800; color:var(--ink); }
.pron-arrow { color:var(--muted); }
.pron-speech { color:var(--accent); font-weight:700; }
.pron-ph { color:var(--muted); font-size:.85rem; font-family:monospace; }
.pron-acts { display:flex; gap:6px; }
.pron-acts .btn-secondary { padding:8px 12px; min-height:40px; border-radius:var(--radius-pill); }
.pron-add { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:4px;
  border-top:1px dashed var(--line); padding-top:10px; }
.pron-add input { flex:1 1 160px; min-height:44px; font-size:1rem; padding:8px 12px;
  border:2px solid var(--line); border-radius:var(--radius); background:var(--surface); color:var(--ink); }
.pron-add .btn-secondary, .pron-add .btn-primary { border-radius:var(--radius-pill); }
.pron-warn { background:color-mix(in srgb, #d97706 16%, var(--surface)); border:2px solid color-mix(in srgb, #d97706 45%, transparent);
  border-radius:var(--radius); padding:8px 12px; font-weight:700; color:var(--ink); margin:0 0 8px; }
/* Bouton Accueil dans les vues (Ma voix, etc.) */
.view-hero { position:relative; }
.view-home { position:absolute; top:10px; right:10px; border-radius:var(--radius-pill); padding:8px 16px;
  font-weight:800; z-index:2; }
/* Pop-up « Montrer » : le mot montré, en grand */
.model-pop { position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  pointer-events:none; }   /* le fond ne bloque PAS le tableau : on peut montrer le mot suivant */
.model-pop[hidden] { display:none; }
.model-pop-card { background:var(--surface); border:3px solid var(--accent); border-radius:var(--radius-lg);
  box-shadow:0 18px 60px rgba(0,0,0,.28); padding:22px 30px; display:flex; flex-direction:column; align-items:center;
  gap:10px; max-width:min(80vw,420px); animation:dec-key-in .16s ease; pointer-events:auto; cursor:pointer; }
.model-pop-card img { width:180px; height:180px; max-width:52vw; object-fit:contain; }
.model-pop-word { font-size:2rem; font-weight:900; color:var(--accent); text-align:center; }
/* Grossissement à la sélection (profil tout-petit) : réutilise .model-pop ; calé un peu vers le haut
   pour couvrir le moins possible la grille, et sans animation si l'appareil réduit les animations. */
.tp-zoom { align-items:flex-start; padding-top:8vh; }
@media (prefers-reduced-motion: reduce) { .tp-zoom .model-pop-card { animation:none; } }

/* ---- Jeu « Chercher » : atténuation attentionnelle + halo (sur la vraie grille) ----
   On ESTOMPE les distracteurs (jamais faire disparaître), on met la cible en avant. Réversible. */
body.finding .tile { transition:opacity .25s ease; }
body.finding .tile.ct-dim { opacity:.28; }
body.finding .tile.ct-spot { outline:4px solid var(--accent); outline-offset:2px; z-index:1; }
@keyframes ct-halo { 0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 45%,transparent); }
  50%{ box-shadow:0 0 0 12px color-mix(in srgb,var(--accent) 12%,transparent); } }
body.finding .tile.ct-spot { animation:ct-halo 1.6s ease-in-out infinite; }
body.finding .tile.ct-found { outline:4px solid var(--ok, #1d9e75); }
@media (prefers-reduced-motion: reduce) { body.finding .tile.ct-spot { animation:none; } }
/* Barre du jeu — calque FIXE en bas, ne déplace jamais la grille */
#find-bar { position:fixed; left:50%; transform:translateX(-50%); bottom:74px; z-index:1450;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center;
  max-width:94vw; padding:10px 16px; border-radius:16px; background:var(--surface);
  border:3px solid var(--accent); box-shadow:var(--shadow); }
#find-bar[hidden] { display:none; }
#find-bar .find-q { font-weight:800; font-size:1.05rem; color:var(--ink); }
#find-bar button { border:2px solid var(--line); background:var(--bg); color:var(--ink);
  border-radius:999px; padding:8px 14px; font-weight:700; font-size:.9rem; min-height:44px; cursor:pointer; }
#find-bar button.primary { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
#find-bar button:focus-visible { outline:3px solid var(--jaune,#ffce1b); outline-offset:2px; }
/* Jeu « chercher une lettre » : indice RÉGION (ligne estompée) puis HALO — emplacements inchangés */
body.finding .key.ct-dim, body.finding .kb-row.row-dim .key { opacity:.3; transition:opacity .25s ease; }
body.finding .key.ct-spot { outline:4px solid var(--accent); outline-offset:2px; z-index:1;
  animation:ct-halo 1.6s ease-in-out infinite; }
body.finding .key.ct-found { outline:4px solid var(--ok,#1d9e75); }
@media (prefers-reduced-motion: reduce) { body.finding .key.ct-spot { animation:none; } }
/* Littératie (opt-in) : repère DISCRET commun des voyelles — un simple soulignement, jamais un fond criard,
   jamais une couleur par lettre. */
.key-vowel { box-shadow: inset 0 -4px 0 color-mix(in srgb, var(--accent-2, var(--accent)) 55%, transparent); }
.message { cursor:pointer; }

/* --- Grammaire --- */
.grammarbar {
  display:flex; align-items:center; gap:8px; padding:3px var(--gap);
  background:var(--surface); border-bottom:2px solid var(--line); flex-wrap:wrap;
}
.grammarbar-label { font-size:.85rem; color:var(--muted); font-weight:700; }
.grammarbar-sep { flex:1; }
.tense-btn, .morph-btn, .tense-toggle {
  border:2px solid var(--line); background:var(--bg); color:var(--ink);
  border-radius:999px; padding:5px 14px; font-weight:700; font-size:.92rem; min-height:34px;
}
.tense-btn.is-active { background:var(--c-verbe); border-color:var(--c-verbe); color:var(--c-verbe-txt); }
/* « Temps » : bouton dépliable + liste des temps */
.tense-toggle { display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
.tense-toggle strong { color:var(--c-verbe-ink); }
.tense-toggle .caret { transition: transform var(--tr); font-size:.8em; }
.tense-toggle.is-open { background:var(--c-verbe); border-color:var(--c-verbe); color:var(--c-verbe-txt); }
.tense-toggle.is-open strong { color:var(--c-verbe-txt); }
.tense-toggle.is-open .caret { transform: rotate(180deg); }
.tense-list { display:flex; flex-wrap:wrap; gap:6px; align-items:center; width:100%; padding:6px 0 2px; }
.tense-list[hidden] { display:none; }
/* Deux groupes dans la liste : temps conjugués (usage conversationnel) vs formes du verbe (littératie). */
.tense-group-label { width:100%; font-size:.78rem; font-weight:800; color:var(--muted);
  text-transform:uppercase; letter-spacing:.03em; margin:4px 0 0; }
.tense-group-label:first-child { margin-top:0; }
/* Bouton rapide « Infinitif » (forme du verbe) : liseré vert-verbe pour le distinguer de féminin/pluriel. */
.form-btn { border-color:color-mix(in srgb, var(--c-verbe) 55%, var(--line)); }
.morph-btn.is-active, .form-btn.is-active { background:var(--c-verbe); border-color:var(--c-verbe); color:var(--c-verbe-txt); }

/* --- Zone de travail : orientation des catégories --- */
.workarea { flex:1; display:flex; min-height:0; }            /* défaut : colonne (vertical) à gauche */
.workarea #board, .workarea #scenes { flex:1; min-width:0; }
/* Enveloppe du board : colonne [bandeau sécurité] + [grille], pour que le bandeau soit au-dessus des colonnes uniquement */
.workarea .board-wrap { flex:1; min-width:0; min-height:0; display:flex; flex-direction:column; }
.workarea .board-wrap #board { flex:1; }

/* --- Barre de ton (humeur de la voix) --- */
.tonebar { display:flex; align-items:center; gap:6px; padding:4px var(--gap); background:var(--surface);
  border-bottom:2px solid var(--line); overflow-x:auto; }
.tone-btn { border:2px solid var(--line); background:var(--bg); color:var(--ink); border-radius:999px;
  padding:8px 14px; font-weight:700; font-size:.85rem; white-space:nowrap; min-height:44px; }
.tone-btn.is-active { background:var(--c-social); border-color:var(--c-social); color:var(--c-social-txt); }

/* --- Onglets / catégories --- */
.tabs { display:flex; gap:6px; padding:6px var(--gap); background:var(--bg); }

/* VERTICAL (par défaut) : MENU EN GRILLE DE PICTOS à DROITE (sous la main, près du message).
   #tabs passe en order:2 → il se place après la grille, donc à droite, sans row-reverse
   (l'ordre des scènes/board reste intact). Le liseré de séparation passe à gauche. */
body.cat-vertical .workarea { flex-direction:row; }
body.cat-vertical #tabs { order:2; }
body.cat-vertical .tabs {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:5px; align-content:start;
  overflow-y:auto; overflow-x:hidden;
  width:34vw; max-width:232px; min-width:168px; padding:6px; border-left:2px solid var(--line);
}
body.cat-vertical .tab {
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  width:auto; height:auto; text-align:center; white-space:normal; border-radius:12px;
  padding:5px 3px; min-height:66px;
}
body.cat-vertical .tab .tab-thumb { width:28px; height:28px; }
body.cat-vertical .tab .tab-label { font-size:.66rem; line-height:1.05; }
/* En accès oculaire / grandes cibles : on repasse à 2 colonnes, tuiles larges */
body.cat-vertical.eyegaze .tabs { grid-template-columns:1fr 1fr; }
body.cat-vertical.eyegaze .tab { min-height:90px; padding:7px 4px; }
body.cat-vertical.eyegaze .tab .tab-thumb { width:34px; height:34px; }
body.cat-vertical.eyegaze .tab .tab-label { font-size:.74rem; }
body.cat-vertical .tab-wide { grid-column:1 / -1; flex-direction:row; justify-content:center; min-height:46px; gap:8px; }
body.cat-vertical .tab-wide .tab-label { font-size:.95rem; }
body.cat-vertical .tabs-sep { grid-column:1 / -1; }

/* HORIZONTAL : bandeau de catégories en haut (chips picto + label) */
body.cat-horizontal .workarea { flex-direction:column; }
body.cat-horizontal .tabs { overflow-x:auto; border-bottom:1px solid var(--line); align-items:center; }
body.cat-horizontal .tab { flex-direction:row; gap:6px; }

.tab {
  position:relative;
  border:2px solid var(--line); background:var(--surface); color:var(--ink);
  border-radius:999px; padding:8px 16px; font-weight:700; white-space:nowrap; min-height:44px;
  display:flex; align-items:center; gap:6px;
  transition:opacity .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
/* ÉCLAIRER LES PORTES : le verbe courant met en lumière les catégories liées. On n'ajoute qu'un
   halo accent — rien ne bouge, rien n'est masqué. Les non-éclairées passent en VEILLE douce
   (toujours lisibles/touchables) pour que les portes utiles ressortent. Transitoire : dès qu'il
   n'y a plus de verbe, tout revient à pleine présence. */
.tab.tab-lit {
  border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 12%, var(--surface));
  box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 38%, transparent), 0 2px 8px rgba(0,0,0,.08);
}
@media (prefers-reduced-motion: reduce) { .tab { transition:none; } }
/* PORTES en tête de « En lien » : raccourcis-catégories. Anneau accent + petite flèche d'angle
   pour signifier « ceci OUVRE une catégorie » (≠ une case-mot qui s'ajoute à la phrase). */
.tile.ctx-door { position:relative; box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--accent) 32%, transparent); }
.ctx-door-arrow { position:absolute; top:1px; right:6px; font-weight:900; font-size:1rem; opacity:.5; }
/* Bouton « ranger la barre » : petit mais SOIGNÉ (pill pleine, liseré accent,
   ombre douce, léger relief au survol) — discret sans paraître bâclé. */
.tab-collapse-mini {
  border:1.5px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  background:color-mix(in srgb, var(--accent) 9%, var(--surface));
  color:var(--accent); border-radius:999px; min-height:42px; padding:9px 20px; margin:6px auto;
  font-size:1rem; font-weight:800; letter-spacing:.2px; line-height:1; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px; justify-content:center;
  box-shadow:var(--shadow-sm); transition:transform var(--tr), box-shadow var(--tr), background var(--tr);
}
.tab-collapse-mini:hover { transform:translateY(-1px); box-shadow:var(--shadow);
  background:color-mix(in srgb, var(--accent) 13%, var(--surface)); }
body.cat-vertical .tab-collapse-mini { grid-column:1 / -1; width:auto; justify-self:center; }
.tab-thumb { width:38px; height:38px; object-fit:contain; pointer-events:none; }
.tab-emoji { font-size:1.35rem; line-height:1; }
.tab-label { font-size:.8rem; font-weight:700; line-height:1.12; }
/* Couleur Fitzgerald de la catégorie : teinte douce + liseré, label en aubergine lisible */
body.cat-vertical .tab[data-color]{ border-width:2px; border-bottom-width:5px;
  background:color-mix(in srgb, var(--cat) 24%, var(--surface)); border-color:var(--cat); }
.tab[data-color="pronom"]{ --cat:var(--c-pronom); }
.tab[data-color="verbe"]{ --cat:var(--c-verbe); }
.tab[data-color="descriptif"]{ --cat:var(--c-descriptif); }
.tab[data-color="nom"]{ --cat:var(--c-nom); }
.tab[data-color="social"]{ --cat:var(--c-social); }
.tab[data-color="question"]{ --cat:var(--c-question); }
.tab[data-color="negation"]{ --cat:var(--c-negation); }
.tab[data-color="advocacy"]{ --cat:var(--c-advocacy); }
.tab.is-active { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
body.cat-vertical .tab.is-active[data-color]{ background:var(--accent); border-color:var(--accent); }

/* --- Grille --- */
.board {
  flex:1; display:grid; gap:var(--gap); padding:var(--gap); overflow-y:auto;
  grid-template-columns: repeat(var(--cols, 7), minmax(0, 1fr));
  align-content:start;
}
.tile {
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; padding:6px 4px; min-height:var(--tile-min);
  border:3px solid rgba(0,0,0,.18); border-radius:var(--radius);
  background:var(--surface); color:#111; font-weight:800; text-align:center;
  line-height:1.05; font-size:.92rem;
  word-break:keep-all; overflow-wrap:normal; hyphens:none; -webkit-hyphens:none;
}
/* jamais de coupure de mot : les mots longs rétrécissent au lieu de se couper */
.tile-label { hyphens:none; -webkit-hyphens:none; word-break:keep-all; overflow-wrap:normal; }
/* mots longs : rétrécissement prioritaire (spécificité > .tile .tile-label) */
.tile .tile-label.lbl-sm { font-size:.78rem; }
.tile .tile-label.lbl-xs { font-size:.66rem; }
.tile .tile-label.lbl-xxs { font-size:.56rem; }
/* filet de sécurité : aucun mot ne dépasse jamais la case */
.tile-label { max-width:100%; overflow-wrap:anywhere; }
.msg-token { word-break:keep-all; overflow-wrap:normal; hyphens:none; }
.tile:active { transform:scale(.96); }
.tile img { width:56px; height:56px; pointer-events:none; }
.tile .tile-label { font-size:.9rem; }
.tile.cat { cursor:pointer; }
.tile.cat::after { content:"›"; position:absolute; top:4px; right:8px; font-size:1.2rem; opacity:.5; }
.tile.back { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }

/* couleurs Fitzgerald */
.tile[data-color="pronom"]{ background:var(--c-pronom); color:var(--c-pronom-txt); }
.tile[data-color="verbe"]{ background:var(--c-verbe); color:var(--c-verbe-txt); }
.tile[data-color="descriptif"]{ background:var(--c-descriptif); color:var(--c-descriptif-txt); }
.tile[data-color="nom"]{ background:var(--c-nom); color:var(--c-nom-txt); }
.tile[data-color="social"]{ background:var(--c-social); color:var(--c-social-txt); }
.tile[data-color="question"]{ background:var(--c-question); color:var(--c-question-txt); }
.tile[data-color="petit"]{ background:var(--c-petit); color:var(--c-petit-txt); }
.tile[data-color="negation"]{ background:var(--c-negation); color:var(--c-negation-txt); }
.tile[data-color="advocacy"]{ background:var(--c-advocacy); color:var(--c-advocacy-txt); }

/* --- Grille en blocs grammaticaux (colonnes doublées, responsive, peu de scroll) --- */
/* BOARD COLONNES = PLEIN ÉCRAN : les colonnes se rangent côte à côte et remplissent
   TOUTE la largeur ET la hauteur -> aucun espace vide, aucun défilement de page.
   Vaut pour l'ACCUEIL comme pour les CATÉGORIES (le nombre de colonnes de la catégorie
   est borné à 6 côté JS pour rester lisible). */
.board.columns { display:flex; flex-wrap:nowrap; align-items:stretch; align-content:stretch;
  gap:8px; padding:8px; overflow:hidden; }
.context-zone { display:contents; }          /* ses blocs deviennent des colonnes sœurs */
.board.columns .vcol,
.board.columns .vcol-fringe { display:flex; flex-direction:column; gap:4px; flex:1 1 0; min-width:0; }
.board.columns .vgrid { display:grid; flex:1 1 auto; min-height:0;
  grid-template-columns:repeat(2, minmax(0, 1fr)); grid-auto-rows:minmax(0, 1fr); gap:5px; }
/* MODES GRANDES CIBLES (Regard / survol / grandes cibles) : les cases ne peuvent plus rétrécir
   (min-height imposé) ; pour qu'elles ne se CHEVAUCHENT jamais quand la place manque, la colonne
   DÉFILE au lieu de déborder. Confiné à body.eyegaze -> le mode normal (rétrécir pour tenir) est intact. */
body.eyegaze .board.columns .vcol,
body.eyegaze .board.columns .vcol-fringe { overflow-y:auto; min-height:0; }
body.eyegaze .board.columns .vgrid { grid-auto-rows:minmax(96px, auto); align-content:start; }
/* ACCUEIL : 2 colonnes de mots par catégorie (disposition d'origine) dès qu'il y
   a la place. Sur écran ÉTROIT seulement, on repasse à 1 colonne pour que les
   mots ne soient pas coupés. */
@media (max-width:900px) {
  .board.columns.is-home .vgrid { grid-template-columns:1fr; }
}
.board.columns .tile { width:auto; min-width:0; min-height:0; padding:3px 2px; font-size:.82rem; justify-content:center; overflow:hidden; container-type:inline-size; }
/* le picto RÉTRÉCIT pour tenir dans la cellule et laisser la place au mot (jamais coupé) */
.board.columns .tile img,
.board.columns .tile .emoji-picto {
  width:auto; height:auto; min-height:0; max-width:86%;
  max-height:calc(100% - 1.4em); object-fit:contain; }
/* Police liée à la TAILLE DE LA CASE (container-query) : le mot rétrécit d'abord, puis
   s'enroule sur 2 lignes ; JAMAIS de dépassement, quelle que soit la taille d'écran. */
.board.columns .tile .tile-label {
  /* Taille UNIFORME pour toutes les cellules (plus de cqw par case = aspect
     harmonisé), graisse constante ; la césure + le clamp 2 lignes évitent tout
     débordement, la case est respectée. */
  font-size:clamp(.62rem, 1.4vw, .82rem); line-height:1.18; max-width:100%; width:100%;
  font-weight:700; letter-spacing:-.01em; padding-bottom:2px;   /* place pour les jambages (g, j, p, y) */
  /* Césure PROPRE (trait) au lieu d'une coupe au milieu : « vou-loir », pas « voulo ir ».
     Bloc classique (pas -webkit-box) pour que hyphens:auto fonctionne ; 2 lignes max. */
  overflow-wrap:break-word; word-break:normal; hyphens:auto; -webkit-hyphens:auto;
  display:block; max-height:2.55em; overflow:hidden; text-align:center; }
/* Échelle GRADUÉE par longueur du mot : les mots courts gardent la taille de
   base ; seuls les mots plus longs rétrécissent d'un cran, juste assez pour
   tenir sur une ligne sans être coupés (2 colonnes = cases étroites). */
.board.columns .tile .tile-label.lbl-sm  { font-size:clamp(.54rem, 1.2vw, .72rem); }
.board.columns .tile .tile-label.lbl-xs  { font-size:clamp(.5rem, 1.05vw, .64rem); }
.board.columns .tile .tile-label.lbl-xxs { font-size:clamp(.46rem, .95vw, .58rem); }
.board.columns .vcol-head { padding:2px 4px; font-size:.72rem; flex:0 0 auto; }
/* ACCUEIL = zéro défilement absolu. CATÉGORIES = les cases gardent une taille
   LISIBLE (min 46px) : une petite catégorie remplit l'écran sans défiler ; une très
   grosse (thème « dictionnaire ») reste lisible et ne défile QUE dans le tableau,
   les colonnes s'étirant à la même hauteur (aucun espace vide). */
/* Catégories PAGINÉES : chaque page REMPLIT l'écran (comme l'accueil) → aucun défilement.
   Le nombre de cases par page (réglage) borne la densité ; les cases se redimensionnent pour tenir. */
.board.columns:not(.is-home) { overflow:hidden; }
.board.columns:not(.is-home) .vcol-fringe .vgrid { grid-auto-rows:minmax(0, 1fr); }
/* B2/B3 — ACCUEIL : PLANCHER de lisibilité au lieu d'un « zéro défilement » qui écrasait les pictos
   à 0 dès que la hauteur est courte (petit portable, demi-écran, clavier à l'écran). Chaque rangée
   fait AU MOINS ~44px × « Taille des images » (le réglage gouverne enfin l'accueil = B3), grandit
   pour remplir l'écran quand il y a la place (1fr), et le tableau DÉFILE si le vocabulaire ne rentre
   pas — jamais de picto écrasé. Principe des 49 : adapter la perception, jamais réduire les mots. */
.board.columns.is-home { overflow-x:hidden; overflow-y:auto; align-items:flex-start; }
.board.columns.is-home .vcol,
.board.columns.is-home .vcol-fringe { align-self:stretch; }
.board.columns.is-home .vgrid { grid-auto-rows:minmax(calc(44px * var(--symbol-scale, 1)), 1fr); }
/* MOBILE / petit écran : le plein écran « colonnes serrées » deviendrait illisible
   (7 colonnes dans 375 px). On repasse en colonnes qui s'ENROULENT (2 par ligne),
   cases lisibles, défilement vertical (attendu sur téléphone). */
@media (max-width:640px) {
  /* TÉLÉPHONE : les actions SECONDAIRES (réglages d'affichage) se replient dans « ⋯ » ; les
     ESSENTIELLES (Chercher · Clavier · Dire · Effacer · Vider) restent à LEUR place d'origine.
     Aucun réordonnancement selon la largeur (repères stables) — ordre identique à l'ordinateur. */
  #more-toggle { display:inline-flex; }
  .msgbar-actions #theme-toggle, .msgbar-actions #promenade-toggle, .msgbar-actions #model-toggle,
  .msgbar-actions #tone-toggle, .msgbar-actions #decode-btn { display:none; }
  /* ACCUEIL sur téléphone : 7 colonnes côte à côte (JAMAIS moins), mais des cases de TAILLE
     USABLE (≥46 px, zoomables via « Taille des images ») + DÉFILEMENT VERTICAL pour le reste —
     au lieu de tout tasser à 32 px (illisible, et cases du bas coupées). Vocabulaire jamais réduit. */
  .board.columns.is-home { flex-wrap:nowrap; overflow-x:auto; overflow-y:auto; gap:4px; align-items:flex-start; }
  .board.columns.is-home .vcol, .board.columns.is-home .vcol-fringe { flex:1 1 0; min-width:44px; align-self:flex-start; }
  .board.columns.is-home .vgrid { grid-template-columns:1fr; grid-auto-rows:minmax(calc(46px * var(--symbol-scale, 1)), auto); gap:4px; }
  .board.columns.is-home .tile { min-height:0; padding:3px 2px; }
  /* Le bouton flottant « Menu » recouvrait des cases (CAA : chaque mot compte). Sur téléphone, quand
     le menu du bas est VISIBLE (défaut), on le masque -> plus aucune case cachée. Il réapparaît quand
     le menu est masqué (c'est alors le seul moyen de le rétablir). */
  body:not(.menu-hidden) #menu-toggle { display:none; }
  .board.columns.is-home .tile img, .board.columns.is-home .tile .emoji-picto {
    max-height:calc(100% - 1.05em); max-width:82%; }
  .board.columns.is-home .tile .tile-label { font-size:clamp(.5rem, 2.4vw, .7rem); }
  /* CATÉGORIE ouverte : moins de mots -> enroulement lisible + défilement acceptable. */
  .board.columns:not(.is-home) { flex-wrap:wrap; align-content:flex-start; overflow-x:hidden; overflow-y:auto; gap:6px; }
  .board.columns:not(.is-home) .vcol, .board.columns:not(.is-home) .vcol-fringe { flex:1 1 46%; min-width:150px; }
  .board.columns:not(.is-home) .vgrid { grid-auto-rows:auto; }
  .board.columns:not(.is-home) .tile { min-height:60px; padding:5px 3px; }
  .board.columns:not(.is-home) .tile img, .board.columns:not(.is-home) .tile .emoji-picto { max-height:40px; max-width:70%; }
  .board.columns:not(.is-home) .tile .tile-label { font-size:.82rem; }
}
/* ===== Chrome compact sur téléphone / petite tablette : la grille prend la place ===== */
@media (max-width:820px) {
  /* Barre de grammaire : une seule ligne qui défile (au lieu de s'empiler sur 2 lignes) */
  .grammarbar { flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; }
  /* Barre d'actions : icônes seules, une ligne qui défile */
  .msgbar-actions { flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; justify-content:flex-start; }
  .msgbar-actions .icon-btn { min-width:46px; min-height:44px; font-size:1.25rem; flex:0 0 auto; padding:4px; }
  .msgbar-actions .icon-btn.big { min-width:60px; }
  .msgbar-actions .icon-btn .icon-lab { display:none; }
  /* Mobile : au repos, la barre de ton se REPLIE (rend la place à la grille) au lieu de réserver
     du vide. Le ton reste accessible via le bouton 🎭 (qui la rouvre). La grille gagne ~58 px.
     NB : on NE réordonne PAS la barre selon la largeur (repères stables) — cf. menu « ⋯ » plus bas. */
  #tonebar.tb-resting { display:none; }
  /* Bandeau de sécurité : 3 colonnes (2 lignes pour 6 messages, tout visible sans empiler sur 3) */
  .safety-strip { display:grid; grid-template-columns:repeat(3, 1fr); gap:5px; }
  .safety-strip .safety-btn { flex:none; height:42px; font-size:.9rem; }
  /* Chips de grammaire compactes (une ligne basse au lieu de gros boutons) */
  .grammarbar { min-height:44px; }
  .grammarbar .tense-toggle, .grammarbar .morph-btn, .grammarbar .form-btn {
    min-height:38px; font-size:.82rem; padding:6px 12px; white-space:nowrap; flex:0 0 auto; }
  /* fines barres de défilement discrètes */
  .grammarbar::-webkit-scrollbar, .msgbar-actions::-webkit-scrollbar, .board.columns.is-home::-webkit-scrollbar { height:4px; }
}
/* ===== Catégories sur téléphone : bandeau compact en haut (jamais un gros bloc) ===== */
@media (max-width:640px) {
  .workarea { flex-direction:column; }
  /* la barre de catégories = une seule ligne qui défile horizontalement, hauteur bornée */
  #tabs { order:0; flex-direction:row; display:flex; overflow-x:auto; overflow-y:hidden;
    max-height:56px; border-left:0; border-bottom:1px solid var(--line); padding:4px 6px; gap:6px; }
  #tabs.tabs { grid-template-columns:none; }
  #tabs .tab { flex:0 0 auto; min-height:46px; flex-direction:row; gap:6px; }
  #tabs .tab .tab-label { white-space:nowrap; font-size:.72rem; }
  #tabs .tab-wide, #tabs .tab-collapse-mini { grid-column:auto; flex:0 0 auto; white-space:nowrap; }
  #tabs .tab-collapse-mini { font-size:.75rem; padding:6px 10px; min-height:40px; align-self:center; }
  #tabs .tabs-sep { display:none; }   /* étiquettes de groupe masquées dans le bandeau compact (les puces suffisent) */
  /* rangée = disparaît vraiment (hauteur 0) + aucun couloir réservé */
  body.cat-collapsed-side #tabs, body.cat-collapsed-top #tabs {
    max-height:0; height:0; min-height:0; padding:0; border:0; opacity:0; overflow:hidden; }
  body.cat-collapsed-side .workarea, body.cat-collapsed-top .workarea { padding-right:0; padding-top:0; }
}
.vcol-head {
  text-align:center; font-weight:800; font-size:.82rem; padding:7px 6px; border-radius:8px;
  border:2px solid rgba(0,0,0,.15); position:sticky; top:0; z-index:1;
}
.vcol-head[data-color="pronom"]{ background:var(--c-pronom); color:var(--c-pronom-txt); }
.vcol-head[data-color="verbe"]{ background:var(--c-verbe); color:var(--c-verbe-txt); }
.vcol-head[data-color="descriptif"]{ background:var(--c-descriptif); color:var(--c-descriptif-txt); }
.vcol-head[data-color="nom"]{ background:var(--c-nom); color:var(--c-nom-txt); }
.vcol-head[data-color="social"]{ background:var(--c-social); color:var(--c-social-txt); }
.vcol-head[data-color="question"]{ background:var(--c-question); color:var(--c-question-txt); }
.vcol-head[data-color="petit"]{ background:var(--c-petit); color:var(--c-petit-txt); }
body.no-color .vcol-head { background:var(--surface); color:var(--ink); }
.vcol-fringe { border-left:3px solid var(--accent); padding:0 6px 6px 8px; margin-left:2px;
  background:color-mix(in srgb, var(--accent) 7%, transparent); border-radius:10px; }

/* --- Séparateur de catégories dans le rail --- */
.tabs-sep { font-size:.72rem; font-weight:800; color:var(--muted); text-transform:uppercase;
  padding:8px 6px 2px; letter-spacing:.03em; }
body.cat-horizontal .tabs-sep { align-self:center; padding:0 8px; white-space:nowrap; }

/* --- Résultats de recherche --- */
.search-results { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px; margin-top:12px; max-height:52vh; overflow:auto; }
.search-results .tile { min-height:92px; }

/* --- Disposition spirale --- */
.board.spiral { display:block; position:relative; }
.spiral-stage { position:relative; margin:16px auto; }
.spiral-tile { position:absolute; transform:translate(-50%,-50%); min-height:0 !important; box-shadow:0 2px 6px rgba(0,0,0,.15); }
.spiral-tile img { width:calc(40px * var(--symbol-scale,1)); height:calc(40px * var(--symbol-scale,1)); }
.spiral-tile .tile-label { font-size:.78rem; }

/* Case « mot seul » (mots abstraits sans picto Mulberry) : mot centré, en grand */
.tile.word-tile .tile-label { font-size:1.15rem; font-weight:800; }
.vcol .tile.word-tile .tile-label { font-size:1rem; }

/* ---- Ranger les colonnes (mode « Modifier » sur l'accueil) ---- */
.vcol-reorderable { position:relative; }
body.editing .vcol-reorderable { outline:2px dashed color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset:2px; border-radius:10px; cursor:grab; }
body.editing .vcol-reorderable.col-dragging { opacity:.5; cursor:grabbing; }
body.editing .vcol-reorderable.col-drop-target { outline:3px solid var(--accent);
  background:color-mix(in srgb, var(--accent) 8%, transparent); }
.vcol-reorder { display:flex; align-items:center; justify-content:space-between; gap:6px;
  margin:0 0 4px; padding:2px; }
.vcol-move { flex:0 0 auto; min-width:38px; min-height:34px; border-radius:10px; cursor:pointer;
  border:1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  background:color-mix(in srgb, var(--accent) 8%, var(--surface)); color:var(--accent);
  font-size:1.2rem; font-weight:900; line-height:1; box-shadow:var(--shadow-sm);
  transition:transform var(--tr), background var(--tr); }
.vcol-move:hover { transform:translateY(-1px); background:color-mix(in srgb, var(--accent) 16%, var(--surface)); }
.vcol-grip { flex:1; text-align:center; color:color-mix(in srgb, var(--accent) 55%, transparent);
  font-size:1rem; letter-spacing:2px; cursor:grab; user-select:none; }

.tile.is-hidden { display:none; }
/* Picto JUMEAU (même dessin, mots différents) : pastille de couleur propre au mot. */
.twin-mark { position:absolute; top:5px; right:6px; width:13px; height:13px; border-radius:50%;
  background:var(--twin, #888); border:2px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.25);
  pointer-events:none; z-index:2; }
body.no-color .twin-mark { display:none; }   /* mode sans couleur : on retire le repère coloré */
.search-results .tile.sel { outline:4px solid var(--accent); outline-offset:-2px; }
/* Cahier de vie */
.cahier-row { display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:12px; padding:8px; margin:8px 0; }
.cahier-thumb { width:64px; height:64px; object-fit:cover; border-radius:8px; flex:0 0 auto; background:var(--surface-2); }
.cahier-date { color:var(--accent-2, #a52bfc); font-weight:700; font-size:.85rem; }
/* Résultats de recherche : chaque mot = tuile + « 📍 où est-ce ? » (aller + surligner) */
.search-cell { display:flex; flex-direction:column; align-items:stretch; gap:4px; }
.search-go { border:2px solid var(--accent); background:var(--surface); color:var(--accent);
  border-radius:8px; padding:5px 8px; font-weight:800; font-size:.74rem; min-height:34px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.search-go:hover { background:var(--accent); color:var(--accent-ink); }

/* Fil d'Ariane (où suis-je) — hors zone motrice, en haut */
/* Fil d'Ariane FUSIONNÉ à la barre du haut : bande fine, sans bordure propre, repère discret
   hors zone motrice — ne mange presque plus de hauteur (grille = plus de place, toujours fixe). */
.breadcrumb { display:flex; align-items:center; gap:4px; flex-wrap:wrap;
  padding:2px var(--gap); background:var(--surface);
  font-size:.8rem; font-weight:700; }
.breadcrumb .crumb { background:transparent; border:1.5px solid var(--line); color:var(--ink);
  border-radius:999px; padding:2px 10px; min-height:24px; font-weight:800; font-size:.8rem; }
.breadcrumb .crumb.here { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.breadcrumb .sep { color:var(--muted); }

/* Pagination des catégories (fini le scroll) : pages fixes + ‹ › + points */
.ctx-pager { display:flex; align-items:center; justify-content:center; gap:10px; padding:6px;
  flex:0 0 auto; }
.ctx-pager button { border:2px solid var(--accent); background:var(--surface); color:var(--accent);
  border-radius:999px; min-width:48px; min-height:44px; font-size:1.2rem; font-weight:900; }
.ctx-pager button:disabled { opacity:.35; }
.ctx-pager .dots { display:flex; gap:6px; }
.ctx-pager .dot { width:11px; height:11px; border-radius:50%; background:var(--line); border:0; padding:0; min-width:0; min-height:0; }
.ctx-pager .dot.on { background:var(--accent); }
.ctx-pager .pg-label { font-weight:800; color:var(--muted); font-size:.82rem; }

/* Surlignage d'une case trouvée par la recherche (guidance : « voilà où il est ») */
@keyframes ct-spot { 0%,100%{ box-shadow:0 0 0 0 rgba(165,43,252,0); } 50%{ box-shadow:0 0 0 6px rgba(165,43,252,.85); } }
.tile.spotlight { animation:ct-spot 1s ease-in-out 3; outline:3px solid var(--accent); }

/* --- Recherche = GUIDE DE CHEMIN MOTEUR (bandeau bas, ne recouvre PAS la grille) --- */
/* Bandeau SLIM qui FLOTTE au-dessus du bas de la grille : la grille ne bouge PAS (aucun reflow). */
.path-search {
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  background:var(--surface); border-top:2px solid var(--line);
  box-shadow:0 -4px 14px rgba(0,0,0,.14);
  padding:6px 10px calc(6px + env(safe-area-inset-bottom,0px));
  display:flex; flex-direction:column; gap:6px;
}
.path-search[hidden] { display:none; }
.ps-row { display:flex; gap:8px; align-items:center; }
.ps-input { flex:1; min-height:44px; font-size:1rem; padding:6px 12px; border:2px solid var(--line);
  border-radius:10px; background:var(--bg); color:var(--ink); }
.ps-close { min-width:44px; min-height:44px; border:2px solid var(--line); border-radius:10px;
  background:var(--bg); color:var(--ink); font-size:1.1rem; font-weight:800; flex:0 0 auto; }
/* Résultats : UNE seule rangée qui défile horizontalement (bandeau reste bas). */
.ps-results { display:flex; flex-wrap:nowrap; gap:6px; overflow-x:auto; overflow-y:hidden; padding-bottom:2px; }
.ps-chip { display:flex; align-items:center; gap:5px; padding:4px 10px; border:2px solid var(--line);
  border-radius:999px; background:var(--bg); color:var(--ink); min-height:44px; font-weight:700; white-space:nowrap; flex:0 0 auto; }
.ps-chip img { width:24px; height:24px; object-fit:contain; }
/* Mode guidage : une seule ligne compacte (points d'étape + cible + boutons). */
.ps-guide { display:flex; align-items:center; gap:10px; }
.ps-steps { display:flex; gap:6px; flex:0 0 auto; }
.ps-step { width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:.8rem; font-weight:800; border:2px solid var(--line); color:var(--muted); background:var(--bg); }
.ps-step.now { border-color:var(--accent); color:var(--accent); }
.ps-step.done { background:var(--accent); color:#fff; border-color:var(--accent); }
.ps-target { flex:1; min-width:0; font-size:1.02rem; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ps-icon { min-width:44px; min-height:44px; border:2px solid var(--line); border-radius:10px; background:var(--bg);
  color:var(--ink); font-size:1.1rem; flex:0 0 auto; }
/* Cible du guidage (case/onglet à toucher) : halo accent pulsé, EN PLACE (aucun défilement). */
.guide-target { outline:4px solid var(--accent) !important; outline-offset:2px; border-radius:12px;
  animation:ct-spot 1.1s ease-in-out infinite; position:relative; z-index:3; }
@media (prefers-reduced-motion: reduce) { .guide-target { animation:none; } }

/* Bibliothèque de pictos (modale Parcourir) */
.lib-cats { display:flex; gap:6px; flex-wrap:wrap; margin:8px 0; }
.lib-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(84px, 1fr)); gap:6px;
  max-height:52vh; overflow-y:auto; margin-top:8px; }
.lib-grid .tile img { width:48px; height:48px; object-fit:contain; }
.picto-prev { border:2px solid var(--line); border-radius:8px; background:var(--surface); }
/* 2e langue (bilinguisme) : sous le mot, plus discrète */
.tile-tr { font-size:.7rem; font-weight:700; opacity:.72; font-style:italic; line-height:1; margin-top:1px; max-width:100%; overflow-wrap:anywhere; }
.board.columns .tile-tr { font-size:.62rem; }
/* Mode ANCRES (compaction sémantique, optionnel) */
.board.anchors { display:block; overflow-y:auto; padding:10px; }
.anchor-learn { margin:0 0 10px; padding:8px 12px; border-radius:10px; font-weight:700;
  background:color-mix(in srgb, var(--accent) 10%, transparent); color:var(--ink);
  border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  display:flex; align-items:flex-start; gap:10px; }
.anchor-learn > span { flex:1; }
/* « ✕ ne plus afficher » : coupe le texte de rappel sans aller dans les Réglages */
.anchor-learn-x { flex:0 0 auto; align-self:center; border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background:transparent; color:var(--accent); border-radius:999px; padding:4px 10px;
  font-size:.8rem; font-weight:800; cursor:pointer; white-space:nowrap; opacity:.85; }
.anchor-learn-x:hover { opacity:1; background:color-mix(in srgb, var(--accent) 12%, transparent); }
.anchor-grid { display:grid; grid-template-columns:repeat(var(--cols, 7), minmax(0, 1fr)); gap:10px; align-content:start; }
.anchor-grid .tile { min-height:88px; transition:opacity .18s, box-shadow .18s; }
/* révélation progressive : estompe / met en avant, SANS déplacer les cases */
.anchor-grid .tile.anc-dim { opacity:.32; filter:grayscale(.35); }
.anchor-grid .tile.anc-hot { box-shadow:0 0 0 3px var(--accent); }
/* « Quelques chemins possibles » : bandeau pleine largeur qui sépare les mots
   de l'idée des idées VOISINES (promenade / navigation sémantique). */
.anchor-grid .anchor-section { grid-column:1 / -1; margin:6px 0 0; padding:4px 4px 0;
  font-weight:800; color:var(--accent); font-size:.98rem; letter-spacing:.2px;
  border-top:2px dashed color-mix(in srgb, var(--accent) 35%, transparent); }
/* idées voisines : liséré pointillé = « chemin proposé », pas une case-mot */
.anchor-grid .tile.anc-next { border:2px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  background:color-mix(in srgb, var(--accent) 6%, var(--tile-bg, #fff)); }
@media (max-width:640px){ .anchor-grid { grid-template-columns:repeat(3, minmax(0,1fr)); } }

/* ===== Promenade : un chemin, pas une grille Minspeak ===== */
.board.anchors { background:
  radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 60%); }
/* Fil du chemin parcouru (départ › idée › idée) */
.prom-trail { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin:2px 0 12px; }
.prom-trail .prom-step { border:0; background:color-mix(in srgb, var(--accent) 10%, var(--surface));
  color:var(--accent); border-radius:999px; padding:7px 14px; font-weight:800; font-size:.92rem;
  min-height:40px; cursor:pointer; box-shadow:var(--shadow-sm); }
.prom-trail .prom-start { background:var(--accent); color:#fff; }
.prom-trail .prom-step.is-here { outline:2px solid var(--accent); outline-offset:1px; }
.prom-trail .prom-sep { color:color-mix(in srgb, var(--accent) 55%, transparent); font-weight:900; }
/* Le sentier des idées voisines : « pas japonais » alignés, avec liaison */
.prom-path { margin:14px 0 4px; padding-top:12px;
  border-top:2px dashed color-mix(in srgb, var(--accent) 30%, transparent); }
.prom-path-title { font-weight:800; color:var(--accent); margin:0 0 10px; font-size:1rem; }
.prom-path-title::before { content:"👣 "; }
.prom-path-row { display:flex; flex-wrap:wrap; gap:14px; align-items:stretch; }
.prom-stone { flex:0 1 130px; display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:12px 10px; border-radius:20px; cursor:pointer;
  border:2px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  background:color-mix(in srgb, var(--accent) 6%, var(--surface));
  box-shadow:var(--shadow-sm); transition:transform var(--tr), box-shadow var(--tr), background var(--tr); }
.prom-stone:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg);
  background:color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.prom-stone img { width:56px; height:56px; object-fit:contain; }
.prom-stone-lab { font-weight:800; font-size:.95rem; text-align:center; color:var(--ink); }
.tile .edit-badge { position:absolute; top:-6px; left:-6px; background:var(--accent); color:#fff;
  border-radius:50%; width:26px; height:26px; display:none; align-items:center; justify-content:center; font-size:.9rem; }
body.editing .tile .edit-badge { display:flex; }

/* --- scanning / balayage (2 niveaux : groupe puis case) ---
   Le niveau ne se distingue PAS que par la couleur : la forme change aussi
   (pointillé vs plein), l'épaisseur, l'ombre et un léger agrandissement. */
/* NIVEAU 1 — GROUPE en cours : contour POINTILLÉ + fond teinté */
.scan-grp-hl { outline:3px dashed #a04e00; outline-offset:-2px;
  background:color-mix(in srgb, #ff8a3d 16%, transparent); border-radius:10px; }
/* NIVEAU 2 — CASE pointée : contour PLEIN épais + halo blanc/orange (contraste
   sur n'importe quel fond) + léger agrandissement + passe au premier plan */
.tile.scan-hl, .tab.scan-hl, .key.scan-hl, .pred.scan-hl, #scan-back.scan-hl {
  outline:5px solid #d83b00; outline-offset:-2px; border-radius:10px;
  box-shadow:0 0 0 3px #fff, 0 0 0 9px #d83b00, 0 8px 20px rgba(0,0,0,.32);
  transform:scale(1.06); z-index:5; position:relative; }
@media (prefers-reduced-motion: reduce) {
  .tile.scan-hl, .tab.scan-hl, .key.scan-hl, .pred.scan-hl, #scan-back.scan-hl { transform:none; } }
/* Case « ↩ Retour » (sortie du 2ᵉ niveau) — balayable comme les autres */
#scan-back { position:fixed; left:14px; bottom:132px; z-index:1550;
  background:#3a2b5c; color:#fff; border:0; border-radius:999px; padding:12px 18px;
  font-size:1rem; font-weight:900; box-shadow:var(--shadow-lg); cursor:pointer; }
#scan-back[hidden] { display:none; }
/* Gros bouton « Reprendre le balayage » (pause anti-fatigue) */
#scan-resume { position:fixed; left:50%; bottom:22px; margin-left:0; z-index:1600;
  background:#d83b00; color:#fff; border:0; border-radius:999px; padding:16px 28px;
  font-size:1.1rem; font-weight:900; box-shadow:0 10px 30px rgba(0,0,0,.3); cursor:pointer;
  translate:-50% 0; animation:handle-pulse 1.4s ease-out infinite; }
#scan-resume[hidden] { display:none; }

/* --- Clavier --- */
/* min-height:0 + overflow-y:auto : le clavier scrolle À L'INTÉRIEUR de son cadre et ne
   pousse JAMAIS la barre d'outils (le menu) hors de l'écran. */
.keyboard { padding:var(--gap); background:var(--surface); border-top:2px solid var(--line);
  min-height:0; overflow-y:auto; }
/* Vue « Écrire » : le clavier EST le contenu principal → il occupe la place libre et on masque
   la grille (sinon elle apparaît écrasée en sliver coloré tout en haut). */
body[data-view="write"] .keyboard { flex:1 1 auto; }
body[data-view="write"] .workarea { display:none; }
/* Clavier ANCRÉ sur l'accueil : plafonné pour laisser voir la grille au-dessus. */
body[data-view="board"] .keyboard { flex:0 0 auto; max-height:44dvh; }
.prediction { display:flex; gap:6px; overflow-x:auto; min-height:52px; margin-bottom:6px; }
.pred {
  border:2px solid var(--accent); background:var(--surface); color:var(--ink);
  border-radius:10px; padding:8px 14px; font-weight:800; white-space:nowrap; min-height:44px;
  display:inline-flex; align-items:center; gap:6px;
}
.pred-pic { width:30px; height:30px; object-fit:contain; flex:none; }
/* Clavier en RANGÉES (mémoire motrice stable, comme un vrai clavier). */
.keys { display:flex; flex-direction:column; gap:5px; }
.kb-row { display:flex; gap:5px; justify-content:center; }
.kb-row .key { flex:1 1 0; min-width:28px; }  /* plancher > cible WCAG 2.2 (24px) même sur petit écran */
.kb-accents { margin-top:4px; flex-wrap:wrap; }
.kb-sons .key { font-weight:800; letter-spacing:.02em; }   /* clavier phonologique : graphèmes lisibles */
.kb-switch { margin-top:8px; gap:6px; flex-wrap:wrap; justify-content:flex-start; }
.kb-layout-btn { flex:0 0 auto; padding:6px 12px; border-radius:999px; border:2px solid var(--line);
  background:var(--surface); color:var(--ink); font-weight:800; cursor:pointer; font-size:.9rem; }
.kb-layout-btn.is-active { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
/* Grandes touches : cibles plus grandes, moins par rangée (elles s'enroulent). */
.keyboard.kb-big .kb-row { flex-wrap:wrap; }
.keyboard.kb-big .key { flex:1 1 17%; min-height:66px; font-size:1.5rem; }
.keyboard-row { display:flex; gap:5px; margin-top:5px; }
.key {
  border:2px solid var(--line); background:var(--bg); color:var(--ink);
  border-radius:8px; min-height:52px; font-size:1.15rem; font-weight:800;
}
/* Touches de FONCTION distinctes des lettres (repère, pas décoration — la couleur signale un rôle) :
   « espace » = zone-fonction calme (≠ lettre, ≠ « dire »), « dire/son » = accent fort. Les 26 lettres
   restent neutres (aucune couleur par lettre). */
.key-wide { flex:1; background:color-mix(in srgb, var(--accent) 12%, var(--surface)); color:var(--ink);
  border-color:color-mix(in srgb, var(--accent) 35%, var(--line)); font-weight:800; }
.key-fn { flex:1; background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.key-accent { background:var(--surface-2); color:var(--accent); }

/* --- Barre d'outils --- */
.toolbar { display:flex; background:var(--surface); border-top:2px solid var(--line); }
.tool {
  flex:1; border:none; background:transparent; color:var(--muted);
  display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 4px; font-size:.72rem; font-weight:700;
  min-height:60px;
}
.tool .tool-ico { font-size:1.5rem; }
.tool.is-active { color:var(--accent); }

/* --- Panneaux (réglages / édition) --- */
.panel {
  position:fixed; inset:0 0 60px 0; background:var(--bg); z-index:20;
  overflow-y:auto; padding:20px; padding-bottom:80px;
}
.panel h2 { margin-top:0; }
.panel .row { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 0; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.panel label { font-weight:700; }
.panel select, .panel input[type=range] { min-height:44px; font-size:1rem; }
.panel .btn-primary, .btn-primary {
  background:var(--accent); color:var(--accent-ink); border:none; border-radius:var(--radius);
  padding:14px 22px; font-size:1rem; font-weight:800; min-height:52px;
}
.panel .btn-secondary {
  background:var(--surface); color:var(--ink); border:2px solid var(--line);
  border-radius:var(--radius); padding:12px 18px; font-weight:700; min-height:48px;
}
.panel .danger { color:#b00020; border-color:#b00020; }
.hint { color:var(--muted); font-size:.85rem; margin:.2rem 0 0; }
.panel details.adv { margin-top:10px; border-top:1px solid var(--line); }
.panel details.adv > summary { cursor:pointer; padding:16px 4px; font-weight:800; color:var(--accent); list-style:none; user-select:none; }
.panel details.adv > summary::-webkit-details-marker { display:none; }
.panel details.adv > summary::before { content:"▸\00a0"; }
.panel details.adv[open] > summary::before { content:"▾\00a0"; }
.panel h3 { margin:18px 0 4px; font-size:.82rem; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }

/* --- RGPD --- */
.privacy { position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; z-index:50; padding:20px; }
.privacy-card { background:var(--surface); color:var(--ink); border-radius:var(--radius); max-width:440px; padding:24px; }
.privacy-card .small { color:var(--muted); font-size:.85rem; }
/* ---- Gestion générique des voix ---- */
.voice-manager { display:flex; flex-direction:column; gap:12px; margin:6px 0 8px; }
.voice-card { border:2px solid var(--line); border-radius:16px; padding:14px 16px; background:var(--surface);
  box-shadow:var(--shadow-sm); }
.voice-card.is-active { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 6%, var(--surface)); }
.voice-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.voice-name { font-weight:900; font-size:1.05rem; color:var(--ink); }
.voice-badge { font-size:.74rem; font-weight:800; border-radius:999px; padding:2px 10px;
  background:var(--accent); color:var(--accent-ink); }
.voice-badge.ok  { background:color-mix(in srgb, #2e7d32 18%, var(--surface)); color:#1b5e20; }
.voice-badge.off { background:color-mix(in srgb, var(--ink) 12%, var(--surface)); color:var(--ink); }
.voice-badge.warn{ background:color-mix(in srgb, #c8362f 16%, var(--surface)); color:#8a1f1a; }
.voice-used { margin:0 0 4px; font-weight:800; color:var(--accent); font-size:.92rem; }
.voice-desc { margin:6px 0 2px; }
.voice-meta { margin:2px 0; font-size:.8rem; color:color-mix(in srgb, var(--ink) 65%, transparent); }
.voice-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; align-items:center; }
.voice-actions .btn-primary, .voice-actions .btn-secondary { padding:9px 14px; border-radius:12px; font-weight:800; font-size:.92rem; }
.voice-actions button:disabled { opacity:.5; cursor:not-allowed; }
.voice-status { font-size:.82rem; color:var(--accent); font-weight:700; }
.voice-note { margin:8px 0 0; font-size:.8rem; color:color-mix(in srgb, var(--ink) 70%, transparent); }
/* Réglages fins regroupés dans la carte active */
.voice-fine { margin-top:12px; padding-top:12px; border-top:1px dashed color-mix(in srgb, var(--accent) 30%, transparent);
  display:flex; flex-direction:column; gap:9px; }
.voice-fine-line { margin:0; font-size:.82rem; color:color-mix(in srgb, var(--ink) 72%, transparent); }
.voice-fine-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.voice-fine-row .vf-lab { flex:0 0 68px; font-weight:800; font-size:.9rem; }
.voice-fine-row input[type=range] { flex:1 1 140px; min-width:120px; }
.voice-fine-row .vf-val { flex:0 0 auto; min-width:44px; text-align:right; font-weight:800; color:var(--accent); }
.voice-fine-row .vf-preview { flex:1 1 180px; min-width:140px; padding:8px 10px; border:1px solid var(--line);
  border-radius:10px; background:var(--surface); color:var(--ink); font-size:.9rem; }
.voice-fine .vf-reset { align-self:flex-start; margin-top:2px; padding:8px 14px; border-radius:10px; font-weight:800; font-size:.86rem; }

/* Accueil sans tri : deux actions claires (commencer / régler), pas de cartes-profils */
.profile-actions { display:flex; flex-direction:column; gap:10px; margin:20px 0 4px; }
.profile-actions .btn-primary { font-size:1.1rem; padding:15px 24px; border-radius:16px;
  box-shadow:0 8px 22px color-mix(in srgb, var(--accent) 34%, transparent);
  transition:transform var(--tr), box-shadow var(--tr), filter var(--tr); }
.profile-actions .btn-primary:hover { transform:translateY(-2px); filter:brightness(1.05);
  box-shadow:0 12px 28px color-mix(in srgb, var(--accent) 42%, transparent); }
.profile-actions .btn-secondary { padding:14px 22px; border-radius:16px; font-weight:800; font-size:1rem;
  border:2px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  background:color-mix(in srgb, var(--accent) 8%, var(--surface)); color:var(--accent);
  box-shadow:var(--shadow-sm); transition:transform var(--tr), background var(--tr), box-shadow var(--tr); }
.profile-actions .btn-secondary:hover { transform:translateY(-1px);
  background:color-mix(in srgb, var(--accent) 15%, var(--surface)); box-shadow:var(--shadow); }
/* Choix de voix : aperçu / utiliser / revenir */
.voice-actions { display:flex; flex-wrap:wrap; gap:10px; margin:10px 0 4px; }
.voice-actions .btn-primary, .voice-actions .btn-secondary { padding:11px 18px; border-radius:12px; font-weight:800; }
.profile-choices { display:flex; flex-direction:column; gap:12px; margin:18px 0; }
.profile-btn { display:grid; grid-template-columns:auto 1fr; align-items:center; gap:4px 14px; text-align:left;
  padding:16px 18px; border:2px solid var(--line); border-radius:18px; background:var(--surface); color:var(--ink);
  box-shadow:var(--shadow-sm); cursor:pointer;
  transition:transform var(--tr), border-color var(--tr), box-shadow var(--tr), background var(--tr); }
.profile-btn:hover { transform:translateY(-2px); border-color:var(--accent);
  box-shadow:var(--shadow-lg); background:color-mix(in srgb, var(--accent) 5%, var(--surface)); }
/* Émoji dans une pastille douce = repère visuel « premium » */
.profile-btn .pemoji { grid-row:1 / span 2; font-size:1.8rem; line-height:1; width:52px; height:52px;
  display:flex; align-items:center; justify-content:center; border-radius:14px;
  background:color-mix(in srgb, var(--accent) 12%, var(--surface));
  border:1px solid color-mix(in srgb, var(--accent) 22%, transparent); }
.profile-btn strong { font-size:1.08rem; }
.profile-btn .small { color:color-mix(in srgb, var(--ink) 78%, transparent); }
/* « Choisir plus tard » : option discrète MAIS soignée (pill centrée, nette) */
#profile-skip { display:block; margin:6px auto 0; padding:11px 22px; border-radius:999px;
  border:1.5px solid color-mix(in srgb, var(--accent) 34%, var(--line)); background:transparent;
  color:var(--accent); font-weight:800; font-size:.98rem; cursor:pointer;
  transition:transform var(--tr), background var(--tr), box-shadow var(--tr); }
#profile-skip:hover { transform:translateY(-1px); background:color-mix(in srgb, var(--accent) 10%, transparent);
  box-shadow:var(--shadow-sm); }

/* ---- Accessibilité visuelle paramétrable ---- */
.tile img { width: calc(56px * var(--symbol-scale, 1)); height: calc(56px * var(--symbol-scale, 1)); }
.tile .tile-media { width: 100%; max-height: calc(64px * var(--symbol-scale, 1)); object-fit: cover; border-radius: 8px; }
body.no-picto .tile img, body.no-picto .tile .tile-media { display: none; }
body.no-text .tile .tile-label { display: none; }
body.no-color .tile:not(.back):not(.cat) { background: var(--surface); color: var(--ink); }
.tile .play-badge {
  position:absolute; bottom:4px; right:4px; width:30px; height:30px; border-radius:50%;
  background:rgba(0,0,0,.6); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:.9rem; border:0;
}

/* ---- Modale générique (éditeur / lecteur média) ---- */
.modal { position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; z-index:60; padding:16px; }
.modal[hidden] { display:none; }
.modal-card { background:var(--surface); color:var(--ink); border-radius:var(--radius); width:min(520px,100%); max-height:90dvh; overflow:auto; padding:20px; }
.modal-card h3 { margin-top:0; }
.field { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
.field label { font-weight:700; }
.field input[type=text], .field select, .field input[type=url] {
  min-height:48px; font-size:1rem; padding:8px 10px; border:2px solid var(--line); border-radius:10px;
  background:var(--bg); color:var(--ink);
}
.color-swatches { display:flex; gap:8px; flex-wrap:wrap; }
.swatch { width:44px; height:44px; border-radius:10px; border:3px solid transparent; }
.swatch.sel { border-color:var(--ink); }
.modal-actions { display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; margin-top:8px; }
/* Dialogues in-app (ctPrompt/ctConfirm/ctAlert) */
.modal-msg { margin:0 0 14px; line-height:1.45; white-space:pre-wrap; }
.modal-input { width:100%; box-sizing:border-box; padding:12px 14px; font-size:1.05rem; border:2px solid var(--line); border-radius:12px; margin:0 0 16px; background:var(--surface); color:var(--ink); }
.modal-input:focus { border-color:var(--accent-2); outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--accent-2) 22%, transparent); }
.btn-primary.danger { background:#b00020; border-color:#b00020; color:#fff; }
.media-preview { display:flex; align-items:center; gap:10px; margin-top:6px; }
.media-preview img { width:64px; height:64px; object-fit:cover; border-radius:8px; border:1px solid var(--line); }
.viewer-frame { width:100%; aspect-ratio:16/9; border:0; border-radius:10px; background:#000; }
.viewer-frame img, .viewer-frame video { width:100%; height:100%; object-fit:contain; }

/* ---- Pop-up de catégorie (fringe overlay) ---- */
.popup { position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:55; display:flex; align-items:flex-end; }
.popup[hidden] { display:none; }
.popup-inner { background:var(--surface); width:100%; max-height:75dvh; border-radius:var(--radius) var(--radius) 0 0; padding:12px; overflow:auto; }
.popup-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.popup-grid { display:grid; grid-template-columns:repeat(var(--cols,6),1fr); gap:var(--gap); }
/* Raccourcis de phrases apprises (En lien, message vide) : pleine largeur, distinctes des mots. */
.phrase-chip { grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; gap:8px;
  text-align:left; background:color-mix(in srgb, var(--accent) 10%, var(--surface));
  border:1px solid color-mix(in srgb, var(--accent) 38%, transparent); min-height:0; }
.phrase-chip .tile-label { font-weight:800; white-space:normal; flex:1; text-align:left; }
.phrase-chip .phrase-ic { flex:0 0 auto; display:inline-flex; color:var(--accent); }
.phrase-chip .phrase-ic svg { width:22px; height:22px; }
.phrase-hide { flex:0 0 auto; opacity:.45; padding:0 6px; font-size:.95rem; line-height:1; }
.phrase-hide:hover, .phrase-hide:focus { opacity:1; }
/* Logo Com'Together sur l'écran d'accueil (identité à la porte) — swap couleur/blanc selon le thème. */
.brand-logo { display:block; height:46px; width:auto; max-width:80%; margin:0 auto 16px; }
.brand-logo.wl { display:none; }
:root[data-theme="dark"] .brand-logo.cl { display:none; }
:root[data-theme="dark"] .brand-logo.wl { display:block; }
.profile-name-lab { display:block; margin:6px 0 4px; font-weight:700; }
.profile-name-in { width:100%; box-sizing:border-box; padding:11px 14px; font-size:1.05rem; margin:0 0 14px;
  border:2px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); }
.profile-name-in:focus { border-color:var(--accent-2); outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--accent-2) 22%, transparent); }
.popup-alpha { display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 10px; }
/* Grandes cibles pour la COMMANDE OCULAIRE (fixation facile) + le contacteur. */
.alpha-btn { min-width:54px; min-height:54px; padding:8px 12px; border:2px solid var(--line); border-radius:12px;
  background:var(--surface); color:var(--ink); font-weight:800; font-size:1.25rem; line-height:1; cursor:pointer; }
.alpha-btn:hover, .alpha-btn:focus { border-color:var(--accent); }
.alpha-btn.is-on { background:var(--accent); color:#fff; border-color:var(--accent); }
/* En mode commande oculaire / gros symboles : cibles encore plus grandes. */
body.eyegaze .alpha-btn { min-width:64px; min-height:64px; font-size:1.4rem; }
.popup-filter { width:100%; box-sizing:border-box; padding:10px 14px; font-size:1rem; margin:2px 0 8px;
  border:2px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink); }
.popup-filter:focus { border-color:var(--accent-2); outline:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--accent-2) 22%, transparent); }
.popup-note { margin:0 2px 8px; font-size:.82rem; color:var(--muted,#8a8f98); }
.popup-section { margin:10px 2px 6px; font-weight:800; font-size:.9rem; color:var(--accent); letter-spacing:.2px; }
.popup-section.muted { color:var(--muted,#8a8f98); font-weight:700; border-top:1px solid var(--line,#e6e6ef); padding-top:8px; }

/* ---- Catégories en POP-UP (mode « moins envahissant ») ---- */
body.cat-popup #tabs { display:none !important; }
body.cat-popup .workarea { flex-direction:column; }
.cat-launcher { position:fixed; left:10px; bottom:70px; z-index:1450; display:flex; align-items:center; gap:7px;
  background:var(--accent); color:#fff; border:0; border-radius:999px; padding:10px 16px; font-weight:800;
  font-size:.95rem; box-shadow:var(--shadow-lg); cursor:pointer;
  transition:transform var(--tr), box-shadow var(--tr), filter var(--tr); }
.cat-launcher:hover { transform:translateY(-1px); filter:brightness(1.05); }
.cat-launcher[hidden]{ display:none; }
.cat-collapse { position:fixed; left:10px; bottom:70px; z-index:1450; display:flex; align-items:center; gap:5px;
  background:color-mix(in srgb, var(--surface) 88%, transparent); color:var(--ink); border:1px solid var(--line);
  border-radius:999px; padding:6px 12px; font-weight:800; font-size:.78rem; cursor:pointer; opacity:.62;
  box-shadow:var(--shadow-sm); backdrop-filter:blur(6px); transition:opacity var(--tr); }
.cat-collapse:hover{ opacity:1; }
.cat-collapse[hidden]{ display:none; }

/* ---- Repli EN PLACE de la barre de catégories (garde les repères spatiaux) ----
   La barre garde sa disposition ; elle glisse hors champ vers SON bord, et un
   onglet-repère reste exactement à ce bord pour la faire revenir à l'identique. */
body.cat-vertical .tabs { transition:transform .22s ease, opacity .2s ease; }
body.cat-horizontal .tabs { transition:transform .22s ease, opacity .2s ease; }
body.cat-collapsed-side #tabs {
  transform:translateX(100%); width:0; min-width:0; padding-left:0; padding-right:0;
  opacity:0; overflow:hidden; border-left:0; box-shadow:none;
}
body.cat-collapsed-top #tabs {
  transform:translateY(-100%); height:0; min-height:0; padding-top:0; padding-bottom:0;
  opacity:0; overflow:hidden; border-bottom:0;
}
/* L'onglet-repère : même bord que la barre, forme d'onglet qui « sort » du bord. */
.cat-launcher.as-handle {
  background:var(--accent); color:#fff; box-shadow:var(--shadow-lg);
  animation:handle-pulse 1.6s ease-out 1;
}
.cat-launcher.as-handle::after { content:"›"; font-size:1.15rem; font-weight:900; margin-left:2px; }
/* colonne → onglet vertical collé au bord DROIT, centré en hauteur */
body.cat-collapsed-side .cat-launcher.as-handle {
  right:0; left:auto; bottom:auto; top:50%; transform:translateY(-50%);
  border-radius:14px 0 0 14px; padding:14px 8px 14px 12px; flex-direction:column; gap:5px;
  writing-mode:vertical-rl; text-orientation:mixed;
}
body.cat-collapsed-side .cat-launcher.as-handle::after { content:"‹"; writing-mode:horizontal-tb; margin:2px 0 0; }
/* bandeau → onglet horizontal collé en HAUT à gauche */
body.cat-collapsed-top .cat-launcher.as-handle {
  left:10px; bottom:auto; top:6px; transform:none; border-radius:0 0 14px 14px;
}
body.cat-collapsed-top .cat-launcher.as-handle::after { content:"⌄"; }
@keyframes handle-pulse { from { box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  to { box-shadow:0 0 0 14px transparent, var(--shadow-lg); } }
@media (prefers-reduced-motion: reduce) {
  body.cat-vertical .tabs, body.cat-horizontal .tabs { transition:none; }
  .cat-launcher.as-handle { animation:none; }
}
/* ---- Les commandes flottantes (fixed) ne doivent JAMAIS couvrir des cellules ----
   On réserve un couloir vide autour du tableau, dimensionné à ces boutons :
   - en bas : bouton « Menu » (droite) + « Catégories » en mode pop-up (gauche) ;
   - à gauche : onglet-repère quand la barre est rangée (colonne) ;
   - en haut : onglet-repère quand la barre est rangée (bandeau). */
/* Couloir bas : la dernière cellule doit passer AU-DESSUS des boutons flottants
   (« Menu », repère « Catégories »). Le bouton est en position:fixed → la réserve
   doit être posée sur le CONTENEUR QUI DÉFILE lui-même (#board), sinon la dernière
   cellule scrollée passe quand même sous le bouton (cas mobile/écran étroit).
   Hauteur MESURÉE à l'exécution (--fc-bottom : resize/rotation/zoom/clavier),
   avec plancher de secours. padding + scroll-padding = marge en mode défilant. */
/* On RÉTRÉCIT la zone de travail (padding sur .workarea) : son bas remonte
   au-dessus des boutons flottants, donc même une liste qui défile (Ma voix,
   mobile) ne passe jamais sous le bouton. */
body[data-view="board"] .workarea,
body[data-view="advocacy"] .workarea,
body[data-view="scenes"] .workarea { padding-bottom:var(--fc-bottom, 72px); }
/* La liste « Ma voix » doit DÉFILER dans sa boîte rétrécie (sinon les cartes
   débordent sous le bouton au lieu d'être clipées au-dessus de lui). */
body[data-view="advocacy"] #board { overflow-y:auto; min-height:0; }
body.cat-collapsed-side .workarea { padding-right:60px; }
body.cat-collapsed-top .workarea { padding-top:46px; }

/* ---- Position des POP-UP / fenêtres (adaptation à la fatigue de la personne) ---- */
/* défaut = bas (bottom sheet). Les autres positions repositionnent le panneau. */
body[data-popup-pos="center"] .popup { align-items:center; justify-content:center; }
body[data-popup-pos="center"] .popup-inner { width:min(660px,96%); max-height:84dvh; border-radius:var(--radius); }
body[data-popup-pos="top"] .popup { align-items:flex-start; }
body[data-popup-pos="top"] .popup-inner { border-radius:0 0 var(--radius) var(--radius); }
body[data-popup-pos="left"] .popup { align-items:stretch; justify-content:flex-start; }
body[data-popup-pos="left"] .popup-inner { width:min(460px,92%); max-height:100dvh; border-radius:0 var(--radius) var(--radius) 0; }
body[data-popup-pos="right"] .popup { align-items:stretch; justify-content:flex-end; }
body[data-popup-pos="right"] .popup-inner { width:min(460px,92%); max-height:100dvh; border-radius:var(--radius) 0 0 var(--radius); }
body[data-popup-pos="top"] .modal { align-items:flex-start; }
body[data-popup-pos="bottom"] .modal { align-items:flex-end; }
body[data-popup-pos="left"] .modal { justify-content:flex-start; }
body[data-popup-pos="right"] .modal { justify-content:flex-end; }

/* ---- Scènes visuelles (VSD) ---- */
.scenes-view { flex:1; overflow:auto; }
.scenes-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; padding:12px; }
.scene-card { position:relative; border:2px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface); cursor:pointer; }
.scene-card img, .scene-card video { width:100%; height:110px; object-fit:cover; display:block; background:#000; }
.scene-badge { position:absolute; top:6px; left:6px; background:rgba(0,0,0,.6); color:#fff; border-radius:var(--radius-pill);
  padding:2px 8px; font-size:.9rem; }
.scene-card .scene-name { padding:8px; font-weight:700; text-align:center; }
.scene-card .scene-del { position:absolute; top:6px; right:6px; width:40px; height:40px; border-radius:50%;
  border:2px solid #fff; background:rgba(200,30,30,.92); color:#fff; font-size:1.1rem; line-height:1;
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.35); }
.scene-card .scene-del:hover { background:#c81e1e; }
.scene-stage { position:relative; width:100%; max-width:960px; margin:0 auto; }
.scene-stage img, .scene-stage video { width:100%; display:block; border-radius:var(--radius); }
.hotspot { position:absolute; border:3px solid rgba(11,114,133,.9); background:rgba(59,201,219,.18);
  border-radius:10px; cursor:pointer; }
body.editing .hotspot { border-style:dashed; background:rgba(255,92,0,.18); }
.scene-toolbar { display:flex; gap:8px; padding:10px; flex-wrap:wrap; align-items:center; }
.scene-toolbar strong { margin-right:auto; }
.scene-stage.placing { cursor:crosshair; }
.scene-stage.placing img, .scene-stage.placing video { outline:3px dashed var(--accent); outline-offset:-3px; }
.btn-secondary.is-on { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.linklike { background:none; border:0; color:var(--accent); font-weight:800; padding:8px 10px; cursor:pointer; text-decoration:underline; }
/* Encart partenaire (modélisation) */
.tips-list { display:flex; flex-direction:column; gap:12px; margin-top:12px; }
.tip { display:flex; gap:12px; align-items:flex-start; padding:12px; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); }
.tip-emo { font-size:1.6rem; line-height:1; }
.tip-body strong { display:block; margin-bottom:2px; }
.tip-body p { margin:0; color:var(--muted); font-size:.9rem; }

/* ============================================================================
 * FINITION PREMIUM — profondeur douce, transitions, formes actuelles
 * (visuel uniquement ; accessibilité, contrastes et cibles préservés)
 * ==========================================================================*/
body {
  background:
    radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  background-attachment: fixed;
}

/* Barres du haut : une seule surface cohérente, légèrement surélevée */
.msgbar { border-bottom:1px solid var(--line); box-shadow: var(--shadow-sm); z-index:5; }
.message {
  background: var(--surface-2); border:1px solid var(--line-soft); border-radius:var(--radius-lg);
  box-shadow: inset 0 1px 2px rgba(16,32,48,.04);
}
.preview { border-bottom:1px solid var(--line-soft); background:var(--surface); color:var(--muted); font-weight:800; letter-spacing:.1px; }
.grammarbar, .tonebar { background:var(--surface); border-bottom:1px solid var(--line-soft); }
.tabs { background:transparent; }

/* Boutons ronds de la barre message */
.icon-btn {
  border:1px solid var(--line); border-radius:14px; box-shadow:var(--shadow-sm);
  transition: transform var(--tr), box-shadow var(--tr), background var(--tr);
}
.icon-btn:hover { transform:translateY(-1px); box-shadow:var(--shadow); }
.icon-btn:active { transform:translateY(0) scale(.97); }
.icon-btn.big { background:linear-gradient(180deg, var(--accent-2), var(--accent)); box-shadow:0 4px 14px color-mix(in srgb, var(--accent) 40%, transparent); }

/* Pastilles (temps, ton, morpho, catégories) */
.tense-btn, .morph-btn, .tone-btn, .tab, .pred, .key {
  transition: transform var(--tr), box-shadow var(--tr), background var(--tr), border-color var(--tr);
  box-shadow: var(--shadow-sm);
}
.tab { border-radius:var(--radius-pill); }
.tab:hover, .tense-btn:hover, .morph-btn:hover, .tone-btn:hover, .key:hover { transform:translateY(-1px); box-shadow:var(--shadow); }
.tab.is-active { box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 34%, transparent); }
body.cat-vertical .tabs { background:var(--surface); border-right:1px solid var(--line); box-shadow: var(--shadow-sm); }

/* Cases : profondeur douce, coins arrondis, réaction au toucher */
.tile {
  border-radius:16px; border:1px solid rgba(16,32,48,.08);
  box-shadow: var(--shadow-sm);
  transition: transform var(--tr), box-shadow var(--tr), filter var(--tr);
}
.tile:hover { transform:translateY(-2px); box-shadow: var(--shadow); filter:saturate(1.03); }
.tile:active { transform:translateY(0) scale(.96); box-shadow: var(--shadow-sm); }
/* pas d'ombre portée : elle créait des halos gris sur les PNG à fond transparent */
.tile img, .tile .emoji-picto { filter: none; }
.vcol-head {
  border:0; border-radius:12px; box-shadow: var(--shadow-sm); letter-spacing:.2px; text-transform:uppercase;
  font-size:.72rem; backdrop-filter:saturate(1.1);
}
.vcol-fringe { border-left:0; box-shadow: inset 3px 0 0 var(--accent); background:color-mix(in srgb, var(--accent) 6%, transparent); }

/* Barre d'outils du bas : nav moderne, indicateur actif */
.toolbar {
  border-top:1px solid var(--line); box-shadow: 0 -2px 12px rgba(16,32,48,.06);
  padding: 4px max(6px, env(safe-area-inset-left)) max(4px, env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(8px) saturate(1.1);
}
/* Masquer / afficher la barre de menu du bas — simple, un seul bouton */
.menu-toggle { position: fixed; right: 10px; bottom: 70px; z-index: 1450;
  display: flex; align-items: center; gap: 6px; border: 0; border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 88%, transparent); color: var(--ink);
  border: 1px solid var(--line); font-weight: 800; font-size: .82rem; padding: 7px 12px;
  cursor: pointer; box-shadow: var(--shadow); backdrop-filter: blur(6px); opacity: .95;
  transition: opacity var(--tr), bottom var(--tr), background var(--tr); }
.menu-toggle .mt-txt { display: inline; }              /* toujours lisible (plus de bouton fantôme) */
.menu-toggle:hover { opacity: 1; transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.menu-toggle .mt-txt { display: none; }
body.menu-hidden .toolbar { display: none !important; }         /* barre masquée -> le tableau prend la place */
body.menu-hidden .menu-toggle { bottom: max(12px, env(safe-area-inset-bottom)); opacity: 1;
  background: var(--accent); color: #fff; border-color: transparent; padding: 10px 18px; font-size: .95rem; }
body.menu-hidden .menu-toggle .mt-txt { display: inline; }      /* montre « Menu » quand masqué */
@media (prefers-reduced-motion: reduce) { .menu-toggle { transition: none; } }
.tool { position:relative; border-radius:14px; transition: color var(--tr), background var(--tr); }
.tool .tool-ico { transition: transform var(--tr); }
.tool.is-active { color:var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.tool.is-active .tool-ico { transform: translateY(-1px) scale(1.08); }
.tool:active .tool-ico { transform: scale(.9); }

/* Message : jetons plus doux */
.msg-token { border:1px solid var(--line); border-radius:12px; box-shadow: var(--shadow-sm); transition: transform var(--tr); }
.msg-token:active { transform: scale(.94); }

/* Panneaux & modales : cartes surélevées, fond flouté */
.panel { background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); }
.panel .row { border-bottom:1px solid var(--line-soft); }
.btn-primary { box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 34%, transparent); transition: transform var(--tr), box-shadow var(--tr); }
.btn-primary:hover { transform: translateY(-1px); }
/* Style de BASE des boutons secondaires (s'applique AUSSI hors .panel : pop-ups, recherche…),
   sinon un « Fermer » de pop-up restait quasi sans style (pas premium). */
.btn-secondary { background:var(--surface); color:var(--ink); border:2px solid var(--line);
  border-radius:var(--radius-pill); padding:10px 18px; font-weight:700; min-height:44px;
  transition: transform var(--tr), box-shadow var(--tr), background var(--tr), color var(--tr);
  box-shadow: var(--shadow-sm); }
.btn-secondary:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
/* Bouton FERMER PREMIUM : pastille ronde ✕, charte aubergine, ombre douce, rotation au survol. */
.btn-close {
  flex:0 0 auto; width:46px; height:46px; padding:0; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid color-mix(in srgb, var(--ct-aubergine) 20%, transparent);
  background:var(--surface-2); color:var(--ct-aubergine);
  font-size:1.2rem; font-weight:900; line-height:1;
  box-shadow:0 2px 7px rgba(58,5,119,.12);
  transition:transform .16s ease, background .16s ease, box-shadow .16s ease, color .16s ease;
}
.btn-close:hover { background:var(--ct-aubergine); color:#fff; transform:translateY(-1px) rotate(90deg);
  box-shadow:0 7px 18px rgba(58,5,119,.30); }
.btn-close:active { transform:scale(.93); }
.btn-close:focus-visible { outline:3px solid var(--ct-violet); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { .btn-close:hover { transform:none; } }
.modal { background: rgba(10,18,26,.5); backdrop-filter: blur(4px); }
.modal-card, .popup-inner { border-radius:var(--radius-lg); box-shadow: var(--shadow-lg); border:1px solid var(--line-soft); }
.privacy-card { border-radius:var(--radius-lg); box-shadow: var(--shadow-lg); }

/* Clavier */
.keyboard { box-shadow: 0 -2px 12px rgba(16,32,48,.06); }
.key { border-radius:12px; }
.key-fn { background:linear-gradient(180deg, var(--accent-2), var(--accent)); }

/* Barres de défilement fines et modernes */
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent; }
*::-webkit-scrollbar { width:10px; height:10px; }
*::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 40%, transparent); border-radius:99px; border:3px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--muted) 60%, transparent); background-clip:content-box; }

/* Réduction des animations si demandé */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .tile:active, .tile:hover, .icon-btn:hover, .tab:hover { transform:none; }
}

/* ============================================================================
 * RESPONSIVE — Téléphone (≤ 640px)
 * Le rail vertical de catégories écraserait la grille : on le bascule en
 * BANDEAU HORIZONTAL scrollable en haut, la grille prend toute la largeur.
 * ==========================================================================*/
@media (max-width: 640px) {
  /* Barre de message compacte : phrase sur sa ligne, actions dessous */
  .msgbar { flex-wrap: wrap; }
  .message { flex: 1 1 100%; min-height: 54px; }
  .msgbar-actions { width: 100%; flex-wrap: nowrap; justify-content: space-between; gap: 4px; }
  .icon-btn { min-width: 44px; font-size: 1.2rem; padding: 6px; }
  .icon-btn.big { min-width: 50px; }

  /* Catégories : bandeau horizontal en haut (quel que soit le réglage) */
  body.cat-vertical .workarea { flex-direction: column; }
  body.cat-vertical #tabs { order: 0; }   /* mobile : le bandeau reste EN HAUT (order droite = desktop seulement) */
  body.cat-vertical .tabs {
    display: flex; flex-direction: row; flex-wrap: nowrap;
    width: auto; max-width: none; min-width: 0;
    overflow-x: auto; overflow-y: hidden;
    border-right: 0; border-bottom: 2px solid var(--line);
    gap: 6px; padding: 6px;
  }
  body.cat-vertical .tab {
    flex: 0 0 auto; width: 76px; min-height: 62px; padding: 5px 3px;
  }
  body.cat-vertical .tab-wide { grid-column: auto; width: auto; min-height: 62px; }
  body.cat-vertical .tab .tab-thumb { width: 28px; height: 28px; }
  body.cat-vertical .tab .tab-label { font-size: .64rem; line-height: 1.05; }
  body.cat-vertical .tabs-sep {
    grid-column: auto; align-self: center; white-space: nowrap; padding: 0 4px;
    writing-mode: vertical-rl; transform: rotate(180deg); font-size: .6rem;
  }
  /* Onglets du bas : libellés plus petits pour tenir à 6 */
  .toolbar .tool span:not(.tool-ico) { font-size: .62rem; }
  .tool .tool-ico { font-size: 1.3rem; }
}

/* ============================================================================
 * « Mes mots » — statistiques d'usage visuelles (nuage de pictos)
 * ==========================================================================*/
.stats-cloud { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; padding:10px 0 4px; }
.stats-word {
  --cat: var(--line);
  display:flex; flex-direction:column; align-items:center; gap:2px;
  border:2px solid var(--cat); border-bottom-width:4px; border-radius:12px;
  padding:6px 8px; cursor:pointer;
  background: color-mix(in srgb, var(--cat) 20%, var(--surface));
}
.stats-word .sw-label { font-size:.72rem; font-weight:700; color:var(--ink); max-width:100px; text-align:center; }
.stats-fam-title { margin:16px 0 6px; color:var(--ink); font-size:1rem; }
.fam-legend { display:flex; flex-wrap:wrap; gap:6px; }
.fam-chip {
  --cat: var(--line);
  font-size:.75rem; font-weight:700; padding:4px 11px; border-radius:999px;
  border:2px solid var(--cat); color:var(--ink);
  background: color-mix(in srgb, var(--cat) 30%, var(--surface));
}
.stats-word[data-color="pronom"],   .fam-chip[data-color="pronom"]   { --cat: var(--c-pronom); }
.stats-word[data-color="verbe"],    .fam-chip[data-color="verbe"]    { --cat: var(--c-verbe); }
.stats-word[data-color="descriptif"],.fam-chip[data-color="descriptif"]{ --cat: var(--c-descriptif); }
.stats-word[data-color="nom"],      .fam-chip[data-color="nom"]      { --cat: var(--c-nom); }
.stats-word[data-color="social"],   .fam-chip[data-color="social"]   { --cat: var(--c-social); }
.stats-word[data-color="question"], .fam-chip[data-color="question"] { --cat: var(--c-question); }
.stats-word[data-color="petit"],    .fam-chip[data-color="petit"]    { --cat: var(--c-petit); }
.stats-word[data-color="negation"], .fam-chip[data-color="negation"] { --cat: var(--c-negation); }
.stats-word[data-color="advocacy"], .fam-chip[data-color="advocacy"] { --cat: var(--c-advocacy); }

/* ============================================================================
 * Commande oculaire (dwell) : jauge de fixation + cibles élargies
 * ==========================================================================*/
#dwell-ring {
  position:fixed; pointer-events:none; z-index:9999; border-radius:50%;
  background: conic-gradient(var(--accent) calc(var(--p,0) * 1turn), rgba(58,5,119,.16) 0);
  -webkit-mask: radial-gradient(circle, transparent 56%, #000 58%);
          mask: radial-gradient(circle, transparent 56%, #000 58%);
  box-shadow: 0 0 0 2px rgba(255,255,255,.7);
  transition: left .05s linear, top .05s linear, width .06s, height .06s;
}
/* Cibles larges + espacement (confort oculométrie / repérage) */
body.eyegaze { --gap:12px; }
body.eyegaze .board { gap:12px; }
body.eyegaze .tile { min-height:120px; }
body.eyegaze .vcol .tile { min-height:100px; }
body.eyegaze .icon-btn { min-width:74px; }
body.eyegaze .tab, body.eyegaze .key, body.eyegaze .tense-btn,
body.eyegaze .morph-btn, body.eyegaze .tone-btn, body.eyegaze .tense-toggle { min-height:58px; }
body.eyegaze .tile img { width:calc(60px * var(--symbol-scale,1)); height:calc(60px * var(--symbol-scale,1)); }
/* clavier au regard : touches nettement séparées (marges importantes) */
body.eyegaze .keys { gap:10px; }
body.eyegaze .kb-row { gap:10px; }
body.eyegaze .key { min-height:64px; font-size:1.3rem; }
body.eyegaze .prediction { min-height:64px; }
body.eyegaze .pred { min-height:56px; font-size:1.15rem; }
/* Pause du regard : bouton flottant, grande cible, visible en commande oculaire */
#gaze-rest { position:fixed; left:14px; bottom:78px; z-index:1400; display:inline-flex; align-items:center;
  gap:6px; padding:12px 18px; min-height:56px; border-radius:999px; font-weight:800; font-size:1rem;
  border:3px solid var(--accent); background:var(--surface); color:var(--accent);
  box-shadow:var(--shadow); cursor:pointer; }
#gaze-rest[hidden] { display:none; }
#gaze-rest.is-paused { background:var(--accent); color:var(--accent-ink); }

/* ---- PROFIL TOUT-PETIT : perception + contingence (JAMAIS moins de mots) ----
   NE PAS agrandir les cases dans la grille : cela les faisait déborder/se chevaucher quand la place
   verticale manque (bug repéré). La bonne piste = grille STABLE + zone de grossissement fixe à la
   sélection (à construire) + tolérance tactile. Ici on garde seulement : bordure + focus renforcés
   et la pulsation douce au toucher (contingence). Rien ne bouge, rien n'est masqué. */
body.tout-petit .tile { border-width:3px; }
body.tout-petit .safety-btn { border-width:3px; }
/* Focus très visible (repérage) — ne dépend pas de la couleur seule */
body.tout-petit .tile:focus-visible, body.tout-petit .safety-btn:focus-visible {
  outline:4px solid var(--accent); outline-offset:3px; }
/* Contingence : « je touche → il se passe quelque chose, et c'est MOI ». Pulsation brève et
   DOUCE (respecte prefers-reduced-motion : pas d'animation si l'appareil la réduit). */
@keyframes ct-tap-pulse {
  0%   { transform:scale(1);    box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  40%  { transform:scale(1.06); box-shadow:0 0 0 10px color-mix(in srgb, var(--accent) 22%, transparent); }
  100% { transform:scale(1);    box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
}
body.tout-petit .tap-pulse { animation:ct-tap-pulse .46s ease-out; }
@media (prefers-reduced-motion: reduce) {
  body.tout-petit .tap-pulse { animation:none; outline:4px solid var(--accent); outline-offset:2px; }
}

/* ---- Compagnon de modélisation (routines tout-petits) ---- */
.coach-inner { max-width:640px; }
.coach-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 4px; }
.coach-tab { border:2px solid var(--line); border-radius:12px; background:var(--surface); color:var(--ink);
  font-weight:700; font-size:.9rem; padding:8px 12px; min-height:44px; cursor:pointer; }
.coach-tab.is-on { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.coach-tip { margin:6px 2px 10px; font-size:.95rem; color:var(--ink);
  background:color-mix(in srgb, var(--accent) 10%, transparent); border-left:4px solid var(--accent);
  border-radius:8px; padding:8px 12px; }
.coach-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.coach-chip { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  min-height:118px; border:2px solid var(--line); border-radius:16px; background:var(--surface);
  color:var(--ink); font-weight:700; cursor:pointer; padding:10px 6px; }
.coach-chip img { width:64px; height:64px; object-fit:contain; }
.coach-chip-lab { font-size:1rem; }
.coach-chip:focus-visible { outline:4px solid var(--accent); outline-offset:3px; }
@keyframes ct-coach-pulse {
  0% { transform:scale(1); box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  40% { transform:scale(1.06); box-shadow:0 0 0 10px color-mix(in srgb, var(--accent) 22%, transparent); }
  100% { transform:scale(1); box-shadow:0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
}
.coach-chip.coach-pulse { animation:ct-coach-pulse .46s ease-out; }
@media (prefers-reduced-motion: reduce) { .coach-chip.coach-pulse { animation:none; } }
.coach-foot { margin-top:14px; }
.coach-count { font-weight:700; color:var(--ink); margin:6px 2px 2px; }
@media (max-width:560px) { .coach-grid { grid-template-columns:repeat(2,1fr); } }

/* ---- Gestionnaire de packs pan-francophones ---- */
.packs-fam { margin:16px 0 6px; color:var(--ink); font-size:1rem; }
.packs-grid { display:flex; flex-wrap:wrap; gap:8px; }
.pack-chip {
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  border:2px solid var(--line); border-radius:12px; padding:8px 12px; min-height:44px;
  background:var(--surface); font-weight:700; font-size:.9rem; color:var(--ink);
}
.pack-chip input { width:20px; height:20px; accent-color:var(--accent); }
.pack-chip:hover { border-color:var(--accent); }

/* ---- Sélecteur de variante régionale préférée ---- */
.var-row { padding:10px 0; border-bottom:1px solid var(--line-soft); }
.var-concept { font-weight:800; color:var(--ink); margin-bottom:6px; }
.var-opts { display:flex; flex-wrap:wrap; gap:6px; }
.var-opt {
  border:2px solid var(--line); background:var(--surface); color:var(--ink);
  border-radius:999px; padding:8px 14px; font-weight:700; min-height:44px; cursor:pointer;
}
.var-opt.is-chosen { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }

/* ============================================================================
 * MODERNISATION 2026 — Réglages · Modifier · Scènes · Ma voix
 * Esprit « réglages iOS/Material » : colonne centrée, groupes en cartes douces,
 * interrupteurs à bascule, en-têtes de vue soignés. Visuel uniquement.
 * ==========================================================================*/

/* ---- Panneau Réglages : colonne centrée + lignes en cartes ---- */
.panel { background: var(--bg); backdrop-filter: none; padding: 18px 16px 96px; }
.panel > h2 {
  max-width: 700px; margin: 4px auto 16px; font-size: 1.7rem; font-weight: 900;
  display: flex; align-items: center; gap: 10px;
}
.panel > h3 {
  max-width: 700px; margin: 22px auto 6px; padding: 0 8px;
  font-size: .72rem; font-weight: 900; color: var(--accent-2);
  text-transform: uppercase; letter-spacing: 1px;
}
.panel > .row, .panel > p.hint, .panel > details.adv {
  max-width: 700px; margin-left: auto; margin-right: auto;
}
.panel > p.hint { padding: 0 10px; }
/* Chaque réglage direct = carte douce (liste de cartes, look actuel) */
.panel > .row {
  background: var(--surface); border: 1px solid var(--line-soft) !important;
  border-radius: 16px; box-shadow: var(--shadow-sm);
  padding: 14px 18px; margin: 8px auto; gap: 16px;
  transition: box-shadow var(--tr), transform var(--tr);
}
.panel > .row:hover { box-shadow: var(--shadow); }
.panel label { font-weight: 800; }
.panel select {
  border: 1.5px solid var(--line); border-radius: 12px;
  background: var(--surface-2); padding: 10px 14px; font-weight: 700; color: var(--ink);
}
.panel input[type=range] { accent-color: var(--accent-2); }
.panel .btn-secondary { border-radius: 12px; }

/* Bloc « Réglages avancés » : une grande carte qui contient sa propre liste */
.panel > details.adv {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: 16px;
  box-shadow: var(--shadow-sm); padding: 2px 18px 10px; margin-top: 18px;
}
.panel details.adv > summary { color: var(--accent-2); }
.panel details.adv .row {
  background: transparent !important; border: 0 !important;
  border-bottom: 1px solid var(--line-soft) !important; border-radius: 0;
  box-shadow: none; margin: 0; padding: 14px 0; max-width: none;
}
.panel details.adv h3 { max-width: none; margin: 18px 0 4px; padding: 0; }

/* ---- Interrupteurs à bascule (au lieu des cases à cocher) ---- */
.panel input[type=checkbox], .field input[type=checkbox] {
  appearance: none; -webkit-appearance: none;
  width: 52px; height: 30px; min-height: 30px; flex: 0 0 auto;
  border-radius: 999px; background: var(--line); border: 1px solid var(--line);
  position: relative; cursor: pointer; transition: background var(--tr), border-color var(--tr);
}
.panel input[type=checkbox]::after, .field input[type=checkbox]::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 24px; height: 24px;
  border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: left var(--tr);
}
.panel input[type=checkbox]:checked, .field input[type=checkbox]:checked {
  background: var(--accent-2); border-color: var(--accent-2);
}
.panel input[type=checkbox]:checked::after, .field input[type=checkbox]:checked::after { left: 24px; }
.panel input[type=checkbox]:focus-visible, .field input[type=checkbox]:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}

/* ---- Modale « Modifier » : en-tête + pied d'action collants, champs nets ---- */
.modal-card { padding: 0 22px; }
.modal-card > h3 {
  position: sticky; top: 0; z-index: 2; background: var(--surface);
  margin: 0 -22px 16px; padding: 20px 22px 14px;
  font-size: 1.35rem; font-weight: 900; border-bottom: 1px solid var(--line-soft);
}
.field label { font-size: .9rem; color: var(--muted); font-weight: 800; letter-spacing: .2px; }
.field input[type=text], .field select, .field input[type=url] {
  border-radius: 12px; background: var(--surface-2);
}
.field input[type=text]:focus, .field select:focus, .field input[type=url]:focus {
  border-color: var(--accent-2); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2) 22%, transparent);
}
.color-swatches .swatch { transition: transform var(--tr), box-shadow var(--tr); box-shadow: var(--shadow-sm); }
.color-swatches .swatch:hover { transform: scale(1.08); }
.swatch.sel { box-shadow: 0 0 0 3px var(--accent-2); border-color: #fff; }
.modal-actions {
  position: sticky; bottom: 0; background: var(--surface); z-index: 2;
  margin: 12px -22px 0; padding: 14px 22px; border-top: 1px solid var(--line-soft);
}

/* ---- En-tête de vue (hero) : « Ma voix », Scènes… ---- */
.view-hero {
  max-width: 900px; margin: 12px auto 6px; padding: 16px 20px;
  border-radius: var(--radius-lg); color: #fff;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
  box-shadow: var(--shadow);
}
.view-hero h2 { margin: 0; font-size: 1.35rem; font-weight: 900; display: flex; align-items: center; gap: 10px; }
.view-hero p { margin: 6px 0 0; font-size: .92rem; opacity: .92; line-height: 1.35; }

/* « Ma voix » (advocacy) : grille aérée sous le hero */
body[data-view="advocacy"] #board { padding: 12px 16px 20px; gap: 12px; }

/* ---- Scènes : barre-titre carte, cartes qui se soulèvent, état vide soigné ---- */
.scenes-view { padding: 6px 10px 20px; }
.scene-toolbar {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: 16px;
  box-shadow: var(--shadow-sm); padding: 12px 16px; margin: 8px auto; max-width: 980px;
}
.scene-toolbar strong { font-size: 1.05rem; }
.scenes-list { max-width: 980px; margin: 0 auto; }
.scene-card { box-shadow: var(--shadow-sm); transition: transform var(--tr), box-shadow var(--tr); }
.scene-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.scene-card img, .scene-card video { height: 132px; }
.scene-card .scene-name { padding: 10px; }
.empty-state {
  max-width: 520px; margin: 30px auto; text-align: center; padding: 30px 24px;
  border: 2px dashed var(--line); border-radius: var(--radius-lg); background: var(--surface);
}
.empty-state .es-emoji { font-size: 3rem; line-height: 1; }
.empty-state p { color: var(--muted); margin: 12px 0 0; font-size: .95rem; }
#board .view-hero { grid-column: 1 / -1; }

/* ---- Finitions modales (recherche · packs · stats · passeport · cahier) ---- */
/* Zones de texte multiligne : même style net que les champs */
.field textarea {
  min-height: 64px; font-size: 1rem; padding: 10px 12px; border: 2px solid var(--line);
  border-radius: 12px; background: var(--surface-2); color: var(--ink);
  font-family: inherit; line-height: 1.35; resize: vertical; width: 100%;
}
.field textarea:focus {
  border-color: var(--accent-2); outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2) 22%, transparent);
}
/* Respiration en bas des modales SANS pied collant (recherche, packs, stats) */
.modal-card > :last-child:not(.modal-actions) { margin-bottom: 22px; }
/* Le champ de recherche : vraie barre de recherche proéminente */
#ct-modal .search-results { margin-top: 6px; }
/* « Régions & cultures » : titres de famille en eyebrow + puces cochées pleines */
.packs-fam { font-size: .72rem; font-weight: 900; color: var(--accent-2);
  text-transform: uppercase; letter-spacing: 1px; margin: 18px 0 6px; }
.pack-chip { transition: border-color var(--tr), background var(--tr), box-shadow var(--tr); box-shadow: var(--shadow-sm); }
.pack-chip:has(input:checked) {
  border-color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 12%, var(--surface));
}
.pack-chip input { accent-color: var(--accent-2); }
/* Stats : boutons du bas alignés, un peu d'air */
.stats-fam-title { color: var(--accent-2); font-weight: 900; }

/* ---- Bulles d'aide (visite guidée) ---- */
.coach-ov { position: fixed; inset: 0; z-index: 2000; pointer-events: none; }
.coach-hole { position: fixed; border-radius: 16px; box-shadow: 0 0 0 9999px rgba(20,8,40,.60);
  transition: left .2s ease, top .2s ease, width .2s ease, height .2s ease; }
.coach-bubble { position: fixed; z-index: 2001; pointer-events: auto; max-width: 330px;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line-soft);
  border-radius: 18px; box-shadow: var(--shadow-lg); padding: 16px 18px; }
.coach-bubble .cb-title { font-weight: 900; color: var(--accent-2); font-size: 1.08rem; margin-bottom: 4px;
  display: flex; align-items: center; gap: 8px; }
.coach-bubble .cb-ic { font-size: 1.4rem; line-height: 1; }   /* picto illustratif de l'étape */
.coach-bubble .cb-text { font-size: .95rem; line-height: 1.38; }
.coach-bubble .guide-hear { margin-top: 10px; background: var(--chip, #eef); color: var(--accent-2);
  border: 1px solid var(--line-soft); border-radius: 999px; padding: 7px 14px; font-weight: 800; cursor: pointer; }
.coach-bubble .guide-hear:hover { filter: brightness(.97); }
.coach-bubble .cb-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.coach-bubble .cb-dots { color: var(--muted); font-weight: 800; font-size: .8rem; margin-right: auto; }
.coach-bubble .cb-skip { background: none; border: 0; color: var(--muted); font-weight: 800; padding: 8px 8px; cursor: pointer; }
.coach-bubble .cb-next { background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: #fff;
  border: 0; border-radius: 999px; padding: 10px 20px; font-weight: 800; cursor: pointer; box-shadow: var(--shadow); }

/* ---- Passeport illustré (picto par rubrique + bouton dire) ---- */
.pp-labrow { display: flex; align-items: center; gap: 10px; }
.pp-labrow label { flex: 1; }
.pp-ico { width: 40px; height: 40px; object-fit: contain; border-radius: 10px;
  background: var(--surface-2); border: 1px solid var(--line-soft); padding: 3px; flex: 0 0 auto; }
.pp-say { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--accent-2);
  background: var(--surface); color: var(--accent-2); font-size: 1.1rem; cursor: pointer; }
.pp-say:hover { background: var(--accent-2); color: #fff; }

/* ---- Cahier de vie : moments = supports de conversation ---- */
.cahier-row { display: flex; align-items: center; gap: 12px; padding: 12px; margin: 8px 0;
  border: 1px solid var(--line-soft); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm); }
.cahier-thumb { width: 84px; height: 84px; object-fit: cover; border-radius: 12px; flex: 0 0 auto; background: var(--surface-2); }
.cahier-say { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--accent-2);
  background: var(--surface); color: var(--accent-2); font-size: 1.2rem; cursor: pointer; }
.cahier-say:hover { background: var(--accent-2); color: #fff; }

/* ---- Éditeur « réponse sans lecture » (pictos + photo + voix + texte) ---- */
.rich { display: flex; flex-direction: column; gap: 8px; }
.rich-media { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.rich-empty { color: var(--muted); font-size: .85rem; }
.rich-chip { position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 12px; padding: 6px 8px; }
.rich-chip img { width: 46px; height: 46px; object-fit: contain; cursor: pointer; }
.rich-chip span { font-size: .72rem; font-weight: 700; max-width: 74px; text-align: center; overflow-wrap: anywhere; }
.rich-photo { position: relative; }
.rich-photo img { width: 72px; height: 72px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line-soft); }
.rich-x { position: absolute; top: -8px; right: -8px; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid #fff; background: #c81e1e; color: #fff; font-size: .95rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); padding: 0; }
.rich-bar { display: flex; flex-wrap: wrap; gap: 8px; }
.rich-btn { border: 2px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px;
  padding: 9px 14px; font-weight: 800; font-size: .9rem; min-height: 44px; cursor: pointer; transition: border-color var(--tr), background var(--tr); }
.rich-btn:hover { border-color: var(--accent-2); }
.rich-btn.is-rec { background: #c81e1e; color: #fff; border-color: #c81e1e; }
.rich-text { width: 100%; }

/* ---- Cahier de vie « premium » : cartes de moment ---- */
.cahier-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
@media (max-width: 560px) { .cahier-list { grid-template-columns: 1fr; } }
.moment-card { position: relative; display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--line-soft); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow);
  transition: transform var(--tr), box-shadow var(--tr); }
.moment-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.moment-photo { width: 100%; height: 170px; object-fit: cover; display: block; background: var(--surface-2); }
.moment-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.moment-top { display: flex; align-items: center; gap: 10px; }
.moment-date { font-weight: 800; color: var(--accent-2); font-size: .82rem; margin-right: auto; }
.moment-play { width: 46px; height: 46px; border-radius: 50%; border: 0; cursor: pointer; flex: 0 0 auto;
  background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: #fff; font-size: 1.1rem; box-shadow: var(--shadow); }
.moment-del { width: 40px; height: 40px; border-radius: 50%; flex: 0 0 auto; cursor: pointer; padding: 0;
  border: 2px solid var(--line); background: var(--surface); color: #c81e1e; font-size: 1rem;
  display: flex; align-items: center; justify-content: center; }
.moment-del:hover { background: #c81e1e; color: #fff; border-color: #c81e1e; }
.moment-pics { display: flex; flex-wrap: wrap; gap: 6px; }
.moment-pics img { width: 48px; height: 48px; object-fit: contain; background: var(--surface-2);
  border: 1px solid var(--line-soft); border-radius: 10px; padding: 3px; cursor: pointer; }
.moment-text { font-size: 1.02rem; font-weight: 700; line-height: 1.35; }

/* ---- Réglages : sélecteur Simple / Tout afficher + mode simple ---- */
.set-mode { display: flex; gap: 6px; max-width: 700px; margin: 4px auto 6px; padding: 5px;
  background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 999px; }
.set-seg { flex: 1; border: 0; background: transparent; color: var(--muted); cursor: pointer;
  border-radius: 999px; padding: 10px 14px; font-weight: 800; font-size: .95rem; min-height: 44px;
  transition: background var(--tr), color var(--tr); }
.set-seg.is-on { background: var(--surface); color: var(--accent-2); box-shadow: var(--shadow-sm); }
.panel.simple .set-adv { display: none !important; }

/* ---- Point 3 : libellés courts SOUS les icônes de la barre de message ---- */
.icon-btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; line-height: 1; }
.icon-lab { font-size: .56rem; font-weight: 800; letter-spacing: .01em; opacity: .85; }
.icon-btn.big .icon-lab { color: var(--accent-ink); }
@media (max-width: 640px) { .icon-lab { display: none; } }   /* téléphone : place limitée, on garde l'icône seule */

/* ---- Astuce « juste-à-temps » : petit bandeau non bloquant au-dessus de la barre du bas ---- */
.jit-tip { position: fixed; left: 50%; transform: translateX(-50%); bottom: 74px; z-index: 1500;
  max-width: min(560px, calc(100vw - 24px)); display: flex; align-items: center; gap: 12px;
  background: var(--accent); color: #fff; border-radius: 14px; padding: 12px 14px 12px 16px;
  box-shadow: 0 10px 30px rgba(40,10,80,.28); font-weight: 600; font-size: .95rem; line-height: 1.35;
  animation: jit-in .28s cubic-bezier(.2,.7,.2,1); }
.jit-tip .jit-txt { flex: 1; }
.jit-tip .jit-x { flex: 0 0 auto; background: rgba(255,255,255,.22); color: #fff; border: 0;
  border-radius: 999px; padding: 8px 14px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.jit-tip .jit-x:hover { background: rgba(255,255,255,.34); }
/* Bouton « Annuler » du bandeau : mis en avant (fond clair sur accent) */
.jit-tip .jit-annuler { background:#fff; color:var(--accent); }
.jit-tip .jit-annuler:hover { background:#fff; opacity:.92; }
/* Corbeille des profils (rien n'est effacé) */
.trash-box { margin-top:10px; padding:8px 10px; border:1px dashed var(--line); border-radius:var(--radius); }
.trash-head { font-weight:800; font-size:.9rem; margin-bottom:6px; }
/* « Ne plus afficher » : secondaire mais soigné (pill vitrée sur le bandeau accent) */
.jit-tip .jit-off { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.4);
  color:#fff; border-radius:999px; padding: 8px 13px; font-weight: 800; opacity:.92;
  text-decoration:none; transition: background var(--tr), transform var(--tr); }
.jit-tip .jit-off:hover { background: rgba(255,255,255,.24); opacity: 1; transform: translateY(-1px); }
.jit-tip .jit-ic { flex: 0 0 auto; font-size: 1.5rem; line-height: 1; }   /* petit picto illustratif */
/* bouton « écouter » (TTS) — le guidage ne passe pas QUE par l'écrit */
.jit-tip .guide-hear { flex: 0 0 auto; background: rgba(255,255,255,.22); color: #fff; border: 0;
  border-radius: 999px; padding: 8px 12px; font-weight: 800; cursor: pointer; white-space: nowrap; }
.jit-tip .guide-hear:hover { background: rgba(255,255,255,.34); }
.jit-tip.err { background: #c8362f; }   /* erreur : rouge, texte + solution claire */
.jit-tip.out { animation: jit-out .4s ease forwards; }
@keyframes jit-in { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes jit-out { to { opacity: 0; transform: translate(-50%, 12px); } }
@media (prefers-reduced-motion: reduce) { .jit-tip { animation: none; } }

/* ---- Mode modélisation (partenaire) : bandeau + signal visuel ---- */
.model-banner { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px; background: linear-gradient(135deg, var(--accent-2, #a52bfc), var(--accent));
  color: #fff; font-weight: 700; box-shadow: var(--shadow); }
.model-banner[hidden] { display: none; }
.model-banner .mb-txt { flex: 1; min-width: 180px; font-size: .95rem; }
.model-banner .mb-txt strong { font-weight: 900; }
/* Texte AUBERGINE sur pastille blanche (jamais var(--accent-ink) qui est blanc → illisible) */
.model-banner .mb-end { flex: 0 0 auto; background: #fff; color: #3a0577;
  border: 0; border-radius: 999px; padding: 9px 18px; font-weight: 900; cursor: pointer; min-height: 44px;
  box-shadow: 0 2px 8px rgba(0,0,0,.18); transition: transform var(--tr), background var(--tr); }
.model-banner .mb-end:hover { background: #f3e9ff; transform: translateY(-1px); }
/* Repère discret que le mode est actif : liseré violet autour de la grille */
body.modeling #board { box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent); border-radius: 12px; }

/* ---- Chemins moteurs : puces des mots choisis ---- */
.mp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0; }
.mp-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--surface-2);
  border: 1px solid var(--line-soft); border-radius: 999px; padding: 5px 6px 5px 10px; font-weight: 700; font-size: .9rem; }
.mp-chip img { width: 30px; height: 30px; object-fit: contain; }
.mp-x { width: 26px; height: 26px; border-radius: 50%; border: 0; background: #c81e1e; color: #fff;
  font-size: 1rem; line-height: 1; cursor: pointer; flex: 0 0 auto; }

/* ============================================================================
 * « LAISSER RESPIRER » — pass esthétique 2026-07-27
 * Objectif : moins d'étouffement. On GARDE le code couleur Fitzgerald (repère
 * essentiel) mais en TEINTE DOUCE + liseré coloré fort ; plus d'air ; bandeaux
 * du haut allégés. N'affecte ni le haut-contraste ni le mode sans couleur.
 * ==========================================================================*/
:root { --calm-tint: 26%; }   /* part de couleur dans le fond des cases (le reste = surface) */

/* Cases : fond TEINTÉ (plus saturé) + gros liseré haut de la couleur de famille */
:root:not([data-contrast="high"]) body:not(.no-color) .board .tile[data-color]{
  color: var(--ink);
  border: 1px solid var(--line);
  border-top: 5px solid var(--tile-accent, var(--line-strong));
  background: color-mix(in srgb, var(--tile-accent, var(--surface)) var(--calm-tint), var(--surface));
  box-shadow: none;
}
:root:not([data-contrast="high"]) body:not(.no-color) .board .tile[data-color]:hover{
  background: color-mix(in srgb, var(--tile-accent) 34%, var(--surface));
  box-shadow: var(--shadow-sm);
}
.board .tile[data-color="pronom"]    { --tile-accent: var(--c-pronom); }
.board .tile[data-color="verbe"]     { --tile-accent: var(--c-verbe); }
.board .tile[data-color="descriptif"]{ --tile-accent: var(--c-descriptif); }
.board .tile[data-color="nom"]       { --tile-accent: var(--c-nom); }
.board .tile[data-color="social"]    { --tile-accent: var(--c-social); }
.board .tile[data-color="question"]  { --tile-accent: var(--c-question); }
.board .tile[data-color="petit"]     { --tile-accent: #cfd6df; }
.board .tile[data-color="negation"]  { --tile-accent: var(--c-negation); }
.board .tile[data-color="advocacy"]  { --tile-accent: var(--c-advocacy); }

/* Plus d'AIR entre les cases et les colonnes */
.board.columns { gap: 12px; padding: 12px; }
.board.columns .vgrid { gap: 7px; }
.board.columns .vcol, .board.columns .vcol-fringe { gap: 7px; }

/* En-têtes de colonnes : teinte douce + texte coloré (fini la barre criarde) */
:root:not([data-contrast="high"]) body:not(.no-color) .vcol-head[data-color]{
  background: color-mix(in srgb, var(--head-accent, var(--surface)) 18%, var(--surface));
  /* texte plus SOMBRE (garde une pointe de teinte) -> contraste ≥ 4.5:1 (WCAG AA) sur la teinte douce */
  color: color-mix(in srgb, var(--head-accent, var(--ink)) 26%, var(--ink));
  box-shadow: none; border: 1px solid var(--line);
}
.vcol-head[data-color="pronom"]{ --head-accent: var(--c-pronom); }
.vcol-head[data-color="verbe"]{ --head-accent: var(--c-verbe); }
.vcol-head[data-color="descriptif"]{ --head-accent: var(--c-descriptif); }
.vcol-head[data-color="nom"]{ --head-accent: var(--c-nom); }
.vcol-head[data-color="social"]{ --head-accent: var(--c-social); }
.vcol-head[data-color="question"]{ --head-accent: var(--c-question); }
.vcol-head[data-color="negation"]{ --head-accent: var(--c-negation); }
.vcol-head[data-color="advocacy"]{ --head-accent: var(--c-advocacy); }

/* Barres du haut ALLÉGÉES : la barre de ton et la grammaire reculent visuellement */
.tonebar { padding: 3px var(--gap); gap: 5px; background: transparent; border-bottom: 1px solid var(--line-soft); }
.tonebar .grammarbar-label { font-size: .78rem; }
.tone-btn { background: transparent; border: 1.5px solid transparent; color: var(--muted);
  padding: 5px 11px; min-height: 34px; font-size: .82rem; box-shadow: none; font-weight: 700; }
.tone-btn:hover { background: var(--surface-2); box-shadow: none; }
.tone-btn.is-active { background: color-mix(in srgb, var(--c-social) 28%, var(--surface));
  border-color: color-mix(in srgb, var(--c-social) 50%, var(--surface)); color: var(--ink); }
.grammarbar { padding: 4px var(--gap); background: transparent; border-bottom: 1px solid var(--line-soft); }

/* Fond général : dégradé plus discret, plus calme */
body { background:
  radial-gradient(1100px 520px at 100% -12%, color-mix(in srgb, var(--accent) 4%, transparent), transparent 60%),
  linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); }

/* ---- Case « + » de catégorie (12e cellule → pop-up avec tout le reste) ---- */
.tile.tile-more{
  background: color-mix(in srgb, var(--accent) 15%, var(--surface));
  border: 2px dashed var(--accent);
  color: var(--ink); box-shadow: none;
}
.tile.tile-more .tile-label{ color: var(--ink); font-weight: 800; }
.tile.tile-more:hover{ background: color-mix(in srgb, var(--accent) 24%, var(--surface)); box-shadow: var(--shadow-sm); }
/* Aperçu : mini-grille 2×2 des mots cachés + pastille « +N » */
.tile.tile-more .more-peek{ display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
  width: min(72%, 62px); aspect-ratio: 1/1; margin-bottom: 2px; }
.tile.tile-more .more-peek img{ width: 100%; height: 100%; object-fit: contain;
  background: var(--surface); border-radius: 6px; }
.tile.tile-more .more-count{ display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--accent-ink); border-radius: 6px; font-weight: 900; font-size: .8rem; }
.tile.tile-more .more-grid{ display: flex; align-items: center; justify-content: center;
  color: var(--accent); font-size: 1.5rem; }

/* ---- Sélecteur de variantes de picto (« choisis celui qui te ressemble ») ---- */
.var-choose { display: flex; flex-wrap: wrap; gap: 10px; }
.var-opt-pic { border: 2px solid var(--line); background: var(--surface); border-radius: 14px;
  padding: 6px; cursor: pointer; width: 78px; height: 78px; display: flex; align-items: center; justify-content: center; }
.var-opt-pic img { max-width: 100%; max-height: 100%; object-fit: contain; }
.var-opt-pic:hover { border-color: var(--accent-2); }
.var-opt-pic.sel { border-color: var(--accent-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2) 30%, transparent); }

/* ---- Bibliothèque : banques distinctes + téléchargement + licence ---- */
.lib-banks { display: flex; gap: 8px; margin: 4px 0 8px; }
.lib-bank { flex: 1; border: 2px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: 12px; padding: 10px; font-weight: 800; cursor: pointer; min-height: 44px; }
.lib-bank.is-on { border-color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 12%, var(--surface)); color: var(--accent-ink); }
.lib-grid .tile { position: relative; }
.lib-dl { position: absolute; top: 3px; right: 3px; width: 30px; height: 30px; border-radius: 8px;
  border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--accent-ink);
  font-size: .95rem; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; box-shadow: var(--shadow-sm); }
.lib-dl:hover { background: var(--accent-2); color: #fff; border-color: var(--accent-2); }
.lib-licence { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--surface-2);
  border: 1px dashed var(--line-strong); color: var(--muted); font-size: .82rem; line-height: 1.4; }