/* ============================================================
   MDJLABS — v4 (refonte ergonomique)
   Charge APRÈS tokens / site / v2 / brand / v3.
   - Thème clair adouci « blueprint perle »
   - Sommaire technique sticky + scrollspy
   - Nav : toggle langue + thème
   - Mockups ProLearn vivants (theme-sync)
   - Flux IA × Expert (ligne de production animée)
   - Atome de Connaissance (zoom cerveau→atome→parcours)
   - Accordéons protocole (mobile) + sticky bottom bar
   - Modale micro-CTA
   ============================================================ */

/* =========================================================
   0 — THÈME CLAIR ADOUCI « BLUEPRINT PERLE »
   Moins éblouissant : gris perle cassés, encre anthracite,
   blancs purs supprimés, glows neutralisés.
   ========================================================= */
html[data-theme="light"] {
  --bg-0: #E9ECEE;   /* gris perle cassé (papier technique) */
  --bg-1: #F0F2F3;   /* panneau */
  --bg-2: #F7F8F8;   /* carte (plus de blanc pur) */
  --bg-3: #E0E4E6;   /* carte sélectionnée */
  --bg-4: #D4D9DC;   /* chip / input */

  --line-weak:   rgba(28, 38, 46, 0.06);
  --line:        rgba(28, 38, 46, 0.12);
  --line-strong: rgba(28, 38, 46, 0.20);

  --fg-0:  #1B2228;  /* anthracite foncé */
  --fg-1:  #434C53;
  --fg-2:  #69727A;
  --fg-3:  #98A1A8;
  --fg-inv:#F4F7F8;

  --nav-bg:       rgba(233, 236, 238, 0.74);
  --nav-bg-solid: rgba(236, 239, 241, 0.94);
}
/* Accents encre, légèrement désaturés, contraste AA sur perle */
html[data-theme="light"][data-vert="phosphore"] {
  --acc:#1C8A52; --acc-hi:#23A061; --acc-deep:#0E5C34;
  --acc-glow:rgba(28,138,82,0.13); --acc-soft:rgba(28,138,82,0.06); --acc-line:rgba(28,138,82,0.26);
}
html[data-theme="light"][data-vert="matrix"] {
  --acc:#00813A; --acc-hi:#009C46; --acc-deep:#005826;
  --acc-glow:rgba(0,129,58,0.13); --acc-soft:rgba(0,129,58,0.06); --acc-line:rgba(0,129,58,0.26);
}
/* Produits assombris pour rester lisibles sur perle */
html[data-theme="light"] {
  --pl:#0B8F7A; --pl-glow:rgba(11,143,122,0.13); --pl-soft:rgba(11,143,122,0.06); --pl-line:rgba(11,143,122,0.26);
  --ps:#6A4BD0; --ps-glow:rgba(106,75,208,0.13); --ps-soft:rgba(106,75,208,0.06); --ps-line:rgba(106,75,208,0.26);
  --pf:#9A6A00; --pf-glow:rgba(154,106,0,0.13);  --pf-soft:rgba(154,106,0,0.06);  --pf-line:rgba(154,106,0,0.26);
  --pr:#1268B5; --pr-glow:rgba(18,104,181,0.13); --pr-soft:rgba(18,104,181,0.06); --pr-line:rgba(18,104,181,0.26);
  --prolearn:var(--pl); --prolearn-glow:var(--pl-glow); --prolearn-soft:var(--pl-soft); --prolearn-line:var(--pl-line);
}
/* Glows éteints en clair (anti-éblouissement) */
html[data-theme="light"] .hero-title em,
html[data-theme="light"] .contact h2 em,
html[data-theme="light"] .ia-block h3 em,
html[data-theme="light"] .atome-body h3 em,
html[data-theme="light"] .az-sym,
html[data-theme="light"] .wm[data-p] b { text-shadow: none; }
/* Légère trame blueprint sur le fond clair */
html[data-theme="light"] body {
  background-image:
    linear-gradient(var(--line-weak) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-weak) 1px, transparent 1px);
  background-size: 64px 64px;
  background-attachment: fixed;
}
html[data-theme="light"] .hero-glow,
html[data-theme="light"] .contact-glow { opacity: 0.6; }

/* Transition douce au switch de thème */
body, .nav, .btn, .sol-card, .trust-cell, .dev, .eco-node,
.mk, .flux-station, .modal-card, .rail-list a {
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* =========================================================
   1 — NAV : outils (langue + thème + CTA)
   ========================================================= */
.nav-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }
/* libère la place pour les outils + CTA : on masque l'index nav avant que ça déborde
   (le sommaire sticky desktop prend le relais au-dessus de 1280px) */
@media (max-width: 1100px) { .nav-links { display: none; } }
.lang-btn, .theme-btn {
  font-family: var(--ff-mono);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 999px;
  color: var(--fg-2); height: 32px; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.lang-btn { gap: 5px; padding: 0 12px; font-size: 11px; letter-spacing: 0.08em; }
.lang-btn:hover, .theme-btn:hover { border-color: var(--line-strong); color: var(--fg-0); }
.lang-btn .lang-opt { color: var(--fg-3); transition: color var(--dur-fast) var(--ease); }
.lang-btn .lang-opt.is-on { color: var(--acc); font-weight: 600; }
.lang-btn .lang-sep { color: var(--fg-3); opacity: .6; }
.theme-btn { width: 32px; font-size: 14px; }
.theme-btn .theme-ico { line-height: 1; }

@media (max-width: 760px) {
  .nav-tools { gap: 7px; }
  .lang-btn { padding: 0 9px; height: 30px; }
  .theme-btn { width: 30px; height: 30px; }
  .nav-tools .btn { display: none; } /* le sticky bar prend le relais */
}

/* =========================================================
   2 — SOMMAIRE TECHNIQUE STICKY (carnet de labo)
   ========================================================= */
.rail {
  position: fixed; left: 0; top: 0; height: 100vh; z-index: 40;
  display: none;
  flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 0; padding-left: 22px; width: 230px;
  pointer-events: none;
}
@media (min-width: 1280px) { .rail { display: flex; } }
.rail > * { pointer-events: auto; }
.rail-top {
  position: absolute; top: 78px; left: 22px;
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.04em;
  opacity: .7;
}
.rail-prog {
  position: absolute; left: 24px; top: 50%; transform: translateY(-50%);
  width: 2px; height: 280px; background: var(--line); border-radius: 2px; overflow: hidden;
}
.rail-prog-fill {
  position: absolute; left: 0; top: 0; width: 100%; height: 0%;
  background: var(--acc); box-shadow: 0 0 8px var(--acc-glow);
}
.rail-list { display: flex; flex-direction: column; gap: 2px; padding-left: 18px; }
.rail-list a {
  display: flex; align-items: center; gap: 12px;
  padding: 5px 8px 5px 0; border-radius: var(--r-sm);
  font-family: var(--ff-mono); position: relative;
}
.rail-list a i {
  font-style: normal; font-size: 11px; color: var(--fg-3); letter-spacing: 0.1em;
  width: 18px; transition: color var(--dur-fast) var(--ease);
}
.rail-list a b {
  font-weight: 500; font-size: 12px; letter-spacing: 0.02em; color: var(--fg-2);
  max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
  transform: translateX(-6px);
  transition: max-width var(--dur) var(--ease), opacity var(--dur) var(--ease), transform var(--dur) var(--ease), color var(--dur-fast) var(--ease);
}
.rail:hover .rail-list a b { max-width: 160px; opacity: 1; transform: none; }
.rail-list a:hover i { color: var(--fg-0); }
.rail-list a:hover b { color: var(--fg-0); }
.rail-list a.is-active i { color: var(--acc); }
.rail-list a.is-active b { max-width: 160px; opacity: 1; transform: none; color: var(--fg-0); }
.rail-list a.is-active::before {
  content: ""; position: absolute; left: -18px; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 999px; background: var(--acc);
  box-shadow: 0 0 8px var(--acc);
}
.rail-foot {
  position: absolute; bottom: 78px; left: 22px;
  font-family: var(--ff-mono); font-size: 10px; color: var(--fg-3); letter-spacing: 0.14em;
}

/* =========================================================
   3 — MOCKUPS PROLEARN VIVANTS (theme-sync, dans .dev)
   Remplacent les captures statiques : tout est en tokens,
   donc tout bascule clair/sombre automatiquement.
   ========================================================= */
.mk {
  width: 100%; height: 100%;
  background: var(--bg-1); color: var(--fg-0);
  display: flex; flex-direction: column;
  font-family: var(--ff-sans);
  overflow: hidden;
}
.mk-h, .mk-mob-top, .mk-path-l, .mk-chart-l, .mk-mob-tag {
  font-family: var(--ff-mono); letter-spacing: 0.1em; color: var(--fg-2);
}

/* --- Desktop : tableau de bord stats --- */
.mk-stats { padding: 11px 13px; gap: 9px; }
.mk-top { display: flex; align-items: center; justify-content: space-between; }
.mk-stats .mk-h { font-size: 8.5px; }
.mk-live { font-family: var(--ff-mono); font-size: 8px; letter-spacing: 0.12em; color: var(--acc); display: inline-flex; align-items: center; gap: 5px; }
.mk-live i { width: 5px; height: 5px; border-radius: 999px; background: var(--acc); box-shadow: 0 0 6px var(--acc); animation: mpulse 1.8s var(--ease) infinite; }
.mk-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.mk-kpi {
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-2);
  padding: 8px 9px; display: flex; flex-direction: column; gap: 3px;
}
.mk-kpi .v { font-family: var(--ff-mono); font-weight: 600; font-size: 17px; letter-spacing: -0.03em; color: var(--fg-0); line-height: 1; }
.mk-kpi .v.acc { color: var(--acc); }
.mk-kpi .v small { font-size: 0.55em; color: var(--fg-2); }
.mk-kpi .l { font-family: var(--ff-mono); font-size: 6.5px; letter-spacing: 0.1em; color: var(--fg-3); }
.mk-chart {
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-2);
  padding: 9px 10px 8px; flex: 1; display: flex; flex-direction: column; gap: 6px; min-height: 0;
}
.mk-bars { flex: 1; display: flex; align-items: flex-end; gap: 5px; min-height: 34px; }
.mk-bars i { flex: 1; height: var(--h); background: var(--bg-4); border-radius: 2px 2px 0 0; }
.mk-bars i.on { background: var(--acc); box-shadow: 0 0 8px var(--acc-glow); }
.mk-chart-l { font-size: 6.5px; }
.mk-rows { display: flex; flex-direction: column; gap: 5px; }
.mk-row { display: flex; align-items: center; gap: 7px; }
.mk-av { width: 15px; height: 15px; border-radius: 999px; background: var(--bg-4); color: var(--fg-1); font-family: var(--ff-mono); font-size: 8px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.mk-nm { font-size: 8.5px; color: var(--fg-1); width: 48px; flex: none; white-space: nowrap; }
.mk-track { flex: 1; height: 5px; border-radius: 999px; background: var(--bg-4); overflow: hidden; }
.mk-track b { display: block; height: 100%; width: var(--p); background: var(--acc); border-radius: 999px; }
.mk-pct { font-family: var(--ff-mono); font-size: 8px; color: var(--fg-2); width: 22px; text-align: right; flex: none; }

/* --- Tablette : parcours assemblé d'atomes --- */
.mk-path { padding: 13px 14px; justify-content: center; gap: 13px; align-items: flex-start; }
.mk-path .mk-h { font-size: 9px; }
.mk-chain { display: flex; align-items: center; width: 100%; }
.mk-atom {
  width: 30px; height: 30px; flex: none; border-radius: 999px;
  border: 1.5px solid var(--line-strong); background: var(--bg-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--ff-mono); font-size: 11px; font-weight: 600; color: var(--fg-2);
}
.mk-atom.done { border-color: var(--pl-line); color: var(--pl); background: var(--pl-soft); }
.mk-atom.now { border-color: var(--acc); color: var(--acc); background: var(--acc-soft); box-shadow: 0 0 0 4px var(--acc-soft); }
.mk-link { flex: 1; height: 1.5px; background: var(--pl-line); }
.mk-link.dim { background: var(--line); }
.mk-path-l { font-size: 7.5px; }

/* --- Téléphone : carte atome apprenant --- */
.mk-mob { padding: 11px 10px; gap: 9px; align-items: center; text-align: center; }
.mk-mob-top { font-size: 7.5px; width: 100%; display: flex; align-items: center; justify-content: space-between; }
.mk-mob-top i { width: 5px; height: 5px; border-radius: 999px; background: var(--acc); }
.mk-ring { position: relative; width: 44px; height: 44px; }
.mk-ring svg { width: 44px; height: 44px; transform: rotate(-90deg); }
.mk-ring circle { fill: none; stroke-width: 4; }
.mk-ring .bg { stroke: var(--bg-4); }
.mk-ring .fg { stroke: var(--acc); stroke-linecap: round; stroke-dasharray: 113; stroke-dashoffset: 28; filter: drop-shadow(0 0 4px var(--acc-glow)); }
.mk-ring span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--ff-mono); font-weight: 600; font-size: 14px; color: var(--fg-0); }
.mk-mob-q { font-size: 10px; line-height: 1.35; color: var(--fg-0); font-weight: 500; }
.mk-mob-opts { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.mk-mob-opts span { height: 16px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--bg-2); }
.mk-mob-opts span.ok { border-color: var(--acc); background: var(--acc-soft); color: var(--acc); font-family: var(--ff-mono); font-size: 8.5px; display: flex; align-items: center; justify-content: center; }
.mk-mob-tag { font-size: 6.5px; color: var(--acc); }

/* =========================================================
   4 — ATOME DE CONNAISSANCE (zoom cerveau→atome→parcours)
   ========================================================= */
.atome-v4 { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 64px; align-items: center; }
@media (max-width: 980px) { .atome-v4 { grid-template-columns: 1fr; gap: 44px; } }

.atome-zoom { margin: 0; }
.az-stage {
  position: relative; width: 100%; max-width: 440px; margin: 0 auto;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background:
    radial-gradient(ellipse 60% 60% at 50% 45%, var(--acc-soft), transparent 70%),
    linear-gradient(var(--line-weak) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-weak) 1px, transparent 1px),
    var(--bg-1);
  background-size: auto, 30px 30px, 30px 30px, auto;
  overflow: hidden;
}
.az-layer {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(1.5); transition: opacity .6s var(--ease), transform .8s var(--ease);
  pointer-events: none;
}
.az-layer svg { width: 72%; height: 72%; overflow: visible; }
.az-stage[data-step="0"] .az-brain,
.az-stage[data-step="1"] .az-matter,
.az-stage[data-step="2"] .az-atom,
.az-stage[data-step="3"] .az-path { opacity: 1; transform: scale(1); }
/* couche déjà passée : reste légèrement dézoomée et fondue */
.az-stage[data-step="1"] .az-brain,
.az-stage[data-step="2"] .az-matter,
.az-stage[data-step="3"] .az-atom { opacity: 0; transform: scale(0.55); }

/* cerveau (réseau neuronal stylisé) */
.az-brain .az-disc { fill: none; stroke: var(--line-strong); stroke-width: 1.5; stroke-dasharray: 3 6; }
.az-brain .az-net circle { fill: var(--fg-2); }
.az-brain .az-net line { stroke: var(--line-strong); stroke-width: 1; }
.az-brain .az-net circle:nth-child(5) { fill: var(--acc); }
/* matière / molécule */
.az-matter .az-mol line { stroke: var(--line-strong); stroke-width: 1.5; }
.az-matter .az-mol .m { fill: var(--bg-3); stroke: var(--line-strong); stroke-width: 1.5; }
.az-matter .az-mol .core { fill: var(--acc-soft); stroke: var(--acc); stroke-width: 2; }
/* atome */
.az-atom .az-orbit { fill: none; stroke: var(--acc-line); stroke-width: 1.5; }
.az-atom .az-orbit.o2 { stroke-dasharray: 2 6; }
.az-atom .az-nucleus { fill: var(--acc-soft); stroke: var(--acc); stroke-width: 2; }
.az-atom .az-sym { fill: var(--acc); font-family: var(--ff-mono); font-weight: 600; font-size: 16px; }
.az-atom .az-e { fill: var(--acc); filter: drop-shadow(0 0 5px var(--acc)); }
@media (prefers-reduced-motion: no-preference) {
  .az-stage[data-step="2"] .az-e.e1 { animation: azOrbit1 4s linear infinite; transform-origin: 100px 100px; }
  .az-stage[data-step="2"] .az-e.e2 { animation: azOrbit2 6s linear infinite; transform-origin: 100px 100px; }
}
.az-atom .az-e.e1 { cx: 162px; cy: 100px; }
.az-atom .az-e.e2 { cx: 140px; cy: 100px; }
@keyframes azOrbit1 { to { transform: rotate(360deg); } }
@keyframes azOrbit2 { from { transform: rotate(0); } to { transform: rotate(-360deg); } }
/* parcours (atomes enfilés) */
.az-path .az-thread { fill: none; stroke: var(--acc-line); stroke-width: 2; stroke-dasharray: 4 5; }
.az-path .az-beads circle { fill: var(--bg-3); stroke: var(--pl); stroke-width: 2; }
.az-path .az-beads .hot { fill: var(--acc-soft); stroke: var(--acc); stroke-width: 2.5; }

/* balayage labo dans la scène */
.az-scan {
  position: absolute; left: 0; right: 0; top: 0; height: 30%;
  background: linear-gradient(180deg, transparent, var(--acc-soft));
  opacity: .5; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .az-scan { animation: azScan 6s var(--ease) infinite; }
}
@keyframes azScan { 0%,100% { transform: translateY(-40%); opacity: 0; } 50% { transform: translateY(280%); opacity: .5; } }

.az-steps { display: flex; gap: 6px; margin: 22px auto 0; max-width: 440px; }
.az-tab {
  flex: 1; display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg-1); transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.az-tab i { font-style: normal; font-family: var(--ff-mono); font-size: 9px; color: var(--fg-3); letter-spacing: 0.1em; }
.az-tab span { font-size: 12px; color: var(--fg-2); }
.az-tab:hover { border-color: var(--line-strong); }
.az-tab.is-on { border-color: var(--acc-line); background: var(--acc-soft); }
.az-tab.is-on i { color: var(--acc); }
.az-tab.is-on span { color: var(--fg-0); }
.az-cap {
  max-width: 440px; margin: 14px auto 0;
  font-family: var(--ff-mono); font-size: 10.5px; color: var(--fg-3); letter-spacing: 0.06em;
  text-align: center; text-wrap: pretty; line-height: 1.6;
}

.atome-copy .label { margin-bottom: 16px; color: var(--acc); }
.atome-lead {
  font-size: clamp(18px, 2vw, 23px); font-weight: 500; letter-spacing: -0.02em;
  line-height: 1.4; margin: 0 0 28px; text-wrap: pretty;
}
.atome-lead b { color: var(--acc); font-weight: 600; }
.atome-props { display: flex; flex-direction: column; }
.atome-prop {
  display: grid; grid-template-columns: 30px 1fr; gap: 14px;
  padding: 18px 0; border-top: 1px solid var(--line); align-items: baseline;
}
.atome-prop:last-of-type { border-bottom: 1px solid var(--line); }
.atome-prop .ap-k { font-family: var(--ff-mono); font-size: 13px; color: var(--acc); font-weight: 600; }
.atome-prop h4 { margin: 0 0 5px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.atome-prop p { margin: 0; color: var(--fg-1); font-size: 14px; text-wrap: pretty; }
.atome-why {
  position: relative; margin: 24px 0 26px; padding: 4px 0 4px 26px;
  border-left: 2px solid var(--acc);
  font-size: 15px; line-height: 1.55; color: var(--fg-1); text-wrap: pretty;
}
.atome-why .aw-mark { position: absolute; left: 6px; top: -6px; color: var(--acc); font-size: 22px; font-family: var(--ff-mono); }
.atome-link { font-family: var(--ff-mono); font-size: 13px; color: var(--acc); display: inline-flex; gap: 8px; align-items: center; }
.atome-link:hover { text-shadow: 0 0 14px var(--acc-glow); }

/* étapes synchronisées avec l'animation de l'atome */
.atome-steps { display: flex; flex-direction: column; margin: 8px 0 22px; }
.ascp { display: grid; grid-template-columns: 32px 1fr; gap: 12px; text-align: left; align-items: start; width: 100%;
  padding: 14px 12px; border-top: 1px solid var(--line); background: none;
  opacity: 0.5; transition: opacity var(--dur) var(--ease), background var(--dur) var(--ease); }
.atome-steps .ascp:last-child { border-bottom: 1px solid var(--line); }
.ascp .ascp-k { font-family: var(--ff-mono); font-size: 12px; color: var(--fg-3); padding-top: 2px; }
.ascp .ascp-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ascp .ascp-t b { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg-0); }
.ascp .ascp-t span { color: var(--fg-1); font-size: 13.5px; line-height: 1.5; text-wrap: pretty; }
.ascp:hover { opacity: 0.85; }
.ascp.is-on { opacity: 1; background: linear-gradient(90deg, var(--acc-soft), transparent 82%); }
.ascp.is-on .ascp-k { color: var(--acc); }

/* l'atome comme « pièce » / monnaie du savoir + parcours de pièces */
.az-atom .az-nucleus { filter: drop-shadow(0 0 10px var(--acc-glow)); }
.az-path .az-beads circle { fill: var(--acc-soft); stroke: var(--acc); stroke-width: 2; }
.az-path .az-beads .hot { fill: var(--acc); stroke: var(--acc); }

/* point 4 — courbe dessinée + repères liés aux faits */
.sci-chart .curve-forget, .sci-chart .curve-spaced { transition: stroke-dashoffset 1.7s var(--ease); }
.sci-dots .sci-dot { fill: var(--fg-3); stroke: var(--bg-1); stroke-width: 2; opacity: 0; transition: opacity .3s var(--ease); cursor: pointer; }
.sci-chart.is-drawn .sci-dot { opacity: 1; }
.sci-dot.hot { fill: var(--acc); filter: drop-shadow(0 0 7px var(--acc-glow)); }
.sci-fact { transition: background var(--dur) var(--ease); border-radius: var(--r-sm); }
.sci-fact.hl { background: linear-gradient(90deg, var(--acc-soft), transparent 72%); }
.sci-fact.hl .num { text-shadow: 0 0 16px var(--acc-glow); }

/* =========================================================
   5 — FLUX IA × EXPERT (ligne de production animée)
   ========================================================= */
.flux-wrap { max-width: 1000px; }
.flux-intro {
  font-size: clamp(18px, 2vw, 24px); font-weight: 500; letter-spacing: -0.02em;
  line-height: 1.4; margin: 0 0 52px; max-width: 900px; text-wrap: pretty;
}
.flux-intro b { color: var(--acc); font-weight: 600; }

.flux-line { margin: 0; position: relative; }
.flux-rail {
  position: relative; height: 2px; margin: 0 0 0; background: var(--line);
  border-radius: 2px;
}
.flux-rail-fill {
  position: absolute; left: 0; top: 0; height: 100%; width: 0%;
  background: var(--acc); box-shadow: 0 0 10px var(--acc-glow); border-radius: 2px;
}
.flux-comet {
  position: absolute; top: 50%; left: 0; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 999px; background: var(--acc);
  box-shadow: 0 0 14px 2px var(--acc), 0 0 4px var(--acc-hi);
  opacity: 0;
}
.flux-stations {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  margin-top: -6px;
}
.flux-station {
  position: relative; padding: 26px 18px 22px; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--bg-1);
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.flux-station .fs-dot {
  position: absolute; top: -6px; left: 26px; width: 11px; height: 11px; border-radius: 999px;
  background: var(--bg-4); border: 2px solid var(--bg-0);
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.flux-station .fs-n { font-family: var(--ff-mono); font-size: 11px; color: var(--fg-3); letter-spacing: 0.14em; }
.flux-station h4 { margin: 8px 0 8px; font-size: 17px; font-weight: 600; letter-spacing: -0.02em; }
.flux-station p { margin: 0; color: var(--fg-1); font-size: 13.5px; text-wrap: pretty; }
.flux-station.is-gate { border-style: dashed; border-color: var(--acc-line); }
.flux-station.is-gate .fs-n::after { content: " · POSTE DE CONTRÔLE"; color: var(--acc); }
html[data-lang="en"] .flux-station.is-gate .fs-n::after { content: " · CONTROL GATE"; }
/* état actif (comète qui passe) */
.flux-station.is-active {
  border-color: var(--acc-line); background: var(--bg-2);
  transform: translateY(-3px); box-shadow: 0 18px 40px -26px var(--acc-glow);
}
.flux-station.is-active .fs-dot { background: var(--acc); box-shadow: 0 0 0 3px var(--acc-soft), 0 0 10px var(--acc); }
.flux-station.is-active .fs-n { color: var(--acc); }
.flux-station.is-gate.is-active { background: var(--acc-soft); }
.flux-cap {
  margin-top: 22px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  font-family: var(--ff-mono); font-size: 11px; color: var(--fg-3); letter-spacing: 0.1em;
}
.flux-cap-state { color: var(--acc); }
/* point 5 — sélecteur de cas d'usage */
.flux-cases { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.flux-case { font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--fg-2); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px; background: var(--bg-1); transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.flux-case:hover { border-color: var(--line-strong); color: var(--fg-0); }
.flux-case.is-on { color: var(--fg-inv); background: var(--acc); border-color: var(--acc-line); }
@media (max-width: 860px) {
  .flux-stations { grid-template-columns: 1fr 1fr; gap: 12px; }
  .flux-rail { display: none; }
  .flux-station .fs-dot { display: none; }
}

/* =========================================================
   13 — CARROUSEL GÉNÉRIQUE (méthode, confiance)
   ========================================================= */
.car-ctl { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.car-ticks { display: flex; gap: 6px; flex: 1; }
.car-tick { flex: 1; height: 3px; border-radius: 2px; background: var(--line-strong); position: relative; overflow: hidden; padding: 0; cursor: pointer; }
.car-tick.done { background: var(--acc-line); }
.car-tick .fill { position: absolute; inset: 0; background: var(--acc); transform: scaleX(0); transform-origin: left; }
.car-tick.is-on .fill { animation: carFill var(--d, 4800ms) linear forwards; }
@keyframes carFill { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .car-tick.is-on .fill { animation: none; transform: scaleX(1); } }
.car-arr { width: 32px; height: 32px; border-radius: 999px; border: 1px solid var(--line); color: var(--fg-2); font-family: var(--ff-mono); font-size: 14px; display: inline-flex; align-items: center; justify-content: center; flex: none; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.car-arr:hover { color: var(--acc); border-color: var(--acc-line); }
.car-count { font-family: var(--ff-mono); font-size: 11px; color: var(--fg-3); letter-spacing: 0.14em; flex: none; }
@keyframes carIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* méthode : 7 étapes en carrousel */
.proto.is-car { display: block; }
.proto.is-car .proto-step { display: none; border: 1px solid var(--line); border-radius: var(--r-md); padding: 36px 34px; background: linear-gradient(120deg, var(--bg-1), transparent 72%); }
.proto.is-car .proto-step:last-child { border-bottom: 1px solid var(--line); }
.proto.is-car .proto-step.is-on { display: grid; animation: carIn .5s var(--ease); }
.proto.is-car .proto-step:hover { background: linear-gradient(120deg, var(--bg-1), transparent 72%); }
.proto.is-car .proto-toggle { display: none; }
.proto.is-car .proto-step .how { max-height: none; opacity: 1; padding: 0; margin: 0; max-width: 58ch; }
@media (max-width: 760px) { .proto.is-car .proto-step.is-on { grid-template-columns: 1fr; gap: 12px; padding: 26px 22px; } }

/* confiance : cellules en carrousel */
.trust-grid.is-car { display: block; background: none; border: 0; }
.trust-grid.is-car .trust-cell { display: none; border: 1px solid var(--line); border-radius: var(--r-md); padding: 36px 34px; }
.trust-grid.is-car .trust-cell.is-on { display: block; animation: carIn .5s var(--ease); }
.trust-grid.is-car .trust-cell h4 { font-size: clamp(20px, 2.4vw, 26px); margin: 14px 0 10px; }
.trust-grid.is-car .trust-cell p { font-size: 15px; max-width: 60ch; }

/* point 8 — colonne gauche : image + prise de parole (équilibre) */
.founder-left { display: flex; flex-direction: column; gap: 22px; align-self: start; }
.founder-left .say { margin: 0; }
.founder-left .say-bubble { border-left-width: 1px; border-top: 2px solid var(--acc); border-radius: var(--r-md); }
.founder-left .say-bubble::before { left: 34px; top: -8px; border-left: 1px solid var(--line-strong); border-bottom: none; border-top: 1px solid var(--line-strong); }
.founder-left .say-tag { margin-left: 0; }
@media (max-width: 460px) { .flux-stations { grid-template-columns: 1fr; } }

/* =========================================================
   6 — PROTOCOLE : accordéons (mobile) / table (desktop)
   ========================================================= */
.proto-toggle { display: none; }
@media (max-width: 760px) {
  .proto-step {
    grid-template-columns: 1fr auto; gap: 10px 16px; align-items: center;
    padding: 0; border-top: 1px solid var(--line);
  }
  .proto-step .stepnum { grid-column: 1; grid-row: 1; padding: 18px 0 18px; }
  .proto-step h3 { grid-column: 1; grid-row: 2; padding-bottom: 18px; }
  .proto-toggle {
    grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--ff-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--fg-2);
    border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 11px;
    align-self: center;
  }
  .proto-toggle .pt-plus { color: var(--acc); }
  .proto-step .how {
    grid-column: 1 / -1; grid-row: 3; max-width: none;
    max-height: 0; overflow: hidden; opacity: 0; margin: 0;
    transition: max-height var(--dur-slow) var(--ease), opacity var(--dur) var(--ease), padding var(--dur) var(--ease);
  }
  .proto-step.is-open { background: linear-gradient(90deg, var(--bg-1), transparent 80%); }
  .proto-step.is-open .how { max-height: 320px; opacity: 1; padding: 0 0 22px; }
  .proto-step.is-open .proto-toggle .pt-plus { content: ""; }
  .proto-step:hover { background: none; }
  .proto-step.is-open:hover { background: linear-gradient(90deg, var(--bg-1), transparent 80%); }
}

/* =========================================================
   7 — STICKY BOTTOM BAR (mobile)
   ========================================================= */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: none; align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 16px calc(11px + env(safe-area-inset-bottom));
  background: var(--nav-bg-solid); backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  transform: translateY(110%); transition: transform var(--dur-slow) var(--ease);
}
.sticky-cta.is-on { transform: none; }
.sticky-cta .sc-txt { font-family: var(--ff-mono); font-size: 11px; color: var(--fg-1); letter-spacing: 0.06em; display: inline-flex; align-items: center; gap: 9px; }
.sticky-cta .sc-txt .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--acc); box-shadow: 0 0 8px var(--acc); animation: mpulse 2s var(--ease) infinite; }
.sticky-cta .btn { flex: none; }
@media (max-width: 760px) { .sticky-cta { display: flex; } }
/* le canvas fx ne doit pas masquer le sticky bar */
@media (max-width: 760px) { body { padding-bottom: 0; } }

/* =========================================================
   8 — MODALE MICRO-CTA (capture email)
   ========================================================= */
.modal {
  position: fixed; inset: 0; z-index: 120;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease);
}
.modal.is-open { opacity: 1; pointer-events: auto; }
.modal-backdrop {
  position: absolute; inset: 0; background: rgba(4,4,6,0.72); backdrop-filter: blur(4px);
}
html[data-theme="light"] .modal-backdrop { background: rgba(20,28,24,0.42); }
.modal-card {
  position: relative; width: min(440px, 100%);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background:
    radial-gradient(600px 220px at 0% 0%, var(--acc-soft), transparent 70%),
    var(--bg-1);
  padding: 30px 30px 26px;
  box-shadow: 0 40px 100px -30px rgba(0,0,0,0.7);
  transform: translateY(14px) scale(.98); transition: transform var(--dur-slow) var(--ease);
}
.modal.is-open .modal-card { transform: none; }
.modal-x {
  position: absolute; top: 14px; right: 14px; width: 30px; height: 30px;
  border: 1px solid var(--line); border-radius: 999px; color: var(--fg-2); font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center;
}
.modal-x:hover { color: var(--fg-0); border-color: var(--line-strong); }
.modal-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--acc);
  margin-bottom: 16px;
}
.modal-eyebrow i { width: 6px; height: 6px; border-radius: 999px; background: var(--acc); box-shadow: 0 0 8px var(--acc); animation: mpulse 1.8s var(--ease) infinite; }
.modal-card h3 { margin: 0 0 10px; font-size: clamp(24px, 3vw, 30px); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; }
.modal-sub { margin: 0 0 22px; color: var(--fg-1); font-size: 14.5px; text-wrap: pretty; }
.modal-form { display: flex; gap: 10px; flex-wrap: wrap; }
.modal-form input {
  flex: 1; min-width: 0;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 13px 14px; font-size: 15px; color: var(--fg-0);
}
.modal-form input::placeholder { color: var(--fg-3); }
.modal-form input:focus { border-color: var(--acc-line); outline: none; background: var(--bg-2); }
.modal-form .btn { flex: none; }
.modal-ok {
  display: none; margin-top: 16px;
  border: 1px solid var(--acc-line); border-radius: var(--r-sm); background: var(--acc-soft);
  color: var(--acc-hi); font-family: var(--ff-mono); font-size: 12.5px; letter-spacing: 0.04em;
  padding: 12px 14px;
}
.modal.is-sent .modal-ok { display: block; }
.modal.is-sent .modal-form { display: none; }
.modal-long {
  display: inline-block; margin-top: 18px;
  font-family: var(--ff-mono); font-size: 11.5px; color: var(--fg-2); letter-spacing: 0.04em;
}
.modal-long:hover { color: var(--acc); }
.modal.is-sent .modal-long { margin-top: 14px; }

/* =========================================================
   9 — Constellation « vivante » additionnelle (canvas v4)
   ========================================================= */
.mdj-fx-net {
  position: fixed; inset: 0; z-index: 38; pointer-events: none;
  opacity: 0.5;
}
html[data-theme="light"] .mdj-fx-net { mix-blend-mode: multiply; opacity: 0.55; }

/* =========================================================
   10 — divers responsive
   ========================================================= */
@media (max-width: 980px) {
  .flux-intro { margin-bottom: 36px; }
}
@media (max-width: 760px) {
  .atome-v4 { gap: 36px; }
  .az-steps { flex-wrap: wrap; }
  .az-tab { flex: 1 1 40%; }
}

/* =========================================================
   11 — ASSISTANT TERMINAL DU LABO (mascotte ASCII)
   Widget flottant bas-gauche. Réduit = orbe mascotte.
   ========================================================= */
.term { position: fixed; left: 18px; bottom: 18px; z-index: 95; font-family: var(--ff-mono); }
@media (max-width: 760px) { .term { display: none; } }

/* --- état réduit : orbe avec la frimousse --- */
.term-orb {
  position: relative; width: 58px; height: 58px; border-radius: 16px;
  border: 1px solid var(--acc-line); background: var(--bg-1);
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 16px 40px -18px var(--acc-glow), 0 0 0 1px var(--line);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.term.is-collapsed .term-orb { display: inline-flex; }
.term.is-collapsed .term-panel { display: none; }
.term-orb:hover { transform: translateY(-2px); border-color: var(--acc); }
.term-orb-face { margin: 0; font-size: 10px; line-height: 1.04; color: var(--acc); white-space: pre; }
.term-orb-badge {
  position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; background: var(--acc); color: var(--fg-inv);
  font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 10px var(--acc-glow);
}
.term.has-unread .term-orb { animation: termPulse 1.5s var(--ease) infinite; }
@keyframes termPulse {
  0%, 100% { box-shadow: 0 16px 40px -18px var(--acc-glow), 0 0 0 1px var(--line); }
  50% { box-shadow: 0 0 0 5px var(--acc-soft), 0 16px 40px -18px var(--acc-glow); }
}

/* --- état ouvert : panneau terminal --- */
.term-panel {
  width: 322px; max-width: calc(100vw - 36px);
  border: 1px solid var(--line-strong); border-radius: var(--r-md); overflow: hidden;
  background: radial-gradient(440px 160px at 0% 0%, var(--acc-soft), transparent 70%), var(--bg-1);
  box-shadow: 0 34px 90px -34px rgba(0,0,0,0.7);
  animation: termIn .32s var(--ease) both;
}
@keyframes termIn { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .term-panel { animation: none; } }
.term-head {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-bottom: 1px solid var(--line); background: var(--bg-2);
}
.term-dots { display: inline-flex; gap: 4px; }
.term-dots i { width: 7px; height: 7px; border-radius: 999px; background: var(--bg-4); }
.term-dots i:first-child { background: var(--acc); }
.term-title { font-size: 10px; letter-spacing: 0.1em; color: var(--fg-2); }
.term-min { margin-left: auto; width: 22px; height: 22px; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--fg-2); font-size: 12px; line-height: 1; }
.term-min:hover { color: var(--fg-0); border-color: var(--line-strong); }
.term-mascot { margin: 0; padding: 12px 12px 2px; font-size: 12px; line-height: 1.16; color: var(--acc); white-space: pre; }
.term-body {
  padding: 4px 12px 8px; max-height: 192px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 5px; font-size: 12px;
}
.term-line { color: var(--fg-1); line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.term-line .pfx { color: var(--fg-3); }
.term-line.sys .pfx { color: var(--acc); }
.term-line.ask { color: var(--fg-0); }
.term-line .hl { color: var(--acc); }
.term-line.tip { color: var(--fg-2); }
.term-act { color: var(--acc); cursor: pointer; border-bottom: 1px dashed var(--acc-line); }
.term-act:hover { background: var(--acc-soft); }
.term-choices { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 12px 12px; }
.term-choices:empty { display: none; }
.term-choice {
  font-size: 11px; letter-spacing: 0.02em; color: var(--fg-1);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 6px 9px; background: var(--bg-2);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.term-choice:hover { border-color: var(--acc-line); color: var(--acc); background: var(--acc-soft); }

/* =========================================================
   12 — COMPAGNON DE LABO DANS LA TOPBAR (remplace le widget)
   Mini-console horizontale (≤6 lignes), mascotte partielle
   très expressive, saisie type REPL, repli au scroll.
   ========================================================= */
.term { display: none !important; } /* ancien widget flottant désactivé */

.nav { height: 60px; align-items: center; gap: 16px; }
.hero { padding-top: 116px; }

/* ---- dock terminal fixe (bas-droite, ~2/3 de large) ---- */
.term-dock { position: fixed; right: 16px; bottom: 16px; z-index: 95; width: 66vw; max-width: 920px; }
@media (max-width: 760px) { .term-dock { display: none; } }
html[data-theme="light"] .term-dock .nav-term { box-shadow: 0 24px 60px -30px rgba(20,30,18,0.28); }

.nav-term {
  width: 100%; min-width: 0;
  display: grid; grid-template-columns: 50px minmax(0, 1fr) 178px; gap: 14px; align-items: center;
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: radial-gradient(520px 140px at 0% 0%, var(--acc-soft), transparent 70%), var(--bg-1);
  box-shadow: 0 30px 80px -34px rgba(0,0,0,0.7);
  padding: 8px 14px; overflow: hidden;
  transition: border-color var(--dur) var(--ease);
}
@media (max-width: 900px) { .nav-term { grid-template-columns: 44px minmax(0, 1fr) 150px; gap: 10px; } }

/* ---- contrôles d'affichage relocalisés dans la topbar ---- */
.nav .mdj-controls { position: static; right: auto; bottom: auto; background: none; border: 0; padding: 0; backdrop-filter: none; box-shadow: none; }
.nav .mdj-controls .lbl-aff, .nav .mdj-controls .maq { display: none; }
.mdj-controls .sw[data-vert="rouge"] { background: #FF7E7E; }

/* ---- accent rouge pastel (remplace le vert matrix) ---- */
html[data-vert="rouge"] {
  --acc: #FF7E7E; --acc-hi: #FFA6A6; --acc-deep: #C2504F;
  --acc-glow: rgba(255,126,126,0.20); --acc-soft: rgba(255,126,126,0.08); --acc-line: rgba(255,126,126,0.32);
}
html[data-theme="light"][data-vert="rouge"] {
  --acc: #B23A38; --acc-hi: #C24A45; --acc-deep: #7E2522;
  --acc-glow: rgba(178,58,56,0.14); --acc-soft: rgba(178,58,56,0.06); --acc-line: rgba(178,58,56,0.28);
}

/* ---- carrousel : hauteur adaptative (anti-débordement + anti-vide mobile) ---- */
.hero-title { font-size: clamp(38px, 6.6vw, 92px); }
.hero-title.sm { font-size: clamp(32px, 4.4vw, 62px); }
.hcar { min-height: 0; height: auto; transition: height .42s var(--ease); }
.hcar-slide { bottom: auto; }
.nav-term:focus-within { border-color: var(--acc-line); }
/* terminal réductible : ne montrer que le compagnon */
.nt-face { cursor: pointer; }
.nt-face:hover { color: var(--acc-hi); }
.term-dock.is-min { width: auto; }
.term-dock.is-min .nt-main, .term-dock.is-min .nt-info { display: none; }
.term-dock.is-min .nav-term { grid-template-columns: auto; padding: 9px 12px; }
.term-dock.is-min .nt-face { border-right: 0; padding-right: 0; }
.term-dock.is-min .nav-term::after { content: "›_"; align-self: center; margin-left: 8px; color: var(--fg-3); font-family: var(--ff-mono); font-size: 12px; }
@media (max-width: 760px) { .nav-term { display: none; } }

/* mascotte : grille FIGÉE 5×3 — chaque glyphe dans sa cellule, jamais de décalage */
.nt-face {
  align-self: center; margin: 0; color: var(--acc);
  font-family: var(--ff-mono); font-weight: 700; font-size: 13px;
  display: grid; grid-template-columns: repeat(5, 0.74em); grid-auto-rows: 0.82em;
  justify-items: center; align-items: center; line-height: 1;
  filter: drop-shadow(0 0 7px var(--acc-glow));
  padding-left: 4px;
}
.nt-face span { display: flex; align-items: center; justify-content: center; pointer-events: none; }
.nt-main { display: flex; flex-direction: column; min-width: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); padding-left: 12px; padding-right: 12px; }
.nt-screen {
  font-family: var(--ff-mono); font-size: 11px; line-height: 1.5;
  display: flex; flex-direction: column; gap: 0;
  max-height: 33px; overflow: hidden;            /* exactement 2 lignes, sans chevauchement */
}
.nt-line { color: var(--fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nt-line .pfx { color: var(--fg-3); }
.nt-line.sys .pfx { color: var(--acc); }
.nt-line .hl { color: var(--acc); }
.nt-line.tip { color: var(--fg-2); }
.nt-line.me { color: var(--fg-0); }
.nt-line.me .pfx { color: var(--acc); }
.nt-act { color: var(--acc); cursor: pointer; border-bottom: 1px dashed var(--acc-line); }
.nt-act:hover { background: var(--acc-soft); }

.nt-input-row { display: flex; align-items: center; gap: 7px; margin-top: 5px; border-top: 1px solid var(--line-weak); padding-top: 5px; }
.nt-prompt { font-family: var(--ff-mono); font-size: 12px; color: var(--acc); }
.nt-input { flex: 1; min-width: 0; background: none; border: 0; outline: none; padding: 0; font-family: var(--ff-mono); font-size: 11.5px; color: var(--fg-0); }
.nt-input::placeholder { color: var(--fg-3); }
.nt-hint { font-family: var(--ff-mono); font-size: 9px; letter-spacing: 0.12em; color: var(--fg-3); white-space: nowrap; }
@media (max-width: 1120px) { .nt-hint { display: none; } }

/* choix profil : chips, s'étalent sur 2 colonnes si la largeur le permet */
.nt-choices { display: none; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.nav-term.asking .nt-choices { display: flex; }
.nav-term.asking .nt-input-row { display: none; }
.nt-choice {
  font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: 0.02em; color: var(--fg-1);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px 9px; background: var(--bg-2);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.nt-choice:hover { border-color: var(--acc-line); color: var(--acc); background: var(--acc-soft); }

/* colonne d'infos personnalisées (à droite du terminal) */
.nt-info {
  align-self: stretch; display: flex; flex-direction: column; justify-content: center; gap: 3px;
  min-width: 0;
}
.ni-row { display: flex; align-items: baseline; gap: 8px; font-family: var(--ff-mono); min-width: 0; }
.ni-row i { font-style: normal; font-size: 8.5px; letter-spacing: 0.12em; color: var(--fg-3); width: 54px; flex: none; }
.ni-row b { font-weight: 500; font-size: 11px; letter-spacing: 0.01em; color: var(--fg-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ni-row b.on { color: var(--acc); }
.ni-cta { margin-top: 2px; font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--acc); border-bottom: 1px dashed var(--acc-line); width: fit-content; cursor: pointer; }
.ni-cta:hover { background: var(--acc-soft); }

/* éléments interrogeables : petit curseur d'aide */
.is-askable { cursor: help; }

/* ---- bouton mobile : ouvre le compagnon en boîte de dialogue ---- */
.nt-mob {
  display: none; align-items: center; justify-content: center;
  height: 30px; padding: 0 11px; border: 1px solid var(--line); border-radius: 999px;
  color: var(--acc); font-family: var(--ff-mono); font-size: 12px; letter-spacing: 0.04em;
  transition: border-color var(--dur-fast) var(--ease);
}
.nt-mob:hover { border-color: var(--acc-line); }
@media (max-width: 760px) { .nt-mob { display: inline-flex; } }

.nt-sheet { position: fixed; inset: 0; z-index: 115; display: flex; align-items: flex-end; justify-content: center; opacity: 0; pointer-events: none; transition: opacity var(--dur) var(--ease); }
.nt-sheet.is-open { opacity: 1; pointer-events: auto; }
.nt-sheet-bd { position: absolute; inset: 0; background: rgba(4,4,6,0.72); backdrop-filter: blur(4px); }
html[data-theme="light"] .nt-sheet-bd { background: rgba(20,28,24,0.42); }
.nt-sheet-card {
  position: relative; width: 100%; max-width: 560px; margin: 0 8px 8px;
  border: 1px solid var(--line-strong); border-radius: var(--r-md) var(--r-md) 0 0;
  background: radial-gradient(520px 160px at 0% 0%, var(--acc-soft), transparent 70%), var(--bg-1);
  box-shadow: 0 -30px 80px -30px rgba(0,0,0,0.7);
  padding: 13px 14px calc(14px + env(safe-area-inset-bottom));
  transform: translateY(14px); transition: transform var(--dur-slow) var(--ease);
}
.nt-sheet.is-open .nt-sheet-card { transform: none; }
.nt-sheet-head { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; font-family: var(--ff-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--fg-2); }
.nt-sheet-x { margin-left: auto; width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 999px; color: var(--fg-2); font-size: 11px; }
.nt-sheet-x:hover { color: var(--fg-0); border-color: var(--line-strong); }
/* le compagnon dans la boîte : pile verticale, infos visibles, plus de lignes */
.nt-sheet .nav-term { display: flex !important; flex-direction: column; align-items: stretch; gap: 11px; max-width: none; border: 0; background: none; padding: 0; }
.nt-sheet .nt-face { border-right: 0; border-bottom: 1px solid var(--line); padding: 0 0 9px; font-size: 16px; line-height: 1.15; }
.nt-sheet .nt-main { border-left: 0; border-right: 0; padding-left: 0; padding-right: 0; }
.nt-sheet .nt-screen { max-height: 168px; font-size: 12px; }
.nt-sheet .nt-input { font-size: 12.5px; }
.nt-sheet .nt-info { display: flex !important; border-left: 0; border-top: 1px solid var(--line); padding: 9px 0 0; flex-direction: row; flex-wrap: wrap; gap: 5px 20px; }
.nt-sheet .nt-info .ni-row i { width: auto; }
.nt-sheet .ni-cta { width: 100%; }

/* ---- Solutions : titres produits cliquables + liens fiche soulignés ---- */
.sol-grid h3 .prod-title-link {
  color: inherit; text-decoration: none; cursor: pointer;
  text-underline-offset: 5px; text-decoration-thickness: 1.5px;
  transition: text-decoration-color var(--dur-fast) var(--ease);
}
.sol-grid h3 .prod-title-link:hover,
.sol-grid h3 .prod-title-link:focus-visible { text-decoration: underline; }
.sol-grid .foot .ref {
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; text-decoration-color: var(--line-strong);
  transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease);
}
.sol-grid .foot .ref:hover { color: var(--fg-1); text-decoration-color: currentColor; }