/* ═══════════════════════════════════════════════════════════════════════════
   NEXUS — DESIGN 2026 : la couche de matière et de mouvement, partagée par toutes les pages.
   Servie par /static/nexus-ui-2026.css et liée par pageHtml() (server.js) : UNE seule déclaration.
   RÈGLES DE LA COUCHE
   · elle n'ajoute AUCUNE couleur : tout vient des variables de thème déjà posées par chaque page
     (--bg-base/--gold… ou --fond/--or… ou --bg/--gold… ou --accent) via des chaînes var(a, var(b, …)) ;
   · les jetons sont définis sur <body> (pas :root), sinon ils ne voient pas les variables de thème ;
   · les animations qui bouclent n'utilisent que transform et opacity ; les transitions de survol
     peuvent toucher couleur/ombre sur de petits contrôles ;
   · prefers-reduced-motion, onglet caché, « Confort de lecture » et contrastes forts : tout est calme ;
   · :where() = spécificité nulle : la couche comble les trous sans écraser une règle propre à une page.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. JETONS ─────────────────────────────────────────────────────────── */
body {
  --nxu-bg: var(--bg-base, var(--fond, var(--bg, #0a1128)));
  --nxu-surf: var(--bg-surface, var(--fond2, var(--carte, var(--surface, var(--nxu-bg)))));
  --nxu-elev: var(--bg-elevated, var(--fond3, var(--elev, var(--nxu-surf))));
  --nxu-acc: var(--gold, var(--or, var(--accent, #d4af37)));
  --nxu-txt: var(--text-primary, var(--encre, var(--text, #f0ead6)));
  --nxu-dim: var(--text-secondary, var(--doux, var(--muted, #8fa8cc)));
  --nxu-line: var(--border, var(--trait, rgba(255, 255, 255, .12)));
  /* teinte des ombres : une pointe de l'accent du thème dans un noir bleuté */
  --nxu-shade: color-mix(in srgb, var(--nxu-acc) 10%, #02050c);
  --nxu-sh1: 0 1px 2px color-mix(in srgb, var(--nxu-shade) 34%, transparent), 0 2px 8px color-mix(in srgb, var(--nxu-shade) 18%, transparent);
  --nxu-sh2: 0 2px 4px color-mix(in srgb, var(--nxu-shade) 30%, transparent), 0 10px 26px color-mix(in srgb, var(--nxu-shade) 26%, transparent);
  --nxu-sh3: 0 4px 8px color-mix(in srgb, var(--nxu-shade) 32%, transparent), 0 24px 56px color-mix(in srgb, var(--nxu-shade) 38%, transparent);
  --nxu-hl: inset 0 1px 0 color-mix(in srgb, #fff 7%, transparent);   /* liseré de lumière en haut des objets */
  --nxu-ring: 0 0 0 3px color-mix(in srgb, var(--nxu-acc) 34%, transparent);
  --nxu-glow: 0 0 22px -4px color-mix(in srgb, var(--nxu-acc) 55%, transparent);
  --nxu-r-sm: 8px; --nxu-r: 12px; --nxu-r-lg: 18px;
  --nxu-ease: cubic-bezier(.2, .7, .2, 1);
  --nxu-spring: cubic-bezier(.34, 1.4, .5, 1);
  --nxu-fast: .14s; --nxu-mid: .24s; --nxu-slow: .42s;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body[data-theme="clair"], body[data-theme="clair-pl"], body[data-theme="lueur"], body[data-theme="lueur-blanc-casse"],
body[data-theme="monochrome-clair"], body[data-theme="mono-noir-blanc"], body[data-theme="contraste-clair"],
body[data-theme="confort-lecture"], body[data-theme="dyslexie"], body[data-theme="pastille-google"] {
  --nxu-hl: inset 0 1px 0 rgba(255, 255, 255, .85);
  --nxu-shade: color-mix(in srgb, var(--nxu-acc) 14%, #1b2433);
  --nxu-sh1: 0 1px 2px color-mix(in srgb, var(--nxu-shade) 14%, transparent), 0 2px 8px color-mix(in srgb, var(--nxu-shade) 8%, transparent);
  --nxu-sh2: 0 2px 4px color-mix(in srgb, var(--nxu-shade) 12%, transparent), 0 10px 26px color-mix(in srgb, var(--nxu-shade) 12%, transparent);
  --nxu-sh3: 0 4px 8px color-mix(in srgb, var(--nxu-shade) 14%, transparent), 0 24px 56px color-mix(in srgb, var(--nxu-shade) 20%, transparent);
}

/* ── 2. ICÔNES ─────────────────────────────────────────────────────────── */
.nxu-i { display: inline-flex; align-items: center; justify-content: center; width: 1.2em; height: 1.2em; flex: 0 0 auto;
  vertical-align: -.2em; line-height: 1; color: inherit; font-size: inherit; font-style: normal; }
.nxu-i > svg { width: 100%; height: 100%; display: block; overflow: visible; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nxu-i > svg use { pointer-events: none; }
.nxu-g { display: none; }                         /* le glyphe d'origine reste dans le DOM mais invisible */
.nxu-i[data-sem="ok"] { color: var(--green, #22c55e); }
.nxu-i[data-sem="warn"] { color: var(--amber, #f59e0b); }
.nxu-i[data-sem="err"] { color: var(--red, #ef4444); }
.nxu-i[data-nxu-i="dot"] > svg, .nxu-i[data-nxu-i="triangle"] > svg { stroke-width: 1; }
.nxu-i[data-nxu-i="dot"] { width: .7em; height: .7em; vertical-align: .02em; }
.nxu-i[data-nxu-i="circle"] { width: .85em; height: .85em; }
/* un petit espace régulier entre l'icône et le texte qui la suit */
.nxu-i + :where(span, strong, em, b, small) { margin-left: .1em; }
/* tailles dans les contrôles courants */
:where(button, a, summary, [role=button]) > .nxu-i:first-child:not(:last-child) { margin-right: .42em; }
:where(button, a, summary, [role=button]) > .nxu-i:last-child:not(:first-child) { margin-left: .42em; }
.cf-icone .nxu-i { width: 1.25em; height: 1.25em; padding: 7px; box-sizing: content-box; border-radius: 12px;
  color: var(--nxu-acc); background: color-mix(in srgb, var(--nxu-acc) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nxu-acc) 22%, transparent); }
.n-ico .nxu-i, .tool-icon .nxu-i, .h-ico .nxu-i { width: 1.15em; height: 1.15em; }

/* ── 3. SURVOL, PRESSION, FOCUS (toutes les pages) ─────────────────────── */
:where(button, [role=button], summary, select, input[type=checkbox], input[type=radio], label[for]) {
  transition: transform var(--nxu-fast) var(--nxu-ease), background-color var(--nxu-mid) var(--nxu-ease),
    border-color var(--nxu-mid) var(--nxu-ease), color var(--nxu-mid) var(--nxu-ease),
    box-shadow var(--nxu-mid) var(--nxu-ease), opacity var(--nxu-mid) var(--nxu-ease);
}
:where(button, [role=button]):not(:disabled):active { transform: scale(.97); }
:where(button, [role=button]):disabled, :where(button)[aria-disabled=true] { cursor: not-allowed; }
:where(a, button, summary, [role=button], [role=tab], [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid var(--nxu-acc) !important; outline-offset: 2px; box-shadow: var(--nxu-ring);
}
body :is(input, textarea, select):focus-visible { outline: none; border-color: var(--nxu-acc); box-shadow: var(--nxu-ring); }
::selection { background: color-mix(in srgb, var(--nxu-acc) 38%, transparent); }
:where(a) { transition: color var(--nxu-mid) var(--nxu-ease), opacity var(--nxu-mid) var(--nxu-ease); }

/* ── 4. CONVERSATION (page d'accueil) ──────────────────────────────────── */
/* Les messages : fondu + léger glissement (le message de l'utilisateur arrive du bord droit, celui de Nexus du bord gauche) */
body .msg { animation: nxuMsgIn var(--nxu-slow) var(--nxu-ease) both; }
body .msg.user { --nxu-dx: 12px; }
body .msg.assistant { --nxu-dx: -12px; }
/* 10/10/2026 : plus de translateX à l'apparition (il créait un débordement transitoire qui faisait glisser le fil) : opacité + montée verticale seulement */
@keyframes nxuMsgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
body .msg .msg-bubble { box-shadow: var(--nxu-hl), var(--nxu-sh1); }
body .msg.user .msg-bubble { background-image: linear-gradient(160deg, color-mix(in srgb, var(--nxu-acc) 9%, transparent), transparent 70%); }
body .msg.assistant .msg-avatar { box-shadow: 0 0 0 2px color-mix(in srgb, var(--nxu-acc) 22%, transparent), var(--nxu-sh1); }
body .msg-avatar img { border-radius: 50%; }

/* Le composer flottant : un objet posé, qui s'éclaire quand on écrit */
body .input-row { box-shadow: var(--nxu-hl), var(--nxu-sh2); transition: box-shadow var(--nxu-mid) var(--nxu-ease), border-color var(--nxu-mid) var(--nxu-ease); }
body .input-row:focus-within { border-color: var(--nxu-acc); box-shadow: var(--nxu-hl), var(--nxu-sh2), var(--nxu-ring); }
body .btn-icon { transition: background-color var(--nxu-fast), color var(--nxu-fast), transform var(--nxu-fast) var(--nxu-ease); }
body .btn-icon:hover { transform: translateY(-1px); }
body .btn-icon .nxu-i { width: 1.15em; height: 1.15em; }
body .btn-icon.mic-active { animation: nxuMicPulse 1.6s ease-in-out infinite; }
@keyframes nxuMicPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
body .btn-send { box-shadow: var(--nxu-sh2), var(--nxu-glow); transition: transform var(--nxu-fast) var(--nxu-ease), box-shadow var(--nxu-mid) var(--nxu-ease), opacity var(--nxu-mid); }
body .btn-send:hover { transform: translateY(-1px) scale(1.04); }
body .btn-send:active { transform: scale(.94); }
body .btn-send .nxu-i { width: 1.25em; height: 1.25em; }
body .menu-plus-composer { box-shadow: var(--nxu-hl), var(--nxu-sh3); }
body .menu-plus-composer.visible { animation: nxuPop var(--nxu-mid) var(--nxu-spring) both; transform-origin: bottom left; }
@keyframes nxuPop { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } }
body .vers-bas { box-shadow: var(--nxu-sh2); transition: transform var(--nxu-fast) var(--nxu-ease), opacity var(--nxu-mid); }

/* En-tête, barre latérale, crédits */
body .app-header { box-shadow: 0 1px 0 var(--nxu-line), 0 8px 24px -14px color-mix(in srgb, var(--nxu-shade) 55%, transparent); position: relative; z-index: 3; }
body .sidebar { box-shadow: 1px 0 0 var(--nxu-line), 10px 0 30px -22px color-mix(in srgb, var(--nxu-shade) 60%, transparent); }
body .history-item, body .tool-item, body .n-tab { transition: background-color var(--nxu-mid) var(--nxu-ease), color var(--nxu-mid) var(--nxu-ease), transform var(--nxu-mid) var(--nxu-ease), border-color var(--nxu-mid); }
body .history-item:hover, body .tool-item:hover { transform: translateX(2px); }
body .history-item.active { box-shadow: inset 2px 0 0 var(--nxu-acc); }
body .token-counter { box-shadow: var(--nxu-hl), var(--nxu-sh1); transition: box-shadow var(--nxu-mid), border-color var(--nxu-mid); }
body .token-counter:hover { border-color: var(--nxu-acc); box-shadow: var(--nxu-hl), var(--nxu-sh2); }
body .token-bolt .nxu-i, body .token-bolt { color: var(--nxu-acc); }
body .jm-barre { overflow: hidden; border-radius: 99px; }
body .jm-barre span { transition: width .7s var(--nxu-ease), background-color var(--nxu-mid); }
body .carte-flottante, body .pack-card, body .feat-card { box-shadow: var(--nxu-hl), var(--nxu-sh1); transition: transform var(--nxu-mid) var(--nxu-ease), box-shadow var(--nxu-mid) var(--nxu-ease), border-color var(--nxu-mid); }
body .carte-flottante:hover, body .pack-card:hover { box-shadow: var(--nxu-hl), var(--nxu-sh2), var(--nxu-glow); }
body .chip, body .moteur-btn, body .mode-btn { transition: transform var(--nxu-fast) var(--nxu-ease), background-color var(--nxu-mid), border-color var(--nxu-mid), color var(--nxu-mid), box-shadow var(--nxu-mid); }
body .chip:hover { transform: translateY(-1px); }

/* Modales et tiroirs : entrée en fondu + ressort léger, fond verre dépoli mesuré */
body .nexus-overlay.visible { animation: nxuFade var(--nxu-mid) var(--nxu-ease) both; }
body .nexus-overlay.visible .nexus-modal { animation: nxuModal .34s var(--nxu-spring) both; box-shadow: var(--nxu-hl), var(--nxu-sh3); }
@keyframes nxuFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nxuModal { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
body .nm-close, body .moteur-close { transition: transform var(--nxu-mid) var(--nxu-ease), background-color var(--nxu-mid), color var(--nxu-mid); }
body .nm-close:hover { transform: rotate(90deg); }

/* ── 5. INDICATEUR « NEXUS RÉFLÉCHIT / TRAVAILLE » ─────────────────────── */
/* a) l'attente avant le premier évènement */
.nxu-attente { display: flex !important; align-items: center; gap: 10px; position: relative; overflow: hidden; min-height: 22px; }
.nxu-attente .typing-dot { display: none !important; }              /* les trois points d'origine restent dans le DOM, invisibles */
.nxu-orbe { position: relative; width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; background: var(--nxu-acc); }
.nxu-orbe::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--nxu-acc); opacity: .5; animation: nxuRespire 1.9s var(--nxu-ease) infinite; }
.nxu-orbe { animation: nxuOrbe 1.9s ease-in-out infinite; }
@keyframes nxuOrbe { 0%, 100% { transform: scale(.82); opacity: .85; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes nxuRespire { 0% { transform: scale(.55); opacity: .6; } 100% { transform: scale(1.35); opacity: 0; } }
.nxu-att-txt { font-size: 12.5px; color: var(--nxu-dim); letter-spacing: .01em; }
/* balayage de lumière : un voile qui traverse (transform seul) */
.nxu-attente::after, body .reflexion[data-nxu-live] .reflexion-tete::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--nxu-acc) 22%, transparent), transparent);
  transform: translateX(-120%); animation: nxuBalai 2.3s var(--nxu-ease) infinite;
}
@keyframes nxuBalai { 0% { transform: translateX(-120%); } 65%, 100% { transform: translateX(300%); } }

/* b) le tiroir de réflexion : cadre qui s'éclaire, pastille qui respire, étapes lisibles */
body .reflexion { position: relative; transition: border-color var(--nxu-slow) var(--nxu-ease); }
body .reflexion[data-nxu-live] { border-left-color: var(--nxu-acc); }
body .reflexion-tete { position: relative; overflow: hidden; align-items: center; border-radius: 6px; padding: 2px 6px 2px 0; }
body .reflexion[data-nxu-live] .reflexion-tete { color: var(--nxu-dim); }
body .reflexion[data-nxu-live] .reflexion-tete::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--nxu-acc); animation: nxuOrbe 1.9s ease-in-out infinite; align-self: center; }
body .reflexion-tete .chev { transition: transform var(--nxu-mid) var(--nxu-ease); }
body .reflexion-corps { transition: opacity var(--nxu-mid) var(--nxu-ease); }
body .reflexion-pas { animation: nxuPas .32s var(--nxu-ease) both; }
@keyframes nxuPas { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
/* repère d'étape : coche quand c'est fait, anneau quand c'est en cours */
body .reflexion-pas.etape, body .reflexion-pas.outil, body .reflexion-pas.resultat, body .reflexion-pas.sous, body .reflexion-pas.rate, body .reflexion-pas.alerte { position: relative; padding-left: 22px; }
body .reflexion-pas.sous { padding-left: 38px; }
body .reflexion-pas.etape::before, body .reflexion-pas.outil::before, body .reflexion-pas.resultat::before, body .reflexion-pas.sous::before {
  content: ""; position: absolute; left: 2px; top: .42em; width: 12px; height: 12px; box-sizing: border-box; border-radius: 50%;
  background: color-mix(in srgb, var(--nxu-acc) 16%, transparent);
  -webkit-mask: none; border: 1.5px solid color-mix(in srgb, var(--nxu-acc) 60%, transparent);
}
body .reflexion-pas.sous::before { left: 18px; }
body .reflexion-pas.etape::after, body .reflexion-pas.outil::after, body .reflexion-pas.resultat::after, body .reflexion-pas.sous::after {
  content: ""; position: absolute; left: 5.4px; top: calc(.42em + 3.1px); width: 3.4px; height: 6px; box-sizing: border-box; border: solid var(--nxu-acc); border-width: 0 1.6px 1.6px 0; transform: rotate(40deg) scale(1); transform-origin: 50% 50%;
}
body .reflexion-pas.sous::after { left: 21.4px; }
body .reflexion-pas.rate::before, body .reflexion-pas.alerte::before { content: "!"; position: absolute; left: 2px; top: .3em; width: 12px; height: 12px; border-radius: 50%; font-size: 9px; line-height: 12px; text-align: center; font-weight: 800; color: var(--amber, #f59e0b); border: 1.5px solid currentColor; }
/* en cours : l'anneau tourne, la coche disparaît */
body .reflexion-pas[data-nxu-cour]::before { background: transparent; border-color: color-mix(in srgb, var(--nxu-acc) 28%, transparent); border-top-color: var(--nxu-acc); animation: nxuTourne .9s linear infinite; }
body .reflexion-pas[data-nxu-cour]::after { display: none; }
@keyframes nxuTourne { to { transform: rotate(360deg); } }

/* ── 6. ÉTATS DE CHARGEMENT (squelettes) ───────────────────────────────── */
.nxu-sq, .nxu-chargement { position: relative; overflow: hidden; border-radius: 8px; }
.nxu-sq { background: color-mix(in srgb, var(--nxu-dim) 14%, transparent); min-height: 14px; }
.nxu-chargement { color: transparent !important; min-height: 38px; background: color-mix(in srgb, var(--nxu-dim) 10%, transparent); }
.nxu-sq::after, .nxu-chargement::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--nxu-txt) 9%, transparent), transparent); animation: nxuBalai 1.6s ease-in-out infinite; }

/* ── 7. PAGES D'ATELIER / STUDIO / DOCUMENT / AUTONOMIE / COFFRE (jeu de classes commun) ── */
body :is(.pane, .carte, .tpl-card, .carte-doc, .cap-carte) { box-shadow: var(--nxu-hl), var(--nxu-sh1); }
body :is(.carte, .tpl-card, .carte-doc, .carte-sugg, .outil-carte, .dv-carte, .pg-carte) { transition: transform var(--nxu-mid) var(--nxu-ease), box-shadow var(--nxu-mid) var(--nxu-ease), border-color var(--nxu-mid) var(--nxu-ease); }
body :is(.tpl-card, .carte-doc, .carte-sugg, .outil-carte, .dv-carte):hover { transform: translateY(-2px); box-shadow: var(--nxu-hl), var(--nxu-sh2); }
body :is(.btn, .mini-btn, .btn-icone, .bouton) { transition: transform var(--nxu-fast) var(--nxu-ease), background-color var(--nxu-mid), border-color var(--nxu-mid), color var(--nxu-mid), box-shadow var(--nxu-mid); }
body :is(.btn, .mini-btn, .bouton):not(:disabled):hover { box-shadow: var(--nxu-sh1); }
body .tabbar .tab, body .tabbar button { transition: background-color var(--nxu-mid), color var(--nxu-mid), border-color var(--nxu-mid); }
body .tab-panel { animation: nxuFade var(--nxu-mid) var(--nxu-ease) both; }
body :is(.ed-tiroir, .tiroir) { box-shadow: var(--nxu-sh3); }
body :is(.modale, .modal-enr) { box-shadow: var(--nxu-hl), var(--nxu-sh3); }
body .bulle { animation: nxuMsgIn var(--nxu-slow) var(--nxu-ease) both; }
body :is(.composer) { box-shadow: var(--nxu-hl), var(--nxu-sh2); transition: box-shadow var(--nxu-mid), border-color var(--nxu-mid); }
body :is(.composer):focus-within { box-shadow: var(--nxu-hl), var(--nxu-sh2), var(--nxu-ring); }

/* ── 8. MODES CALMES : Confort de lecture, dyslexie, contrastes forts ──── */
/* aucune animation décorative, aucune ombre portée, contraste maximal ; l'indicateur reste lisible, immobile */
body[data-theme="confort-lecture"], body[data-theme="dyslexie"], body[data-theme="contraste-clair"], body[data-theme="contraste-sombre"], body[data-theme="contraste-max"], body[data-theme="contraste-min"] {
  --nxu-sh1: none; --nxu-sh2: none; --nxu-sh3: none; --nxu-hl: 0 0 0 0 transparent; --nxu-glow: 0 0 0 0 transparent;
}
body[data-theme="confort-lecture"] *, body[data-theme="dyslexie"] *, body[data-theme="contraste-clair"] *, body[data-theme="contraste-sombre"] *,
body[data-theme="contraste-max"] *, body[data-theme="contraste-min"] * { animation: none !important; transition: none !important; }
body[data-theme="confort-lecture"] .nxu-attente::after, body[data-theme="dyslexie"] .nxu-attente::after, body[data-theme^="contraste"] .nxu-attente::after,
body[data-theme="confort-lecture"] .reflexion-tete::after, body[data-theme="dyslexie"] .reflexion-tete::after, body[data-theme^="contraste"] .reflexion-tete::after,
body[data-theme="confort-lecture"] .nxu-orbe::after, body[data-theme="dyslexie"] .nxu-orbe::after, body[data-theme^="contraste"] .nxu-orbe::after { display: none; }
body[data-theme="confort-lecture"] .reflexion-pas[data-nxu-cour]::before, body[data-theme="dyslexie"] .reflexion-pas[data-nxu-cour]::before, body[data-theme^="contraste"] .reflexion-pas[data-nxu-cour]::before { border-style: dashed; border-color: var(--nxu-acc); }
body[data-theme^="contraste"] .nxu-i, body[data-theme="confort-lecture"] .nxu-i, body[data-theme="dyslexie"] .nxu-i { color: inherit; }
body[data-theme^="contraste"] .nxu-i > svg, body[data-theme="confort-lecture"] .nxu-i > svg { stroke-width: 2.4; }
body[data-theme^="contraste"] :where(a, button, summary, [role=button], [tabindex]):focus-visible { outline-width: 3px !important; box-shadow: none; }

/* ── 9. PAUSE (onglet caché) ET MOUVEMENT RÉDUIT ───────────────────────── */
html[data-nxu-pause] *, html[data-nxu-pause] *::before, html[data-nxu-pause] *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .nxu-attente::after, body .reflexion-tete::after, .nxu-orbe::after, .nxu-sq::after, .nxu-chargement::after { display: none !important; }
}

/* ── 10. MOBILE ────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  body .history-item:hover, body .tool-item:hover { transform: none; }
  body .app-header, body .sidebar { box-shadow: none; }
  body .msg { animation-duration: .3s; }
}

/* ── 11. THÈMES À ACCENT FAIBLE : le relief reste, mais les repères non textuels (anneau de focus, pastille) prennent la couleur du texte ──
   mesuré : accent/fond = 2,7:1 (lueur blanc cassé) et 3,6:1 (pastille Google) ; on ne recolore pas le thème, on évite seulement de s'appuyer sur lui. */
body[data-theme="lueur-blanc-casse"], body[data-theme="pastille-google"] { --nxu-acc: var(--nxu-txt); }

/* ── 12. PANNEAU « RÉSULTATS » : onglets, espace exploité, mode grand DANS Nexus ─────────────────── */
/* largeur normale plus généreuse (le résultat n'est plus « un petit rectangle ») ; le redimensionnement manuel garde la priorité (style en ligne) */
:root { --result-w: clamp(380px, 38vw, 640px); }
[data-nxu-res] { position: relative; min-width: 0; }
.nxu-rbar { gap: 4px; padding: 6px 8px 0; align-items: flex-end; }
.nxu-rbar[hidden] { display: none; }
.nxu-rtabs { display: flex; align-items: flex-end; gap: 3px; flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; scroll-behavior: smooth; }
.nxu-rtabs::-webkit-scrollbar { display: none; }
.nxu-rtab { max-width: 200px; min-width: 96px; position: relative; font-family: inherit; }
.nxu-rtab .nav-tab-titre { max-width: 140px; }
.nxu-rtab.active { box-shadow: 0 -2px 0 var(--nxu-acc) inset; }
.nxu-rtab .nxu-i { width: 14px; height: 14px; }
.nxu-neuf { position: absolute; top: 4px; right: 22px; width: 7px; height: 7px; border-radius: 50%; background: var(--nxu-acc); box-shadow: 0 0 0 2px var(--nxu-elev); animation: nxuOrbe 1.9s ease-in-out infinite; }
.nxu-rnav { flex: 0 0 auto; width: 28px; height: 28px; margin-bottom: 3px; border-radius: 8px; border: 1px solid var(--nxu-line); background: var(--nxu-surf); color: var(--nxu-dim); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.nxu-rnav:hover:not(:disabled) { color: var(--nxu-acc); border-color: var(--nxu-acc); }
.nxu-rnav:disabled { opacity: .35; cursor: default; }
.nxu-rnav .nxu-i { width: 16px; height: 16px; }
.nxu-rcompte { flex: 0 0 auto; font-size: 11px; color: var(--nxu-dim); margin: 0 2px 8px; min-width: 30px; text-align: center; font-variant-numeric: tabular-nums; }
.nxu-rsel { display: none; }
.nxu-rmenu { position: absolute; z-index: 40; top: 44px; right: 8px; width: min(340px, calc(100% - 16px)); max-height: 60%; overflow: auto; background: var(--nxu-surf); border: 1px solid var(--nxu-line); border-radius: 12px; box-shadow: var(--nxu-hl), var(--nxu-sh3); padding: 6px; animation: nxuPop var(--nxu-mid) var(--nxu-spring) both; transform-origin: top right; }
.nxu-rmenu[hidden] { display: none; }
.nxu-rm { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--nxu-txt); font: inherit; font-size: 13px; cursor: pointer; }
.nxu-rm:hover, .nxu-rm[aria-selected="true"] { background: color-mix(in srgb, var(--nxu-acc) 14%, transparent); }
.nxu-rm[aria-selected="true"] { color: var(--nxu-acc); font-weight: 600; }
.nxu-rm-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nxu-rm-k { font-size: 10.5px; color: var(--nxu-dim); }
/* le corps : la carte active occupe TOUT l'espace (plus de pile de petits rectangles) */
[data-nxu-res] .result-body { padding: 0; gap: 0; overflow: hidden; }
[data-nxu-res] .result-body > .result-card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border: 0; border-radius: 0; position: relative; background: var(--nxu-bg); animation: nxuFade var(--nxu-mid) var(--nxu-ease) both; }
[data-nxu-res] .result-body > .result-card.nxu-r-off { display: none; }
[data-nxu-res] .result-card .rc-head { flex: 0 0 auto; padding: 8px 10px 8px 14px; align-items: center; gap: 8px; }
[data-nxu-res] .result-card .rc-actions { gap: 4px; }
[data-nxu-res] .result-card .rc-btn { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; padding: 0; font-size: 14px; line-height: 1; }
[data-nxu-res] .result-card .rc-btn .nxu-i { width: 16px; height: 16px; }
[data-nxu-res] .result-card .rc-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0; overflow: auto; }
[data-nxu-res] .rc-body iframe, [data-nxu-res] .result-card > .rc-cadre { flex: 1 1 auto; width: 100%; height: auto !important; min-height: 0; border: 0; border-radius: 0; background: var(--nxu-paper, #fff); display: block; }
[data-nxu-res] .result-card .rc-body .rc-texte, [data-nxu-res] .result-card .rc-body pre { padding: 16px 18px; margin: 0; border: 0; border-radius: 0; flex: 1 1 auto; white-space: pre-wrap; overflow-wrap: anywhere; }
[data-nxu-res] .result-card[data-nxu-type="image"] .rc-body { align-items: center; justify-content: center; padding: 16px; background: color-mix(in srgb, var(--nxu-dim) 8%, var(--nxu-bg)); }
[data-nxu-res] .result-card[data-nxu-type="image"] .rc-body img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 10px; box-shadow: var(--nxu-sh2); }
[data-nxu-res] .result-card[data-nxu-type="video"] .rc-body { align-items: center; justify-content: center; background: #000; }
[data-nxu-res] .result-card video { max-width: 100%; max-height: 100%; }
[data-nxu-res] .result-card[data-nxu-type="table"] .rc-body { padding: 12px; }
[data-nxu-res] .result-card table { display: block; max-width: 100%; overflow: auto; border-collapse: collapse; }
[data-nxu-res] .result-card[data-nxu-type="sources"] .rc-body { padding: 12px; gap: 8px; }
.nxu-r-sq { position: absolute; left: 0; right: 0; bottom: 0; top: 46px; z-index: 2; background: var(--nxu-bg); overflow: hidden; pointer-events: none; }
.nxu-r-sq::before { content: ""; position: absolute; left: 20px; top: 22px; height: 18px; width: 70%; border-radius: 8px; background: color-mix(in srgb, var(--nxu-dim) 16%, transparent); box-shadow: 0 34px 0 0 color-mix(in srgb, var(--nxu-dim) 12%, transparent), 0 68px 0 -4px color-mix(in srgb, var(--nxu-dim) 12%, transparent), 0 102px 0 -8px color-mix(in srgb, var(--nxu-dim) 10%, transparent); }
.nxu-r-sq::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--nxu-txt) 8%, transparent), transparent); animation: nxuBalai 1.5s ease-in-out infinite; }
body[data-theme="confort-lecture"], body[data-theme="dyslexie"] { --nxu-paper: var(--bg-surface); }
/* état vide */
[data-nxu-res] .result-empty { background: radial-gradient(60% 50% at 50% 42%, color-mix(in srgb, var(--nxu-acc) 8%, transparent), transparent 70%); }
[data-nxu-res] .result-empty .re-logo { width: 88px; opacity: .55; border-radius: 22px; box-shadow: var(--nxu-sh2); filter: none; }
[data-nxu-res] .result-empty .re-texte { font-size: 13px; max-width: 260px; color: var(--nxu-dim); }
/* mode grand : le panneau reste DANS Nexus (barre latérale et en-tête visibles), bouton « Réduire » explicite */
body .result-panel.agrandi { border-left: 1px solid var(--nxu-line); box-shadow: var(--nxu-sh2); min-width: 0; }
.result-panel.agrandi #rpAgrandir { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.result-panel.agrandi #rpAgrandir::after { content: "Réduire"; font-size: 12px; }
.result-panel.agrandi .nxu-grand { display: none; }
body .rp-close, body .rp-chevron { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; min-height: 30px; }
/* mobile : plein écran SOUS l'en-tête, retour clair, sélecteur en tiroir */
@keyframes nxuSheet { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (max-width: 720px) {
  .result-panel.mobile-ouvert { inset: var(--header-h, 56px) 0 0 0 !important; height: auto !important; z-index: 55; animation: nxuSheet .3s var(--nxu-ease) both; }
  .result-panel .btn-mobile-nav { width: auto; padding: 0 12px; min-height: 40px; gap: 6px; font-size: 13px; font-weight: 600; color: var(--nxu-acc); }
  .result-panel .btn-mobile-nav::after { content: "Retour"; }
  .nxu-rtabs, .nxu-rcompte, .nxu-rliste { display: none; }
  .nxu-rsel { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; min-height: 44px; margin-bottom: 3px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--nxu-line); background: var(--nxu-surf); color: var(--nxu-txt); font: inherit; font-size: 13px; cursor: pointer; }
  .nxu-rsel-txt { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nxu-rnav { width: 44px; height: 44px; margin-bottom: 3px; }
  .nxu-rmenu { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; max-height: 62dvh; border-radius: 16px 16px 0 0; z-index: 70; transform-origin: bottom center; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); }
  .nxu-rm { min-height: 48px; font-size: 14px; }
  [data-nxu-res] .result-card .rc-btn { width: 44px; height: 44px; }
  [data-nxu-res] .result-card .rc-head { padding: 4px 6px 4px 12px; }
}
/* confirmation discrète (copie, impression…) */
.nxu-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%, 12px); opacity: 0; pointer-events: none; z-index: 900; background: var(--nxu-elev); color: var(--nxu-txt); border: 1px solid var(--nxu-line); border-radius: 99px; padding: 9px 16px; font-size: 13px; box-shadow: var(--nxu-sh3); transition: opacity var(--nxu-mid), transform var(--nxu-mid) var(--nxu-ease); }
.nxu-toast[data-on] { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 720px) { .result-panel #rpAgrandir, .result-panel .rp-chevron { display: none !important; } }

/* ── 13. TÉLÉPHONE : zones tactiles et pages jusque-là prévues pour l'ordinateur seul ───────────── */
@media (max-width: 720px) {
  /* zones tactiles : 44 px pour les boutons-icônes de commande, 40 px pour les autres contrôles */
  body :is(.btn-icon, .btn-send, .btn-mobile-nav, .mic-btn, .rp-close, .rp-chevron, .bn, .nav-tab-x, .sidebar-toggle, .menu-mobile-btn, .p-settings) { min-width: 44px; min-height: 44px; }
  body :is(.btn, .mini-btn, .bouton, .btn-icone, .chip, .moteur-btn, .rc-btn, .nav-tab, .tab, .rp-tab) { min-height: 40px; }
  body :is(select, input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea) { font-size: 16px; }   /* évite le zoom automatique d'iOS au focus */
  body .nav-tab-x { min-width: 32px; min-height: 32px; }
  /* le composer ne se cache pas sous le clavier : la barre de saisie reste dans la zone visible du viewport dynamique */
  body .input-bar { padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  /* modales : plein écran utile, défilement interne, pied toujours atteignable */
  body .nexus-overlay { padding: 0; align-items: flex-end; }
  body .nexus-overlay .nexus-modal { max-height: 94dvh; border-radius: 18px 18px 0 0; max-width: 100%; }
  body .nexus-overlay.visible .nexus-modal { animation: nxuSheet .3s var(--nxu-ease) both; }
  /* Atelier vectoriel : une seule colonne (la maquette d'abord, puis la génération et les propriétés) */
  body .corps { flex-direction: column !important; overflow-y: auto !important; height: auto !important; min-height: 0; }
  body .corps > .centre { order: 1; min-height: 56dvh; flex: none; }
  body .corps > .gauche { order: 2; width: auto !important; border-right: 0 !important; border-top: 1px solid var(--nxu-line); }
  body .corps > .droite { order: 3; width: auto !important; border-left: 0 !important; border-top: 1px solid var(--nxu-line); }
  body .toile-zone { padding: 12px !important; }
  body header.app { flex-wrap: wrap; gap: 6px; height: auto !important; padding: 8px 12px; }
  body header.app .actions { flex-wrap: wrap; gap: 6px; width: 100%; }
  body header.app .sub { display: none; }
}

/* ── 14. EN-TÊTE DES PAGES D'ATELIER : fond fixe sombre + texte du thème = titre illisible en thème clair (constaté le 09/10/2026) ──
   l'en-tête reprend la surface du thème ; en thème sombre, l'écart avec l'ancien dégradé est de quelques points de luminosité */
body header.app { background: linear-gradient(180deg, color-mix(in srgb, var(--nxu-surf) 94%, #fff), var(--nxu-surf)); }
body header.app .logo, body header.app h1 { color: var(--nxu-txt); }

/* ── 15. MODES CALMS : les pseudo-éléments aussi (le sélecteur * ne les atteint pas) ── */
body[data-theme="confort-lecture"] *::before, body[data-theme="confort-lecture"] *::after,
body[data-theme="dyslexie"] *::before, body[data-theme="dyslexie"] *::after,
body[data-theme="contraste-clair"] *::before, body[data-theme="contraste-clair"] *::after,
body[data-theme="contraste-sombre"] *::before, body[data-theme="contraste-sombre"] *::after,
body[data-theme="contraste-max"] *::before, body[data-theme="contraste-max"] *::after,
body[data-theme="contraste-min"] *::before, body[data-theme="contraste-min"] *::after { animation: none !important; transition: none !important; }

/* ── 14. STABILITÉ HORIZONTALE (10/10/2026, « ascenseur horizontal / l'interface glisse ») ─────────
   CAUSES MESURÉES : (a) le fil de discussion (#messages.messages-wrap) est en overflow-y:auto, donc son axe X passe
   à « auto » : un mot ou une URL sans coupure, une carte plus large que le fil, ou l'animation d'entrée des messages
   (translateX ±12 px) le font défiler DE CÔTÉ ; (b) les enfants de flex/grid sans min-width:0 (bulle de message,
   options de la carte de questions…) refusent de rétrécir sous leur plus long mot ; (c) sur téléphone, un contenu plus large
   que l'écran fait ÉLARGIR la fenêtre de mise en page : la page se dézoome et se laisse déplacer au doigt.
   RÈGLES : tout le texte peut se couper (overflow-wrap), les cadres de défilement vertical ne défilent jamais de côté,
   la page ne déborde jamais (clip au niveau html ET body), les médias ne dépassent pas leur cadre. Les cadres qui DOIVENT
   défiler de côté (Kanban, Gantt, onglets, frises, tableaux, code) gardent leur propre overflow-x:auto : rien ici ne les touche.
   :where() = spécificité nulle quand une règle propre à une page doit gagner. */
html { overflow-x: hidden; overflow-x: clip; max-width: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overscroll-behavior-x: none; }
html body { overflow-x: hidden; overflow-x: clip; max-width: 100%; overflow-wrap: break-word; overscroll-behavior-x: none; }
:where(p, li, h1, h2, h3, h4, h5, h6, td, th, blockquote, figcaption, dt, dd, summary, .wrap, .main, .contenu, .section, .card, .carte, .intro) { min-width: 0; }
/* (pas de min-width:0 general sur div/span : il ecraserait les onglets et pastilles en nowrap, mesure sur /studio) */
:where(p, li, h1, h2, h3, h4, h5, h6, td, th, label, summary, dd, dt, figcaption, blockquote, a, code, span, strong, em, b, small, .titre, .nom, .etiquette, .sous-titre, .intro) { overflow-wrap: anywhere; }
:where(img, video, canvas, iframe, embed, object) { max-width: 100%; }
:where(img, video) { height: auto; }
:where(svg) { max-width: 100%; }
:where(pre) { max-width: 100%; overflow-x: auto; }
:where(table) { max-width: 100%; }
/* le fil, les listes et les panneaux défilent en hauteur seulement */
body :is(.messages-wrap, .sidebar-scroll, .chat-zone, .result-panel, .result-body, .fil, .atelier-chat, .chat-zone-etu) { overflow-x: hidden; min-width: 0; }
body .messages-wrap { overscroll-behavior: contain; touch-action: pan-y pinch-zoom; scrollbar-gutter: stable; }
body .sidebar-scroll { overscroll-behavior: contain; }
body .msg { min-width: 0; max-width: 100%; box-sizing: border-box; }
body .msg-bubble { min-width: 0; overflow-wrap: anywhere; }
body .msg-bubble :is(pre, table) { max-width: 100%; overflow-x: auto; }
body .msg-bubble :is(img, video, svg, iframe) { max-width: 100%; }
body .history-item, body .tool-item { min-width: 0; overflow-wrap: anywhere; }
body .result-card { min-width: 0; max-width: 100%; }
body .result-card .rc-body { min-width: 0; max-width: 100%; overflow-x: auto; overflow-wrap: anywhere; }
body .result-card .rc-body :is(img, video, svg, iframe, canvas) { max-width: 100%; }
body .rc-titre, body .nxu-rsel-txt { min-width: 0; overflow-wrap: anywhere; }
/* carte de questions (nexus-cartes.js) : les options ne repoussent plus la carte */
html body :is(.nxcq-carte, .nxcq-corps, .nxcq-q, .nxcq-opt, .nxcq-opt > *, .nxcq-pied) { min-width: 0; max-width: 100%; }
html body :is(.nxcq-ctx, .nxcq-int, .nxcq-lib, .nxcq-pq, .nxcq-aide, .nxcq-rep, .nxcq-ancre, .nxcq-manque, .nxcq-titre) { overflow-wrap: anywhere; }
html body .nxcq-corps { overflow-x: hidden; }
html body #nxcq-voile { width: 100%; max-width: 100%; right: auto; }
/* bandeaux et avis fixes : bornés à la fenêtre visible (pas à 100vw, qui compte l'ascenseur vertical sur PC) */
html body :is(#nxcq-avis, #nxrp-avis) { width: min(440px, calc(100% - 32px)); }
html body :is(#nx-pnav, #nx-transp-panneau) { max-width: 100%; }
/* onglets Tâches : les cartes et leurs titres se coupent */
html body :is([class^="nxtf-"], [class*=" nxtf-"]) { min-width: 0; overflow-wrap: anywhere; }
/* pages : le contenu central ne dépasse jamais sa colonne */
body :is(.wrap, .main, .contenu, .section, .card, .carte, .entete) { max-width: 100%; box-sizing: border-box; }
/* Saisie sans zoom automatique sur ecran tactile, a toute largeur (iPhone en paysage = 844 px, tablettes) : iOS zoome des qu'un champ < 16 px prend le focus,
   la page reste alors dezoomee et deplacable au doigt. La regle <= 720 px de la section 13 est conservee ; celle-ci couvre le reste des ecrans tactiles. */
@media (hover: none) and (pointer: coarse) {
  body :is(select, input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), textarea) { font-size: max(16px, 1em); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   14. ÉCHELLE DE LECTURE — AGRANDISSEMENT GLOBAL (13/10/2026)
   ═══════════════════════════════════════════════════════════════════════════
   DEMANDE D'ELHADJ : « la taille semble être encore petite [...] la taille ne
   s'applique que sur cette partie, elle ne s'applique pas dans tout Nexus [...]
   augmente la taille, mais tout, à la fois. »

   POURQUOI ICI, ET POURQUOI AINSI : les pages de Nexus portent 583 tailles de
   police écrites en dur (223 dans la page principale, 204 dans l'espace étudiant,
   118 dans les projets, 38 dans l'admin). Les corriger une par une serait long et
   fragile. Cette feuille est chargée par pageHtml() sur TOUTES les pages : c'est
   donc LE seul endroit qui parle à tout Nexus à la fois.

   COMMENT : on passe par la racine <html> et l'unité « rem », qui dépend d'elle.
   Tout ce qui est écrit en rem grandit d'un coup — c'est le cas des textes du fil,
   des cartes, des menus et des pages. Les textes écrits en pixels gardent leur
   taille : c'est VOULU, ils sont peu nombreux et servent de repères de mise en page
   (bordures, pastilles, hauteurs de barre) ; les grossir casserait les alignements.

   MESURE (éléments réellement agrandis, vérifiés dans le navigateur) :
   · le texte des messages        : 16,2 px → 18 px
   · les champs de saisie         : 15,5 px → 17,2 px
   · les cartes d'accueil         : +11 %
   Et le réglage personnel du client (Paramètres ▸ Apparence ▸ Taille du texte)
   reste par-dessus, avec ses quatre positions.
   ═══════════════════════════════════════════════════════════════════════════ */

html {
  /* Repère de lecture. Tout ce qui est en rem suit ce nombre. */
  font-size: 18px;
}

/* Le corps de page reprend ce repère : les pages qui ne fixent aucune taille
   héritent donc de la nouvelle échelle, au lieu de retomber sur 16 px. */
body {
  font-size: 1rem;
}

/* Les textes de lecture du fil de conversation : écrits en pixels, ils ne
   suivraient pas la racine — on les nomme explicitement. */
body .msg-bubble { font-size: 1rem; }

/* Le champ où le client écrit : agrandi avec le reste, sans jamais descendre
   sous 16 px (seuil en dessous duquel les téléphones zooment tout seuls). */
body #input, body #saisie, body textarea, body input[type=text] { font-size: max(16px, 1.05rem); }

/* Les cartes d'accueil et leurs titres suivent la nouvelle échelle. */
body .cf-titre { font-size: 1.02rem; }
body .cf-sous  { font-size: 0.86rem; }