/* Inter, hébergée avec l’application (aucune requête vers un service tiers) */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../vendor/fonts/Inter-Variable-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(../vendor/fonts/Inter-Variable-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* ==========================================================================
   Unideon — Design system
   Verre dépoli, dégradé cyan → bleu → violet, trame hexagonale.
   Typographie système : SF Pro (Apple), Segoe UI Variable (Windows), Inter.
   ========================================================================== */

/* ------------------------------------------------------------------ Jetons */
:root {
  --bg: #F2F4F9;
  --bg-2: #E9ECF5;
  --card: rgba(255, 255, 255, .72);
  --card-strong: rgba(255, 255, 255, .92);
  --card-hover: rgba(255, 255, 255, .95);
  --card-inset: rgba(15, 23, 42, .035);
  --stroke: rgba(15, 23, 42, .075);
  --stroke-2: rgba(15, 23, 42, .13);
  --text: #0A1020;
  --text-2: #475066;
  --text-3: #858EA4;
  --g1: #0EA5E9;
  --g2: #2563EB;
  --g3: #7C3AED;
  --accent: #2563EB;
  --on-accent: #FFFFFF;
  --good: #059669;
  --warn: #D97706;
  --bad: #DC2626;
  --good-soft: rgba(5, 150, 105, .1);
  --warn-soft: rgba(217, 119, 6, .1);
  --bad-soft: rgba(220, 38, 38, .08);
  --accent-soft: rgba(37, 99, 235, .08);
  --aurora-o: .5;
  --hex-o: .5;
  --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 14px 36px -14px rgba(15, 23, 42, .14);
  --shadow-lg: 0 2px 4px rgba(15, 23, 42, .04), 0 30px 60px -24px rgba(15, 23, 42, .22);
  --nav-bg: rgba(242, 244, 249, .72);
  --menu-bg: #FFFFFF;
  color-scheme: light;

  --grad: linear-gradient(120deg, var(--g1) 0%, var(--g2) 52%, var(--g3) 100%);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI Variable Display", "Segoe UI Variable Text", "Segoe UI", Inter, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.4, .64, 1);
  --r-s: 10px; --r-m: 14px; --r-l: 20px; --r-xl: 28px;
  --blur: saturate(160%) blur(24px);
  --maxw: 1240px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #03050C; --bg-2: #070B16;
    --card: rgba(16, 22, 40, .55); --card-strong: rgba(255, 255, 255, .07); --card-hover: rgba(255, 255, 255, .075);
    --card-inset: rgba(255, 255, 255, .03);
    --stroke: rgba(255, 255, 255, .075); --stroke-2: rgba(255, 255, 255, .14);
    --text: #F2F5FB; --text-2: #A3ADC2; --text-3: #69738C;
    --g1: #22D3EE; --g2: #3B82F6; --g3: #A78BFA;
    --accent: #60A5FA; --on-accent: #FFFFFF;
    --good: #34D399; --warn: #FBBF24; --bad: #F87171;
    --good-soft: rgba(52, 211, 153, .1); --warn-soft: rgba(251, 191, 36, .1); --bad-soft: rgba(248, 113, 113, .1); --accent-soft: rgba(96, 165, 250, .1);
    --aurora-o: 1; --hex-o: 1;
    --shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 20px 50px -24px rgba(0, 0, 0, .8);
    --shadow-lg: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 40px 80px -30px rgba(0, 0, 0, .9);
    --nav-bg: rgba(3, 5, 12, .62);
    --menu-bg: #0B1020;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #03050C; --bg-2: #070B16;
  --card: rgba(16, 22, 40, .55); --card-strong: rgba(255, 255, 255, .07); --card-hover: rgba(255, 255, 255, .075);
  --card-inset: rgba(255, 255, 255, .03);
  --stroke: rgba(255, 255, 255, .075); --stroke-2: rgba(255, 255, 255, .14);
  --text: #F2F5FB; --text-2: #A3ADC2; --text-3: #69738C;
  --g1: #22D3EE; --g2: #3B82F6; --g3: #A78BFA;
  --accent: #60A5FA; --on-accent: #FFFFFF;
  --good: #34D399; --warn: #FBBF24; --bad: #F87171;
  --good-soft: rgba(52, 211, 153, .1); --warn-soft: rgba(251, 191, 36, .1); --bad-soft: rgba(248, 113, 113, .1); --accent-soft: rgba(96, 165, 250, .1);
  --aurora-o: 1; --hex-o: 1;
  --shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 20px 50px -24px rgba(0, 0, 0, .8);
  --shadow-lg: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 40px 80px -30px rgba(0, 0, 0, .9);
  --nav-bg: rgba(3, 5, 12, .62);
  --menu-bg: #0B1020;
  color-scheme: dark;
}

/* ------------------------------------------------------------------ Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 140px; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background: var(--bg); color: var(--text);
  font: 400 15px/1.55 var(--font); letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
/* Aurores et trame hexagonale */
body::before {
  content: ''; position: fixed; inset: -20vmax; z-index: -2; pointer-events: none; opacity: var(--aurora-o);
  background:
    radial-gradient(38vmax 30vmax at 18% 12%, color-mix(in srgb, var(--g1) 22%, transparent), transparent 70%),
    radial-gradient(42vmax 34vmax at 85% 8%, color-mix(in srgb, var(--g3) 20%, transparent), transparent 70%),
    radial-gradient(46vmax 36vmax at 60% 95%, color-mix(in srgb, var(--g2) 16%, transparent), transparent 70%);
  filter: blur(10px);
  animation: aurora 38s ease-in-out infinite alternate;
}
@keyframes aurora { to { transform: translate3d(3vmax, -2vmax, 0) scale(1.06); } }
.theme-shift, .theme-shift * { transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease) !important; }
h1, h2, h3, h4, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: not-allowed; }
input { font: inherit; color: inherit; }
svg { display: block; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
::selection { background: color-mix(in srgb, var(--g2) 30%, transparent); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.tnum { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ Logo */
.logo { display: inline-flex; align-items: center; gap: 12px; }
.logo-word { font-size: 15px; font-weight: 600; letter-spacing: .32em; margin-right: -.32em; color: var(--text); }
.lm-hex { transition: opacity .3s; }
.lm-d3 { opacity: .55; }
.lm-d2 { opacity: .85; }
.lm-accent { opacity: 1; }
/* Animation : assemblage, onde depuis le centre, balayage lumineux */
.lm-anim .lm-hex {
  transform-box: fill-box; transform-origin: center;
  animation: lm-build .9s var(--spring) both, lm-wave 4.2s ease-in-out infinite, lm-sweep 5.6s linear infinite;
  animation-delay: calc(var(--r) * .14s + var(--a) * .3s), calc(1.3s + var(--r) * .38s), calc(1.3s + var(--a) * 5.6s);
}
.lm-anim .lm-accent { animation: lm-build .9s var(--spring) both, lm-wave 4.2s ease-in-out infinite, lm-beacon 2.8s ease-in-out infinite; animation-delay: .5s, calc(1.3s + var(--r) * .38s), 1.4s; }
.lm-core { transform-box: fill-box; transform-origin: center; animation: lm-core 4.2s ease-in-out infinite 1.3s; }
@keyframes lm-build { from { opacity: 0; transform: scale(.1) rotate(-60deg); } }
@keyframes lm-wave { 0%, 100% { transform: scale(.86); } 18% { transform: scale(1.14); } 40% { transform: scale(.94); } }
@keyframes lm-sweep { 0%, 100% { opacity: .38; } 6% { opacity: 1; filter: brightness(1.5); } 24% { opacity: .6; filter: none; } }
@keyframes lm-beacon { 0%, 100% { opacity: .85; filter: none; } 50% { opacity: 1; filter: brightness(1.7) drop-shadow(0 0 3px var(--g1)); } }
@keyframes lm-core { 0%, 100% { opacity: .5; transform: scale(.8); } 18% { opacity: 1; transform: scale(1.5); } }
.lm-hover .lm-hex { transform-box: fill-box; transform-origin: center; }
a:hover .lm-hover .lm-hex, .logo:hover .lm-hover .lm-hex { animation: lm-wave 1.1s ease-in-out both; animation-delay: calc(var(--r) * .1s); }

/* Emblèmes de profil */
.emblem { overflow: visible; }
.em-off { fill: none; stroke: var(--stroke-2); stroke-width: 1; }
.em-on { animation: em-in .6s var(--spring) both; animation-delay: var(--d); transform-box: fill-box; transform-origin: center; }
.em-link { stroke-width: 1.4; opacity: .55; }
@keyframes em-in { from { opacity: 0; transform: scale(.3); } }

/* ------------------------------------------------------------------ Surfaces */
.card {
  position: relative; border-radius: var(--r-xl);
  background: var(--card); border: 1px solid var(--stroke);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow);
}
.card-pad { padding: 28px; }
.card-glow::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, color-mix(in srgb, var(--g1) 70%, transparent), transparent 40%, transparent 60%, color-mix(in srgb, var(--g3) 70%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.card-halo::after {
  content: ''; position: absolute; z-index: -1; inset: 10% 15%; border-radius: 50%;
  background: var(--grad); filter: blur(70px); opacity: .22; pointer-events: none;
}
.kicker { font-size: 13px; font-weight: 600; color: var(--text-3); letter-spacing: 0; }
.h-card { font-size: 19px; font-weight: 650; letter-spacing: -.02em; }
.sub { color: var(--text-2); }
.muted { color: var(--text-3); font-size: 13.5px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; background: var(--card-inset); border: 1px solid var(--stroke); color: var(--text-2); white-space: nowrap;
}
.chip-grad { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 25%, transparent); color: var(--accent); }
.chip-good { background: var(--good-soft); border-color: transparent; color: var(--good); }
.chip-warn { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.chip-bad { background: var(--bad-soft); border-color: transparent; color: var(--bad); }

/* ------------------------------------------------------------------ Boutons */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 22px; border-radius: 999px; white-space: nowrap;
  font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  transition: transform .25s var(--spring), box-shadow .3s var(--ease), background-color .2s, opacity .2s, filter .2s;
}
.btn:active:not(:disabled) { transform: scale(.97); }
.btn-primary {
  color: #fff; background: var(--grad); background-size: 140% 100%; background-position: 0 0;
  box-shadow: 0 10px 28px -10px color-mix(in srgb, var(--g2) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.btn-primary:hover:not(:disabled) { background-position: 100% 0; box-shadow: 0 14px 36px -10px color-mix(in srgb, var(--g3) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3); }
.btn-primary:disabled { opacity: .35; box-shadow: none; filter: saturate(.5); }
.btn-glass { background: var(--card-strong); border: 1px solid var(--stroke); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.btn-glass:hover { background: var(--card-hover); border-color: var(--stroke-2); }
.btn-ghost { color: var(--text-2); padding: 0 14px; }
.btn-ghost:hover { color: var(--text); background: var(--card-inset); }
.btn-sm { height: 36px; padding: 0 14px; font-size: 14px; }
.btn-lg { height: 52px; padding: 0 28px; font-size: 16px; }
.btn-block { width: 100%; }
.icon-btn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 999px; color: var(--text-2); transition: background-color .2s, color .2s; }
.icon-btn:hover { background: var(--card-inset); color: var(--text); }

/* Sélecteur de thème */
.theme-switch { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--card); border: 1px solid var(--stroke); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.theme-switch button { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 999px; color: var(--text-3); transition: all .25s var(--ease); }
.theme-switch button:hover { color: var(--text); }
.theme-switch button[aria-pressed="true"] { color: var(--text); background: var(--card-strong); box-shadow: 0 1px 3px rgba(0, 0, 0, .12), inset 0 0 0 1px var(--stroke); }
.theme-switch .ic { width: 16px; height: 16px; }

/* ==========================================================================
   Connexion
   ========================================================================== */
.field { display: grid; gap: 7px; }
.field-label { font-size: 13px; font-weight: 600; color: var(--text-2); }
.field-control { position: relative; display: block; }
.field input {
  width: 100%; height: 50px; padding: 0 16px; border-radius: var(--r-m);
  background: var(--card-inset); border: 1px solid var(--stroke-2); transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.field input:focus { outline: none; border-color: var(--accent); background: var(--card-strong); box-shadow: 0 0 0 4px var(--accent-soft); }
.field input[name="password"] { padding-right: 48px; }
.field-eye { position: absolute; right: 6px; top: 50%; translate: 0 -50%; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: var(--text-3); }
.field-eye:hover { color: var(--text); }
.field-help { font-size: 12.5px; color: var(--text-3); }
.fineprint { margin-top: 22px; font-size: 12.5px; color: var(--text-3); text-align: center; }
.shake { animation: shake .45s var(--ease); }
@keyframes shake { 20% { transform: translateX(-7px); } 45% { transform: translateX(6px); } 70% { transform: translateX(-3px); } }

/* ==========================================================================
   Diagnostic
   ========================================================================== */
.ob { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); }
.ob > * { min-width: 0; }
.ob-head { position: sticky; top: 0; z-index: 10; background: var(--nav-bg); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border-bottom: 1px solid var(--stroke); }
.ob-head-in { max-width: var(--maxw); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 28px; }
.ob-head-end { display: flex; align-items: center; gap: 10px; }
.ob-count { font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.ob-bar { height: 3px; background: var(--stroke); }
.ob-bar i { display: block; height: 100%; background: var(--grad); box-shadow: 0 0 12px color-mix(in srgb, var(--g2) 70%, transparent); transition: width .6s var(--ease); }
.ob-secs { max-width: var(--maxw); margin: 0 auto; display: flex; gap: 6px; padding: 10px 28px 12px; overflow-x: auto; scrollbar-width: none; }
.ob-secs::-webkit-scrollbar { display: none; }
.ob-sec { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--text-3); white-space: nowrap; transition: all .3s var(--ease); }
.ob-sec b { width: 18px; height: 18px; display: grid; place-items: center; border-radius: 999px; font-size: 10.5px; background: var(--card-inset); border: 1px solid var(--stroke); }
.ob-sec.is-done { color: var(--text-2); }
.ob-sec.is-done b { background: var(--grad); color: #fff; border: 0; }
.ob-sec.is-current { color: var(--text); background: var(--card-strong); box-shadow: inset 0 0 0 1px var(--stroke); }
.ob-sec.is-current b { border-color: var(--accent); color: var(--accent); }

.ob-stage { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; padding: 28px 24px 24px; }
.ob-step { width: 100%; max-width: 860px; margin: 0 auto; }
.in-next { animation: in-next .55s var(--ease) both; }
.in-prev { animation: in-prev .55s var(--ease) both; }
@keyframes in-next { from { opacity: 0; transform: translate3d(32px, 0, 0) scale(.99); filter: blur(4px); } }
@keyframes in-prev { from { opacity: 0; transform: translate3d(-32px, 0, 0) scale(.99); filter: blur(4px); } }
.ob-foot { position: sticky; bottom: 0; z-index: 10; padding: 16px 24px 22px; background: linear-gradient(to top, var(--bg) 55%, transparent); }
.ob-foot-in { max-width: 860px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; }
.ob-kbd { text-align: center; font-size: 12.5px; color: var(--text-3); }
kbd { font: 600 11px/1 var(--mono); padding: 3px 6px; border-radius: 6px; background: var(--card-inset); border: 1px solid var(--stroke-2); color: var(--text-2); }

/* Accueil du diagnostic */
.welcome { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center; }
.welcome-art { position: relative; aspect-ratio: 1; max-width: 360px; justify-self: center; width: 100%; }
.welcome-art .logo-mark { width: 100%; height: 100%; }
.welcome-art::after { content: ''; position: absolute; inset: 25%; border-radius: 50%; background: var(--grad); filter: blur(60px); opacity: .3; z-index: -1; }
.welcome h1 { font-size: clamp(36px, 4.6vw, 56px); line-height: 1.02; font-weight: 700; letter-spacing: -.045em; }
.welcome .lead { margin-top: 18px; font-size: 17px; color: var(--text-2); line-height: 1.55; }
.plan { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.plan li { display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--r-m); background: var(--card); border: 1px solid var(--stroke); font-size: 14px; font-weight: 600; }
.plan li b { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--accent-soft); color: var(--accent); font-size: 12px; }
.plan li span { margin-left: auto; font-weight: 500; font-size: 12.5px; color: var(--text-3); }
.note { margin-top: 18px; font-size: 13.5px; color: var(--text-3); }

/* Intercalaire de section */
.sec-intro { text-align: center; max-width: 620px; margin: 0 auto; }
.sec-num { display: inline-block; font-size: clamp(110px, 16vw, 180px); font-weight: 700; line-height: .8; letter-spacing: -.07em; }
.sec-intro h1 { margin-top: 24px; font-size: clamp(32px, 4vw, 46px); font-weight: 700; letter-spacing: -.04em; }
.sec-intro p { margin-top: 16px; font-size: 17px; color: var(--text-2); line-height: 1.6; }
.sec-intro .chip { margin-top: 22px; }

/* Question */
.q-card { padding: clamp(22px, 3.2vw, 36px); }
.q-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.q-top .q-sec { font-size: 13px; font-weight: 600; color: var(--accent); }
.q-top .q-n { font-size: 13px; color: var(--text-3); }
.q-ctx { margin-bottom: 22px; padding: 16px 18px; border-radius: var(--r-l); background: var(--card-inset); border: 1px solid var(--stroke); display: flex; gap: 14px; align-items: flex-start; }
.q-ctx-ic { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--grad); color: #fff; }
.q-ctx-ic .ic { width: 16px; height: 16px; }
.q-ctx p { font-size: 16px; line-height: 1.5; padding-top: 4px; }
.q-title { font-size: clamp(23px, 2.6vw, 31px); line-height: 1.18; font-weight: 700; letter-spacing: -.03em; text-wrap: balance; }
.q-hint { margin-top: 10px; color: var(--text-2); font-size: 15px; }
.q-body { margin-top: 22px; }
.q-meta { margin-top: 12px; font-size: 13px; color: var(--text-3); }

/* Pièces à examiner */
.exhibit { margin-bottom: 22px; border-radius: var(--r-l); overflow: hidden; border: 1px solid var(--stroke); background: var(--card-inset); }
.exhibit-head { display: flex; align-items: center; gap: 8px; padding: 10px 16px; font-size: 12.5px; font-weight: 600; color: var(--text-2); border-bottom: 1px solid var(--stroke); }
.exhibit-head .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--grad); }
.exhibit-body { padding: 16px 18px; font-size: 15.5px; line-height: 1.6; }
.exhibit-prompt .exhibit-body { font-family: var(--mono); font-size: 14px; }
.exhibit-answer .exhibit-body { position: relative; padding-left: 52px; }
.exhibit-answer .exhibit-body::before { content: ''; position: absolute; left: 18px; top: 18px; width: 22px; height: 22px; border-radius: 7px; background: var(--grad); opacity: .9; }
.exhibit-compare { display: grid; grid-template-columns: 1fr 1fr; }
.exhibit-compare > div { padding: 16px 18px; }
.exhibit-compare > div + div { border-left: 1px solid var(--stroke); }
.exhibit-compare h4 { font-size: 12px; font-weight: 600; color: var(--text-3); margin-bottom: 8px; }
.exhibit-compare p { font-size: 15px; line-height: 1.55; }

/* Options */
.opts { display: grid; gap: 10px; }
.opts-2 { grid-template-columns: 1fr 1fr; }
.opt {
  position: relative; display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start;
  text-align: left; padding: 13px 18px; border-radius: var(--r-l);
  background: var(--card); border: 1px solid var(--stroke);
  transition: background-color .2s, border-color .2s, transform .25s var(--spring), box-shadow .3s;
}
.opt:hover { background: var(--card-hover); border-color: var(--stroke-2); }
.opt:active { transform: scale(.99); }
.opt-key { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; font-size: 12.5px; font-weight: 700; color: var(--text-3); background: var(--card-inset); border: 1px solid var(--stroke); transition: all .2s; }
.opt-label { padding-top: 3px; font-size: 15.5px; line-height: 1.45; }
.opt.is-sel { background: var(--accent-soft); border-color: transparent; box-shadow: 0 0 0 1.5px var(--accent), 0 10px 30px -14px color-mix(in srgb, var(--g2) 70%, transparent); }
.opt.is-sel .opt-key { background: var(--grad); color: #fff; border-color: transparent; }
.opt-prompt .opt-label { font-family: var(--mono); font-size: 13.5px; line-height: 1.6; color: var(--text-2); }
.opt-prompt.is-sel .opt-label { color: var(--text); }
.idk { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 999px; font-size: 14px; color: var(--text-2); border: 1px dashed var(--stroke-2); transition: all .2s; }
.idk:hover { color: var(--text); border-color: var(--text-3); }
.idk.is-sel { color: var(--text); border-style: solid; border-color: var(--accent); background: var(--accent-soft); }

/* Choix multiples */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.pick { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px 0 8px; border-radius: 999px; background: var(--card); border: 1px solid var(--stroke); font-size: 15px; transition: all .25s var(--ease); }
.pick:hover:not(:disabled) { border-color: var(--stroke-2); background: var(--card-hover); }
.pick:disabled { opacity: .4; }
.pick-key { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--text-3); background: var(--card-inset); }
.pick-check { width: 0; overflow: hidden; display: grid; place-items: center; transition: width .3s var(--spring); }
.pick.is-sel { color: #fff; background: var(--grad); border-color: transparent; box-shadow: 0 8px 24px -10px color-mix(in srgb, var(--g2) 70%, transparent); }
.pick.is-sel .pick-key { background: rgba(255, 255, 255, .2); color: #fff; }
.pick.is-sel .pick-check { width: 16px; }
.pick-check .ic { width: 16px; height: 16px; stroke-width: 2.4; }

/* Certitude */
.q-extra { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.certainty { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; transition: opacity .3s; }
.certainty.is-off { opacity: .35; pointer-events: none; }
.certainty-label { font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.certainty-opts { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--card-inset); border: 1px solid var(--stroke); }
.cert { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--text-2); transition: all .25s var(--ease); }
.cert:hover { color: var(--text); }
.cert-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.cert-bars i { width: 3px; border-radius: 1px; background: var(--stroke-2); }
.cert-bars i:nth-child(1) { height: 5px; } .cert-bars i:nth-child(2) { height: 8.5px; } .cert-bars i:nth-child(3) { height: 12px; }
.cert-bars[data-l="1"] i:nth-child(-n+1), .cert-bars[data-l="2"] i:nth-child(-n+2), .cert-bars[data-l="3"] i { background: currentColor; }
.cert.is-sel { color: var(--text); background: var(--card-strong); box-shadow: 0 1px 3px rgba(0, 0, 0, .12), inset 0 0 0 1.5px var(--accent); }
.cert.is-sel .cert-bars { color: var(--accent); }

/* Bipolaire */
.bip { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: stretch; }
.bip-side { padding: 22px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--stroke); display: flex; flex-direction: column; gap: 14px; transition: all .35s var(--ease); }
.bip-side p { font-size: 17px; line-height: 1.42; font-weight: 500; letter-spacing: -.015em; }
.bip-tag { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; font-size: 13px; font-weight: 700; color: var(--text-3); background: var(--card-inset); }
.bip-side.is-lean { background: var(--accent-soft); border-color: transparent; box-shadow: 0 0 0 1.5px var(--accent); }
.bip-side.is-lean .bip-tag { background: var(--grad); color: #fff; }
.bip-scale { display: flex; align-items: center; gap: 4px; align-self: center; }
.bip-dot { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 999px; }
.bip-dot span:first-child { display: block; border-radius: 999px; border: 1.5px solid var(--stroke-2); transition: all .35s var(--spring); }
.bip-dot.d1 span:first-child, .bip-dot.d5 span:first-child { width: 34px; height: 34px; }
.bip-dot.d2 span:first-child, .bip-dot.d4 span:first-child { width: 24px; height: 24px; }
.bip-dot.d3 span:first-child { width: 14px; height: 14px; }
.bip-dot:hover span:first-child { border-color: var(--accent); }
.bip-dot.is-sel span:first-child { background: var(--grad); border-color: transparent; box-shadow: 0 0 0 5px var(--accent-soft), 0 0 22px color-mix(in srgb, var(--g2) 60%, transparent); transform: scale(1.08); }
.bip-help { margin-top: 18px; text-align: center; font-size: 12.5px; color: var(--text-3); }

/* Auto-évaluation */
.self { max-width: 580px; }
.self-read { display: flex; align-items: baseline; gap: 10px; }
.self-num { font-size: 108px; line-height: .9; font-weight: 700; letter-spacing: -.06em; }
.self-den { font-size: 16px; color: var(--text-3); }
.self-desc { margin-top: 10px; font-size: 19px; font-weight: 600; letter-spacing: -.02em; }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 36px; margin-top: 26px; background: transparent; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--g1), var(--g2) calc(var(--p) * .6), var(--g3) var(--p), var(--stroke-2) var(--p)); }
.range::-moz-range-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--g1), var(--g2) calc(var(--p) * .6), var(--g3) var(--p), var(--stroke-2) var(--p)); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -11px; border-radius: 999px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 4px 14px rgba(0, 0, 0, .25); transition: transform .2s var(--spring); }
.range::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 999px; background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.range:active::-webkit-slider-thumb { transform: scale(1.15); }
.range-legend { display: flex; justify-content: space-between; margin-top: 6px; font-size: 13px; color: var(--text-3); }

/* Calcul */
.computing { min-height: 100dvh; display: grid; place-items: center; padding: 32px; text-align: center; }
.computing-art { width: 200px; height: 200px; margin: 0 auto; position: relative; }
.computing-art .logo-mark { width: 100%; height: 100%; }
.computing-art::after { content: ''; position: absolute; inset: 20%; border-radius: 50%; background: var(--grad); filter: blur(50px); opacity: .4; z-index: -1; animation: breathe 2s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .7; transform: scale(1.15); } }
.computing h1 { margin-top: 32px; font-size: 30px; font-weight: 700; letter-spacing: -.035em; }
.computing-list { margin: 22px auto 0; display: grid; gap: 10px; width: fit-content; text-align: left; }
.computing-list li { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--text-3); opacity: 0; animation: tick .45s var(--ease) forwards; animation-delay: calc(var(--i) * 380ms + 250ms); }
.computing-list .tick { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 999px; background: var(--grad); color: #fff; }
.computing-list .tick .ic { width: 12px; height: 12px; stroke-width: 2.6; }
@keyframes tick { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; color: var(--text); } }

/* ==========================================================================
   Espace connecté : barre de navigation horizontale
   ========================================================================== */
.nav { position: sticky; top: 0; z-index: 30; background: var(--nav-bg); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border-bottom: 1px solid var(--stroke); }
.nav-in { max-width: var(--maxw); margin: 0 auto; height: 64px; padding: 0 28px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }
.nav-links { display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--card-inset); border: 1px solid var(--stroke); }
.nav-link { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--text-2); transition: all .25s var(--ease); white-space: nowrap; }
.nav-link .ic { width: 16px; height: 16px; }
.nav-link:hover { color: var(--text); }
.nav-link[aria-current="page"] { color: var(--text); background: var(--card-strong); box-shadow: 0 1px 3px rgba(0, 0, 0, .1), inset 0 0 0 1px var(--stroke); }
.nav-link[aria-current="page"] .ic { color: var(--accent); }
.nav-end { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.me { position: relative; }
.me-btn { display: flex; align-items: center; gap: 10px; padding: 3px 12px 3px 3px; border-radius: 999px; border: 1px solid var(--stroke); background: var(--card); transition: all .2s; }
.me-btn:hover { border-color: var(--stroke-2); }
.avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 999px; background: var(--grad); color: #fff; font-size: 13px; font-weight: 700; }
.me-name { font-size: 14px; font-weight: 600; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-mobile { display: none; }

.main { max-width: var(--maxw); margin: 0 auto; padding: 36px 28px 96px; }

/* ------------------------------------------------------------------ En-tête de page et onglets */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.page-head h1 { font-size: clamp(32px, 3.6vw, 44px); font-weight: 700; letter-spacing: -.045em; line-height: 1.05; }
.page-head p { margin-top: 6px; color: var(--text-2); }
.tabs { position: sticky; top: 64px; z-index: 20; margin: 26px -28px 28px; padding: 10px 28px; background: linear-gradient(var(--bg) 70%, transparent); }
.tabs-in { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--card); border: 1px solid var(--stroke); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tabs-in::-webkit-scrollbar { display: none; }
.tab { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--text-2); white-space: nowrap; transition: all .25s var(--ease); }
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: #fff; background: var(--grad); box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--g2) 80%, transparent); }
.tab .badge { min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; font-size: 11px; background: var(--card-inset); color: var(--text-2); }
.tab[aria-selected="true"] .badge { background: rgba(255, 255, 255, .22); color: #fff; }
.tab-panel { animation: panel .5s var(--ease) both; }
@keyframes panel { from { opacity: 0; transform: translateY(10px); } }

/* Grille */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.s3 { grid-column: span 3; } .s4 { grid-column: span 4; } .s5 { grid-column: span 5; } .s6 { grid-column: span 6; }
.s7 { grid-column: span 7; } .s8 { grid-column: span 8; } .s12 { grid-column: span 12; }
.stack { display: grid; gap: 18px; align-content: start; }
.block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 34px 0 14px; }
.block-head h2 { font-size: 22px; font-weight: 700; letter-spacing: -.03em; }

/* ------------------------------------------------------------------ Synthèse */
.hero { display: grid; grid-template-columns: auto 1fr; gap: 36px; align-items: center; overflow: hidden; }
.gauge { position: relative; width: 230px; height: 230px; }
.gauge .ring { width: 100%; height: 100%; }
.gauge-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.gauge-num { font-size: 72px; font-weight: 700; letter-spacing: -.06em; line-height: 1; }
.gauge-sub { font-size: 13px; color: var(--text-3); margin-top: 4px; }
.gauge::after { content: ''; position: absolute; inset: 18%; border-radius: 50%; background: var(--grad); filter: blur(46px); opacity: .25; z-index: -1; }
.ring-track { fill: none; stroke: var(--stroke); }
.ring-val { fill: none; stroke-linecap: round; animation: ring-in 1.6s var(--ease) both; }
@keyframes ring-in { from { stroke-dashoffset: var(--c); } to { stroke-dashoffset: var(--o); } }
.ring-num { font: 700 20px var(--font); fill: var(--text); letter-spacing: -.03em; }
.ring-sub { font: 500 10px var(--font); fill: var(--text-3); }
.hero-level { font-size: clamp(46px, 5.4vw, 72px); font-weight: 700; letter-spacing: -.055em; line-height: .95; margin-top: 10px; }
.hero-tag { margin-top: 10px; font-size: 19px; font-weight: 600; letter-spacing: -.02em; color: var(--text-2); }
.hero-desc { margin-top: 14px; color: var(--text-2); max-width: 36rem; }
.ladder { margin-top: 22px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.ladder span { display: grid; gap: 7px; font-size: 11.5px; font-weight: 500; color: var(--text-3); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ladder i { height: 6px; border-radius: 999px; background: var(--card-inset); border: 1px solid var(--stroke); }
.ladder .is-past i { background: color-mix(in srgb, var(--g2) 40%, transparent); border-color: transparent; }
.ladder .is-here i { background: var(--grad); border-color: transparent; box-shadow: 0 0 14px color-mix(in srgb, var(--g2) 60%, transparent); }
.ladder .is-here { color: var(--text); font-weight: 650; overflow: visible; }

.teaser { display: flex; flex-direction: column; overflow: hidden; }
.teaser-top { display: flex; align-items: center; gap: 18px; }
.teaser .emblem { flex: none; }
.teaser h3 { font-size: 34px; font-weight: 700; letter-spacing: -.045em; line-height: 1; margin-top: 4px; }
.teaser .tagline { margin-top: 6px; font-weight: 600; color: var(--text-2); }
.teaser blockquote { margin-top: 18px; padding-left: 14px; border-left: 2px solid; border-image: var(--grad) 1; font-size: 15.5px; font-style: italic; color: var(--text-2); }
.teaser .btn { margin-top: auto; align-self: flex-start; }
.teaser-mix { margin: 18px 0 20px; display: grid; gap: 7px; }

.axis-card { padding: 20px; display: grid; gap: 14px; transition: transform .35s var(--spring), border-color .2s; }
.axis-card:hover { transform: translateY(-3px); border-color: var(--stroke-2); }
.axis-card-top { display: flex; align-items: center; justify-content: space-between; }
.axis-ic { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: var(--card-inset); border: 1px solid var(--stroke); color: var(--accent); }
.axis-card h3 { font-size: 15px; font-weight: 650; letter-spacing: -.015em; }
.axis-card .ring { width: 64px; height: 64px; }

.insights { display: grid; gap: 10px; }
.insight { display: grid; grid-template-columns: 36px 1fr; gap: 14px; padding: 18px 20px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--stroke); }
.insight-ic { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; }
.insight-good .insight-ic { background: var(--good-soft); color: var(--good); }
.insight-warn .insight-ic { background: var(--warn-soft); color: var(--warn); }
.insight-info .insight-ic { background: var(--accent-soft); color: var(--accent); }
.insight h4 { font-size: 15.5px; font-weight: 650; letter-spacing: -.015em; }
.insight p { margin-top: 4px; font-size: 14.5px; color: var(--text-2); line-height: 1.55; }

.stat-big { font-size: 44px; font-weight: 700; letter-spacing: -.05em; line-height: 1; }
.duo { display: grid; gap: 12px; margin-top: 18px; }
.duo-row { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 13.5px; }
.duo-row span:first-child { color: var(--text-2); }
.duo-row b { font-weight: 650; }
.bar { grid-column: 1 / -1; height: 8px; border-radius: 999px; background: var(--card-inset); border: 1px solid var(--stroke); overflow: hidden; }
.bar i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--grad); animation: bar-in 1.2s var(--ease) both; }
.bar i.alt { background: linear-gradient(90deg, var(--warn), color-mix(in srgb, var(--warn) 60%, var(--bad))); }
.bar i.mute { background: var(--text-3); opacity: .5; }
@keyframes bar-in { from { width: 0; } }

/* ------------------------------------------------------------------ Profil */
.profile-hero { display: grid; grid-template-columns: auto 1fr minmax(260px, 340px); gap: 36px; align-items: center; overflow: hidden; }
.profile-hero .emblem { width: 190px; height: 190px; }
.p-name { font-size: clamp(48px, 6vw, 80px); font-weight: 700; letter-spacing: -.06em; line-height: .92; margin-top: 8px; }
.p-name small { font-size: .5em; letter-spacing: -.03em; color: var(--text-3); font-weight: 600; margin-right: .15em; }
.p-tag { margin-top: 12px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.p-motto { margin-top: 14px; font-size: 16px; font-style: italic; color: var(--text-2); max-width: 30rem; }
.mix-title { font-size: 13px; font-weight: 600; color: var(--text-3); margin-bottom: 12px; }
.mix-row { display: grid; grid-template-columns: 96px 1fr 38px; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-3); }
.mix-row + .mix-row { margin-top: 8px; }
.mix-row.is-top { color: var(--text); font-weight: 650; }
.mix-row .bar { height: 6px; grid-column: auto; }
.mix-row .tnum { text-align: right; }
.prose p { font-size: 16px; line-height: 1.7; color: var(--text-2); }
.prose p + p { margin-top: 14px; }
.prose p:first-child::first-line { color: var(--text); font-weight: 600; }
.callout { margin-top: 22px; padding: 18px 20px; border-radius: var(--r-l); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent); }
.callout h4 { font-size: 13px; font-weight: 700; color: var(--accent); margin-bottom: 6px; }
.callout p { font-size: 15px; line-height: 1.6; color: var(--text); }
.list-cards { display: grid; gap: 10px; margin-top: 16px; }
.lc { display: grid; grid-template-columns: 30px 1fr; gap: 12px; padding: 14px 16px; border-radius: var(--r-m); background: var(--card-inset); border: 1px solid var(--stroke); }
.lc-ic { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; }
.lc-good .lc-ic { background: var(--good-soft); color: var(--good); }
.lc-warn .lc-ic { background: var(--warn-soft); color: var(--warn); }
.lc h4 { font-size: 15px; font-weight: 650; }
.lc p { margin-top: 2px; font-size: 14px; color: var(--text-2); line-height: 1.5; }
.drivers { margin-top: 14px; display: grid; gap: 8px; }
.drivers li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; }
.drivers li::before { content: ''; width: 8px; height: 8px; flex: none; border-radius: 3px; background: var(--grad); transform: rotate(45deg); }
.mini { display: grid; gap: 10px; }
.mini-ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--grad); color: #fff; }
.mini h3 { font-size: 17px; font-weight: 650; letter-spacing: -.02em; }
.mini p { font-size: 14.5px; color: var(--text-2); line-height: 1.6; }
.pair { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.pair .emblem { width: 64px; height: 64px; flex: none; }
.pair b { font-size: 18px; letter-spacing: -.02em; }
.pair p { margin-top: 3px; font-size: 14px; color: var(--text-2); }

.traits { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 40px; margin-top: 20px; }
.trait-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.trait-name { font-weight: 650; font-size: 15px; }
.trait-pct { font-size: 13px; color: var(--text-3); }
.trait-track { position: relative; height: 10px; margin-top: 12px; border-radius: 999px; background: var(--card-inset); border: 1px solid var(--stroke); }
.trait-fill { position: absolute; top: -1px; bottom: -1px; border-radius: 999px; background: var(--grad); opacity: .85; }
.trait-mid { position: absolute; left: 50%; top: -5px; bottom: -5px; width: 1px; background: var(--stroke-2); }
.trait-dot { position: absolute; top: 50%; width: 20px; height: 20px; translate: -50% -50%; border-radius: 999px; background: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--g2) 60%, transparent), 0 4px 12px rgba(0, 0, 0, .3); }
.trait-poles { display: flex; justify-content: space-between; margin-top: 10px; font-size: 13px; color: var(--text-3); }
.trait-poles .on { color: var(--text); font-weight: 650; }
.trait-read { margin-top: 6px; font-size: 13.5px; color: var(--text-2); }

/* ------------------------------------------------------------------ Compétences */
.ep-card { display: flex; flex-direction: column; }
.ep-wrap { flex: 1; display: grid; place-items: center; margin-top: 8px; }
.ep { width: 100%; height: auto; overflow: visible; }
.ep-grid { fill: none; stroke: var(--stroke-2); stroke-width: 1; }
.ep-spoke { stroke: var(--stroke); stroke-width: 1; }
.ep-line { fill: none; stroke-width: 1.2; opacity: var(--o); vector-effect: non-scaling-stroke; }
.ep-main { stroke-width: 2.6; opacity: 1; }
.ep-glow { opacity: .55; }
.ep-dot { fill: #fff; stroke: var(--g2); stroke-width: 3; }
.ep-label { font: 600 13px var(--font); fill: var(--text-2); }
.ep-value { font: 700 20px var(--font); fill: var(--text); letter-spacing: -.03em; }
.ep-anim .ep-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.8s var(--ease) forwards; animation-delay: calc(var(--i) * 60ms); }
.ep-anim .ep-fill, .ep-anim .ep-glow { opacity: 0; animation: fade-to .9s ease forwards .7s; }
.ep-anim .ep-dot { opacity: 0; transform-box: fill-box; transform-origin: center; animation: dot-in .5s var(--spring) forwards; animation-delay: calc(1s + var(--i) * 60ms); }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade-to { to { opacity: 1; } }
.ep-anim .ep-glow { animation-name: fade-glow; }
@keyframes fade-glow { to { opacity: .55; } }
@keyframes dot-in { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: none; } }

.axis-rows { display: grid; gap: 4px; margin-top: 10px; }
.axis-row { padding: 14px 0; border-top: 1px solid var(--stroke); }
.axis-row:first-child { border-top: 0; }
.axis-row-top { display: grid; grid-template-columns: 1fr 160px 40px; align-items: center; gap: 16px; }
.axis-row-top b { font-size: 15px; font-weight: 650; }
.axis-row-top .bar { grid-column: auto; height: 8px; }
.axis-row-top .tnum { text-align: right; font-weight: 700; font-size: 17px; }
.axis-row p { margin-top: 6px; font-size: 14px; color: var(--text-2); line-height: 1.55; max-width: 60ch; }
.tiers { display: grid; gap: 14px; margin-top: 16px; }
.cons { display: grid; gap: 16px; margin-top: 16px; }
.cons-row h4 { font-size: 14px; font-weight: 650; margin-bottom: 8px; }
.cons-bars { display: grid; gap: 6px; }
.cons-line { display: grid; grid-template-columns: 80px 1fr 34px; gap: 10px; align-items: center; font-size: 12.5px; color: var(--text-3); }
.cons-line .bar { grid-column: auto; height: 7px; }
.cons-line .tnum { text-align: right; color: var(--text); font-weight: 650; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; font-size: 12.5px; color: var(--text-3); }

/* ------------------------------------------------------------------ Vos réponses */
.review-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.filters { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.filter { height: 34px; padding: 0 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--text-2); background: var(--card); border: 1px solid var(--stroke); transition: all .2s; }
.filter[aria-pressed="true"] { color: var(--text); background: var(--card-strong); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.review-list { display: grid; gap: 14px; }
.rv { padding: 24px; }
.rv-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.rv h3 { font-size: 18px; font-weight: 650; letter-spacing: -.02em; line-height: 1.35; }
.rv .q-ctx { margin: 0 0 14px; }
.rv .exhibit { margin: 0 0 14px; }
.rv-answers { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rv-a { padding: 12px 14px; border-radius: var(--r-m); border: 1px solid var(--stroke); background: var(--card-inset); }
.rv-a span { display: block; font-size: 12px; font-weight: 600; color: var(--text-3); margin-bottom: 4px; }
.rv-a p { font-size: 14.5px; line-height: 1.45; }
.rv-a.is-ok { border-color: color-mix(in srgb, var(--good) 35%, transparent); background: var(--good-soft); }
.rv-a.is-ko { border-color: color-mix(in srgb, var(--bad) 30%, transparent); background: var(--bad-soft); }
.rv-a.is-mid { border-color: color-mix(in srgb, var(--warn) 30%, transparent); background: var(--warn-soft); }
.rv-explain { margin-top: 14px; display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.rv-explain .ic { color: var(--accent); margin-top: 2px; }

/* ------------------------------------------------------------------ Parcours */
.path-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.pstep { padding: 22px; display: flex; flex-direction: column; gap: 8px; min-height: 220px; transition: transform .35s var(--spring), border-color .2s; }
.pstep:hover { transform: translateY(-4px); border-color: var(--stroke-2); }
.pstep-n { font-size: 40px; font-weight: 700; letter-spacing: -.06em; line-height: 1; margin-bottom: 8px; }
.pstep h3 { font-size: 16.5px; font-weight: 650; letter-spacing: -.02em; line-height: 1.3; }
.pstep .muted { margin-top: auto; }

/* ------------------------------------------------------------------ Sections */
.sec-hero { padding: 40px; display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; overflow: hidden; }
.sec-ic { width: 76px; height: 76px; display: grid; place-items: center; border-radius: 24px; background: var(--grad); color: #fff; box-shadow: 0 18px 40px -14px color-mix(in srgb, var(--g2) 80%, transparent); }
.sec-ic .ic { width: 34px; height: 34px; stroke-width: 1.5; }
.sec-hero h1 { font-size: clamp(36px, 4.4vw, 56px); font-weight: 700; letter-spacing: -.05em; line-height: 1; }
.sec-hero p { margin-top: 10px; font-size: 17px; color: var(--text-2); max-width: 40rem; }
.catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.item { padding: 22px; display: flex; flex-direction: column; gap: 8px; min-height: 200px; transition: transform .35s var(--spring), border-color .2s; }
.item:hover { transform: translateY(-3px); border-color: var(--stroke-2); }
.item h3 { font-size: 18px; font-weight: 650; letter-spacing: -.02em; line-height: 1.3; }
.item-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 14px; border-top: 1px solid var(--stroke); font-size: 13px; color: var(--text-3); }
.soon { margin-top: 24px; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-style: dashed; }

/* ------------------------------------------------------------------ Invitation au diagnostic */
.diag-banner { max-width: var(--maxw); margin: 18px auto 0; padding: 0 28px; }
.diag-banner-in {
  position: relative; display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 18px;
  padding: 14px 16px 14px 18px; border-radius: var(--r-l); overflow: hidden;
  background: linear-gradient(110deg, color-mix(in srgb, var(--g1) 14%, var(--card)), color-mix(in srgb, var(--g3) 14%, var(--card)));
  border: 1px solid color-mix(in srgb, var(--g2) 30%, transparent);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  box-shadow: 0 14px 40px -22px color-mix(in srgb, var(--g2) 80%, transparent);
}
.diag-banner-mark { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--card-strong); border: 1px solid var(--stroke); }
.diag-banner-txt { display: grid; gap: 2px; min-width: 0; }
.diag-banner-txt b { font-size: 15px; font-weight: 650; letter-spacing: -.015em; }
.diag-banner-txt span { font-size: 13.5px; color: var(--text-2); }
.diag-banner-bar { width: 120px; height: 6px; border-radius: 999px; background: var(--stroke); overflow: hidden; }
.diag-banner-bar i { display: block; height: 100%; background: var(--grad); border-radius: inherit; }

/* ------------------------------------------------------------------ Menu du compte */
.me-btn { padding: 3px 10px 3px 3px; gap: 8px; }
.me-caret { width: 16px; height: 16px; color: var(--text-3); transition: transform .3s var(--ease); }
.me-btn[aria-expanded="true"] .me-caret { transform: rotate(180deg); }
/* ------------------------------------------------------------------ Accueil */
.home-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px; padding: 44px; min-height: 300px; }
.home-hero-art { position: absolute; right: -150px; top: 50%; translate: 0 -50%; width: 520px; height: 520px; opacity: .4; pointer-events: none; z-index: 0; }
.home-hero-art .logo-mark { width: 100%; height: 100%; }
.home-hero-txt, .home-me, .home-cta { position: relative; z-index: 1; }
.home-hero h1 { margin-top: 8px; font-size: clamp(38px, 4.6vw, 60px); font-weight: 700; letter-spacing: -.05em; line-height: 1; }
.home-hero .sub { margin-top: 14px; font-size: 16.5px; max-width: 34rem; }
.home-me { display: grid; gap: 12px; }
.home-stat { display: flex; align-items: center; gap: 16px; padding: 14px 20px 14px 14px; min-width: 300px; border-radius: 22px; background: color-mix(in srgb, var(--bg-2) 82%, transparent); border: 1px solid var(--stroke); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); transition: transform .35s var(--spring), border-color .2s; }
.home-stat:hover { transform: translateY(-2px); border-color: var(--stroke-2); }
.home-stat .ring { width: 72px; height: 72px; }
.home-stat .emblem { width: 72px; height: 72px; }
.home-stat small { display: block; font-size: 12px; font-weight: 600; color: var(--text-3); }
.home-stat b { display: block; font-size: 22px; letter-spacing: -.035em; line-height: 1.15; }
.home-stat em { display: block; font-style: normal; font-size: 13px; color: var(--text-2); }
.home-cta { display: grid; gap: 14px; justify-items: start; padding: 22px; border-radius: 24px; background: color-mix(in srgb, var(--bg-2) 82%, transparent); border: 1px solid var(--stroke); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.home-cta-steps { display: grid; gap: 8px; }
.home-cta-steps span { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.home-cta-steps .ic { color: var(--accent); }
.block-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.empty { margin-top: 18px; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; padding: 22px; border-radius: var(--r-l); border: 1px dashed var(--stroke-2); }
.empty-ic, .locked-ic { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; background: var(--card-inset); border: 1px solid var(--stroke); color: var(--text-3); }
.empty-ic .ic, .locked-ic .ic { width: 22px; height: 22px; }
.empty b { font-size: 15px; }
.empty p { margin-top: 4px; font-size: 14px; color: var(--text-2); }
.progress-card { display: flex; flex-direction: column; }
.pc-top { margin-top: 16px; display: flex; align-items: center; gap: 16px; }
.pc-top .ring { width: 76px; height: 76px; }
.pc-top .ring-num { font-size: 15px; }
.pc-top b { font-size: 15px; }
.pc-next { margin-top: auto; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--card-inset); border: 1px solid var(--stroke); transition: border-color .2s; }
.pc-next:hover { border-color: var(--stroke-2); }
.pc-next > span:nth-child(2) { flex: 1; display: grid; min-width: 0; }
.pc-next small { font-size: 12px; color: var(--text-3); font-weight: 600; }
.pc-next b { font-size: 14px; line-height: 1.3; }
.pc-next-ic { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 11px; background: var(--grad); color: #fff; }
.progress-card .pc-next { margin-top: 18px; }
.locked { margin-top: 18px; display: grid; gap: 8px; justify-items: start; }
.locked b { font-size: 15px; margin-top: 6px; }
.tile { padding: 26px; display: flex; flex-direction: column; gap: 10px; min-height: 240px; transition: transform .35s var(--spring), border-color .2s; overflow: hidden; }
.tile:hover { transform: translateY(-4px); border-color: var(--stroke-2); }
.tile-ic { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; background: var(--grad); color: #fff; box-shadow: 0 14px 30px -12px color-mix(in srgb, var(--g2) 80%, transparent); margin-bottom: 8px; }
.tile-ic .ic { width: 24px; height: 24px; }
.tile h3 { font-size: 22px; font-weight: 700; letter-spacing: -.035em; }
.tile p { font-size: 14.5px; color: var(--text-2); line-height: 1.55; }
.tile-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; color: var(--text-3); }
.tile:hover .tile-foot .ic { color: var(--accent); transform: translateX(3px); transition: transform .3s var(--spring); }
.news { overflow: hidden; display: flex; flex-direction: column; }
.news-art { height: 120px; position: relative; overflow: hidden; border-bottom: 1px solid var(--stroke); }
.news-art::before { content: ''; position: absolute; inset: 0; background: var(--grad); opacity: .85; }
.news-art::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48.5' viewBox='0 0 28 48.5'%3E%3Cpath d='M14 .5 L27.5 8.25 L27.5 23.75 L14 31.5 L.5 23.75 L.5 8.25 Z M14 31.5 L14 48.5' fill='none' stroke='white' stroke-opacity='.28' stroke-width='1'/%3E%3C/svg%3E"); background-size: 28px 48.5px; }
.news-art.n1::before { filter: hue-rotate(40deg); }
.news-art.n2::before { filter: hue-rotate(-40deg); }
.news-body { padding: 20px 22px 22px; display: grid; gap: 8px; justify-items: start; }
.news-body h3 { font-size: 17px; font-weight: 650; letter-spacing: -.02em; line-height: 1.3; }

/* ------------------------------------------------------------------ Profil vide */
.profile-empty { display: grid; grid-template-columns: auto 1fr; gap: 40px; align-items: center; padding: 44px; overflow: hidden; }
.profile-empty-art { width: 260px; height: 260px; }
.profile-empty-art .logo-mark { width: 100%; height: 100%; }
.profile-empty h1 { margin-top: 8px; font-size: clamp(32px, 3.8vw, 48px); font-weight: 700; letter-spacing: -.045em; line-height: 1.05; max-width: 18ch; }
.profile-empty .sub { margin-top: 14px; max-width: 38rem; font-size: 16px; }
.profile-empty-cta { margin-top: 24px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ Synthèse : compléments */
.hero-body { min-width: 0; }
.teaser { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr); gap: 32px; align-items: center; }
.teaser-main { display: flex; align-items: center; gap: 24px; }
.teaser-main .emblem { flex: none; }
.teaser h3 { font-size: 40px; margin-top: 6px; }
.teaser-side { display: grid; gap: 4px; }
.teaser-side .btn { justify-self: start; }
.teaser .teaser-mix { margin: 0 0 14px; }
.env { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.env-item { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--card); border: 1px solid var(--stroke); font-size: 13.5px; font-weight: 500; color: var(--text-2); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.env-item .ic { width: 16px; height: 16px; color: var(--accent); }
.axis-card-body { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.axis-card-body .muted { margin-top: 4px; }
.callout-mute { background: var(--card-inset); border-color: var(--stroke); }
.callout-mute h4 { color: var(--text-2); }

/* Difficulté */
.lvl { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--text-2); background: var(--card-inset); border: 1px solid var(--stroke); }
.lvl-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.lvl-bars i { width: 3px; border-radius: 1px; background: var(--stroke-2); }
.lvl-bars i:nth-child(1) { height: 5px; } .lvl-bars i:nth-child(2) { height: 8px; } .lvl-bars i:nth-child(3) { height: 11px; }
.lvl-bars[data-l="1"] i:nth-child(1), .lvl-bars[data-l="2"] i:nth-child(-n+2), .lvl-bars[data-l="3"] i { background: var(--grad); }

/* Trajectoire */
.tj { width: 100%; height: auto; overflow: visible; }
.tj-row { stroke: var(--stroke); stroke-dasharray: 3 5; }
.tj-lab { font: 600 12px var(--font); fill: var(--text-3); }
.tj-n { font: 600 10.5px var(--font); fill: var(--text-3); }
.tj-line { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.6s var(--ease) forwards .2s; }
.tj-area { opacity: 0; animation: fade-to .8s ease forwards .9s; }
.tj-pt polygon { stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: dot-in .45s var(--spring) both; animation-delay: calc(.25s + var(--i) * .1s); }
.tj-pt.is-ok polygon { fill: var(--g2); stroke: var(--card-strong); }
.tj-pt.is-ko polygon { fill: var(--bg); stroke: var(--bad); }
.traj-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 32px; align-items: center; }
.traj-stats { margin-top: 20px; display: grid; grid-template-columns: repeat(4, auto); gap: 22px; justify-content: start; }
.traj-stats > div { display: grid; gap: 2px; }
.traj-stats .stat-big { font-size: 34px; }
.traj-stats em { font-style: normal; font-size: 16px; color: var(--text-3); }
.traj-stats small { font-size: 12.5px; color: var(--text-3); }
.ob-action { display: flex; justify-content: flex-end; min-width: 120px; }

/* ==========================================================================
   Adaptatif
   ========================================================================== */
@media (max-width: 1100px) {
  .s3, .s4 { grid-column: span 6; }
  .s5, .s7, .s8 { grid-column: span 12; }
  .profile-hero { grid-template-columns: auto 1fr; }
  .profile-hero .mix { grid-column: 1 / -1; }
  .auth { grid-template-columns: 1fr; padding-top: 80px; }
  .auth-constellation { width: 200px; margin: 0; }
  .welcome { grid-template-columns: 1fr; }
  .welcome-art { max-width: 200px; justify-self: start; }
}
@media (max-width: 1180px) {
  .nav-link span { display: none; }
  .nav-link { padding: 0 12px; }
}
@media (max-width: 1100px) {
  .home-hero { grid-template-columns: 1fr; }
  .home-hero-art { opacity: .3; }
  .teaser, .traj-card { grid-template-columns: 1fr; }
  .profile-empty { grid-template-columns: 1fr; }
  .profile-empty-art { width: 160px; height: 160px; }
}
@media (max-width: 860px) {
  .nav-link span { display: inline; }
  .diag-banner { padding: 0 18px; margin-top: 14px; }
  .diag-banner-in { grid-template-columns: auto 1fr; }
  .diag-banner-bar { display: none; }
  .diag-banner-in .btn { grid-column: 1 / -1; justify-self: start; }
  .home-hero { padding: 28px; }
  .home-stat { min-width: 0; }
  .empty { grid-template-columns: 1fr; }
  .teaser-main { flex-direction: column; align-items: flex-start; }
  .traj-stats { grid-template-columns: repeat(2, auto); }
  .nav-in { grid-template-columns: auto 1fr; padding: 0 18px; height: 58px; }
  .nav-links { display: none; }
  .me-name { display: none; }
  .me-btn { padding: 3px; }
  .nav-mobile { display: flex; gap: 4px; padding: 0 12px 10px; overflow-x: auto; scrollbar-width: none; }
  .nav-mobile::-webkit-scrollbar { display: none; }
  .nav-mobile .nav-link { height: 34px; padding: 0 14px; background: var(--card-inset); }
  .tabs { top: 102px; margin: 18px -18px 22px; padding: 8px 18px; }
  .main { padding: 24px 18px 80px; }
  .hero { grid-template-columns: 1fr; justify-items: start; }
  .gauge { width: 190px; height: 190px; }
  .gauge-num { font-size: 58px; }
  .s6 { grid-column: span 12; }
  .traits { grid-template-columns: 1fr; }
  .profile-hero { grid-template-columns: 1fr; }
  .profile-hero .emblem { width: 130px; height: 130px; }
  .bip { grid-template-columns: 1fr; gap: 14px; }
  .bip-scale { justify-content: center; }
  .opts-2, .plan, .rv-answers, .exhibit-compare { grid-template-columns: 1fr; }
  .exhibit-compare > div + div { border-left: 0; border-top: 1px solid var(--stroke); }
  .ob-head-in { padding: 12px 18px; }
  .ob-head .logo-word { display: none; }
  .ob-secs { padding: 8px 18px 10px; }
  .ob-stage { padding: 22px 14px; align-items: start; }
  .ob-kbd { display: none; }
  .ob-foot-in { grid-template-columns: auto 1fr; }
  .ob-foot-in [data-act=next] { justify-self: end; }
  .auth { padding: 72px 18px 32px; }
  .auth-card { padding: 26px; }
  .axis-row-top { grid-template-columns: 1fr 40px; }
  .axis-row-top .bar { grid-column: 1 / -1; grid-row: 2; }
  .sec-hero { grid-template-columns: 1fr; padding: 28px; }
}
@media (max-width: 560px) {
  .s3, .s4 { grid-column: span 12; }
  .q-card { padding: 20px; }
  .self-num { font-size: 84px; }
  .certainty { flex-direction: column; align-items: flex-start; }
  .cert { padding: 0 10px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
  body::before { animation: none; }
}


/* ==========================================================================
   v4 : menu, mouvements, profils
   ========================================================================== */

/* Champ neuronal */

/* Menu du compte : au premier niveau du document, au-dessus de tout */
.me-menu {
  position: fixed; z-index: 90; width: 320px; padding: 8px;
  border-radius: 22px; background: var(--menu-bg); border: 1px solid var(--stroke-2);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(0, 0, 0, .02);
  transform-origin: top right; animation: menu-in .32s var(--spring);
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px) scale(.96); } }
.me-head { display: flex; align-items: center; gap: 12px; padding: 12px 12px 14px; }
.me-head .avatar-lg { width: 46px; height: 46px; font-size: 18px; box-shadow: 0 8px 22px -8px color-mix(in srgb, var(--g2) 80%, transparent); }
.me-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: linear-gradient(120deg, color-mix(in srgb, var(--g1) 10%, transparent), color-mix(in srgb, var(--g3) 10%, transparent)); border: 1px solid color-mix(in srgb, var(--g2) 22%, transparent); transition: border-color .2s, transform .25s var(--spring); }
.me-card:hover { border-color: color-mix(in srgb, var(--g2) 45%, transparent); transform: translateY(-1px); }
.me-card-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--card-inset); color: var(--accent); }
.me-id { display: grid; min-width: 0; }
.me-id b { font-size: 15.5px; letter-spacing: -.015em; }
.me-id span { font-size: 12.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.me-card-em { width: 46px; height: 46px; display: grid; place-items: center; flex: none; }
.me-card-txt { display: grid; flex: 1; min-width: 0; }
.me-card-txt b { font-size: 14.5px; letter-spacing: -.01em; }
.me-card-txt span { font-size: 12.5px; color: var(--text-3); }
.me-card-ring .ring { width: 42px; height: 42px; }
.me-card-ring .ring-num { font-size: 12px; }
.me-logout:hover { color: var(--bad); background: var(--bad-soft); }
.me-logout:hover .ic { color: var(--bad); }
.me-sep { height: 1px; margin: 8px 6px; background: var(--stroke); }
.me-item { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; font-size: 14px; color: var(--text-2); text-align: left; transition: background-color .15s, color .15s; }
.me-item:hover { background: var(--card-inset); color: var(--text); }
.me-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 6px 6px 12px; font-size: 14px; color: var(--text-2); }
.me-row-l { display: flex; align-items: center; gap: 10px; }
.me-row .ic, .me-item .ic { color: var(--text-3); }

/* Indicateurs glissants (navigation et onglets) */
.nav-links { position: relative; }
.nav-ind { position: absolute; top: 4px; left: 4px; height: 36px; border-radius: 999px; background: var(--card-strong); box-shadow: 0 1px 3px rgba(0, 0, 0, .12), inset 0 0 0 1px var(--stroke); opacity: 0; view-transition-name: nav-ind; pointer-events: none; }
.nav-links .nav-link { position: relative; z-index: 1; }
.nav-links .nav-link[aria-current="page"] { background: none; box-shadow: none; }
.tabs-in { position: relative; }
.tabs-ind { position: absolute; top: 4px; left: 4px; height: 38px; border-radius: 999px; background: var(--grad); box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--g2) 80%, transparent); view-transition-name: tabs-ind; pointer-events: none; }
.tabs-in .tab { position: relative; z-index: 1; }
.tabs-in .tab[aria-selected="true"] { background: none; box-shadow: none; }
.nav { view-transition-name: nav; }

/* Transitions de page */
::view-transition-old(root) { animation: vt-out .38s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .6s var(--ease) both; }
::view-transition-group(nav-ind), ::view-transition-group(tabs-ind) { animation-duration: .5s; animation-timing-function: var(--spring); }
::view-transition-old(nav), ::view-transition-new(nav) { animation: none; mix-blend-mode: normal; }
@keyframes vt-out { to { opacity: 0; transform: scale(.985); filter: blur(8px); } }
@keyframes vt-in { from { opacity: 0; transform: scale(1.015); filter: blur(10px); } }

/* Apparition en cascade */
.rise { animation: rise .8s var(--spring) backwards; animation-delay: calc(var(--i, 0) * 45ms + 60ms); }
@keyframes rise { from { opacity: 0; transform: translateY(22px) scale(.985); filter: blur(6px); } }

/* Reflet et inclinaison au survol */
.fx { position: relative; transition: transform .35s var(--spring), border-color .2s, box-shadow .3s; transform-style: preserve-3d; }
.fx::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .35s;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .10), transparent 45%); }
.fx.fx-on { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-3px); box-shadow: var(--shadow-lg); }
.fx.fx-on::after { opacity: 1; }
:root[data-theme="light"] .fx::after { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .7), transparent 45%); mix-blend-mode: soft-light; }

/* Warp plein écran */
.warp {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; overflow: hidden;
  background: radial-gradient(circle at var(--x) var(--y), color-mix(in srgb, var(--g2) 55%, #03050C) 0%, #050816 38%, #02030A 75%);
  clip-path: circle(0 at var(--x) var(--y));
  animation: warp-in 1s cubic-bezier(.76, 0, .24, 1) forwards;
}
@keyframes warp-in { to { clip-path: circle(150% at var(--x) var(--y)); } }
.warp-core { position: relative; width: 300px; height: 300px; animation: core-in 1.2s var(--spring) .2s both; }
.warp-core .logo-mark { width: 100%; height: 100%; }
.warp-core::after { content: ''; position: absolute; inset: 15%; border-radius: 50%; background: var(--grad); filter: blur(60px); opacity: .55; z-index: -1; }
@keyframes core-in { from { opacity: 0; transform: scale(.3) rotate(-40deg); } }
.warp-rings { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.warp-rings i { position: absolute; width: 300px; height: 300px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--g1) 50%, transparent); animation: ring-out 1.6s var(--ease) infinite; opacity: 0; }
.warp-rings i:nth-child(2) { animation-delay: .35s; border-color: color-mix(in srgb, var(--g2) 50%, transparent); }
.warp-rings i:nth-child(3) { animation-delay: .7s; border-color: color-mix(in srgb, var(--g3) 50%, transparent); }
@keyframes ring-out { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(3.2); } }
.warp-label { position: absolute; bottom: 18vh; color: #F2F5FB; font-size: 22px; font-weight: 650; letter-spacing: -.02em; animation: label-in .8s var(--ease) .45s both; }
@keyframes label-in { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } }
.warp.out { animation: warp-out .9s var(--ease) forwards; clip-path: circle(150% at var(--x) var(--y)); }
.warp.out .warp-core { animation: core-zoom .9s var(--ease) forwards; }
@keyframes warp-out { to { opacity: 0; } }
@keyframes core-zoom { to { opacity: 0; transform: scale(4); filter: blur(12px); } }

/* Révélation du profil */
.reveal { position: relative; min-height: 100dvh; display: grid; place-items: center; overflow: hidden; padding: 40px 20px; text-align: center; }
.reveal-rays { position: absolute; left: 50%; top: 38%; width: 1600px; height: 1600px; margin: -800px 0 0 -800px; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 8%, color-mix(in srgb, var(--g1) 18%, transparent) 10%, transparent 14% 30%, color-mix(in srgb, var(--g3) 16%, transparent) 33%, transparent 37% 55%, color-mix(in srgb, var(--g2) 18%, transparent) 58%, transparent 62% 80%, color-mix(in srgb, var(--g1) 14%, transparent) 83%, transparent 87%);
  mask-image: radial-gradient(circle, #000 0%, transparent 60%); -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 60%);
  animation: rays 40s linear infinite, fade-to 1.6s ease both; opacity: 0; }
@keyframes rays { to { transform: rotate(360deg); } }
.reveal-stage { position: relative; display: grid; justify-items: center; gap: 4px; }
.reveal-emblem { position: relative; width: 220px; height: 220px; animation: emblem-in 1.4s var(--spring) .2s both; }
.reveal-emblem::after { content: ''; position: absolute; inset: 10%; border-radius: 50%; background: var(--grad); filter: blur(60px); opacity: .5; z-index: -1; animation: breathe 3s ease-in-out infinite 1.6s; }
.reveal-emblem .emblem { width: 100%; height: 100%; }
.reveal-emblem .em-on { animation-delay: calc(.4s + var(--d)); }
@keyframes emblem-in { from { opacity: 0; transform: scale(.5); filter: blur(14px); } }
.reveal-kicker { margin-top: 26px; font-size: 15px; font-weight: 600; color: var(--text-3); animation: label-in .7s var(--ease) 1.1s both; }
.reveal-title { margin-top: 6px; font-size: clamp(54px, 9vw, 112px); font-weight: 700; letter-spacing: -.06em; line-height: .95; }
.reveal-title small { display: block; font-size: .32em; letter-spacing: -.02em; color: var(--text-2); font-weight: 600; animation: label-in .6s var(--ease) 1.25s both; }
.reveal-word span { display: inline-block; animation: letter-in .9s var(--spring) both; animation-delay: calc(1.35s + var(--i) * 55ms); background: inherit; -webkit-background-clip: text; background-clip: text; }
.reveal-word { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
@keyframes letter-in { from { opacity: 0; transform: translateY(40px) rotateX(70deg); filter: blur(10px); } }
.reveal-meta { margin-top: 18px; display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; color: var(--text-2); animation: label-in .7s var(--ease) 2s both; }
.reveal-tag { margin-top: 8px; font-size: 20px; color: var(--text-2); animation: label-in .7s var(--ease) 2.2s both; }
.reveal-actions { margin-top: 34px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; animation: label-in .7s var(--ease) 2.5s both; }

/* Pips de niveau */
.pips { display: inline-flex; gap: 4px; }
.pip { width: 14px; height: 14px; }
.pip polygon { fill: none; stroke: var(--stroke-2); stroke-width: 1.6; }
.pip.on polygon { fill: var(--g2); stroke: none; }
.pip.on:nth-child(1) polygon { fill: var(--g1); }
.pip.on:nth-child(4) polygon, .pip.on:nth-child(5) polygon { fill: var(--g3); }

/* Portrait : profil × niveau */
.p-meta { margin-top: 14px; display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.callout-warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 25%, transparent); }
.callout-warn h4 { display: flex; align-items: center; gap: 8px; color: var(--warn); }
.callout-warn h4 .ic { width: 16px; height: 16px; }
.next-to { margin-top: 18px; display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 16px; background: var(--card-inset); border: 1px solid var(--stroke); }
.next-to > span { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--grad); color: #fff; }
.next-to small { display: block; font-size: 12px; font-weight: 600; color: var(--text-3); }
.next-to b { display: block; font-size: 16px; letter-spacing: -.02em; }
.next-to em { display: block; font-style: normal; font-size: 13px; color: var(--text-2); }
.challenge { overflow: hidden; }
.challenge .kicker { display: flex; align-items: center; gap: 8px; color: var(--accent); }
.challenge .kicker .ic { width: 16px; height: 16px; }
.challenge-txt { margin-top: 10px; font-size: 17px; line-height: 1.5; font-weight: 600; letter-spacing: -.015em; }
.matrix-wrap { margin-top: 18px; overflow-x: auto; }
.mx { width: 100%; min-width: 640px; height: auto; overflow: visible; }
.mx-col { font: 600 12.5px var(--font); fill: var(--text-3); }
.mx-col.is-cur { fill: var(--text); }
.mx-row { font: 600 13.5px var(--font); fill: var(--text-2); }
.mx-row.is-cur { fill: var(--text); font-weight: 700; }
.mx-path { stroke-width: 2; stroke-dasharray: 4 6; opacity: .7; }
.mx-g { transform-box: fill-box; transform-origin: center; animation: dot-in .5s var(--spring) both; animation-delay: var(--d); cursor: default; }
.mx-g polygon { fill: var(--card-inset); stroke: var(--stroke-2); stroke-width: 1; transition: fill .2s, stroke .2s; }
.mx-g text { font: 600 11px var(--font); fill: var(--text-3); pointer-events: none; }
.mx-g:hover polygon { stroke: var(--accent); fill: var(--accent-soft); }
.mx-past polygon { fill: color-mix(in srgb, var(--g2) 22%, transparent); stroke: transparent; }
.mx-past text { fill: var(--text-2); }
.mx-cur polygon:first-of-type { stroke: none; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--g2) 80%, transparent)); }
.mx-cur text { fill: #fff; font-size: 13px; }
.mx-ring { fill: none !important; stroke-width: 1.5; animation: mx-pulse 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes mx-pulse { 0%, 100% { opacity: .2; transform: scale(.9); } 50% { opacity: .9; transform: scale(1.05); } }
.mx-next polygon { stroke: var(--accent); stroke-dasharray: 4 3; stroke-width: 1.5; animation: dash 1.2s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -14; } }

@media (max-width: 860px) {
  .me-menu { width: min(320px, calc(100vw - 24px)); }
  .reveal-title { font-size: clamp(44px, 13vw, 72px); }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ==========================================================================
   v5 : précision
   Mouvement lent et linéaire (courbe expo), aucun rebond, aucun flou de
   transition, aucune inclinaison. Navigation typographique.
   ========================================================================== */
:root { --ease: cubic-bezier(.22, 1, .36, 1); --spring: cubic-bezier(.22, 1, .36, 1); }

/* Champ neuronal */
.neural { position: fixed; inset: 0; z-index: -1; width: 100vw; height: 100vh; pointer-events: none; opacity: .65; }
@media (prefers-reduced-motion: reduce) { .neural { display: none; } }

/* Logo : apparition puis respiration lente, sans éclat */
.lm-anim .lm-hex, .lm-anim .lm-accent {
  transform-box: fill-box; transform-origin: center;
  animation: lm-in 1.6s var(--ease) both, lm-breathe 9s ease-in-out infinite;
  animation-delay: calc(var(--r) * .16s + var(--a) * .25s), calc(1.8s + var(--a) * 9s);
}
@keyframes lm-in { from { opacity: 0; transform: scale(.6); } }
@keyframes lm-breathe { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.lm-core { animation: lm-core-soft 9s ease-in-out infinite 1.8s; }
@keyframes lm-core-soft { 0%, 100% { opacity: .35; } 50% { opacity: .7; } }
a:hover .lm-hover .lm-hex, .logo:hover .lm-hover .lm-hex { animation: none; }
.logo-word { font-size: 17px; font-weight: 500; letter-spacing: .42em; margin-right: -.42em; }

/* Barre de navigation : plus haute, typographique, soulignement fin */
.nav-in { height: 76px; }
.nav-links { height: 76px; padding: 0; gap: 4px; background: none; border: 0; border-radius: 0; align-items: center; }
.nav-link { height: 76px; padding: 0 18px; border-radius: 0; font-size: 15px; font-weight: 500; color: var(--text-2); background: none !important; box-shadow: none !important; transition: color .4s var(--ease); }
.nav-link .ic { display: none; }
.nav-link:hover, .nav-link[aria-current="page"] { color: var(--text); }
.nav-ind { top: auto; bottom: 20px; left: 0; height: 1.5px; border-radius: 2px; background: var(--grad); box-shadow: none; transition: opacity .6s var(--ease); }
.me-btn { padding: 4px 12px 4px 4px; }
.me-btn .avatar { width: 36px; height: 36px; font-size: 14px; }
.me-btn.is-active { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.tabs { top: 76px; }
.diag-banner { margin-top: 22px; }

/* Onglets du profil : texte et filet */
.tabs-in { gap: 30px; padding: 0; border-radius: 0; background: none; border: 0; border-bottom: 1px solid var(--stroke); backdrop-filter: none; -webkit-backdrop-filter: none; overflow: visible; }
.tab { height: 46px; padding: 0; border-radius: 0; font-size: 15px; font-weight: 500; color: var(--text-2); background: none !important; box-shadow: none !important; transition: color .4s var(--ease); }
.tab[aria-selected="true"] { color: var(--text); }
.tab .badge, .tab[aria-selected="true"] .badge { background: var(--card-inset); color: var(--text-2); font-weight: 600; }
.tabs-ind { top: auto; bottom: -1px; left: 0; height: 1.5px; border-radius: 2px; background: var(--grad); box-shadow: none; }

/* Mouvement */
::view-transition-old(root) { animation: vt-fade-out .35s var(--ease) both; }
::view-transition-new(root) { animation: vt-fade-in .6s var(--ease) both; }
::view-transition-group(nav-ind), ::view-transition-group(tabs-ind) { animation-duration: .6s; animation-timing-function: var(--ease); }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }
.rise { animation: rise-soft .9s var(--ease) backwards; animation-delay: calc(var(--i, 0) * 50ms); }
@keyframes rise-soft { from { opacity: 0; transform: translateY(10px); } }
.in-next { animation: step-in-f .7s var(--ease) both; }
.in-prev { animation: step-in-b .7s var(--ease) both; }
@keyframes step-in-f { from { opacity: 0; transform: translateX(14px); } }
@keyframes step-in-b { from { opacity: 0; transform: translateX(-14px); } }
.fx, .fx.fx-on { transform: none; }
.fx::after { display: none; }
.fx:hover { transform: translateY(-2px); border-color: var(--stroke-2); }
.axis-card, .tile, .pstep, .item, .home-stat, .news { transition: transform .6s var(--ease), border-color .4s var(--ease), box-shadow .6s var(--ease); }
.btn { transition: background-position .6s var(--ease), box-shadow .6s var(--ease), opacity .3s, transform .3s var(--ease); }
.btn-primary { box-shadow: 0 8px 22px -12px color-mix(in srgb, var(--g2) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, .22); }
.btn-primary:hover:not(:disabled) { box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--g3) 70%, transparent), inset 0 1px 0 rgba(255, 255, 255, .26); }

/* Voile de transition */
.veil { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--bg); animation: veil-in .6s var(--ease) both; transition: opacity .8s var(--ease); }
.veil.out { opacity: 0; }
@keyframes veil-in { from { opacity: 0; } }
.veil-in { display: grid; justify-items: center; text-align: center; }
.veil-mark { width: 64px; height: 64px; }
.veil-label { margin-top: 26px; font-size: 24px; font-weight: 600; letter-spacing: -.025em; animation: fade-up-soft 1s var(--ease) .25s both; }
.veil-sub { margin-top: 6px; font-size: 14px; color: var(--text-3); animation: fade-up-soft 1s var(--ease) .4s both; }
.veil-line { display: block; margin-top: 26px; width: 120px; height: 1px; background: var(--stroke); position: relative; overflow: hidden; }
.veil-line::after { content: ''; position: absolute; inset: 0; background: var(--grad); transform-origin: left; animation: line-grow 1.4s var(--ease) .2s both; }
@keyframes line-grow { from { transform: scaleX(0); } }
@keyframes fade-up-soft { from { opacity: 0; transform: translateY(6px); } }

/* Révélation du profil : sobre */
.reveal-rays { display: none; }
.reveal-emblem { animation: reveal-em 1.6s var(--ease) .2s both; }
@keyframes reveal-em { from { opacity: 0; transform: scale(.94); } }
.reveal-word span { animation: reveal-letter 1.1s var(--ease) both; animation-delay: calc(1.1s + var(--i) * 45ms); }
@keyframes reveal-letter { from { opacity: 0; transform: translateY(8px); } }
.reveal-kicker, .reveal-title small, .reveal-meta, .reveal-tag, .reveal-actions { animation-name: fade-up-soft; animation-timing-function: var(--ease); animation-duration: 1s; }

/* ------------------------------------------------------------------ Connexion */
.auth-top { position: fixed; top: 24px; right: 28px; z-index: 5; }
.auth { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 72px 20px 40px; }
.auth-brand { display: grid; justify-items: center; text-align: center; }
.auth-mark { width: 88px; height: 88px; }
.auth-mark .logo-mark { width: 100%; height: 100%; }
.auth-word { margin-top: 26px; display: flex; font-size: 24px; font-weight: 500; letter-spacing: .5em; margin-right: -.5em; }
.auth-word span { display: inline-block; animation: auth-letter 1.2s var(--ease) both; animation-delay: calc(.45s + var(--i) * 80ms); }
@keyframes auth-letter { from { opacity: 0; transform: translateY(8px); } }
.auth-tagline { margin-top: 14px; font-size: 15px; color: var(--text-2); animation: fade-up-soft 1.1s var(--ease) 1.05s both; }
.auth-card { margin-top: 42px; width: min(420px, 100%); padding: 32px; border-radius: 28px; animation: fade-up-soft 1.1s var(--ease) 1.25s both; }
.auth-viewport { overflow: hidden; transition: height .55s var(--ease); }
.auth-step h2 { font-size: 26px; font-weight: 650; letter-spacing: -.035em; }
.auth-step .sub { margin-top: 6px; font-size: 15px; }
.auth-form { margin-top: 24px; display: grid; gap: 16px; }
.auth-form .btn { height: 50px; margin-top: 2px; }
.enter-first { animation: fade-up-soft .8s var(--ease) both; }
.enter-fwd { animation: pane-in-f .6s var(--ease) both; }
.enter-back { animation: pane-in-b .6s var(--ease) both; }
.leave-fwd { animation: pane-out-f .26s ease forwards; }
.leave-back { animation: pane-out-b .26s ease forwards; }
@keyframes pane-in-f { from { opacity: 0; transform: translateX(18px); } }
@keyframes pane-in-b { from { opacity: 0; transform: translateX(-18px); } }
@keyframes pane-out-f { to { opacity: 0; transform: translateX(-14px); } }
@keyframes pane-out-b { to { opacity: 0; transform: translateX(14px); } }
.auth-back { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin-bottom: 18px; padding: 6px 12px 6px 8px; border-radius: 999px; font-size: 13px; color: var(--text-2); background: var(--card-inset); border: 1px solid var(--stroke); transition: color .3s, border-color .3s; }
.auth-back span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-back .ic { width: 15px; height: 15px; }
.auth-back:hover { color: var(--text); border-color: var(--stroke-2); }
.auth-dots { display: flex; gap: 8px; margin-top: 24px; animation: fade-up-soft 1s var(--ease) 1.4s both; }
.auth-dots li { width: 22px; height: 2px; border-radius: 2px; background: var(--stroke-2); transition: background .6s var(--ease); }
.auth-dots li.on { background: var(--grad); }
.auth .fineprint { margin-top: 16px; animation: fade-up-soft 1s var(--ease) 1.5s both; }
.pw-meter { display: block; height: 2px; margin-top: -6px; border-radius: 2px; background: var(--stroke); overflow: hidden; }
.pw-meter i { display: block; height: 100%; width: 0; background: var(--grad); transition: width .5s var(--ease); }
.auth-done { display: grid; justify-items: center; text-align: center; padding: 10px 0 6px; }
.done-check { width: 60px; height: 60px; margin-bottom: 18px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.done-check circle { stroke: var(--stroke-2); stroke-width: 1.5; }
.done-check path { stroke: var(--accent); stroke-width: 2.5; stroke-dasharray: 40; stroke-dashoffset: 40; animation: check-draw .9s var(--ease) .25s forwards; }
@keyframes check-draw { to { stroke-dashoffset: 0; } }

/* ------------------------------------------------------------------ Portrait : listes */
.lead-p { font-size: 16px; line-height: 1.7; color: var(--text-2); }
.checks { display: grid; gap: 10px; }
.checks li { position: relative; padding-left: 28px; font-size: 15px; line-height: 1.5; }
.checks li::before { content: ''; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); background: var(--accent-soft); }
.checks li::after { content: ''; position: absolute; left: 6px; top: 7px; width: 6px; height: 9px; border: solid var(--accent); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.learn { display: grid; gap: 2px; }
.learn li { display: flex; align-items: baseline; gap: 14px; padding: 11px 0; border-top: 1px solid var(--stroke); font-size: 15px; font-weight: 500; }
.learn li:first-child { border-top: 0; }
.learn .tnum { font-size: 12px; font-weight: 600; color: var(--text-3); }
.challenge .kicker { display: flex; align-items: center; gap: 8px; color: var(--accent); }
.profile-hero { grid-template-columns: auto 1fr minmax(240px, 320px); }

/* ------------------------------------------------------------------ Les 35 profils, par famille */
.fam { margin-top: 20px; display: grid; gap: 4px; }
.fam-row { display: grid; grid-template-columns: 168px minmax(0, 1fr); align-items: center; gap: 12px; padding: 6px 8px; border-radius: 14px; }
.fam-row.is-own { background: var(--card-inset); }
.fam-name { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; }
.fam-name .emblem { flex: none; }
.fam-levels { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.fam-cell { display: flex; align-items: center; gap: 8px; min-width: 0; height: 38px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--stroke); background: var(--card); font-size: 13px; color: var(--text-2); text-align: left; transition: border-color .4s var(--ease), color .4s var(--ease), background-color .4s var(--ease); }
.fam-cell:hover { border-color: var(--stroke-2); color: var(--text); background: var(--card-hover); }
.fam-l { width: 18px; height: 18px; flex: none; display: grid; place-items: center; border-radius: 6px; font-size: 11px; font-weight: 700; background: var(--card-inset); color: var(--text-3); }
.fam-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fam-cell.is-cur { color: var(--text); font-weight: 600; border-color: transparent; background: linear-gradient(var(--menu-bg), var(--menu-bg)) padding-box, var(--grad) border-box; }
.fam-cell.is-cur .fam-l { background: var(--grad); color: #fff; }
.fam-legend { display: flex; gap: 18px; flex-wrap: wrap; margin: 10px 0 0 188px; font-size: 12px; color: var(--text-3); }
.fam-legend b { margin-right: 6px; color: var(--text-2); }

/* Fiche d’un profil */
html.no-scroll { overflow: hidden; }
.sheet { position: fixed; inset: 0; z-index: 150; pointer-events: none; }
.sheet.open { pointer-events: auto; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(3, 5, 12, .42); opacity: 0; transition: opacity .5s var(--ease); }
.sheet.open .sheet-backdrop { opacity: 1; }
.sheet-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(560px, 100%); display: flex; flex-direction: column; background: var(--menu-bg); border-left: 1px solid var(--stroke-2); box-shadow: var(--shadow-lg); transform: translateX(32px); opacity: 0; transition: transform .6s var(--ease), opacity .45s var(--ease); }
.sheet.open .sheet-panel { transform: none; opacity: 1; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--stroke); }
.sheet-nav { display: flex; align-items: center; gap: 10px; }
.sheet-nav .icon-btn:disabled { opacity: .3; }
.sheet-body { overflow-y: auto; padding: 28px 32px 56px; display: grid; gap: 30px; }
.sheet-hero { display: flex; align-items: center; gap: 18px; }
.sheet-hero .emblem { flex: none; }
.sheet-hero h2 { margin-top: 4px; font-size: 32px; font-weight: 700; letter-spacing: -.045em; line-height: 1.05; }
.sheet-tag { margin-top: 6px; color: var(--text-2); }
.sheet-body h3 { font-size: 12.5px; font-weight: 600; color: var(--text-3); margin-bottom: 12px; }
.sheet-body .prose p { font-size: 15px; }
.sheet-challenge { padding: 20px; border-radius: 18px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); }

@media (max-width: 860px) {
  .nav-in { height: 64px; }
  .nav-links { display: none; }
  .nav-mobile .nav-link { height: 34px; padding: 0 14px; border-radius: 999px; background: var(--card-inset) !important; }
  .nav-mobile .nav-link[aria-current="page"] { background: var(--card-strong) !important; box-shadow: inset 0 0 0 1px var(--stroke) !important; }
  .tabs { top: 108px; }
  .tabs-in { gap: 22px; overflow-x: auto; }
  .fam-row { grid-template-columns: 1fr; }
  .fam-levels { grid-template-columns: repeat(5, minmax(136px, 1fr)); overflow-x: auto; padding-bottom: 4px; }
  .fam-legend { margin-left: 0; }
  .profile-hero { grid-template-columns: 1fr; }
  .sheet-body { padding: 22px 20px 48px; }
  .auth-word { font-size: 19px; }
}

/* ==========================================================================
   v6 : cérémonie, machine à écrire, échelle à cinq paliers
   ========================================================================== */

/* Cérémonie de connexion / déconnexion : voir « v58 · Rideau » */
#app { transition: opacity .7s var(--ease), filter .7s var(--ease), transform .9s var(--ease); }

/* Machine à écrire */
.tw-off { opacity: 0; }
.tw-caret { display: inline-block; width: 2px; height: 1.02em; margin: 0 1px -0.14em 2px; border-radius: 1px; background: var(--accent, var(--g2)); vertical-align: baseline; animation: tw-blink 1s steps(1) infinite; transition: opacity .6s var(--ease); }
.tw-caret.done { opacity: 0; animation: none; }
@keyframes tw-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
.grad-text .tw-caret { background: var(--g2); }

/* Jauge de difficulté à cinq barres */
.lvl-bars { gap: 2px; height: 12px; }
.lvl-bars i:nth-child(1) { height: 4px; } .lvl-bars i:nth-child(2) { height: 6px; } .lvl-bars i:nth-child(3) { height: 8px; }
.lvl-bars i:nth-child(4) { height: 10px; } .lvl-bars i:nth-child(5) { height: 12px; }
.lvl-bars[data-l] i { background: var(--stroke-2); }
.lvl-bars[data-l="1"] i:nth-child(-n+1), .lvl-bars[data-l="2"] i:nth-child(-n+2), .lvl-bars[data-l="3"] i:nth-child(-n+3),
.lvl-bars[data-l="4"] i:nth-child(-n+4), .lvl-bars[data-l="5"] i { background: var(--grad); }

/* Échelle à cinq paliers */
.scale { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 26px 0 6px; padding-top: 14px; }
.scale-seg { display: grid; gap: 9px; text-align: center; }
.scale-seg i { display: block; height: 6px; border-radius: 3px; background: var(--stroke); transition: background .6s var(--ease); }
.scale-seg.in-band i { background: color-mix(in srgb, var(--g2) 32%, var(--stroke)); }
.scale-seg.is-tier i { background: var(--grad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--g2) 14%, transparent); }
.scale-seg b { font-size: 11.5px; font-weight: 600; color: var(--text-3); letter-spacing: -.005em; }
.scale-seg.is-tier b { color: var(--text); }
.scale-mark { position: absolute; top: 0; width: 0; height: 0; transform: translateX(-50%); border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid var(--text); animation: fade-to .6s ease forwards .6s; opacity: 0; }
.traj-stats { grid-template-columns: repeat(3, auto); }

/* Trajectoire : bande de confiance, légende */
.tj-band { opacity: 0; animation: fade-to .9s ease forwards 1s; }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { display: inline-block; flex: none; }
.lg-ok { width: 10px; height: 10px; border-radius: 3px; background: var(--g2); }
.lg-ko { width: 10px; height: 10px; border-radius: 3px; border: 2px solid var(--bad); box-sizing: border-box; }
.lg-line { width: 22px; height: 8px; border-radius: 4px; background: linear-gradient(var(--g1), var(--g1)) center / 100% 2px no-repeat, color-mix(in srgb, var(--g2) 22%, transparent); }

@media (max-width: 760px) {
  .scale-seg b { font-size: 10px; }
  .traj-stats { grid-template-columns: repeat(3, auto); gap: 16px; }
}
@media (prefers-reduced-motion: reduce) { .tw-caret { display: none; } .tw-off { opacity: 1; } }

/* ==========================================================================
   v7 : connexion en deux volets
   ========================================================================== */
.login { height: 100dvh; min-height: 640px; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(420px, .88fr); padding: 14px; gap: 14px; }

/* Volet vitrine : toujours sombre, comme un écrin */
.login-show { position: relative; overflow: hidden; border-radius: 30px; color: #EEF2FA; isolation: isolate;
  background: radial-gradient(120% 80% at 0% 0%, #0E2A4A 0%, rgba(14, 42, 74, 0) 55%),
              radial-gradient(90% 70% at 100% 100%, #2A1B5C 0%, rgba(42, 27, 92, 0) 60%),
              linear-gradient(160deg, #050A18 0%, #070B1C 55%, #0A0820 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 40px 90px -40px rgba(4, 8, 30, .7);
  animation: show-in 1.2s var(--ease) both; }
@keyframes show-in { from { opacity: 0; transform: scale(.985); } }
.login-show::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 30%); mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000); padding: 1px; -webkit-mask-composite: xor; mask-composite: exclude; }
.show-lattice { position: absolute; right: -340px; bottom: -360px; width: 760px; height: 760px; opacity: .32; z-index: -1; animation: lattice-turn 120s linear infinite; }
.show-lattice .logo-mark { width: 100%; height: 100%; }
@keyframes lattice-turn { to { transform: rotate(360deg); } }
.show-glow { position: absolute; width: 520px; height: 520px; left: -160px; top: 30%; border-radius: 50%; z-index: -1; background: radial-gradient(closest-side, rgba(34, 211, 238, .16), transparent); filter: blur(10px); animation: glow-drift 18s ease-in-out infinite alternate; }
@keyframes glow-drift { to { transform: translate(120px, -80px); } }
.show-in { position: relative; height: 100%; display: flex; flex-direction: column; padding: clamp(30px, 4vw, 52px); gap: 28px; }
.show-brand { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 500; letter-spacing: .42em; }
.show-hero { margin-top: auto; max-width: 600px; }
.show-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(226, 234, 250, .62); }
.show-dot { width: 6px; height: 6px; border-radius: 50%; background: #22D3EE; box-shadow: 0 0 0 4px rgba(34, 211, 238, .15); animation: pulse-dot 2.4s ease-in-out infinite; }
@keyframes pulse-dot { 50% { box-shadow: 0 0 0 7px rgba(34, 211, 238, 0); } }
.show-title { margin-top: 18px; font-size: clamp(34px, 3.6vw, 52px); font-weight: 650; line-height: 1.03; letter-spacing: -.045em; }
.show-title em { font-style: normal; background: linear-gradient(110deg, #67E8F9 0%, #60A5FA 45%, #C4B5FD 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.show-lead { margin-top: 18px; max-width: 470px; font-size: 16.5px; line-height: 1.55; color: rgba(226, 234, 250, .66); }

/* Démonstration */
.demo { max-width: 560px; padding: 18px 20px 16px; border-radius: 22px; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .09);
  backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.demo.is-out { opacity: .25; transform: translateY(4px); }
.demo-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.demo-app { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600; }
.demo-app-ic { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; background: rgba(96, 165, 250, .14); color: #93C5FD; }
.demo-app-ic .ic { width: 15px; height: 15px; }
.demo-live { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: rgba(226, 234, 250, .5); letter-spacing: .02em; }
.demo-live i { width: 6px; height: 6px; border-radius: 50%; background: #34D399; }
.demo-prompt, .demo-out { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; padding-top: 14px; }
.demo-who { font-size: 11px; font-weight: 600; color: rgba(226, 234, 250, .45); padding-top: 3px; letter-spacing: .04em; }
.demo-ai { padding-top: 0; }
.demo-ai .logo-mark { width: 18px; height: 18px; }
.demo-prompt-txt { min-height: 46px; font-size: 14.5px; line-height: 1.55; color: #F2F5FB; }
.demo-out-txt { height: 158px; overflow: hidden; -webkit-mask: linear-gradient(#000 80%, transparent); mask: linear-gradient(#000 80%, transparent); display: grid; align-content: start; gap: 6px; font-size: 13.5px; line-height: 1.55; color: rgba(226, 234, 250, .78); }
.demo-out-txt { font-size: 13px; line-height: 1.5; }
.demo-out-txt b { color: #F2F5FB; font-weight: 600; }
.demo-out-txt code { font-family: var(--mono); font-size: 12.5px; padding: 1px 6px; border-radius: 6px; background: rgba(96, 165, 250, .14); color: #BFDBFE; }
.demo-line { animation: stream-in .7s var(--ease) both; }
@keyframes stream-in { from { opacity: 0; filter: blur(4px); transform: translateY(3px); } }
.demo-think { display: inline-flex; gap: 5px; padding-top: 8px; }
.demo-think i { width: 6px; height: 6px; border-radius: 50%; background: rgba(147, 197, 253, .8); animation: think 1.1s ease-in-out infinite; }
.demo-think i:nth-child(2) { animation-delay: .15s; } .demo-think i:nth-child(3) { animation-delay: .3s; }
@keyframes think { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.demo-pager { display: flex; gap: 6px; margin-top: 14px; }
.demo-pager i { width: 14px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .14); transition: width .5s var(--ease), background .5s; }
.demo-pager i.on { width: 28px; background: linear-gradient(90deg, #22D3EE, #818CF8); }
.login-show .tw-caret { background: #67E8F9; }

.show-stats { margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .08); }
.show-stats div { padding-right: 18px; }
.show-stats div + div { padding-left: 22px; border-left: 1px solid rgba(255, 255, 255, .08); }
.show-stats dt { font-size: 30px; font-weight: 650; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.show-stats dt sup { font-size: 16px; color: #93C5FD; margin-left: 1px; }
.show-stats dd { margin: 4px 0 0; font-size: 12.5px; line-height: 1.4; color: rgba(226, 234, 250, .55); }

/* Volet formulaire */
.login-side { position: relative; display: flex; flex-direction: column; padding: 18px clamp(24px, 4vw, 64px) 26px; }
.login-top { display: flex; align-items: center; justify-content: space-between; min-height: 48px; }
.login-top .logo { visibility: hidden; }
.login-in { margin: auto 0; width: min(420px, 100%); align-self: center; padding: 36px 0; animation: fade-up-soft 1s var(--ease) .25s both; }
.login-progress { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; }
.login-step { flex: none; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.login-bar { flex: 1; height: 2px; border-radius: 2px; background: var(--stroke); overflow: hidden; }
.login-bar i { display: block; height: 100%; width: 0; background: var(--grad); transition: width .8s var(--ease); }
.login-side .auth-step h2 { font-size: clamp(32px, 3vw, 40px); font-weight: 650; letter-spacing: -.045em; line-height: 1.05; }
.login-side .auth-step .sub { margin-top: 12px; font-size: 15.5px; line-height: 1.55; color: var(--text-2); }
.login-side .auth-form { margin-top: 30px; gap: 18px; }
.login-side .field input { height: 56px; border-radius: 16px; font-size: 16px; padding: 0 18px; }
.login-side .auth-form .btn { height: 56px; border-radius: 16px; font-size: 15.5px; gap: 10px; }
.login-side .auth-form .btn .ic { width: 18px; height: 18px; transition: transform .4s var(--ease); }
.login-side .auth-form .btn:hover .ic { transform: translateX(3px); }
.auth-perks { margin: 34px 0 0; padding: 22px 0 0; list-style: none; display: grid; gap: 11px; border-top: 1px solid var(--stroke); }
.auth-perks li { display: flex; align-items: center; gap: 11px; font-size: 14px; color: var(--text-2); }
.auth-perks .ic { width: 16px; height: 16px; padding: 3px; box-sizing: content-box; border-radius: 50%; color: var(--accent); background: var(--accent-soft); }
.login-side .fineprint { margin-top: 0; }

@media (max-height: 860px) { .show-lead { display: none; } .show-in { gap: 22px; } }
@media (max-height: 740px) { .show-stats { display: none; } }
@media (max-width: 980px) {
  .login { grid-template-columns: 1fr; padding: 0; height: auto; }
  .login-show { display: none; }
  .login-top .logo { visibility: visible; }
  .login-side { min-height: 100dvh; padding: 16px 22px 22px; }
  .login-in { padding: 24px 0; }
}

/* ==========================================================================
   v7 : environnement professionnel
   ========================================================================== */
.env-card { padding: 26px 28px 28px; }
.env-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.env-card-head .h-card { margin-top: 6px; }
.env-card-head .muted { margin-top: 6px; font-size: 14px; }
.env-tiles { margin-top: 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.env-tile { display: flex; align-items: center; gap: 14px; padding: 14px 16px; min-height: 72px; text-align: left; border-radius: 16px; background: var(--card-inset); border: 1px solid var(--stroke); transition: border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease); }
.env-tile:hover { border-color: var(--stroke-2); background: var(--card-hover); transform: translateY(-1px); }
.env-tile-ic { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: var(--accent); background: var(--accent-soft); }
.env-tile-ic .ic { width: 18px; height: 18px; }
.env-tile-txt { display: grid; gap: 3px; min-width: 0; }
.env-tile-txt small { font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.env-tile-txt b { font-size: 14.5px; font-weight: 600; line-height: 1.3; color: var(--text); }
.env-tile.is-empty b { color: var(--text-3); font-weight: 500; }
.env-tile.is-empty .env-tile-ic { color: var(--text-3); background: var(--card-inset); }
@media (max-width: 900px) { .env-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .env-tiles { grid-template-columns: 1fr; } .env-card-head { flex-direction: column; } .env-card { padding: 22px; } }

/* Panneau générique : titre, pied collant */
.sheet-title-wrap { display: grid; gap: 2px; }
.sheet-title { font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.sheet-sub { font-size: 12.5px; color: var(--text-3); }
.sheet-panel .sheet-body { flex: 1; }
.sheet-foot { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--stroke); background: var(--menu-bg); }
.sheet-foot-note { margin-right: auto; font-size: 13px; color: var(--text-3); }
.sheet-env .sheet-body { gap: 0; padding-top: 6px; }
.env-q { padding: 24px 0; border-bottom: 1px solid var(--stroke); scroll-margin-top: 10px; }
.env-q:last-child { border-bottom: 0; }
.env-q-head { display: flex; gap: 14px; align-items: flex-start; }
.env-q-ic { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: var(--accent); background: var(--accent-soft); }
.env-q-ic .ic { width: 17px; height: 17px; }
.sheet-body .env-q h3 { margin: 0; font-size: 15px; font-weight: 650; color: var(--text); letter-spacing: -.01em; }
.env-q-head p { margin-top: 2px; font-size: 13.5px; color: var(--text-2); }
.env-opts { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px; padding-left: 48px; }
.env-opt { padding: 9px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 500; color: var(--text-2); background: var(--card-inset); border: 1px solid var(--stroke); transition: all .3s var(--ease); }
.env-opt:hover { color: var(--text); border-color: var(--stroke-2); }
.env-opt.is-sel { color: var(--text); border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: var(--accent-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent); }
@media (max-width: 560px) { .env-opts { padding-left: 0; } }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 300; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px 12px 14px; border-radius: 999px; font-size: 14px; font-weight: 500;
  color: var(--text); background: var(--menu-bg); border: 1px solid var(--stroke-2); box-shadow: var(--shadow-lg); transform: translate(-50%, 16px); opacity: 0; transition: transform .5s var(--ease), opacity .4s var(--ease); }
.toast.in { transform: translate(-50%, 0); opacity: 1; }
.toast .ic { width: 18px; height: 18px; color: var(--good); }

/* ==========================================================================
   v7 : Pratiquer, bibliothèque de prompts
   ========================================================================== */
.link-btn { font-size: 13.5px; font-weight: 600; color: var(--accent); padding: 4px 2px; border-radius: 6px; }
.link-btn:hover { text-decoration: underline; text-underline-offset: 3px; }

/* En-tête */
.pl-hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .9fr); gap: 28px; align-items: stretch; padding: 18px 0 10px; }
.pl-hero-txt { display: flex; flex-direction: column; justify-content: center; }
.pl-hero h1 { margin-top: 12px; font-size: clamp(32px, 3.7vw, 50px); font-weight: 700; letter-spacing: -.045em; line-height: 1.04; max-width: 760px; }
.pl-hero .sub { margin-top: 16px; max-width: 600px; font-size: 16px; line-height: 1.6; color: var(--text-2); }
.pl-role { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 14px; padding: 12px 16px 12px 12px; border-radius: 18px; background: var(--card); border: 1px solid var(--stroke); align-self: flex-start; backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.pl-role-ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: var(--accent); background: var(--accent-soft); }
.pl-role-ic .ic { width: 19px; height: 19px; }
.pl-role > span:nth-child(2) { display: grid; gap: 1px; }
.pl-role small { font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.pl-role b { font-size: 15px; font-weight: 650; }
.pl-role-n { font-size: 13px; color: var(--text-3); padding-left: 14px; border-left: 1px solid var(--stroke); }

/* Prompt du jour */
.pl-daily { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 26px; border-radius: 26px; cursor: pointer; isolation: isolate;
  background: var(--card); border: 1px solid var(--stroke); box-shadow: var(--shadow); transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s; }
.pl-daily::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: radial-gradient(80% 70% at 100% 0%, color-mix(in srgb, var(--app) 26%, transparent), transparent 70%), radial-gradient(60% 60% at 0% 100%, color-mix(in srgb, var(--g1) 12%, transparent), transparent 70%); }
.pl-daily::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(140deg, color-mix(in srgb, var(--app) 60%, transparent), transparent 40%, transparent 70%, color-mix(in srgb, var(--g3) 40%, transparent)); -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000); -webkit-mask-composite: xor; mask-composite: exclude; }
.pl-daily:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.pl-daily-head { display: flex; align-items: center; justify-content: space-between; }
.pl-daily-k { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); }
.pl-daily-k .ic { width: 15px; height: 15px; color: var(--accent); }
.pl-daily h2 { margin-top: 10px; font-size: 24px; font-weight: 680; letter-spacing: -.03em; line-height: 1.15; }
.pl-daily p { font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.pl-daily-foot { margin-top: auto; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--stroke); }
.pl-daily-go { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--text); }
.pl-daily-go .ic { width: 16px; height: 16px; transition: transform .4s var(--ease); }
.pl-daily:hover .pl-daily-go .ic { transform: translateX(3px); }

/* Pastille d’application */
.pc-app { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.pc-app-ic { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: var(--app); background: color-mix(in srgb, var(--app) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app) 22%, transparent); }
.pc-app-ic .ic { width: 15px; height: 15px; }

/* Niveau : trois traits */
.plvl { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 600; color: var(--text-3); }
.plvl i { width: 4px; height: 10px; border-radius: 2px; background: var(--stroke-2); }
.plvl i:nth-child(2) { margin-right: 0; } .plvl i:nth-child(3) { margin-right: 6px; }
.plvl[data-l="1"] i:nth-child(1), .plvl[data-l="2"] i:nth-child(-n+2), .plvl[data-l="3"] i { background: var(--grad); }
.pl-chip .plvl i:nth-child(3) { margin-right: 4px; }

/* Barre de filtres, collante sous la navigation */
.pl-bar { position: sticky; top: var(--nav-h, 76px); z-index: 20; margin: 26px -18px 0; padding: 16px 18px 14px; display: grid; gap: 14px; border-radius: 0 0 22px 22px;
  background: color-mix(in srgb, var(--bg) 95%, transparent); backdrop-filter: saturate(160%) blur(28px); -webkit-backdrop-filter: saturate(160%) blur(28px); }
.pl-bar::after { content: ""; position: absolute; left: 18px; right: 18px; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--stroke-2), transparent); }
.pl-bar-row { display: flex; align-items: center; gap: 14px; }
.pl-search { flex: 1; position: relative; display: flex; align-items: center; height: 52px; padding: 0 14px 0 16px; gap: 12px; border-radius: 16px; background: var(--card-strong); border: 1px solid var(--stroke); box-shadow: var(--shadow); transition: border-color .3s, box-shadow .3s; }
.pl-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.pl-search > .ic { width: 19px; height: 19px; color: var(--text-3); flex: none; }
.pl-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; font: inherit; font-size: 15.5px; color: var(--text); outline: none; }
.pl-search input::placeholder { color: var(--text-3); }
.pl-search input::-webkit-search-cancel-button { filter: grayscale(1); opacity: .5; }
.pl-search kbd { flex: none; }
.pl-scope { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--stroke); }
.pl-scope-l { display: grid; line-height: 1.2; cursor: pointer; }
.pl-scope-l b { font-size: 13.5px; font-weight: 650; }
.pl-scope-l span { font-size: 12px; color: var(--text-3); white-space: nowrap; max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.pl-role-sel select { height: 34px; padding: 0 30px 0 12px; border-radius: 10px; border: 1px solid var(--stroke-2); background: var(--card-strong) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23858EA4' stroke-width='2'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 8px center / 15px; appearance: none; font: inherit; font-size: 13px; color: var(--text); }
.switch { position: relative; flex: none; width: 42px; height: 24px; border-radius: 999px; background: var(--stroke-2); transition: background .35s var(--ease); }
.switch i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .45s var(--spring); }
.switch.is-on { background: var(--grad); }
.switch.is-on i { transform: translateX(18px); }
.switch:disabled { opacity: .4; cursor: not-allowed; }

.pl-apps { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px; margin: -2px; }
.pl-apps::-webkit-scrollbar { display: none; }
.pl-app { flex: none; display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 14px 0 8px; border-radius: 14px; font-size: 14px; font-weight: 600; color: var(--text-2); border: 1px solid transparent; transition: background .3s var(--ease), border-color .3s, color .3s; }
.pl-app:hover:not(:disabled) { background: var(--card); color: var(--text); }
.pl-app.is-on { background: var(--card-strong); border-color: color-mix(in srgb, var(--app) 45%, var(--stroke)); color: var(--text); box-shadow: 0 6px 18px -10px color-mix(in srgb, var(--app) 70%, transparent); }
.pl-app:disabled { opacity: .35; }
.pl-app-ic { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: var(--app); background: color-mix(in srgb, var(--app) 12%, transparent); }
.pl-app-ic .ic { width: 15px; height: 15px; }
.pl-n { font-size: 11.5px; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; }
.pl-app.is-on .pl-n { color: var(--app); }

.pl-sub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pl-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pl-sep { width: 1px; height: 22px; background: var(--stroke-2); }
.pl-chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 550; color: var(--text-2); background: var(--card-inset); border: 1px solid var(--stroke); transition: all .3s var(--ease); }
.pl-chip:hover:not(:disabled) { color: var(--text); border-color: var(--stroke-2); }
.pl-chip.is-on { color: var(--text); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.pl-chip:disabled { opacity: .35; }
.pl-chip .pl-n:empty { display: none; }
.pl-chip-fav .ic { width: 15px; height: 15px; }
.pl-chip-fav.is-on .ic { color: #F5B83D; fill: #F5B83D; }

.pl-status { display: flex; align-items: center; justify-content: space-between; margin: 22px 0 14px; min-height: 24px; font-size: 14px; color: var(--text-3); }
.pl-status b { color: var(--text); font-weight: 650; }

/* Grille de cartes */
.pl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pc { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; min-height: 300px; padding: 20px 20px 16px; border-radius: 22px; cursor: pointer; isolation: isolate;
  background: var(--card); border: 1px solid var(--stroke); box-shadow: var(--shadow); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s; }
.pc::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 50% at 0% 0%, color-mix(in srgb, var(--app) 13%, transparent), transparent 70%); opacity: .8; transition: opacity .5s; }
.pc:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--app) 35%, var(--stroke)); }
.pc:hover::before { opacity: 1; }
.pc:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.pc-in { animation: pc-in .7s var(--ease) both; animation-delay: calc(var(--i) * 35ms); }
@keyframes pc-in { from { opacity: 0; transform: translateY(10px); } }
.pc-head { display: flex; align-items: center; gap: 10px; }
.pc-head .plvl { margin-left: auto; }
.pc-head .plvl span { display: none; }
.pc-fav { width: 32px; height: 32px; margin: -4px -6px -4px 0; display: grid; place-items: center; border-radius: 10px; color: var(--text-3); transition: color .3s, background .3s, transform .4s var(--spring); }
.pc-fav .ic { width: 17px; height: 17px; }
.pc-fav:hover { color: var(--text); background: var(--card-inset); }
.pc-fav.is-on { color: #F5B83D; }
.pc-fav.is-on .ic { fill: #F5B83D; }
.pc-fav:active { transform: scale(.85); }
.pc h3 { margin-top: 6px; font-size: 17px; font-weight: 650; letter-spacing: -.02em; line-height: 1.25; }
.pc-desc { font-size: 13.5px; line-height: 1.5; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-peek { position: relative; flex: 1; margin-top: 4px; padding: 12px 14px; max-height: 98px; overflow: hidden; border-radius: 14px; font-family: var(--mono); font-size: 11.8px; line-height: 1.6; color: var(--text-3); background: var(--card-inset); border: 1px solid var(--stroke); }
.pc-peek::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 36px; background: linear-gradient(transparent, var(--card-inset-solid, color-mix(in srgb, var(--bg) 80%, transparent))); }
.pv { padding: 0 5px; border-radius: 5px; font-family: var(--font); font-size: .95em; font-weight: 600; color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent); white-space: nowrap; }
.pv::before { content: "["; opacity: .5; } .pv::after { content: "]"; opacity: .5; }
.pv.is-set { color: var(--text); background: color-mix(in srgb, var(--good) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--good) 35%, transparent); white-space: normal; }
.pv.is-set::before, .pv.is-set::after { content: none; }
.pc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--stroke); }
.pc-meta { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12.5px; color: var(--text-3); }
.pc-meta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pc-meta span + span::before { content: "·"; margin-right: 8px; }
.pc-copy { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--text-2); background: var(--card-inset); border: 1px solid var(--stroke); transition: all .3s var(--ease); }
.pc-copy .ic { width: 14px; height: 14px; }
.pc-copy:hover { color: var(--text); border-color: var(--stroke-2); background: var(--card-hover); }
.pl-empty { grid-column: 1 / -1; display: grid; justify-items: center; text-align: center; gap: 10px; padding: 70px 20px; border-radius: 24px; border: 1px dashed var(--stroke-2); }
.pl-empty .ic { width: 22px; height: 22px; }
.pl-more { display: flex; justify-content: center; margin-top: 26px; }
.pl-ideas { margin-top: 30px; }

/* Fiche d’un prompt */
.sheet-prompt .sheet-panel { width: min(720px, 100%); }
.sp-head { display: flex; align-items: center; gap: 14px; }
.sheet-prompt .sheet-body { gap: 26px; }
.sp-hero h2 { margin-top: 8px; font-size: 30px; font-weight: 700; letter-spacing: -.04em; line-height: 1.1; }
.sp-sec-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.sheet-body .sp-sec-h h3 { margin: 0; }
.sp-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sp-field { display: grid; gap: 6px; }
.sp-field:has(textarea) { grid-column: 1 / -1; }
.sp-field span { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.sp-field input, .sp-field textarea { width: 100%; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--stroke-2); background: var(--card-inset); font: inherit; font-size: 14px; color: var(--text); resize: vertical; transition: border-color .3s, box-shadow .3s, background .3s; }
.sp-field input { height: 44px; }
.sp-field input:focus, .sp-field textarea:focus { outline: none; border-color: var(--accent); background: var(--card-strong); box-shadow: 0 0 0 4px var(--accent-soft); }
.sp-hint { margin-top: 12px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-3); }
.sp-hint .ic { width: 15px; height: 15px; flex: none; }
.sp-text { padding: 20px 22px; border-radius: 18px; white-space: pre-wrap; font-family: var(--mono); font-size: 13px; line-height: 1.75; color: var(--text); background: var(--card-inset); border: 1px solid var(--stroke); }
.sp-tip { display: flex; gap: 14px; padding: 18px 20px; border-radius: 18px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent); }
.sp-tip p { font-size: 14px; line-height: 1.6; color: var(--text); }
.sp-tip-ic { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: var(--grad); color: #fff; }
.sp-tip-ic .ic { width: 17px; height: 17px; }
.sp-similar { display: grid; gap: 8px; }
.sp-sim { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; text-align: left; border: 1px solid var(--stroke); background: var(--card-inset); transition: border-color .3s, background .3s; }
.sp-sim:hover { border-color: var(--stroke-2); background: var(--card-hover); }
.sp-sim > span:nth-child(2) { flex: 1; display: grid; gap: 2px; }
.sp-sim b { font-size: 14px; font-weight: 600; }
.sp-sim small { font-size: 12px; color: var(--text-3); }
.sp-sim > .ic { width: 16px; height: 16px; color: var(--text-3); }
.sheet-prompt .sheet-foot { gap: 8px; }
.sp-fav { margin-right: auto; color: var(--text-3); border: 1px solid var(--stroke); }
.sp-fav.is-on { color: #F5B83D; } .sp-fav.is-on .ic { fill: #F5B83D; }
.sp-open { display: flex; gap: 4px; }
.sp-open .btn .ic { width: 14px; height: 14px; margin-left: 6px; opacity: .6; }
.sheet-prompt .sheet-foot .btn-primary .ic { width: 16px; height: 16px; margin-right: 8px; }

@media (max-width: 1100px) { .pl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pl-hero { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .pl-grid { grid-template-columns: 1fr; }
  .pl-bar { margin: 18px -16px 0; padding: 12px 16px; }
  .pl-bar { position: static; }
  .pl-bar-row { flex-direction: column; align-items: stretch; }
  .pl-search { flex: none; }
  .pl-sep { display: none; }
  .pl-hero h1 { font-size: 32px; }
  .pl-scope { height: auto; padding: 10px 12px; flex-wrap: wrap; }
  .pl-search kbd { display: none; }
  .pl-role-n { padding-left: 0; border-left: 0; flex-basis: 100%; }
  .sp-fields { grid-template-columns: 1fr; }
  .sp-open { display: none; }
  .pc { min-height: 0; }
}

.pc-peek .pv { white-space: normal; }
.recent { display: grid; gap: 8px; margin-top: 14px; }

/* ==========================================================================
   v8 : Pratiquer en deux sections, menus déroulants, ouverture rapide, process
   ========================================================================== */
.pl-section { margin-top: 56px; }
.pl-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.pl-sec-k { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.pl-sec-n { font-variant-numeric: tabular-nums; padding: 3px 8px; border-radius: 8px; letter-spacing: .04em; color: var(--accent); background: var(--accent-soft); }
.pl-sec-head h2 { margin-top: 10px; font-size: clamp(26px, 2.6vw, 34px); font-weight: 700; letter-spacing: -.04em; line-height: 1.1; }
.pl-sec-head .muted { margin-top: 8px; font-size: 14.5px; max-width: 620px; }
.pl-sec-tools { flex: none; }

/* Barre de la bibliothèque : une seule ligne */
.pl-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 0; }
.pl-bar .pl-search { flex: 1 1 320px; min-width: 260px; }
.pl-dds { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pl-status { margin: 18px 0 14px; gap: 14px; flex-wrap: wrap; justify-content: flex-start; }
.pl-active { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pl-pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: var(--text); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); transition: background .25s; }
.pl-pill .ic { width: 13px; height: 13px; opacity: .6; }
.pl-pill:hover .ic { opacity: 1; }
.pl-fav-t { display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 16px; border-radius: 16px; font-size: 14px; font-weight: 600; color: var(--text-2); background: var(--card); border: 1px solid var(--stroke); transition: all .3s var(--ease); }
.pl-fav-t .ic { width: 17px; height: 17px; }
.pl-fav-t:hover { color: var(--text); border-color: var(--stroke-2); }
.pl-fav-t.is-on { color: var(--text); border-color: color-mix(in srgb, #F5B83D 60%, transparent); background: color-mix(in srgb, #F5B83D 10%, var(--card)); }
.pl-fav-t.is-on .ic { color: #F5B83D; fill: #F5B83D; }

/* Menu déroulant */
.dd { position: relative; }
.dd-btn { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 12px 0 10px; min-width: 150px; border-radius: 16px; text-align: left; background: var(--card); border: 1px solid var(--stroke); transition: border-color .3s var(--ease), background .3s, box-shadow .3s; }
.dd-btn:hover { border-color: var(--stroke-2); }
.dd.is-open .dd-btn { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); background: var(--card-strong); }
.dd.has-value .dd-btn { background: var(--card-strong); border-color: color-mix(in srgb, var(--accent) 40%, var(--stroke)); }
.dd-txt { flex: 1; display: grid; line-height: 1.2; min-width: 0; }
.dd-txt small { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.dd-txt b { font-size: 14px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.dd:not(.has-value) .dd-txt b { color: var(--text-2); font-weight: 550; }
.dd-caret { width: 16px; height: 16px; color: var(--text-3); transition: transform .35s var(--ease); }
.dd.is-open .dd-caret { transform: rotate(180deg); }
.dd-ic { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: var(--app); background: color-mix(in srgb, var(--app) 13%, transparent); }
.dd-ic .ic { width: 16px; height: 16px; }
.dd-ic-plain { color: var(--text-2); background: var(--card-inset); }
.dd-menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; min-width: 280px; max-height: min(440px, 60vh); overflow-y: auto; padding: 6px; border-radius: 18px;
  background: var(--menu-bg); border: 1px solid var(--stroke-2); box-shadow: var(--shadow-lg); animation: dd-in .28s var(--ease) both; transform-origin: top left; }
.dd-menu.to-left { left: auto; right: 0; transform-origin: top right; }
@keyframes dd-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.dd-opt { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; min-height: 42px; border-radius: 12px; text-align: left; font-size: 14px; color: var(--text); transition: background .2s; }
.dd-opt:hover:not(:disabled), .dd-opt:focus-visible { background: var(--card-inset); outline: none; }
.dd-opt:disabled { opacity: .35; }
.dd-opt .dd-ic { width: 28px; height: 28px; }
.dd-opt-l { flex: 1; display: grid; gap: 1px; font-weight: 550; }
.dd-opt-l small { font-size: 12px; font-weight: 450; color: var(--text-3); }
.dd-n { font-size: 12px; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; padding: 1px 7px; border-radius: 999px; background: var(--card-inset); }
.dd-check { width: 18px; display: grid; place-items: center; color: var(--accent); opacity: 0; }
.dd-check .ic { width: 16px; height: 16px; }
.dd-opt.is-sel { background: var(--accent-soft); }
.dd-opt.is-sel .dd-check { opacity: 1; }
.dd-sep { height: 1px; margin: 5px 8px; background: var(--stroke); }
.dd-opt .plvl i:nth-child(3) { margin-right: 0; }

/* Actions de carte */
.pc-acts { display: inline-flex; gap: 6px; }
.pc-act { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: var(--text-2); background: var(--card-inset); border: 1px solid var(--stroke); transition: all .3s var(--ease); }
.pc-act .ic { width: 15px; height: 15px; }
.pc-act:hover { color: var(--text); border-color: var(--stroke-2); background: var(--card-hover); transform: translateY(-1px); }
.pc-open .as-glyph { width: 20px; height: 20px; font-size: 9px; border-radius: 6px; }

/* Glyphe d’assistant : monogramme neutre, teinté */
.as-glyph { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px; font-size: 10.5px; font-weight: 750; letter-spacing: -.02em; color: #fff;
  background: linear-gradient(140deg, color-mix(in srgb, var(--as) 92%, #fff), color-mix(in srgb, var(--as) 80%, #000)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18), 0 2px 6px -2px color-mix(in srgb, var(--as) 70%, transparent); }

/* Bouton scindé « Ouvrir dans » */
.as-split { position: relative; display: inline-flex; align-items: stretch; height: 48px; border-radius: 15px; background: var(--grad); box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--g2) 80%, transparent); }
.as-split.sm { height: 38px; border-radius: 12px; }
.as-main { display: inline-flex; align-items: center; gap: 10px; padding: 0 14px 0 10px; color: #fff; font-size: 14.5px; font-weight: 500; border-radius: 15px 0 0 15px; transition: background .25s; }
.as-main b { font-weight: 700; }
.as-split.sm .as-main { font-size: 13.5px; gap: 8px; padding: 0 12px 0 8px; border-radius: 12px 0 0 12px; }
.as-split.sm .as-glyph { width: 22px; height: 22px; }
.as-main:hover, .as-more:hover { background: rgba(255, 255, 255, .12); }
.as-more { width: 40px; display: grid; place-items: center; color: #fff; border-left: 1px solid rgba(255, 255, 255, .25); border-radius: 0 15px 15px 0; transition: background .25s; }
.as-split.sm .as-more { width: 34px; border-radius: 0 12px 12px 0; }
.as-more .ic { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.as-split.is-open .as-more .ic { transform: rotate(180deg); }
.as-main .as-glyph { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.as-menu { position: absolute; right: 0; bottom: calc(100% + 10px); z-index: 70; width: 290px; padding: 8px; border-radius: 18px; background: var(--menu-bg); border: 1px solid var(--stroke-2); box-shadow: var(--shadow-lg); animation: dd-in .28s var(--ease) both; transform-origin: bottom right; }
.pp-actions .as-menu { bottom: auto; top: calc(100% + 10px); transform-origin: top right; }
.as-menu-h { padding: 6px 10px 8px; font-size: 11.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.as-menu-f { padding: 8px 10px 4px; margin-top: 4px; border-top: 1px solid var(--stroke); font-size: 12px; color: var(--text-3); }
.as-item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; text-align: left; transition: background .2s; }
.as-item:hover, .as-item:focus-visible { background: var(--card-inset); outline: none; }
.as-item .as-glyph { width: 32px; height: 32px; border-radius: 10px; font-size: 12px; }
.as-item > span:nth-child(2) { flex: 1; display: grid; gap: 1px; }
.as-item b { font-size: 14px; font-weight: 600; color: var(--text); }
.as-item small { font-size: 12px; color: var(--text-3); }
.as-check { color: var(--accent); opacity: 0; } .as-check .ic { width: 16px; height: 16px; }
.as-item.is-pref .as-check { opacity: 1; }
.sheet-prompt .sheet-foot { gap: 10px; }
.sheet-prompt .sheet-foot .btn-glass .ic { width: 16px; height: 16px; margin-right: 8px; }
.sheet-prompt .sheet-body h4, .pp-editor h4 { font-size: 12.5px; font-weight: 600; color: var(--text-3); margin: 0; }
.pe-text-wrap { margin-top: 18px; }

/* Cartes de process */
.proc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.proc { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 18px; border-radius: 24px; color: inherit; text-decoration: none;
  background: var(--card); border: 1px solid var(--stroke); box-shadow: var(--shadow); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s; isolation: isolate; }
.proc::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 60% at 100% 0%, color-mix(in srgb, var(--g2) 10%, transparent), transparent 70%); }
.proc:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--accent) 35%, var(--stroke)); }
.proc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 30px; }
.proc h3 { margin-top: 6px; font-size: 18.5px; font-weight: 680; letter-spacing: -.025em; line-height: 1.22; }
.proc-trigger { font-size: 13.5px; line-height: 1.5; color: var(--text-3); font-style: italic; }
.proc-out { font-size: 14px; line-height: 1.55; color: var(--text-2); flex: 1; }
.proc-foot { margin-top: 6px; padding-top: 14px; display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--stroke); font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.proc-gain { display: inline-flex; align-items: center; gap: 6px; color: var(--good); }
.proc-gain .ic { width: 14px; height: 14px; }
.proc-go { margin-left: auto; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--text); background: var(--card-inset); border: 1px solid var(--stroke); transition: transform .4s var(--ease), background .3s; }
.proc-go .ic { width: 15px; height: 15px; }
.proc:hover .proc-go { transform: translateX(3px); background: var(--accent-soft); }
.proc-state { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 650; padding: 3px 9px; border-radius: 999px; color: var(--accent); background: var(--accent-soft); }
.proc-state.is-done { color: var(--good); background: var(--good-soft); }
.proc-state .ic { width: 13px; height: 13px; }
.proc-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--stroke); }
.proc-bar i { display: block; height: 100%; background: var(--grad); }

/* Chaîne d’applications */
.chain { display: inline-flex; align-items: center; }
.chain-n { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: var(--app); background: color-mix(in srgb, var(--app) 13%, var(--menu-bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app) 25%, transparent); }
.chain-n .ic { width: 14px; height: 14px; }
.chain-l { width: 10px; height: 1.5px; background: var(--stroke-2); }

/* Page d’un process */
.back-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.back-link .ic { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.back-link:hover { color: var(--text); } .back-link:hover .ic { transform: translateX(-3px); }
.pp-hero { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.pp-hero h1 { margin-top: 10px; font-size: clamp(32px, 3.6vw, 48px); font-weight: 700; letter-spacing: -.045em; line-height: 1.05; }
.pp-trigger, .pp-out { margin-top: 16px; display: flex; gap: 14px; font-size: 16px; line-height: 1.55; color: var(--text-2); max-width: 720px; }
.pp-trigger span, .pp-out span { flex: none; width: 76px; padding-top: 3px; font-size: 11.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.pp-out { color: var(--text); }
.pp-side { display: grid; gap: 18px; justify-items: start; padding: 22px; border-radius: 24px; background: var(--card); border: 1px solid var(--stroke); box-shadow: var(--shadow); }
.pp-ring { position: relative; width: 96px; height: 96px; }
.pp-ring-c { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.1; }
.pp-ring-c b { font-size: 26px; font-weight: 700; letter-spacing: -.03em; }
.pp-ring-c span { font-size: 11.5px; color: var(--text-3); }
.pp-facts { display: grid; gap: 10px; width: 100%; margin: 0; }
.pp-facts div { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13.5px; }
.pp-facts dt { color: var(--text-3); } .pp-facts dd { margin: 0; font-weight: 600; text-align: right; }
.pp-facts .plvl span { display: none; }

.pp-steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 14px; position: relative; }
.pp-steps::before { content: ""; position: absolute; left: 19px; top: 24px; bottom: 24px; width: 2px; background: linear-gradient(var(--stroke-2), var(--stroke)); }
.pp-step { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 18px; }
.pp-node { position: relative; z-index: 1; width: 40px; height: 40px; margin-top: 18px; display: grid; place-items: center; border-radius: 50%; font-size: 15px; font-weight: 700; color: var(--text-2); background: var(--menu-bg); border: 1.5px solid var(--stroke-2); transition: all .4s var(--ease); }
.pp-node .ic { width: 18px; height: 18px; }
.pp-step.is-open .pp-node { color: #fff; background: var(--grad); border-color: transparent; box-shadow: 0 0 0 6px var(--accent-soft); }
.pp-step.is-done .pp-node { color: #fff; background: var(--good); border-color: transparent; }
.pp-card { border-radius: 22px; background: var(--card); border: 1px solid var(--stroke); box-shadow: var(--shadow); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); transition: border-color .4s, box-shadow .4s; }
.pp-step.is-open .pp-card { border-color: color-mix(in srgb, var(--accent) 35%, var(--stroke)); box-shadow: var(--shadow-lg); }
.pp-step.is-done:not(.is-open) .pp-card { opacity: .72; }
.pp-card-h { display: flex; align-items: flex-start; gap: 16px; padding: 20px 22px 0; cursor: pointer; }
.pp-card-t { flex: 1; min-width: 0; }
.pp-n { font-size: 11.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.pp-card-t h3 { margin-top: 4px; font-size: 19px; font-weight: 680; letter-spacing: -.025em; }
.pp-card-t p { margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.pp-caret { flex: none; width: 18px; height: 18px; margin-top: 6px; color: var(--text-3); transition: transform .35s var(--ease); }
.pp-step.is-open .pp-caret { transform: rotate(180deg); }
.pp-meta { display: flex; gap: 10px; flex-wrap: wrap; padding: 14px 22px 20px; }
.pp-deliv, .pp-check { flex: 1 1 260px; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; }
.pp-deliv { background: var(--card-inset); border: 1px solid var(--stroke); color: var(--text); }
.pp-check { background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 25%, transparent); color: var(--text); }
.pp-deliv > .ic, .pp-check > .ic { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.pp-deliv > .ic { color: var(--good); } .pp-check > .ic { color: var(--warn); }
.pp-deliv small, .pp-check small { display: block; font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 2px; }
.pp-body { padding: 4px 22px 22px; border-top: 1px solid var(--stroke); animation: fade-up-soft .5s var(--ease) both; }
.pp-prompt-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 0 14px; }
.pp-prompt-t { display: grid; gap: 2px; }
.pp-prompt-t small { font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.pp-prompt-t b { font-size: 15px; font-weight: 650; }
.pp-editor .sp-text { max-height: 340px; overflow-y: auto; font-size: 12.5px; }
.pp-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.pp-actions .btn .ic { width: 15px; height: 15px; margin-right: 6px; }
.pp-done-btn { margin-left: auto; }
.pp-done-btn .ic { margin: 0 0 0 8px !important; }
.pp-step.is-done .pp-done-btn { background: var(--good); }
.pp-complete { margin-top: 18px; display: flex; align-items: center; gap: 18px; padding: 22px 24px; border-radius: 22px; background: var(--good-soft); border: 1px solid color-mix(in srgb, var(--good) 30%, transparent); }
.pp-complete-ic { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--good); color: #fff; }
.pp-complete-ic .ic { width: 22px; height: 22px; }
.pp-complete > div { flex: 1; }
.pp-complete h3 { font-size: 18px; font-weight: 680; }

@media (max-width: 1100px) { .proc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .proc-grid { grid-template-columns: 1fr; }
  .pl-sec-head { flex-direction: column; align-items: stretch; }
  .pl-dds { width: 100%; }
  .pl-dds .dd { flex: 1 1 calc(50% - 4px); }
  .dd-btn { width: 100%; min-width: 0; }
  .pl-fav-t { flex: 1 1 100%; justify-content: center; }
  .pp-hero { grid-template-columns: 1fr; }
  .pp-trigger, .pp-out { flex-direction: column; gap: 4px; }
  .pp-step { grid-template-columns: 30px minmax(0, 1fr); gap: 10px; }
  .pp-node { width: 30px; height: 30px; font-size: 13px; }
  .pp-steps::before { left: 14px; }
  .pp-card-h, .pp-meta, .pp-body { padding-left: 16px; padding-right: 16px; }
  .pp-app-l { display: none; }
  .pp-done-btn { margin-left: 0; width: 100%; justify-content: center; }
  .as-menu { right: auto; left: 0; }
  .sheet-prompt .sheet-foot .btn-glass { display: none; }
}
.proc-foot > span:first-child { white-space: nowrap; }

/* ==========================================================================
   v9 : process en pleine largeur, notation des prompts
   ========================================================================== */
.proc-list { display: grid; gap: 14px; }
.proc-group { display: inline-flex; align-items: center; gap: 10px; margin: 4px 0 2px; font-size: 12.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }

.prow { position: relative; overflow: hidden; display: grid; gap: 22px; padding: 24px 26px 22px; border-radius: 26px; color: inherit; text-decoration: none; isolation: isolate;
  background: var(--card); border: 1px solid var(--stroke); box-shadow: var(--shadow); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .4s; }
.prow::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, color-mix(in srgb, var(--g2) 9%, transparent), transparent 45%); }
.prow::after { content: ""; position: absolute; left: 0; top: 22px; bottom: 22px; width: 3px; border-radius: 0 3px 3px 0; background: var(--grad); opacity: .85; }
.prow:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--accent) 35%, var(--stroke)); }
.prow-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.prow-id { min-width: 0; }
.prow-k { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.prow-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 7px; border-radius: 8px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); }
.prow-badge .ic { width: 13px; height: 13px; }
.prow-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--text-3); }
.prow-k .plvl span { display: inline; }
.prow h3 { margin-top: 10px; font-size: 22px; font-weight: 700; letter-spacing: -.03em; line-height: 1.2; }
.prow-trigger { margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--text-2); max-width: 760px; }
.prow-side { flex: none; display: grid; justify-items: end; gap: 12px; }
.prow-gain { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--good); text-align: right; max-width: 260px; }
.prow-gain .ic { flex: none; width: 15px; height: 15px; }
.prow-cta { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 650; color: var(--text); background: var(--card-strong); border: 1px solid var(--stroke-2); transition: all .35s var(--ease); white-space: nowrap; }
.prow-cta .ic { width: 16px; height: 16px; transition: transform .4s var(--ease); }
.prow:hover .prow-cta:not(.is-done) { color: #fff; background: var(--grad); border-color: transparent; box-shadow: 0 10px 24px -12px color-mix(in srgb, var(--g2) 80%, transparent); }
.prow:hover .prow-cta .ic { transform: translateX(3px); }
.prow-cta.is-done { color: var(--good); background: var(--good-soft); border-color: transparent; }

/* Aperçu des étapes */
.prow-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 0; }
.prow-steps li { position: relative; display: grid; align-content: start; gap: 4px; padding: 0 14px 0 0; }
.prow-steps li::before { content: ""; position: absolute; top: 17px; left: 40px; right: 8px; height: 1.5px; background: linear-gradient(90deg, var(--stroke-2), var(--stroke)); }
.prow-steps li:last-child::before { display: none; }
.prow-node { position: relative; width: 36px; height: 36px; margin-bottom: 8px; display: grid; place-items: center; border-radius: 11px; color: var(--app); background: color-mix(in srgb, var(--app) 13%, var(--menu-bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app) 28%, transparent); }
.prow-node .ic { width: 16px; height: 16px; }
.prow-steps li.is-done .prow-node { color: #fff; background: var(--good); box-shadow: none; }
.prow-n { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.prow-ctl { display: inline-grid; place-items: center; color: var(--warn); }
.prow-ctl .ic { width: 12px; height: 12px; }
.prow-steps b { font-size: 13.5px; font-weight: 650; line-height: 1.3; color: var(--text); }
.prow-steps small { font-size: 12px; line-height: 1.4; color: var(--text-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.proc-more { justify-self: center; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--text); background: var(--card); border: 1px solid var(--stroke-2); transition: border-color .3s, background .3s; }
.proc-more .ic { width: 16px; height: 16px; }
.proc-more:hover { background: var(--card-hover); }
.proc-gen { margin-top: 10px; border-top: 1px solid var(--stroke); padding-top: 14px; }
.proc-gen summary { list-style: none; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.proc-gen summary::-webkit-details-marker { display: none; }
.proc-gen-t { font-size: 13.5px; font-weight: 600; color: var(--accent); }
.proc-gen .proc-list { margin-top: 14px; }

@media (max-width: 900px) {
  .prow-head { flex-direction: column; gap: 14px; }
  .prow-side { justify-items: start; grid-auto-flow: column; align-items: center; }
  .prow-steps { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -26px; padding: 0 26px; }
  .prow-steps::-webkit-scrollbar { display: none; }
  .prow-steps li { flex: 0 0 170px; scroll-snap-align: start; }
}
@media (max-width: 560px) { .prow { padding: 20px; } .prow-side { grid-auto-flow: row; justify-items: start; } .prow-steps { margin: 0 -20px; padding: 0 20px; } .prow h3 { font-size: 19px; } }

/* Notation */
.rt-chip { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; font-size: 12px; font-weight: 700; color: #E0A526; }
.rt-chip small { font-weight: 500; color: var(--text-3); }
.pc-head .rt-chip + .plvl { margin-left: 8px; }
.stars-ro { position: relative; display: inline-block; font-size: 13px; letter-spacing: 1px; line-height: 1; }
.stars-ro span:first-child { color: var(--stroke-2); }
.stars-ro span:last-child { position: absolute; inset: 0; width: var(--v); overflow: hidden; white-space: nowrap; color: #F5B83D; }
.rt { display: grid; gap: 16px; }
.rt-sum { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 26px; align-items: center; padding: 18px 20px; border-radius: 18px; background: var(--card-inset); border: 1px solid var(--stroke); }
.rt-score { display: grid; justify-items: center; gap: 4px; padding-right: 26px; border-right: 1px solid var(--stroke); }
.rt-score b { font-size: 40px; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.rt-score small { font-size: 12px; color: var(--text-3); }
.rt-bars { display: grid; gap: 9px; }
.rt-bar { display: grid; grid-template-columns: 140px minmax(0, 1fr) 30px; align-items: center; gap: 12px; font-size: 13px; color: var(--text-2); }
.rt-bar i { height: 6px; border-radius: 3px; background: var(--stroke); overflow: hidden; }
.rt-bar i b { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #F5B83D, #F59E0B); }
.rt-bar em { font-style: normal; font-weight: 650; color: var(--text); text-align: right; }
.rt-comments { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rt-comments li { display: flex; gap: 12px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--stroke); }
.rt-comments .avatar-sm { width: 30px; height: 30px; font-size: 13px; flex: none; }
.rt-c-h { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.rt-c-h small { color: var(--text-3); margin-left: auto; }
.rt-comments p + p { margin-top: 4px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.rt-empty { font-size: 14px; }
.rt-form { display: grid; gap: 12px; padding: 18px 20px; border-radius: 18px; border: 1px solid var(--stroke); background: var(--card); }
.rt-form-h { font-size: 14px; font-weight: 650; }
.rt-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.rt-l { display: grid; gap: 1px; }
.rt-l b { font-size: 14px; font-weight: 600; }
.rt-l small { font-size: 12.5px; color: var(--text-3); }
.rt-stars { display: inline-flex; gap: 2px; flex: none; }
.rt-star { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; font-size: 21px; line-height: 1; color: var(--stroke-2); transition: color .15s, transform .25s var(--spring); }
.rt-star:hover { transform: scale(1.15); }
.rt-star.on { color: #F5B83D; }
.rt-comment { width: 100%; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--stroke-2); background: var(--card-inset); font: inherit; font-size: 14px; color: var(--text); resize: vertical; }
.rt-comment:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.rt-actions { display: flex; align-items: center; justify-content: space-between; }
.pp-prompt-links { display: inline-flex; align-items: center; gap: 14px; }
.pp-prompt-links .rt-chip { margin: 0; }
@media (max-width: 560px) { .rt-sum { grid-template-columns: 1fr; } .rt-score { border-right: 0; padding-right: 0; } .rt-bar { grid-template-columns: 110px 1fr 28px; } .rt-row { flex-direction: column; align-items: flex-start; gap: 6px; } }
.prow-gain { align-items: flex-start; max-width: 300px; line-height: 1.4; }
.prow-gain .ic { margin-top: 1px; }
@media (max-width: 900px) { .prow-gain { text-align: left; max-width: none; } }
.prow-gain { text-align: left; }

/* ==========================================================================
   v10 : logos des assistants, bouton d’ouverture unique, profils
   ========================================================================== */
.ai-logo { display: block; object-fit: contain; }
:root[data-theme="dark"] .ai-chatgpt { filter: invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ai-chatgpt { filter: invert(1); } }
.as-open { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 16px 0 8px; border-radius: 15px; font-size: 14.5px; color: var(--text);
  background: var(--card-strong); border: 1px solid var(--stroke-2); box-shadow: var(--shadow); transition: transform .35s var(--ease), border-color .3s, box-shadow .3s; }
.as-open b { font-weight: 700; }
.as-open > .ic { width: 15px; height: 15px; color: var(--text-3); margin-left: 2px; transition: transform .35s var(--ease); }
.as-open:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--stroke-2)); box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.as-open:hover > .ic { transform: translate(2px, -2px); color: var(--text); }
.as-logo { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--card-inset); border: 1px solid var(--stroke); }
.as-open.sm { height: 38px; border-radius: 12px; font-size: 13.5px; padding: 0 12px 0 5px; gap: 8px; }
.as-open.sm .as-logo { width: 28px; height: 28px; border-radius: 8px; }
.as-pick { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 14px; font-size: 13.5px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border: 1px dashed color-mix(in srgb, var(--accent) 45%, transparent); }
.as-pick.sm { height: 38px; }
.as-pick .ic { width: 16px; height: 16px; }
.pc-open .ai-logo { width: 16px; height: 16px; }
.env-opt { display: inline-flex; align-items: center; gap: 8px; }
.env-opts.is-stack { flex-direction: column; align-items: stretch; }
.env-opts.is-stack .env-opt { border-radius: 14px; padding: 12px 16px; text-align: left; }
.env-q-head p small { color: var(--text-3); }
.env-tile-ic.is-logo { background: var(--card-strong); border: 1px solid var(--stroke); }
.opt-logo { display: grid; place-items: center; width: 28px; height: 28px; flex: none; }
.pl-sec-tools { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 760px) { .pl-sec-tools { justify-content: stretch; } .pl-sec-tools .dd { flex: 1 1 calc(50% - 4px); } }

/* ==========================================================================
   v11 : onglet Évolution
   ========================================================================== */
.evo-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr); gap: 28px; align-items: center; }
.evo-hero h2 { margin-top: 10px; font-size: clamp(26px, 2.8vw, 36px); font-weight: 700; letter-spacing: -.04em; line-height: 1.1; }
.evo-hero .sub { margin-top: 10px; font-size: 15.5px; color: var(--text-2); }
.evo-kpis { display: grid; gap: 10px; }
.evo-kpis > div { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--card-inset); border: 1px solid var(--stroke); }
.evo-kpis small { font-size: 11.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.evo-kpis b { font-size: 15px; font-weight: 650; }
.dchip { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 24px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dchip.up { color: var(--good); background: var(--good-soft); }
.dchip.down { color: var(--bad); background: var(--bad-soft); }
.dchip.flat { color: var(--text-3); background: var(--card-inset); }

.evo-chart { width: 100%; height: auto; margin-top: 14px; overflow: visible; }
.evo-grid { stroke: var(--stroke); stroke-dasharray: 3 5; }
.evo-ax { font: 600 11px var(--font); fill: var(--text-3); }
.evo-line { fill: none; stroke-width: 2.6; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.4s var(--ease) forwards .2s; }
.evo-line.evo-g { stroke: var(--g2); } .evo-line.evo-k { stroke: var(--g3); stroke-dasharray: 1; }
.evo-pt circle { stroke: var(--menu-bg); stroke-width: 3; opacity: 0; animation: fade-to .4s ease forwards; animation-delay: calc(.4s + var(--i) * .15s); }
.evo-pt.evo-g circle { fill: var(--g2); } .evo-pt.evo-k circle { fill: var(--g3); }
.evo-pt text { font: 700 11.5px var(--font); fill: var(--text); opacity: 0; animation: fade-to .4s ease forwards; animation-delay: calc(.6s + var(--i) * .15s); }
.lg-g, .lg-k { width: 16px; height: 3px; border-radius: 2px; } .lg-g { background: var(--g2); } .lg-k { background: var(--g3); }

.evo-axes { display: grid; gap: 14px; margin-top: 18px; }
.evo-axis { display: grid; grid-template-columns: 120px minmax(0, 1fr) 30px 52px; align-items: center; gap: 12px; font-size: 13.5px; }
.evo-axis-l { color: var(--text-2); font-weight: 550; }
.evo-axis-v { text-align: right; font-weight: 700; }
.evo-track { position: relative; height: 8px; border-radius: 4px; background: var(--stroke); }
.evo-span { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.evo-span.up { background: linear-gradient(90deg, color-mix(in srgb, var(--g2) 30%, transparent), var(--g2)); }
.evo-span.down { background: linear-gradient(90deg, var(--bad), color-mix(in srgb, var(--bad) 30%, transparent)); }
.evo-dot { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; }
.evo-dot.first { background: var(--menu-bg); border: 2px solid var(--text-3); }
.evo-dot.last { background: var(--g2); border: 2px solid var(--menu-bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--g2) 25%, transparent); }

.evo-traits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 40px; margin-top: 20px; }
.evo-trait { display: grid; grid-template-columns: 92px minmax(0, 1fr) 92px; align-items: center; gap: 12px; }
.evo-pole { font-size: 12.5px; font-weight: 600; color: var(--text-3); } .evo-pole.r { text-align: right; }
.evo-ttrack { position: relative; height: 4px; border-radius: 2px; background: var(--stroke-2); }
.evo-tdot { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--g2); opacity: var(--o); }
.evo-tdot.last { width: 16px; height: 16px; margin: -8px 0 0 -8px; opacity: 1; background: var(--grad); border: 2px solid var(--menu-bg); box-shadow: 0 0 0 3px color-mix(in srgb, var(--g2) 22%, transparent); z-index: 1; }
.evo-arrow { position: absolute; top: 50%; height: 2px; margin-top: -1px; background: color-mix(in srgb, var(--g2) 55%, transparent); }
.evo-tl { grid-column: 1 / -1; text-align: center; font-size: 12.5px; color: var(--text-3); margin-top: -2px; }
.evo-tl b { color: var(--text); font-weight: 650; }

.pp-scroll { overflow-x: auto; margin-top: 16px; scrollbar-width: thin; }
.pp-map { width: 100%; min-width: 640px; height: auto; display: block; }
.pp-cell { fill: var(--card-inset); stroke: var(--stroke); }
.pp-cell.is-on { fill: color-mix(in srgb, var(--g2) 14%, transparent); stroke: color-mix(in srgb, var(--g2) 40%, transparent); }
.pp-cell.is-cur { fill: color-mix(in srgb, var(--g2) 24%, transparent); stroke: var(--g2); stroke-width: 1.5; }
.pp-rl, .pp-cl { font: 600 11.5px var(--font); fill: var(--text-3); }
.pp-path { fill: none; stroke: url(#ppg); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.6s var(--ease) forwards .3s; }
.pp-node circle { fill: var(--menu-bg); stroke: var(--g2); stroke-width: 2.5; opacity: 0; animation: fade-to .4s ease forwards; animation-delay: calc(.3s + var(--i) * .25s); }
.pp-node text { font: 700 11px var(--font); fill: var(--text); opacity: 0; animation: fade-to .4s ease forwards; animation-delay: calc(.35s + var(--i) * .25s); }
.pp-node.is-last circle { fill: var(--g2); stroke: var(--menu-bg); }
.pp-node.is-last text { fill: #fff; }
.pp-steps-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.pp-steps-list li { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--stroke); }
.pp-steps-list li.is-last { border-color: color-mix(in srgb, var(--g2) 45%, var(--stroke)); background: var(--accent-soft); }
.pp-sn { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font-size: 12px; font-weight: 700; background: var(--card-inset); border: 1px solid var(--stroke-2); }
.pp-steps-list li.is-last .pp-sn { background: var(--g2); color: #fff; border-color: transparent; }
.pp-steps-list b { display: block; font-size: 14px; font-weight: 650; }
.pp-steps-list small { font-size: 12px; color: var(--text-3); }
@media (max-width: 900px) { .evo-hero { grid-template-columns: 1fr; } .evo-traits { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .evo-axis { grid-template-columns: 90px minmax(0, 1fr) 28px 48px; gap: 8px; } .evo-trait { grid-template-columns: 70px minmax(0, 1fr) 70px; } .evo-kpis > div { grid-template-columns: 1fr auto; } .evo-kpis > div b { grid-column: 1 / -1; grid-row: 2; } }

/* ==========================================================================
   v12 : Apprendre (parcours, fiche de cours, lecteur de module)
   ========================================================================== */
/* Statuts */
.lst { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 650; white-space: nowrap; }
.lst .ic { width: 13px; height: 13px; }
.lst-accent { --tone: var(--accent); } .lst-warm { --tone: #E0A526; } .lst-good { --tone: var(--good); } .lst-muted { --tone: var(--text-3); }
.lst { color: var(--tone); background: color-mix(in srgb, var(--tone) 13%, transparent); }
.lpips { display: inline-flex; gap: 2px; align-items: flex-end; height: 12px; }
.lpips i { width: 4px; border-radius: 1px; background: var(--stroke-2); }
.lpips i:nth-child(1) { height: 4px; } .lpips i:nth-child(2) { height: 6px; } .lpips i:nth-child(3) { height: 8px; } .lpips i:nth-child(4) { height: 10px; } .lpips i:nth-child(5) { height: 12px; }
.lpips[data-l="1"] i:nth-child(-n+1), .lpips[data-l="2"] i:nth-child(-n+2), .lpips[data-l="3"] i:nth-child(-n+3), .lpips[data-l="4"] i:nth-child(-n+4), .lpips[data-l="5"] i { background: var(--grad); }
.ctool { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-2); padding: 3px 9px 3px 5px; border-radius: 8px; background: var(--card-inset); border: 1px solid var(--stroke); align-self: flex-start; }

/* En-tête */
.ln-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, .9fr); gap: 28px; align-items: center; padding: 18px 0 8px; }
.ln-hero h1 { margin-top: 12px; font-size: clamp(32px, 3.7vw, 50px); font-weight: 700; letter-spacing: -.045em; line-height: 1.04; }
.ln-hero .sub { margin-top: 14px; max-width: 620px; font-size: 16px; line-height: 1.6; color: var(--text-2); }
.ln-hero .btn { margin-top: 22px; }
.ln-counts { margin-top: 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; max-width: 640px; }
.ln-count { display: grid; gap: 2px; padding: 14px 16px; border-radius: 16px; text-align: left; background: var(--card); border: 1px solid var(--stroke); transition: transform .35s var(--ease), border-color .3s; }
.ln-count:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--tone) 45%, var(--stroke)); }
.ln-count b { font-size: 28px; font-weight: 700; letter-spacing: -.03em; color: var(--tone); }
.ln-count span { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.ln-next { padding: 22px; border-radius: 24px; background: var(--card); border: 1px solid var(--stroke); box-shadow: var(--shadow); display: grid; gap: 8px; }
.ln-next-k { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); margin-bottom: 4px; }
.ln-next-k .ic { width: 15px; height: 15px; color: var(--accent); }
.ln-next-i { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; color: inherit; text-decoration: none; border: 1px solid var(--stroke); background: var(--card-inset); transition: border-color .3s, background .3s; }
.ln-next-i:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--stroke)); background: var(--card-hover); }
.ln-next-i > span:nth-child(2) { flex: 1; display: grid; gap: 2px; }
.ln-next-i b { font-size: 14px; font-weight: 650; } .ln-next-i small { font-size: 12px; color: var(--text-3); }
.ln-next-i > .ic { width: 16px; height: 16px; color: var(--text-3); }
.ln-next-n { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; font-size: 13px; font-weight: 700; color: #fff; background: var(--grad); }
.ln-bar { margin-top: 30px; }

/* Fiche de cours */
.cs-meta { margin-top: 18px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.cs-meta > span { display: inline-flex; align-items: center; gap: 6px; } .cs-meta .ic { width: 15px; height: 15px; }
.cs-tags { display: flex; gap: 6px; flex-wrap: wrap; }

/* Lecteur de module */
.mp { min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; }
.mp-head { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 16px 20px; padding: 14px 28px; border-bottom: 1px solid var(--stroke); background: var(--nav-bg); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.mp-close { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: var(--text-2); border: 1px solid var(--stroke); }
.mp-close .ic { width: 16px; height: 16px; }
.mp-title { display: grid; line-height: 1.25; min-width: 0; }
.mp-title small { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-title b { font-size: 15px; font-weight: 650; }
.mp-bar { display: flex; gap: 4px; width: min(320px, 30vw); }
.mp-bar i { flex: 1; height: 4px; border-radius: 2px; background: var(--stroke-2); transition: background .5s var(--ease); }
.mp-bar i.on { background: var(--g2); } .mp-bar i.cur { background: var(--grad); }
.mp-stage { display: grid; place-items: center; padding: 40px 24px; overflow: hidden; }
.mp-scene { width: min(860px, 100%); }
.mp-scene.in-next { animation: mp-in .7s var(--ease) both; } .mp-scene.in-prev { animation: mp-in-b .7s var(--ease) both; }
@keyframes mp-in { from { opacity: 0; transform: translateX(28px); } } @keyframes mp-in-b { from { opacity: 0; transform: translateX(-28px); } }
.mp-foot { display: flex; align-items: center; justify-content: space-between; padding: 16px 28px 22px; }
.mp-kbd { font-size: 12px; color: var(--text-3); }
.sc h1 { font-size: clamp(34px, 4.6vw, 60px); font-weight: 700; letter-spacing: -.05em; line-height: 1.03; margin-top: 12px; }
.sc h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 700; letter-spacing: -.04em; line-height: 1.1; }
.sc .sub { margin-top: 16px; font-size: 18px; line-height: 1.6; color: var(--text-2); }
.sc-title { text-align: center; }
.sc-text p { margin-top: 16px; font-size: 18px; line-height: 1.7; color: var(--text-2); max-width: 720px; }
.sc-points ol { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.sc-points li { display: flex; gap: 16px; padding: 18px 20px; border-radius: 18px; background: var(--card); border: 1px solid var(--stroke); animation: fade-up-soft .7s var(--ease) both; animation-delay: calc(.3s + var(--i) * .35s); }
.sc-n { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; font-weight: 700; color: #fff; background: var(--grad); }
.sc-points b { font-size: 17px; font-weight: 650; } .sc-points p { margin-top: 4px; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.tk-box { margin-top: 26px; padding: 26px; border-radius: 24px; background: var(--card); border: 1px solid var(--stroke); box-shadow: var(--shadow); }
.tk-prompt { font-size: 24px; line-height: 1.5; font-weight: 550; letter-spacing: -.01em; }
.tk-prompt small { display: block; font-size: 11.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.tk-out { color: var(--g2); }
.tk-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -0.15em; background: var(--g2); animation: tw-blink 1s steps(1) infinite; }
.tk-cands { margin-top: 22px; display: grid; gap: 8px; min-height: 172px; }
.tk-c { display: grid; grid-template-columns: 150px minmax(0, 1fr) 54px; align-items: center; gap: 14px; padding: 8px 12px; border-radius: 12px; border: 1px solid transparent; animation: fade-up-soft .45s var(--ease) both; transition: background .4s, border-color .4s; }
.tk-c:nth-child(2) { animation-delay: .08s; } .tk-c:nth-child(3) { animation-delay: .16s; } .tk-c:nth-child(4) { animation-delay: .24s; }
.tk-w { font-family: var(--mono); font-size: 15px; font-weight: 600; }
.tk-p { height: 8px; border-radius: 4px; background: var(--stroke); overflow: hidden; }
.tk-p i { display: block; height: 100%; width: var(--w); border-radius: 4px; background: color-mix(in srgb, var(--g2) 45%, var(--stroke-2)); animation: tk-grow .8s var(--ease) both; }
@keyframes tk-grow { from { width: 0; } }
.tk-v { font-size: 13px; font-weight: 650; color: var(--text-2); text-align: right; }
.tk-c.is-on { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.tk-c.is-on .tk-p i { background: var(--grad); }
.tk-note { margin-top: 18px; font-size: 14px; color: var(--text-3); line-height: 1.55; }
.tk-replay { margin-top: 16px; } .tk-replay .ic { width: 15px; height: 15px; margin-right: 6px; }
.cmp { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cmp > div { padding: 20px; border-radius: 18px; border: 1px solid var(--stroke); background: var(--card); }
.cmp-a { border-color: color-mix(in srgb, var(--bad) 30%, var(--stroke)) !important; } .cmp-b { border-color: color-mix(in srgb, var(--good) 35%, var(--stroke)) !important; }
.cmp-l { font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.cmp-t { margin-top: 10px; font-family: var(--mono); font-size: 13.5px; line-height: 1.65; white-space: pre-wrap; }
.cmp-n { margin-top: 12px; font-size: 13.5px; color: var(--text-2); }
.sc-quiz .opts { margin-top: 22px; }
.sc-quiz .opt.is-good { border-color: var(--good); background: var(--good-soft); }
.sc-quiz .opt.is-bad { border-color: var(--bad); background: var(--bad-soft); }
.sc-explain { margin-top: 16px; padding: 16px 18px; border-radius: 16px; font-size: 15px; line-height: 1.6; animation: fade-up-soft .5s var(--ease) both; }
.sc-explain.ok { background: var(--good-soft); } .sc-explain.ko { background: var(--warn-soft); }
.sc-recap { text-align: center; }
.sc-recap-ic { width: 64px; height: 64px; margin: 0 auto 16px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--good); }
.sc-recap-ic .ic { width: 30px; height: 30px; }
.sc-recap ul { list-style: none; margin: 22px auto 0; padding: 0; display: grid; gap: 10px; max-width: 640px; text-align: left; }
.sc-recap li { padding: 14px 18px; border-radius: 14px; background: var(--card); border: 1px solid var(--stroke); font-size: 15.5px; line-height: 1.5; animation: fade-up-soft .6s var(--ease) both; animation-delay: calc(.2s + var(--i) * .2s); }

@media (max-width: 1000px) { .ln-hero { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .ln-counts { grid-template-columns: repeat(2, 1fr); }
  .mp-head { grid-template-columns: auto 1fr; padding: 12px 16px; } .mp-head .theme-switch { display: none; } .mp-bar { grid-column: 1 / -1; width: 100%; }
  .tk-c { grid-template-columns: 96px minmax(0, 1fr) 46px; } .tk-prompt { font-size: 19px; }
  .cmp { grid-template-columns: 1fr; }
}

/* ==========================================================================
   v13 : Apprendre en deux niveaux (familles → modules)
   ========================================================================== */
.ln-hero-simple { grid-template-columns: 1fr; padding-bottom: 0; }
.fam-list { margin-top: 30px; display: grid; gap: 22px; }
.fam-more { margin: 18px 0 8px; text-align: center; font-size: 13.5px; color: var(--text-3); }

/* Grande carte de famille */
.fam-card { position: relative; display: block; padding: 30px 32px 26px; border-radius: 30px; color: inherit; text-decoration: none; background: var(--card); border: 1px solid var(--stroke); box-shadow: var(--shadow); overflow: hidden; isolation: isolate; transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease); }
.fam-card::before { content: ""; position: absolute; inset: -40% -10% auto auto; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 16%, transparent), transparent); z-index: -1; pointer-events: none; transition: transform .8s var(--ease); }
.fam-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--accent) 30%, var(--stroke)); }
.fam-card:hover::before { transform: translate(-30px, 20px); }
.fam-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: start; }
.fam-ic { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 18px; background: var(--grad); color: #fff; box-shadow: 0 10px 26px -10px color-mix(in srgb, var(--accent) 70%, transparent); }
.fam-ic .ic { width: 28px; height: 28px; }
.fam-txt h2 { margin-top: 6px; font-size: clamp(26px, 2.6vw, 36px); font-weight: 700; letter-spacing: -.04em; line-height: 1.08; }
.fam-txt .sub { margin-top: 10px; max-width: 640px; font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.fam-side { display: grid; justify-items: end; gap: 14px; }
.fam-counts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.fam-cta { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px; font-size: 14.5px; font-weight: 650; color: #fff; background: var(--grad); white-space: nowrap; }
.fam-cta .ic { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.fam-card:hover .fam-cta .ic { transform: translateX(3px); }
.fam-preview { list-style: none; margin: 26px 0 0; padding: 18px 0 0; border-top: 1px solid var(--stroke); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; }
.fp { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 12px; border-radius: 14px; background: var(--card-inset, transparent); }
.fp-n { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; font-size: 12.5px; font-weight: 700; color: var(--text-2); border: 1px solid var(--stroke-2); }
.fp-n .ic { width: 14px; height: 14px; }
.fp-maitrise .fp-n, .fp-termine .fp-n { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); background: var(--good-soft); }
.fp-voir .fp-n { color: #fff; border-color: transparent; background: var(--grad); }
.fp-t { flex: 1; min-width: 0; display: grid; gap: 3px; }
.fp-t b { font-size: 14px; font-weight: 640; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-t small { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text-3); }
.fp .lst { flex: none; height: 22px; font-size: 11.5px; padding: 0 8px; }
.fp-maitrise .fp-t b, .fp-termine .fp-t b { color: var(--text-2); }
.fp-plus_tard { opacity: .7; }

/* Page d’une famille */
.fm-hero { margin-top: 18px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; align-items: start; padding: 30px 32px; border-radius: 30px; background: var(--card); border: 1px solid var(--stroke); box-shadow: var(--shadow); }
.fam-ic-lg { width: 72px; height: 72px; border-radius: 22px; } .fam-ic-lg .ic { width: 34px; height: 34px; }
.fm-txt h1 { margin-top: 6px; font-size: clamp(30px, 3.4vw, 46px); font-weight: 700; letter-spacing: -.045em; line-height: 1.04; }
.fm-txt .sub { margin-top: 12px; max-width: 640px; font-size: 16px; line-height: 1.6; color: var(--text-2); }
.fm-axes { margin-top: 14px; display: flex; gap: 6px; flex-wrap: wrap; }
.fm-counts { display: grid; gap: 8px; min-width: 170px; }
.fm-counts .ln-count { padding: 10px 14px; } .fm-counts .ln-count b { font-size: 22px; }
.fm-counts .ln-count:hover { transform: none; }

/* Liste des modules */
.mod-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.mod { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 20px; padding: 24px 26px; border-radius: 24px; background: var(--card); border: 1px solid var(--stroke); transition: border-color .35s var(--ease), box-shadow .35s var(--ease); }
.mod:hover { box-shadow: var(--shadow); border-color: var(--stroke-2); }
.mod::before { content: ""; position: absolute; left: 0; top: 24px; bottom: 24px; width: 3px; border-radius: 0 3px 3px 0; background: var(--stripe, transparent); }
.mod-voir { --stripe: var(--grad); }
.mod-consolider { --stripe: #E0A526; }
.mod-maitrise, .mod-termine { --stripe: var(--good); }
.mod-plus_tard .mod-main { opacity: .78; }
.mod-n { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; font-size: 16px; font-weight: 700; color: var(--text-2); border: 1px solid var(--stroke-2); }
.mod-n .ic { width: 18px; height: 18px; }
.mod-voir .mod-n { color: #fff; border-color: transparent; background: var(--grad); }
.mod-maitrise .mod-n, .mod-termine .mod-n { color: var(--good); background: var(--good-soft); border-color: transparent; }
.mod-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.mod-top > span { display: inline-flex; align-items: center; gap: 5px; }
.mod-top .ic { width: 14px; height: 14px; }
.mod-top .lpips { margin-right: -6px; }
.mod-kind { color: var(--text-2); }
.mod-main h3 { margin-top: 10px; font-size: 20px; font-weight: 690; letter-spacing: -.025em; line-height: 1.25; }
.mod-sum { margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--text-2); max-width: 720px; }
.mod-cols { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 22px; padding-top: 16px; border-top: 1px dashed var(--stroke-2); }
.mod-k { margin-bottom: 10px; font-size: 11.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.mod-learn { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mod-learn li { display: flex; gap: 9px; font-size: 14px; line-height: 1.45; }
.mod-learn .ic { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--good); }
.mod-skills { display: grid; gap: 6px; }
.mod-skill { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--card-inset, transparent); border: 1px solid var(--stroke); font-size: 13.5px; }
.mod-skill b { font-weight: 640; }
.mod-skill i { font-style: normal; font-size: 9px; letter-spacing: 2px; color: var(--accent); }
.mod-skill em { font-style: normal; font-size: 12px; font-weight: 650; color: var(--text-3); }
.mod-why { margin-top: 16px; font-size: 13px; line-height: 1.5; color: var(--text-2); padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--stripe-c, var(--accent)) 7%, transparent); }
.mod-consolider .mod-why { --stripe-c: #E0A526; } .mod-maitrise .mod-why, .mod-termine .mod-why { --stripe-c: var(--good); } .mod-plus_tard .mod-why { --stripe-c: var(--text-3); }
.mod-act { display: grid; justify-items: end; align-content: start; gap: 8px; min-width: 150px; }
.mod-soon { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text-3); border: 1px dashed var(--stroke-2); }

@media (max-width: 900px) {
  .fam-head { grid-template-columns: auto minmax(0, 1fr); }
  .fam-side { grid-column: 1 / -1; justify-items: start; } .fam-counts { justify-content: flex-start; }
  .fm-hero { grid-template-columns: auto minmax(0, 1fr); }
  .fm-counts { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
  .mod { grid-template-columns: 40px minmax(0, 1fr); }
  .mod-act { grid-column: 2; justify-items: start; grid-auto-flow: column; align-items: center; }
}
@media (max-width: 640px) {
  .fam-card, .fm-hero { padding: 22px 18px; border-radius: 24px; }
  .fam-head, .fm-hero { grid-template-columns: 1fr; gap: 14px; }
  .fam-ic { width: 50px; height: 50px; border-radius: 15px; }
  .fam-preview { grid-template-columns: 1fr; }
  .mod { grid-template-columns: 1fr; padding: 20px 18px; gap: 12px; }
  .mod-n { width: 34px; height: 34px; font-size: 14px; }
  .mod-act { grid-column: 1; }
  .mod-cols { grid-template-columns: 1fr; }
  .fm-counts { grid-template-columns: repeat(3, 1fr); min-width: 0; }
}
.fm-txt, .fam-txt, .mod-main { min-width: 0; }
@media (max-width: 640px) {
  .fm-hero > .btn { width: 100%; height: auto; min-height: 46px; padding: 10px 16px; white-space: normal; text-align: center; justify-content: center; }
  .fm-hero > * { min-width: 0; }
}
@media (max-width: 640px) { .fp-t b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; } .fp-t small { white-space: nowrap; } }

/* ==========================================================================
   v14 : lecteur de module, scènes interactives (tout démarre au clic)
   ========================================================================== */
.mp-foot { position: sticky; bottom: 0; z-index: 5; background: var(--nav-bg); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border-top: 1px solid var(--stroke); padding: 12px 28px 14px; }
.mp-kbd { display: inline-flex; align-items: center; gap: 14px; }
.mp-bar i.is-ch { height: 8px; margin-top: -2px; }
.mp-stage { place-items: start center; padding: 44px 24px 56px; }
.mp-scene { width: min(920px, 100%); }
.sc .sub { max-width: 720px; }

/* Éléments communs */
.sc-actions { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.sc-go .ic { width: 14px; height: 14px; margin-right: 7px; }
.sc-idle { font-size: 14px; color: var(--text-3); font-style: italic; }
.sc-explain p + p { margin-top: 8px; }
.an-ex { margin-top: 10px; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; line-height: 1.55; color: var(--text-2); background: var(--card-inset); border-left: 3px solid color-mix(in srgb, var(--accent) 55%, transparent); }
.an-count { margin-top: 16px; font-size: 13px; font-weight: 600; color: var(--text-3); }
.an-count span { color: var(--text); }
.an-count.is-full { color: var(--good); } .an-count.is-full span { color: var(--good); }
.mc-dots { display: inline-flex; gap: 5px; } .mc-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); animation: think 1.1s infinite; } .mc-dots i:nth-child(2) { animation-delay: .15s; } .mc-dots i:nth-child(3) { animation-delay: .3s; }
.is-typing::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -0.12em; background: var(--g2); animation: tw-blink 1s steps(1) infinite; }

/* Titre et plan */
.sc-plan { list-style: none; margin: 30px auto 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 640px; text-align: left; }
.sc-plan li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--stroke); font-size: 14.5px; font-weight: 600; animation: fade-up-soft .6s var(--ease) both; animation-delay: calc(var(--i) * 70ms + 200ms); }
.sc-plan li span { flex: none; font-size: 12px; font-weight: 700; color: transparent; background: var(--grad); -webkit-background-clip: text; background-clip: text; }
.sc-hint { margin-top: 22px; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-3); }
.sc-hint .ic { width: 14px; height: 14px; color: var(--accent); }

/* Chapitre */
.sc-chapter { position: relative; text-align: center; padding: 40px 0 20px; }
.sc-ch-n { display: block; font-size: clamp(110px, 18vw, 200px); font-weight: 800; letter-spacing: -.08em; line-height: .85; color: transparent; background: var(--grad); -webkit-background-clip: text; background-clip: text; opacity: .9; animation: reveal-em 1s var(--ease) both; }
.sc-chapter .kicker { margin-top: 18px; }
.sc-chapter h1 { margin-top: 8px; }
.sc-chapter .sub { margin-left: auto; margin-right: auto; }

/* Trois machines */
.mc-ask { margin-top: 22px; display: flex; flex-direction: column; gap: 4px; padding: 16px 20px; border-radius: 18px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
.mc-ask small, .fm-ask small { font-size: 11.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.mc-ask p { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.mc-grid { margin-top: 16px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mc { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 20px; background: var(--card); border: 1px solid var(--stroke); transition: border-color .4s var(--ease), box-shadow .4s var(--ease); }
.mc-head { display: flex; align-items: center; gap: 10px; font-size: 14.5px; }
.mc-ic { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: var(--card-inset); color: var(--text-2); }
.mc-ic .ic { width: 18px; height: 18px; }
.mc[data-kind=gen] .mc-ic { background: var(--grad); color: #fff; }
.mc-screen { min-height: 170px; display: grid; place-items: center; padding: 14px; border-radius: 14px; background: var(--card-inset); border: 1px dashed var(--stroke-2); font-size: 14px; }
.mc-wait { font-size: 12.5px; color: var(--text-3); }
.mc.is-done .mc-screen { border-style: solid; place-items: start stretch; }
.mc-calc { align-self: center; justify-self: center; text-align: center; font-family: var(--mono); padding: 14px 22px; border-radius: 12px; background: #1d2a1f; color: #9BE89E; animation: shake .5s var(--ease); }
.mc-calc b { display: block; font-size: 30px; letter-spacing: .04em; } .mc-calc small { font-size: 11px; opacity: .7; }
.mc-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mc-links li { display: grid; gap: 1px; padding: 8px 10px; border-radius: 10px; background: var(--card); animation: fade-up-soft .5s var(--ease) both; animation-delay: calc(var(--i) * 160ms); }
.mc-links b { font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.mc-links small { font-size: 11.5px; color: var(--good); }
.mc-gen { font-size: 14px; line-height: 1.6; }
.mc-cap { font-size: 13px; line-height: 1.5; color: var(--text-2); animation: fade-up-soft .5s var(--ease) both; }
.mc-go { align-self: flex-start; } .mc-go .ic { width: 13px; height: 13px; margin-right: 6px; }
.mc[data-kind=gen].is-done { border-color: color-mix(in srgb, var(--accent) 45%, var(--stroke)); box-shadow: 0 16px 40px -24px color-mix(in srgb, var(--g2) 80%, transparent); }
.mc-end { margin-top: 16px; }

/* Définition décortiquée */
.an-sent { margin-top: 26px; font-size: clamp(21px, 2.4vw, 28px); line-height: 1.6; font-weight: 550; letter-spacing: -.015em; }
.an-k { -webkit-box-decoration-break: clone; box-decoration-break: clone; font: inherit; color: var(--text); padding: 0 3px; border-radius: 6px; cursor: pointer; background: linear-gradient(transparent 62%, color-mix(in srgb, var(--g1) 28%, transparent) 62%); transition: background .3s var(--ease), color .3s var(--ease); text-decoration: underline dashed; text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent); text-underline-offset: 6px; text-decoration-thickness: 1.5px; }
.an-k:hover { background: color-mix(in srgb, var(--g1) 22%, transparent); }
.an-k.is-seen { text-decoration: none; background: linear-gradient(transparent 58%, color-mix(in srgb, var(--g2) 26%, transparent) 58%); }
.an-k.is-cur { color: #fff; background: var(--grad); }
.an-panel { margin-top: 22px; min-height: 130px; }
.an-card { display: flex; gap: 14px; padding: 18px 20px; border-radius: 18px; background: var(--card); border: 1px solid var(--stroke); box-shadow: var(--shadow); animation: fade-up-soft .45s var(--ease) both; }
.an-card > div > b { font-size: 17px; font-weight: 680; } .an-card p { margin-top: 6px; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.an-n { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: #fff; font-weight: 700; background: var(--grad); }

/* Cartes à retourner */
.fl-grid { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fl-grid.fl-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fl-card { position: relative; min-height: 196px; perspective: 1100px; text-align: left; animation: fade-up-soft .5s var(--ease) both; animation-delay: calc(var(--i) * 60ms); }
.fl-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .7s var(--ease); }
.fl-card.is-flipped .fl-in { transform: rotateY(180deg); }
.fl-front, .fl-back { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 18px; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1px solid var(--stroke); }
.fl-front { justify-content: flex-end; background: var(--card); transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.fl-card:hover .fl-front { border-color: color-mix(in srgb, var(--accent) 40%, var(--stroke)); box-shadow: var(--shadow); }
.fl-front small { position: absolute; top: 16px; left: 18px; font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.fl-front b { font-size: 21px; font-weight: 700; letter-spacing: -.03em; line-height: 1.15; }
.fl-front em { font-style: normal; font-size: 13px; color: var(--text-3); }
.fl-turn { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--card-inset); color: var(--text-3); }
.fl-turn .ic { width: 14px; height: 14px; }
.fl-back { transform: rotateY(180deg); overflow: auto; background: linear-gradient(160deg, color-mix(in srgb, var(--g1) 12%, var(--card-strong)), color-mix(in srgb, var(--g3) 12%, var(--card-strong))); border-color: color-mix(in srgb, var(--accent) 35%, var(--stroke)); }
.fl-back > b { font-size: 13px; font-weight: 700; letter-spacing: .02em; color: var(--accent); }
.fl-back > span { font-size: 14px; line-height: 1.55; }
.fl-back em { margin-top: auto; font-style: normal; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }

/* Poupées russes */
.ns { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.ns-rings { position: relative; aspect-ratio: 1; width: 100%; max-width: 420px; justify-self: center; }
.ns-ring { --s: calc(100% - var(--k) * (72% / (var(--n) - 1))); position: absolute; left: 50%; bottom: 0; width: var(--s); height: var(--s); transform: translateX(-50%) scale(.2); opacity: 0; border-radius: 50%; display: flex; justify-content: center; padding-top: calc(4% + var(--k) * .3%); border: 1.5px solid color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--g2) calc(5% + var(--k) * 4%), transparent); transform-origin: 50% 100%; transition: transform .8s var(--ease), opacity .6s var(--ease), background .4s var(--ease), border-color .4s var(--ease); cursor: default; }
.ns-ring.is-on { opacity: 1; transform: translateX(-50%) scale(1); cursor: pointer; }
.ns-ring span { font-size: clamp(10px, 1.3vw, 13px); font-weight: 650; color: var(--text-2); white-space: nowrap; }
.ns-ring.is-cur { border-color: transparent; background: color-mix(in srgb, var(--g2) 24%, transparent); box-shadow: 0 0 0 2px var(--g2), 0 20px 50px -20px color-mix(in srgb, var(--g2) 80%, transparent); }
.ns-ring.is-cur span { color: var(--text); }
.ns-ring:last-child.is-on { background: var(--grad); border-color: transparent; } .ns-ring:last-child.is-on span { color: #fff; }
.ns-c { padding: 20px; border-radius: 20px; background: var(--card); border: 1px solid var(--stroke); box-shadow: var(--shadow); animation: fade-up-soft .45s var(--ease) both; }
.ns-c small { font-size: 11.5px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.ns-c > b { display: block; margin-top: 6px; font-size: 21px; font-weight: 700; letter-spacing: -.03em; }
.ns-c p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }

/* Jeu de tri et vrai/faux */
.so, .tf { margin-top: 22px; }
.so-top { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--text-3); }
.so-top b { color: var(--text); }
.so-stage { position: relative; margin-top: 12px; min-height: 150px; display: grid; place-items: center; }
.so-card { width: min(520px, 100%); padding: 22px 24px; border-radius: 22px; text-align: center; background: var(--card-strong); border: 1px solid var(--stroke); box-shadow: var(--shadow-lg); transition: transform .55s var(--ease), opacity .55s var(--ease); }
.so-card.is-in { animation: rise-soft .45s var(--ease) both; }
.so-card.is-gone { transform: translate(var(--dx, 0), 22px) scale(.92); }
.so-card.is-gone.ok { border-color: var(--good); box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--good) 70%, transparent); }
.so-card.is-gone.ko { border-color: var(--warn); }
.so-card small { font-size: 11.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.so-card b { display: block; margin-top: 8px; font-size: 20px; font-weight: 650; letter-spacing: -.02em; line-height: 1.35; }
.so-card.so-end b { font-size: 44px; font-weight: 750; letter-spacing: -.04em; color: transparent; background: var(--grad); -webkit-background-clip: text; background-clip: text; }
.so-card.so-end p { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.so-bins { margin-top: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.so-bin { position: relative; display: grid; justify-items: center; gap: 4px; padding: 16px 10px 14px; border-radius: 18px; background: var(--card); border: 1.5px dashed var(--stroke-2); transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease); }
.so-bin:not(:disabled):hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-2px); }
.so-bin-ic { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--card-inset); color: var(--text-2); }
.so-bin-ic .ic { width: 19px; height: 19px; }
.so-bin b { font-size: 15.5px; font-weight: 680; } .so-bin small { font-size: 12px; color: var(--text-3); }
.so-bin-n { position: absolute; top: 8px; right: 10px; min-width: 22px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--text-2); background: var(--card-inset); transition: transform .3s var(--ease); }
.so-bin.is-bump .so-bin-n { transform: scale(1.35); background: var(--grad); color: #fff; }
.so-bin.is-good { border-style: solid; border-color: var(--good); background: var(--good-soft); }
.so-bin.is-bad { border-style: solid; border-color: var(--bad); background: var(--bad-soft); animation: shake .45s var(--ease); }
.so-bin:disabled { cursor: default; }
.so-fb { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border-radius: 16px; animation: fade-up-soft .4s var(--ease) both; }
.so-fb p { flex: 1 1 320px; font-size: 14.5px; line-height: 1.55; }
.so-fb.ok { background: var(--good-soft); } .so-fb.ko { background: var(--warn-soft); }
.so-fb .ic { width: 14px; height: 14px; margin-left: 6px; }
.tf-card { margin-top: 12px; }
.tf-c { padding: 26px; border-radius: 24px; background: var(--card-strong); border: 1px solid var(--stroke); box-shadow: var(--shadow-lg); }
.tf-c.in-next { animation: rise-soft .45s var(--ease) both; }
.tf-q { font-size: clamp(19px, 2.2vw, 24px); font-weight: 620; letter-spacing: -.02em; line-height: 1.4; }
.tf-btns { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tf-b { height: 56px; border-radius: 16px; font-size: 17px; font-weight: 700; background: var(--card); border: 1.5px solid var(--stroke-2); transition: transform .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease); }
.tf-b:not(:disabled):hover { transform: translateY(-2px); border-color: var(--accent); background: var(--accent-soft); }
.tf-b.is-good { border-color: var(--good); background: var(--good-soft); color: var(--good); }
.tf-b.is-bad { border-color: var(--bad); background: var(--bad-soft); color: var(--bad); animation: shake .45s var(--ease); }
.tf-ans { margin-top: 16px; display: grid; gap: 12px; justify-items: start; padding: 16px 18px; border-radius: 16px; font-size: 15px; line-height: 1.6; animation: fade-up-soft .4s var(--ease) both; }
.tf-ans.ok { background: var(--good-soft); } .tf-ans.ko { background: var(--warn-soft); }
.tf-ans .ic { width: 14px; height: 14px; margin-left: 6px; }
.tf-verdict { display: inline-block; margin-right: 8px; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: #fff; background: var(--text); }
.tf-ans.ok .tf-verdict { background: var(--good); } .tf-ans.ko .tf-verdict { background: var(--warn); }
.tf-end { text-align: center; display: grid; justify-items: center; gap: 6px; }
.tf-end small { font-size: 11.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.tf-end b { font-size: 48px; font-weight: 750; letter-spacing: -.04em; color: transparent; background: var(--grad); -webkit-background-clip: text; background-clip: text; }
.tf-end p { max-width: 480px; font-size: 15px; line-height: 1.55; color: var(--text-2); }

/* Régénérer */
.rg { margin-top: 22px; padding: 20px; border-radius: 22px; background: var(--card); border: 1px solid var(--stroke); box-shadow: var(--shadow); display: grid; gap: 14px; }
.rg-ask, .rg-ans { display: flex; gap: 12px; align-items: flex-start; }
.rg-ask p { padding: 12px 16px; border-radius: 4px 16px 16px 16px; background: var(--card-inset); font-size: 15.5px; font-weight: 550; }
.rg-av { flex: none; height: 32px; min-width: 32px; padding: 0 9px; display: grid; place-items: center; border-radius: 10px; font-size: 11.5px; font-weight: 700; color: var(--text-2); background: var(--card-inset); }
.rg-ai { background: var(--grad); color: #fff; padding: 0; } .rg-ai .ic { width: 16px; height: 16px; }
.rg-out { flex: 1; min-height: 56px; padding: 12px 16px; border-radius: 4px 16px 16px 16px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--stroke)); font-size: 16px; line-height: 1.6; }
.rg-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rg-n { font-size: 13px; color: var(--text-3); font-weight: 600; }
.rg-hist { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rg-hist:empty { display: none; }
.rg-hist li { padding: 8px 12px; border-radius: 10px; font-size: 13px; color: var(--text-3); background: var(--card-inset); animation: fade-up-soft .4s var(--ease) both; }
.rg-hist li::before { content: "Réponse précédente · "; font-weight: 650; }
.rg-note { margin-top: 14px; }

/* Lecture */
.rd { margin-top: 24px; display: grid; gap: 14px; }
.rd-row { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 22px; align-items: center; padding: 18px 20px; border-radius: 20px; background: var(--card); border: 1px solid var(--stroke); animation: fade-up-soft .5s var(--ease) both; }
.rd-l small { font-size: 11.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.rd-l b { display: block; margin-top: 4px; font-size: 26px; font-weight: 750; letter-spacing: -.03em; }
.rd-ai .rd-l b { color: transparent; background: var(--grad); -webkit-background-clip: text; background-clip: text; }
.rd-l p { margin-top: 4px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.rd-viz { display: flex; align-items: center; min-height: 40px; }
.rd-grid { display: grid; grid-template-columns: repeat(34, 1fr); gap: 3px; }
.rd-dot { display: block; aspect-ratio: 1; width: 100%; max-width: 12px; border-radius: 50%; background: var(--stroke); transform: scale(.5); transition: transform .35s var(--ease), background .35s var(--ease); }
.rd-you .rd-dot { width: 12px; }
.rd-dot.is-on { background: var(--g2); transform: scale(1); }
.rd-grid .rd-dot.is-on { background: color-mix(in srgb, var(--g1) 50%, var(--g3)); }
.rd-legend { font-size: 12.5px; color: var(--text-3); text-align: right; }
.rd-end { margin-top: 14px; }

/* Devinez la suite */
.gs { margin-top: 22px; display: grid; gap: 14px; }
.gs-item { padding: 18px 20px; border-radius: 20px; background: var(--card); border: 1px solid var(--stroke); }
.gs-q { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.gs-blank { display: inline-block; min-width: 70px; padding: 0 8px; border-bottom: 2px dashed var(--stroke-2); color: var(--g2); }
.gs-item.is-done .gs-blank { border-bottom-style: solid; border-color: var(--g2); animation: reveal-em .4s var(--ease); }
.gs-opts { margin-top: 12px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.gs-o { position: relative; display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; text-align: left; background: var(--card-inset); border: 1.5px solid transparent; transition: border-color .25s var(--ease), background .25s var(--ease); }
.gs-o:not(:disabled):hover { border-color: var(--accent); background: var(--accent-soft); }
.gs-w { font-size: 14.5px; font-weight: 650; }
.gs-bar { height: 6px; border-radius: 3px; background: var(--stroke); overflow: hidden; }
.gs-bar i { display: block; height: 100%; width: var(--w, 0); border-radius: 3px; background: color-mix(in srgb, var(--g2) 50%, var(--stroke-2)); transition: width .9s var(--ease); }
.gs-o.is-best .gs-bar i { background: var(--grad); }
.gs-v { min-height: 1em; font-size: 12px; font-weight: 650; color: var(--text-3); }
.gs-o.is-mine { border-color: var(--g2); }
.gs-o.is-mine::after { content: "Votre choix"; position: absolute; top: -9px; right: 8px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; color: #fff; background: var(--g2); }
.gs-o:disabled { cursor: default; }
.gs-src { margin-top: 10px; font-size: 12px; color: var(--text-3); }
.gs-end { margin-top: 14px; }

/* Chaîne de fabrication */
.fab { margin-top: 26px; }
.fab-track { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); align-items: start; }
.fab-line { position: absolute; left: calc(50% / var(--n)); right: calc(50% / var(--n)); top: 21px; height: 3px; border-radius: 2px; background: var(--stroke); }
.fab-line i { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--grad); transition: width .9s var(--ease); }
.fab-node { position: relative; display: grid; justify-items: center; gap: 8px; text-align: center; }
.fab-node > span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; font-weight: 700; color: var(--text-3); background: var(--bg, var(--card-strong)); border: 2px solid var(--stroke-2); transition: all .5s var(--ease); }
.fab-node > span .ic { width: 19px; height: 19px; }
.fab-node b { font-size: 12.5px; font-weight: 650; color: var(--text-3); transition: color .4s var(--ease); }
.fab-node.is-on > span { color: #fff; border-color: transparent; background: var(--grad); }
.fab-node.is-on b { color: var(--text); }
.fab-node.is-cur > span { box-shadow: 0 0 0 6px color-mix(in srgb, var(--g2) 18%, transparent); }
.fab-token { position: absolute; top: 14px; left: calc(50% / var(--n) + var(--p) * (100% - 100% / var(--n))); width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--g2), 0 0 18px var(--g1); transition: left 1s var(--ease); z-index: 2; pointer-events: none; }
.fab-card { margin-top: 22px; min-height: 160px; }
.fab-c { padding: 20px 22px; border-radius: 20px; background: var(--card); border: 1px solid var(--stroke); box-shadow: var(--shadow); animation: fade-up-soft .45s var(--ease) both; }
.fab-c small { font-size: 11.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.fab-c > b { display: block; margin-top: 6px; font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.fab-c > p { margin-top: 8px; font-size: 15px; line-height: 1.65; color: var(--text-2); }
.fab-done { border-color: color-mix(in srgb, var(--good) 40%, var(--stroke)); }
.fab-demo { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fab-l { position: relative; display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--card-inset); border: 1px solid var(--stroke); }
.fab-l small { font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.fab-l span { font-size: 14px; line-height: 1.5; }
.fab-out span { font-weight: 650; color: var(--g2); }
.fab-l.is-good { border-color: var(--good); background: var(--good-soft); }
.fab-l i { position: absolute; top: 10px; right: 10px; color: var(--good); } .fab-l i .ic { width: 18px; height: 18px; }

/* Formats */
.fm { margin-top: 22px; }
.fm-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.fm-tab { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--text-2); background: var(--card); border: 1px solid var(--stroke); transition: all .3s var(--ease); }
.fm-tab .ic { width: 16px; height: 16px; }
.fm-tab:hover { color: var(--text); border-color: var(--stroke-2); }
.fm-tab.is-on { color: #fff; background: var(--grad); border-color: transparent; }
.fm-seen { display: none; width: 7px; height: 7px; border-radius: 50%; background: var(--good); }
.fm-tab.is-tried:not(.is-on) .fm-seen { display: block; }
.fm-p { margin-top: 14px; display: grid; gap: 14px; animation: fade-up-soft .4s var(--ease) both; }
.fm-ask { display: grid; gap: 4px; padding: 14px 18px; border-radius: 16px; background: var(--accent-soft); }
.fm-ask p { font-size: 15.5px; font-weight: 600; }
.fm-stage { position: relative; display: grid; place-items: center; min-height: 240px; padding: 16px; border-radius: 20px; background: var(--card); border: 1px solid var(--stroke); overflow: hidden; }
.fm-go { position: absolute; right: 14px; bottom: 14px; z-index: 3; transition: opacity .3s var(--ease); }
.fm-go .ic { width: 14px; height: 14px; margin-right: 7px; }
.fm-go.is-hide { opacity: 0; pointer-events: none; }
.fm-out { width: 100%; }
.fm-text p { white-space: pre-wrap; font-size: 15.5px; line-height: 1.7; padding: 4px 6px 40px; }
.fm-code pre { margin: 0; padding: 16px 18px 44px; border-radius: 14px; background: #0D1222; color: #C9D6FF; overflow-x: auto; }
.fm-code code { font-family: var(--mono); font-size: 13.5px; line-height: 1.7; white-space: pre; }
.fm-img { position: relative; width: min(440px, 100%); margin: 0 auto; border-radius: 16px; overflow: hidden; aspect-ratio: 16 / 10; --blur: 22px; --noise: 1; }
.fm-img svg { display: block; width: 100%; height: 100%; }
.fm-scene { filter: blur(var(--blur)) saturate(.7); transition: filter .6s var(--ease); }
.fm-noise { opacity: var(--noise); transition: opacity .6s var(--ease); }
.fm-img:not(.is-run) .fm-scene { filter: blur(30px) saturate(0) brightness(.6); }
.fm-step { position: absolute; left: 10px; bottom: 10px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 650; color: #fff; background: rgba(0, 0, 0, .45); }
.fm-step:empty { display: none; }
.fm-sound { display: grid; gap: 16px; padding-bottom: 36px; }
.fm-wave { display: flex; align-items: center; justify-content: center; gap: 5px; height: 90px; }
.fm-wave i { flex: 0 1 5px; height: 6%; border-radius: 3px; background: color-mix(in srgb, var(--g2) 40%, var(--stroke-2)); transition: height .6s var(--ease); }
.fm-sound.is-run .fm-wave i { height: var(--h); background: var(--grad); animation: wave 1.1s ease-in-out infinite alternate; animation-delay: var(--d); }
@keyframes wave { to { transform: scaleY(.45); } }
.fm-lyrics { display: grid; gap: 4px; min-height: 100px; }
.fm-lyrics p { font-size: 16px; font-style: italic; color: var(--text-2); animation: fade-up-soft .5s var(--ease) both; }
.fm-video { display: grid; gap: 14px; padding-bottom: 38px; }
.fm-frames { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.fm-frame { position: relative; border-radius: 8px; overflow: hidden; opacity: .12; transform: translateY(6px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.fm-frame.is-on { opacity: 1; transform: none; }
.fm-frame svg { display: block; width: 100%; }
.fm-frame small { position: absolute; left: 5px; top: 3px; font-size: 10px; font-weight: 700; color: #fff; }
.fm-player { width: min(360px, 100%); margin: 0 auto; border-radius: 12px; overflow: hidden; opacity: .25; transition: opacity .5s var(--ease); }
.fm-player svg { display: block; width: 100%; }
.fm-sky { fill: #2B2357; }
.fm-video.is-play .fm-player { opacity: 1; }
.fm-video.is-play .fm-sun { animation: sunrise 4s var(--ease) infinite; }
.fm-video.is-play .fm-sky { animation: sky 4s var(--ease) infinite; }
@keyframes sunrise { from { transform: translateY(0); } to { transform: translateY(-30px); } }
@keyframes sky { 0% { fill: #2B2357; } 40% { fill: #6B3A82; } 70% { fill: #E8805C; } 100% { fill: #F7B267; } }
.fm-meta { display: grid; gap: 10px; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.fm-meta b { color: var(--text); }
.fm-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.fm-tools b { margin-right: 6px; font-size: 13px; }

/* Frise chronologique */
.tl { margin-top: 24px; }
.tl-rail { position: relative; height: 64px; margin: 0 22px; }
.tl-rail::before, .tl-fill { content: ""; position: absolute; left: 0; top: 14px; height: 3px; border-radius: 2px; background: var(--stroke); }
.tl-rail::before { right: 0; }
.tl-fill { background: var(--grad); width: 0; transition: width .7s var(--ease); }
.tl-dot { position: absolute; left: var(--x); top: 0; transform: translateX(-50%); display: grid; justify-items: center; gap: 8px; }
.tl-dot i { width: 18px; height: 18px; margin: 6px 0 2px; border-radius: 50%; background: var(--card-strong); border: 2px solid var(--stroke-2); transition: all .4s var(--ease); }
.tl-dot.is-big i { width: 22px; height: 22px; margin: 4px 0 0; }
.tl-dot span { font-size: 11.5px; font-weight: 650; color: var(--text-3); white-space: nowrap; }
.tl-dot.is-seen i { border-color: var(--g2); background: var(--g2); }
.tl-dot.is-cur i { background: #fff; border-color: var(--g2); box-shadow: 0 0 0 5px color-mix(in srgb, var(--g2) 25%, transparent); transform: scale(1.15); }
.tl-dot.is-cur span { color: var(--text); }
.tl-card { margin-top: 10px; min-height: 190px; }
.tl-c { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; padding: 24px; border-radius: 22px; background: var(--card); border: 1px solid var(--stroke); box-shadow: var(--shadow); }
.tl-c.in-next { animation: pane-in-f .45s var(--ease) both; } .tl-c.in-prev { animation: pane-in-b .45s var(--ease) both; }
.tl-year { font-size: clamp(34px, 4vw, 50px); font-weight: 800; letter-spacing: -.05em; line-height: 1; color: transparent; background: var(--grad); -webkit-background-clip: text; background-clip: text; }
.tl-c > div > b { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.tl-c p { margin-top: 8px; font-size: 15px; line-height: 1.65; color: var(--text-2); }
.tl-why { padding: 10px 12px; border-radius: 12px; background: var(--card-inset); font-size: 14px !important; }
.tl-why span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: 2px; }
.tl-nav { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; }
.tl-pos { font-size: 13px; font-weight: 600; color: var(--text-3); }
.tl-nav .btn .ic { width: 14px; height: 14px; margin: 0 6px; }

/* Récapitulatif : et ensuite */
.sc-next { margin: 22px auto 0; max-width: 640px; display: grid; gap: 4px; padding: 14px 18px; border-radius: 16px; text-align: left; font-size: 14.5px; line-height: 1.55; background: var(--accent-soft); }
.sc-next span { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }

@media (max-width: 900px) {
  .mc-grid { grid-template-columns: 1fr; }
  .mc-screen { min-height: 110px; }
  .fl-grid.fl-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ns { grid-template-columns: 1fr; }
  .ns-rings { max-width: 340px; }
  .gs-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rd-row { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 640px) {
  .mp-stage { padding: 26px 16px 40px; }
  .mp-foot { padding: 10px 14px 12px; }
  .mp-keys { display: none; }
  .sc-plan { grid-template-columns: 1fr; }
  .fl-grid, .fl-grid.fl-3 { grid-template-columns: 1fr; }
  .fl-card { min-height: 200px; }
  .so-bins { gap: 6px; } .so-bin { padding: 12px 4px 10px; } .so-bin small { display: none; }
  .so-card b { font-size: 17px; }
  .so-card.is-gone { transform: translateY(14px) scale(.95); }
  .fab-node b { font-size: 10.5px; } .fab-node > span { width: 36px; height: 36px; font-size: 13px; } .fab-line { top: 17px; } .fab-token { top: 10px; }
  .fab-demo { grid-template-columns: 1fr; }
  .tl-rail { margin: 0 14px; height: 68px; }
  .fm-stage { padding-bottom: 66px; }
  .tl-dot span { font-size: 10px; }
  .tl-dot:nth-child(even) span { transform: translateY(16px); }
  .tl-c { grid-template-columns: 1fr; gap: 10px; padding: 18px; }
  .rd-grid { grid-template-columns: repeat(20, 1fr); }
  .tf-c { padding: 18px; }
  .fm-tab { height: 36px; padding: 0 12px; font-size: 13px; }
  .fm-tab span { display: none; } .fm-tab.is-on span { display: inline; }
}

/* ==========================================================================
   v15 : activités obligatoires, quiz de validation, tampons et médailles
   ========================================================================== */

/* Lecteur : « Suivant » verrouillé tant que l’activité n’est pas finie */
.mp-lock { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.mp-lock .ic { width: 13px; height: 13px; color: var(--accent); }
.mp-lock[hidden], #mpPos[hidden] { display: none; }
.mp-foot .btn-primary.is-locked { background: var(--card-strong); color: var(--text-3); border: 1px solid var(--stroke); box-shadow: none; cursor: not-allowed; }
.mp-foot .btn-primary.is-locked .ic { opacity: .5; }
.mp-foot .btn-primary.is-shake { animation: shake .45s var(--ease); }
.mp-foot .btn-primary.is-ready { animation: ready-pop .9s var(--ease); }
@keyframes ready-pop { 0% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--g2) 55%, transparent); } 40% { transform: scale(1.06); } 100% { transform: scale(1); box-shadow: 0 0 0 14px transparent; } }
.is-hint { animation: hint-glow 1.2s var(--ease); }
@keyframes hint-glow { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 30% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--g2) 35%, transparent); transform: translateY(-2px); } }

/* Formats : comment ça marche, synchronisé avec la génération */
.fm-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.fm-how { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 20px; background: var(--card); border: 1px solid var(--stroke); }
.fm-how-k { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.fm-how-line { font-size: 14.5px; line-height: 1.55; }
.fm-how-steps { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 6px; counter-reset: none; }
.fm-how-steps li { position: relative; display: flex; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px solid transparent; transition: background .45s var(--ease), border-color .45s var(--ease), opacity .45s var(--ease); }
.fm-how-steps li + li::before { content: ""; position: absolute; left: 25px; top: -7px; width: 2px; height: 8px; background: var(--stroke-2); }
.fm-how-n { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; font-size: 12.5px; font-weight: 750; color: var(--text-2); background: var(--card-inset); border: 1px solid var(--stroke-2); transition: all .45s var(--ease); }
.fm-how-steps b { font-size: 14px; font-weight: 680; }
.fm-how-steps p { margin-top: 2px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.fm-how-steps li.is-on { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.fm-how-steps li.is-on .fm-how-n { color: #fff; border-color: transparent; background: var(--grad); box-shadow: 0 0 0 5px color-mix(in srgb, var(--g2) 18%, transparent); }
.fm-how-steps li.is-done .fm-how-n { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); background: var(--good-soft); }
.fm-how-an { margin-top: auto; padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.5; font-style: italic; color: var(--text-2); background: var(--card-inset); }
.fm-how-an span { display: block; margin-bottom: 2px; font-style: normal; font-size: 10.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.fm-body .fm-stage { min-height: 300px; }
.fm-p > .fm-tools { font-size: 14px; color: var(--text-2); }

/* Distinctions : rendu commun */
.medal { display: block; overflow: visible; filter: drop-shadow(0 10px 18px rgba(15, 23, 42, .28)) drop-shadow(0 2px 3px rgba(15, 23, 42, .2)); }
.medal text { font-family: var(--font); }
.medal.is-locked { color: var(--text-2); filter: none; opacity: .9; }
.medal-sheen { transform-box: view-box; }
.medal:not(:hover) .medal-sheen { opacity: .0; }
a:hover .medal .medal-sheen, .medal:hover .medal-sheen, .cer .medal .medal-sheen { opacity: 1; }
a:hover .medal-sheen, .medal:hover .medal-sheen, .cer .medal-sheen { animation: sheen 1.6s var(--ease) both; }
@keyframes sheen { from { transform: translateX(0); } to { transform: translateX(340px); } }

/* Carte de programme : médaille à droite */
.fam-head { grid-template-columns: auto minmax(0, 1fr) auto; }
.fam-txt .fam-counts { margin-top: 14px; justify-content: flex-start; }
.fam-txt .fam-cta { margin-top: 18px; }
.fam-medal { display: grid; justify-items: center; gap: 4px; width: 104px; text-align: center; }
.fam-medal small { font-size: 11.5px; font-weight: 650; color: var(--text-3); }
.fam-medal.is-earned small { color: var(--text); }
.fp-n .medal { filter: drop-shadow(0 2px 3px rgba(15, 23, 42, .25)); }
.fp-n:has(.medal) { border: 0; background: none; width: 34px; height: 34px; }

/* Page programme : médaille dans l’en-tête */
.fm-hero { grid-template-columns: auto minmax(0, 1fr) 180px; }
.fm-txt .fm-counts { margin-top: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 150px)); min-width: 0; gap: 8px; }
.fm-diag { margin-top: 18px; }
.fm-medal { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 6px 4px; }
.fm-medal b { font-size: 14px; font-weight: 700; margin-top: 4px; }
.fm-medal small { font-size: 12.5px; line-height: 1.45; color: var(--text-3); }

/* Ligne de module : tampon et quiz */
.mod-act { min-width: 150px; justify-items: center; text-align: center; }
.mod-stamp { line-height: 0; }
.mod-stamp.is-locked { opacity: .9; }
.mod-aw { font-size: 12.5px; font-weight: 700; }
.mod-try { font-size: 12px; line-height: 1.4; color: var(--text-3); max-width: 170px; }
.mod-try b { color: var(--text); }
.mod-act .btn .ic { width: 14px; height: 14px; margin-right: 6px; }
.lst .ic { width: 13px; height: 13px; }
.mod-valide { --stripe: var(--good); } .mod-a_valider { --stripe: #E0A526; }
.mod-valide .mod-n { color: var(--good); background: var(--good-soft); border-color: transparent; }
.mod-a_valider .mod-n { color: #fff; border-color: transparent; background: #E0A526; }
.mod-valide .mod-why, .fp-valide { --stripe-c: var(--good); } .mod-a_valider .mod-why { --stripe-c: #E0A526; }

/* Quiz de validation */
.qz-bar { width: min(260px, 30vw); }
.qz-bar i.ok { background: var(--good); } .qz-bar i.ko { background: var(--bad); }
.qz-intro, .qz-res { text-align: center; }
.qz-intro .sub, .qz-res .sub { margin: 16px auto 0; max-width: 640px; font-size: 16.5px; line-height: 1.6; color: var(--text-2); }
.qz-res .kicker { margin-top: 14px; }
.qz-intro h1, .qz-res h1 { margin-top: 10px; font-size: clamp(30px, 4vw, 48px); font-weight: 700; letter-spacing: -.045em; line-height: 1.06; }
.qz-tiers { margin: 30px auto 0; display: flex; justify-content: center; align-items: flex-end; gap: 22px; }
.qz-tier { display: grid; justify-items: center; gap: 4px; }
.qz-tier b { margin-top: 6px; font-size: 14px; font-weight: 700; } .qz-tier small { font-size: 12px; font-weight: 600; color: var(--text-3); }
.qz-bronze .medal { transform: scale(.86); } .qz-argent .medal { transform: scale(.93); }
.qz-best { margin-top: 22px; font-size: 14px; color: var(--text-2); }
.qz-go { justify-content: center; margin-top: 26px; }
.qz-q .kicker { text-align: left; }
.qz-next { justify-content: flex-end; }
.qz-score { display: grid; place-items: center; }
.qz-res.is-fail .ring-val { stroke: var(--warn); }
.qz-aw { margin: 22px auto 0; display: grid; place-items: center; animation: reveal-em .8s var(--ease) both; animation-delay: .3s; }
.qz-miss { margin: 26px auto 0; max-width: 640px; text-align: left; display: grid; gap: 8px; }
.qz-m { padding: 12px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--stroke); }
.qz-m b { font-size: 14px; font-weight: 650; }
.qz-m p { margin-top: 6px; display: flex; gap: 8px; font-size: 13.5px; color: var(--text-2); }
.qz-m .ic { flex: none; width: 15px; height: 15px; color: var(--good); margin-top: 2px; }

/* Cérémonie de remise */
.cer { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.cer-veil { position: absolute; inset: 0; background: radial-gradient(circle at 50% 42%, rgba(12, 16, 36, .72), rgba(4, 6, 16, .92)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); opacity: 0; transition: opacity .45s var(--ease); }
.cer.is-on .cer-veil { opacity: 1; }
.cer.is-off { opacity: 0; transition: opacity .4s var(--ease); }
.cer-box { position: relative; width: min(460px, 100%); text-align: center; color: #fff; }
.cer-stage { position: relative; width: 260px; height: 260px; margin: 0 auto; display: grid; place-items: center; }
.cer-medal .cer-stage { height: 300px; }
.cer-rays { position: absolute; inset: -70px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255, 236, 190, .16) 0deg 5deg, transparent 5deg 15deg); -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); mask: radial-gradient(circle, #000 18%, transparent 68%); opacity: 0; }
.cer.is-on .cer-rays { animation: cer-rays-in 1.2s .55s var(--ease) both, rays 26s linear infinite; }
@keyframes cer-rays-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
.cer-ring { position: absolute; width: 200px; height: 200px; border-radius: 50%; border: 2px solid rgba(255, 230, 170, .7); opacity: 0; }
.cer.is-on .cer-ring { animation: cer-impact .9s .5s cubic-bezier(.2, .7, .2, 1) both; }
.cer.is-on .cer-ring-2 { animation-delay: .62s; border-width: 1px; }
@keyframes cer-impact { 0% { opacity: .9; transform: scale(.8); } 100% { opacity: 0; transform: scale(1.9); } }
.cer-dust { position: absolute; inset: 0; display: grid; place-items: center; }
.cer-dust i { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #FFE7B0; box-shadow: 0 0 8px #FFD27A; opacity: 0; }
.cer.is-on .cer-dust i { animation: cer-dust 1s .5s cubic-bezier(.1, .7, .2, 1) both; }
@keyframes cer-dust { 0% { opacity: 1; transform: rotate(var(--a)) translateX(60px) scale(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateX(calc(60px + var(--d))) scale(.3); } }
.cer-art { position: relative; line-height: 0; }
.cer-stamp.is-on .cer-art { animation: cer-stamp 1s cubic-bezier(.2, .9, .25, 1.15) both; }
@keyframes cer-stamp { 0% { opacity: 0; transform: scale(2.6) rotate(-22deg); filter: blur(6px); } 45% { opacity: 1; transform: scale(.9) rotate(3deg); filter: blur(0); } 60% { transform: scale(1.04) rotate(-1deg); } 100% { transform: scale(1) rotate(0); } }
.cer-medal.is-on .cer-art { animation: cer-medal 1.3s cubic-bezier(.2, .9, .25, 1.1) both; transform-origin: 50% 0; }
@keyframes cer-medal { 0% { opacity: 0; transform: translateY(-160px) rotate(-8deg); } 55% { opacity: 1; transform: translateY(10px) rotate(4deg); } 75% { transform: translateY(-4px) rotate(-2deg); } 100% { transform: none; } }
.cer .medal { filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .5)) drop-shadow(0 0 30px rgba(255, 210, 120, .25)); }
.cer .medal-sheen { animation-delay: 1.1s; }
.cer-kicker, .cer-title, .cer-line, .cer-msg, .cer-actions { opacity: 0; }
.cer.is-on .cer-kicker, .cer.is-on .cer-title, .cer.is-on .cer-line, .cer.is-on .cer-msg, .cer.is-on .cer-actions { animation: cer-up .6s var(--ease) both; }
@keyframes cer-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cer.is-on .cer-kicker { animation-delay: .9s; } .cer.is-on .cer-title { animation-delay: 1s; } .cer.is-on .cer-line { animation-delay: 1.1s; } .cer.is-on .cer-msg { animation-delay: 1.2s; } .cer.is-on .cer-actions { animation-delay: 1.35s; }
.cer-kicker { margin-top: 18px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #FFD98A; }
.cer-title { margin-top: 8px; font-size: clamp(30px, 6vw, 42px); font-weight: 750; letter-spacing: -.04em; line-height: 1.05; background: linear-gradient(120deg, #fff, #FFE6B3 60%, #fff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cer-line { margin-top: 8px; font-size: 15.5px; font-weight: 600; color: rgba(255, 255, 255, .86); }
.cer-msg { margin: 12px auto 0; max-width: 380px; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .7); }
.cer-actions { margin-top: 22px; display: flex; justify-content: center; gap: 10px; }
@media (prefers-reduced-motion: reduce) { .cer *, .cer { animation: none !important; opacity: 1 !important; } }

@media (max-width: 1000px) {
  .fm-hero { grid-template-columns: auto minmax(0, 1fr); }
  .fm-medal { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; align-items: center; column-gap: 18px; }
  .fm-medal .medal { grid-row: span 2; }
}
@media (max-width: 900px) {
  .fam-head { grid-template-columns: auto minmax(0, 1fr); }
  .fam-medal { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; width: auto; text-align: left; gap: 14px; }
  .fm-body { grid-template-columns: 1fr; }
  .mod-act { grid-auto-flow: row; justify-items: start; text-align: left; }
}
@media (max-width: 640px) {
  .mp-lock span { display: none; }
  .fam-head { grid-template-columns: 1fr; }
  .fm-hero { grid-template-columns: 1fr; }
  .fm-diag { height: auto; min-height: 44px; padding: 10px 16px; white-space: normal; text-align: center; justify-content: center; }
  .fm-txt .fm-counts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .qz-tiers { gap: 6px; } .qz-tier .medal { width: 88px; height: 88px; }
  .cer-stage { width: 220px; height: 220px; } .cer-medal .cer-stage { height: 270px; }
  .cer .medal-stamp { width: 180px; height: 180px; } .cer .medal-prog { width: 190px; height: 224px; }
}

/* ==========================================================================
   v16 : crédits, niveau garanti, onglet « Vos accomplissements »
   ========================================================================== */
.ln-acc { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--text-2); background: var(--card); border: 1px solid var(--stroke); text-decoration: none; transition: border-color .3s var(--ease), color .3s var(--ease); }
.ln-acc b { color: var(--text); }
.ln-acc .ic { width: 14px; height: 14px; }
.ln-acc:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 40%, var(--stroke)); }

.acc-hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .9fr); gap: 32px; align-items: center; }
.acc-level { margin-top: 8px; font-size: clamp(34px, 4.4vw, 54px); font-weight: 750; letter-spacing: -.05em; line-height: 1; color: transparent; background: var(--grad); -webkit-background-clip: text; background-clip: text; }
.acc-role { margin-top: 10px; font-size: 17px; font-weight: 650; }
.acc-can { margin-top: 8px; font-size: 15.5px; line-height: 1.6; color: var(--text-2); max-width: 600px; }
.acc-note { margin-top: 16px; padding: 12px 14px; border-radius: 14px; font-size: 13px; line-height: 1.55; color: var(--text-3); background: var(--card-inset); max-width: 600px; }
.acc-hero-side { display: grid; gap: 14px; justify-items: stretch; }
.acc-credits { display: flex; align-items: baseline; gap: 10px; }
.acc-credits b { font-size: 56px; font-weight: 750; letter-spacing: -.05em; line-height: 1; }
.acc-credits span { font-size: 14px; font-weight: 600; color: var(--text-2); }
.acc-ladder { display: flex; align-items: flex-end; gap: 4px; height: 90px; }
.acc-ladder i { flex: 1; height: var(--h); border-radius: 4px 4px 2px 2px; background: var(--stroke); transition: background .4s var(--ease); }
.acc-ladder i.on { background: color-mix(in srgb, var(--g2) 55%, var(--stroke)); }
.acc-ladder i.cur { background: var(--grad); box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--g2) 80%, transparent); }
.acc-step { font-size: 13px; color: var(--text-3); } .acc-step b { color: var(--text); }
.acc-kpis { display: grid; gap: 6px; padding-top: 12px; border-top: 1px solid var(--stroke); }
.acc-kpis span { font-size: 13.5px; color: var(--text-2); } .acc-kpis b { color: var(--text); margin-right: 4px; }

.acc-next { margin-top: 16px; }
.acc-next .sub { margin-top: 6px; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.acc-reqs { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.acc-reqs li { display: grid; grid-template-columns: 22px minmax(0, 1.2fr) minmax(80px, 1fr) 76px; align-items: center; gap: 12px; font-size: 14px; }
.acc-req-ic { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--stroke-2); }
.acc-req-ic .ic { width: 13px; height: 13px; }
.acc-reqs li.ok .acc-req-ic { color: #fff; background: var(--good); border-color: transparent; }
.acc-reqs li.ok .acc-req-l { color: var(--text-2); }
.acc-req-bar { height: 6px; border-radius: 3px; background: var(--stroke); overflow: hidden; }
.acc-req-bar i { display: block; height: 100%; border-radius: 3px; background: var(--grad); animation: bar-in 1s var(--ease) both; }
.acc-reqs li.ok .acc-req-bar i { background: var(--good); }
.acc-req-v { text-align: right; font-size: 13px; font-weight: 650; color: var(--text-2); }

.acc-progs { display: grid; gap: 12px; }
.acc-prog { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 16px 20px; border-radius: 22px; text-align: left; background: var(--card); border: 1px solid var(--stroke); transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease); }
.acc-prog:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--accent) 30%, var(--stroke)); }
.acc-prog > .ic { width: 18px; height: 18px; color: var(--text-3); }
.acc-prog-art { line-height: 0; }
.acc-prog-txt { display: grid; gap: 6px; min-width: 0; }
.acc-prog-txt small { font-size: 11.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.acc-prog-txt > b { font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.acc-prog-bar { height: 6px; border-radius: 3px; background: var(--stroke); overflow: hidden; max-width: 420px; }
.acc-prog-bar i { display: block; height: 100%; background: var(--grad); border-radius: 3px; }
.acc-prog-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--text-2); align-items: center; }
.acc-prog-meta b { color: var(--text); }
.acc-tier { padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.acc-or { color: #8A5A07; background: #F8E7B6; } .acc-argent { color: #3A4352; background: #E3E8EF; } .acc-bronze { color: #6B3A1D; background: #F3D5BE; }
.acc-prog-stamps { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.acc-prog-stamps span { line-height: 0; }
.acc-prog-stamps .medal { filter: drop-shadow(0 1px 2px rgba(15, 23, 42, .25)); }
.acc-prog-stamps i { width: 22px; height: 22px; margin: 2px; border-radius: 50%; border: 1.5px dashed var(--stroke-2); }

.acc-scale { margin-top: 22px; }
.acc-scale summary { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; }
.acc-scale summary::-webkit-details-marker { display: none; }
.acc-scale summary b { font-size: 16px; }
.acc-scale ol { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 6px; }
.acc-scale > ol > li { display: flex; gap: 14px; padding: 12px 14px; border-radius: 14px; opacity: .6; }
.acc-scale > ol > li.is-on { opacity: 1; }
.acc-scale > ol > li.is-cur { background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
.acc-sn { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; font-size: 13px; font-weight: 750; color: var(--text-2); background: var(--card-inset); }
.acc-scale > ol > li.is-on .acc-sn { color: #fff; background: var(--grad); }
.acc-scale > ol > li b { font-size: 15px; } .acc-scale > ol > li em { font-style: normal; font-size: 13px; color: var(--text-3); }
.acc-scale > ol > li p { margin-top: 3px; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.acc-solo { margin-top: 30px; }

/* Fiche programme (panneau latéral) */
.acc-sh-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; }
.acc-sh-head small { font-size: 11.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.acc-sh-head h3 { margin-top: 2px; font-size: 21px; font-weight: 700; letter-spacing: -.03em; }
.acc-sh-head p { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.acc-sh-cr b { font-size: 18px; color: var(--text); }
.acc-sh-list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 6px; }
.acc-sh-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 14px; background: var(--card-inset); }
.acc-sh-list li:not(.ok) { opacity: .75; }
.acc-sh-art { line-height: 0; }
.acc-sh-t { display: grid; gap: 2px; } .acc-sh-t b { font-size: 14px; font-weight: 650; } .acc-sh-t small { font-size: 12.5px; color: var(--text-3); }
.acc-sh-c { font-size: 12.5px; font-weight: 650; color: var(--text-2); }

@media (max-width: 900px) { .acc-hero { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .acc-reqs li { grid-template-columns: 22px minmax(0, 1fr) 70px; }
  .acc-req-bar { grid-column: 2 / -1; grid-row: 2; }
  .acc-prog { grid-template-columns: auto minmax(0, 1fr); padding: 14px; gap: 12px; }
  .acc-prog > .ic { display: none; }
}

/* ==========================================================================
   v17 : scènes du module 2 (tokens, température, contexte, relecture)
   ========================================================================== */
.tf-ctx { margin-bottom: 10px; font-size: 13.5px; font-style: italic; color: var(--text-3); }

/* Découpage en tokens */
.tz { margin-top: 22px; }
.tz-stage { margin-top: 14px; }
.tz-p { padding: 22px; border-radius: 22px; background: var(--card); border: 1px solid var(--stroke); box-shadow: var(--shadow); animation: fade-up-soft .4s var(--ease) both; }
.tz-src { font-size: clamp(20px, 2.4vw, 26px); font-weight: 600; letter-spacing: -.01em; transition: opacity .4s var(--ease); }
.tz-src.is-cut { opacity: .38; }
.tz-chips { margin-top: 14px; min-height: 48px; display: flex; flex-wrap: wrap; gap: 6px; }
.tz-chip { --h: calc(var(--c) * 52 + 190); padding: 6px 10px; border-radius: 10px; font-family: var(--mono); font-size: 16px; font-weight: 600; white-space: pre; color: hsl(var(--h) 70% 30%); background: hsl(var(--h) 85% 88%); border: 1px solid hsl(var(--h) 60% 75%); animation: tz-in .35s cubic-bezier(.2, .9, .3, 1.3) both; }
@keyframes tz-in { from { opacity: 0; transform: translateY(8px) scale(.8); } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tz-chip { color: hsl(var(--h) 90% 82%); background: hsl(var(--h) 45% 22%); border-color: hsl(var(--h) 45% 34%); } }
:root[data-theme="dark"] .tz-chip { color: hsl(var(--h) 90% 82%); background: hsl(var(--h) 45% 22%); border-color: hsl(var(--h) 45% 34%); }
.tz-foot { margin-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tz-stats { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13.5px; color: var(--text-2); }
.tz-stats b { color: var(--text); }
.tz-n b { color: var(--accent); font-size: 16px; }
.tz-com { margin-top: 14px; padding: 12px 14px; border-radius: 14px; font-size: 14.5px; line-height: 1.55; background: var(--accent-soft); animation: fade-up-soft .4s var(--ease) both; }
.tz-note { margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--text-3); }

/* Température */
.tp { --tc: #3B82F6; margin-top: 22px; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; }
.tp[data-t="mid"] { --tc: #F59E0B; } .tp[data-t="high"] { --tc: #EF4444; }
.tp-ctrl { display: grid; gap: 12px; align-content: start; padding: 18px; border-radius: 22px; background: var(--card); border: 1px solid var(--stroke); }
.tp-k { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.tp-seg { display: grid; gap: 6px; }
.tp-b { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: 14px; border: 1.5px solid var(--stroke); background: var(--card-inset); transition: all .3s var(--ease); }
.tp-b b { font-size: 14.5px; } .tp-b small { font-size: 12px; color: var(--text-3); font-family: var(--mono); }
.tp-b[aria-checked="true"] { border-color: var(--tc); background: color-mix(in srgb, var(--tc) 12%, transparent); }
.tp-thermo { position: relative; height: 10px; border-radius: 5px; background: linear-gradient(90deg, #3B82F6, #F59E0B, #EF4444); opacity: .9; }
.tp-thermo i { position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--tc), 0 4px 10px rgba(0, 0, 0, .25); left: 12%; transition: left .6s var(--ease), box-shadow .4s var(--ease); }
.tp[data-t="mid"] .tp-thermo i { left: 48%; } .tp[data-t="high"] .tp-thermo i { left: 88%; }
.tp-hint { font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.tp-main { display: grid; gap: 14px; padding: 20px; border-radius: 22px; background: var(--card); border: 1px solid var(--stroke); box-shadow: var(--shadow); }
.tp-prompt { font-size: 21px; font-weight: 600; }
.tp-prompt small { display: block; margin-bottom: 4px; font-size: 11.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.tp-blank { color: var(--tc); }
.tp-dist { display: grid; gap: 6px; }
.tp-c { display: grid; grid-template-columns: 90px minmax(0, 1fr) 46px; gap: 10px; align-items: center; }
.tp-w { font-family: var(--mono); font-size: 14px; font-weight: 600; }
.tp-bar { height: 8px; border-radius: 4px; background: var(--stroke); overflow: hidden; }
.tp-bar i { display: block; height: 100%; border-radius: 4px; background: var(--tc); transition: width .7s var(--ease), background .4s var(--ease); }
.tp-v { text-align: right; font-size: 12.5px; font-weight: 650; color: var(--text-2); }
.tp-outs { display: grid; gap: 6px; min-height: 0; }
.tp-o { display: flex; gap: 10px; align-items: baseline; padding: 10px 12px; border-radius: 12px; background: var(--card-inset); font-size: 15px; animation: fade-up-soft .3s var(--ease) both; }
.tp-on { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-size: 11.5px; font-weight: 750; color: #fff; background: var(--tc); }
.tp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tp-tried { font-size: 13px; font-weight: 600; color: var(--text-3); } .tp-tried span { color: var(--text); }
.tp-tried.is-full, .tp-tried.is-full span { color: var(--good); }

/* Contexte */
.cx { margin-top: 22px; padding: 20px; border-radius: 22px; background: var(--card); border: 1px solid var(--stroke); box-shadow: var(--shadow); display: grid; gap: 14px; }
.cx-ask, .cx-ans { display: flex; gap: 12px; align-items: flex-start; }
.cx-ask > div { flex: 1; padding: 12px 16px; border-radius: 4px 16px 16px 16px; background: var(--card-inset); }
.cx-q { font-size: 16px; font-weight: 600; }
.cx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cx-chips:not(:empty) { margin-top: 10px; }
.cx-chip { padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--accent); background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); animation: tz-in .35s cubic-bezier(.2, .9, .3, 1.3) both; }
.cx-a { flex: 1; min-height: 80px; padding: 12px 16px; border-radius: 4px 16px 16px 16px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--stroke)); }
.cx-out { font-size: 15.5px; line-height: 1.65; }
.cx-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.cx-meter { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.cx-bar { display: flex; gap: 3px; }
.cx-bar i { width: 26px; height: 8px; border-radius: 3px; background: var(--stroke); transition: background .5s var(--ease); }
.cx-bar i.on { background: var(--grad); }

/* Relecture de la conversation */
.rr { margin-top: 22px; display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); gap: 10px; align-items: stretch; }
.rr-col { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 20px; background: var(--card); border: 1px solid var(--stroke); min-height: 280px; }
.rr-k { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.rr-chat, .rr-feed { display: flex; flex-direction: column; gap: 6px; }
.rr-m { max-width: 88%; padding: 9px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.45; animation: fade-up-soft .35s var(--ease) both; }
.rr-u { align-self: flex-end; background: var(--accent-soft); border-bottom-right-radius: 4px; }
.rr-a { align-self: flex-start; background: var(--card-inset); border-bottom-left-radius: 4px; }
.rr-arrow { display: grid; place-items: center; color: var(--accent); }
.rr-arrow .ic { width: 22px; height: 22px; animation: breathe 2.4s ease-in-out infinite; }
.rr-f { padding: 6px 10px; border-radius: 8px; font-family: var(--mono); font-size: 11.5px; line-height: 1.45; border-left: 3px solid var(--stroke-2); background: var(--card-inset); animation: rr-flow .5s var(--ease) both; animation-delay: calc(var(--i) * 70ms); }
.rr-f-u { border-left-color: var(--accent); } .rr-f-a { border-left-color: var(--g3); }
.rr-f.is-new { background: var(--accent-soft); }
@keyframes rr-flow { from { opacity: 0; transform: translateX(-14px); } }
.rr-count { margin-top: auto; font-size: 12.5px; color: var(--text-3); } .rr-count b { color: var(--text); font-size: 15px; }
.rr-end { margin-top: 14px; }

@media (max-width: 760px) {
  .tp { grid-template-columns: 1fr; }
  .rr { grid-template-columns: 1fr; }
  .rr-arrow { transform: rotate(90deg); height: 30px; }
  .rr-col { min-height: 0; }
}
@media (max-width: 640px) { .tz-tabs .fm-tab span { display: inline; } .tz-tabs .fm-tab { padding: 0 12px; } }

/* v18 : titre centré, définition mise en avant */
.sc-title .sub { margin-left: auto; margin-right: auto; }
.tk-def { position: relative; margin-top: 22px; padding: 26px 28px 24px; border-radius: 24px; background: linear-gradient(var(--card-strong), var(--card-strong)) padding-box, var(--grad) border-box; border: 2px solid transparent; box-shadow: 0 24px 60px -30px color-mix(in srgb, var(--g2) 80%, transparent); animation: reveal-em .7s var(--ease) both; }
.tk-def-k { position: absolute; top: -12px; left: 24px; padding: 4px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--grad); }
.tk-def-term { font-size: clamp(30px, 4vw, 42px); font-weight: 750; letter-spacing: -.04em; line-height: 1.05; color: transparent; background: var(--grad); -webkit-background-clip: text; background-clip: text; }
.tk-def-term em { font-style: italic; font-size: .45em; font-weight: 600; letter-spacing: 0; color: var(--text-3); -webkit-text-fill-color: var(--text-3); }
.tk-def-text { margin-top: 12px; font-size: clamp(17px, 1.8vw, 20px); line-height: 1.55; font-weight: 550; color: var(--text); }
.tk-def-sub { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--stroke); font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.qz-skip { margin: 18px auto 0; max-width: 560px; padding: 10px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.55; color: var(--text-2); background: var(--accent-soft); }
.mod-act .link-btn { font-size: 13px; }
.acc-tasks { margin-top: 16px; max-width: 600px; }
.acc-tasks ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.acc-tasks li { display: flex; gap: 9px; font-size: 14.5px; line-height: 1.45; }
.acc-tasks .ic { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--good); }
.acc-notyet { margin-top: 14px; max-width: 600px; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.acc-notyet b { color: var(--text); }
.acc-next-tasks, .acc-sc-tasks { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 3px; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.acc-sc-tasks { font-size: 13px; color: var(--text-3); }

/* ==========================================================================
   v19 : scènes du module 3 (modes, outils, matrice de confiance)
   ========================================================================== */
/* Plusieurs façons de répondre */
.md { margin-top: 22px; display: grid; gap: 14px; }
.md-in { padding: 16px 18px; border-radius: 18px; background: var(--card-inset); border: 1px solid var(--stroke); }
.md-in small { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.md-in p { margin-top: 6px; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.md .cx-ask > div { padding: 12px 16px; border-radius: 4px 16px 16px 16px; background: var(--card-inset); }
.md-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.md-tab { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--text-2); background: var(--card); border: 1.5px solid var(--stroke); transition: all .3s var(--ease); }
.md-tab .ic { width: 16px; height: 16px; }
.md-tab:hover { color: var(--text); border-color: var(--stroke-2); }
.md-tab.is-on { color: var(--text); border-color: var(--accent); background: var(--accent-soft); }
.md-tab.md-bad.is-on { border-color: var(--bad); background: var(--bad-soft); }
.md-tab.md-good.is-on { border-color: var(--good); background: var(--good-soft); }
.md-tab.is-tried:not(.is-on) .fm-seen { display: block; }
.md-out { position: relative; min-height: 130px; padding: 20px; border-radius: 22px; background: var(--card); border: 1px solid var(--stroke); box-shadow: var(--shadow); display: grid; gap: 12px; align-content: start; }
.md-o-good { border-color: color-mix(in srgb, var(--good) 35%, var(--stroke)); }
.md-o-bad { border-color: color-mix(in srgb, var(--bad) 40%, var(--stroke)); }
.md-tag { justify-self: start; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 750; letter-spacing: .04em; color: var(--text-2); background: var(--card-inset); }
.md-o-good .md-tag { color: var(--good); background: var(--good-soft); } .md-o-bad .md-tag { color: var(--bad); background: var(--bad-soft); }
.md-a { display: flex; gap: 12px; align-items: flex-start; }
.md-text { flex: 1; white-space: pre-wrap; font-size: 15.5px; line-height: 1.65; }
.md-code { margin: 0; padding: 12px 16px; border-radius: 12px; background: #0D1222; color: #9BE89E; font-family: var(--mono); font-size: 13.5px; line-height: 1.6; white-space: pre; }
.md-note { padding: 12px 14px; border-radius: 14px; font-size: 14px; line-height: 1.55; background: var(--card-inset); animation: fade-up-soft .4s var(--ease) both; }
.md-o-good .md-note { background: var(--good-soft); } .md-o-bad .md-note { background: var(--bad-soft); }

/* Un modèle, des outils */
.th { margin-top: 22px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: center; }
.th-map { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1; justify-self: center; }
.th-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.th-lines line { stroke: var(--stroke-2); stroke-width: .5; stroke-dasharray: 1.4 1.4; transition: stroke .5s var(--ease); vector-effect: non-scaling-stroke; }
.th-lines line { stroke-width: 1.5; }
.th-lines line.is-on { stroke: var(--g2); stroke-dasharray: none; stroke-width: 2.5; }
.th-core { position: absolute; left: 50%; top: 50%; width: 132px; height: 132px; margin: -66px 0 0 -66px; display: grid; place-content: center; justify-items: center; gap: 4px; border-radius: 50%; text-align: center; color: #fff; background: var(--grad); box-shadow: 0 20px 50px -20px color-mix(in srgb, var(--g2) 80%, transparent); }
.th-core > span .ic { width: 26px; height: 26px; }
.th-core b { font-size: 15px; } .th-core small { font-size: 11.5px; opacity: .85; }
.th-core.is-pulse { animation: ready-pop .9s var(--ease); }
.th-tool { position: absolute; width: 104px; margin: -40px 0 0 -52px; display: grid; justify-items: center; gap: 6px; text-align: center; }
.th-tool > span { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 16px; color: var(--text-2); background: var(--card-strong); border: 1.5px dashed var(--stroke-2); transition: all .35s var(--ease); }
.th-tool > span .ic { width: 22px; height: 22px; }
.th-tool b { font-size: 12.5px; font-weight: 650; line-height: 1.25; }
.th-tool:hover > span { border-color: var(--accent); transform: translateY(-2px); }
.th-tool.is-on > span { color: #fff; border: 0; background: var(--grad); }
.th-tool.is-cur > span { box-shadow: 0 0 0 5px color-mix(in srgb, var(--g2) 25%, transparent); }
.th-c { padding: 20px; border-radius: 20px; background: var(--card); border: 1px solid var(--stroke); box-shadow: var(--shadow); display: grid; gap: 10px; animation: fade-up-soft .4s var(--ease) both; }
.th-c-h { display: flex; gap: 12px; align-items: center; }
.th-c-h > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: var(--grad); }
.th-c-h small { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.th-c-h b { display: block; font-size: 18px; font-weight: 700; }
.th-c p { font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.th-fix { color: var(--text) !important; font-weight: 600; }
.th-fix span { display: inline-block; margin-right: 8px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 750; color: var(--good); background: var(--good-soft); }
.th-cav { font-size: 13.5px !important; padding: 10px 12px; border-radius: 12px; background: var(--warn-soft); }

/* Matrice de confiance */
.mx { margin-top: 22px; }
.mx-card { margin: 12px auto 0; width: min(520px, 100%); padding: 16px 20px; border-radius: 20px; text-align: center; background: var(--card-strong); border: 1px solid var(--stroke); box-shadow: var(--shadow-lg); }
.mx-card.is-in { animation: rise-soft .45s var(--ease) both; }
.mx-card small { font-size: 11.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.mx-card b { display: block; margin-top: 6px; font-size: 18px; font-weight: 650; line-height: 1.35; }
.mx-card.so-end b { font-size: 40px; font-weight: 750; color: transparent; background: var(--grad); -webkit-background-clip: text; background-clip: text; }
.mx-card.so-end p { margin-top: 4px; font-size: 14.5px; color: var(--text-2); }
.mx-grid { margin-top: 16px; }
.mx-ax { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.mx-ax i { flex: 1; height: 1px; background: linear-gradient(90deg, var(--stroke-2), var(--text-3)); position: relative; }
.mx-ax-x { grid-column: 2 / 4; padding-top: 4px; }
.mx-yl { display: grid; place-items: center; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); text-align: center; }
.mx-cells { display: grid; grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.mx-q { min-width: 0; }
.mx-q b, .mx-q small { overflow-wrap: anywhere; }
.mx-q { position: relative; min-height: 112px; display: grid; align-content: start; gap: 4px; padding: 14px 16px; border-radius: 18px; text-align: left; border: 1.5px solid var(--stroke); transition: all .3s var(--ease); }
.mx-q0 { background: color-mix(in srgb, var(--good) 8%, var(--card)); }
.mx-q1 { background: color-mix(in srgb, #E0A526 9%, var(--card)); }
.mx-q2 { background: color-mix(in srgb, var(--g2) 8%, var(--card)); }
.mx-q3 { background: color-mix(in srgb, var(--bad) 9%, var(--card)); }
.mx-q b { font-size: 15.5px; font-weight: 700; } .mx-q small { font-size: 12.5px; color: var(--text-2); }
.mx-q:not(:disabled):hover { border-color: var(--accent); transform: translateY(-2px); }
.mx-q:disabled { cursor: default; }
.mx-q.is-good { border-color: var(--good); box-shadow: 0 0 0 3px var(--good-soft); }
.mx-q.is-bad { border-color: var(--bad); animation: shake .45s var(--ease); }
.mx-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.mx-chips i { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-size: 11px; font-weight: 750; color: #fff; background: var(--grad); animation: tz-in .35s cubic-bezier(.2, .9, .3, 1.3) both; }

@media (max-width: 760px) {
  .th { grid-template-columns: 1fr; }
  .th-map { max-width: 340px; }
  .th-core { width: 104px; height: 104px; margin: -52px 0 0 -52px; }
  .th-tool { width: 86px; margin: -34px 0 0 -43px; } .th-tool > span { width: 44px; height: 44px; } .th-tool b { font-size: 11px; }
  .mx-q { min-height: 96px; padding: 10px 12px; } .mx-q b { font-size: 14px; } .mx-q small { font-size: 11.5px; }
}
.mp-scene { min-width: 0; max-width: 100%; }
.mx, .mx-grid, .mx-cells { min-width: 0; max-width: 100%; }

/* ================================================================== v20 · Module 3 refondu */
/* Encart « À retenir » mis en avant */
.sc-key { position: relative; margin-top: 26px; padding: 26px 28px 22px; border-radius: 24px; background: linear-gradient(var(--card-strong), var(--card-strong)) padding-box, linear-gradient(var(--bg-2), var(--bg-2)) padding-box, var(--grad) border-box; border: 2px solid transparent; box-shadow: 0 24px 60px -30px color-mix(in srgb, var(--g2) 80%, transparent); animation: reveal-em .7s var(--ease) both; }
.sc-key[hidden] { display: none; }
.sc-key .tk-def-k { left: 24px; }
.sc-key-t { font-size: clamp(20px, 2.4vw, 26px); font-weight: 750; letter-spacing: -.025em; line-height: 1.2; color: transparent; background: var(--grad); -webkit-background-clip: text; background-clip: text; }
.sc-key-x { margin-top: 10px; font-size: clamp(15.5px, 1.6vw, 17.5px); line-height: 1.6; font-weight: 500; color: var(--text); }
.sc-key-x b { font-weight: 750; }

/* Tableau extrait dans une réponse */
.md-body { flex: 1; min-width: 0; display: grid; gap: 12px; }
.md-tw { overflow-x: auto; border-radius: 14px; border: 1px solid var(--stroke-2); background: var(--card-strong); }
.md-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.md-table th { padding: 10px 14px; text-align: left; font-size: 11.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); background: var(--card-inset); border-bottom: 1px solid var(--stroke-2); white-space: nowrap; }
.md-table td { padding: 11px 14px; border-bottom: 1px solid var(--stroke); color: var(--text); }
.md-table tbody td:first-child { font-weight: 650; }
.md-table tbody tr:last-child td { border-bottom: 0; }
.md-table tfoot td { font-size: 13px; font-weight: 600; color: var(--text-2); background: var(--accent-soft); border-top: 1px solid var(--stroke-2); border-bottom: 0; }
.md-table tr { opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.md-table tr.is-on { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .md-table tr { opacity: 1; transform: none; } }

/* Fiche outil enrichie */
.th-row { display: grid; gap: 3px; padding-top: 10px; border-top: 1px solid var(--stroke); }
.th-row b, .th-ex > b { font-size: 11.5px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.th-ex { display: grid; gap: 0; padding-top: 10px; border-top: 1px solid var(--stroke); }
.th-ex .an-ex { margin-top: 8px; font-style: italic; }
.th-c { align-self: start; }

/* Matrice de confiance : glisser-déposer */
.sc-matrix .mx { margin-top: 22px; display: grid; gap: 18px; min-width: 0; }
.mx-deck { display: grid; justify-items: center; gap: 8px; min-height: 120px; }
.sc-matrix .mx-card { position: relative; margin: 0; width: min(460px, 100%); padding: 18px 48px 18px 22px; text-align: left; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; border: 1.5px solid var(--stroke-2); background: var(--card-strong); box-shadow: var(--shadow-lg); transition: opacity .25s, transform .25s var(--ease), border-color .2s; }
.sc-matrix .mx-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.sc-matrix .mx-card:active { cursor: grabbing; }
.sc-matrix .mx-card b { font-size: 17px; }
.mx-grip { position: absolute; right: 16px; top: 50%; translate: 0 -50%; display: grid; grid-template-columns: repeat(2, 4px); gap: 4px; }
.mx-grip i { width: 4px; height: 4px; border-radius: 50%; background: var(--text-3); }
.sc-matrix .mx-card.is-lifted { opacity: .3; transform: scale(.97); }
.sc-matrix .mx-card.is-placed { opacity: .45; cursor: default; transform: none; border-style: dashed; box-shadow: none; }
.sc-matrix .mx-card.is-placed .mx-grip { display: none; }
.sc-matrix .mx-card.so-end { text-align: center; padding: 18px 22px; cursor: default; }
.mx-ghost { position: fixed; z-index: 9999; pointer-events: none; margin: 0; padding: 18px 48px 18px 22px; border-radius: 20px; text-align: left; background: var(--card-strong); border: 1.5px solid var(--accent); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .45); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); transform: rotate(-2deg) scale(1.03); }
.mx-ghost small { font-size: 11.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.mx-ghost b { display: block; margin-top: 6px; font-size: 17px; font-weight: 650; line-height: 1.35; color: var(--text); }
.mx-ghost .mx-grip { right: 16px; }
.mx-hint { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.mx-hint .ic { width: 14px; height: 14px; rotate: 90deg; }
.mx-board { display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto auto; gap: 10px; min-width: 0; }
.mx-y { grid-row: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mx-y span, .mx-x span { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.mx-y span { writing-mode: vertical-rl; transform: rotate(180deg); }
.mx-y i { flex: 1; width: 2px; border-radius: 2px; background: linear-gradient(var(--stroke-2), var(--text-3)); position: relative; }
.mx-y i::after { content: ''; position: absolute; bottom: -2px; left: 50%; translate: -50% 0; border: 5px solid transparent; border-top-color: var(--text-3); border-bottom: 0; }
.mx-x { grid-column: 2; display: flex; align-items: center; gap: 10px; }
.mx-x i { flex: 1; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--stroke-2), var(--text-3)); position: relative; }
.mx-x i::after { content: ''; position: absolute; right: -2px; top: 50%; translate: 0 -50%; border: 5px solid transparent; border-left-color: var(--text-3); border-right: 0; }
.sc-matrix .mx-cells { grid-column: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sc-matrix .mx-q { min-height: 168px; padding: 18px 18px 16px; border-radius: 22px; align-content: space-between; gap: 12px; border: 2px solid var(--stroke); }
.mx-q-h { display: grid; gap: 3px; }
.sc-matrix .mx-q b { font-size: 17px; font-weight: 750; letter-spacing: -.01em; }
.sc-matrix .mx-q small { font-size: 13px; line-height: 1.4; }
.sc-matrix .mx-q0 b { color: var(--good); } .sc-matrix .mx-q1 b { color: #C98A0C; } .sc-matrix .mx-q2 b { color: var(--accent); } .sc-matrix .mx-q3 b { color: var(--bad); }
.sc-matrix .mx-q.is-over { border-color: var(--accent); border-style: dashed; transform: scale(1.02); box-shadow: 0 0 0 6px var(--accent-soft); }
.sc-matrix .mx-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.sc-matrix .mx-chips i { width: auto; height: auto; max-width: 100%; display: block; padding: 5px 10px; border-radius: 10px; font-style: normal; font-size: 12px; font-weight: 600; line-height: 1.35; text-align: left; color: var(--text); background: var(--card-strong); border: 1px solid var(--stroke-2); box-shadow: 0 4px 10px -6px rgba(0, 0, 0, .25); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Mode d’emploi par assistant */
.ht-pts { margin-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ht-pt { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--stroke); }
.ht-pt > span { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: var(--grad); }
.ht-pt > span .ic { width: 18px; height: 18px; }
.ht-pt b { font-size: 15px; font-weight: 700; }
.ht-pt p { margin-top: 4px; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.ht { margin-top: 22px; padding: 18px; border-radius: 24px; background: var(--card); border: 1px solid var(--stroke); box-shadow: var(--shadow); display: grid; gap: 16px; min-width: 0; }
.ht-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.ht-tabs .fm-tab em { font-style: normal; font-size: 10.5px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.ht-tabs .fm-tab.is-on em { background: rgba(255, 255, 255, .22); color: #fff; }
.ht-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; animation: fade-up-soft .35s var(--ease) both; }
.ht-b { padding: 18px; border-radius: 18px; background: var(--card-strong); border: 1px solid var(--stroke); display: grid; gap: 10px; align-content: start; }
.ht-k { font-size: 16px; font-weight: 750; }
.ht-b ol { margin: 0; padding: 0; list-style: none; counter-reset: ht; display: grid; gap: 9px; }
.ht-b li { counter-increment: ht; position: relative; padding-left: 32px; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.ht-b li b { color: var(--text); }
.ht-b li::before { content: counter(ht); position: absolute; left: 0; top: 1px; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; font-size: 11.5px; font-weight: 750; color: var(--accent); background: var(--accent-soft); }
.ht-tip { padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.5; color: var(--text-2); background: var(--good-soft); }

@media (max-width: 760px) {
  .ht-pts, .ht-grid { grid-template-columns: 1fr; }
  .ht { padding: 12px; }
  .sc-matrix .mx-q { min-height: 130px; padding: 12px; } .sc-matrix .mx-q b { font-size: 14.5px; } .sc-matrix .mx-q small { font-size: 11.5px; }
  .sc-matrix .mx-cells { gap: 8px; }
  .mx-board { grid-template-columns: 22px minmax(0, 1fr); gap: 6px; }
  .mx-y span, .mx-x span { font-size: 10px; letter-spacing: .02em; }
  .sc-matrix .mx-chips i { font-size: 11px; padding: 4px 8px; }
  .sc-key { padding: 22px 18px 18px; }
  .md-table { font-size: 13px; } .md-table th, .md-table td { padding: 9px 10px; }
}
.sc-matrix .mx-q { overflow: hidden; }
.sc-matrix .mx-chips { min-width: 0; max-width: 100%; }
@media (max-width: 760px) {
  .sc-matrix .mx-q b { font-size: 13.5px; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
  .sc-matrix .mx-chips i { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 10.5px; }
  .md-a .rg-av { display: none; }
}
@media (max-width: 760px) { .ht-tabs .fm-tab span { display: inline; } .ht-tabs .fm-tab { padding: 0 12px; height: 36px; font-size: 13px; } }

/* ================================================================== v21 · Diagnostic refondu (compétence, pratique, posture)
   Charte : verre dépoli, bordures fines, états adoucis, dégradé réservé à ce qui est rare
   (dominante, encart majeur), rayons 10 / 14 / 20 / 28, étiquettes en capitales espacées. */
.dx-k, .q-kick, .spot h4, .bld-preview h4, .bld-goal b, .lvc-k {
  font-size: 11.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3);
}
.dx-glass { background: var(--card); border: 1px solid var(--stroke); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }

/* --- Passation : affirmations de posture (accord en 5 points) */
.q-kick { display: block; margin-bottom: 12px; }
.q-likert .q-title { max-width: 30ch; }
.lk { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.lk-opt { display: grid; grid-template-rows: 30px auto; justify-items: center; align-items: center; align-content: start; gap: 12px; min-height: 108px; padding: 20px 10px 16px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--stroke); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); transition: transform .35s var(--spring), border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease); }
.lk-opt:hover { border-color: var(--stroke-2); background: var(--card-hover); transform: translateY(-2px); }
.lk-opt:active { transform: scale(.98); }
.lk-dot { display: block; border-radius: 999px; border: 1.5px solid var(--stroke-2); transition: all .35s var(--spring); }
.lk-opt.d1 .lk-dot, .lk-opt.d5 .lk-dot { width: 28px; height: 28px; }
.lk-opt.d2 .lk-dot, .lk-opt.d4 .lk-dot { width: 21px; height: 21px; }
.lk-opt.d3 .lk-dot { width: 14px; height: 14px; }
.lk-l { font-size: 13.5px; line-height: 1.35; text-align: center; color: var(--text-2); text-wrap: balance; }
.lk-opt.is-sel { background: var(--accent-soft); border-color: transparent; box-shadow: 0 0 0 1.5px var(--accent); }
.lk-opt.is-sel .lk-dot { background: var(--accent); border-color: transparent; box-shadow: 0 0 0 5px var(--accent-soft); transform: scale(1.06); }
.lk-opt.is-sel .lk-l { color: var(--text); font-weight: 600; }

/* --- Mises en situation : chaque réaction jugée sur 4 niveaux */
.sj { display: grid; gap: 12px; }
.sj-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 14px 22px; align-items: center; padding: 16px 18px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--stroke); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); transition: border-color .25s var(--ease); }
.sj-row.is-done { border-color: var(--stroke-2); }
.sj-label { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; }
.sj-label .opt-key { flex: none; }
.sj-scale { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: var(--r-m); background: var(--card-inset); border: 1px solid var(--stroke); }
.sj-btn { min-width: 0; min-height: 40px; padding: 8px 6px; border-radius: var(--r-s); font-size: 13px; line-height: 1.2; color: var(--text-2); transition: color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); }
.sj-btn:hover { color: var(--text); background: var(--card-hover); }
.sj-btn.is-sel { font-weight: 650; }
.sj-btn.v1.is-sel { color: var(--bad); background: var(--bad-soft); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--bad) 55%, transparent); }
.sj-btn.v2.is-sel { color: var(--warn); background: var(--warn-soft); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--warn) 55%, transparent); }
.sj-btn.v3.is-sel { color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 55%, transparent); }
.sj-btn.v4.is-sel { color: var(--good); background: var(--good-soft); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--good) 55%, transparent); }

/* --- Exercice : repérer les erreurs */
.spot { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 18px; align-items: start; }
.spot h4 { margin-bottom: 12px; }
.spot-src { padding: 20px 22px; border-radius: var(--r-l); background: var(--card-inset); border: 1px solid var(--stroke); }
.spot-src p { font-size: 15px; line-height: 1.7; color: var(--text-2); }
.spot-sum ol { display: grid; gap: 8px; }
.spot-seg { width: 100%; display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 12px 14px; border-radius: var(--r-m); background: var(--card); border: 1px solid var(--stroke); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); font-size: 15px; line-height: 1.45; transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); }
.spot-seg:hover { border-color: var(--stroke-2); background: var(--card-hover); }
.spot-mark { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 999px; border: 1.5px solid var(--stroke-2); color: transparent; transition: all .3s var(--spring); }
.spot-mark .ic { width: 12px; height: 12px; stroke-width: 2.2; }
.spot-seg.is-sel { background: var(--warn-soft); border-color: transparent; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--warn) 60%, transparent); }
.spot-seg.is-sel .spot-mark { border-color: transparent; background: var(--warn-soft); color: var(--warn); transform: scale(1.08); }

/* --- Exercice : construire une demande */
.bld-goal { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; padding: 14px 18px; margin-bottom: 18px; border-radius: var(--r-m); background: var(--accent-soft); font-size: 15px; line-height: 1.5; }
.bld-goal b { flex: none; color: var(--accent); }
.bld-frags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bld-frags .pick { width: 100%; height: auto; min-height: 54px; padding: 10px 16px 10px 10px; text-align: left; line-height: 1.4; border-radius: var(--r-m); }
.bld-frags .pick .pick-check { margin-left: auto; }
.bld-frags .pick.is-sel { color: var(--text); background: var(--accent-soft); box-shadow: 0 0 0 1.5px var(--accent); }
.bld-frags .pick.is-sel .pick-key { background: var(--accent); color: var(--on-accent); }
.bld-frags .pick.is-sel .pick-check { color: var(--accent); }
.bld-preview { margin-top: 20px; padding: 18px 20px; border-radius: var(--r-l); background: var(--card-inset); border: 1px solid var(--stroke); }
.bld-preview h4 { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.bld-preview h4 .ic { width: 14px; height: 14px; }
.bld-preview p { font-family: var(--mono); font-size: 13.5px; line-height: 1.7; color: var(--text); }
.bld-preview p.muted { font-family: var(--font); color: var(--text-3); }

/* --- Exercice : ce que l’on peut confier */
.srt { display: grid; gap: 10px; }
.srt-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 12px 20px; align-items: center; padding: 14px 16px 14px 20px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--stroke); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); transition: border-color .25s var(--ease); }
.srt-row.is-done { border-color: var(--stroke-2); }
.srt-label { font-size: 15px; line-height: 1.5; }
.srt-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: var(--r-m); background: var(--card-inset); border: 1px solid var(--stroke); }
.srt-btn { min-width: 0; min-height: 44px; padding: 8px; border-radius: var(--r-s); font-size: 13px; line-height: 1.25; color: var(--text-2); transition: color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); }
.srt-btn:hover { color: var(--text); background: var(--card-hover); }
.srt-btn.is-sel { font-weight: 650; }
.srt-btn.c0.is-sel { color: var(--good); background: var(--good-soft); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--good) 55%, transparent); }
.srt-btn.c1.is-sel { color: var(--warn); background: var(--warn-soft); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--warn) 55%, transparent); }
.srt-btn.c2.is-sel { color: var(--bad); background: var(--bad-soft); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--bad) 55%, transparent); }

/* --- Choix du format de suivi */
.rk-list { display: grid; gap: 12px; margin-top: 20px; }
.rk-opt { display: grid; gap: 10px; text-align: left; padding: 20px 22px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--stroke); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); transition: transform .35s var(--spring), border-color .25s var(--ease), box-shadow .25s var(--ease); }
.rk-opt:hover { border-color: var(--stroke-2); transform: translateY(-2px); box-shadow: var(--shadow); }
.rk-opt.is-rec { border-color: transparent; box-shadow: 0 0 0 1.5px var(--accent); }
.rk-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rk-top b { font-size: 17px; font-weight: 700; letter-spacing: -.02em; margin-right: auto; }
.rk-top .chip { font-variant-numeric: tabular-nums; }
.rk-desc { font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.sheet-retake .sheet-body { gap: 18px; align-content: start; }
.sheet-retake .sheet-body > * { margin: 0 !important; }
.sheet-retake .rk-list { margin: 0; }

/* --- Hexagone de posture (le dégradé ne trace que la forme : c’est l’objet signature du profil) */
.hx { width: 100%; height: auto; overflow: visible; }
.hx-ring { fill: none; stroke: var(--stroke); }
.hx-outer { stroke: var(--stroke-2); }
.hx-spoke { stroke: var(--stroke); }
.hx-shape { stroke-width: 2; stroke-linejoin: round; }
.hx-dot { fill: var(--bg); stroke: var(--accent); stroke-width: 1.75; }
.hx-dot.is-dom { fill: var(--accent); stroke: var(--bg); stroke-width: 2.5; }
.hx-label { font-size: 12.5px; font-weight: 600; fill: var(--text-2); }
.hx-label.is-dom { fill: var(--text); font-weight: 750; }
.hx-v { font-weight: 500; fill: var(--text-3); font-variant-numeric: tabular-nums; }
.hx-axis { font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; fill: var(--text-3); }
.hx-map .hx-label { font-size: 13.5px; }
.hexmix .hx { max-width: 320px; margin: 0 auto; display: block; }
.teaser-hex .hx { max-width: 250px; display: block; }
.teaser-note { margin: 14px 0 14px; font-size: 14px; line-height: 1.5; }

/* --- Résultats */
.hero-can { margin-top: 14px; max-width: 36rem; font-size: 15px; line-height: 1.55; color: var(--text); }
.hero-margin { margin-top: 16px; max-width: 38rem; font-size: 13px; line-height: 1.5; color: var(--text-3); }
.gauge-sub { max-width: 128px; text-align: center; line-height: 1.35; }
.axis-card-decl { background: var(--card-inset); box-shadow: none; }
.axis-card-decl .ring-val { stroke: var(--text-3); }
.axis-n { margin-top: 6px; font-size: 12.5px; color: var(--text-3); }
/* Posture : barres neutres, seule la dimension dominante porte le dégradé */
.trait-uni .trait-fill { background: color-mix(in srgb, var(--text-3) 45%, transparent); opacity: 1; }
.trait-uni .trait-dot { box-shadow: 0 0 0 3px var(--stroke-2), 0 4px 12px rgba(0, 0, 0, .25); }
.trait-uni.is-dom .trait-fill { background: var(--grad); opacity: .9; }
.trait-uni.is-dom .trait-dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--g2) 60%, transparent), 0 4px 12px rgba(0, 0, 0, .3); }
.trait-uni.is-dom .trait-name { color: var(--text); }
.trait-uni .trait-pct { font-variant-numeric: tabular-nums; }
.trait-uni .trait-name .chip { margin-left: 8px; height: 22px; padding: 0 9px; font-size: 11px; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; vertical-align: 2px; }
/* Ce qui compose votre niveau */
.lvc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 20px; }
.lvc-row { display: grid; gap: 10px; padding: 20px 22px; border-radius: var(--r-l); background: var(--card-inset); border: 1px solid var(--stroke); }
.lvc-top { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: baseline; }
.lvc-top b { font-size: 15px; font-weight: 650; }
.lvc-top .muted { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.lvc-top .bar { grid-column: 1 / -1; height: 6px; }
.lvc-top .tnum { grid-column: 1 / -1; font-size: 30px; font-weight: 700; letter-spacing: -.035em; line-height: 1; }
.lvc-top .tnum small { margin-left: 4px; font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--text-3); }
.lvc-row p { font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.prac .duo-row b { font-variant-numeric: tabular-nums; }
.evo-err { stroke: var(--accent); stroke-opacity: .45; stroke-width: 1.5; }
.evo-short { margin-top: 12px; font-size: 13.5px; font-weight: 600; color: var(--warn); }

/* --- Page Diagnostiquer (v22) : ouverture centrée, sections numérotées, démonstrations au clic */
.dg2-k { display: inline-flex; align-items: center; gap: 12px; font-size: 11.5px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.dg2-k .tnum { color: var(--accent); letter-spacing: .04em; }
.dg2-k .tnum::after { content: ''; display: inline-block; width: 22px; height: 1px; margin-left: 12px; vertical-align: middle; background: var(--stroke-2); }
.dg2-hero { position: relative; isolation: isolate; overflow-x: clip; display: grid; justify-items: center; text-align: center; padding: clamp(56px, 9vw, 112px) 0 clamp(24px, 4vw, 48px); }
.dg2-hero-art { position: absolute; z-index: -1; left: 50%; top: 50%; translate: -50% -54%; opacity: calc(.1 + .1 * var(--hex-o)); pointer-events: none; -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); mask-image: radial-gradient(closest-side, #000 30%, transparent 100%); }
.dg2-hero h1 { margin-top: 22px; font-size: clamp(40px, 6.2vw, 78px); font-weight: 750; letter-spacing: -.055em; line-height: 1.01; text-wrap: balance; }
.dg2-lead { margin-top: 26px; max-width: 40rem; font-size: clamp(16px, 1.5vw, 18.5px); line-height: 1.6; color: var(--text-2); text-wrap: balance; }
.dg2-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }
.dg2-meta { margin-top: 20px; font-size: 13.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.dg2-meta b { color: var(--text-2); font-weight: 650; }

.dg2-sec { margin-top: clamp(84px, 10vw, 136px); }
.dg2-head { display: grid; justify-items: center; gap: 14px; text-align: center; }
.dg2-head h2 { font-size: clamp(28px, 3.5vw, 44px); font-weight: 720; letter-spacing: -.045em; line-height: 1.08; text-wrap: balance; }
.dg2-sub { max-width: 38rem; font-size: 16px; line-height: 1.6; color: var(--text-2); text-wrap: balance; }

/* Trois mesures : sous-grille, chaque ligne alignée d’une carte à l’autre */
.dg2-ms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(7, auto); gap: 0 18px; margin-top: 48px; }
.dg2-m { grid-row: span 7; display: grid; grid-template-rows: subgrid; row-gap: 0; padding: 14px 14px 26px; }
.dg2-m > :not(.dg2-m-art) { padding: 0 16px; }
.dg2-m-art { display: grid; place-items: center; height: 168px; margin-bottom: 24px; border-radius: var(--r-l); background: var(--card-inset); border: 1px solid var(--stroke); }
.dg2-m .dx-k { align-self: end; }
.dg2-m h3 { margin-top: 8px; font-size: 24px; font-weight: 720; letter-spacing: -.035em; line-height: 1.15; }
.dg2-m-d { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.dg2-m-dl { display: contents; }
.dg2-m-dl > div { margin: 18px 16px 0; padding: 16px 0 0 !important; border-top: 1px solid var(--stroke); }
.dg2-m-dl dt { font-size: 11.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.dg2-m-dl dd { margin-top: 6px; font-size: 14.5px; line-height: 1.55; }
.dg2-m-foot { align-self: end; display: flex; align-items: center; gap: 10px; margin-top: 22px; font-size: 13.5px; font-weight: 650; color: var(--text-2); }
.dg2-m-foot::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: var(--stroke-2); }
.dg2-m.is-main { border-color: transparent; box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent), var(--shadow); }
.dg2-m.is-main .dg2-m-foot { color: var(--text); }
.dg2-m.is-main .dg2-m-foot::before { background: var(--grad); box-shadow: 0 0 10px color-mix(in srgb, var(--g2) 70%, transparent); }
.ma-ring { width: 124px; }
.ma-track { fill: none; stroke: var(--stroke-2); stroke-width: 7; }
.ma-band { fill: none; stroke: var(--accent); stroke-opacity: .22; stroke-width: 15; }
.ma-val { fill: none; stroke-width: 7; stroke-linecap: round; }
.ma-num { font-size: 27px; font-weight: 750; letter-spacing: -.04em; fill: var(--text); font-variant-numeric: tabular-nums; }
.ma-sub { font-size: 11.5px; font-weight: 600; fill: var(--text-3); font-variant-numeric: tabular-nums; }
.ma-days { width: 150px; }
.ma-on { fill: var(--accent); fill-opacity: var(--o); }
.ma-off { fill: var(--card-inset); stroke: var(--stroke-2); }
.ma-hex { width: 128px; }
.dg2-key { max-width: 880px; margin: 40px auto 0; text-align: center; }

/* Hexagone des familles */
.dg2-fam { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 28px; align-items: center; margin-top: 48px; padding: 28px 44px 28px 20px; }
.fh { width: 100%; height: auto; overflow: visible; }
.fh-ring { fill: none; stroke: var(--stroke-2); }
.fh-in { stroke: var(--stroke); }
.fh-ax { font-size: 10.5px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; fill: var(--text-3); }
.fh-links line { stroke: var(--accent); stroke-width: 1.5; animation: fh-in .55s var(--ease) both; }
.fh-nb { stroke-opacity: .55; }
.fh-op { stroke-dasharray: 3 7; stroke-linecap: round; stroke-opacity: .9; }
@keyframes fh-in { from { opacity: 0; } }
.fh-node { cursor: pointer; outline: none; }
.fh-hit { fill: transparent; }
.fh-halo { fill: var(--accent-soft); stroke: color-mix(in srgb, var(--accent) 40%, transparent); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.6); transition: opacity .35s var(--ease), transform .45s var(--spring); }
.fh-dot { fill: var(--bg); stroke: var(--stroke-2); stroke-width: 2; transform-box: fill-box; transform-origin: center; transition: all .35s var(--spring); }
.fh-l { font-size: 15px; font-weight: 600; fill: var(--text-2); transition: fill .25s; }
.fh-node:hover .fh-dot { stroke: var(--accent); }
.fh-node:hover .fh-l { fill: var(--text); }
.fh-node:focus-visible .fh-halo { opacity: 1; transform: none; stroke: var(--accent); }
.fh-node.is-nb .fh-dot, .fh-node.is-op .fh-dot { stroke: var(--accent); }
.fh-node.is-sel .fh-halo { opacity: 1; transform: none; }
.fh-node.is-sel .fh-dot { fill: var(--accent); stroke: var(--bg); stroke-width: 3; transform: scale(1.25); }
.fh-node.is-sel .fh-l { fill: var(--text); font-weight: 750; }
.dg2-fam-panel { opacity: 0; transform: translateY(8px); transition: opacity .45s var(--ease), transform .55s var(--spring); }
.dg2-fam-panel.in { opacity: 1; transform: none; }
.dgf-head { display: flex; align-items: center; gap: 18px; }
.dgf-head .emblem { flex: none; }
.dgf-head h3 { margin-top: 6px; font-size: clamp(26px, 2.6vw, 34px); font-weight: 750; letter-spacing: -.045em; line-height: 1.05; }
.dgf-motto { margin-top: 20px; padding-left: 16px; border-left: 2px solid; border-image: var(--grad) 1; font-size: 15.5px; font-style: italic; line-height: 1.55; color: var(--text-2); }
.dgf-desc { margin-top: 16px; font-size: 15.5px; line-height: 1.6; }
.dgf-rel { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--stroke); }
.dgf-rel dt { font-size: 11.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.dgf-rel dd { margin-top: 5px; font-size: 15px; font-weight: 650; }
.dgf-levels { margin-top: 20px; }
.dgf-levels ol { display: grid; gap: 6px; margin-top: 10px; }
.dgf-levels li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; }
.dgf-levels li .tnum { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--card-inset); border: 1px solid var(--stroke); font-size: 12px; font-weight: 700; color: var(--text-3); }

/* Lire un résultat */
.dg2-mg { margin-top: 48px; padding: clamp(28px, 4vw, 48px); }
.mg-scale { position: relative; height: 186px; margin: 0 18px; }
.mg-track { position: absolute; left: 0; right: 0; top: 156px; height: 1px; background: var(--stroke-2); }
.mg-tick { position: absolute; bottom: -4px; left: calc(var(--t) * 1%); width: 1px; height: 9px; background: var(--stroke-2); }
.mg-tick::before { content: ''; position: absolute; bottom: 9px; left: 0; width: 1px; height: 148px; background: linear-gradient(to top, var(--stroke), transparent); }
.mg-tick span { position: absolute; top: 14px; left: 50%; translate: -50% 0; font-size: 11.5px; color: var(--text-3); font-style: normal; }
.mg-mark { position: absolute; inset: 0; transition: opacity .45s var(--ease); }
.mg-band, .mg-pt, .mg-lab { position: absolute; transition: left .8s var(--spring), width .8s var(--spring), background .35s, border-color .35s; }
.mg-band { left: calc((var(--v) - var(--m)) * 1%); width: calc(var(--m) * 2%); height: 20px; border-radius: 999px; }
.mg-pt { left: calc(var(--v) * 1%); width: 12px; height: 12px; translate: -50% 0; border-radius: 999px; }
.mg-lab { left: calc(var(--v) * 1%); translate: -50% 0; font-size: 13px; font-weight: 650; white-space: nowrap; }
.mg-a .mg-band { top: 34px; background: var(--card-inset); border: 1px solid var(--stroke-2); }
.mg-a .mg-pt { top: 38px; background: var(--text-3); }
.mg-a .mg-lab { top: 6px; color: var(--text-2); }
.mg-b { opacity: 0; }
.mg-b .mg-band { top: 84px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.mg-b .mg-pt { top: 88px; background: var(--accent); }
.mg-b .mg-lab { top: 112px; color: var(--accent); }
.mg.is-on .mg-b { opacity: 1; }
.mg[data-verdict="up"] .mg-b .mg-band { background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.mg[data-verdict="up"] .mg-b .mg-pt { background: var(--good); }
.mg[data-verdict="up"] .mg-b .mg-lab { color: var(--good); }
.mg-ctl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--stroke); }
.mg-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.mg-opt { display: grid; justify-items: center; gap: 2px; min-width: 112px; padding: 12px 18px; border-radius: var(--r-m); background: var(--card); border: 1px solid var(--stroke); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); transition: transform .35s var(--spring), border-color .25s, background .25s, box-shadow .25s; }
.mg-opt:hover { transform: translateY(-2px); border-color: var(--stroke-2); }
.mg-opt b { font-size: 22px; font-weight: 720; letter-spacing: -.03em; }
.mg-opt small { font-size: 12px; color: var(--text-3); }
.mg-opt[aria-checked="true"] { background: var(--accent-soft); border-color: transparent; box-shadow: 0 0 0 1.5px var(--accent); }
.mg-out { display: flex; align-items: baseline; gap: 14px; margin-top: 22px; }
.mg-chip { flex: none; }
.mg-out p { font-size: 15px; line-height: 1.6; color: var(--text-2); max-width: 46rem; }

/* Ruche des sources, sur la grille du logo */
.hc { position: relative; max-width: 860px; margin: 52px auto 0; container-type: inline-size; }
.hc-grid { position: relative; aspect-ratio: 800 / 720; }
.hc-cell { position: absolute; aspect-ratio: .866; transition: filter .35s var(--ease); }
.hc-face { position: absolute; inset: 0; isolation: isolate; display: grid; place-content: center; justify-items: center; gap: 3px; padding: 0 8%; text-align: center; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--stroke-2); transition: transform .45s var(--spring), background .3s var(--ease), opacity .3s var(--ease); }
.hc-face::before { content: ''; position: absolute; inset: 1.5px; z-index: -1; clip-path: inherit; background: color-mix(in srgb, var(--menu-bg) 88%, var(--accent) 3%); transition: background .3s var(--ease); }
.hc-face b { font-size: clamp(13px, 2.6cqw, 22px); font-weight: 720; letter-spacing: -.025em; line-height: 1.1; color: var(--text); }
.hc-face small { font-size: clamp(9px, 1.3cqw, 11px); font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.hc-r2 .hc-face b { font-size: clamp(10px, 1.85cqw, 15.5px); }
button.hc-face { cursor: pointer; }
button.hc-face:hover, button.hc-face.is-on, button.hc-face:focus-visible { background: var(--grad); transform: translateY(-3px) scale(1.035); outline: none; }
button.hc-face:hover::before, button.hc-face.is-on::before { background: color-mix(in srgb, var(--menu-bg) 84%, var(--accent) 7%); }
.hc-cell:has(.is-on), .hc-cell:has(button.hc-face:hover) { z-index: 2; filter: drop-shadow(0 16px 26px color-mix(in srgb, var(--g2) 32%, transparent)); }
.hc.has-tip button.hc-face:not(.is-on) { opacity: .5; }
.hc-void { background: var(--stroke); opacity: .5; }
.hc-void::before { background: var(--card-inset); }
.hc-core { background: var(--grad); gap: 8px; }
.hc-core::before { inset: 2px; background: color-mix(in srgb, var(--menu-bg) 92%, var(--accent) 4%); }
.hc-core svg { width: 9cqw; height: auto; }
.hc-core b { font-size: clamp(8px, 1.15cqw, 10.5px); font-weight: 700; letter-spacing: .32em; margin-right: -.32em; color: var(--text-2); }
.hc-wait .hc-cell { opacity: 0; }
.hc-in .hc-cell { animation: hc-in .8s var(--spring) both; animation-delay: calc(var(--d) * .16s); }
@keyframes hc-in { from { opacity: 0; transform: scale(.55) rotate(-30deg); } }
.hc-tip { position: absolute; z-index: 5; width: 300px; padding: 20px 22px; border-radius: var(--r-l); background: var(--menu-bg); border: 1px solid var(--stroke-2); box-shadow: var(--shadow-lg); opacity: 0; transform: translateX(-8px); transition: opacity .3s var(--ease), transform .45s var(--spring); }
.hc-tip:not(.from-left) { transform: translateX(8px); }
.hc-tip.in { opacity: 1; transform: none; }
.hc-tip-o { font-size: 11.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.hc-tip-t { margin-top: 8px; font-size: 16.5px; font-weight: 720; letter-spacing: -.02em; line-height: 1.3; }
.hc-tip-d { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--text-2); }
.hc-tip-a { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13.5px; font-weight: 650; color: var(--accent); }
.hc-tip-a .ic { width: 15px; height: 15px; }
.hc-hint { margin-top: 18px; text-align: center; font-size: 13px; color: var(--text-3); }
.hc.has-tip .hc-hint { visibility: hidden; }
@container (max-width: 679px) {
  .hc-tip { position: relative; width: auto; margin-top: 8px; transform: none !important; }
  .hc.has-tip .hc-hint { display: none; }
}

/* Fin de page */
.dg2-end { position: relative; overflow: hidden; isolation: isolate; display: grid; justify-items: center; gap: 14px; margin: clamp(84px, 10vw, 136px) 0 24px; padding: clamp(48px, 7vw, 80px) 28px; text-align: center; }
.dg2-end-art { position: absolute; z-index: -1; right: -70px; bottom: -90px; opacity: calc(.08 + .08 * var(--hex-o)); }
.dg2-end h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 720; letter-spacing: -.04em; text-wrap: balance; }
.dg2-end p { max-width: 34rem; font-size: 15.5px; color: var(--text-2); }
.dg2-end .dg2-cta { margin-top: 18px; }

@media (max-width: 960px) {
  .dg2-ms { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 16px; }
  .dg2-m { grid-row: auto; grid-template-rows: none; display: flex; flex-direction: column; }
  .dg2-m .dx-k, .dg2-m-foot { align-self: flex-start; }
  .dg2-fam { grid-template-columns: minmax(0, 1fr); padding: 20px 22px 28px; }
  .dg2-fam-viz { max-width: 460px; margin: 0 auto; width: 100%; }
}
@media (max-width: 560px) {
  .dg2-hero h1 br { display: none; }
  .mg-scale { margin: 0 10px; }
  .mg-opts { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mg-opt { min-width: 0; padding: 10px 6px; }
  .mg-out { flex-direction: column; gap: 10px; }
  .dgf-rel { grid-template-columns: 1fr; }
  .dg2-cta .btn { width: 100%; justify-content: center; }
}

.welcome .note a, .home-cta a, .profile-empty-cta a, .sheet-retake a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

@media (max-width: 860px) {
  .ob-head-in { gap: 12px; padding: 12px 18px; }
  .ob-stage { padding: 20px 14px 18px; }
  .ob-secs { padding: 8px 18px 10px; }
  .lk { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .lk-opt { grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto; justify-items: start; align-items: center; min-height: 0; padding: 14px 16px; }
  .lk-opt .lk-dot { justify-self: center; }
  .lk-l { text-align: left; font-size: 14.5px; }
  .sj-row, .srt-row { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .spot { grid-template-columns: minmax(0, 1fr); }
  .bld-frags { grid-template-columns: minmax(0, 1fr); }
  .lvc { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .sj-scale { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .srt-opts { grid-template-columns: minmax(0, 1fr); }
  .srt-btn { min-height: 40px; text-align: left; padding: 8px 14px; }
  .certainty { width: 100%; }
  .certainty-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .cert { justify-content: center; padding: 0 8px; font-size: 13.5px; }
  .cert kbd { display: none; }
}

/* ==========================================================================
   v23 · Pratiquer refondu : ouverture centrée, démonstration, process à la une, index par verbe
   ========================================================================== */
.pxh { padding-bottom: 8px; }
.pxh-say { margin-top: 30px; display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 4px 10px; font-size: clamp(18px, 1.9vw, 22px); font-weight: 600; letter-spacing: -.02em; color: var(--text-2); }
.pxh-say-v { display: inline-flex; align-items: center; gap: 6px; padding: 0 2px 3px; font: inherit; color: var(--text); background: linear-gradient(var(--accent), var(--accent)) 0 100% / 100% 1.5px no-repeat; transition: background-size .45s var(--ease), color .25s; }
.pxh-say-v .ic { width: 18px; height: 18px; color: var(--accent); transition: transform .35s var(--spring); }
.pxh-say-v:hover { color: var(--accent); }
.pxh-say-v:hover .ic { transform: translateY(2px); }
.pxh-say-v.is-empty { color: var(--accent); background-image: linear-gradient(90deg, var(--accent) 50%, transparent 0); background-size: 7px 1.5px; background-repeat: repeat-x; }
.pxh .dg2-meta { margin-top: 14px; }

/* Démonstration : le prompt du jour se complète */
.pxd { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 0; margin-top: clamp(40px, 6vw, 72px); overflow: hidden; isolation: isolate; }
.pxd::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 80% at 0% 0%, color-mix(in srgb, var(--app) 12%, transparent), transparent 70%); }
.pxd-info { display: flex; flex-direction: column; padding: clamp(28px, 4vw, 48px); }
.pxd-k { display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.pxd-k .ic { width: 15px; height: 15px; }
.pxd-info h2 { margin-top: 16px; font-size: clamp(26px, 2.7vw, 36px); font-weight: 720; letter-spacing: -.045em; line-height: 1.08; text-wrap: balance; }
.pxd-desc { margin-top: 14px; font-size: 16px; line-height: 1.6; color: var(--text-2); }
.pxd-meta { margin-top: 20px; display: flex; align-items: center; gap: 16px; }
.pxd-meta .plvl span { display: inline; margin-left: 4px; }
.pxd-acts { margin-top: auto; padding-top: 32px; display: flex; flex-wrap: wrap; gap: 10px; }
.pxd-acts .btn .ic { width: 16px; height: 16px; }
.pxd-doc { position: relative; display: flex; flex-direction: column; margin: 14px; border-radius: var(--r-l); background: var(--card-inset); border: 1px solid var(--stroke); }
.pxd-doc-h { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--stroke); font-size: 13px; font-weight: 600; color: var(--text-2); }
.pxd-count { flex: none; min-width: 9.5em; }
.pxd-prog { flex: 1; height: 3px; border-radius: 99px; background: var(--stroke); overflow: hidden; }
.pxd-prog i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--grad); transition: width .6s var(--spring); }
.pxd-text { position: relative; height: 300px; overflow: hidden; padding: 20px 22px 40px; white-space: pre-wrap; font-size: 14.5px; line-height: 1.75; color: var(--text-2); -webkit-mask-image: linear-gradient(transparent 0, #000 18px, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(transparent 0, #000 18px, #000 calc(100% - 64px), transparent); }
.pxd-v { padding: 1px 6px; border-radius: 6px; font-weight: 600; color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent); transition: background .4s, color .4s, box-shadow .4s; }
.pxd-v:has(> span:empty):not(.is-typing)::before { content: '[' attr(data-k) ']'; }
.pxd-v.is-typing { color: var(--text); background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.pxd-v.is-typing > span::after { content: ''; display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -2px; background: var(--accent); animation: pxd-caret .8s steps(1) infinite; }
@keyframes pxd-caret { 50% { opacity: 0; } }
.pxd-v.is-set { color: var(--text); background: var(--good-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--good) 38%, transparent); }
.pxd-doc-f { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px 16px; }
.pxd-ready { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 650; color: var(--good); opacity: 0; transform: translateY(4px); transition: opacity .4s var(--ease), transform .5s var(--spring); }
.pxd-ready .ic { width: 16px; height: 16px; }
.pxd.is-ready .pxd-ready { opacity: 1; transform: none; }
.pxd.is-ready [data-act=daily-copy] { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--good) 55%, transparent); }

/* Process */
.pxp-tools { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.pxp-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px; margin: 44px 0 16px; font-size: 11.5px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--text-2); }
.pxp-group .tnum { letter-spacing: .04em; text-transform: none; font-weight: 600; color: var(--text-3); }
.pxp-more { display: flex; justify-content: center; margin-top: 24px; }
.pxp-more .btn .ic { width: 16px; height: 16px; transition: transform .35s var(--spring); }

.pxf { display: grid; gap: 36px; padding: clamp(26px, 3.5vw, 44px); overflow: hidden; isolation: isolate; }
.pxf::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(50% 90% at 100% 0%, color-mix(in srgb, var(--g2) 12%, transparent), transparent 70%); }
.pxf:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--stroke)); }
.pxf-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 320px); gap: 40px; align-items: start; }
.pxf-k { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; color: var(--text-3); }
.pxf-id h3 { margin-top: 16px; font-size: clamp(24px, 2.5vw, 32px); font-weight: 720; letter-spacing: -.04em; line-height: 1.12; text-wrap: balance; }
.pxf-trig { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--text-2); max-width: 40rem; }
.pxf-steps { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 16px; }
.pxf-steps::before, .pxf-steps::after { content: ''; position: absolute; top: 21px; left: 22px; right: calc(100% / var(--n) - 22px); height: 1.5px; background: var(--stroke-2); }
.pxf-steps::after { background: var(--grad); transform-origin: left; transform: scaleX(0); transition: transform 1.4s var(--ease) .2s; }
.pxf.is-in .pxf-steps::after { transform: scaleX(1); }
.pxf-steps li { position: relative; z-index: 1; display: grid; gap: 6px; align-content: start; opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .6s var(--spring); transition-delay: calc(.25s + var(--i) * .2s); }
.pxf.is-in .pxf-steps li { opacity: 1; transform: none; }
.pxf-node { width: 44px; height: 44px; margin-bottom: 10px; display: grid; place-items: center; border-radius: 14px; color: var(--app); background: linear-gradient(color-mix(in srgb, var(--app) 14%, transparent), color-mix(in srgb, var(--app) 14%, transparent)), var(--bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app) 30%, transparent); }
.pxf-node .ic { width: 19px; height: 19px; }
.pxf-steps li.is-done .pxf-node { color: #fff; background: var(--good); box-shadow: none; }
.pxf-n { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.pxf-steps b { font-size: 14.5px; font-weight: 650; line-height: 1.35; }
.pxf-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 26px; border-top: 1px solid var(--stroke); }
.pxf-out { display: flex; gap: 14px; font-size: 14.5px; line-height: 1.55; color: var(--text-2); max-width: 46rem; }
.pxf-out span { flex: none; padding-top: 2px; font-size: 11px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.pxf-cta { flex: none; }
.pxf-cta .ic { width: 16px; height: 16px; transition: transform .35s var(--spring); }
.pxf:hover .pxf-cta .ic, .pxt:hover .pxt-gain b { transform: translateX(3px); }

/* Gain de temps : chiffre fort, légende, comparaison */
.pxg { display: grid; gap: 4px; }
.pxg-big { font-size: clamp(40px, 4.4vw, 56px); font-weight: 750; letter-spacing: -.05em; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pxg-cap { font-size: 14px; line-height: 1.5; color: var(--text-2); }
.pxg-bars { display: grid; gap: 8px; margin-top: 16px; }
.pxg-bar { position: relative; display: block; height: 18px; }
.pxg-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 7px; transition: width 1.2s var(--spring) .3s; width: 0; }
.pxg-bar.is-now i { background: var(--grad); }
.pxg-bar.is-then i { background: var(--card-inset); box-shadow: inset 0 0 0 1px var(--stroke-2); }
.is-in .pxg-bar.is-now i, .ppx-gain .pxg-bar.is-now i { width: calc(var(--r) * 100%); }
.is-in .pxg-bar.is-then i, .ppx-gain .pxg-bar.is-then i { width: 100%; }
.pxg-bar em { position: absolute; left: calc(var(--r) * 100% + 10px); top: 50%; translate: 0 -50%; font-size: 11.5px; font-weight: 600; font-style: normal; color: var(--text-3); white-space: nowrap; }
.pxg-bar.is-then em { left: 10px; }

/* Tuiles de process */
.pxt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.pxt { display: flex; flex-direction: column; padding: 24px 24px 20px; overflow: hidden; border-radius: var(--r-l); }
.pxt:hover { border-color: color-mix(in srgb, var(--accent) 30%, var(--stroke)); box-shadow: var(--shadow-lg); }
.pxt-k { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12.5px; color: var(--text-3); }
.pxt-k > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pxt-k .plvl span { display: none; }
.pxt h3 { margin-top: 12px; font-size: 18px; font-weight: 680; letter-spacing: -.025em; line-height: 1.3; text-wrap: balance; }
.pxt-body { position: relative; flex: 1; min-height: 124px; margin-top: 10px; }
.pxt-trig, .pxt-steps { position: absolute; inset: 0; transition: opacity .35s var(--ease), transform .45s var(--spring); }
.pxt-trig { font-size: 14px; line-height: 1.6; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.pxt-steps { display: grid; align-content: start; gap: 3px; opacity: 0; transform: translateY(10px); pointer-events: none; }
.pxt-steps li { display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; line-height: 1.4; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pxt-steps .tnum { flex: none; width: 16px; font-size: 11.5px; font-weight: 700; color: var(--accent); }
.pxt:hover .pxt-trig, .pxt:focus-visible .pxt-trig { opacity: 0; transform: translateY(-8px); }
.pxt:hover .pxt-steps, .pxt:focus-visible .pxt-steps { opacity: 1; transform: none; }
.pxt-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--stroke); }
.pxt-foot .chain-n { width: 24px; height: 24px; border-radius: 8px; }
.pxt-foot .chain-n .ic { width: 12px; height: 12px; }
.pxt-foot .chain-l { width: 6px; }
.pxt-gain { display: grid; justify-items: end; text-align: right; min-width: 0; }
.pxt-gain b { font-size: 22px; font-weight: 750; letter-spacing: -.04em; line-height: 1.05; color: var(--text); transition: transform .35s var(--spring); }
.pxt-gain small { max-width: 13em; font-size: 12px; line-height: 1.35; color: var(--text-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Rangée défilante */
.pxr { margin-top: 20px; }
.pxr-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pxr-nav { display: flex; gap: 6px; margin-top: 28px; }
.pxr-nav .icon-btn { border: 1px solid var(--stroke); background: var(--card); }
.pxr-nav .icon-btn:disabled { opacity: .35; }
.pxr-nav .ic { width: 17px; height: 17px; }
.pxr-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 32px) / 3); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 4px 0 18px; margin: -4px 0 0; }
.pxr-track::-webkit-scrollbar { display: none; }
.pxr-track > .pxt { scroll-snap-align: start; }

/* Bibliothèque : index par verbe */
.pxv { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 44px; }
.pxv-t { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 6px 10px; padding: 24px 22px 20px; text-align: left; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--stroke); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); transition: transform .35s var(--spring), border-color .25s, background .25s, box-shadow .3s; }
.pxv-t b { font-size: 20px; font-weight: 700; letter-spacing: -.03em; }
.pxv-n { font-size: 13px; font-weight: 600; color: var(--text-3); }
.pxv-bar { grid-column: 1 / -1; height: 3px; margin-top: 10px; border-radius: 99px; background: var(--stroke); overflow: hidden; }
.pxv-bar i { display: block; height: 100%; width: calc(var(--w) * 100%); border-radius: inherit; background: var(--stroke-2); transition: width .7s var(--spring), background .3s; }
.pxv-t:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--stroke-2); }
.pxv-t:hover .pxv-bar i { background: var(--accent); }
.pxv-t.is-on { background: var(--accent-soft); border-color: transparent; box-shadow: 0 0 0 1.5px var(--accent); }
.pxv-t.is-on .pxv-n { color: var(--accent); }
.pxv-t.is-on .pxv-bar i { background: var(--grad); }
.pxv-t:disabled { opacity: .4; }

/* Bibliothèque : recherche, applications, filtres */
.pxb { display: grid; gap: 12px; margin-top: 16px; }
.pxb-row { display: flex; align-items: center; gap: 10px; }
.pxb-row .pl-search { flex: 1; min-width: 0; }
.pxa { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.pxa-c { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px 0 8px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--text-2); background: var(--card); border: 1px solid var(--stroke); transition: transform .3s var(--spring), border-color .2s, background .2s, color .2s; }
.pxa-c:first-child { padding-left: 16px; }
.pxa-c small { font-size: 12px; font-weight: 600; color: var(--text-3); }
.pxa-ic { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 999px; color: var(--app); background: color-mix(in srgb, var(--app) 13%, transparent); }
.pxa-ic .ic { width: 14px; height: 14px; }
.pxa-c:hover:not(:disabled) { transform: translateY(-2px); color: var(--text); border-color: var(--stroke-2); }
.pxa-c.is-on { color: var(--text); background: color-mix(in srgb, var(--app, var(--accent)) 12%, var(--card)); border-color: transparent; box-shadow: 0 0 0 1.5px var(--app, var(--accent)); }
.pxa-c.is-on small { color: var(--text-2); }
.pxa-c:disabled { opacity: .4; }
.pxb-r { flex: none; display: flex; gap: 6px; }
.pxb-r .pl-fav-t, .pxk-btn { height: 52px; border-radius: 16px; padding: 0 18px; }
.pxk { position: relative; }
.pxk-btn { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text-2); background: var(--card); border: 1px solid var(--stroke); transition: border-color .2s, color .2s; }
.pxk-btn .ic { width: 17px; height: 17px; }
.pxk-btn:hover, .pxk.is-open .pxk-btn { color: var(--text); border-color: var(--stroke-2); }
.pxk-panel { position: absolute; z-index: 40; right: 0; top: calc(100% + 10px); width: min(460px, calc(100vw - 32px)); display: grid; gap: 20px; padding: 22px; border-radius: var(--r-l); background: var(--menu-bg); border: 1px solid var(--stroke-2); box-shadow: var(--shadow-lg); transform-origin: top right; animation: pxk-in .3s var(--spring) both; }
@keyframes pxk-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.pxk-g p { font-size: 11.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.pxk-os { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pxk-o { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text-2); background: var(--card-inset); border: 1px solid var(--stroke); transition: border-color .2s, color .2s, background .2s; }
.pxk-o small { font-size: 11.5px; color: var(--text-3); }
.pxk-o:hover:not(:disabled) { color: var(--text); border-color: var(--stroke-2); }
.pxk-o.is-on { color: var(--text); background: var(--accent-soft); border-color: transparent; box-shadow: 0 0 0 1.5px var(--accent); }
.pxk-o:disabled { opacity: .4; }

/* Cartes de prompt : la description, puis l’aperçu au survol ; deux cartes larges en tête */
.pxgrid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.pxc { grid-column: span 2; min-height: 0; padding: 22px 22px 16px; gap: 0; }
.pxc.is-wide { grid-column: span 3; }
.pxc .pc-head .plvl span { display: inline; margin-left: 4px; }
.pxc h3 { margin-top: 16px; font-size: 18px; font-weight: 680; }
.pxc-body { position: relative; flex: 1; min-height: 76px; margin: 10px 0 14px; }
.pxc .pc-desc, .pxc-peek { transition: opacity .35s var(--ease), transform .45s var(--spring); }
.pxc .pc-desc { font-size: 14px; line-height: 1.6; -webkit-line-clamp: 4; }
.pxc-peek { position: absolute; inset: 0; overflow: hidden; padding: 12px 14px; border-radius: var(--r-m); font-size: 13px; line-height: 1.6; color: var(--text-2); background: var(--card-inset); border: 1px solid var(--stroke); opacity: 0; transform: translateY(8px); -webkit-mask-image: linear-gradient(#000 60%, transparent); mask-image: linear-gradient(#000 60%, transparent); }
.pxc-peek .pv { white-space: normal; }
.pxc:not(.is-wide):hover .pc-desc, .pxc:not(.is-wide):focus-visible .pc-desc { opacity: 0; transform: translateY(-6px); }
.pxc:hover .pxc-peek, .pxc:focus-visible .pxc-peek { opacity: 1; transform: none; }
.pxc.is-wide .pxc-body { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); gap: 18px; min-height: 120px; }
.pxc.is-wide .pxc-peek { position: relative; inset: auto; opacity: 1; transform: none; }
.pxc.is-wide h3 { font-size: 22px; letter-spacing: -.03em; }

/* Éditeur : champs complétés dans le texte même */
.pxe-h { display: flex; align-items: center; gap: 14px; }
.pxe-k { font-size: 11.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.pxe-filled { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.pxe-prog { width: 90px; height: 3px; border-radius: 99px; background: var(--stroke); overflow: hidden; }
.pxe-prog i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--grad); transition: width .5s var(--spring); }
.pxe.is-complete .pxe-filled { color: var(--good); }
.pxe.is-complete .pxe-prog i { background: var(--good); }
.pxe-text { margin-top: 12px; padding: 22px 24px; border-radius: var(--r-l); white-space: pre-wrap; font-size: 15px; line-height: 1.8; color: var(--text-2); background: var(--card-inset); border: 1px solid var(--stroke); overflow-wrap: anywhere; }
.pxe.is-compact .pxe-text { max-height: 440px; overflow-y: auto; font-size: 14.5px; }
.pxe-v { padding: 2px 7px; border-radius: 7px; font-weight: 600; color: var(--text); background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); outline: none; cursor: text; caret-color: var(--accent); transition: box-shadow .25s, background .25s; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.pxe-v:empty::before { content: attr(data-ph); color: var(--accent); font-weight: 600; }
.pxe-v:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.pxe-v:focus { background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 4px var(--accent-soft); }
.pxe-v:focus:empty::before { opacity: .55; }
.pxe-v.is-set:not(:focus) { background: var(--good-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--good) 38%, transparent); font-weight: 500; }
.pxe-hint { margin-top: 10px; font-size: 12.5px; color: var(--text-3); }

/* Fiche process : colonne d’étapes, résumé collant */
.ppx-hero { margin-top: 24px; max-width: 860px; }
.ppx-hero h1 { margin-top: 18px; font-size: clamp(34px, 4.2vw, 56px); font-weight: 750; letter-spacing: -.05em; line-height: 1.04; text-wrap: balance; }
.ppx-when { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--stroke); }
.ppx-when dt { font-size: 11.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.ppx-when dd { margin: 8px 0 0; font-size: 16px; line-height: 1.6; color: var(--text-2); }
.ppx-when div:last-child dd { color: var(--text); }
.ppx { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; margin-top: 44px; }
.ppx .pp-steps { margin-top: 0; }
.pp-steps::after { content: ''; position: absolute; left: 19px; top: 24px; width: 2px; height: calc((100% - 48px) * var(--p, 0)); border-radius: 2px; background: var(--grad); transition: height .9s var(--spring); }
.ppx-side { position: sticky; top: calc(var(--nav-h, 76px) + 20px); display: grid; gap: 22px; padding: 24px; border-radius: var(--r-l); }
.ppx-side-top { display: flex; align-items: center; gap: 16px; }
.ppx-side .pp-ring { width: 84px; height: 84px; }
.ppx-side .pp-ring-c b { font-size: 24px; }
.ppx-lvl { margin-top: 6px; }
.ppx-lvl .plvl span { display: inline; margin-left: 4px; font-size: 13px; color: var(--text-2); }
.ppx-gain { padding-top: 20px; border-top: 1px solid var(--stroke); }
.ppx-gain .pxg { margin-top: 10px; }
.ppx-gain .pxg-big { font-size: 40px; }
.ppx-gain .pxg-cap { font-size: 13.5px; }
.ppx-nav { display: grid; gap: 2px; padding-top: 16px; border-top: 1px solid var(--stroke); }
.ppx-nav button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 8px 10px; margin: 0 -10px; width: calc(100% + 20px); border-radius: 12px; text-align: left; font-size: 13.5px; line-height: 1.35; color: var(--text-2); transition: background .2s, color .2s; }
.ppx-nav button:hover { background: var(--card-inset); color: var(--text); }
.ppx-nav .tnum { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; font-size: 12px; font-weight: 700; color: var(--text-3); background: var(--card-inset); border: 1px solid var(--stroke); }
.ppx-nav .tnum .ic { width: 13px; height: 13px; }
.ppx-nav .is-open { color: var(--text); font-weight: 650; }
.ppx-nav .is-open .tnum { color: #fff; background: var(--grad); border-color: transparent; }
.ppx-nav .is-done .tnum { color: #fff; background: var(--good); border-color: transparent; }
.ppx-others .pxt-grid { margin-top: 40px; }

/* Fin de process : le moment se marque */
.pp-complete-ic { position: relative; }
.pp-complete.is-fresh { animation: fade-up-soft .6s var(--ease) both; }
.pp-complete.is-fresh .pp-complete-ic { animation: ppx-pop .7s var(--spring) both; }
.pp-complete.is-fresh .pp-complete-ic::after { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--good); animation: ppx-ring 1s var(--ease) .15s both; }
.pp-complete-ic i { position: absolute; left: 50%; top: 50%; width: 8px; height: 9px; margin: -4.5px 0 0 -4px; background: var(--grad); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); opacity: 0; animation: ppx-burst .9s var(--ease) .1s both; }
.pp-complete-ic i:nth-child(odd) { background: var(--good); }
.pp-complete-ic i:nth-of-type(1) { --a: 0deg; } .pp-complete-ic i:nth-of-type(2) { --a: 45deg; } .pp-complete-ic i:nth-of-type(3) { --a: 90deg; } .pp-complete-ic i:nth-of-type(4) { --a: 135deg; }
.pp-complete-ic i:nth-of-type(5) { --a: 180deg; } .pp-complete-ic i:nth-of-type(6) { --a: 225deg; } .pp-complete-ic i:nth-of-type(7) { --a: 270deg; } .pp-complete-ic i:nth-of-type(8) { --a: 315deg; }
@keyframes ppx-pop { from { transform: scale(.3); } }
@keyframes ppx-ring { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(2.4); } }
@keyframes ppx-burst { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scale(.6); } 70% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-46px) scale(1); } }

@media (max-width: 1100px) {
  .pxv { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .pxd { grid-template-columns: minmax(0, 1fr); }
  .pxd-doc { margin-top: 0; }
  .pxf-top { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pxf-steps { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .pxf-steps::before, .pxf-steps::after { top: 22px; bottom: 22px; left: 21px; right: auto; width: 1.5px; height: auto; transform-origin: top; }
  .pxf-steps::after { transform: scaleY(0); } .pxf.is-in .pxf-steps::after { transform: scaleY(1); }
  .pxf-steps li { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: center; }
  .pxf-node { grid-row: span 2; margin: 0; position: relative; z-index: 1; }
  .pxt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pxr-track { grid-auto-columns: calc((100% - 16px) / 2); }
  .pxgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pxc, .pxc.is-wide { grid-column: span 1; }
  .pxc.is-wide .pxc-body { grid-template-columns: minmax(0, 1fr); }
  .pxc.is-wide .pxc-peek { display: none; }
  .ppx { grid-template-columns: minmax(0, 1fr); }
  .ppx-side { position: static; order: -1; grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .ppx-gain { padding-top: 0; border-top: 0; }
  .ppx-nav { display: none; }
}
@media (max-width: 640px) {
  .pxv { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pxv-t { padding: 16px; }
  .pxv-t b { font-size: 17px; }
  .pxa { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 2px 16px; }
  .pxa::-webkit-scrollbar { display: none; }
  .pxa-c { flex: none; }
  .pxb-row { flex-wrap: wrap; } .pxb-row .pl-search { flex: 1 1 100%; }
  .pxb-r { width: 100%; justify-content: stretch; } .pxb-r > * { flex: 1; } .pxb-r .pl-fav-t, .pxk-btn { width: 100%; justify-content: center; }
  .pxk-panel { right: auto; left: 0; }
  .pxt-grid, .pxgrid { grid-template-columns: minmax(0, 1fr); }
  .pxr-track { grid-auto-columns: 86%; }
  .pxt-body { min-height: 0; } .pxt-trig { position: relative; } .pxt-steps { display: none; }
  .pxf-foot { flex-direction: column; align-items: stretch; } .pxf-cta { justify-content: center; }
  .pxd-text { height: 240px; font-size: 13.5px; }
  .pxd-acts .btn { flex: 1; }
  .ppx-when { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .ppx-side { grid-template-columns: minmax(0, 1fr); }
  .pxe-text { padding: 16px; font-size: 14px; }
  .pxe-prog { display: none; }
  .ppx .pp-step { grid-template-columns: 30px minmax(0, 1fr); gap: 10px; }
  .ppx .pp-node { width: 30px; height: 30px; font-size: 13px; margin-top: 20px; }
  .ppx .pp-steps::before, .ppx .pp-steps::after { left: 14px; }
  .ppx .pp-card-h { padding: 18px 16px 0; }
  .ppx .pp-meta { padding: 12px 16px 16px; }
  .ppx .pp-body { padding: 4px 16px 18px; }
  .ppx .pp-prompt-h { flex-wrap: wrap; }
  .ppx .pp-app-l { display: none; }
}

/* ==========================================================================
   v24 · Apprendre refondu : ouverture centrée, chemin de modules, validation, fiche programme
   ========================================================================== */
.lxh-acc { color: var(--accent); }
.lxh-acc b { color: inherit; }
.lx-list { display: grid; gap: 24px; margin-top: 48px; }

/* Carte de programme */
.lxc { padding: clamp(28px, 4vw, 52px) clamp(24px, 4vw, 52px) 32px; overflow: hidden; isolation: isolate; }
.lxc::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(45% 70% at 88% 18%, color-mix(in srgb, var(--g2) 14%, transparent), transparent 70%), radial-gradient(40% 60% at 0% 100%, color-mix(in srgb, var(--g1) 8%, transparent), transparent 70%); }
.lxc-top { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 40px; align-items: center; }
.lxc-k { display: flex; align-items: center; gap: 14px; font-size: 11.5px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.lxc-k .fam-ic { width: 40px; height: 40px; border-radius: 13px; }
.lxc-k .fam-ic .ic { width: 19px; height: 19px; }
.lxc h3 { margin-top: 22px; font-size: clamp(32px, 3.8vw, 50px); font-weight: 750; letter-spacing: -.05em; line-height: 1.04; text-wrap: balance; }
.lxc-desc, .lxf-desc { margin-top: 16px; max-width: 40rem; font-size: 16.5px; line-height: 1.6; color: var(--text-2); }
.lxc-stats { display: flex; flex-wrap: wrap; gap: 0; margin-top: 28px; }
.lxc-stats div { padding: 0 28px; border-left: 1px solid var(--stroke); }
.lxc-stats div:first-child { padding-left: 0; border-left: 0; }
.lxc-stats dt { font-size: 11.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.lxc-stats dd { margin: 4px 0 0; font-size: 30px; font-weight: 720; letter-spacing: -.04em; line-height: 1.1; }
.lxf-accent { color: var(--accent); } .lxf-warm { color: #E0A526; } .lxf-good { color: var(--good); }
.lxc .fam-counts { justify-content: flex-start; margin-top: 20px; }
.lxc-cta { margin-top: 30px; }
.lxc-cta .ic { width: 16px; height: 16px; transition: transform .35s var(--spring); }
.lxc-cta:hover .ic { transform: translateX(3px); }
.lxc-medal { position: relative; isolation: isolate; display: grid; justify-items: center; gap: 6px; text-align: center; color: var(--text-3); }
.lxc-medal::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 84px; width: 240px; height: 240px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--g2) 18%, transparent), transparent); }
.lxc-medal.is-earned::before { background: radial-gradient(closest-side, color-mix(in srgb, #F2C14E 26%, transparent), transparent); }
.lxc-medal .medal { transition: transform .6s var(--spring); }
.lxc-medal:hover .medal { transform: rotate(-6deg) scale(1.04); }
.lxc-medal b { margin-top: 8px; font-size: 15px; font-weight: 700; color: var(--text); }
.lxc-medal small { max-width: 220px; font-size: 13px; line-height: 1.5; color: var(--text-3); }

/* Chemin du programme */
.lxp { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--stroke); }
.lxp-area { position: relative; height: var(--h); margin: 0 0 96px; }
.lxp-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lxp-svg path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.lxp-base { stroke: var(--stroke-2); stroke-width: 1.5; stroke-dasharray: 2 6; }
.lxp-line { stroke: var(--accent); stroke-opacity: .55; stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s var(--ease) .15s; }
.lxp-done { stroke: var(--good); stroke-width: 3; stroke-dasharray: var(--d) 1; stroke-dashoffset: var(--d); transition: stroke-dashoffset 1.4s var(--ease) .9s; }
.lxp.is-in .lxp-line { stroke-dashoffset: 0; }
.lxp.is-in .lxp-done { stroke-dashoffset: 0; }
.lxp-st { position: absolute; inset: 0; }
.lxp-s { position: absolute; z-index: 1; height: 0; translate: -50% 0; opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .6s var(--spring); transition-delay: calc(.2s + var(--i) * .14s); }
.lxp.is-in .lxp-s { opacity: 1; transform: none; }
.lxp-dot { position: absolute; left: calc(50% - 22px); top: -22px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; font-size: 15px; font-weight: 700; color: var(--text-2); background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--stroke-2), 0 0 0 6px var(--bg); transition: transform .4s var(--spring), box-shadow .3s, color .3s, background .3s; }
.lxp-dot .ic { width: 18px; height: 18px; }
.lxp-dot:hover, .lxp-dot:focus-visible { transform: scale(1.14); color: #fff; background: var(--grad); box-shadow: 0 0 0 6px var(--bg), 0 10px 26px -6px color-mix(in srgb, var(--g2) 70%, transparent); outline: none; }
.lxp-voir .lxp-dot { color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 6px var(--bg); }
.lxp-consolider .lxp-dot, .lxp-a_valider .lxp-dot { color: #E0A526; box-shadow: inset 0 0 0 1.5px #E0A526, 0 0 0 6px var(--bg); }
.lxp-maitrise .lxp-dot { color: var(--good); box-shadow: inset 0 0 0 1.5px var(--good), 0 0 0 6px var(--bg); }
.lxp-s.is-won .lxp-dot { color: #fff; background: var(--good); box-shadow: 0 0 0 6px var(--bg); }
.lxp-t { position: absolute; left: 6px; right: 6px; top: 34px; display: grid; gap: 4px; text-align: center; }
.lxp-t b { font-size: 13.5px; font-weight: 650; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lxp-t small { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.lxp.is-compact { margin-top: 0; padding-top: 0; border-top: 0; }

.lx-soon { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 24px; padding: 22px; border-radius: var(--r-l); border: 1px dashed var(--stroke-2); font-size: 14.5px; color: var(--text-3); }
.lx-soon-hex { opacity: .6; line-height: 0; }

/* Les trois étapes de validation */
.lxv-scenes { display: flex; gap: 6px; }
.lxv-scenes i { width: 30px; height: 48px; border-radius: 9px; background: var(--card); border: 1px solid var(--stroke-2); transform-origin: bottom; }
.lxv-scenes i:nth-child(-n+3) { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.lxv-scenes i:nth-child(3) { background: var(--grad); border-color: transparent; transform: translateY(-8px); box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--g2) 70%, transparent); }
.lxv.is-in .lxv-scenes i { animation: lxv-up .6s var(--spring) both; animation-delay: calc(var(--k, 0) * 90ms); }
.lxv-scenes i:nth-child(2) { --k: 1; } .lxv-scenes i:nth-child(3) { --k: 2; } .lxv-scenes i:nth-child(4) { --k: 3; } .lxv-scenes i:nth-child(5) { --k: 4; }
@keyframes lxv-up { from { opacity: 0; scale: 1 .4; } }
.lxv-stamps { display: flex; align-items: center; }
.lxv-stamp { line-height: 0; margin: 0 -14px; transform: rotate(calc((var(--i) - 1) * 9deg)) translateY(calc((var(--i) - 1) * (var(--i) - 1) * 6px)); transition: transform .5s var(--spring); filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .25)); }
.lxv-stamp:nth-child(2) { z-index: 1; }
.lxv.is-in .lxv-stamp { animation: lxv-stamp .8s var(--spring) both; animation-delay: calc(.2s + var(--i) * .15s); }
@keyframes lxv-stamp { from { opacity: 0; transform: translateY(-24px) scale(1.4) rotate(0deg); } }
.dg2-m:hover .lxv-stamp { transform: rotate(calc((var(--i) - 1) * 14deg)) translateY(-4px); }
.lxv-cr { display: grid; justify-items: center; gap: 4px; text-align: center; }
.lxv-cr b { font-size: 52px; font-weight: 750; letter-spacing: -.05em; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lxv-cr small { max-width: 200px; font-size: 12.5px; color: var(--text-3); }
.lxv .dg2-m-foot a { color: var(--accent); }

/* Fiche programme */
.lxf-hero { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 48px; align-items: center; margin-top: 28px; }
.lxf-hero h1 { margin-top: 18px; font-size: clamp(38px, 5vw, 64px); font-weight: 750; letter-spacing: -.055em; line-height: 1.02; text-wrap: balance; }
.lxf-hero .fm-axes { margin-top: 22px; }
.lxf-hero .fm-diag { margin-top: 24px; }
.lxf-path { margin-top: 48px; padding: 40px clamp(24px, 4vw, 52px) 0; }
.lxl { position: relative; display: grid; gap: 14px; margin-top: 48px; }
.lxl::before, .lxl::after { content: ''; position: absolute; left: 21px; top: 24px; bottom: 24px; width: 2px; border-radius: 2px; background: var(--stroke); }
.lxl::after { bottom: auto; height: calc((100% - 48px) * var(--p, 0)); background: var(--good); }
.lxl-lv { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; margin: 18px 0 2px; padding-left: 60px; font-size: 11.5px; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.lxl-lv:first-child { margin-top: 0; }
.lxl-lv::before { content: ''; position: absolute; left: 16px; width: 12px; height: 12px; border-radius: 4px; transform: rotate(45deg); background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--accent); }
.lxl-lv span::after { content: ''; display: inline-block; width: 40px; height: 1px; margin-left: 14px; vertical-align: middle; background: var(--stroke-2); }
.lxm { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; scroll-margin-top: 120px; }
.lxm-n { position: relative; z-index: 1; width: 44px; height: 44px; margin-top: 22px; display: grid; place-items: center; border-radius: 50%; font-size: 15px; font-weight: 700; color: var(--text-2); background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--stroke-2); }
.lxm-n .ic { width: 18px; height: 18px; }
.lxm.mod-voir .lxm-n { color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.lxm.mod-consolider .lxm-n, .lxm.mod-a_valider .lxm-n { color: #E0A526; box-shadow: inset 0 0 0 1.5px #E0A526; }
.lxm.mod-maitrise .lxm-n { color: var(--good); box-shadow: inset 0 0 0 1.5px var(--good); }
.lxm.is-won .lxm-n { color: #fff; background: var(--good); box-shadow: none; }
.lxm-card { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 28px; padding: 24px 26px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--stroke); box-shadow: var(--shadow); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); transition: border-color .3s, transform .4s var(--spring), box-shadow .3s; }
.lxm-card:hover { border-color: var(--stroke-2); }
.lxm:target .lxm-card { border-color: color-mix(in srgb, var(--accent) 45%, var(--stroke)); }
.lxm-card h3 { margin-top: 10px; font-size: 21px; font-weight: 700; letter-spacing: -.03em; line-height: 1.25; }
.lxm-card .mod-sum { margin-top: 8px; font-size: 15px; }
.lxm-more { margin-top: 16px; }
.lxm-more summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font-size: 13.5px; font-weight: 650; color: var(--accent); }
.lxm-more summary::-webkit-details-marker { display: none; }
.lxm-more summary .ic { width: 16px; height: 16px; transition: transform .35s var(--spring); }
.lxm-more[open] summary .ic { transform: rotate(180deg); }
.lxm-more[open] .mod-cols { animation: fade-up-soft .45s var(--ease) both; }
.lxm-more .mod-cols { margin-top: 14px; }
.lxm-act { display: grid; justify-items: center; align-content: center; gap: 10px; text-align: center; padding-left: 28px; border-left: 1px solid var(--stroke); }
.lxm-act .btn { width: 100%; justify-content: center; }
.lxm-act .btn .ic { width: 14px; height: 14px; }
.lxm-act .link-btn { font-size: 13px; }

@media (max-width: 960px) {
  .lxc-top, .lxf-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .lxc-medal { order: -1; grid-template-columns: auto minmax(0, 1fr); justify-items: start; text-align: left; align-items: center; column-gap: 18px; }
  .lxc-medal .medal { grid-row: span 2; width: 96px; height: 96px; }
  .lxc-medal::before { display: none; }
  .lxc-medal b { margin: 0; align-self: end; } .lxc-medal small { align-self: start; }
  .lxf-hero .lxc-medal { order: 0; }
  .lxm-card { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .lxm-act { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--stroke); grid-auto-flow: row; justify-items: stretch; }
  .lxm-act .mod-stamp { justify-self: center; }
}
@media (max-width: 760px) {
  /* Le chemin devient une liste verticale */
  .lxp-area { height: auto; margin: 0; }
  .lxp-svg { display: none; }
  .lxp-st { position: relative; display: grid; gap: 14px; }
  .lxp-st::before { content: ''; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 1.5px; background: var(--stroke-2); }
  .lxp-s { position: relative; left: auto !important; top: auto !important; width: auto !important; translate: none; height: auto; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; align-items: center; }
  .lxp-dot { position: relative; left: 0; top: 0; width: 36px; height: 36px; font-size: 13px; }
  .lxp-t { position: static; text-align: left; }
  .lxp-t small { white-space: normal; }
  .lxf-path { padding: 24px 20px; }
  .lxc-stats div { padding: 0 18px; } .lxc-stats dd { font-size: 24px; }
  .lxc-stats { row-gap: 14px; }
}
@media (max-width: 560px) {
  .lxc-cta { width: 100%; justify-content: center; }
  .lxm { grid-template-columns: 30px minmax(0, 1fr); gap: 10px; }
  .lxm-n { width: 30px; height: 30px; font-size: 13px; margin-top: 24px; }
  .lxl::before, .lxl::after { left: 14px; }
  .lxl-lv { padding-left: 42px; } .lxl-lv::before { left: 9px; }
  .lxm-card { padding: 20px 18px; }
  .lxm-card .mod-cols { grid-template-columns: minmax(0, 1fr); }
}
.lxm-act .mod-soon { justify-self: center; }

/* ==========================================================================
   v25 · Vos accomplissements : niveau garanti, preuves, marché, échelle, distinctions
   ========================================================================== */
.ag-sec { margin-top: clamp(64px, 8vw, 104px); }
.ag-sec .dg2-head { margin-bottom: 36px; }

/* Ouverture : le niveau garanti, l’escalier des cinq niveaux */
.agh { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: 48px; align-items: center; padding: clamp(32px, 4.5vw, 56px); overflow: hidden; isolation: isolate; }
.agh::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: radial-gradient(50% 80% at 100% 100%, color-mix(in srgb, var(--g2) 14%, transparent), transparent 70%), radial-gradient(40% 60% at 0% 0%, color-mix(in srgb, var(--g1) 9%, transparent), transparent 70%); }
.agh-name { margin-top: 18px; font-size: clamp(48px, 6.4vw, 84px); font-weight: 760; letter-spacing: -.06em; line-height: .98; }
.agh-name.is-none { color: var(--text-3); }
.agh-role { margin-top: 14px; font-size: 19px; font-weight: 650; letter-spacing: -.02em; }
.agh-can { margin-top: 12px; max-width: 36rem; font-size: 15.5px; line-height: 1.65; color: var(--text-2); }
.agh-meta { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--stroke); font-size: 13.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.agh-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 24px; }
.agh-acts .btn .ic { width: 16px; height: 16px; }
.agh-est { font-size: 14px; color: var(--text-2); max-width: 22rem; line-height: 1.5; }
.agh-est b { color: var(--text); }
.ags { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; gap: 10px; height: 300px; }
.ags-s { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.ags-bar { position: relative; display: block; height: calc(18% + var(--k) * 14%); border-radius: 14px 14px 6px 6px; background: var(--card-inset); border: 1px solid var(--stroke); transform-origin: bottom; transition: transform .9s var(--spring), background .4s; transition-delay: calc(var(--k) * 80ms); }
.agh:not(.is-in) .ags-bar { transform: scaleY(.15); }
.ags-s.is-on .ags-bar { background: color-mix(in srgb, var(--accent) 22%, var(--card-inset)); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.ags-s.is-cur .ags-bar { background: var(--grad); border-color: transparent; box-shadow: 0 18px 40px -14px color-mix(in srgb, var(--g2) 75%, transparent); }
.ags-s.is-est:not(.is-cur) .ags-bar { border: 1.5px dashed var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.ags-l { display: grid; gap: 2px; margin-top: 12px; font-size: 12.5px; font-weight: 600; color: var(--text-3); text-align: center; }
.ags-l b { font-size: 11.5px; color: var(--text-3); }
.ags-s.is-on .ags-l { color: var(--text-2); }
.ags-s.is-cur .ags-l { color: var(--text); font-weight: 700; }
.ags-pin { position: absolute; left: 50%; translate: -50% 0; bottom: calc(18% + var(--k) * 14% + 46px); padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); opacity: 0; transition: opacity .5s var(--ease) .9s; }
.ags-pin.is-g { color: #fff; background: var(--grad); box-shadow: none; }
.agh.is-in .ags-pin { opacity: 1; }

/* Les preuves */
.agp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.agp-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.agp { display: flex; flex-direction: column; padding: 24px; border-radius: var(--r-l); opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .6s var(--spring), border-color .3s; transition-delay: calc(var(--i) * 90ms); }
.agp-grid.is-in .agp { opacity: 1; transform: none; }
.agp.is-ok { border-color: color-mix(in srgb, var(--good) 35%, var(--stroke)); }
.agp-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.agp-ic { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: var(--accent); background: var(--accent-soft); }
.agp-ic .ic { width: 19px; height: 19px; }
.agp.is-ok .agp-ic { color: #fff; background: var(--good); }
.agp .chip .ic { width: 12px; height: 12px; margin-right: 4px; }
.agp h4 { margin-top: 20px; font-size: 21px; font-weight: 720; letter-spacing: -.03em; }
.agp-d { margin-top: 6px; min-height: 3.1em; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.agp-g { position: relative; margin-top: 18px; height: 10px; }
.agp-track { position: absolute; inset: 2px 0; border-radius: 99px; background: var(--stroke); overflow: hidden; }
.agp-track i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--grad); transition: width 1.1s var(--spring) .3s; }
.agp.is-ok .agp-track i { background: var(--good); }
.agp-grid.is-in .agp-track i { width: calc(var(--v) * 1%); }
.agp-tick { position: absolute; top: -3px; bottom: -3px; left: calc(var(--t) * 1%); width: 2px; border-radius: 2px; background: var(--text); }
.agp-v { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; font-size: 12.5px; color: var(--text-3); }
.agp-v b { font-size: 15px; color: var(--text); }
.agp-why { margin-top: auto; padding-top: 16px; font-size: 13px; line-height: 1.55; color: var(--text-3); }

/* Face au marché */
.agm { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; padding: clamp(28px, 4vw, 48px); }
.agm-k { font-size: 11.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.agm-big { margin-top: 10px; font-size: clamp(56px, 7vw, 92px); font-weight: 760; letter-spacing: -.06em; line-height: 1; }
.agm-s { margin-top: 12px; max-width: 30rem; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.agm-src { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--stroke); font-size: 12.5px; line-height: 1.55; color: var(--text-3); }
.agm-src a { color: var(--accent); }
.agm-chart { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; height: 280px; align-items: end; }
.agm-c { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; height: 100%; text-align: center; }
.agm-bar { display: block; height: calc(var(--s) / 45 * 78% + 4px); border-radius: 12px 12px 4px 4px; background: color-mix(in srgb, var(--text-3) 22%, transparent); transform-origin: bottom; transition: transform 1s var(--spring); transition-delay: calc(var(--k) * 90ms); }
.agm:not(.is-in) .agm-bar { transform: scaleY(0); }
.agm-c.is-cur .agm-bar { background: var(--grad); box-shadow: 0 18px 36px -14px color-mix(in srgb, var(--g2) 70%, transparent); }
.agm-v { margin-bottom: 8px; font-size: 14px; font-weight: 700; letter-spacing: -.02em; }
.agm-c.is-cur .agm-v { color: var(--accent); }
.agm-l { margin-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.agm-c.is-cur .agm-l { color: var(--text); }

/* Concrètement */
.agw { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.agw-c { padding: 26px; border-radius: var(--r-l); }
.agw-c ul { display: grid; gap: 12px; margin-top: 16px; }
.agw-c li { display: flex; gap: 10px; font-size: 15px; line-height: 1.5; }
.agw-c li .ic { flex: none; width: 17px; height: 17px; margin-top: 3px; color: var(--good); }
.agw-c.is-main { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent), var(--shadow); border-color: transparent; }
.agw-c.is-main li .ic { color: var(--accent); }
.agw-c.is-soft > p:last-child { margin-top: 16px; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.agw-bench { display: flex; gap: 12px; align-items: flex-start; max-width: 880px; margin: 22px auto 0; padding: 16px 20px; border-radius: var(--r-m); font-size: 14px; line-height: 1.6; color: var(--text-2); background: var(--warn-soft); }
.agw-bench .ic { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--warn); }
.agw-bench.is-ok { background: var(--good-soft); }
.agw-bench.is-ok .ic { color: var(--good); }

/* L’échelle */
.agl { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.agl-c { display: flex; flex-direction: column; padding: 22px 20px; border-radius: var(--r-l); transition: transform .4s var(--spring), border-color .3s; }
.agl-c:hover { transform: translateY(-3px); border-color: var(--stroke-2); }
.agl-k { display: flex; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.agl-k .tnum { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; letter-spacing: 0; color: var(--text-2); background: var(--card-inset); border: 1px solid var(--stroke); }
.agl-c.is-on .agl-k .tnum { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.agl-c.is-cur { border-color: transparent; box-shadow: 0 0 0 1.5px var(--accent), var(--shadow-lg); }
.agl-c.is-cur .agl-k { color: var(--accent); }
.agl-c.is-cur .agl-k .tnum { color: #fff; background: var(--grad); }
.agl-c h4 { margin-top: 16px; font-size: 20px; font-weight: 720; letter-spacing: -.03em; }
.agl-r { margin-top: 4px; font-size: 13.5px; font-weight: 600; color: var(--text-2); line-height: 1.4; }
.agl-d { margin-top: 12px; font-size: 13px; line-height: 1.55; color: var(--text-3); }
.agl-f { margin-top: auto; padding-top: 16px; display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.agl-f span { color: var(--text-3); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; font-size: 10.5px; }

/* Distinctions */
.agd { display: grid; gap: 12px; }
.agd .acc-prog { padding: 22px 24px; }
.lxv-lad { display: flex; align-items: flex-end; gap: 8px; height: 96px; }
.lxv-lad i { width: 26px; height: calc(16px + var(--k) * 15px); border-radius: 8px 8px 3px 3px; background: var(--card); border: 1px solid var(--stroke-2); transform-origin: bottom; }
.lxv-lad i:nth-child(-n+3) { background: color-mix(in srgb, var(--accent) 22%, var(--card)); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.lxv-lad i:nth-child(3) { background: var(--grad); border-color: transparent; box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--g2) 70%, transparent); }
.lxv.is-in .lxv-lad i { animation: lxv-up .7s var(--spring) both; animation-delay: calc(var(--k) * 90ms); }

@media (max-width: 1100px) {
  .agp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .agh, .agm { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ags { height: 220px; }
  .agw { grid-template-columns: minmax(0, 1fr); }
  .agp-grid.is-3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .agp-grid { grid-template-columns: minmax(0, 1fr); }
  .agl { grid-template-columns: minmax(0, 1fr); }
  .ags { gap: 6px; height: 200px; }
  .ags-l { font-size: 10.5px; }
  .ags-pin { font-size: 9.5px; padding: 3px 7px; }
  .agm-chart { gap: 6px; height: 220px; }
  .agm-l { font-size: 10.5px; }
  .agm-v { font-size: 12px; }
}

/* ==========================================================================
   v26 · Module « Votre première vraie conversation » : scènes de jeu
   ========================================================================== */
/* Machine à sous */
.slx { display: grid; gap: 16px; margin-top: 24px; }
.slx-machine { position: relative; isolation: isolate; padding: 18px 20px 20px; border-radius: var(--r-xl); background: linear-gradient(160deg, color-mix(in srgb, var(--g1) 10%, var(--card)), color-mix(in srgb, var(--g3) 12%, var(--card))); border: 1px solid var(--stroke); box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .06); }
.slx-machine::before { content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1px; background: var(--grad); opacity: .35; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; transition: opacity .4s; }
.slx-machine.is-run::before { opacity: 1; animation: slx-glow 1s linear infinite; }
@keyframes slx-glow { 50% { opacity: .55; } }
.slx-k { font-size: 11.5px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.slx-reels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.slx-reel small { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 650; color: var(--text-2); text-align: center; }
.slx-win { position: relative; height: 52px; overflow: hidden; border-radius: 14px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--stroke-2), inset 0 8px 14px -8px rgba(0, 0, 0, .45), inset 0 -8px 14px -8px rgba(0, 0, 0, .45); }
.slx-win::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(var(--bg), transparent 30%, transparent 70%, var(--bg)); opacity: .7; }
.slx-strip { display: grid; will-change: transform; }
.slx-strip span { height: 52px; display: grid; place-items: center; padding: 0 8px; font-size: 15px; font-weight: 700; letter-spacing: -.01em; text-align: center; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slx-reel.is-stop .slx-win { box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 4px var(--accent-soft); animation: slx-bump .35s var(--spring); }
@keyframes slx-bump { 40% { transform: scale(1.04); } }
.slx-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.slx-n { font-size: 13px; font-weight: 600; color: var(--text-3); }
.slx-go .ic { width: 15px; height: 15px; }
.slx-out { white-space: pre-line; }
.slx-miss { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; animation: fade-up-soft .5s var(--ease) both; }
.slx-miss span { font-size: 12.5px; font-weight: 650; color: var(--text-3); margin-right: 4px; }
.slx-miss i { padding: 4px 11px; border-radius: 999px; font-style: normal; font-size: 13px; font-weight: 650; color: var(--warn); background: var(--warn-soft); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--warn) 60%, transparent); }

/* La recette */
.rcp { display: grid; gap: 16px; margin-top: 24px; }
.rcp-brief { display: flex; gap: 14px; align-items: baseline; padding: 14px 18px; border-radius: var(--r-m); background: var(--card-inset); border: 1px solid var(--stroke); }
.rcp-brief small { flex: none; font-size: 11px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.rcp-brief p { font-size: 15px; line-height: 1.55; }
.rcp-board { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; }
.rcp-slots { display: grid; gap: 8px; }
.rcp-slot { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr) 22px; gap: 12px; align-items: center; min-height: 64px; padding: 10px 14px; border-radius: var(--r-m); border: 1.5px dashed var(--stroke-2); background: transparent; transition: border-color .3s, background .4s, transform .45s var(--spring); }
.rcp-slot.is-cur { border-color: var(--ing); background: color-mix(in srgb, var(--ing) 7%, transparent); }
.rcp-slot.is-on { border-style: solid; border-color: color-mix(in srgb, var(--ing) 55%, transparent); background: color-mix(in srgb, var(--ing) 11%, var(--card)); animation: rcp-drop .55s var(--spring); }
@keyframes rcp-drop { 0% { transform: translateY(-10px) scale(.98); } }
.rcp-sl-ic { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: var(--ing); background: color-mix(in srgb, var(--ing) 14%, transparent); }
.rcp-sl-ic .ic { width: 18px; height: 18px; }
.rcp-sl-t { display: grid; gap: 2px; min-width: 0; }
.rcp-sl-t b { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ing); }
.rcp-sl-v { font-size: 13.5px; line-height: 1.4; color: var(--text-3); }
.rcp-slot.is-on .rcp-sl-v { color: var(--text); font-weight: 550; }
.rcp-sl-ok { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--ing); transform: scale(0); transition: transform .45s var(--spring); }
.rcp-sl-ok .ic { width: 13px; height: 13px; }
.rcp-slot.is-on .rcp-sl-ok { transform: none; }
.rcp-ai { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--stroke); }
.rcp-ai-k { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 650; color: var(--text-2); }
.rcp-ai-k .rg-av { height: 28px; min-width: 28px; }
.rcp-guess { display: grid; gap: 6px; }
.rcp-guess li { position: relative; padding: 9px 14px; border-radius: 4px 14px 14px 14px; font-size: 14px; font-weight: 600; color: var(--text); background: var(--card-inset); border: 1px solid var(--stroke); transition: opacity .4s, transform .5s var(--spring), background .3s; }
.rcp-guess li::before { content: '?'; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 8px; border-radius: 50%; font-size: 11px; font-weight: 800; color: var(--warn); background: var(--warn-soft); }
.rcp-guess li.is-solved { opacity: .55; transform: translateX(6px); text-decoration: line-through; text-decoration-color: var(--ing); color: var(--text-3); }
.rcp-guess li.is-solved::before { content: '✓'; color: #fff; background: var(--ing); }
.rcp-meter { display: grid; gap: 8px; margin-top: auto; font-size: 12px; font-weight: 650; color: var(--text-3); }
.rcp-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.rcp-bar i { height: 8px; border-radius: 99px; background: var(--stroke); transition: background .5s var(--ease), box-shadow .5s; }
.rcp-bar i.is-on { background: var(--ing); box-shadow: 0 0 12px -2px var(--ing); }
.rcp-pick-k { font-size: 13px; font-weight: 600; color: var(--text-3); }
.rcp-pick-k b { color: var(--ing); font-weight: 750; }
.rcp-pick-k span { color: var(--text-2); }
.rcp-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.rcp-card { position: relative; display: flex; align-items: center; min-height: 96px; padding: 14px 16px; border-radius: var(--r-m); text-align: left; font-size: 14.5px; font-weight: 550; line-height: 1.45; color: var(--text); background: var(--card); border: 1px solid var(--stroke); box-shadow: var(--shadow); transition: transform .35s var(--spring), border-color .25s, background .25s, opacity .3s; animation: rcp-deal .5s var(--spring) both; }
.rcp-card:nth-child(2) { animation-delay: .07s; } .rcp-card:nth-child(3) { animation-delay: .14s; }
@keyframes rcp-deal { from { opacity: 0; transform: translateY(14px) rotate(-1.5deg); } }
.rcp-card:hover:not(:disabled) { transform: translateY(-4px) rotate(-.5deg); border-color: var(--ing); }
.rcp-card.is-good { border-color: var(--ing); background: color-mix(in srgb, var(--ing) 13%, var(--card)); transform: translateY(-4px); }
.rcp-card.is-bad { opacity: .45; animation: shake .45s var(--ease); text-decoration: line-through; text-decoration-color: var(--warn); }
.rcp-card:disabled:not(.is-good):not(.is-bad) { opacity: .4; }
.rcp-fb { margin-top: 10px; padding: 12px 16px; border-radius: var(--r-m); font-size: 14.5px; line-height: 1.55; animation: fade-up-soft .35s var(--ease) both; }
.rcp-fb.ok { background: var(--good-soft); } .rcp-fb.ko { background: var(--warn-soft); }
.rcp-trap { display: inline-block; margin-bottom: 6px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--warn); }
.rcp-send { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 18px; border-radius: var(--r-l); background: var(--accent-soft); animation: fade-up-soft .4s var(--ease) both; }
.rcp-send p { font-size: 15px; font-weight: 600; }
.rcp-send .btn .ic { width: 15px; height: 15px; }
.rcp-result { display: grid; gap: 12px; animation: fade-up-soft .5s var(--ease) both; }
.rcp-prompt { padding: 16px 18px; border-radius: var(--r-l); background: var(--card-inset); border: 1px solid var(--stroke); }
.rcp-prompt small, .frg-prev small { display: block; margin-bottom: 8px; font-size: 11px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.rcp-prompt p, .frg-text { font-size: 15px; line-height: 1.8; }
.rcp-prompt mark, .frg-text mark { padding: 2px 4px; border-radius: 6px; color: var(--text); background: color-mix(in srgb, var(--ing) 16%, transparent); box-shadow: inset 0 -2px 0 var(--ing); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.rcp-out, .mis-draft p { white-space: pre-line; }
.rcp-score { font-size: 14.5px; line-height: 1.6; color: var(--text-2); }

/* Défi chrono */
.chr { display: grid; gap: 14px; margin-top: 24px; }
.chr .so-top { align-items: center; }
.chr-streak { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text-3); }
.chr-streak b { color: var(--text); }
.chr-fl { width: 14px; height: 18px; border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%; background: var(--stroke-2); transition: background .3s, transform .4s var(--spring); }
.chr-streak.is-hot .chr-fl { background: linear-gradient(#FDBA74, #F97316 60%, #DC2626); transform: scale(1.2); animation: chr-flame .6s ease-in-out infinite alternate; }
@keyframes chr-flame { to { transform: scale(1.3) rotate(4deg); } }
.chr-timer { height: 6px; border-radius: 99px; background: var(--stroke); overflow: hidden; }
.chr-timer i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--warn), var(--accent) 40%, var(--g2)); }
.chr-timer.is-out { animation: shake .4s var(--ease); }
.chr-card { min-height: 150px; display: grid; place-items: center; padding: 22px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--stroke); box-shadow: var(--shadow); text-align: center; }
.chr-start { display: grid; justify-items: center; gap: 12px; }
.chr-big { font-size: 34px; font-weight: 760; letter-spacing: -.04em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.chr-start p { max-width: 30rem; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.chr-q small { font-size: 11.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.chr-q p { margin-top: 8px; font-size: 18px; font-weight: 600; line-height: 1.45; letter-spacing: -.01em; }
.chr-q.is-ok { animation: slx-bump .4s var(--spring); }
.chr-q.is-ko { animation: shake .4s var(--ease); }
.chr-end .chr-score { display: block; margin-top: 6px; font-size: 40px; font-weight: 760; letter-spacing: -.04em; }
.chr-ings { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.chr-ing { display: grid; justify-items: center; gap: 8px; padding: 16px 10px; border-radius: var(--r-l); background: color-mix(in srgb, var(--ing) 9%, var(--card)); border: 1.5px solid color-mix(in srgb, var(--ing) 35%, transparent); transition: transform .3s var(--spring), background .25s, border-color .25s, opacity .3s; }
.chr-ing > span { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 13px; color: #fff; background: var(--ing); }
.chr-ing .ic { width: 19px; height: 19px; }
.chr-ing b { font-size: 14px; font-weight: 700; }
.chr-ing:hover:not(:disabled) { transform: translateY(-4px); background: color-mix(in srgb, var(--ing) 16%, var(--card)); }
.chr-ing:active:not(:disabled) { transform: scale(.96); }
.chr-ing:disabled:not(.is-good):not(.is-bad) { opacity: .5; }
.chr-ing.is-good { border-color: var(--good); box-shadow: 0 0 0 3px var(--good-soft); }
.chr-ing.is-bad { border-color: var(--warn); opacity: .6; }

/* Mission relance */
.mis { display: grid; gap: 14px; margin-top: 24px; }
.mis-top { display: grid; grid-template-columns: minmax(0, 1fr) 130px; gap: 12px; }
.mis-spec { padding: 14px 18px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--stroke); }
.mis-spec small, .mis-cnt small, .mis-k { font-size: 11px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.mis-spec ul { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; margin-top: 10px; }
.mis-spec li { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 550; color: var(--text-2); transition: color .3s; }
.mis-spec li i { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: transparent; border: 1.5px solid var(--stroke-2); transition: all .45s var(--spring); }
.mis-spec li i .ic { width: 12px; height: 12px; }
.mis-spec li.is-on { color: var(--text); }
.mis-spec li.is-on i { color: #fff; background: var(--good); border-color: var(--good); transform: scale(1.12); }
.mis-cnt { display: grid; place-content: center; justify-items: center; gap: 2px; padding: 12px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--stroke); text-align: center; }
.mis-cnt b { font-size: 34px; font-weight: 760; letter-spacing: -.04em; line-height: 1.05; }
.mis-cnt span { font-size: 12px; color: var(--text-3); }
.mis-cnt.is-over b { color: var(--warn); }
.mis-chat { display: grid; gap: 12px; }
.mis-draft small { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.mis-draft p { font-size: 15px; line-height: 1.6; }
.mis-u { justify-content: flex-end; animation: fade-up-soft .4s var(--ease) both; }
.mis-u .rg-av { order: 2; }
.mis-u p { max-width: 70%; border-radius: 16px 4px 16px 16px; background: var(--accent-soft); }
.mis-a { animation: fade-up-soft .4s var(--ease) both; flex-wrap: wrap; }
.mis-a .rg-out { flex: 1; }
.mis-note { flex-basis: 100%; display: flex; gap: 8px; align-items: flex-start; margin: 2px 0 0 44px; padding: 10px 14px; border-radius: var(--r-m); font-size: 13.5px; line-height: 1.5; animation: fade-up-soft .4s var(--ease) both; }
.mis-note .ic { flex: none; width: 15px; height: 15px; margin-top: 2px; color: var(--good); }
.mis-note.ok { background: var(--good-soft); } .mis-note.ko { background: var(--warn-soft); }
.mis-opts { padding: 16px; border-radius: var(--r-l); background: var(--card-inset); border: 1px solid var(--stroke); }
.mis-btns { display: grid; gap: 8px; margin-top: 10px; }
.mis-opt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-m); text-align: left; font-size: 14.5px; font-weight: 550; line-height: 1.45; background: var(--card); border: 1px solid var(--stroke); transition: transform .3s var(--spring), border-color .2s; animation: rcp-deal .45s var(--spring) both; }
.mis-opt:nth-child(2) { animation-delay: .06s; } .mis-opt:nth-child(3) { animation-delay: .12s; }
.mis-opt .rg-av { flex: none; height: 28px; min-width: 28px; font-size: 10.5px; }
.mis-opt:hover:not(:disabled) { transform: translateX(4px); border-color: var(--accent); }
.mis-opt:disabled { opacity: .5; }
.mis-opt.is-tried { opacity: .4; text-decoration: line-through; text-decoration-color: var(--warn); }
.mis-end { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.mis-end > div { flex: 1 1 260px; }
.mis-end b { font-size: 16px; }
.mis-end p { margin-top: 4px; font-size: 14px; line-height: 1.55; color: var(--text-2); }
.mis-stars { display: flex; gap: 4px; font-size: 34px; line-height: 1; }
.mis-stars i { font-style: normal; color: var(--stroke-2); animation: mis-star .6s var(--spring) both; animation-delay: calc(var(--k) * .15s); }
.mis-stars i.on { color: #F5B83D; text-shadow: 0 0 18px rgba(245, 184, 61, .55); }
@keyframes mis-star { from { opacity: 0; transform: scale(.2) rotate(-40deg); } }

/* L’atelier */
.frg { display: grid; gap: 16px; margin-top: 24px; }
.frg-ideas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.frg-ideas > span { font-size: 13px; font-weight: 600; color: var(--text-3); margin-right: 4px; }
.frg-idea.is-on { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.frg-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.frg-fields { display: grid; gap: 10px; }
.frg-f { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--r-m); background: var(--card); border: 1px solid var(--stroke); border-left: 3px solid var(--ing); transition: box-shadow .25s; }
.frg-f:focus-within { box-shadow: 0 0 0 4px color-mix(in srgb, var(--ing) 18%, transparent); }
.frg-f-h { display: flex; align-items: center; gap: 8px; }
.frg-f-ic { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; color: var(--ing); background: color-mix(in srgb, var(--ing) 14%, transparent); }
.frg-f-ic .ic { width: 14px; height: 14px; }
.frg-f-h b { font-size: 12px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--ing); }
.frg-f-h small { font-size: 12.5px; color: var(--text-3); }
.frg-f textarea { width: 100%; resize: vertical; border: 0; padding: 0; background: none; font: inherit; font-size: 14.5px; line-height: 1.5; color: var(--text); outline: none; }
.frg-f textarea::placeholder { color: var(--text-3); }
.frg-out { position: sticky; top: 16px; display: grid; gap: 12px; padding: 16px; border-radius: var(--r-l); background: var(--card-inset); border: 1px solid var(--stroke); }
.frg-meter { display: grid; gap: 8px; }
.frg-state { font-size: 13px; font-weight: 650; color: var(--text-3); }
.frg-meter.is-full .frg-state { color: var(--good); }
.frg-prev { min-height: 150px; padding: 14px 16px; border-radius: var(--r-m); background: var(--card); border: 1px solid var(--stroke); }
.frg-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.frg-acts .btn .ic { width: 14px; height: 14px; }
.frg-warn { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; color: var(--text-3); }
.frg-warn .ic { flex: none; width: 15px; height: 15px; margin-top: 1px; color: var(--warn); }

@media (max-width: 760px) {
  .rcp-board, .frg-grid { grid-template-columns: minmax(0, 1fr); }
  .rcp-opts { grid-template-columns: minmax(0, 1fr); }
  .rcp-card { min-height: 0; }
  .rcp-brief { flex-direction: column; gap: 6px; }
  .chr-ings { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mis-top { grid-template-columns: minmax(0, 1fr); }
  .mis-spec ul { grid-template-columns: minmax(0, 1fr); }
  .mis-cnt { grid-auto-flow: column; align-items: baseline; gap: 10px; }
  .mis-u p { max-width: 85%; }
  .mis-note { margin-left: 0; }
  .frg-out { position: static; }
  .slx-strip span { font-size: 13px; }
}
.chr-end p { font-size: 14.5px; font-weight: 500; color: var(--text-2); }

/* Un prompt, c’est quoi ? */
.pin { display: grid; gap: 16px; margin-top: 24px; }
.pin-stage { display: grid; gap: 14px; padding: 20px; border-radius: var(--r-xl); background: linear-gradient(160deg, color-mix(in srgb, var(--g1) 8%, var(--card)), color-mix(in srgb, var(--g3) 9%, var(--card))); border: 1px solid var(--stroke); box-shadow: var(--shadow); }
.pin-box { position: relative; display: flex; align-items: flex-end; gap: 12px; min-height: 64px; padding: 16px 16px 16px 18px; border-radius: var(--r-l); background: var(--bg); border: 1.5px solid var(--stroke-2); transition: border-color .4s, box-shadow .4s; }
.pin[data-step="1"] .pin-box, .pin.is-labeled .pin-box { border-color: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft); }
.pin-lbl { position: absolute; left: 18px; top: -12px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 750; letter-spacing: .04em; color: #fff; background: var(--grad); opacity: 0; transform: translateY(6px) scale(.9); transition: opacity .4s var(--ease), transform .5s var(--spring); }
.pin.is-labeled .pin-lbl { opacity: 1; transform: none; }
.pin-text { flex: 1; font-size: 16.5px; font-weight: 550; line-height: 1.7; }
.pin-ph { color: var(--text-3); font-weight: 450; }
.pin-text mark { padding: 2px 6px; border-radius: 7px; color: var(--text); background: color-mix(in srgb, var(--ing) 18%, transparent); box-shadow: inset 0 -2px 0 var(--ing); animation: pin-pop .5s var(--spring) both; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@keyframes pin-pop { from { opacity: 0; transform: translateY(-8px) scale(.9); } }
.pin-send { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: var(--grad); }
.pin-send .ic { width: 17px; height: 17px; }
.pin-flow { position: relative; height: 0; overflow: hidden; display: grid; place-items: center; transition: height .6s var(--ease); }
.pin[data-step="2"] .pin-flow, .pin[data-step="3"] .pin-flow { height: 92px; }
.pin-core { position: relative; z-index: 1; display: grid; justify-items: center; gap: 4px; }
.pin-core i { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; color: #fff; background: var(--grad); box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--g2) 70%, transparent); }
.pin-core i .ic { width: 22px; height: 22px; }
.pin-core b { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.pin.is-flow .pin-core i { animation: pin-pulse .9s var(--ease) 3 both; animation-delay: .6s; }
@keyframes pin-pulse { 50% { transform: scale(1.12); box-shadow: 0 0 0 10px var(--accent-soft); } }
.pin-toks { position: absolute; inset: 0; }
.pin-toks i { position: absolute; left: calc(8% + var(--k) * 7%); top: 0; padding: 2px 8px; border-radius: 7px; font-style: normal; font-size: 12px; font-weight: 650; color: var(--accent); background: var(--accent-soft); opacity: 0; }
.pin.is-flow .pin-toks i { animation: pin-tok 1.3s var(--ease) both; animation-delay: calc(var(--k) * 90ms); }
@keyframes pin-tok { 0% { opacity: 0; transform: translate(0, -10px); } 25% { opacity: 1; } 100% { opacity: 0; left: 47%; transform: translate(0, 34px) scale(.5); } }
.pin-ans .rg-out { min-height: 52px; white-space: pre-line; }
.pin-meter { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; font-size: 12px; font-weight: 650; color: var(--text-3); }
.pin-c small { font-size: 11.5px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.pin-c .pin-c-t { display: block; margin-top: 6px; font-size: 19px; font-weight: 720; letter-spacing: -.02em; }
.pin-c > p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.pin-def { display: grid; gap: 4px; margin-top: 12px; padding: 12px 16px; border-radius: var(--r-m); border-left: 3px solid; border-image: var(--grad) 1; background: var(--card-inset); font-size: 14.5px; line-height: 1.55; }
.pin-def span { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.pin-card { min-height: 120px; padding: 18px 20px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--stroke); }

/* ==========================================================================
   v27 · Module « Ce qu’on peut confier » : feux tricolores et surligneur
   ========================================================================== */
.so-lights .so-bin { --lamp: var(--accent); }
.so-lights .so-bin-ic { width: 54px; height: 54px; border-radius: 50%; background: #0B0F1A; box-shadow: inset 0 0 0 3px #1E2433, 0 6px 16px -6px rgba(0, 0, 0, .5); }
.so-lamp { width: 34px; height: 34px; border-radius: 50%; background: color-mix(in srgb, var(--lamp) 28%, #111827); box-shadow: inset 0 -4px 8px rgba(0, 0, 0, .35); transition: background .3s, box-shadow .35s; }
.so-lights .so-bin:hover:not(:disabled) .so-lamp, .so-lights .so-bin.is-good .so-lamp, .so-lights .so-bin.is-bump .so-lamp { background: radial-gradient(circle at 40% 35%, #fff 0 8%, var(--lamp) 45%); box-shadow: 0 0 22px 4px color-mix(in srgb, var(--lamp) 70%, transparent), inset 0 -3px 6px rgba(0, 0, 0, .2); }
.so-lights .so-bin.is-bad .so-lamp { background: color-mix(in srgb, var(--lamp) 45%, #111827); }
.so-lights .so-bin b { color: var(--lamp); }

.rdx { display: grid; gap: 14px; margin-top: 24px; }
.rdx-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
.rdx-task { display: grid; gap: 4px; padding: 12px 16px; border-radius: var(--r-m); background: var(--accent-soft); font-size: 15px; font-weight: 600; }
.rdx-task small, .rdx-cnt small { font-size: 11px; font-weight: 650; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.rdx-cnt { display: grid; justify-items: center; align-content: center; gap: 2px; min-width: 130px; padding: 10px 14px; border-radius: var(--r-m); background: var(--card); border: 1px solid var(--stroke); font-size: 15px; color: var(--text-3); text-align: center; }
.rdx-cnt b { font-size: 28px; font-weight: 760; letter-spacing: -.04em; line-height: 1; color: var(--text); }
.rdx-cnt.is-full b { color: var(--good); }
.rdx-doc { position: relative; padding: 22px 26px; border-radius: var(--r-l); background: #FBFBF7; color: #1F2937; box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(0, 0, 0, .06); font-family: Georgia, 'Times New Roman', serif; font-size: 16.5px; line-height: 2; }
.rdx-subj { padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid rgba(0, 0, 0, .1); font-family: var(--font); font-size: 13.5px; font-weight: 700; color: #4B5563; }
.rdx-w { position: relative; padding: 0; border-radius: 4px; cursor: pointer; background: linear-gradient(transparent 58%, rgba(250, 204, 21, .0) 58%); transition: background .25s; }
.rdx-w:hover, .rdx-w:focus-visible { background: linear-gradient(transparent 55%, rgba(250, 204, 21, .45) 55%); outline: none; }
.rdx-w.is-no { animation: shake .4s var(--ease); background: linear-gradient(transparent 55%, rgba(148, 163, 184, .4) 55%); }
.rdx-w.is-on { cursor: default; }
.rdx-w.is-on .rdx-t { color: transparent; background: #111827; border-radius: 3px; box-shadow: 0 0 0 1px #111827; animation: rdx-ink .45s var(--ease) both; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
@keyframes rdx-ink { from { background-size: 0 100%; } to { background-size: 100% 100%; } }
.rdx-w.is-on .rdx-t { background: linear-gradient(#111827, #111827) left / 100% 100% no-repeat; }
.rdx-rep { display: none; }
.rdx-doc.is-clean .rdx-w.is-on .rdx-t { display: none; }
.rdx-doc.is-clean .rdx-w.is-on .rdx-rep { display: inline; padding: 1px 7px; border-radius: 6px; font-family: var(--font); font-size: .85em; font-weight: 700; color: #1D4ED8; background: #DBEAFE; animation: pin-pop .5s var(--spring) both; }
.rdx-doc.is-clean .rdx-w { cursor: default; background: none; }
.rdx-fb { min-height: 52px; padding: 12px 16px; border-radius: var(--r-m); font-size: 14.5px; line-height: 1.55; background: var(--card-inset); }
.rdx-fb.ok { background: var(--good-soft); animation: fade-up-soft .3s var(--ease) both; }
.rdx-fb.ko { background: var(--warn-soft); animation: fade-up-soft .3s var(--ease) both; }
.rdx .sc-actions .btn .ic { width: 15px; height: 15px; }
@media (max-width: 640px) {
  .rdx-top { grid-template-columns: minmax(0, 1fr); }
  .rdx-cnt { grid-auto-flow: column; justify-content: start; gap: 8px; align-items: baseline; }
  .rdx-doc { padding: 18px; font-size: 15.5px; }
  .so-lights .so-bin-ic { width: 46px; height: 46px; } .so-lamp { width: 28px; height: 28px; }
}
.rdx-doc.is-clean .rdx-w { padding: 0; } .rdx-doc.is-clean .rdx-w.is-on .rdx-rep { margin: 0 1px; }

/* ===================================================================== v28 · Module 7 : scanner (rdx-hl) et enquête (probe) */
.rdx-hl .rdx-w.is-on .rdx-t { color: inherit; background: linear-gradient(transparent 50%, rgba(250, 204, 21, .6) 50%) left / 100% 100% no-repeat; box-shadow: none; border-radius: 2px; animation: rdx-hl .5s var(--ease) both; }
@keyframes rdx-hl { from { background-size: 0 100%; } to { background-size: 100% 100%; } }
.rdx-hl.is-clean .rdx-w.is-on .rdx-t { display: inline; }
.rdx-hl.is-clean .rdx-w.is-on:has(.is-ko) .rdx-t { background: linear-gradient(transparent 50%, rgba(248, 113, 113, .35) 50%); text-decoration: line-through; text-decoration-color: rgba(220, 38, 38, .7); text-decoration-thickness: 1.5px; }
.rdx-hl.is-clean .rdx-w.is-on:has(.is-ok) .rdx-t { background: linear-gradient(transparent 50%, rgba(52, 211, 153, .35) 50%); }
.rdx-hl.is-clean .rdx-w.is-on .rdx-rep { margin-left: 6px; white-space: nowrap; font-size: .72em; vertical-align: .12em; }
.rdx-doc.is-clean .rdx-w.is-on .rdx-rep.is-ok { color: #047857; background: #D1FAE5; }
.rdx-doc.is-clean .rdx-w.is-on .rdx-rep.is-ko { color: #B91C1C; background: #FEE2E2; }
.rdx-hl .rdx-w:hover .rdx-t, .rdx-hl .rdx-w:focus-visible .rdx-t { text-decoration: none; }

.prb { margin-top: 24px; display: grid; gap: 14px; }
.prb-case { display: grid; gap: 14px; }
.prb-claim { position: relative; display: grid; gap: 8px; padding: 20px 22px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--stroke); border-left: 4px solid var(--accent); box-shadow: var(--shadow); transition: border-color .4s var(--ease), background .4s var(--ease); }
.prb-claim small, .prb-k { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.prb-k span { text-transform: none; letter-spacing: 0; font-weight: 550; }
.prb-claim blockquote { margin: 0; font-family: Georgia, 'Times New Roman', serif; font-size: 18px; line-height: 1.55; color: var(--text); }
.prb-ctx { font-size: 13.5px; color: var(--text-2); }
.prb-stamp { position: absolute; top: 14px; right: 16px; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 750; letter-spacing: .02em; color: var(--accent); background: var(--accent-soft); }
.prb-claim.is-true { border-left-color: var(--good); }
.prb-claim.is-true .prb-stamp { color: var(--good); background: var(--good-soft); animation: pin-pop .5s var(--spring) both; }
.prb-claim.is-false { border-left-color: var(--bad, #DC2626); }
.prb-claim.is-false .prb-stamp { color: var(--bad, #DC2626); background: var(--bad-soft, rgba(220, 38, 38, .12)); animation: pin-pop .5s var(--spring) both; transform: rotate(-2deg); }
.prb-claim blockquote { padding-right: 90px; }
.prb-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 14px; align-items: start; }
.prb-acts, .prb-log { display: grid; gap: 8px; padding: 16px; border-radius: var(--r-l); background: var(--card-inset); border: 1px solid var(--stroke); }
.prb-act { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: var(--r-m); text-align: left; font-size: 14px; font-weight: 580; line-height: 1.4; color: var(--text); background: var(--card); border: 1px solid var(--stroke); transition: transform .25s var(--spring), border-color .2s, opacity .2s; animation: rcp-deal .45s var(--spring) both; }
.prb-act:nth-child(3) { animation-delay: .05s; } .prb-act:nth-child(4) { animation-delay: .1s; } .prb-act:nth-child(5) { animation-delay: .15s; }
.prb-act:not(:disabled):hover { transform: translateX(3px); border-color: var(--accent); }
.prb-ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); }
.prb-ic .ic { width: 17px; height: 17px; }
.prb-act:disabled { cursor: default; opacity: .55; }
.prb-act.is-used { opacity: 1; }
.prb-act.is-proof { border-color: var(--good); } .prb-act.is-proof .prb-ic { background: var(--good-soft); color: var(--good); }
.prb-act.is-hint { border-color: var(--warn); } .prb-act.is-hint .prb-ic { background: var(--warn-soft); color: var(--warn); }
.prb-act.is-none { border-style: dashed; } .prb-act.is-none .prb-ic { background: var(--card-inset); color: var(--text-3); }
.prb-log ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.prb-log li { display: grid; gap: 6px; padding: 11px 13px; border-radius: var(--r-m); background: var(--card); border-left: 3px solid var(--stroke-2); font-size: 13.5px; line-height: 1.5; animation: fade-up-soft .35s var(--ease) both; }
.prb-log li p b { display: block; font-size: 12.5px; color: var(--text-3); font-weight: 650; margin-bottom: 2px; }
.prb-log li p b ~ b, .prb-note b { display: inline; font-size: inherit; color: inherit; margin: 0; }
.prb-log li.is-proof { border-left-color: var(--good); } .prb-log li.is-hint { border-left-color: var(--warn); } .prb-log li.is-none { border-left-color: var(--text-3); }
.prb-tag { justify-self: start; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
li.is-proof .prb-tag { color: var(--good); background: var(--good-soft); }
li.is-hint .prb-tag { color: var(--warn); background: var(--warn-soft); }
li.is-none .prb-tag { color: var(--text-2); background: var(--card-inset); }
.prb-note { font-size: 12.5px; color: var(--text-2); font-style: italic; }
.prb-empty { font-size: 13.5px; }
.prb-verdict { display: grid; gap: 8px; }
.prb-vbtns { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.prb-v { min-height: 50px; padding: 10px 14px; border-radius: 14px; font-size: 14.5px; font-weight: 700; line-height: 1.3; color: var(--text); background: var(--card); border: 1.5px solid var(--stroke-2); transition: transform .25s var(--ease), border-color .25s, background .25s, opacity .25s; }
.prb-v:disabled { opacity: .5; cursor: default; }
.prb-v:not(:disabled):hover { transform: translateY(-2px); border-color: var(--accent); background: var(--accent-soft); }
.prb-v.is-good { opacity: 1; border-color: var(--good); background: var(--good-soft); color: var(--good); }
.prb-v.is-bad { opacity: 1; border-color: var(--bad, #DC2626); background: var(--bad-soft, rgba(220, 38, 38, .12)); color: var(--bad, #DC2626); animation: shake .45s var(--ease); }
.prb .so-fb { margin-top: 0; }
.prb-warn { display: block; margin-top: 6px; font-size: 13px; color: var(--text-2); }
.prb-end { display: grid; justify-items: center; gap: 14px; padding: 28px 22px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--stroke); box-shadow: var(--shadow); text-align: center; }
.prb-end > small { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.prb-end-k { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: min(100%, 460px); }
.prb-end-k div { display: grid; gap: 4px; padding: 14px; border-radius: var(--r-m); background: var(--card-inset); }
.prb-end-k b { font-size: 30px; font-weight: 760; letter-spacing: -.04em; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.prb-end-k span { font-size: 13px; color: var(--text-2); }
.prb-end p { max-width: 520px; font-size: 15px; line-height: 1.55; color: var(--text-2); }
@media (max-width: 760px) {
  .prb-grid { grid-template-columns: minmax(0, 1fr); }
  .prb-claim { padding: 16px; }
  .prb-claim blockquote { font-size: 16.5px; padding-right: 0; }
  .prb-stamp { position: static; justify-self: start; order: -1; }
}

/* ===================================================================== v29 · Module 8 et examen final */
/* L’offre corrigée (redact style fix) */
.rdx-fix.is-clean .rdx-w.is-on .rdx-t { background: linear-gradient(transparent 50%, rgba(248, 113, 113, .3) 50%); text-decoration: line-through; text-decoration-color: rgba(220, 38, 38, .7); text-decoration-thickness: 1.5px; }
.rdx-fix.is-clean .rdx-w.is-on .rdx-rep { color: #047857; background: #D1FAE5; }

/* Le révélateur */
.bs { margin-top: 24px; display: grid; gap: 14px; }
.bs-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.bs-tab { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; font-size: 13.5px; font-weight: 650; color: var(--text-3); background: var(--card); border: 1px solid var(--stroke); }
.bs-tab .tnum { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; background: var(--card-inset); }
.bs-tab.is-cur { color: var(--text); border-color: var(--accent); } .bs-tab.is-cur .tnum { color: #fff; background: var(--accent); }
.bs-tab.is-done { color: var(--good); } .bs-tab.is-done .tnum { color: #fff; background: var(--good); }
.bs-run { display: grid; gap: 14px; }
.bs-prompt { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--r-l); background: var(--accent-soft); }
.bs-q { font-size: 15.5px; font-weight: 600; line-height: 1.5; }
.bs-fix { color: var(--good); background: var(--good-soft); border-radius: 6px; padding: 0 4px; animation: pin-pop .5s var(--spring) both; }
.bs-stage { min-height: 120px; display: grid; align-items: center; padding: 16px; border-radius: var(--r-l); background: var(--card-inset); border: 1px solid var(--stroke); }
.bs-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.bs-p { margin: 0; display: grid; gap: 6px; justify-items: center; animation: rcp-deal .5s var(--spring) both; animation-delay: calc(var(--i) * 90ms); }
.bs-p svg { width: 100%; max-width: 96px; aspect-ratio: 1; border-radius: 16px; box-shadow: var(--shadow); }
.bs-p figcaption { font-size: 11.5px; font-weight: 600; color: var(--text-3); text-align: center; line-height: 1.3; }
.bs-stats { display: grid; gap: 8px; padding: 14px 16px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--stroke); animation: fade-up-soft .4s var(--ease) both; }
.bs-bar { display: grid; grid-template-columns: 150px minmax(0, 1fr) 54px; align-items: center; gap: 12px; font-size: 13.5px; font-weight: 600; }
.bs-bar i { height: 10px; border-radius: 99px; background: var(--card-inset); overflow: hidden; }
.bs-bar i b { display: block; height: 100%; width: var(--w); border-radius: 99px; background: var(--grad); animation: bs-grow .9s var(--ease) both; }
@keyframes bs-grow { from { width: 0; } }
.bs-bar em { font-style: normal; text-align: right; color: var(--text-2); }
.bs-ask { display: grid; gap: 8px; animation: fade-up-soft .4s var(--ease) both; }
.bs-opts { display: grid; gap: 8px; }
.bs-o { text-align: left; }
.sc-bias .so-fb { margin-top: 0; }
@media (max-width: 760px) {
  .bs-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bs-bar { grid-template-columns: 96px minmax(0, 1fr) 44px; font-size: 12.5px; }
}

/* Qui en répond ? */
.chn { margin-top: 24px; display: grid; gap: 14px; }
.chn-story { position: relative; display: grid; gap: 8px; padding: 20px 22px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--stroke); box-shadow: var(--shadow); }
.chn-story > b { font-size: 18px; letter-spacing: -.01em; }
.chn-story p { font-size: 15px; line-height: 1.6; color: var(--text-2); }
.chn-real { justify-self: start; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 750; color: var(--warn); background: var(--warn-soft); }
.chn-line { display: flex; align-items: stretch; }
.chn-link { flex: 1 1 24px; min-width: 14px; display: grid; align-items: center; }
.chn-link i { display: block; height: 3px; border-radius: 3px; background: var(--stroke-2); position: relative; overflow: hidden; }
.chn-link i::after { content: ''; position: absolute; inset: 0; transform: scaleX(0); transform-origin: left; background: var(--grad); transition: transform .4s var(--ease); }
.chn-link.is-on i::after { transform: scaleX(1); }
.chn-a { flex: 0 1 190px; display: grid; justify-items: center; gap: 6px; padding: 14px 10px; border-radius: var(--r-l); text-align: center; color: var(--text); background: var(--card); border: 1.5px solid var(--stroke-2); transition: transform .3s var(--spring), border-color .2s, background .2s, opacity .2s; }
.chn-a:not(:disabled):hover { transform: translateY(-3px); border-color: var(--accent); background: var(--accent-soft); }
.chn-a:disabled { cursor: default; opacity: .55; }
.chn-ic { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); }
.chn-ic .ic { width: 21px; height: 21px; }
.chn-a b { font-size: 14.5px; } .chn-a small { font-size: 12px; color: var(--text-3); line-height: 1.3; }
.chn-a.is-good { opacity: 1; border-color: var(--good); background: var(--good-soft); animation: pin-pop .5s var(--spring) both; }
.chn-a.is-good .chn-ic { background: var(--good); color: #fff; }
.chn-a.is-also { opacity: 1; border-style: dashed; border-color: var(--good); }
.chn-a.is-bad { opacity: 1; border-color: var(--bad); background: var(--bad-soft); animation: shake .45s var(--ease); }
.chn .so-fb { margin-top: 0; }
.chn-end-k { grid-template-columns: 1fr; width: min(100%, 230px); }
@media (max-width: 760px) {
  .chn-line { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .chn-link { display: none; }
  .chn-a { padding: 12px 8px; }
}

/* Le guichet */
.stp { margin-top: 24px; display: grid; gap: 14px; }
.stp-desk { position: relative; padding: 26px 22px 30px; border-radius: var(--r-xl); background: repeating-linear-gradient(135deg, rgba(120, 85, 50, .06) 0 14px, rgba(120, 85, 50, .02) 14px 28px), var(--card-inset); border: 1px solid var(--stroke); overflow: hidden; }
.stp-pile { position: absolute; top: 16px; right: 18px; display: grid; justify-items: center; width: 70px; padding: 8px 0 6px; border-radius: 10px; background: #FBFBF7; color: #374151; box-shadow: 3px 3px 0 #E5E7EB, 6px 6px 0 #D1D5DB, var(--shadow); z-index: 2; }
.stp-pile span { font-size: 20px; font-weight: 760; line-height: 1; }
.stp-pile small { font-size: 10.5px; font-weight: 650; color: #6B7280; }
.stp-pile.is-bump { animation: pin-pop .5s var(--spring); }
.stp-paper { position: relative; max-width: 560px; margin: 0 auto; display: grid; gap: 10px; padding: 22px 24px 74px; border-radius: 6px; background: #FBFBF7; color: #1F2937; box-shadow: 0 1px 0 rgba(0, 0, 0, .05), var(--shadow-lg); transform: rotate(-.6deg); }
.stp-paper.in-paper { animation: stp-in .55s var(--spring) both; }
.stp-paper.out-paper { animation: stp-out .4s var(--ease) both; }
@keyframes stp-in { from { opacity: 0; transform: translateY(40px) rotate(4deg); } }
@keyframes stp-out { to { opacity: 0; transform: translate(260px, -60px) rotate(12deg) scale(.6); } }
.stp-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 1px dashed #D1D5DB; }
.stp-kind { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: #4B5563; }
.stp-kind .ic { width: 15px; height: 15px; }
.stp-ref { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: #9CA3AF; }
.stp-t { font-family: Georgia, 'Times New Roman', serif; font-size: 19px; line-height: 1.35; }
.stp-paper p { font-size: 14.5px; line-height: 1.55; color: #374151; }
.stp-use { display: grid; gap: 2px; padding: 8px 12px; border-radius: 6px; background: #F3F4F6; }
.stp-use span { font-size: 10.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: #6B7280; }
.stp-mark { position: absolute; right: 22px; bottom: 18px; padding: 6px 14px; border: 3px solid currentColor; border-radius: 8px; font-size: 20px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; transform: rotate(var(--r)); mix-blend-mode: multiply; opacity: .85; animation: stp-thunk .45s cubic-bezier(.2, 1.6, .4, 1) both; pointer-events: none; }
@keyframes stp-thunk { from { opacity: 0; transform: rotate(var(--r)) scale(2.2); } }
.stp-mark.stp-good { color: #059669; } .stp-mark.stp-warn { color: #D97706; } .stp-mark.stp-bad { color: #DC2626; }
.stp-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.stp-b { display: grid; justify-items: center; gap: 2px; padding: 14px 10px; border-radius: var(--r-l); background: var(--card); border: 1.5px solid var(--stroke-2); transition: transform .25s var(--spring), border-color .2s, background .2s, opacity .2s; }
.stp-ink { font-size: 16px; font-weight: 820; letter-spacing: .06em; text-transform: uppercase; }
.stp-b small { font-size: 12px; color: var(--text-3); }
.stp-b.stp-good .stp-ink { color: var(--good); } .stp-b.stp-warn .stp-ink { color: var(--warn); } .stp-b.stp-bad .stp-ink { color: var(--bad); }
.stp-b:not(:disabled):hover { transform: translateY(-3px) rotate(-1deg); border-color: currentColor; }
.stp-b.stp-good:not(:disabled):hover { background: var(--good-soft); border-color: var(--good); }
.stp-b.stp-warn:not(:disabled):hover { background: var(--warn-soft); border-color: var(--warn); }
.stp-b.stp-bad:not(:disabled):hover { background: var(--bad-soft); border-color: var(--bad); }
.stp-b:disabled { cursor: default; opacity: .45; }
.stp-b.is-good { opacity: 1; border-color: var(--good); background: var(--good-soft); }
.stp-b.is-bad { opacity: 1; border-color: var(--bad); animation: shake .45s var(--ease); }
.stp .so-fb { margin-top: 0; }
.stp-sum { justify-items: center; text-align: center; }
.stp-score { font-size: 40px; font-weight: 800; letter-spacing: -.04em; font-family: var(--font); }
@media (max-width: 760px) {
  .stp-desk { padding: 54px 12px 20px; }
  .stp-paper { padding: 18px 16px 58px; }
  .stp-mark { font-size: 16px; right: 14px; bottom: 12px; }
  .stp-ink { font-size: 13.5px; }
}

/* La pyramide */
.pyr { margin-top: 24px; display: grid; gap: 14px; }
.pyr-item { display: grid; gap: 6px; padding: 16px 20px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--stroke); box-shadow: var(--shadow); text-align: center; }
.pyr-item small { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.pyr-item b { font-size: 17px; line-height: 1.4; }
.pyr-item p { font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.pyr-stack { display: grid; gap: 6px; justify-items: center; }
.pyr-t { --c: var(--accent); --cs: var(--accent-soft); width: calc(46% + var(--k) * 18%); max-width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; min-height: 64px; padding: 10px 18px; border-radius: 14px; text-align: left; color: var(--text); background: linear-gradient(90deg, var(--cs), transparent 140%), var(--card); border: 1.5px solid color-mix(in srgb, var(--c) 45%, transparent); transition: transform .25s var(--spring), box-shadow .2s, opacity .2s; }
.pyr-t.pyr-bad { --c: var(--bad); --cs: var(--bad-soft); } .pyr-t.pyr-warn { --c: var(--warn); --cs: var(--warn-soft); } .pyr-t.pyr-good { --c: var(--good); --cs: var(--good-soft); }
.pyr-t:not(:disabled):hover { transform: scale(1.02); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent); }
.pyr-t:disabled { cursor: default; }
.pyr-l { display: grid; gap: 1px; }
.pyr-l b { font-size: 15px; color: var(--c); } .pyr-l small { font-size: 12px; color: var(--text-3); }
.pyr-in { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.pyr-chip { padding: 3px 9px; border-radius: 999px; font-size: 12px; font-style: normal; font-weight: 650; color: var(--text); background: var(--card); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent); animation: pin-pop .5s var(--spring) both; }
.pyr-t.is-good { box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 45%, transparent); }
.pyr-t.is-bad { animation: shake .45s var(--ease); opacity: .7; }
.pyr .so-fb { margin-top: 0; }
.pyr-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; animation: fade-up-soft .4s var(--ease) both; }
.pyr-lg { --c: var(--accent); padding: 14px 16px; border-radius: var(--r-m); background: var(--card); border: 1px solid var(--stroke); border-left: 4px solid var(--c); }
.pyr-lg.pyr-bad { --c: var(--bad); } .pyr-lg.pyr-warn { --c: var(--warn); } .pyr-lg.pyr-good { --c: var(--good); }
.pyr-lg b { color: var(--c); font-size: 14.5px; } .pyr-lg p { margin-top: 4px; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
@media (max-width: 760px) {
  .pyr-t { width: calc(70% + var(--k) * 10%); grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 10px 14px; }
  .pyr-in { justify-content: flex-start; }
  .pyr-legend { grid-template-columns: minmax(0, 1fr); }
}

/* Ma charte */
.plg { margin-top: 24px; display: grid; gap: 14px; }
.plg-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.plg-i { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--r-m); text-align: left; font-size: 14.5px; line-height: 1.5; color: var(--text); background: var(--card); border: 1.5px solid var(--stroke); transition: border-color .2s, background .2s, transform .25s var(--spring); }
.plg-i:not(:disabled):hover { transform: translateY(-2px); border-color: var(--accent); }
.plg-box { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 7px; border: 1.5px solid var(--stroke-2); color: transparent; transition: background .2s, color .2s, border-color .2s; }
.plg-box .ic { width: 14px; height: 14px; }
.plg-i.is-on { border-color: var(--accent); background: var(--accent-soft); }
.plg-i.is-on .plg-box { background: var(--accent); border-color: var(--accent); color: #fff; animation: pin-pop .4s var(--spring); }
.plg-i:disabled { cursor: default; }
.plg-i:disabled:not(.is-on) { opacity: .45; }
.plg-n { font-size: 13.5px; color: var(--text-3); }
.plg-doc { position: relative; max-width: 620px; margin: 0 auto; padding: 30px 32px 26px; border-radius: 8px; background: #FBFBF7; color: #1F2937; box-shadow: var(--shadow-lg); }
.plg-doc::before { content: ''; position: absolute; inset: 10px; border: 1px solid rgba(0, 0, 0, .1); border-radius: 4px; pointer-events: none; }
.plg-k { text-align: center; font-family: Georgia, 'Times New Roman', serif; font-size: 21px; font-weight: 700; color: #111827; }
.plg-doc ol { margin: 18px 0 0; padding-left: 22px; display: grid; gap: 9px; }
.plg-doc li { font-size: 14.5px; line-height: 1.55; animation: fade-up-soft .4s var(--ease) both; animation-delay: calc(var(--i) * 110ms); }
.plg-sig { display: grid; justify-items: end; margin-top: 16px; }
.plg-sig svg { width: 200px; height: 56px; }
.plg-pen { fill: none; stroke: #1E3A8A; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: plg-sign 1.6s .6s var(--ease) forwards; }
@keyframes plg-sign { to { stroke-dashoffset: 0; } }
.plg-sig small { font-size: 12.5px; color: #6B7280; }
.plg-note { margin-top: 14px; padding-top: 12px; border-top: 1px dashed #D1D5DB; font-size: 13.5px; line-height: 1.55; color: #4B5563; }
@media (max-width: 760px) { .plg-list { grid-template-columns: minmax(0, 1fr); } .plg-doc { padding: 24px 20px 20px; } }
@media (prefers-reduced-motion: reduce) { .plg-pen { animation: none; stroke-dashoffset: 0; } }

/* Examen final */
.exm-bar i.ok { background: var(--good); } .exm-bar i.ko { background: var(--bad); }
.exm-intro, .exm-res { text-align: center; }
.exm-intro .sub, .exm-res .sub { margin-left: auto; margin-right: auto; }
.exm-hero { display: grid; justify-items: center; margin-bottom: 8px; }
.exm-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 26px 0 0; text-align: left; }
.exm-rules > div { padding: 14px 16px; border-radius: var(--r-m); background: var(--card); border: 1px solid var(--stroke); }
.exm-rules b { font-size: 14.5px; } .exm-rules p { margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.exm-formula { display: grid; gap: 12px; margin-top: 14px; padding: 20px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--stroke); box-shadow: var(--shadow); }
.exm-eq { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.exm-eq > i { font-style: normal; font-size: 24px; font-weight: 300; color: var(--text-3); }
.exm-term { display: grid; gap: 2px; min-width: 140px; padding: 12px 14px; border-radius: var(--r-m); background: var(--card-inset); }
.exm-term small { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.exm-term b { font-size: 28px; font-weight: 780; letter-spacing: -.04em; }
.exm-term em { font-style: normal; font-size: 12.5px; color: var(--text-2); }
.exm-term.is-final { background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
.exm-term.is-final b { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.exm-tiers { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
.exm-tier { padding: 4px 12px; border-radius: 999px; font-size: 12.5px; background: var(--card-inset); color: var(--text-2); }
.exm-tier.qz-bronze b { color: #B7793F; } .exm-tier.qz-argent b { color: #8A94A6; } .exm-tier.qz-or b { color: #D4A017; }
.exm-proj { font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.exm-lock { display: flex; gap: 14px; align-items: flex-start; margin-top: 14px; padding: 16px 18px; border-radius: var(--r-l); text-align: left; background: var(--warn-soft); }
.exm-lock b { font-size: 15px; } .exm-lock p { margin-top: 4px; font-size: 13.5px; line-height: 1.6; color: var(--text-2); }
.exm-lock a { color: var(--accent); font-weight: 600; }
.exm-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.exm-count { font-size: 13px; color: var(--text-3); }
.exm-q .opt.is-picked { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
.exm-q .opt.is-picked .opt-key { color: #fff; background: var(--accent); }
.exm-nav { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 22px; }
.exm-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.exm-dot { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; font-size: 11.5px; font-weight: 700; color: var(--text-3); background: var(--card); border: 1px solid var(--stroke); transition: transform .2s var(--spring); }
.exm-dot:hover { transform: translateY(-2px); }
.exm-dot.is-done { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.exm-dot.is-cur { color: #fff; background: var(--accent); border-color: var(--accent); }
.exm-submit { flex-direction: column; align-items: center; gap: 8px; margin-top: 22px; }
.exm-submit small { font-size: 13px; color: var(--text-3); }
.exm-calc { display: grid; gap: 12px; max-width: 620px; margin: 22px auto 0; padding: 20px; border-radius: var(--r-l); text-align: left; background: var(--card); border: 1px solid var(--stroke); box-shadow: var(--shadow); }
.exm-bars { display: grid; gap: 10px; }
.exm-b { display: grid; grid-template-columns: 170px minmax(0, 1fr) 56px; align-items: center; gap: 12px; font-size: 14px; font-weight: 650; }
.exm-b small { display: block; font-size: 11.5px; font-weight: 550; color: var(--text-3); }
.exm-b i { height: 12px; border-radius: 99px; background: var(--card-inset); overflow: hidden; }
.exm-b i b { display: block; height: 100%; width: var(--w); border-radius: 99px; background: var(--grad); animation: bs-grow 1.1s var(--ease) both; }
.exm-b em { font-style: normal; text-align: right; }
.exm-final { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 14px 16px; border-radius: var(--r-m); background: var(--accent-soft); animation: fade-up-soft .5s .8s var(--ease) both; }
.exm-final small { grid-column: 2; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.exm-final b { grid-row: 1 / 3; font-size: 38px; font-weight: 800; letter-spacing: -.04em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.exm-final span { grid-column: 2; font-size: 15px; font-weight: 700; }
.exm-final.is-none b { color: var(--text-3); background: none; -webkit-text-fill-color: currentColor; }
.exm-final.is-or span { color: #D4A017; } .exm-final.is-argent span { color: #8A94A6; } .exm-final.is-bronze span { color: #B7793F; }
.exm-per { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 620px; margin: 14px auto 0; text-align: left; }
.exm-per .mod-k { grid-column: 1 / -1; }
.exm-pm { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-m); background: var(--card); border: 1px solid var(--stroke); color: var(--text); text-decoration: none; transition: border-color .2s; }
.exm-pm:hover { border-color: var(--accent); }
.exm-pm > span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; font-size: 12px; font-weight: 700; background: var(--card-inset); }
.exm-pm b { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.exm-pm em { font-style: normal; font-size: 13.5px; font-weight: 700; color: var(--warn); }
.exm-pm.is-full em { color: var(--good); } .exm-pm.is-zero em { color: var(--bad); }
.exm-corr { max-width: 720px; margin: 18px auto 0; text-align: left; }
.exm-corr summary { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px; cursor: pointer; font-size: 14.5px; font-weight: 650; color: var(--accent); list-style: none; }
.exm-corr summary::-webkit-details-marker { display: none; }
.exm-corr summary .ic { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.exm-corr[open] summary .ic { transform: rotate(180deg); }
.exm-corr ol { display: grid; gap: 10px; margin: 8px 0 0; padding: 0; list-style: none; }
.exm-corr li { display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--r-m); background: var(--card); border: 1px solid var(--stroke); border-left: 4px solid var(--good); }
.exm-corr li.is-ko { border-left-color: var(--bad); }
.exm-corr small { font-size: 11.5px; font-weight: 650; color: var(--text-3); }
.exm-corr b { font-size: 14.5px; line-height: 1.45; }
.exm-yours { font-size: 13.5px; color: var(--bad); text-decoration: line-through; text-decoration-color: rgba(220, 38, 38, .4); }
.exm-right { display: flex; gap: 6px; align-items: flex-start; font-size: 13.5px; font-weight: 600; color: var(--good); }
.exm-right .ic { flex: none; width: 15px; height: 15px; margin-top: 2px; }
.exm-ex { font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.exm-ex b { font-size: inherit; }
@media (max-width: 760px) {
  .exm-rules { grid-template-columns: minmax(0, 1fr); }
  .exm-term { min-width: 0; flex: 1 1 40%; }
  .exm-eq > i { display: none; }
  .exm-nav { grid-template-columns: 1fr 1fr; }
  .exm-dots { grid-column: 1 / -1; grid-row: 1; }
  .exm-b { grid-template-columns: 110px minmax(0, 1fr) 48px; font-size: 13px; }
  .exm-per { grid-template-columns: minmax(0, 1fr); }
}
/* La station de l’examen dans la liste des modules */
.lxm-exam .lxm-card { background: linear-gradient(135deg, var(--accent-soft), transparent 60%), var(--card); }
.lxm-exam.is-open .lxm-n { color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); animation: exm-pulse 2.4s var(--ease) infinite; }
@keyframes exm-pulse { 50% { box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 6px var(--accent-soft); } }
.lxm-exam.is-locked .lxm-card { opacity: .8; }
.exm-locked { display: inline-flex; align-items: center; gap: 6px; }
.exm-locked .ic { width: 14px; height: 14px; }
.exm-nav { grid-template-columns: 1fr 1fr; }
.exm-nav .exm-dots { grid-column: 1 / -1; grid-row: 1; }
.exm-nav [data-ex=next] { justify-self: end; }
.exm-nav [data-ex=prev] { justify-self: start; }
.exm-locked { white-space: nowrap; }
@media (max-width: 760px) { .bs-p figcaption { font-size: 10px; } .bs-grid { gap: 8px; } }

/* ===================================================================== v30 · Programme « Prompting avancé », module 1 */
.md-tag { white-space: normal; line-height: 1.45; border-radius: 10px; letter-spacing: 0; }

/* Vous êtes l’IA */
.ya { margin-top: 24px; display: grid; gap: 14px; }
.ya-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ya-badge { display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border-radius: 999px; font-size: 13.5px; font-weight: 750; background: var(--accent-soft); color: var(--accent); }
.ya-rounds { display: flex; gap: 6px; flex: 1; }
.ya-rounds i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 12px; font-style: normal; font-weight: 700; color: var(--text-3); background: var(--card); border: 1px solid var(--stroke); }
.ya-rounds i.is-cur { color: #fff; background: var(--accent); border-color: var(--accent); }
.ya-rounds i.is-done { color: #fff; background: var(--good); border-color: var(--good); }
.ya-round { display: grid; gap: 14px; }
.ya-msg { display: grid; gap: 6px; padding: 16px 20px; border-radius: 16px 16px 16px 4px; background: var(--card); border: 1px solid var(--stroke); box-shadow: var(--shadow); }
.ya-msg small { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.ya-msg p { font-size: 18px; font-weight: 600; line-height: 1.5; }
.ya-full { border-color: color-mix(in srgb, var(--good) 45%, var(--stroke)); }
.ya-full p { font-size: 15.5px; font-weight: 500; line-height: 1.75; }
.ya-m { padding: 1px 3px; border-radius: 4px; color: inherit; background: color-mix(in srgb, var(--h) 22%, transparent); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--h) 70%, transparent); }
.ya-k { font-size: 14px; line-height: 1.55; color: var(--text-2); }
.ya-dims { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ya-dim { display: grid; gap: 8px; padding: 14px; border-radius: var(--r-l); background: var(--card-inset); border: 1px solid var(--stroke); border-top: 3px solid var(--h); transition: border-color .3s; }
.ya-q { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.ya-q b { font-size: 12px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--h); }
.ya-q span:last-child { color: var(--text); font-weight: 600; }
.ya-ic { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; color: var(--h); background: color-mix(in srgb, var(--h) 16%, transparent); }
.ya-ic .ic { width: 14px; height: 14px; }
.ya-opts { display: grid; gap: 6px; }
.ya-o { position: relative; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 12px; border-radius: 10px; overflow: hidden; text-align: left; font-size: 13.5px; font-weight: 550; line-height: 1.35; color: var(--text); background: var(--card); border: 1px solid var(--stroke); transition: border-color .2s, transform .2s var(--spring); }
.ya-bar { position: absolute; inset: 0 auto 0 0; width: var(--p, 25%); background: color-mix(in srgb, var(--h) 14%, transparent); transition: width .8s var(--ease); pointer-events: none; }
.ya-t { position: relative; flex: 1; }
.ya-pct { position: relative; font-size: 12px; font-weight: 700; color: var(--text-3); }
.ya-o:not(:disabled):hover { border-color: var(--h); transform: translateX(2px); }
.ya-o.is-pick { border-color: var(--h); box-shadow: 0 0 0 1px var(--h); }
.ya-o:disabled { cursor: default; }
.ya-dim.is-hit { border-color: var(--good); }
.ya-dim.is-miss .ya-o.is-pick { border-color: var(--bad); box-shadow: 0 0 0 1px var(--bad); }
.ya-dim.is-locked .ya-o.is-want { border-color: var(--good); box-shadow: 0 0 0 1px var(--good); }
.ya-dim.is-locked .ya-o.is-want .ya-t::after { content: ' ✓'; color: var(--good); font-weight: 800; }
.ya-dim.is-sure .ya-o:not(.is-want) { opacity: .5; }
.ya-dim.is-sure .ya-o.is-want .ya-pct { color: var(--good); }
.ya-reply { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-l); background: var(--warn-soft); }
.ya-reply p { font-size: 15px; line-height: 1.55; }
.ya-reply small { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 650; color: var(--text-3); }
.ya-after { display: grid; gap: 12px; }
.ya-end { display: grid; justify-items: center; gap: 14px; padding: 26px 22px; border-radius: var(--r-l); text-align: center; background: var(--card); border: 1px solid var(--stroke); box-shadow: var(--shadow); }
.ya-end > small { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.ya-end p { max-width: 560px; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.sc-youai .so-score b { font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .ya-dims { grid-template-columns: minmax(0, 1fr); } .ya-msg p { font-size: 16.5px; } }

/* Les critères de réussite */
.cr { margin-top: 24px; display: grid; gap: 14px; }
.cr-added { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cr-added:empty { display: none; }
.cr-tag { padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 650; color: var(--good); background: var(--good-soft); animation: pin-pop .45s var(--spring) both; }
.cr-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cr-chips .prb-k { width: 100%; }
.cr-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; font-size: 14px; font-weight: 650; color: var(--text); background: var(--card); border: 1.5px dashed var(--stroke-2); transition: transform .25s var(--spring), border-color .2s, background .2s; }
.cr-chip span { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-weight: 800; color: #fff; background: var(--accent); }
.cr-chip:not(:disabled):hover { transform: translateY(-2px); border-color: var(--accent); }
.cr-chip.is-on { border-style: solid; border-color: var(--good); background: var(--good-soft); color: var(--good); }
.cr-chip.is-on span { background: var(--good); }
.cr-chip:disabled { cursor: default; }
.cr-out { display: grid; gap: 6px; }
.cr-out small { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.cr-body { display: grid; gap: 6px; font-size: 15px; line-height: 1.55; }
.cr-seg { border-radius: 6px; transition: background .6s; }
.cr-seg.is-new { background: var(--good-soft); padding: 2px 6px; margin: 0 -6px; animation: fade-up-soft .45s var(--ease) both; }
.cr-fb { min-height: 52px; padding: 12px 16px; border-radius: var(--r-m); font-size: 14.5px; line-height: 1.55; background: var(--card-inset); }
.cr-fb.ok { background: var(--good-soft); }
.cr-done { margin-top: 8px; padding-top: 8px; border-top: 1px dashed color-mix(in srgb, var(--good) 40%, transparent); }

/* L’ordre des pièces */
.od { margin-top: 24px; display: grid; gap: 14px; }
.od-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.od-tray, .od-prompt { display: grid; gap: 8px; padding: 16px; border-radius: var(--r-l); background: var(--card-inset); border: 1px solid var(--stroke); }
.od-prompt { min-height: 100%; }
.od-b { display: grid; gap: 3px; padding: 11px 14px; border-radius: var(--r-m); text-align: left; color: var(--text); background: var(--card); border: 1px solid var(--stroke); border-left: 4px solid var(--h); transition: transform .25s var(--spring), opacity .2s; }
.od-b b { font-size: 13.5px; color: var(--h); } .od-b span { font-size: 13.5px; line-height: 1.45; color: var(--text-2); }
.od-b:not(.is-used):hover { transform: translateX(4px); }
.od-b.is-used { opacity: .3; pointer-events: none; }
.od-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.od-p { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--r-m); cursor: pointer; background: var(--card); border: 1px solid var(--stroke); border-left: 4px solid var(--h); animation: rcp-deal .4s var(--spring) both; }
.od-p:hover { border-color: var(--bad); }
.od-p .tnum { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 700; color: #fff; background: var(--h); }
.od-p b { font-size: 14px; }
.od-rules { display: grid; gap: 8px; }
.od-r { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-m); background: var(--good-soft); }
.od-r.is-ko { background: var(--warn-soft); }
.od-r > span { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-weight: 800; color: #fff; background: var(--good); }
.od-r.is-ko > span { background: var(--warn); }
.od-r > span .ic { width: 14px; height: 14px; }
.od-r b { font-size: 14.5px; } .od-r p { margin-top: 2px; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.od-sum { font-size: 14.5px; }
.od-best { padding: 14px 16px; border-radius: var(--r-m); background: var(--card); border: 1px solid var(--stroke); }
.od-best ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; counter-reset: od; }
.od-best li { counter-increment: od; padding: 4px 12px 4px 6px; border-radius: 999px; font-size: 13px; background: color-mix(in srgb, var(--h) 16%, transparent); }
.od-best li::before { content: counter(od); display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 6px; border-radius: 50%; font-size: 11px; font-weight: 800; color: #fff; background: var(--h); }
@media (max-width: 760px) { .od-cols { grid-template-columns: minmax(0, 1fr); } }
.so-bins { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
.so-card.is-long { width: min(660px, 100%); }
.so-card.is-long b { font-size: 17px; line-height: 1.5; letter-spacing: -.01em; }
@media (max-width: 760px) { .so-bins[style*="--n:4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .so-card.is-long b { font-size: 15.5px; } }
.ya-dim.is-sure .ya-o.is-pick:not(.is-want) { border-color: var(--stroke); box-shadow: none; }

/* ===================================================================== v31 · Programme « Prompting avancé », module 2 */
/* Le prompt au régime (redact style cut) */
.rdx-cut .rdx-body { line-height: 1.9; }
.rdx-cut .rdx-w.is-on .rdx-t { color: #9CA3AF; background: none; box-shadow: none; text-decoration: line-through; text-decoration-color: #DC2626; text-decoration-thickness: 2px; animation: none; }
.rdx-cut.is-clean .rdx-w.is-on { display: none; }
.rdx-cut.is-clean .rdx-w.is-on + br { display: none; }

/* Le curseur d’effort */
.ef { margin-top: 24px; display: grid; gap: 14px; }
.ef-task { display: grid; gap: 14px; }
.ef-need { display: grid; gap: 4px; padding: 14px 18px; border-radius: var(--r-l); background: var(--accent-soft); font-size: 15.5px; line-height: 1.5; }
.ef-need span { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.ef-main { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.ef-left, .ef-right { display: grid; gap: 12px; }
.ef-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; align-items: end; height: 120px; padding: 12px 12px 0; border-radius: var(--r-l); background: var(--card-inset); border: 1px solid var(--stroke); }
.ef-step { display: grid; grid-template-rows: 1fr auto; gap: 6px; height: 100%; padding: 0 0 8px; background: none; border: 0; cursor: pointer; }
.ef-col { position: relative; display: block; width: 100%; height: 100%; border-radius: 8px 8px 3px 3px; background: color-mix(in srgb, var(--text-3) 10%, transparent); overflow: hidden; }
.ef-col b { position: absolute; left: 0; right: 0; bottom: 0; height: 0; border-radius: 8px 8px 3px 3px; background: var(--grad); opacity: .85; transition: height .6s var(--ease); }
.ef-step.is-seen .ef-col b { height: var(--q); }
.ef-step > span { font-size: 12.5px; font-weight: 750; color: var(--text-3); }
.ef-step.is-cur > span { color: var(--accent); }
.ef-step.is-cur .ef-col { box-shadow: 0 0 0 2px var(--accent); }
.ef-step.is-best .ef-col b { background: var(--good); opacity: 1; }
.ef-step.is-best > span { color: var(--good); }
.ef-step:disabled { cursor: default; }
.ef-axis { display: flex; justify-content: space-between; margin-top: -4px; font-size: 11.5px; color: var(--text-3); }
.ef-prompt > div { display: grid; gap: 6px; }
.ef-lv { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.ef-p { font-size: 14.5px; line-height: 1.55; }
.ef-g { display: grid; grid-template-columns: 150px minmax(0, 1fr) 60px; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 650; }
.ef-g small { display: block; font-size: 11px; font-weight: 550; color: var(--text-3); }
.ef-g i { display: flex; height: 12px; border-radius: 99px; background: var(--card-inset); overflow: hidden; }
.ef-g i b { display: block; height: 100%; transition: width .5s var(--ease); }
.ef-gq { background: var(--good); }
.ef-g.is-low .ef-gq { background: var(--warn); }
.ef-gw { background: var(--accent); } .ef-gf { background: var(--bad); opacity: .75; }
.ef-g em { font-style: normal; text-align: right; }
.ef-time small::after { content: ''; }
.ef-out .rg-out p { font-size: 14.5px; line-height: 1.55; }
.ef-out .rg-out small { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.ef-task .sc-actions { align-items: center; gap: 12px; }
.ef-hint { font-size: 13px; color: var(--text-3); }
.ef-task .so-fb { margin-top: 0; }
@media (max-width: 760px) {
  .ef-main { grid-template-columns: minmax(0, 1fr); }
  .ef-g { grid-template-columns: 100px minmax(0, 1fr) 54px; font-size: 12.5px; }
  .ef-steps { height: 96px; }
}

/* Les cartes à balayer */
.sw { margin-top: 24px; display: grid; gap: 14px; }
.sw-table { display: grid; grid-template-columns: 110px minmax(0, 1fr) 110px; align-items: center; gap: 14px; }
.sw-pile { display: grid; justify-items: center; gap: 4px; padding: 14px 8px; border-radius: var(--r-l); text-align: center; background: var(--card-inset); border: 1px dashed var(--stroke-2); }
.sw-pile b { font-size: 26px; font-weight: 780; line-height: 1; }
.sw-pile span { font-size: 12px; font-weight: 650; color: var(--text-3); line-height: 1.3; }
.sw-l b { color: var(--accent); } .sw-r b { color: #A78BFA; }
.sw-pile.is-bump { animation: pin-pop .5s var(--spring); }
.sw-deck { position: relative; display: grid; min-height: 220px; }
.sw-under { position: absolute; inset: 10px 14px -8px; border-radius: 22px; background: var(--card); border: 1px solid var(--stroke); transform: rotate(2deg); opacity: .6; }
.sw-u2 { inset: 18px 26px -14px; transform: rotate(-2.5deg); opacity: .35; }
.sw-card { position: relative; z-index: 2; display: grid; align-content: center; justify-items: center; gap: 10px; padding: 28px 30px; border-radius: 22px; text-align: center; background: var(--card-strong, var(--card)); border: 1px solid var(--stroke); box-shadow: var(--shadow-lg); transition: transform .5s var(--ease), opacity .45s var(--ease); }
.sw-card small { padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); }
.sw-card b { font-size: 20px; font-weight: 680; line-height: 1.4; letter-spacing: -.01em; }
.sw-card p { font-size: 14.5px; color: var(--text-2); }
.sw-card.in-deal { animation: stp-in .5s var(--spring) both; }
.sw-card.fly-l { transform: translateX(-130%) rotate(-18deg); opacity: 0; }
.sw-card.fly-r { transform: translateX(130%) rotate(18deg); opacity: 0; }
.sw-card.sw-end b { font-size: 42px; font-weight: 800; letter-spacing: -.04em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sw-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sw-b { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--r-l); text-align: left; color: var(--text); background: var(--card); border: 1.5px solid var(--stroke-2); transition: transform .25s var(--spring), border-color .2s, background .2s, opacity .2s; }
.sw-br { justify-content: flex-end; text-align: right; }
.sw-b span { display: grid; gap: 2px; } .sw-b b { font-size: 15px; } .sw-b small { font-size: 12.5px; color: var(--text-3); }
.sw-b .ic { flex: none; width: 20px; height: 20px; }
.sw-bl:not(:disabled):hover { transform: translateX(-4px); border-color: var(--accent); background: var(--accent-soft); }
.sw-br:not(:disabled):hover { transform: translateX(4px); border-color: #A78BFA; background: color-mix(in srgb, #A78BFA 14%, transparent); }
.sw-b:disabled { cursor: default; opacity: .5; }
.sw-b.is-good { opacity: 1; border-color: var(--good); background: var(--good-soft); }
.sw-b.is-bad { opacity: 1; border-color: var(--bad); animation: shake .45s var(--ease); }
.sw .so-fb { margin-top: 0; }
@media (max-width: 760px) {
  .sw-table { grid-template-columns: 1fr 1fr; }
  .sw-deck { grid-column: 1 / -1; grid-row: 1; min-height: 190px; }
  .sw-card { padding: 22px 18px; } .sw-card b { font-size: 17px; }
  .sw-b { padding: 12px; } .sw-b small { display: none; }
}
@media (prefers-reduced-motion: reduce) { .sw-card { transition: none; } }

/* ===================================================================== v32 · Module 2 retravaillé : curseur, balayage, conversation */
/* Le curseur d’effort */
.ef-steps { height: auto; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 14px 12px 10px; align-items: stretch; }
.ef-step { grid-template-rows: 110px auto; gap: 8px; padding: 0; }
.ef-col { position: relative; display: block; height: 110px; border-radius: 10px 10px 4px 4px; }
.ef-col em { position: absolute; left: 0; right: 0; bottom: calc(var(--q, 0%) + 4px); font-style: normal; font-size: 12px; font-weight: 750; text-align: center; color: var(--text-2); opacity: 0; transition: opacity .3s, bottom .6s var(--ease); }

.ef-step.is-seen .ef-col em { opacity: 1; }
.ef-step .ef-col b { height: 0; }
.ef-step.is-seen .ef-col b { height: var(--q); }
.ef-step:not(.is-seen) .ef-col::after { content: '?'; position: absolute; inset: 0; display: grid; place-items: center; font-size: 20px; font-weight: 750; color: var(--text-3); }
.ef-sn { display: grid; justify-items: center; gap: 2px; font-size: 12px; font-weight: 600; line-height: 1.25; text-align: center; color: var(--text-3); }
.ef-sn b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 11.5px; background: var(--card); border: 1px solid var(--stroke); }
.ef-step.is-cur .ef-sn { color: var(--text); }
.ef-step.is-cur .ef-sn b { color: #fff; background: var(--accent); border-color: var(--accent); }
.ef-step.is-cur .ef-col { box-shadow: 0 0 0 2px var(--accent); }
.ef-step.is-best .ef-sn b { color: #fff; background: var(--good); border-color: var(--good); }
.ef-axis { margin-top: 2px; }
.ef-axis span { display: inline-flex; align-items: center; gap: 4px; } .ef-axis .ic { width: 13px; height: 13px; }
.ef-main { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.ef-col-l, .ef-col-r { display: grid; gap: 12px; align-content: start; }
.ef-p { max-height: 220px; overflow: auto; }
.ef-add { padding: 1px 2px; border-radius: 4px; color: inherit; background: color-mix(in srgb, var(--accent) 22%, transparent); box-shadow: inset 0 -2px 0 var(--accent); animation: fade-up-soft .4s var(--ease) both; }
.ef-out .rg-out p { font-size: 14px; }
.ef-col-r { padding: 16px; border-radius: var(--r-l); background: var(--card-inset); border: 1px solid var(--stroke); }
.ef-g { grid-template-columns: minmax(0, 1fr) 64px; grid-template-rows: auto auto; row-gap: 6px; }
.ef-g > span { grid-column: 1 / -1; }
.ef-g i { grid-column: 1; }
.ef-g em { grid-column: 2; font-size: 15px; font-weight: 750; }
.ef-legend { display: grid; gap: 4px; font-size: 12.5px; color: var(--text-2); }
.ef-legend span { display: flex; align-items: center; gap: 6px; }
.ef-legend i { width: 10px; height: 10px; border-radius: 3px; } .ef-dw { background: var(--accent); } .ef-df { background: var(--bad); opacity: .75; }
.ef-note:empty { display: none; }
.ef-note { padding: 10px 12px; border-radius: var(--r-m); font-size: 13px; line-height: 1.5; background: var(--warn-soft); }
@media (max-width: 760px) {
  .ef-main { grid-template-columns: minmax(0, 1fr); }
  .ef-steps { gap: 4px; padding: 10px 6px 8px; } .ef-step { grid-template-rows: 80px auto; } .ef-col { height: 80px; }
  .ef-sn { font-size: 10px; }
}

/* Les cartes à balayer : vrai glisser */
.sw-card { cursor: grab; touch-action: pan-y; user-select: none; --sx: 0; }
.sw-card.is-drag { cursor: grabbing; transition: none; }
.sw-card.is-drag, .sw-card.fly-l, .sw-card.fly-r { animation: none; }
.sw-stamp { position: absolute; top: 16px; padding: 4px 10px; border: 2.5px solid currentColor; border-radius: 8px; font-size: 13px; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; pointer-events: none; opacity: 0; transition: opacity .15s; }
.sw-st-l { right: 16px; color: var(--accent); transform: rotate(8deg); opacity: calc(var(--sx) * -1); }
.sw-st-r { left: 16px; color: #A78BFA; transform: rotate(-8deg); opacity: var(--sx); }
.sw-card.is-drag .sw-stamp { transition: none; }
.sw-help { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: -4px; font-size: 13px; color: var(--text-3); }
.sw-help .ic { width: 14px; height: 14px; animation: sw-nudge 1.6s var(--ease) infinite; }
.sw-help .ic:last-child { animation-direction: reverse; }
@keyframes sw-nudge { 50% { transform: translateX(-3px); } }
.sw-btns { grid-template-columns: 1fr 1fr; }
.sw-b { padding: 10px 14px; }
.sw-b b { font-size: 14px; }

/* La conversation qui s’écrit */
.cv { margin-top: 24px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); gap: 16px; align-items: start; }
.cv-steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cv-s { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-m); background: var(--card); border: 1px solid var(--stroke); opacity: .5; transition: opacity .3s, border-color .3s, transform .3s var(--ease); }
.cv-s > span { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 12.5px; font-weight: 750; color: var(--text-3); background: var(--card-inset); }
.cv-s b { font-size: 14.5px; } .cv-s p { margin-top: 2px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.cv-s.is-cur { opacity: 1; border-color: var(--accent); transform: translateX(6px); }
.cv-s.is-cur > span { color: #fff; background: var(--accent); }
.cv-s.is-done { opacity: 1; }
.cv-s.is-done > span { color: #fff; background: var(--good); }
.cv-chat { display: grid; gap: 10px; align-content: start; min-height: 260px; padding: 16px; border-radius: var(--r-l); background: var(--card-inset); border: 1px solid var(--stroke); }
.cv-idle { align-self: center; justify-self: center; }
.cv-m { display: flex; gap: 10px; align-items: flex-start; }
.cv-m.is-user { flex-direction: row-reverse; }
.cv-b { position: relative; max-width: 88%; padding: 10px 14px 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.55; background: var(--card); border: 1px solid var(--stroke); }
.cv-m.is-user .cv-b { background: var(--accent-soft); border-color: transparent; border-top-right-radius: 4px; }
.cv-m.is-ai .cv-b { border-top-left-radius: 4px; }
.cv-b p + p { margin-top: 4px; }
.cv-n { position: absolute; top: -8px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 10.5px; font-weight: 800; color: #fff; background: var(--accent); }
.cv-m.is-ai .cv-n { right: -6px; } .cv-m.is-user .cv-n { left: -6px; }
.cv-m.cv-good .cv-b { border-color: var(--good); box-shadow: 0 0 0 1px var(--good); }
.cv-flagged .cv-b { border-color: var(--warn); }
.cv-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cv-flags span { padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 650; color: var(--warn); background: var(--warn-soft); }
.cv-flags span::before { content: '! '; font-weight: 850; }
.cv-note { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-m); font-size: 14px; line-height: 1.5; background: var(--good-soft); border: 1px dashed var(--good); }
.cv-note .cv-n { position: static; flex: none; margin-top: 1px; background: var(--good); }
.sc-convo .sc-actions { margin-top: 14px; }
.cv-end { margin-top: 14px; }
@media (max-width: 760px) { .cv { grid-template-columns: minmax(0, 1fr); } .cv-s.is-cur { transform: none; } .cv-b { max-width: 92%; } }
.ef-col em { color: var(--text); text-shadow: 0 1px 2px rgba(0,0,0,.25); }
.ef-col { --q: 0%; }

/* ===================================================================== v33 · Programme « Prompting avancé », module 3 */
/* Choix dans une conversation */
.cv-choice { display: grid; gap: 8px; padding: 12px; border-radius: var(--r-m); background: var(--card); border: 1px dashed var(--accent); }
.cv-opts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.cv-o { padding: 9px 14px; border-radius: 16px 16px 4px 16px; font-size: 13.5px; font-weight: 600; line-height: 1.4; text-align: left; color: var(--text); background: var(--accent-soft); border: 1.5px solid transparent; transition: transform .2s var(--spring), border-color .2s; }
.cv-o:not(:disabled):hover { transform: translateY(-2px); border-color: var(--accent); }
.cv-o.is-bad { opacity: .5; border-color: var(--bad); text-decoration: line-through; }
.cv-o.is-good { border-color: var(--good); background: var(--good-soft); }
.cv-o:disabled { cursor: default; }
.cv-why { padding: 8px 12px; border-radius: var(--r-m); font-size: 13.5px; line-height: 1.5; }
.cv-why.ok { background: var(--good-soft); } .cv-why.ko { background: var(--warn-soft); }

/* L’interview */
.iv { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.iv-chat { min-height: 300px; }
.iv-plus { margin-top: 6px; padding-top: 6px; border-top: 1px dashed color-mix(in srgb, var(--accent) 40%, transparent); font-size: 13px; color: var(--accent); animation: fade-up-soft .4s var(--ease) both; }
.iv-qr { border-style: solid; border-color: var(--stroke); background: transparent; padding: 0; border: 0; }
.iv-brief { position: sticky; top: 90px; display: grid; gap: 10px; padding: 16px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--stroke); box-shadow: var(--shadow); }
.iv-brief dl { display: grid; gap: 8px; margin: 0; }
.iv-row { display: grid; gap: 2px; padding: 8px 10px; border-radius: var(--r-m); background: var(--card-inset); transition: background .3s; }
.iv-row dt { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.iv-row dd { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--text-3); }
.iv-row.is-on { background: var(--good-soft); }
.iv-row.is-on dd { color: var(--text); animation: pin-pop .45s var(--spring) both; }
.iv-cmp { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--r-m); font-size: 13.5px; line-height: 1.55; color: var(--text-2); background: var(--card); border: 1px dashed var(--stroke-2); }
.iv-cmp-n { margin-top: 6px; padding: 8px 10px; border-radius: 8px; color: var(--text); background: var(--warn-soft); }
.iv-act { margin-top: 14px; }
@media (max-width: 760px) { .iv { grid-template-columns: minmax(0, 1fr); } .iv-brief { position: static; order: -1; } .iv-brief dl { grid-template-columns: 1fr 1fr; } }

/* Le jury */
.ck { margin-top: 24px; display: grid; gap: 14px; }
.ck-out small, .ck-list small { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.ck-text { margin-top: 6px; font-size: 15.5px; line-height: 1.75; }
.ck-seg { border-radius: 4px; transition: background .4s; }
.ck-seg.is-marked { background: var(--warn-soft); box-shadow: inset 0 -2px 0 var(--warn); }
.ck-seg.is-changed { background: var(--good-soft); box-shadow: inset 0 -2px 0 var(--good); animation: fade-up-soft .45s var(--ease) both; }
.ck-n { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 3px; border-radius: 50%; font-size: 10.5px; font-weight: 800; color: #fff; background: var(--warn); vertical-align: 2px; }
.ck-list ol { display: grid; gap: 8px; margin: 8px 0 12px; padding: 0; list-style: none; }
.ck-list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; }
.ck-list li .ck-n { flex: none; margin-top: 1px; }
.ck-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ck-btns .prb-k { grid-column: 1 / -1; }
.ck-b { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--r-l); text-align: left; color: var(--text); background: var(--card); border: 1.5px solid var(--stroke-2); transition: transform .25s var(--spring), border-color .2s; }
.ck-b b { font-size: 14.5px; line-height: 1.45; } .ck-b small { font-size: 12px; color: var(--text-3); }
.ck-b:not(:disabled):hover { transform: translateY(-2px); border-color: var(--accent); }
.ck-b.is-used { opacity: .55; cursor: default; }
.ck .so-fb { margin-top: 0; }
@media (max-width: 760px) { .ck-btns { grid-template-columns: minmax(0, 1fr); } }

/* Le tournoi */
.br { margin-top: 24px; display: grid; gap: 14px; }
.br-stage { min-height: 120px; display: grid; gap: 12px; align-content: center; padding: 16px; border-radius: var(--r-l); background: var(--card-inset); border: 1px solid var(--stroke); }
.br-four { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.br-c, .br-v, .br-champ { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-m); text-align: left; font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--text); background: var(--card); border: 1px solid var(--stroke); }
.br-l { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; font-size: 13px; font-weight: 800; color: #fff; background: var(--grad); }
.br-round { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); text-align: center; }
.br-duel { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: stretch; }
.br-vs { align-self: center; font-size: 12px; font-weight: 750; text-transform: uppercase; color: var(--text-3); }
.br-v { border-width: 1.5px; transition: transform .25s var(--spring), border-color .2s, opacity .3s; animation: rcp-deal .45s var(--spring) both; }
.br-v:not(:disabled):hover { transform: translateY(-3px); border-color: var(--accent); }
.br-v:disabled { cursor: default; opacity: .4; }
.br-v.is-win { opacity: 1; border-color: var(--good); background: var(--good-soft); transform: scale(1.03); }
.br-champ { justify-self: center; max-width: 560px; border: 2px solid #D4A017; box-shadow: 0 0 0 4px color-mix(in srgb, #D4A017 20%, transparent); }
.br-champ .br-l { background: #D4A017; }
.br-tree { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.br-r:empty { display: none; }
.br-r { padding: 4px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 650; color: var(--text-2); background: var(--card-inset); animation: pin-pop .4s var(--spring) both; }
.br-r:last-child { color: #B7791F; background: color-mix(in srgb, #D4A017 16%, transparent); }
.br-end { display: grid; gap: 12px; }
.br-end .rg-out small { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
@media (max-width: 760px) { .br-four { grid-template-columns: minmax(0, 1fr); } .br-duel { grid-template-columns: minmax(0, 1fr); } .br-vs { justify-self: center; } }

/* Les balises */
.wp { margin-top: 24px; display: grid; gap: 14px; }
.wp-prompt { display: grid; gap: 10px; padding: 16px; border-radius: var(--r-l); background: var(--card-inset); border: 1px solid var(--stroke); }
.wp-b { position: relative; display: grid; gap: 4px; padding: 10px 14px; border-radius: var(--r-m); font-size: 14.5px; line-height: 1.55; background: var(--card); border: 1px solid var(--stroke); transition: border-color .3s, background .3s, padding .3s; }
.wp-tag { display: none; justify-self: start; font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; font-weight: 700; color: var(--h); }
.wp-b.is-wrapped { border-color: color-mix(in srgb, var(--h) 60%, transparent); background: color-mix(in srgb, var(--h) 8%, var(--card)); }
.wp-b.is-wrapped .wp-tag { display: block; animation: pin-pop .4s var(--spring) both; }
.wp-btn { justify-self: end; padding: 5px 10px; border-radius: 999px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; font-weight: 700; color: var(--h); background: color-mix(in srgb, var(--h) 14%, transparent); border: 1px dashed var(--h); animation: fade-up-soft .4s var(--ease) both; }
.wp-btn:hover { background: color-mix(in srgb, var(--h) 24%, transparent); }
.wp-prompt.is-editing .wp-b:not(.is-wrapped) { border-style: dashed; }
.wp-out { display: grid; gap: 10px; }
.wp-out .rg-out small { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
.wp-bad { border-color: var(--bad) !important; } .wp-good { border-color: var(--good) !important; }
.wp-out .so-fb { margin-top: 0; }

/* ===================================================================== v34 · Programme « Prompting avancé », module 4 */
/* La table de mixage */
.mxr { margin-top: 24px; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.mxr-desk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 16px 12px; border-radius: var(--r-l); background: linear-gradient(180deg, #1F2430, #12151C); border: 1px solid rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), var(--shadow-lg); color: #E5E7EB; }
.mxr-ch { position: relative; display: grid; justify-items: center; gap: 8px; padding: 10px 4px 12px; border-radius: 12px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .05); }
.mxr-lab { font-size: 11.5px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; text-align: center; color: #CBD5E1; }
.mxr-track { position: relative; height: 190px; width: 44px; display: grid; place-items: center; background: repeating-linear-gradient(180deg, transparent 0 18px, rgba(255, 255, 255, .12) 18px 19px); border-radius: 6px; }
.mxr-track::before { content: ''; position: absolute; top: 8px; bottom: 8px; left: 50%; width: 6px; margin-left: -3px; border-radius: 3px; background: #0B0D12; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .8); }
.mxr-f { position: relative; writing-mode: vertical-lr; direction: rtl; width: 44px; height: 180px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: ns-resize; }
.mxr-f::-webkit-slider-runnable-track { background: transparent; }
.mxr-f::-webkit-slider-thumb { -webkit-appearance: none; width: 38px; height: 22px; border-radius: 5px; background: linear-gradient(180deg, #F3F4F6, #9CA3AF); box-shadow: 0 2px 6px rgba(0, 0, 0, .6), inset 0 -2px 0 rgba(0, 0, 0, .25); border: 0; }
.mxr-f::-moz-range-thumb { width: 38px; height: 22px; border-radius: 5px; background: linear-gradient(180deg, #F3F4F6, #9CA3AF); border: 0; }
.mxr-f:focus-visible { outline: 2px solid #38BDF8; outline-offset: 2px; border-radius: 6px; }
.mxr-v { font-size: 15px; font-weight: 750; color: #38BDF8; font-family: ui-monospace, Menlo, monospace; }
.mxr-hint { font-size: 11px; line-height: 1.3; text-align: center; color: #94A3B8; }
.mxr-led { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: #374151; }
.mxr-ch.is-done .mxr-led { background: #34D399; box-shadow: 0 0 8px #34D399; }
.mxr-screen { display: grid; gap: 12px; }
.mxr-k { margin-top: 2px; }
.mxr-bars { display: grid; gap: 5px; padding: 14px; border-radius: var(--r-l); background: var(--card-inset); border: 1px solid var(--stroke); }
.mxr-bar { display: grid; grid-template-columns: 170px minmax(0, 1fr) 56px; align-items: center; gap: 10px; font-size: 13.5px; transition: opacity .3s; }
.mxr-w { font-weight: 600; }
.mxr-bar i { height: 12px; border-radius: 99px; background: color-mix(in srgb, var(--text-3) 12%, transparent); overflow: hidden; }
.mxr-bar i b { display: block; height: 100%; border-radius: 99px; background: var(--grad); transition: width .35s var(--ease); }
.mxr-bar em { font-style: normal; font-size: 12.5px; font-weight: 700; text-align: right; color: var(--text-2); }
.mxr-bar.is-cut { opacity: .4; } .mxr-bar.is-cut .mxr-w { text-decoration: line-through; } .mxr-bar.is-cut em { color: var(--bad); }
.mxr-draw { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mxr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mxr-chip { padding: 5px 11px; border-radius: 999px; font-size: 13px; font-weight: 650; background: var(--accent-soft); color: var(--accent); animation: pin-pop .4s var(--spring) both; }
.mxr-len { padding: 12px 14px; border-radius: var(--r-m); background: var(--card); border: 1px solid var(--stroke); }
.mxr-text { margin-top: 6px; font-size: 14px; line-height: 1.6; }
.mxr-scissors { margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 750; color: var(--bad); background: var(--bad-soft); }
.mxr-explain { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--r-m); font-size: 14px; line-height: 1.55; background: var(--accent-soft); }
@media (max-width: 860px) {
  .mxr { grid-template-columns: minmax(0, 1fr); }
  .mxr-track { height: 150px; } .mxr-f { height: 140px; }
  .mxr-bar { grid-template-columns: 120px minmax(0, 1fr) 46px; font-size: 12.5px; }
}

/* Le laboratoire */
.lb { margin-top: 24px; display: grid; gap: 14px; }
.lb-hyp { display: grid; gap: 4px; padding: 16px 18px; border-radius: var(--r-l); background: repeating-linear-gradient(0deg, transparent 0 27px, color-mix(in srgb, var(--accent) 12%, transparent) 27px 28px), var(--card); border: 1px solid var(--stroke); border-left: 4px solid var(--accent); }
.lb-hyp span { font-size: 11px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.lb-hyp p { font-size: 17px; font-weight: 600; line-height: 1.5; }
.lb-hyp small { font-size: 13px; color: var(--text-3); }
.lb-conds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.lb-c { display: grid; gap: 10px; padding: 14px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--stroke); transition: border-color .3s; }
.lb-c header { display: flex; gap: 10px; align-items: flex-start; }
.lb-n { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; font-weight: 800; color: #fff; background: var(--grad); }
.lb-c header b { display: block; font-size: 14px; line-height: 1.35; } .lb-c header small { font-size: 12px; color: var(--text-3); }
.lb-p code { display: block; padding: 8px 10px; border-radius: 8px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; line-height: 1.5; white-space: normal; color: var(--text); background: var(--card-inset); }
.lb-bet p { font-size: 12.5px; font-weight: 650; color: var(--text-2); }
.lb-bet div { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.lb-b { padding: 8px; border-radius: 10px; font-size: 13px; font-weight: 700; color: var(--text); background: var(--card-inset); border: 1.5px solid var(--stroke-2); transition: border-color .2s, transform .2s var(--spring); }
.lb-b:not(:disabled):hover { transform: translateY(-2px); border-color: var(--accent); }
.lb-b:disabled { cursor: default; opacity: .45; } .lb-b.is-bet { opacity: 1; border-color: var(--accent); background: var(--accent-soft); }
.lb-runs { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.lb-runs:empty { display: none; }
.lb-runs li { display: flex; gap: 8px; align-items: baseline; padding: 6px 8px; border-radius: 8px; font-size: 13px; line-height: 1.4; background: var(--card-inset); }
.lb-runs li .tnum { flex: none; font-size: 11px; font-weight: 800; color: var(--text-3); }
.lb-c.is-same .lb-runs li { background: var(--good-soft); }
.lb-c.is-same { border-color: var(--good); } .lb-c.is-diff { border-color: var(--warn); }
.lb-res { display: grid; gap: 6px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.lb-res:empty { display: none; }
.lb-v { font-size: 13.5px; color: var(--text); } .lb-v.ok b { color: var(--good); } .lb-v.ko b { color: var(--warn); }
@media (max-width: 900px) { .lb-conds { grid-template-columns: minmax(0, 1fr); } }

/* La console en langage courant */
.dl { margin-top: 24px; display: grid; gap: 14px; }
.dl-panel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 14px; border-radius: var(--r-l); background: var(--card-inset); border: 1px solid var(--stroke); }
.dl-c { display: grid; gap: 8px; }
.dl-l { font-size: 11.5px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.dl-c.is-done .dl-l { color: var(--good); }
.dl-seg { display: flex; padding: 3px; border-radius: 12px; background: var(--card); border: 1px solid var(--stroke); }
.dl-o { flex: 1; padding: 8px 6px; border-radius: 9px; font-size: 13px; font-weight: 650; color: var(--text-2); background: none; border: 0; transition: background .2s, color .2s; }
.dl-o.is-on { color: #fff; background: var(--accent); box-shadow: 0 2px 8px -2px color-mix(in srgb, var(--accent) 60%, transparent); }
.dl-prompt { margin-top: 4px; }
.ef-add.no-anim { animation: none; }
.dl-list { display: grid; gap: 6px; margin: 8px 0 0; padding-left: 20px; }
.dl-list li { font-size: 14.5px; line-height: 1.45; }
.dl-list li span { display: block; font-size: 13px; color: var(--text-2); }
@media (max-width: 760px) { .dl-panel { grid-template-columns: minmax(0, 1fr); } }
.mxr { grid-template-columns: 336px minmax(0, 1fr); }
.mxr-lab { font-size: 10.5px; letter-spacing: .02em; min-height: 26px; display: grid; align-items: center; }
@media (max-width: 860px) { .mxr { grid-template-columns: minmax(0, 1fr); } }

/* ===================================================================== v35 · Le cours (théorie) et laboratoire séquentiel */
.ls-k { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.ls-k::before { content: ''; width: 18px; height: 2px; border-radius: 2px; background: var(--grad); }
.ls { margin-top: 22px; display: grid; gap: 14px; }
.ls-part { display: grid; gap: 10px; padding: 20px 22px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--stroke); box-shadow: var(--shadow); }
.ls-part h3 { display: flex; align-items: center; gap: 10px; font-size: 18px; letter-spacing: -.01em; }
.ls-part h3 .tnum { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px; font-size: 13px; font-weight: 800; color: #fff; background: var(--grad); }
.ls-part > p { font-size: 15.5px; line-height: 1.7; color: var(--text-2); }
.ls-part > p b { color: var(--text); }
.ls-schema { display: flex; align-items: stretch; flex-wrap: wrap; gap: 0; margin: 4px 0; }
.ls-box { flex: 1 1 140px; display: grid; gap: 4px; align-content: start; padding: 12px 14px; border-radius: var(--r-m); background: var(--card-inset); border: 1px solid var(--stroke); }
.ls-box b { font-size: 14px; } .ls-box small { font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
.ls-box.is-accent { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.ls-box.is-good { background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.ls-box.is-warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.ls-box.is-muted { opacity: .6; border-style: dashed; }
.ls-arrow { flex: 0 0 auto; display: grid; place-items: center; align-content: center; gap: 2px; min-width: 34px; padding: 0 4px; color: var(--text-3); }
.ls-arrow::before { content: '→'; font-size: 20px; font-weight: 700; line-height: 1; }
.ls-arrow small { max-width: 90px; font-size: 10.5px; line-height: 1.25; text-align: center; color: var(--text-3); }
.ls-ex { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--r-m); background: var(--card-inset); border-left: 3px solid var(--accent); }
.ls-ex span, .ls-vs span { font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.ls-ex p, .ls-vs p { font-size: 14.5px; line-height: 1.6; }
.ls-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ls-bad, .ls-good { display: grid; gap: 4px; align-content: start; padding: 12px 14px; border-radius: var(--r-m); }
.ls-bad { background: var(--warn-soft); } .ls-bad span { color: var(--warn); }
.ls-good { background: var(--good-soft); } .ls-good span { color: var(--good); }
.ls-list { display: grid; gap: 6px; margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.ls-list b { color: var(--text); }
.ls-act { margin-top: 14px; }
.ls-sum { margin-top: 14px; }
@media (max-width: 760px) {
  .ls-part { padding: 16px; } .ls-part > p { font-size: 15px; }
  .ls-schema { flex-direction: column; } .ls-arrow { min-height: 30px; } .ls-arrow::before { content: '↓'; }
  .ls-vs { grid-template-columns: minmax(0, 1fr); }
}

/* Laboratoire séquentiel */
.lb-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.lb-steps li { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; font-size: 13px; font-weight: 650; color: var(--text-3); background: var(--card); border: 1px solid var(--stroke); }
.lb-steps .lb-n { width: 24px; height: 24px; font-size: 12px; background: var(--card-inset); color: var(--text-3); }
.lb-steps li.is-cur { color: var(--text); border-color: var(--accent); } .lb-steps li.is-cur .lb-n { color: #fff; background: var(--grad); }
.lb-steps li.is-done .lb-n { color: #fff; background: var(--good); }
.lb-stage .lb-c { padding: 20px; gap: 14px; }
.lb-c header small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.lb-c header b { font-size: 17px; }
.lb-proto { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.lb-proto div { display: grid; gap: 4px; align-content: start; padding: 10px 12px; border-radius: var(--r-m); background: var(--card-inset); }
.lb-proto dt { font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.lb-proto dd { margin: 0; font-size: 13.5px; line-height: 1.5; }
.lb-proto code { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; }
.lb-why { padding: 10px 12px; border-radius: var(--r-m); font-size: 14px; line-height: 1.55; background: var(--accent-soft); }
.lb-stage .lb-bet div { max-width: 360px; }
.lb-stage .lb-runs { grid-template-columns: repeat(5, minmax(0, 1fr)); display: grid; }
.lb-stage .lb-runs li { display: grid; gap: 4px; align-content: start; }
.lb-runs li .tnum { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.lb-res .btn { justify-self: start; margin-top: 4px; }
.lb-sum { display: grid; gap: 12px; padding: 20px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--stroke); box-shadow: var(--shadow); }
.lb-sum table { width: 100%; border-collapse: collapse; font-size: 14px; }
.lb-sum th { text-align: left; font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); padding: 6px 8px; border-bottom: 1px solid var(--stroke); }
.lb-sum td { padding: 10px 8px; border-bottom: 1px solid var(--stroke); }
.lb-sum tr.is-same b { color: var(--good); } .lb-sum tr.is-diff b { color: var(--warn); }
.lb-concl { font-size: 15px; line-height: 1.6; }
@media (max-width: 760px) {
  .lb-proto { grid-template-columns: minmax(0, 1fr); }
  .lb-stage .lb-runs { grid-template-columns: minmax(0, 1fr); }
  .lb-sum table { font-size: 12.5px; }
}
.ls-list { list-style: disc; } .ls-list li::marker { color: var(--accent); }

/* ===================================================================== v36 · Module 5 : l’atelier de débogage */
@media (max-width: 760px) { .so-bins[style*="--n:5"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dbg { margin-top: 24px; display: grid; gap: 14px; }
.dbg-case { display: grid; gap: 14px; }
.dbg-brief { position: relative; display: grid; gap: 6px; padding: 18px 20px; border-radius: var(--r-l); background: repeating-linear-gradient(135deg, transparent 0 22px, color-mix(in srgb, var(--accent) 5%, transparent) 22px 23px), var(--card); border: 1px solid var(--stroke); box-shadow: var(--shadow); }
.dbg-brief b { font-size: 18px; } .dbg-brief p { font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.dbg-stamp { justify-self: start; padding: 3px 10px; border: 2px solid var(--accent); border-radius: 6px; font-size: 11.5px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); transform: rotate(-1.5deg); }
.dbg-stamp.is-ok { border-color: var(--good); color: var(--good); }
.dbg-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.dbg-panel { display: grid; gap: 8px; padding: 14px; border-radius: var(--r-l); background: var(--card-inset); border: 1px solid var(--stroke); }
.dbg-ver { margin-left: 6px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; letter-spacing: .02em; text-transform: none; color: var(--accent); background: var(--accent-soft); }
.dbg-prompt, .dbg-out { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--r-m); font-size: 14px; line-height: 1.55; background: var(--card); border: 1px solid var(--stroke); }
.dbg-prompt { font-family: ui-monospace, Menlo, monospace; font-size: 12.8px; }
.dbg-del { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--bad); }
.dbg-add { padding: 2px 6px; margin: 0 -6px; border-radius: 6px; background: var(--good-soft); box-shadow: inset 3px 0 0 var(--good); animation: fade-up-soft .4s var(--ease) both; }
.dbg-out { transition: opacity .3s; }
.dbg-out.is-run { opacity: .35; filter: blur(1px); }
.dbg-m { padding: 0 2px; border-radius: 3px; color: inherit; }
.dbg-bad { background: color-mix(in srgb, var(--bad) 18%, transparent); box-shadow: inset 0 -2px 0 var(--bad); }
.dbg-good { background: var(--good-soft); box-shadow: inset 0 -2px 0 var(--good); }
.dbg-info { background: var(--accent-soft); box-shadow: inset 0 -2px 0 var(--accent); }
.dbg-sym { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dbg-sym span { font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--bad); }
.dbg-sym i { padding: 3px 9px; border-radius: 999px; font-size: 12.5px; font-style: normal; font-weight: 650; color: var(--bad); background: var(--bad-soft); }
.dbg-tests { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dbg-tests .prb-k { grid-column: 1 / -1; }
.dbg-t { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--r-m); text-align: left; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--text); background: var(--card); border: 1.5px solid var(--stroke-2); transition: transform .25s var(--spring), border-color .2s, opacity .2s; }
.dbg-t:not(:disabled):hover { transform: translateY(-2px); border-color: var(--accent); }
.dbg-t:disabled { cursor: default; opacity: .45; }
.dbg-t.is-used { opacity: .75; } .dbg-t.is-fix { opacity: 1; border-color: var(--good); background: var(--good-soft); }
.dbg-t.is-nope { border-style: dashed; } .dbg-t.is-blind { border-color: var(--warn); } .dbg-t.is-clue { border-color: var(--accent); }
.dbg-cause { justify-self: start; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); background: var(--card-inset); }
.dbg-cause.manque { color: #0284C7; background: color-mix(in srgb, #38BDF8 18%, transparent); }
.dbg-cause.contra { color: #B45309; background: color-mix(in srgb, #F59E0B 18%, transparent); }
.dbg-cause.ambig { color: #7C3AED; background: color-mix(in srgb, #A78BFA 20%, transparent); }
.dbg-cause.surcharge { color: #BE185D; background: color-mix(in srgb, #F472B6 18%, transparent); }
.dbg-cause.exemple { color: #047857; background: color-mix(in srgb, #34D399 18%, transparent); }
.dbg-cause.diag { color: var(--accent); background: var(--accent-soft); }
.dbg-cause.all { color: var(--text-2); background: var(--card-inset); border: 1px dashed var(--stroke-2); }
:root[data-theme="dark"] .dbg-cause.manque, :root[data-theme="dark"] .dbg-cause.contra, :root[data-theme="dark"] .dbg-cause.ambig, :root[data-theme="dark"] .dbg-cause.surcharge, :root[data-theme="dark"] .dbg-cause.exemple { filter: brightness(1.6); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dbg-cause:not(.diag):not(.all) { filter: brightness(1.6); } }
.dbg-log { display: grid; gap: 8px; padding: 14px; border-radius: var(--r-l); background: var(--card-inset); border: 1px solid var(--stroke); }
.dbg-log ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dbg-log li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-m); background: var(--card); border-left: 3px solid var(--stroke-2); font-size: 13.5px; line-height: 1.5; }
.dbg-log li > .tnum { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 11.5px; font-weight: 800; color: #fff; background: var(--text-3); }
.dbg-log li.is-fix { border-left-color: var(--good); } .dbg-log li.is-fix > .tnum { background: var(--good); }
.dbg-log li.is-blind { border-left-color: var(--warn); } .dbg-log li.is-blind > .tnum { background: var(--warn); }
.dbg-log li.is-clue { border-left-color: var(--accent); } .dbg-log li.is-clue > .tnum { background: var(--accent); }
.dbg-log li p + p { margin-top: 2px; }
.dbg-v { color: var(--text-2); }
.dbg-solved { display: grid; gap: 10px; padding: 16px 18px; border-radius: var(--r-l); background: var(--good-soft); }
.dbg-solved p { font-size: 14.5px; line-height: 1.6; }
.dbg-solved .btn { justify-self: start; }
@media (max-width: 860px) { .dbg-grid, .dbg-tests { grid-template-columns: minmax(0, 1fr); } }
.dbg-sym.is-fixed span { color: var(--good); }
.dbg-sym.is-fixed i { color: var(--good); background: var(--good-soft); text-decoration: line-through; }
.dbg-sym.is-fixed i::before { content: '✓ '; text-decoration: none; display: inline-block; margin-right: 2px; }

/* Texte riche : tableaux dans les réponses simulées */
.rt-wrap { overflow-x: auto; margin: 4px 0; }
.rt { width: 100%; border-collapse: collapse; font-size: 13.5px; line-height: 1.4; }
.rt th { text-align: left; font-size: 11.5px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); padding: 6px 10px; border-bottom: 1.5px solid var(--stroke-2); white-space: nowrap; }
.rt td { padding: 7px 10px; border-bottom: 1px solid var(--stroke); vertical-align: top; }
.rt tr:last-child td { border-bottom: 0; }
.ef-o .rt, .dbg-out .rt { margin: 2px 0; }
.ef-o p { font-size: 14px; line-height: 1.55; } .ef-o p + p { margin-top: 4px; }

/* ===================================================================== v37 · Prog. 2 Module 6 : pièces jointes (xray, files, readcheck, traps) */
.xr, .fls, .rc, .trp { display: grid; gap: 14px; }
.xr-file { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: var(--r-m); background: var(--card-inset); border: 1px solid var(--stroke); font-size: 14px; }
.xr-file small { color: var(--text-3); font-size: 12.5px; }
.xr-fic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--accent-soft); color: var(--accent); flex: none; }
.xr-fic .ic { width: 17px; height: 17px; }
.xr-page { position: relative; display: grid; gap: 10px; padding: 18px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--stroke); overflow: hidden; }
.xr-b { display: grid; gap: 8px; padding: 12px 14px; border-radius: var(--r-m); border: 1.5px dashed transparent; transition: border-color .3s, background .3s; }
.xr-b:hover { border-color: var(--stroke-2); }
.xr-human { transition: opacity .4s, filter .4s; }
.xr-head { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.xr-txt { font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.xr-chart { display: flex; align-items: flex-end; gap: 14px; height: 96px; padding: 8px 12px 0; border-bottom: 1px solid var(--stroke-2); }
.xr-chart div { flex: 1; display: grid; justify-items: center; gap: 4px; height: 100%; align-content: end; }
.xr-chart i { display: block; width: 100%; max-width: 46px; height: calc(var(--h) * .8px); border-radius: 6px 6px 0 0; background: linear-gradient(var(--accent), color-mix(in srgb, var(--accent) 55%, transparent)); }
.xr-chart span { font-size: 11.5px; color: var(--text-3); }
.xr-cap { font-size: 12.5px; color: var(--text-3); font-style: italic; }
.xr-tbl { border-collapse: collapse; font-size: 13.5px; }
.xr-tbl th, .xr-tbl td { padding: 5px 12px; border: 1px solid var(--stroke); text-align: left; }
.xr-tbl th { background: var(--card-inset); font-weight: 700; }
.xr-scan { position: relative; padding: 12px 14px; border-radius: 6px; background: color-mix(in srgb, #d8cfb8 40%, var(--card)); transform: rotate(-.8deg); font-family: Georgia, serif; font-size: 13.5px; color: var(--text-2); filter: contrast(.9) blur(.2px); }
.xr-sig { display: block; margin-top: 6px; font-family: 'Brush Script MT', cursive; font-size: 20px; color: color-mix(in srgb, #1d4ed8 70%, var(--text)); }
.xr-note { justify-self: start; padding: 8px 12px; border-radius: 4px 12px 12px 12px; background: color-mix(in srgb, #fde047 35%, var(--card)); border-left: 3px solid #eab308; font-size: 13.5px; color: var(--text); }
.xr-bet { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 13px; font-weight: 650; color: var(--text-2); }
.xr-bet > div { display: flex; gap: 6px; flex-wrap: wrap; }
.xr-o { padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--text-2); background: var(--card-inset); border: 1.5px solid var(--stroke); transition: all .2s; }
.xr-o:not(:disabled):hover { border-color: var(--accent); color: var(--text); }
.xr-o.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.xr-o:disabled { cursor: default; }
.xr-o.is-right { border-color: var(--good); color: var(--good); background: var(--good-soft); }
.xr-o.is-on:not(.is-right):disabled { border-color: var(--bad); color: var(--bad); background: var(--bad-soft, var(--warn-soft)); text-decoration: line-through; }
.xr-ai { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--r-m); background: #0b1220; color: #a7f3d0; animation: fade-up-soft .4s var(--ease) both; }
.xr-ai-k { font-size: 10.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: #64748b; }
.xr-ai code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.xr-why { font-size: 13.5px; line-height: 1.55; color: var(--text-2); animation: fade-up-soft .4s var(--ease) both; }
.xr-b.is-x { border-style: solid; }
.xr-b.v-full { border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.xr-b.v-partial { border-color: color-mix(in srgb, var(--warn) 55%, transparent); }
.xr-b.v-partial .xr-human { opacity: .7; }
.xr-b.v-lost { border-color: color-mix(in srgb, var(--bad) 50%, transparent); background: color-mix(in srgb, var(--bad) 5%, transparent); }
.xr-b.v-lost .xr-human { opacity: .3; filter: grayscale(1); }
.xr-b.v-lost .xr-ai code { color: #fca5a5; font-style: italic; }
.xr-beam { position: absolute; left: 0; right: 0; top: -40px; height: 40px; background: linear-gradient(transparent, color-mix(in srgb, #22d3ee 35%, transparent), transparent); pointer-events: none; opacity: 0; }
.xr-page.is-scanning .xr-beam { opacity: 1; animation: xr-scan 2.6s linear infinite; }
@keyframes xr-scan { from { top: -40px; } to { top: 100%; } }
.xr-left { font-size: 13px; color: var(--text-3); }

.fls-compose { display: grid; gap: 12px; padding: 16px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--stroke); }
.fls-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.fls-f { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-m); background: var(--card-inset); border: 1.5px solid var(--stroke); transition: border-color .3s; }
.fls-f > div { display: grid; gap: 2px; min-width: 0; }
.fls-f b { font-family: ui-monospace, Menlo, monospace; font-size: 13px; word-break: break-all; }
.fls-f small { font-size: 12px; color: var(--text-3); line-height: 1.4; }
.fls-f.is-named { border-color: var(--good); }
.fls-role { justify-self: start; margin-top: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--good); background: var(--good-soft); }
.fls-ask { font-size: 15px; line-height: 1.6; }
.fls-labels { display: block; }
.fls-labels mark { display: block; margin-bottom: 3px; }
.fls-assign { display: grid; gap: 8px; padding: 16px; border-radius: var(--r-l); background: var(--card-inset); border: 1px solid var(--stroke); animation: fade-up-soft .4s var(--ease) both; }
.fls-row { display: grid; gap: 6px; padding: 10px 0; border-top: 1px solid var(--stroke); }
.fls-row code { font-size: 13px; font-weight: 700; }
.fls-row > div { display: flex; flex-wrap: wrap; gap: 6px; }
.fls-r { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 650; color: var(--text); background: var(--card); border: 1.5px solid var(--stroke-2); transition: all .2s; }
.fls-r:not(:disabled):hover { border-color: var(--accent); }
.fls-r:disabled { cursor: default; opacity: .45; }
.fls-r.is-good { opacity: 1; border-color: var(--good); color: var(--good); background: var(--good-soft); }
.fls-r.is-bad { animation: trp-shake .4s; border-color: var(--bad); }
.fls-out { display: grid; gap: 10px; }
.fls-out .so-fb { margin-top: 0; }

.rc-doc { display: grid; gap: 10px; }
.rc-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 5px; }
.rc-p { position: relative; display: grid; place-items: center; height: 44px; border-radius: 5px; background: var(--card); border: 1px solid var(--stroke-2); font-size: 11px; color: var(--text-3); transition: background .4s, border-color .4s, color .4s; }
.rc-p i { position: absolute; left: 6px; right: 6px; top: 7px; height: 12px; background: repeating-linear-gradient(var(--stroke-2) 0 2px, transparent 2px 5px); opacity: .7; }
.rc-p b { position: absolute; bottom: 3px; font-weight: 650; }
.rc-p small { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); padding: 1px 5px; border-radius: 4px; font-size: 9.5px; font-weight: 700; white-space: nowrap; background: var(--text); color: var(--bg); z-index: 1; }
.rc-p.is-seen { background: var(--good-soft); border-color: var(--good); color: var(--good); }
.rc-p.is-unseen { background: color-mix(in srgb, var(--bad) 14%, var(--card)); border-color: var(--bad); color: var(--bad); }
.rc-p.is-unseen i { opacity: .2; }
.rc-pages { padding-top: 8px; }
.rc-legend { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--text-3); }
.rc-legend span { width: 12px; height: 12px; border-radius: 3px; margin-left: 8px; }
.rc-legend span:first-child { margin-left: 0; }
.rc-l1 { background: var(--good-soft); border: 1px solid var(--good); } .rc-l2 { background: color-mix(in srgb, var(--bad) 14%, var(--card)); border: 1px solid var(--bad); } .rc-l3 { background: var(--card); border: 1px solid var(--stroke-2); }
.rc-checks { display: grid; gap: 8px; padding: 16px; border-radius: var(--r-l); background: var(--card-inset); border: 1px solid var(--stroke); }
.rc-checks .prb-k span { font-weight: 500; text-transform: none; letter-spacing: 0; }
.rc-a { color: var(--text); }
.rc .rg-out { font-size: 14.5px; }
.rc .rg-out p + p { margin-top: 6px; }

.trp-sheet { border-radius: var(--r-l); border: 1px solid var(--stroke); background: var(--card); overflow: hidden; }
.trp-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--stroke); font-size: 14px; background: color-mix(in srgb, #16a34a 8%, var(--card)); }
.trp-bar .xr-fic { background: color-mix(in srgb, #16a34a 18%, transparent); color: #16a34a; }
.trp-count { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--text-2); padding: 3px 10px; border-radius: 999px; background: var(--card-inset); }
.trp-scroll { overflow-x: auto; }
.trp-grid { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.trp-grid th, .trp-grid td { padding: 7px 10px; border: 1px solid var(--stroke); text-align: left; white-space: nowrap; }
.trp-grid thead th, .trp-grid tbody th { background: var(--card-inset); color: var(--text-3); font-size: 11.5px; font-weight: 650; text-align: center; }
.trp-grid tbody th { width: 30px; }
.trp-grid td { cursor: pointer; transition: background .2s, box-shadow .2s; }
.trp-grid td:hover, .trp-grid thead th:not(.trp-corner):hover, .trp-tab:hover { box-shadow: inset 0 0 0 2px var(--accent); }
.trp-grid thead th:not(.trp-corner) { cursor: pointer; }
.trp-grid td.is-head { font-weight: 750; background: color-mix(in srgb, var(--accent) 6%, var(--card)); }
.trp-grid td.is-title { font-weight: 800; text-align: center; font-size: 14px; }
.trp-grid td.is-num { text-align: right; }
.trp-grid td.is-total { font-weight: 750; border-top: 2px solid var(--text-3); }
.trp-grid td.is-err { color: var(--bad); font-weight: 700; }
.trp-hid { width: 8px; padding: 0 !important; background: repeating-linear-gradient(90deg, var(--stroke-2) 0 2px, transparent 2px 4px) !important; }
.trp-hid span { display: none; }
.trp-hid.is-found { width: auto; padding: 7px 10px !important; background: var(--bad) !important; color: #fff !important; }
.trp-hid.is-found span { display: inline; }
.trp-tabs { display: flex; gap: 2px; padding: 0 10px; border-top: 1px solid var(--stroke); background: var(--card-inset); overflow-x: auto; }
.trp-tab { padding: 7px 14px; font-size: 12.5px; color: var(--text-2); cursor: pointer; border-radius: 0 0 8px 8px; white-space: nowrap; }
.trp-tab.is-on { background: var(--card); color: #16a34a; font-weight: 700; box-shadow: inset 0 2px 0 #16a34a; }
.trp .is-found { background: color-mix(in srgb, var(--bad) 16%, var(--card)) !important; box-shadow: inset 0 0 0 2px var(--bad) !important; }
.trp .is-miss { animation: trp-shake .4s; }
@keyframes trp-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.trp-hint { font-size: 13.5px; color: var(--text-3); text-align: center; }
.trp-found { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.trp-found li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-m); background: var(--card); border: 1px solid var(--stroke); border-left: 3px solid var(--bad); }
.trp-found li > div { display: grid; gap: 4px; font-size: 13.5px; line-height: 1.55; }
.trp-found b { font-size: 14.5px; }
.trp-n { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--bad); color: #fff; font-size: 12.5px; font-weight: 800; }
.trp-fix { color: var(--text-2); }
.trp-fix span { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; color: var(--good); background: var(--good-soft); }
@media (max-width: 640px) { .xr-page { padding: 10px; } .xr-b { padding: 10px; } .xr-chart { height: 80px; } .rc-pages { grid-template-columns: repeat(8, 1fr); } }
@media (prefers-reduced-motion: reduce) { .xr-page.is-scanning .xr-beam { animation: none; opacity: 0; } }
.trp-grid td[data-trap="hidden"] { width: 8px; max-width: 8px; padding: 0; font-size: 0; color: transparent; background: repeating-linear-gradient(90deg, var(--stroke-2) 0 2px, transparent 2px 4px); }
.trp-grid td[data-trap="hidden"].is-found { width: auto; max-width: none; padding: 7px 10px; font-size: 13px; color: var(--bad); }

/* ===================================================================== v38 · Prog. 2 Module 7 : instructions et mémoire (stack, bench, memo) */
.stk { margin-top: 18px; display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
.stk-side, .stk-main { display: grid; gap: 10px; }
.stk-l { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-m); text-align: left; background: var(--card); border: 1.5px solid var(--stroke); transition: border-color .25s, transform .25s var(--spring); }
.stk-l:hover { transform: translateX(3px); border-color: var(--c); }
.stk-l > span:last-child { display: grid; gap: 2px; }
.stk-l b { font-size: 14px; } .stk-l small { font-size: 12px; color: var(--text-3); line-height: 1.35; }
.stk-sw { flex: none; position: relative; width: 36px; height: 20px; border-radius: 999px; background: var(--stroke-2); transition: background .25s; }
.stk-sw i { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left .25s var(--spring); }
.stk-l.is-on { border-color: var(--c); background: color-mix(in srgb, var(--c) 8%, var(--card)); }
.stk-l.is-on .stk-sw { background: var(--c); } .stk-l.is-on .stk-sw i { left: 18px; }
.stk-fb { padding: 12px 14px; border-radius: var(--r-m); background: var(--card-inset); font-size: 13.5px; line-height: 1.55; min-height: 60px; }
.stk-pile { display: grid; gap: 6px; padding: 12px; border-radius: var(--r-l); background: var(--card-inset); border: 1px dashed var(--stroke-2); }
.stk-b { display: grid; gap: 3px; padding: 10px 12px; border-radius: 10px; background: var(--card); border-left: 3px solid var(--c, var(--stroke-2)); font-size: 13.5px; line-height: 1.5; }
.stk-b > span { font-size: 10.5px; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; color: var(--c, var(--text-3)); }
.stk-msg { --c: var(--accent); border: 1.5px solid var(--accent); border-left-width: 3px; }
.stk-out p + p { margin-top: 6px; }
.stk .rg-out { font-size: 14.5px; }

.bch { margin-top: 18px; display: grid; gap: 14px; }
.bch-draft { padding: 14px 16px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--stroke); }
.bch-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.bch-head small { font-size: 12px; color: var(--text-3); }
.bch-draft ol { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.bch-l { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; text-align: left; font-size: 14px; line-height: 1.45; color: var(--text); background: transparent; border: 1px solid transparent; transition: background .2s, border-color .2s, opacity .2s; }
.bch-l:not(:disabled):hover { background: var(--card-inset); border-color: var(--stroke-2); }
.bch-n { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; font-size: 12px; font-weight: 750; background: var(--accent-soft); color: var(--accent); }
.bch-t { flex: 1; }
.bch-x { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--stroke-2); position: relative; }
.bch-x::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--good); }
.bch-l.is-off { opacity: .5; }
.bch-l.is-off .bch-t { text-decoration: line-through; }
.bch-l.is-off .bch-x::after { background: transparent; }
.bch-l.is-off .bch-n { background: var(--card-inset); color: var(--text-3); }
.bch-l:disabled { cursor: default; }
.bch-round { font-size: 13px; color: var(--text-2); }
.bch-round b.is-bad { color: var(--bad); } .bch-round b.is-lost { color: var(--warn); }
.bch-tests { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bch-tc { display: grid; gap: 8px; align-content: start; padding: 12px 14px; border-radius: var(--r-m); background: var(--card-inset); border: 1px solid var(--stroke); transition: opacity .25s; }
.bch-tc.is-stale .bch-res { opacity: .45; }
.bch-ask { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; font-weight: 650; line-height: 1.45; }
.bch-ask .rg-av { flex: none; font-size: 10px; padding: 2px 7px; }
.bch-res { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.bch-res li { display: flex; gap: 8px; align-items: flex-start; padding: 6px 9px; border-radius: 8px; font-size: 13px; line-height: 1.45; background: var(--card); }
.bch-res li.is-bad { background: color-mix(in srgb, var(--bad) 10%, var(--card)); }
.bch-res li.is-good { background: var(--good-soft); }
.bch-res li.is-lost { background: var(--warn-soft); }
.bch-ref { flex: none; font-size: 10.5px; font-weight: 800; padding: 1px 6px; border-radius: 5px; background: var(--card-inset); color: var(--text-2); }
.bch-end .so-fb { margin-top: 0; }

.mmo { margin-top: 18px; display: grid; gap: 14px; }
.mmo-book { display: grid; gap: 0; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--stroke); overflow: hidden; }
.mmo-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--stroke); font-size: 14px; background: var(--card-inset); }
.mmo-head .ic { width: 18px; height: 18px; color: var(--accent); }
.mmo-count { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.mmo-e { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--stroke); transition: background .3s; }
.mmo-e:last-child { border-bottom: 0; }
.mmo-txt { display: grid; gap: 2px; }
.mmo-txt p { font-size: 14.5px; line-height: 1.45; }
.mmo-txt small { font-size: 11.5px; color: var(--text-3); }
.mmo-txt s { color: var(--text-3); }
.mmo-txt ins { text-decoration: none; padding: 0 3px; border-radius: 3px; background: var(--good-soft); color: var(--good); font-weight: 650; }
.mmo-acts { display: flex; gap: 5px; flex-wrap: wrap; }
.mmo-o { padding: 5px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--text-2); background: var(--card-inset); border: 1.5px solid var(--stroke); transition: all .2s; }
.mmo-o:not(:disabled):hover { border-color: var(--accent); color: var(--text); }
.mmo-o:disabled { cursor: default; opacity: .5; }
.mmo-o.is-right { opacity: 1; border-color: var(--good); color: var(--good); background: var(--good-soft); }
.mmo-o.is-wrong { opacity: 1; border-color: var(--bad); color: var(--bad); text-decoration: line-through; }
.mmo-fb { grid-column: 1 / -1; padding: 8px 12px; border-radius: 10px; font-size: 13px; line-height: 1.5; }
.mmo-fb.ok { background: var(--good-soft); } .mmo-fb.ko { background: var(--warn-soft); }
.mmo-e.v-del .mmo-txt p { opacity: .6; }
.mmo-e.v-del .mmo-txt p:not(:has(s)) { text-decoration: line-through; text-decoration-color: var(--bad); }
@media (max-width: 760px) { .stk { grid-template-columns: minmax(0, 1fr); } .bch-tests { grid-template-columns: minmax(0, 1fr); } .mmo-e { grid-template-columns: minmax(0, 1fr); } }

/* ===================================================================== v39 · Certificat de programme */
@font-face { font-family: 'CG-Medium'; src: url(../vendor/fonts/CG-Medium.ttf) format('truetype'); font-display: block; }
@font-face { font-family: 'CG-Italic'; src: url(../vendor/fonts/CG-Italic.ttf) format('truetype'); font-display: block; }
@font-face { font-family: 'CG-SemiBold'; src: url(../vendor/fonts/CG-SemiBold.ttf) format('truetype'); font-display: block; }
@font-face { font-family: 'Inter-Medium'; src: url(../vendor/fonts/Inter-Medium.ttf) format('truetype'); font-display: block; }
@font-face { font-family: 'Inter-SemiBold'; src: url(../vendor/fonts/Inter-SemiBold.ttf) format('truetype'); font-display: block; }
.dip-modal { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 24px; overflow-y: auto; }
.dip-bg { position: fixed; inset: 0; background: radial-gradient(1200px 600px at 50% 20%, color-mix(in srgb, #3B82F6 22%, transparent), transparent 70%), rgba(3, 5, 12, .82); backdrop-filter: blur(14px); opacity: 0; transition: opacity .45s var(--ease); }
.dip-modal.open .dip-bg { opacity: 1; }
.dip-stage { position: relative; width: min(1040px, 100%, calc((100vh - 270px) * 1.4143)); min-width: min(100%, 560px); display: grid; gap: 18px; justify-items: center; opacity: 0; transform: translateY(26px); transition: opacity .5s var(--ease) .08s, transform .7s var(--spring) .08s; }
.dip-modal.open .dip-stage { opacity: 1; transform: none; }
.dip-x { position: absolute; top: -6px; right: 0; color: #fff; }
.dip-head { text-align: center; color: #F2F5FB; display: grid; gap: 4px; }
.dip-head .kicker { color: #93C5FD; }
.dip-head h2 { font-size: clamp(24px, 3.4vw, 34px); font-weight: 750; letter-spacing: -.02em; }
.dip-sub { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; color: #A3ADC2; font-variant-numeric: tabular-nums; }
.dip-paper { width: 100%; perspective: 1600px; }
.dip-tilt { position: relative; transform-style: preserve-3d; transition: transform .35s var(--ease); border-radius: 4px; overflow: hidden; box-shadow: 0 2px 0 rgba(255,255,255,.06) inset, 0 40px 90px -30px rgba(0,0,0,.75), 0 18px 40px -20px rgba(37,99,235,.45); animation: dip-rise 1.1s var(--spring) both .15s; }
.dip-tilt svg { display: block; width: 100%; height: auto; }
.dip-sheen { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 45%, transparent 60%); background-size: 260% 100%; mix-blend-mode: soft-light; animation: dip-sheen 2.4s var(--ease) .9s both; }
.dip-tilt:hover .dip-sheen { animation: none; background: radial-gradient(500px 300px at var(--sx, 50%) 30%, rgba(255,255,255,.35), transparent 70%); }
@keyframes dip-rise { from { opacity: 0; transform: translateY(40px) rotateX(18deg) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes dip-sheen { from { background-position: 120% 0; } to { background-position: -40% 0; } }
.dip-ctrl { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; justify-content: center; width: min(620px, 100%); }
.dip-name { flex: 1 1 280px; display: grid; gap: 6px; }
.dip-name span { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #A3ADC2; }
.dip-name input { height: 48px; padding: 0 16px; border-radius: 14px; font: 600 16px/1 inherit; font-family: inherit; color: #F2F5FB; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); outline: none; transition: border-color .2s, box-shadow .2s; }
.dip-name input:focus { border-color: #60A5FA; box-shadow: 0 0 0 4px rgba(96,165,250,.18); }
.dip-ctrl .btn { height: 48px; }
.dip-ctrl .btn.is-busy { opacity: .75; cursor: progress; }
.dip-note { max-width: 620px; text-align: center; font-size: 12.5px; line-height: 1.55; color: #8C96AC; }
.acc-cert { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--accent); background: var(--accent-soft); cursor: pointer; }
.acc-cert .ic { width: 13px; height: 13px; }
.acc-cert:hover { filter: brightness(1.1); }
.lxc-cert { margin-top: 12px; }
@media (max-width: 640px) { .dip-modal { padding: 56px 12px 20px; align-items: start; } .dip-ctrl .btn { flex: 1 1 100%; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .dip-tilt, .dip-sheen { animation: none; } .dip-stage { transition: none; } }
.cert-svg { font-kerning: none; font-feature-settings: "kern" 0; }

/* ===================================================================== v40 · Inscription (nom), compte (cadran + panneau), vérification */
.field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 420px) { .field-pair { grid-template-columns: minmax(0, 1fr); } }

/* Le cadran : jauge des modules validés, prénom, chevron */
.acct-btn, .acct-mini { position: relative; display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 12px 0 9px; border-radius: 999px; font-size: 14px; font-weight: 650; letter-spacing: -.01em; color: var(--text); }
.acct-btn { background: var(--card); border: 1px solid var(--stroke); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); isolation: isolate; transition: border-color .25s, box-shadow .3s var(--ease), opacity .12s; }
.acct-btn::before { content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1px; background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s var(--ease); }
.acct-btn:hover::before, .acct-btn:focus-visible::before, .acct-btn.is-active::before { opacity: 1; }
.acct-btn:hover { box-shadow: 0 8px 26px -14px color-mix(in srgb, var(--g2) 70%, transparent); }
.acct-btn.is-hidden { opacity: 0; }
.acct-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-caret { width: 16px; height: 16px; color: var(--text-3); transition: transform .45s var(--spring); }
.acct-gauge { flex: none; overflow: visible; }
.acct-gauge-tr { fill: none; stroke: var(--stroke-2); stroke-width: 2.4; }
.acct-gauge-v { fill: none; stroke-width: 2.6; stroke-linecap: round; transition: stroke-dasharray .8s var(--ease); }
.acct-gauge-core { r: 3px; transform-origin: center; transform-box: fill-box; animation: acct-pulse 3.2s var(--ease) infinite; }
@keyframes acct-pulse { 0%, 100% { opacity: .55; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.1); } }
.acct-btn:hover .acct-gauge-core { animation-duration: 1.4s; }

/* Le panneau : il naît du bouton (même coin, même forme) et s’y replie */
.acct { position: fixed; z-index: 95; width: 356px; max-width: calc(100vw - 24px); padding: 0 8px 8px; border-radius: 22px; background: var(--menu-bg); border: 1px solid var(--stroke-2); box-shadow: var(--shadow-lg);
  clip-path: inset(0 0 calc(100% - var(--bh, 44px)) calc(100% - var(--bw, 120px)) round 22px); transition: clip-path .55s cubic-bezier(.22, 1, .36, 1); }
.acct::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(420px 160px at 85% -10%, color-mix(in srgb, var(--g2) 16%, transparent), transparent 70%), radial-gradient(300px 140px at 0% 0%, color-mix(in srgb, var(--g1) 10%, transparent), transparent 70%); opacity: 0; transition: opacity .6s var(--ease) .1s; }
.acct.is-open { clip-path: inset(0 0 0 0 round 22px); }
.acct.is-open::before { opacity: 1; }
.acct.is-closing { transition-duration: .36s; transition-timing-function: cubic-bezier(.55, 0, .7, .2); }
.acct-bar { position: relative; display: flex; align-items: center; justify-content: space-between; height: calc(var(--bh, 44px) - 2px); margin: 0 -8px; padding-left: 18px; }
.acct-k { font-size: 11px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); opacity: 0; transition: opacity .3s var(--ease); }
.acct.is-open .acct-k { opacity: 1; transition-delay: .18s; }
.acct-mini { height: calc(var(--bh, 44px) - 2px); background: none; border: 0; cursor: pointer; }
.acct.is-open .acct-mini .acct-caret { transform: rotate(180deg); }
.acct-in { position: relative; opacity: 0; transform: translateY(-8px); transition: opacity .22s var(--ease), transform .22s var(--ease); }
.acct.is-open .acct-in { opacity: 1; transform: none; transition: opacity .45s var(--ease), transform .55s var(--spring); }
.acct.is-open .acct-in:nth-of-type(2) { transition-delay: .08s; } .acct.is-open .acct-in:nth-of-type(3) { transition-delay: .12s; }
.acct.is-open .acct-in:nth-of-type(4) { transition-delay: .16s; } .acct.is-open .acct-in:nth-of-type(5) { transition-delay: .2s; } .acct.is-open .acct-in:nth-of-type(6) { transition-delay: .24s; }
.acct-id { display: grid; gap: 1px; padding: 10px 10px 12px; }
.acct-id b { font-size: 19px; font-weight: 750; letter-spacing: -.02em; }
.acct-id span { font-size: 12.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 2px 8px; border-radius: 16px; background: var(--card-inset); border: 1px solid var(--stroke); }
.acct-stats > div { display: grid; gap: 3px; padding: 10px 12px; min-width: 0; }
.acct-stats > div + div { border-left: 1px solid var(--stroke); }
.acct-stats small { font-size: 10px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.acct-stats b { font-size: 15px; font-weight: 750; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-stats b i { font-style: normal; font-weight: 600; color: var(--text-3); font-size: 12.5px; }
.acct-card { display: flex; align-items: center; gap: 12px; margin: 0 2px 6px; padding: 10px 12px; border-radius: 16px; background: linear-gradient(120deg, color-mix(in srgb, var(--g1) 10%, transparent), color-mix(in srgb, var(--g3) 10%, transparent)); border: 1px solid color-mix(in srgb, var(--g2) 22%, transparent); transition: border-color .2s, transform .3s var(--spring); }
.acct-card:hover, .acct-card:focus-visible { border-color: color-mix(in srgb, var(--g2) 50%, transparent); transform: translateY(-1px); outline: none; }
.acct-card-em { width: 42px; height: 42px; display: grid; place-items: center; flex: none; }
.acct-card-ic { border-radius: 12px; background: var(--card-inset); color: var(--accent); }
.acct-card-txt { display: grid; flex: 1; min-width: 0; }
.acct-card-txt b { font-size: 14px; letter-spacing: -.01em; }
.acct-card-txt span { font-size: 12px; color: var(--text-3); }
.acct-card-ring .ring { width: 40px; height: 40px; }
.acct-card > .ic { width: 16px; height: 16px; color: var(--text-3); }
.acct-list { position: relative; display: grid; gap: 2px; padding: 4px 0; }
.acct-hl { position: absolute; left: 0; right: 0; top: 0; height: 0; border-radius: 14px; background: var(--card-inset); border: 1px solid var(--stroke); opacity: 0; pointer-events: none; transition: transform .38s var(--spring), height .3s var(--ease), opacity .2s; }
.acct-item { position: relative; z-index: 1; display: grid; grid-template-columns: 34px minmax(0, 1fr) 16px; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px; outline: none; }
.acct-ic { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: var(--accent-soft); color: var(--accent); transition: transform .35s var(--spring), background .3s; }
.acct-ic .ic { width: 18px; height: 18px; }
.acct-t { display: grid; min-width: 0; }
.acct-t b { font-size: 14px; font-weight: 650; letter-spacing: -.01em; color: var(--text); }
.acct-t small { font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-item > .ic { width: 16px; height: 16px; color: var(--text-3); opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .35s var(--spring); }
.acct-item:hover > .ic, .acct-item:focus-visible > .ic { opacity: 1; transform: none; }
.acct-item:hover .acct-ic, .acct-item:focus-visible .acct-ic { transform: scale(1.08) rotate(-4deg); background: var(--grad); color: #fff; }
.acct-foot { display: grid; gap: 4px; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--stroke); }
.acct-theme { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 4px 12px; font-size: 13.5px; color: var(--text-2); }
.acct-out { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; font-size: 14px; color: var(--text-2); transition: background .2s, color .2s; }
.acct-out .ic { width: 18px; height: 18px; color: var(--text-3); }
.acct-out:hover, .acct-out:focus-visible { color: var(--bad); background: var(--bad-soft); outline: none; }
.acct-out:hover .ic { color: var(--bad); }
@media (max-width: 640px) { .acct-name { max-width: 84px; } .acct-btn, .acct-mini { height: 40px; gap: 7px; padding: 0 10px 0 7px; } }
@media (prefers-reduced-motion: reduce) { .acct, .acct-in, .acct-hl { transition: none !important; } .acct-gauge-core { animation: none; } }

/* Vérification d’un certificat */
.vf-top { display: flex; align-items: center; justify-content: space-between; max-width: 1180px; margin: 0 auto; padding: 22px 24px; }
.vf-main { padding-top: 10px; }
.vf { width: min(820px, 100%); margin: 0 auto; display: grid; gap: 22px; padding-bottom: 60px; }
.vf-hero { text-align: center; display: grid; justify-items: center; gap: 6px; }
.vf-badge { width: 64px; height: 64px; display: grid; place-items: center; margin-bottom: 8px; border-radius: 20px; background: var(--grad); color: #fff; box-shadow: 0 18px 40px -16px color-mix(in srgb, var(--g2) 80%, transparent); animation: vf-float 5s var(--ease) infinite; }
.vf-badge .ic { width: 32px; height: 32px; }
@keyframes vf-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.vf-hero h1 { font-size: clamp(30px, 4.6vw, 44px); font-weight: 760; letter-spacing: -.03em; }
.vf-hero .sub { max-width: 560px; }
.vf-form { display: flex; gap: 10px; width: min(560px, 100%); margin: 0 auto; }
.vf-field { flex: 1; display: flex; align-items: center; height: 54px; border-radius: 16px; background: var(--card); border: 1px solid var(--stroke-2); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.vf-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.vf-pre { align-self: stretch; display: grid; place-items: center; padding: 0 14px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 15px; font-weight: 700; letter-spacing: .08em; color: var(--text-3); background: var(--card-inset); border-right: 1px solid var(--stroke); }
.vf-field input { flex: 1; min-width: 0; height: 100%; padding: 0 14px; border: 0; outline: none; background: none; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 17px; font-weight: 600; letter-spacing: .12em; color: var(--text); }
.vf-field input::placeholder { color: var(--text-3); opacity: .55; }
.vf-form .btn { height: 54px; padding: 0 22px; }
.vf-out:empty { display: none; }
.vf-scan { position: relative; overflow: hidden; display: grid; justify-items: center; gap: 8px; padding: 28px; border-radius: 22px; background: var(--card); border: 1px solid var(--stroke); }
.vf-scan p { font-size: 14px; color: var(--text-2); }
.vf-scan code { font-size: 13px; letter-spacing: .1em; color: var(--text-3); }
.vf-scan-bar { position: absolute; inset: 0 auto 0 -30%; width: 30%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--g2) 22%, transparent), transparent); animation: vf-sweep 1s var(--ease) infinite; }
@keyframes vf-sweep { to { left: 100%; } }
.vf-card { display: grid; gap: 18px; padding: 24px; border-radius: 24px; background: var(--card); border: 1px solid var(--stroke); animation: fade-up-soft .5s var(--ease) both; }
.vf-card.is-ok { border-color: color-mix(in srgb, var(--good) 40%, var(--stroke)); box-shadow: 0 30px 70px -40px color-mix(in srgb, var(--good) 60%, transparent); }
.vf-card.is-ko { grid-template-columns: auto minmax(0, 1fr); align-items: start; border-color: color-mix(in srgb, var(--warn) 45%, var(--stroke)); }
.vf-card.is-ko h2 { font-size: 19px; margin-bottom: 4px; }
.vf-card.is-ko p { font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.vf-mark { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--warn-soft); color: var(--warn); }
.vf-ok { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; }
.vf-check { width: 56px; height: 56px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.vf-check circle { stroke: var(--good); stroke-width: 2; stroke-dasharray: 152; stroke-dashoffset: 152; animation: vf-draw .7s var(--ease) forwards; }
.vf-check path { stroke: var(--good); stroke-width: 3; stroke-dasharray: 40; stroke-dashoffset: 40; animation: vf-draw .5s var(--ease) .55s forwards; }
@keyframes vf-draw { to { stroke-dashoffset: 0; } }
.vf-ok .kicker { color: var(--good); }
.vf-ok h2 { font-size: clamp(22px, 3vw, 28px); font-weight: 750; letter-spacing: -.02em; }
.vf-ok-sub { font-size: 14.5px; color: var(--text-2); }
.vf-medal .medal { display: block; animation: vf-pop .7s var(--spring) .4s both; }
@keyframes vf-pop { from { opacity: 0; transform: scale(.6) rotate(-12deg); } }
.vf-dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; border-radius: 16px; overflow: hidden; background: var(--stroke); border: 1px solid var(--stroke); }
.vf-dl > div { display: grid; gap: 4px; padding: 12px 14px; background: var(--card-inset); }
.vf-dl dt { font-size: 10.5px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.vf-dl dd { margin: 0; font-size: 15px; font-weight: 600; }
.vf-dl code { font-size: 13px; letter-spacing: .06em; }
.vf-prev { border-radius: 6px; overflow: hidden; box-shadow: 0 24px 60px -30px rgba(0, 0, 0, .55); }
.vf-prev svg { display: block; width: 100%; height: auto; }
.vf-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.vf-facts li { display: flex; gap: 10px; align-items: flex-start; padding: 14px; border-radius: 16px; background: var(--card); border: 1px solid var(--stroke); font-size: 13px; line-height: 1.5; color: var(--text-2); }
.vf-facts .ic { flex: none; width: 18px; height: 18px; color: var(--accent); margin-top: 1px; }
@media (max-width: 640px) { .vf-form { flex-direction: column; } .vf-field { flex: none; } .vf-dl, .vf-facts { grid-template-columns: minmax(0, 1fr); } .vf-ok { grid-template-columns: auto minmax(0, 1fr); } .vf-medal { display: none; } .vf-top { padding: 16px; } }
.nowrap { white-space: nowrap; }

/* ===================================================================== v41 · Comptes d’entreprise : administration, invitation, consentement */
.acct-card-ring .ring-num { font-size: 10.5px; font-weight: 700; letter-spacing: -.02em; }
.acct-role { justify-self: start; margin-top: 6px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 650; color: var(--accent); background: var(--accent-soft); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-role.is-super { color: #fff; background: var(--grad); }
.acct-item.is-admin .acct-ic { background: var(--grad); color: #fff; }
button.acct-item { width: 100%; text-align: left; }

.adm { display: grid; gap: 22px; padding-bottom: 60px; }
.adm-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.adm-hero h1 { font-size: clamp(30px, 4.2vw, 46px); font-weight: 760; letter-spacing: -.03em; line-height: 1.05; }
.adm-who { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; font-size: 14px; color: var(--text-2); }
.adm-role { padding: 4px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--accent); background: var(--accent-soft); }
.adm-role.is-super { color: #fff; background: var(--grad); }
.adm-tabs { position: relative; display: inline-flex; padding: 4px; border-radius: 999px; background: var(--card); border: 1px solid var(--stroke); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.adm-tabs a { position: relative; z-index: 1; padding: 9px 18px; border-radius: 999px; font-size: 14px; font-weight: 650; color: var(--text-2); transition: color .25s; }
.adm-tabs a.is-on { color: #fff; }
.adm-tabs-ind { position: absolute; left: 0; top: 4px; bottom: 4px; border-radius: 999px; background: var(--grad); box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--g2) 80%, transparent); transition: transform .45s var(--spring), width .45s var(--spring); }
.adm-body { display: grid; gap: 22px; }
.adm-loading { display: flex; gap: 6px; justify-content: center; padding: 60px 0; }
.adm-loading span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); animation: adm-dot 1s var(--ease) infinite; }
.adm-loading span:nth-child(2) { animation-delay: .15s; } .adm-loading span:nth-child(3) { animation-delay: .3s; }
@keyframes adm-dot { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
.adm-card { display: grid; gap: 14px; align-content: start; padding: 20px; border-radius: 22px; background: var(--card); border: 1px solid var(--stroke); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); animation: fade-up-soft .45s var(--ease) both; }
.adm-card-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.adm-card-head h2, .adm-card-head h3 { font-size: 17px; font-weight: 720; letter-spacing: -.015em; }
.adm-count { padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--text-2); background: var(--card-inset); }
.adm-grid { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 18px; align-items: start; }
.adm-col { display: grid; gap: 18px; }
.adm-note { font-size: 13px; line-height: 1.55; color: var(--text-3); }
.adm-empty { padding: 26px; text-align: center; font-size: 14px; color: var(--text-3); border: 1px dashed var(--stroke-2); border-radius: 18px; }
.adm-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.adm-sec-head h2 { font-size: 22px; font-weight: 740; letter-spacing: -.02em; }

/* Jauges de licences */
.adm-lics, .adm-ten-m { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.adm-lics .adm-meter { padding: 16px 18px; border-radius: 20px; background: var(--card); border: 1px solid var(--stroke); }
.adm-meter { display: grid; gap: 8px; }
.adm-meter-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 650; color: var(--text-2); }
.adm-meter-top b { font-size: 22px; font-weight: 760; letter-spacing: -.02em; color: var(--text); }
.adm-meter-top b i { font-style: normal; font-size: 14px; font-weight: 600; color: var(--text-3); }
.adm-meter-bar { display: flex; height: 8px; border-radius: 99px; background: var(--card-inset); overflow: hidden; box-shadow: inset 0 0 0 1px var(--stroke); }
.adm-meter-bar i { width: var(--w); height: 100%; transition: width .8s var(--ease); }
.adm-meter-bar .is-used { background: var(--grad); }
.adm-meter-bar .is-pend { background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--g2) 45%, transparent) 0 4px, color-mix(in srgb, var(--g2) 20%, transparent) 4px 8px); }
.adm-meter-sub { font-size: 12px; color: var(--text-3); }
.adm-lic .adm-meter-top b { font-size: 34px; }
.adm-lic .adm-meter-bar { height: 12px; }

/* Invitations */
.adm-invite { display: grid; gap: 12px; }
.adm-invite-head { display: grid; gap: 3px; }
.adm-invite-head b { font-size: 16px; font-weight: 720; }
.adm-invite-head small { font-size: 13px; line-height: 1.5; color: var(--text-3); }
.adm-chips-in { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 52px; padding: 8px 10px; border-radius: 16px; background: var(--card-inset); border: 1px solid var(--stroke-2); cursor: text; transition: border-color .2s, box-shadow .2s; }
.adm-chips-in:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.adm-chips { display: contents; }
.adm-chips-in input { flex: 1 1 200px; min-width: 120px; height: 32px; border: 0; outline: none; background: none; font: inherit; font-size: 14px; color: var(--text); }
.adm-chip-e { display: inline-flex; align-items: center; gap: 4px; padding: 4px 4px 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--card); border: 1px solid var(--stroke-2); animation: rcp-deal .3s var(--spring) both; }
.adm-chip-e.is-bad { color: var(--bad); border-color: var(--bad); background: var(--bad-soft); }
.adm-chip-e button { width: 20px; height: 20px; border-radius: 50%; color: var(--text-3); font-size: 15px; line-height: 1; }
.adm-chip-e button:hover { background: var(--card-inset); color: var(--text); }
.adm-invite-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.adm-invite-msg { font-size: 13px; color: var(--text-3); }
.adm-invite-msg.is-warn { color: var(--warn); }
.adm-invite .btn.is-busy { opacity: .7; cursor: progress; }
.adm-invite-res { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.adm-invite-res:empty { display: none; }
.adm-ok, .adm-warn, .adm-err { display: flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; padding: 9px 12px; border-radius: 12px; font-size: 13px; line-height: 1.45; }
.adm-ok { background: var(--good-soft); } .adm-ok .ic { color: var(--good); }
.adm-warn { background: var(--warn-soft); } .adm-warn .ic { color: var(--warn); }
.adm-err { background: var(--bad-soft); } .adm-err .ic { color: var(--bad); }
.adm-ok .ic, .adm-warn .ic, .adm-err .ic { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.adm-full { display: grid; gap: 4px; padding: 6px 0; } .adm-full b { font-size: 15px; } .adm-full p { font-size: 13px; line-height: 1.5; color: var(--text-3); }

/* Listes de comptes */
.adm-search { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border-radius: 12px; background: var(--card-inset); border: 1px solid var(--stroke); }
.adm-search .ic { width: 16px; height: 16px; color: var(--text-3); }
.adm-search input { flex: 1; border: 0; outline: none; background: none; font: inherit; font-size: 14px; color: var(--text); }
.adm-people { display: grid; margin: 0; padding: 0; list-style: none; }
.adm-p { display: grid; grid-template-columns: 38px minmax(0, 1.4fr) auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 6px; border-bottom: 1px solid var(--stroke); }
.adm-p:last-child { border-bottom: 0; }
.adm-av { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; font-size: 13px; font-weight: 750; color: #fff; background: var(--grad); }
.adm-av.is-inv { color: var(--text-3); background: var(--card-inset); border: 1px dashed var(--stroke-2); }
.adm-av .ic { width: 17px; height: 17px; }
.adm-av.is-sm { width: 26px; height: 26px; border-radius: 8px; font-size: 10.5px; }
.adm-p-id { display: grid; min-width: 0; }
.adm-p-id b { font-size: 14px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-p-id small { font-size: 12.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-chip { justify-self: start; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--text-2); background: var(--card-inset); white-space: nowrap; }
.adm-chip.is-pend { color: var(--warn); background: var(--warn-soft); }
.adm-chip.is-cle { color: var(--accent); background: var(--accent-soft); }
.adm-chip.is-cae { color: #fff; background: var(--grad); }
.adm-p-d { font-size: 12.5px; color: var(--text-3); }
.adm-share { display: inline-flex; align-items: center; gap: 6px; } .adm-share::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--stroke-2); }
.adm-share.is-on::before { background: var(--good); }
.adm-p-act { display: flex; gap: 6px; justify-content: flex-end; }
.adm-p-since { font-size: 12px; color: var(--text-3); white-space: nowrap; }
.adm-mini { padding: 6px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 650; color: var(--text-2); background: var(--card-inset); border: 1px solid var(--stroke); transition: all .2s; }
.adm-mini:hover { color: var(--text); border-color: var(--stroke-2); }
.adm-mini.is-danger:hover, .adm-mini.is-confirm { color: var(--bad); border-color: var(--bad); background: var(--bad-soft); }
.adm-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-card-head .adm-filter { margin-left: auto; }
.adm-filter button { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 650; color: var(--text-2); background: var(--card-inset); border: 1px solid var(--stroke); transition: all .2s; }
.adm-filter button:hover { color: var(--text); }
.adm-filter button.is-on { color: #fff; background: var(--grad); border-color: transparent; }
.adm-filter.is-sub button.is-on { color: var(--accent); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }

/* Services (administrateur d’entreprise) */
.adm-svcs, .adm-tens { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.adm-svc, .adm-ten { display: grid; gap: 14px; align-content: start; padding: 18px; border-radius: 22px; background: var(--card); border: 1px solid var(--stroke); transition: border-color .25s, transform .35s var(--spring), box-shadow .3s; animation: fade-up-soft .45s var(--ease) both; }
.adm-svc:hover, .adm-ten:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--stroke)); transform: translateY(-2px); box-shadow: var(--shadow-md, 0 18px 40px -26px rgba(0,0,0,.35)); }
.adm-svc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.adm-svc-top h3 { font-size: 18px; font-weight: 740; letter-spacing: -.02em; }
.adm-svc-lead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; font-weight: 600; }
.adm-svc-lead small { font-weight: 500; color: var(--text-3); }
.adm-svc-act .btn { width: 100%; justify-content: center; }
.adm-ten-top { display: flex; align-items: center; gap: 12px; }
.adm-ten-top h3 { font-size: 18px; font-weight: 740; letter-spacing: -.02em; }
.adm-ten-top small { font-size: 12.5px; color: var(--text-3); }
.adm-ten-mark { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; font-size: 15px; font-weight: 800; color: #fff; background: var(--grad); }
.adm-ten-adm { font-size: 13px; line-height: 1.5; color: var(--text-2); }
.adm-ten-m { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px; border-radius: 16px; background: var(--card-inset); }
.adm-ten-m .adm-meter-top b { font-size: 16px; }
.adm-ten-m .adm-meter-sub { display: none; }
.adm-ten-act { display: flex; gap: 6px; flex-wrap: wrap; }

/* Formulaires en feuille */
.adm-form { display: grid; gap: 16px; }
.adm-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.adm-step { display: grid; gap: 7px; }
.adm-step > span:first-child { font-size: 12.5px; font-weight: 650; color: var(--text-2); line-height: 1.35; }
.adm-step-c { display: flex; align-items: center; height: 46px; border-radius: 14px; background: var(--card-inset); border: 1px solid var(--stroke-2); overflow: hidden; }
.adm-step-c button { width: 40px; height: 100%; font-size: 18px; font-weight: 600; color: var(--text-2); transition: background .2s; }
.adm-step-c button:hover { background: var(--card); color: var(--text); }
.adm-step-c input { flex: 1; min-width: 0; height: 100%; border: 0; outline: none; background: none; text-align: center; font: 700 16px var(--font); font-variant-numeric: tabular-nums; color: var(--text); -moz-appearance: textfield; }
.adm-step-c input::-webkit-inner-spin-button { -webkit-appearance: none; }
.adm-sheet .sheet-body { display: grid; gap: 14px; align-content: start; }

/* Statistiques */
.adm-stats { display: grid; gap: 28px; }
.adm-st-bar { display: grid; gap: 10px; }
.adm-anon { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 16px; font-size: 13px; line-height: 1.5; color: var(--text-2); background: var(--accent-soft); }
.adm-anon .ic { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--accent); }
.adm-st-sec { display: grid; gap: 14px; }
.adm-st-head h2 { font-size: 24px; font-weight: 750; letter-spacing: -.02em; }
.adm-st-sub { margin-top: 4px; font-size: 14px; color: var(--text-2); }
.adm-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.adm-kpi { display: grid; gap: 4px; align-content: start; padding: 16px 18px; border-radius: 20px; background: var(--card); border: 1px solid var(--stroke); animation: fade-up-soft .45s var(--ease) both; }
.adm-kpi small { font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.adm-kpi b { font-size: 30px; font-weight: 760; letter-spacing: -.03em; }
.adm-kpi span { font-size: 12.5px; color: var(--text-3); }
.adm-prog { display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid var(--stroke); }
.adm-prog:first-of-type { border-top: 0; padding-top: 0; }
.adm-prog-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.adm-prog-h b { font-size: 15px; } .adm-prog-h small { font-size: 12.5px; color: var(--text-3); }
.adm-stack { display: flex; height: 14px; border-radius: 99px; overflow: hidden; background: var(--card-inset); }
.adm-stack i { width: var(--w); transition: width .9s var(--ease); }
.s-cert { background: var(--grad); } .s-done { background: color-mix(in srgb, var(--g2) 55%, var(--card)); } .s-go { background: color-mix(in srgb, var(--g1) 30%, var(--card)); } .s-none { background: transparent; }
.adm-stack-l { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--text-2); }
.adm-stack-l span { display: inline-flex; align-items: center; gap: 6px; }
.adm-stack-l i { width: 10px; height: 10px; border-radius: 3px; } .adm-stack-l .s-none { background: var(--card-inset); border: 1px solid var(--stroke-2); }
.adm-hidden { display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; font-size: 13px; color: var(--text-3); background: var(--card-inset); }
.adm-hidden .ic { width: 15px; height: 15px; }
.adm-st-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.adm-score-in { display: flex; align-items: center; gap: 18px; }
.adm-score-in p { font-size: 14px; color: var(--text-2); }
.adm-score .ring-num { font-size: 30px; }
.adm-levels { display: grid; gap: 9px; }
.adm-lv { display: grid; grid-template-columns: 120px minmax(0, 1fr) 46px; align-items: center; gap: 10px; font-size: 13.5px; }
.adm-lv span { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-lv i { height: 10px; border-radius: 99px; background: var(--card-inset); overflow: hidden; }
.adm-lv i b { display: block; width: var(--w); height: 100%; border-radius: inherit; background: var(--grad); transition: width .9s var(--ease); }
.adm-lv i b.is-ax { background: linear-gradient(90deg, var(--g1), var(--g2)); }
.adm-lv em { font-style: normal; font-weight: 700; text-align: right; }
.adm-quiz { display: grid; gap: 12px; }
.adm-quiz > div:first-child b { font-size: 34px; font-weight: 760; letter-spacing: -.03em; }
.adm-quiz > div:first-child small { display: block; font-size: 13px; color: var(--text-3); }
.adm-tiers { display: flex; gap: 8px; flex-wrap: wrap; }
.adm-tier { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 12px; border-radius: 14px; font-size: 13px; font-weight: 650; }
.adm-tier b { font-size: 18px; }
.adm-tier.is-or { background: color-mix(in srgb, #E6B33E 18%, transparent); color: color-mix(in srgb, #946311 80%, var(--text)); }
.adm-tier.is-argent { background: color-mix(in srgb, #C3CCD8 26%, transparent); }
.adm-tier.is-bronze { background: color-mix(in srgb, #D08A57 18%, transparent); color: color-mix(in srgb, #7A4122 80%, var(--text)); }
.adm-quiz-n { font-size: 12px; color: var(--text-3); }
.adm-locked { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.adm-locked-ic { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--card-inset); color: var(--text-3); }
.adm-locked b { font-size: 15px; } .adm-locked p { margin-top: 4px; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }

/* Invitation (page publique) */
.inv-main { display: grid; place-items: start center; padding: 10px 16px 60px; }
.inv-card { width: min(620px, 100%); display: grid; gap: 22px; padding: 30px; border-radius: 28px; background: var(--card); border: 1px solid var(--stroke); box-shadow: var(--shadow-lg); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); animation: fade-up-soft .5s var(--ease) both; }
.inv-card h1 { font-size: clamp(24px, 3.4vw, 32px); font-weight: 760; letter-spacing: -.025em; line-height: 1.15; }
.inv-head { display: grid; gap: 8px; }
.inv-badge { width: 54px; height: 54px; display: grid; place-items: center; margin-bottom: 4px; border-radius: 18px; background: var(--grad); color: #fff; box-shadow: 0 16px 34px -16px color-mix(in srgb, var(--g2) 80%, transparent); }
.inv-badge.is-ko { background: var(--warn-soft); color: var(--warn); box-shadow: none; }
.inv-badge .ic { width: 26px; height: 26px; }
.inv-form { display: grid; gap: 14px; }
.inv-form input[readonly] { color: var(--text-3); }

/* Consentement */
.cst { display: grid; gap: 12px; }
.cst-intro { font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.cst-box { display: grid; gap: 10px; padding: 16px; border-radius: 18px; background: var(--card-inset); border: 1px solid var(--stroke); }
.cst-box.is-must { border-color: color-mix(in srgb, var(--accent) 30%, var(--stroke)); }
.cst-h { display: flex; align-items: center; gap: 12px; }
.cst-h > div { flex: 1; display: grid; }
.cst-h b { font-size: 14.5px; } .cst-h small { font-size: 12.5px; color: var(--text-3); }
.cst-ic { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 11px; color: var(--accent); background: var(--accent-soft); }
.cst-ic.is-opt { color: var(--g3); background: color-mix(in srgb, var(--g3) 14%, transparent); }
.cst-ic .ic { width: 17px; height: 17px; }
.cst-box ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cst-box li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; }
.cst-box li .ic { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--text-3); }
.cst-check { display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-radius: 14px; background: var(--card); border: 1px solid var(--stroke-2); font-size: 13.5px; font-weight: 600; line-height: 1.45; cursor: pointer; }
.cst-check input { position: absolute; opacity: 0; pointer-events: none; }
.cst-box-ui { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 7px; border: 1.5px solid var(--stroke-2); background: var(--card-inset); color: transparent; transition: all .2s var(--spring); }
.cst-box-ui .ic { width: 14px; height: 14px; }
.cst-check input:checked + .cst-box-ui { background: var(--grad); border-color: transparent; color: #fff; transform: scale(1.06); }
.cst-check input:focus-visible + .cst-box-ui { box-shadow: 0 0 0 4px var(--accent-soft); }
.cst-done { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--good); }
.cst-done .ic { width: 16px; height: 16px; }
.cst-sw { position: relative; flex: none; cursor: pointer; }
.cst-sw input { position: absolute; opacity: 0; }
.cst-sw-ui { display: block; width: 46px; height: 26px; border-radius: 999px; background: var(--stroke-2); position: relative; transition: background .25s; }
.cst-sw-ui::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); transition: left .35s var(--spring); }
.cst-sw input:checked + .cst-sw-ui { background: var(--grad); }
.cst-sw input:checked + .cst-sw-ui::after { left: 23px; }
.cst-sw input:focus-visible + .cst-sw-ui { box-shadow: 0 0 0 4px var(--accent-soft); }
.cst-state { font-size: 12.5px; color: var(--text-3); }

@media (max-width: 900px) { .adm-grid, .adm-st-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .adm-lics, .adm-steps { grid-template-columns: minmax(0, 1fr); }
  .adm-p { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .adm-p-d, .adm-p-since { display: none; }
  .adm-p .adm-p-act { grid-column: 2 / -1; justify-content: flex-start; }
  .adm-p .adm-p-act:empty { display: none; }
  .adm-tabs { width: 100%; } .adm-tabs a { flex: 1; text-align: center; }
  .adm-lv { grid-template-columns: 96px minmax(0, 1fr) 42px; }
  .inv-card { padding: 22px; }
}

/* ===================================================================== v42 · Administration : signatures, plan des licences, cartes d’entreprise */
.hc-core b { letter-spacing: .02em; margin-right: 0; }
.adm-kpi small { text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 650; }

/* Monogramme teinté : la signature de chaque entreprise ou service */
.adm-mono { --h: 220; position: relative; flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; overflow: hidden; isolation: isolate;
  background: linear-gradient(140deg, hsl(var(--h) 85% 58%), hsl(calc(var(--h) + 42) 75% 52%)); box-shadow: 0 10px 24px -14px hsl(var(--h) 80% 45%); }
.adm-mono::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: .28;
  background: radial-gradient(circle at 1px 1px, #fff 1px, transparent 1.4px) 0 0 / 7px 7px; mask: linear-gradient(160deg, #000, transparent 75%); -webkit-mask: linear-gradient(160deg, #000, transparent 75%); }
.adm-mono b { font-size: 15px; font-weight: 800; letter-spacing: -.02em; color: #fff; }
.adm-mono.is-lg { width: 56px; height: 56px; border-radius: 18px; } .adm-mono.is-lg b { font-size: 19px; }

/* Plan des licences : une alvéole par licence */
.adm-seats { display: grid; gap: 8px; min-width: 0; }
.adm-seats-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 13px; font-weight: 650; color: var(--text-2); }
.adm-seats-h b { font-size: 17px; font-weight: 760; letter-spacing: -.02em; color: var(--text); }
.adm-seats-h b em { font-style: normal; font-weight: 700; color: var(--accent); font-size: 14px; }
.adm-seats-h b i { font-style: normal; font-weight: 600; font-size: 13px; color: var(--text-3); }
.adm-seats-g { display: flex; flex-wrap: wrap; gap: 3px; }
.adm-seats-g i, .adm-legend i { width: 12px; height: 13.6px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--stroke-2); }
.adm-seats-g i { animation: adm-seat .5s var(--spring) both; animation-delay: calc(var(--i) * 12ms); }
@keyframes adm-seat { from { opacity: 0; transform: scale(.4); } }
.adm-seats-g i.is-on, .adm-legend i.is-on { background: linear-gradient(140deg, var(--g1), var(--g2) 55%, var(--g3)); }
.adm-seats-g i.is-pend, .adm-legend i.is-pend { background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--g2) 70%, transparent) 0 2px, color-mix(in srgb, var(--g2) 18%, transparent) 2px 4px); }
.adm-seats-0, .adm-seats-n { font-size: 12px; color: var(--text-3); }
.adm-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--text-3); }
.adm-legend span { display: inline-flex; align-items: center; gap: 6px; }
.adm-legend i { width: 10px; height: 11.3px; }
.adm-lic .adm-seats-h b { font-size: 30px; }
.adm-lic .adm-seats-g i { width: 16px; height: 18.1px; }

/* Licences de l’entreprise (administrateur) */
.adm-plan { display: grid; gap: 18px; padding: 22px 24px; border-radius: 24px; background: var(--card); border: 1px solid var(--stroke); }
.adm-plan-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.adm-plan-h h2 { font-size: 19px; font-weight: 740; letter-spacing: -.02em; }
.adm-plan-g { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 26px; }
.adm-plan-g .adm-seats + .adm-seats { padding-left: 26px; border-left: 1px solid var(--stroke); }

/* Cartes de service */
.adm-svc { --h: 220; position: relative; overflow: hidden; gap: 16px; }
.adm-svc::before, .adm-ten::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 120px; pointer-events: none; background: radial-gradient(260px 120px at 0% 0%, hsl(var(--h) 85% 58% / .14), transparent 70%); }
.adm-svc-top { position: relative; display: flex; align-items: center; gap: 12px; }
.adm-svc-id { flex: 1; min-width: 0; }
.adm-svc-id h3 { font-size: 17px; font-weight: 740; letter-spacing: -.02em; }
.adm-svc-id p { font-size: 12.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-svc-id b { font-weight: 650; color: var(--text-2); }
.adm-svc-act { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 14px; border-top: 1px solid var(--stroke); }
.adm-svc-act .btn { width: auto; }
.adm-svc-left { font-size: 12.5px; color: var(--text-3); }

/* Vue d’ensemble (super-administrateur) */
.adm-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 24px; background: var(--card); border: 1px solid var(--stroke); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); overflow: hidden; }
.adm-sum-i { display: flex; align-items: flex-start; gap: 14px; padding: 20px 22px; }
.adm-sum-i + .adm-sum-i { border-left: 1px solid var(--stroke); }
.adm-sum-ic { flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: var(--accent); background: var(--accent-soft); }
.adm-sum-ic .ic { width: 19px; height: 19px; }
.adm-sum-i > div { display: grid; gap: 1px; }
.adm-sum-i b { font-size: 30px; font-weight: 780; letter-spacing: -.035em; line-height: 1.05; }
.adm-sum-i span { font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.adm-sum-i small { margin-top: 3px; font-size: 12px; color: var(--text-3); }

/* Cartes d’entreprise */
.adm-tens { grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 16px; }
.adm-ten { --h: 220; position: relative; overflow: hidden; gap: 18px; padding: 22px; border-radius: 26px; }
.adm-ten::before { height: 160px; background: radial-gradient(380px 160px at 0% 0%, hsl(var(--h) 85% 58% / .18), transparent 70%), radial-gradient(260px 120px at 100% 0%, hsl(calc(var(--h) + 42) 75% 55% / .1), transparent 70%); }
.adm-ten > * { position: relative; }
.adm-ten-top { display: flex; align-items: center; gap: 14px; }
.adm-ten-id { flex: 1; min-width: 0; }
.adm-ten-id h3 { font-size: 21px; font-weight: 780; letter-spacing: -.025em; line-height: 1.15; }
.adm-ten-id p { font-size: 12.5px; color: var(--text-3); }
.adm-state { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--card-inset); color: var(--text-2); }
.adm-state::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.adm-state.is-ok { color: var(--good); background: var(--good-soft); }
.adm-state.is-wait { color: var(--accent); background: var(--accent-soft); }
.adm-state.is-todo { color: var(--warn); background: var(--warn-soft); }
.adm-ten-facts { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); border-radius: 18px; background: var(--card-inset); border: 1px solid var(--stroke); }
.adm-ten-facts > div { display: grid; gap: 2px; padding: 11px 13px; min-width: 0; }
.adm-ten-facts > div + div { border-left: 1px solid var(--stroke); }
.adm-ten-facts small { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-ten-facts b { font-size: 14.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-ten-facts b i { font-style: normal; font-weight: 600; color: var(--text-3); font-size: 12.5px; }
.adm-ten-seats { display: grid; gap: 16px; }
.adm-ten-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.adm-ten-act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--stroke); }
.adm-ten-stats { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; color: var(--accent); }
.adm-ten-stats .ic { width: 15px; height: 15px; }
.adm-ten-stats:hover { text-decoration: underline; }
.adm-ten-new { display: grid; place-items: center; align-content: center; gap: 8px; min-height: 260px; padding: 24px; border-radius: 26px; border: 1.5px dashed var(--stroke-2); color: var(--text-2); text-align: center; transition: border-color .25s, background .25s, color .25s; }
.adm-ten-new:hover, .adm-ten-new:focus-visible { border-color: var(--accent); background: var(--accent-soft); color: var(--text); outline: none; }
.adm-ten-new b { font-size: 16px; } .adm-ten-new small { max-width: 240px; font-size: 13px; color: var(--text-3); line-height: 1.45; }
.adm-ten-plus { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 16px; font-size: 26px; font-weight: 500; color: #fff; background: var(--grad); transition: transform .35s var(--spring); }
.adm-ten-new:hover .adm-ten-plus { transform: rotate(90deg); }

/* Fiche d’une entreprise */
.adm-sheet-wide .sheet-panel { width: min(680px, 100%); }
.adm-fiche-h { --h: 220; display: flex; align-items: center; gap: 14px; }
.adm-fiche-h h3 { font-size: 22px; font-weight: 780; letter-spacing: -.025em; } .adm-fiche-h p { font-size: 13px; color: var(--text-3); }
.adm-fiche-k { margin-top: 8px; font-size: 14px; font-weight: 720; color: var(--text-2); }
.adm-fiche-svcs { display: grid; gap: 10px; }
.adm-fiche-svc { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--card-inset); border: 1px solid var(--stroke); }
.adm-fiche-svc b { font-size: 14.5px; } .adm-fiche-svc small { display: block; font-size: 12.5px; color: var(--text-3); }
.adm-fiche-svc .adm-mono { width: 36px; height: 36px; border-radius: 11px; } .adm-fiche-svc .adm-mono b { font-size: 12.5px; color: #fff; }
.adm-sheet .adm-p { grid-template-columns: 38px minmax(0, 1.4fr) auto auto; } .adm-sheet .adm-p-d { display: none; }

@media (max-width: 900px) { .adm-sum { grid-template-columns: repeat(2, minmax(0, 1fr)); } .adm-sum-i:nth-child(3) { border-left: 0; } .adm-sum-i:nth-child(n+3) { border-top: 1px solid var(--stroke); } .adm-plan-g { grid-template-columns: minmax(0, 1fr); } .adm-plan-g .adm-seats + .adm-seats { padding-left: 0; border-left: 0; padding-top: 18px; border-top: 1px solid var(--stroke); } }
@media (max-width: 560px) { .adm-sum { grid-template-columns: minmax(0, 1fr); } .adm-sum-i + .adm-sum-i { border-left: 0; border-top: 1px solid var(--stroke); } .adm-ten-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .adm-ten-facts > div:nth-child(3) { border-left: 0; } .adm-ten-facts > div:nth-child(n+3) { border-top: 1px solid var(--stroke); } .adm-ten-pair { grid-template-columns: minmax(0, 1fr); } .adm-fiche-svc { grid-template-columns: auto minmax(0, 1fr); } .adm-fiche-svc .adm-seats { grid-column: 1 / -1; } .adm-ten-stats { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .adm-seats-g i { animation: none; } }
.adm-av:not(.is-inv) { background: linear-gradient(140deg, hsl(var(--h, 220) 82% 58%), hsl(calc(var(--h, 220) + 40) 72% 52%)); }

/* ===================================================================== v43 · Services (responsable, administrateur) et panneau de démonstration */
.adm-mono.is-xl { width: 72px; height: 72px; border-radius: 22px; } .adm-mono.is-xl b { font-size: 25px; }
.adm-av.is-xs { width: 26px; height: 26px; border-radius: 9px; font-size: 10.5px; }
.adm-faces { display: inline-flex; align-items: center; }
.adm-faces .adm-av { box-shadow: 0 0 0 2px var(--menu-bg); }
.adm-faces .adm-av + .adm-av { margin-left: -4px; }
.adm-av.is-more { background: var(--card-inset) !important; color: var(--text-2); }

/* Bannière du service (responsable) */
.adm-banner { --h: 220; position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 22px 32px; padding: 26px 28px; border-radius: 28px; background: var(--card); border: 1px solid var(--stroke); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.adm-banner::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(520px 220px at 0% 0%, hsl(var(--h) 85% 58% / .2), transparent 70%), radial-gradient(400px 200px at 100% 0%, hsl(calc(var(--h) + 42) 75% 55% / .12), transparent 70%); }
.adm-banner > * { position: relative; }
.adm-banner-id { display: flex; align-items: center; gap: 18px; }
.adm-banner-id h2 { font-size: clamp(26px, 3.2vw, 34px); font-weight: 790; letter-spacing: -.03em; line-height: 1.05; }
.adm-banner-id p { margin: 4px 0 10px; font-size: 13.5px; color: var(--text-2); }
.adm-banner-seats { display: grid; gap: 10px; align-content: center; }
.adm-banner-seats .adm-seats-h b { font-size: 28px; }
.adm-banner-seats .adm-seats-g i { width: 15px; height: 17px; }
.adm-banner .adm-facts { grid-column: 1 / -1; }
.adm-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 18px; background: var(--card-inset); border: 1px solid var(--stroke); }
.adm-facts > div { display: grid; gap: 2px; padding: 13px 16px; min-width: 0; }
.adm-facts > div + div { border-left: 1px solid var(--stroke); }
.adm-facts small { font-size: 12px; font-weight: 600; color: var(--text-3); }
.adm-facts b { font-size: 22px; font-weight: 780; letter-spacing: -.025em; }
.adm-facts span { font-size: 12px; color: var(--text-3); }
.adm-invite-card { gap: 16px; }

/* Cartes de service (administrateur) */
.adm-svcs { grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 16px; }
.adm-svc { padding: 20px; border-radius: 24px; gap: 16px; }
.adm-svc::before { height: 150px; background: radial-gradient(320px 150px at 0% 0%, hsl(var(--h) 85% 58% / .17), transparent 70%); }
.adm-svc > * { position: relative; }
.adm-svc-top { align-items: flex-start; }
.adm-svc-id h3 { font-size: 19px; font-weight: 770; }
.adm-svc-lead { display: flex; align-items: center; gap: 7px; margin-top: 4px; font-size: 12.5px; color: var(--text-3); white-space: normal; }
.adm-svc-lead span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-svc-lead b { font-weight: 650; color: var(--text-2); }
.adm-svc-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-radius: 16px; background: var(--card-inset); border: 1px solid var(--stroke); }
.adm-svc-facts > div { display: grid; gap: 1px; padding: 10px 12px; min-width: 0; }
.adm-svc-facts > div + div { border-left: 1px solid var(--stroke); }
.adm-svc-facts small { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-svc-facts b { font-size: 16px; font-weight: 750; }
.adm-svc-act { flex-wrap: wrap; }
.adm-svc-btns { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.adm-sh-svc { --h: 220; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 14px; padding: 16px; border-radius: 20px; background: var(--card-inset); border: 1px solid var(--stroke); }
.adm-sh-svc b { font-size: 17px; font-weight: 750; } .adm-sh-svc small { display: block; font-size: 12.5px; color: var(--text-3); }
.adm-sh-svc .adm-seats { grid-column: 1 / -1; }

/* Panneau de démonstration */
.dm-main { padding: 6px 24px 70px; }
.dm { width: min(1120px, 100%); margin: 0 auto; display: grid; gap: 34px; }
.dm-hero { display: grid; gap: 10px; max-width: 720px; }
.dm-hero h1 { font-size: clamp(34px, 5vw, 54px); font-weight: 790; letter-spacing: -.035em; line-height: 1.02; }
.dm-pw { display: inline-flex; align-items: center; gap: 10px; justify-self: start; margin-top: 6px; padding: 10px 14px; border-radius: 14px; font-size: 13.5px; color: var(--text-2); background: var(--card); border: 1px solid var(--stroke); }
.dm-pw .ic { width: 16px; height: 16px; color: var(--accent); }
.dm-pw code { padding: 2px 8px; border-radius: 7px; font-size: 13px; font-weight: 700; color: var(--text); background: var(--card-inset); }
.dm-group { display: grid; gap: 14px; }
.dm-group h2 { font-size: 20px; font-weight: 750; letter-spacing: -.02em; }
.dm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.dm-card { --h: 220; position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: 12px 14px; padding: 20px; border-radius: 22px; background: var(--card); border: 1px solid var(--stroke); transition: border-color .25s, transform .35s var(--spring), box-shadow .3s; }
.dm-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 110px; pointer-events: none; background: radial-gradient(260px 110px at 0% 0%, hsl(var(--h) 85% 58% / .16), transparent 70%); }
.dm-card > * { position: relative; }
.dm-card:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--stroke)); transform: translateY(-2px); }
.dm-card.is-me { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.dm-av { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; font-size: 16px; font-weight: 800; color: #fff; background: linear-gradient(140deg, hsl(var(--h) 82% 58%), hsl(calc(var(--h) + 40) 72% 52%)); }
.dm-id { display: grid; align-content: center; min-width: 0; }
.dm-id b { font-size: 16.5px; font-weight: 750; letter-spacing: -.015em; }
.dm-id small { font-size: 12.5px; color: var(--text-3); }
.dm-view { grid-column: 1 / -1; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.dm-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--stroke); }
.dm-me { font-size: 13px; font-weight: 700; color: var(--accent); }
.dm-off { width: min(620px, 100%); margin: 40px auto; display: grid; justify-items: center; gap: 10px; text-align: center; }
.dm-off code { padding: 2px 7px; border-radius: 6px; background: var(--card-inset); font-size: 13px; }
.acct-item.is-demo .acct-ic { color: var(--warn); background: var(--warn-soft); }

@media (max-width: 860px) { .adm-banner { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .adm-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .adm-facts > div:nth-child(3) { border-left: 0; } .adm-facts > div:nth-child(n+3) { border-top: 1px solid var(--stroke); } .adm-banner { padding: 20px; } .adm-banner-id { flex-direction: column; align-items: flex-start; } .adm-svc-btns { margin-left: 0; } .dm-main { padding: 0 16px 50px; } }

.adm-svc > * { min-width: 0; }
.adm-svc-lead { min-width: 0; flex-wrap: nowrap; }
.adm-svc-lead > .adm-av { flex: none; }
.adm-svc-lead > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   v44 · Détachement, suppression et rattachement des comptes
   ========================================================================== */
.btn-danger { color: #fff; background: linear-gradient(135deg, #EF4444, #DC2626); box-shadow: 0 10px 24px -14px rgba(220, 38, 38, .8), inset 0 1px 0 rgba(255, 255, 255, .2); }
.btn-danger:hover { filter: brightness(1.06); }
.btn-danger:disabled, .btn-danger[disabled] { opacity: .45; filter: saturate(.4); box-shadow: none; cursor: not-allowed; }
.btn-danger-soft { color: var(--bad); background: var(--bad-soft); border: 1px solid color-mix(in srgb, var(--bad) 30%, transparent); }
.btn-danger-soft:hover { background: color-mix(in srgb, var(--bad) 16%, transparent); }
.btn.is-busy { pointer-events: none; opacity: .75; }
.sheet-foot .btn-glass[data-close] { margin-right: auto; }

/* Menu d’actions d’un compte */
.adm-p-act { position: relative; align-items: center; }
.adm-kebab { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 10px; color: var(--text-3); border: 1px solid transparent; transition: color .2s, background .2s, border-color .2s; }
.adm-kebab .ic { width: 18px; height: 18px; }
.adm-kebab:hover, .adm-kebab[aria-expanded=true] { color: var(--text); background: var(--card-inset); border-color: var(--stroke); }
.adm-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; min-width: 230px; display: grid; gap: 2px; padding: 6px; border-radius: 16px; background: var(--menu-bg); border: 1px solid var(--stroke-2); box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(-4px) scale(.98); transform-origin: top right; transition: opacity .18s var(--ease), transform .18s var(--ease); }
.adm-pop.is-on { opacity: 1; transform: none; }
.adm-pop button { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 11px; font-size: 13.5px; font-weight: 600; color: var(--text); text-align: left; }
.adm-pop button .ic { width: 17px; height: 17px; color: var(--text-3); }
.adm-pop button:hover, .adm-pop button:focus-visible { background: var(--card-inset); outline: none; }
.adm-pop button.is-danger { color: var(--bad); } .adm-pop button.is-danger .ic { color: var(--bad); }
.adm-pop button.is-danger:hover { background: var(--bad-soft); }
.adm-share.is-wait::before { background: var(--warn); }

/* Carte de service : suppression, responsable à inviter */
.adm-ico { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 10px; color: var(--text-3); border: 1px solid transparent; transition: all .2s; }
.adm-ico .ic { width: 17px; height: 17px; }
.adm-ico.is-danger:hover, .adm-ico.is-danger:focus-visible { color: var(--bad); background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 25%, transparent); }
.adm-svc-top .adm-state { margin-left: auto; }
.adm-mini.is-accent { color: var(--accent); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.adm-mini:disabled { opacity: .45; cursor: not-allowed; }

/* Feuilles de confirmation */
.adm-who-h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px; border-radius: 20px; background: var(--card-inset); border: 1px solid var(--stroke); }
.adm-who-h b { display: block; font-size: 16px; font-weight: 720; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-who-h small { display: block; font-size: 12.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-av.is-lg { width: 48px; height: 48px; border-radius: 15px; font-size: 16px; }
.adm-conseq { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.adm-conseq li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; padding: 13px 14px; border-radius: 16px; border: 1px solid var(--stroke); }
.adm-conseq b { display: block; font-size: 14px; font-weight: 700; line-height: 1.35; }
.adm-conseq p { margin-top: 3px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.adm-conseq-ic { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; }
.adm-conseq-ic .ic { width: 17px; height: 17px; }
.adm-conseq .is-keep .adm-conseq-ic { color: var(--good); background: var(--good-soft); }
.adm-conseq .is-lose .adm-conseq-ic { color: var(--bad); background: var(--bad-soft); }
.adm-conseq .is-warn .adm-conseq-ic { color: var(--warn); background: var(--warn-soft); }
.adm-type .field-label b { font-weight: 750; color: var(--text); word-break: break-all; }
.adm-sh-svc.is-gone { border-style: dashed; border-color: color-mix(in srgb, var(--bad) 35%, var(--stroke)); }
.adm-sh-svc.is-gone .adm-mono { filter: saturate(.55); }

/* Choix d’un service de destination */
.adm-opts { display: grid; gap: 8px; }
.adm-opt { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--stroke); background: var(--card-inset); cursor: pointer; transition: border-color .2s, background .2s; }
.adm-opt input { position: absolute; opacity: 0; pointer-events: none; }
.adm-opt b { display: block; font-size: 14.5px; font-weight: 700; } .adm-opt small { display: block; font-size: 12.5px; color: var(--text-3); }
.adm-opt-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--stroke-2); transition: all .2s; }
.adm-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.adm-opt:has(input:checked) .adm-opt-dot { border: 6px solid var(--accent); }
.adm-opt:has(input:focus-visible) { box-shadow: 0 0 0 4px var(--accent-soft); }
.adm-opt.is-off { opacity: .5; cursor: not-allowed; }

/* Suppression d’un service : réaffecter ou détacher */
.adm-q { font-size: 15px; font-weight: 720; }
.adm-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.adm-mode { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px; border-radius: 18px; border: 1px solid var(--stroke); background: var(--card-inset); cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s; }
.adm-mode input { position: absolute; opacity: 0; pointer-events: none; }
.adm-mode b { display: block; font-size: 15px; font-weight: 740; } .adm-mode small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
.adm-mode-ic { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; color: var(--accent); background: var(--accent-soft); }
.adm-mode-ic.is-lose { color: var(--bad); background: var(--bad-soft); }
.adm-mode-ic .ic { width: 18px; height: 18px; }
.adm-mode:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--card-inset)); box-shadow: 0 0 0 1px var(--accent) inset; }
.adm-mode:has(input[value=detach]:checked) { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 6%, var(--card-inset)); box-shadow: 0 0 0 1px var(--bad) inset; }
.adm-mode:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.adm-mode.is-off { opacity: .5; cursor: not-allowed; }
.adm-realloc { display: grid; gap: 10px; }
.adm-realloc-all { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--accent-soft); font-size: 13.5px; font-weight: 650; }
.adm-realloc select, .adm-realloc-all select { min-width: 0; max-width: 56%; padding: 8px 30px 8px 12px; border-radius: 11px; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text); background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23889' stroke-width='2'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") right 8px center / 16px no-repeat; border: 1px solid var(--stroke-2); appearance: none; -webkit-appearance: none; }
.adm-realloc-l { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--stroke); border-radius: 16px; }
.adm-realloc-l li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 12px; }
.adm-realloc-l li + li { border-top: 1px solid var(--stroke); }
.adm-realloc-id b { display: block; font-size: 13.5px; font-weight: 650; }
.adm-realloc-id small { display: block; font-size: 12px; line-height: 1.4; color: var(--warn); }
.adm-realloc-l select { max-width: 200px; }
.adm-detach-all { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: var(--bad-soft); border: 1px solid color-mix(in srgb, var(--bad) 22%, transparent); }
.adm-detach-all p { font-size: 13px; line-height: 1.5; color: var(--text-2); }
.adm-sum-line { font-size: 13px; color: var(--text-2); } .adm-sum-line:empty { display: none; }
.adm-sum-line b { color: var(--text); }
.adm-note .ic { width: 15px; height: 15px; vertical-align: -3px; margin-right: 6px; }

/* Zone sensible d’une fiche d’entreprise */
.adm-danger { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 10px; padding: 16px; border-radius: 18px; border: 1px dashed color-mix(in srgb, var(--bad) 40%, var(--stroke)); }
.adm-danger b { font-size: 14.5px; font-weight: 720; } .adm-danger p { margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--text-3); }
.adm-filter button i { margin-left: 4px; font-style: normal; font-size: 11.5px; opacity: .7; }

/* Résultat d’un envoi : précision pour un rattachement */
.adm-ok > span, .adm-warn > span { display: block; min-width: 0; flex: 1; }
.adm-ok small, .adm-warn small { display: block; margin-top: 3px; font-size: 12px; color: var(--text-2); }
.adm-warn .link-btn { margin-left: 4px; }

/* Page de rattachement */
.inv-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.inv-col { display: grid; gap: 8px; align-content: start; padding: 16px; border-radius: 18px; border: 1px solid var(--stroke); background: var(--card-inset); }
.inv-col > b { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 740; }
.inv-col > b .ic { width: 18px; height: 18px; }
.inv-col.is-keep > b .ic { color: var(--good); } .inv-col.is-change > b .ic { color: var(--accent); }
.inv-col ul { display: grid; gap: 7px; margin: 0; padding: 0 0 0 16px; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.inv-me { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--accent-soft); font-size: 13.5px; }
.inv-me .ic { width: 18px; height: 18px; color: var(--accent); flex: none; }
.inv-fine { font-size: 12.5px; line-height: 1.5; color: var(--text-3); text-align: center; }
.inv-form .btn-glass.is-confirm { color: var(--bad); border-color: var(--bad); background: var(--bad-soft); }
.adm-notice { display: grid; justify-items: start; gap: 8px; }
.adm-notice h3 { font-size: 20px; font-weight: 750; letter-spacing: -.02em; line-height: 1.25; }
.adm-notice p { font-size: 14px; line-height: 1.55; color: var(--text-2); }

@media (max-width: 640px) {
  .adm-modes, .inv-two { grid-template-columns: minmax(0, 1fr); }
  .adm-p:not(.is-inv) { grid-template-columns: 38px minmax(0, 1fr) auto auto; }
  .adm-p:not(.is-inv) .adm-p-act { grid-column: auto; }
  .adm-realloc-l li { grid-template-columns: auto minmax(0, 1fr); }
  .adm-realloc-l select { grid-column: 1 / -1; max-width: none; width: 100%; }
  .adm-danger { flex-direction: column; align-items: flex-start; }
}
.adm-note .ic { display: inline-block; }

/* ==========================================================================
   v45 · Accueil : le tableau de bord
   ========================================================================== */
.hm-k { font-size: 13px; font-weight: 600; color: var(--text-3); }
a.hm-k:hover { color: var(--text); }
.hm-hex-shape, .hm-hex, .hm-n a::before, .hm-prog-d i, .hm-prog-d em { clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }

/* En-tête : salut, prochain pas, où vous en êtes, trajectoire */
.hm-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, .95fr); grid-template-areas: "greet stand" "now stand" "trk trk"; gap: 22px 44px; padding: 38px 44px 28px; }
.hm-hero-art { position: absolute; right: -170px; top: -120px; width: 560px; height: 560px; opacity: .22; pointer-events: none; }
.hm-hero-art .logo-mark { width: 100%; height: 100%; }
.hm-hero > :not(.hm-hero-art) { position: relative; z-index: 1; }
.hm-greet { grid-area: greet; display: grid; gap: 6px; align-content: start; }
.hm-greet h1 { font-size: clamp(30px, 3.3vw, 42px); font-weight: 720; letter-spacing: -.04em; line-height: 1.05; }
.hm-ctx { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 6px; font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.hm-ctx > .ic { width: 16px; height: 16px; color: var(--text-3); }
.hm-ctx-role, .hm-ctx-share { padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 650; color: var(--text-2); background: var(--card-inset); border: 1px solid var(--stroke); }
.hm-ctx-share { display: inline-flex; align-items: center; gap: 6px; transition: border-color .2s, color .2s; }
.hm-ctx-share::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--stroke-2); }
.hm-ctx-share.is-on::before { background: var(--good); }
.hm-ctx-share:hover { color: var(--text); border-color: var(--stroke-2); }

/* Le prochain pas : la seule chose en grand */
.hm-now { grid-area: now; display: grid; gap: 12px; align-content: start; max-width: 640px; }
.hm-now-k { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 13.5px; font-weight: 650; color: var(--accent); }
.hm-now-ic { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: var(--grad); box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--g2) 80%, transparent); }
.hm-now-ic .ic { width: 16px; height: 16px; }
.hm-now-prog { padding-left: 10px; border-left: 1px solid var(--stroke-2); font-weight: 600; color: var(--text-3); }
.hm-now h2 { font-size: clamp(24px, 2.5vw, 32px); font-weight: 740; letter-spacing: -.03em; line-height: 1.12; text-wrap: balance; }
.hm-now-why { max-width: 60ch; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.hm-now-bar { display: block; height: 6px; max-width: 420px; border-radius: 99px; background: var(--card-inset); border: 1px solid var(--stroke); overflow: hidden; }
.hm-now-bar i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--grad); }
.hm-now-act { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 18px; margin-top: 6px; }
.hm-now-meta { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13px; font-weight: 600; color: var(--text-3); }
.hm-now-meta i { width: 4px; height: 4px; border-radius: 50%; background: var(--stroke-2); }
.hm-then { display: grid; grid-template-columns: auto repeat(2, minmax(0, 1fr)); align-items: center; gap: 10px; margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--stroke); }
.hm-then-k { font-size: 12.5px; font-weight: 650; color: var(--text-3); padding-right: 4px; }
.hm-then a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 14px; border: 1px solid var(--stroke); background: var(--card-inset); transition: border-color .2s, background .2s, transform .2s var(--ease); }
.hm-then a:hover { border-color: var(--stroke-2); background: var(--card-strong); transform: translateY(-1px); }
.hm-then a > .ic { width: 15px; height: 15px; color: var(--text-3); }
.hm-then-ic { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 9px; color: var(--accent); background: var(--accent-soft); }
.hm-then-ic .ic { width: 15px; height: 15px; }
.hm-then small { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-3); }
.hm-then b { display: block; font-size: 13.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Où vous en êtes */
.hm-stand { grid-area: stand; align-self: start; display: grid; gap: 16px; padding: 20px; border-radius: 24px; background: var(--card-inset); border: 1px solid var(--stroke); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.hm-stand-score { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; }
.hm-stand-score small { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.hm-stand-score b { display: block; font-size: 24px; font-weight: 750; letter-spacing: -.025em; }
.hm-stand-score em { display: block; font-style: normal; font-size: 12.5px; color: var(--text-3); }
.hm-stand-f { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--stroke); }
.hm-stand-f > div { display: grid; gap: 2px; align-content: start; padding: 12px 0; min-width: 0; }
.hm-stand-f > div:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--stroke); }
.hm-stand-f > div:nth-child(n+3) { border-top: 1px solid var(--stroke); }
.hm-stand-f dt { font-size: 12px; font-weight: 600; color: var(--text-3); }
.hm-stand-f dd { margin: 0; font-size: 18px; font-weight: 750; letter-spacing: -.02em; }
.hm-stand-f dd i { font-style: normal; font-size: 13px; font-weight: 600; color: var(--text-3); }
.hm-stand-f small { display: flex; flex-wrap: wrap; gap: 4px; font-size: 12px; color: var(--text-3); }
.hm-tier { padding: 0 6px; border-radius: 6px; font-weight: 650; }
.hm-tier.t-or { color: color-mix(in srgb, #E6B33E 85%, var(--text)); background: color-mix(in srgb, #E6B33E 16%, transparent); }
.hm-tier.t-argent { color: var(--text-2); background: color-mix(in srgb, #C3CCD8 22%, transparent); }
.hm-tier.t-bronze { color: color-mix(in srgb, #D08A57 85%, var(--text)); background: color-mix(in srgb, #D08A57 16%, transparent); }
.hm-stand-link { display: inline-flex; align-items: center; gap: 6px; justify-self: start; font-size: 13px; font-weight: 650; color: var(--accent); }
.hm-stand-link .ic { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.hm-stand-link:hover .ic { transform: translateX(3px); }
.hm-pre { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.hm-pre li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; }
.hm-pre b { display: block; font-size: 14.5px; font-weight: 700; } .hm-pre small { display: block; font-size: 12.5px; line-height: 1.45; color: var(--text-3); }

/* La trajectoire */
.hm-trk { grid-area: trk; display: grid; gap: 10px; padding-top: 22px; border-top: 1px solid var(--stroke); }
.hm-trk-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.hm-trk-h h2 { font-size: 15px; font-weight: 720; }
.hm-trk-h p { font-size: 13px; color: var(--text-3); } .hm-trk-h p b { color: var(--text); font-weight: 700; }
.hm-trk-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin: 0 -8px; padding: 6px 8px 2px; scroll-behavior: smooth; }
.hm-trk-scroll::-webkit-scrollbar { display: none; }
.hm-trk-in { position: relative; min-width: calc(var(--n) * 40px); display: grid; gap: 8px; }
.hm-trk-l { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; height: 56px; }
.hm-trk-rail { position: absolute; z-index: 0; top: 27px; left: calc(50% / var(--n)); right: calc(50% / var(--n)); height: 2px; border-radius: 2px; background: var(--stroke-2); }
.hm-trk-rail i { display: block; height: 100%; width: calc(var(--p) * 100%); border-radius: inherit; background: var(--grad); transform-origin: left; animation: hm-rail 1.2s var(--ease) .25s backwards; }
@keyframes hm-rail { from { transform: scaleX(0); } }
.hm-n { display: grid; place-items: center; }
.hm-n a { position: relative; display: grid; place-items: center; outline: none; }
.hm-hex { --sz: 30px; position: relative; isolation: isolate; width: var(--sz); height: calc(var(--sz) * 1.12); display: grid; place-items: center; background: var(--stroke-2); color: var(--text-3); transition: transform .3s var(--spring), background .3s; animation: hm-pop .5s var(--spring) backwards; animation-delay: calc(var(--i) * 28ms + 120ms); }
@keyframes hm-pop { from { transform: scale(.4); opacity: 0; } }
.hm-hex::before { content: ''; position: absolute; z-index: -1; inset: 1.5px; clip-path: inherit; background: var(--menu-bg); }
.hm-hex b { font-size: 11px; font-weight: 750; }
.hm-hex .ic { width: 14px; height: 14px; }
.is-diag .hm-hex, .is-exam .hm-hex, .is-bilan .hm-hex { --sz: 40px; }
.is-diag .hm-hex .ic, .is-exam .hm-hex .ic, .is-bilan .hm-hex .ic { width: 18px; height: 18px; }
.hm-n.is-done .hm-hex { background: var(--grad); color: #fff; }
.hm-n.is-done .hm-hex::before { display: none; }
.hm-n.is-exam.is-done.t-or .hm-hex { background: linear-gradient(135deg, #FFF4CC, #E6B33E 55%, #946311); color: #5E3D05; }
.hm-n.is-exam.is-done.t-argent .hm-hex { background: linear-gradient(135deg, #FFFFFF, #C3CCD8 55%, #6F7B8B); color: #3A4352; }
.hm-n.is-exam.is-done.t-bronze .hm-hex { background: linear-gradient(135deg, #FFE2C8, #D08A57 55%, #7A4122); color: #4E2611; }
.hm-n.is-quiz .hm-hex { background: var(--warn); color: var(--warn); }
.hm-n.is-quiz .hm-hex::before { background: color-mix(in srgb, var(--warn) 14%, var(--menu-bg)); }
.hm-n.is-part .hm-hex { background: var(--grad); color: var(--accent); }
.hm-n.is-part .hm-hex::before { inset: 2px; }
.hm-n.is-lock .hm-hex { opacity: .55; }
.hm-n.is-cur .hm-hex { transform: scale(1.22); }
.hm-n.is-cur a::before { content: ''; position: absolute; inset: -9px -8px; z-index: -1; background: var(--grad); opacity: .3; filter: blur(1px); animation: hm-halo 2.6s var(--ease) infinite; }
@keyframes hm-halo { 0%, 100% { opacity: .14; transform: scale(.92); } 50% { opacity: .38; transform: scale(1.05); } }
.hm-n.is-hover .hm-hex, .hm-n a:focus-visible .hm-hex { transform: scale(1.22); }
.hm-n.is-cur.is-hover .hm-hex { transform: scale(1.3); }
.hm-n a:focus-visible::after { content: ''; position: absolute; inset: -6px; border-radius: 12px; box-shadow: 0 0 0 2px var(--accent); }
.hm-trk-g { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.hm-trk-g span { display: flex; align-items: baseline; justify-content: center; gap: 6px; margin: 0 4px; padding-top: 8px; border-top: 1px solid var(--stroke-2); font-size: 12px; text-align: center; min-width: 0; }
.hm-trk-g b { font-weight: 650; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-trk-g small { color: var(--text-3); }
.hm-trk-read { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 4px 10px; min-height: 22px; font-size: 13.5px; text-align: center; }
.hm-trk-read b { font-weight: 700; } .hm-trk-read span { color: var(--text-3); }

/* Bandeau d’équipe (responsables et administrateurs) */
.hm-team { --h: 220; position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) minmax(220px, .9fr); align-items: center; gap: 28px; margin-top: 18px; padding: 22px 26px; border-radius: var(--r-xl); background: linear-gradient(110deg, color-mix(in srgb, hsl(var(--h) 80% 55%) 9%, var(--card)), var(--card) 55%); border: 1px solid var(--stroke); box-shadow: var(--shadow); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.hm-team-id { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; }
.hm-team-id h2 { font-size: 19px; font-weight: 740; letter-spacing: -.02em; }
.hm-team-id p:not(.hm-k) { font-size: 13px; color: var(--text-3); margin-bottom: 6px; }
.hm-team-f { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; }
.hm-team-f > div { display: grid; gap: 1px; padding: 2px 14px; min-width: 0; }
.hm-team-f > div + div { border-left: 1px solid var(--stroke); }
.hm-team-f dt { font-size: 12px; font-weight: 600; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-team-f dd { margin: 0; font-size: 22px; font-weight: 760; letter-spacing: -.025em; }
.hm-team-f small { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-team-s { display: grid; gap: 12px; justify-items: start; }
.hm-team-s .adm-seats { width: 100%; }

/* La grille du dessous */
.hm-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.hm-grid > .card { padding: 24px; display: grid; gap: 16px; align-content: start; }
.hm-progs, .hm-resume { grid-column: span 7; }
.hm-me, .hm-pod { grid-column: span 5; }
.hm-grid > .hm-resume:nth-child(3):last-child { grid-column: 1 / -1; }
.hm-card-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.hm-card-h h2 { font-size: 18px; font-weight: 720; letter-spacing: -.02em; }

/* Programmes */
.hm-prog { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 12px 14px 12px 8px; border-radius: 20px; border: 1px solid var(--stroke); background: var(--card-inset); transition: border-color .2s, background .2s, transform .25s var(--ease); }
.hm-prog:hover { border-color: var(--stroke-2); background: var(--card-strong); transform: translateY(-1px); }
.hm-prog > .ic { width: 16px; height: 16px; color: var(--text-3); }
.hm-prog-m { display: grid; place-items: center; width: 64px; }
.hm-prog-m svg { width: 64px; height: auto; }
.hm-prog-t { display: grid; gap: 2px; min-width: 0; }
.hm-prog-t small { font-size: 12px; font-weight: 600; color: var(--text-3); }
.hm-prog-t > b { font-size: 16px; font-weight: 720; letter-spacing: -.015em; }
.hm-prog-l { font-size: 13px; color: var(--text-2); }
.hm-prog-d { display: flex; align-items: center; gap: 3px; }
.hm-prog-d i, .hm-prog-d em { width: 13px; height: 15px; background: var(--stroke-2); }
.hm-prog-d i.is-done { background: var(--grad); }
.hm-prog-d i.is-quiz { background: var(--warn); }
.hm-prog-d i.is-part { background: color-mix(in srgb, var(--g2) 45%, var(--stroke-2)); }
.hm-prog-d em { width: 17px; height: 19px; margin-left: 4px; background: transparent; box-shadow: inset 0 0 0 20px var(--stroke); outline: 1.5px dashed var(--stroke-2); }
.hm-prog-d em.is-done { background: linear-gradient(135deg, #FFF4CC, #E6B33E 55%, #946311); box-shadow: none; }
.hm-prog-d em.is-quiz { background: var(--warn); box-shadow: none; }
.hm-prog-cert { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 650; color: var(--accent); background: var(--accent-soft); }
.hm-prog-cert .ic { width: 14px; height: 14px; }

/* Profil et prochain point d’étape */
.hm-me-p { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; }
.hm-me-em svg { width: 84px; height: 84px; display: block; }
.hm-me-p small { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.hm-me-p b { display: block; font-size: 22px; font-weight: 750; letter-spacing: -.025em; }
.hm-me-p em { display: block; font-style: normal; font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.hm-me-next { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px; border-radius: 18px; background: var(--card-inset); border: 1px solid var(--stroke); }
.hm-me-next b { display: block; font-size: 14px; font-weight: 700; } .hm-me-next small { display: block; font-size: 12.5px; line-height: 1.45; color: var(--text-3); }
.hm-me-dial { width: 38px; height: 38px; border-radius: 50%; background: conic-gradient(var(--g2) calc(var(--p) * 360deg), var(--stroke-2) 0); -webkit-mask: radial-gradient(circle, transparent 13px, #000 14px); mask: radial-gradient(circle, transparent 13px, #000 14px); }

/* Reprendre */
.hm-rows { display: grid; gap: 2px; }
.hm-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; width: 100%; padding: 10px; border-radius: 14px; text-align: left; transition: background .2s; }
.hm-row:hover { background: var(--card-inset); }
.hm-row > .ic { width: 15px; height: 15px; color: var(--text-3); transition: transform .2s var(--ease); }
.hm-row:hover > .ic { transform: translateX(3px); color: var(--text); }
.hm-row-ic { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; color: var(--accent); background: var(--accent-soft); }
.hm-row-ic.is-app { color: var(--app); background: color-mix(in srgb, var(--app) 14%, transparent); }
.hm-row-ic .ic { width: 17px; height: 17px; }
.hm-row-t { min-width: 0; } .hm-row-t b { display: block; font-size: 14px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-row-t small { display: block; font-size: 12.5px; color: var(--text-3); }
.hm-row-bar { width: 72px; height: 5px; border-radius: 99px; background: var(--stroke); overflow: hidden; }
.hm-row-bar i { display: block; height: 100%; width: var(--w); background: var(--grad); }
.hm-row-fav { color: #E6B33E; } .hm-row-fav .ic { width: 15px; height: 15px; fill: currentColor; }
.hm-empty { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 16px; border-radius: 18px; border: 1px dashed var(--stroke-2); }
.hm-empty p { font-size: 13.5px; line-height: 1.5; color: var(--text-2); }

/* Prompt du jour */
.hm-pod-b { display: grid; gap: 8px; width: 100%; padding: 16px; border-radius: 18px; text-align: left; background: linear-gradient(160deg, color-mix(in srgb, var(--app) 10%, var(--card-inset)), var(--card-inset) 60%); border: 1px solid var(--stroke); transition: border-color .2s, transform .25s var(--ease); }
.hm-pod-b:hover { border-color: color-mix(in srgb, var(--app) 45%, var(--stroke)); transform: translateY(-1px); }
.hm-pod-app { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 650; color: var(--text-3); }
.hm-pod-app .pc-app-ic { width: 26px; height: 26px; }
.hm-pod-b > b { font-size: 16.5px; font-weight: 720; letter-spacing: -.015em; line-height: 1.3; }
.hm-pod-d { font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.hm-pod-peek { position: relative; max-height: 74px; overflow: hidden; padding: 10px 12px; border-radius: 12px; font-family: var(--mono); font-size: 11.5px; line-height: 1.6; color: var(--text-3); background: var(--card-inset); border: 1px solid var(--stroke); -webkit-mask: linear-gradient(#000 55%, transparent); mask: linear-gradient(#000 55%, transparent); }
.hm-pod-go { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; color: var(--accent); }
.hm-pod-go .ic { width: 14px; height: 14px; }

@media (max-width: 1080px) {
  .hm-team { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .hm-team-f { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 960px) {
  .hm-hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "greet" "now" "stand" "trk"; padding: 30px; }
  .hm-progs, .hm-resume, .hm-me, .hm-pod { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .hm-hero { padding: 22px 18px; gap: 18px; }
  .hm-then { grid-template-columns: minmax(0, 1fr); }
  .hm-now-act .btn { width: 100%; }
  .hm-trk-in { min-width: calc(var(--n) * 38px); }
  .hm-team { grid-template-columns: minmax(0, 1fr); padding: 20px; gap: 18px; }
  .hm-team-f { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-row: auto; row-gap: 12px; }
  .hm-team-f > div:nth-child(3) { border-left: 0; padding-left: 2px; }
  .hm-team-f > div:first-child { padding-left: 2px; }
  .hm-grid { gap: 14px; } .hm-grid > .card { padding: 18px; }
  .hm-prog { grid-template-columns: auto minmax(0, 1fr) auto; }
  .hm-prog-d { grid-column: 2 / -1; grid-row: 2; }
  .hm-prog > .ic, .hm-prog-cert { grid-column: 3; grid-row: 1; }
  .hm-row-bar { display: none; }
  .hm-empty { grid-template-columns: auto minmax(0, 1fr); } .hm-empty .btn { grid-column: 1 / -1; }
  .hm-me-next { grid-template-columns: auto minmax(0, 1fr); } .hm-me-next .btn { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-trk-rail i, .hm-hex, .hm-n.is-cur a::before { animation: none; }
}
.hm-hero-art { opacity: .12; }
.hm-trk-g span.is-one { border-top-color: transparent; overflow: visible; }
.hm-trk-g span.is-one b { overflow: visible; }
.hm-dom { display: grid; gap: 7px; }
.hm-dom-r { display: grid; grid-template-columns: 112px minmax(0, 1fr) 28px; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.hm-dom-r i { height: 6px; border-radius: 99px; background: var(--stroke); overflow: hidden; }
.hm-dom-r i b { display: block; height: 100%; width: var(--w); border-radius: inherit; background: color-mix(in srgb, var(--g2) 55%, var(--stroke-2)); }
.hm-dom-r.is-top i b { background: var(--grad); } .hm-dom-r.is-low i b { background: var(--warn); }
.hm-dom-r em { font-style: normal; text-align: right; color: var(--text-3); }
.hm-dom-r:hover span { color: var(--text); }
.hm-dom-n { margin-top: 2px; font-size: 12.5px; color: var(--text-3); } .hm-dom-n b { color: var(--text-2); font-weight: 650; }
.hm-note { font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.hm-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
.hm-col { display: grid; gap: 18px; min-width: 0; }
.hm-col > .card { padding: 24px; display: grid; gap: 16px; align-content: start; }
.hm-col > .card { grid-column: auto !important; }
.hm-prog-nx { font-size: 12.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-prog-nx b { font-weight: 650; color: var(--text-2); }
@media (max-width: 960px) { .hm-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .hm-prog { gap: 12px; padding: 12px; }
  .hm-prog-m { width: 44px; } .hm-prog-m svg { width: 44px; }
  .hm-prog-cert { grid-column: 2 / -1 !important; grid-row: 3 !important; justify-self: start; }
  .hm-prog-d { grid-column: 2 / -1; }
  .hm-stand-f > div:nth-child(even) { padding-left: 12px; }
  .hm-trk-g b { font-size: 11px; }
}
.hm-prog-d em.is-done.t-argent { background: linear-gradient(135deg, #FFFFFF, #C3CCD8 55%, #6F7B8B); }
.hm-prog-d em.is-done.t-bronze { background: linear-gradient(135deg, #FFE2C8, #D08A57 55%, #7A4122); }

/* ==========================================================================
   v46 · Sécurité du compte
   ========================================================================== */
.fineprint .ic { width: 13px; height: 13px; vertical-align: -2px; margin-right: 6px; }
.auth-forgot { justify-self: center; margin-top: 2px; font-size: 13.5px; }
.auth-sent { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; font-size: 14px; font-weight: 650; color: var(--good); background: var(--good-soft); }
.auth-sent .ic { width: 16px; height: 16px; }
.auth-code, .sec-form .auth-code { font-variant-numeric: tabular-nums; letter-spacing: .32em; font-size: 20px; font-weight: 650; }
.btn.is-busy { opacity: .7; pointer-events: none; }

.sec-sheet .sheet-body { gap: 12px; }
.sec-sec { display: grid; gap: 12px; padding: 16px; border-radius: 20px; background: var(--card-inset); border: 1px solid var(--stroke); }
.sec-h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.sec-h + .sec-h { padding-top: 12px; border-top: 1px solid var(--stroke); }
.sec-h b { display: block; font-size: 15px; font-weight: 720; } .sec-h small { display: block; font-size: 12.5px; line-height: 1.45; color: var(--text-3); }
.sec-ic { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: var(--accent); background: var(--accent-soft); }
.sec-ic .ic { width: 18px; height: 18px; }
.sec-ic.is-on { color: #fff; background: var(--grad); }
.sec-h.is-danger .sec-ic { color: var(--bad); background: var(--bad-soft); }
.btn.is-danger { color: var(--bad); }
.btn.is-danger:hover { border-color: color-mix(in srgb, var(--bad) 45%, var(--stroke)); background: var(--bad-soft); }
.sec-badge { padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--good); background: var(--good-soft); }
.sec-body { display: grid; gap: 12px; }
.sec-body[hidden] { display: none; }
.sec-form { display: grid; gap: 12px; }
.sec-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; align-items: center; }
.sec-row.is-left { justify-content: flex-start; }
.sec-hint { font-size: 12.5px; line-height: 1.5; color: var(--text-3); }
.sec-steps { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; counter-reset: st; }
.sec-steps > li { display: grid; gap: 4px; padding-left: 38px; position: relative; counter-increment: st; }
.sec-steps > li::before { content: counter(st); position: absolute; left: 0; top: -2px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 9px; font-size: 13px; font-weight: 750; color: var(--accent); background: var(--accent-soft); }
.sec-steps b { font-size: 14.5px; font-weight: 700; } .sec-steps small { font-size: 13px; color: var(--text-3); }
.sec-qr-box { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 8px; }
.sec-qr { border-radius: 14px; box-shadow: 0 0 0 1px var(--stroke-2); background: #fff; }
.sec-k { display: block; font-size: 12px; font-weight: 600; color: var(--text-3); }
.sec-secret { display: block; margin: 4px 0 6px; font-family: var(--mono); font-size: 13.5px; letter-spacing: .06em; word-break: break-all; }
.sec-done { display: grid; justify-items: start; gap: 8px; }
.sec-done h3 { font-size: 20px; font-weight: 750; } .sec-done p { font-size: 14px; line-height: 1.55; color: var(--text-2); }
.sec-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 14px; list-style: none; border-radius: 16px; background: var(--card); border: 1px dashed var(--stroke-2); }
.sec-codes code { font-family: var(--mono); font-size: 15px; letter-spacing: .08em; }
.sec-codes-act { display: flex; gap: 8px; }
.sec-ack { margin-top: 4px; }
.sec-sessions { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.sec-sessions li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 12px; }
.sec-sessions li + li { border-top: 1px solid var(--stroke); }
.sec-dev { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; color: var(--text-3); background: var(--card); }
.sec-dev .ic { width: 15px; height: 15px; }
.sec-sess b { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 650; }
.sec-sess em { font-style: normal; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; color: var(--good); background: var(--good-soft); }
.sec-sess small { display: block; font-size: 12px; color: var(--text-3); }
.sec-gate .sec-flow { display: grid; gap: 14px; }

/* Journal d’audit */
.jr-l { display: grid; margin: 0; padding: 0; list-style: none; }
.jr-e { display: grid; grid-template-columns: 118px minmax(0, 1fr) minmax(0, 1.4fr) auto; align-items: center; gap: 12px; padding: 9px 6px; border-bottom: 1px solid var(--stroke); font-size: 13px; }
.jr-e time { color: var(--text-3); font-variant-numeric: tabular-nums; }
.jr-e b { font-weight: 650; display: flex; align-items: center; gap: 8px; }
.jr-e b::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--stroke-2); flex: none; }
.jr-e.is-ok b::before { background: var(--good); } .jr-e.is-warn b::before { background: var(--warn); } .jr-e.is-bad b::before { background: var(--bad); }
.jr-e span { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jr-e small { color: var(--text-3); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .jr-e { grid-template-columns: minmax(0, 1fr) auto; }
  .jr-e span { grid-column: 1 / -1; } .jr-e small { display: none; }
  .sec-codes { grid-template-columns: minmax(0, 1fr); }
}
.sec-done h3, .adm-notice h3 { color: var(--text); }

/* ==========================================================================
   v47 · Accueil aéré : un mot d’accueil, un seul prochain pas, la suite en trois idées
   ========================================================================== */
.hm2-hero { padding-bottom: 0; }
.hm2-hero h1 { max-width: 15ch; }
.hm2-facts { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; margin-top: 26px; font-size: 15px; color: var(--text-3); }
.hm2-facts > i { width: 4px; height: 4px; border-radius: 50%; background: var(--stroke-2); }
.hm2-facts b { color: var(--text); font-weight: 650; }
.hm2-facts > span { white-space: nowrap; }
.hm2-facts a { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; font-weight: 650; color: var(--accent); }
.hm2-facts a .ic { width: 15px; height: 15px; transition: transform .3s var(--spring); }
.hm2-facts a:hover .ic { transform: translateX(3px); }
.hm2-ctx { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.hm2-ctx > .ic { width: 16px; height: 16px; color: var(--text-3); }

/* La carte « prochaine étape » */
.hmf { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); margin-top: clamp(44px, 6vw, 76px); }
.hmf::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 90% at 0% 0%, color-mix(in srgb, var(--g1) 11%, transparent), transparent 70%); }
.hmf-info { display: flex; flex-direction: column; padding: clamp(30px, 4.4vw, 56px); }
.hmf-info h2 { margin-top: 16px; font-size: clamp(28px, 3vw, 40px); font-weight: 730; letter-spacing: -.045em; line-height: 1.06; text-wrap: balance; }
.hmf-prog { margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--text-3); }
.hmf-info .pxd-desc { max-width: 34rem; }
.hmf-info .pxd-acts { align-items: center; gap: 18px; padding-top: 36px; }
.hmf-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13.5px; color: var(--text-3); }
.hmf-meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--stroke-2); }

.hmf-art { display: grid; place-content: center; justify-items: center; gap: 16px; margin: 14px; padding: 32px 28px; border-radius: var(--r-l); background: var(--card-inset); border: 1px solid var(--stroke); text-align: center; }
.hmf-art > p { max-width: 16rem; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.hmf-art.is-list { place-content: center stretch; justify-items: stretch; text-align: left; padding: 32px; }
.hmf-art-k { font-size: 13px; font-weight: 650; color: var(--text-3); }
.hmf-art.is-list ul { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.hmf-art.is-list li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; }
.hmf-art.is-list b { display: block; font-size: 15px; font-weight: 700; }
.hmf-art.is-list small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--text-3); }
.hmf-art.is-prog { gap: 10px; transition: border-color .25s var(--ease), background .25s var(--ease); }
.hmf-art.is-prog:hover { border-color: var(--stroke-2); background: var(--card-strong); }
.hmf-medal svg { width: 132px; height: auto; }
.hmf-prog-t { display: grid; gap: 2px; margin-top: 4px; }
.hmf-prog-t small { font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.hmf-prog-t b { font-size: 18px; font-weight: 720; letter-spacing: -.02em; }
.hmf-chain { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.hmf-chain i, .hmf-chain em { width: 15px; height: 17px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--stroke-2); }
.hmf-chain i.is-done { background: var(--grad); }
.hmf-chain i.is-quiz { background: var(--warn); }
.hmf-chain i.is-part { background: color-mix(in srgb, var(--g2) 45%, var(--stroke-2)); }
.hmf-chain i.is-cur { position: relative; scale: 1.25; margin: 0 3px; background: var(--grad); animation: hmf-pulse 2.4s var(--ease) infinite; }
.hmf-chain em { width: 19px; height: 21px; margin-left: 5px; background: var(--stroke); }
.hmf-chain em.is-done { background: linear-gradient(135deg, #FFF4CC, #E6B33E 55%, #946311); }
.hmf-chain em.is-quiz { background: var(--warn); }
.hmf-prog-n { font-size: 13.5px; color: var(--text-2); }
@keyframes hmf-pulse { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .hmf-chain i.is-cur { animation: none; } }

/* Ensuite : trois idées, sans cadre */
.hm2-then { margin-top: clamp(56px, 7vw, 96px); text-align: center; }
.hm2-then-l { display: flex; flex-wrap: wrap; justify-content: center; margin-top: 26px; text-align: left; border-top: 1px solid var(--stroke); }
.hm2-then-l a { flex: 1 1 260px; max-width: 420px; display: grid; align-content: start; gap: 6px; padding: 26px 26px 30px; border-right: 1px solid var(--stroke); transition: background .25s var(--ease); }
.hm2-then-l a:last-child { border-right: 0; }
.hm2-then-l a:hover { background: color-mix(in srgb, var(--card) 60%, transparent); }
.hm2-then-ic { width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: 8px; border-radius: 12px; color: var(--accent); background: var(--accent-soft); }
.hm2-then-ic .ic { width: 18px; height: 18px; }
.hm2-then-l small { font-size: 12.5px; font-weight: 650; color: var(--text-3); }
.hm2-then-l b { font-size: 17px; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; text-wrap: balance; }
.hm2-then-go { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; font-size: 13.5px; font-weight: 650; color: var(--accent); }
.hm2-then-go .ic { width: 15px; height: 15px; transition: transform .3s var(--spring); }
.hm2-then-l a:hover .hm2-then-go .ic { transform: translateX(3px); }

.hm2-team { margin-top: clamp(56px, 7vw, 96px); }

@media (max-width: 860px) {
  .hmf { grid-template-columns: minmax(0, 1fr); }
  .hmf-art { margin-top: 0; }
  .hm2-then-l a { border-right: 0; border-bottom: 1px solid var(--stroke); }
  .hm2-then-l a:last-child { border-bottom: 0; }
}

/* ==========================================================================
   v48 · Clés de sécurité
   ========================================================================== */
.auth-key { display: grid; place-items: center; margin: 22px 0 18px; }
.auth-key span { position: relative; width: 76px; height: 76px; display: grid; place-items: center; border-radius: 24px; color: var(--accent); background: var(--accent-soft); }
.auth-key span::after { content: ''; position: absolute; inset: -8px; border-radius: 30px; border: 1.5px solid color-mix(in srgb, var(--accent) 35%, transparent); animation: key-ring 2.4s var(--ease) infinite; }
.auth-key .ic { width: 34px; height: 34px; }
@keyframes key-ring { 0% { opacity: .9; scale: .92; } 70%, 100% { opacity: 0; scale: 1.18; } }
@media (prefers-reduced-motion: reduce) { .auth-key span::after { animation: none; opacity: .5; } }
[data-key] .ic { width: 17px; height: 17px; }
.auth-key-err { margin-bottom: 12px; }
.auth-rescue { margin-top: 16px; }
.auth-rescue summary { width: fit-content; margin: 0 auto; font-size: 13.5px; font-weight: 600; color: var(--text-3); cursor: pointer; list-style: none; }
.auth-rescue summary::-webkit-details-marker { display: none; }
.auth-rescue summary:hover { color: var(--accent); }
.auth-rescue[open] summary { margin-bottom: 14px; color: var(--text-2); }

.key-flow { display: grid; gap: 18px; }
.key-how { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.key-how li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r-m, 14px); background: var(--card-inset); border: 1px solid var(--stroke); }
.key-how b { display: block; font-size: 14px; font-weight: 700; }
.key-how small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; color: var(--text-3); }
.key-how-ic { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; color: var(--accent); background: var(--accent-soft); }
.key-how-ic .ic { width: 17px; height: 17px; }
.sec-keys { display: grid; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.sec-keys li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--card-inset); border: 1px solid var(--stroke); }
.sec-tip { margin: 0 0 12px; }

/* ==========================================================================
   v49 · Tableau de bord d’équipe sur l’accueil (responsable, administrateur, équipe Unideon)
   Une seule série par graphique (teinte de l’accent) ; avancement : rampe d’une teinte.
   ========================================================================== */
.hmt { --viz-1: #2563EB; --viz-go: #7DB3F8; --viz-done: #3B82F6; --viz-cert: #1D4ED8; --viz-track: color-mix(in srgb, var(--text) 7%, transparent);
  position: relative; isolation: isolate; padding: clamp(28px, 4vw, 48px); border-radius: var(--r-xl, 28px); background: var(--card); border: 1px solid var(--stroke); box-shadow: var(--shadow, 0 20px 50px -30px rgba(15, 30, 80, .25)); overflow: hidden; }
.hmt::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 60% at 100% 0%, hsl(var(--h) 90% 60% / .10), transparent 70%), radial-gradient(40% 50% at 0% 100%, color-mix(in srgb, var(--g1) 8%, transparent), transparent 70%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hmt { --viz-1: #3B82F6; --viz-go: #1E40AF; --viz-done: #3B82F6; --viz-cert: #93C5FD; } }
:root[data-theme="dark"] .hmt { --viz-1: #3B82F6; --viz-go: #1E40AF; --viz-done: #3B82F6; --viz-cert: #93C5FD; }

.hmt-h { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 28px; }
.hmt-id { display: flex; align-items: center; gap: 20px; min-width: 0; }
.hmt-id h2 { margin-top: 8px; font-size: clamp(26px, 3vw, 36px); font-weight: 740; letter-spacing: -.045em; line-height: 1.05; }
.hmt-id p:not(.dg2-k) { margin-top: 6px; font-size: 14px; color: var(--text-2); }
.hmt-id .adm-faces { margin-top: 12px; }
.hmt-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.hmt-acts .btn .ic { width: 15px; height: 15px; }

.hmt-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.hmt-card { min-width: 0; padding: 24px; border-radius: var(--r-l); background: var(--card-strong, rgba(255, 255, 255, .6)); border: 1px solid var(--stroke); }
.hmt-card-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 18px; }
.hmt-card-h h3 { font-size: 16px; font-weight: 720; letter-spacing: -.02em; }
.hmt-sub { font-size: 12.5px; color: var(--text-3); }
.hmt-more { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 650; color: var(--accent); }
.hmt-more .ic { width: 14px; height: 14px; }
.hmt-hero { grid-column: span 5; display: flex; flex-direction: column; }
.hmt-path { grid-column: span 7; }
.hmt-tiles { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.hmt-pg { grid-column: span 7; }
.hmt-lvl { grid-column: span 5; display: flex; flex-direction: column; }
.hmt-wide { grid-column: 1 / -1; }

/* Chiffre héros */
.hmt-k { font-size: 13px; font-weight: 650; color: var(--text-2); }
.hmt-big { margin-top: 10px; font-size: clamp(56px, 7vw, 84px); font-weight: 760; letter-spacing: -.06em; line-height: .95; color: var(--text); }
.hmt-big span { margin-left: 4px; font-size: .45em; letter-spacing: 0; color: var(--text-3); }
.hmt-big.is-off { color: var(--text-3); }
.hmt-hero-s { margin-top: 12px; max-width: 22rem; font-size: 14.5px; line-height: 1.5; color: var(--text-2); }
.hmt-hero-s b { color: var(--text); }
.hmt-seats { margin-top: auto; padding-top: 24px; }

/* Parcours */
.hmt-funnel { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.hmt-funnel li { display: grid; grid-template-columns: minmax(130px, 210px) minmax(0, 1fr) 84px; align-items: center; gap: 14px; }
.hmt-f-l { font-size: 13.5px; color: var(--text-2); }
.hmt-f-bar { position: relative; height: 22px; border-radius: 6px; background: var(--viz-track); overflow: hidden; }
.hmt-f-bar i { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 4px; background: var(--viz-1); transform-origin: left; animation: hmt-grow .9s var(--ease) both; animation-delay: calc(var(--i) * 70ms); }
.hmt-f-v { display: flex; align-items: baseline; justify-content: flex-end; gap: 6px; }
.hmt-f-v b { font-size: 15px; font-weight: 720; color: var(--text); }
.hmt-f-v small { font-size: 12px; color: var(--text-3); }
@keyframes hmt-grow { from { transform: scaleX(0); } }

/* Tuiles */
.hmt-tile { display: grid; gap: 4px; padding: 20px 22px; border-radius: var(--r-l); background: var(--card-strong, rgba(255, 255, 255, .6)); border: 1px solid var(--stroke); }
.hmt-tile small { font-size: 12.5px; font-weight: 650; color: var(--text-3); }
.hmt-tile b { margin-top: 4px; font-size: 30px; font-weight: 740; letter-spacing: -.04em; line-height: 1.05; color: var(--text); }
.hmt-tile span { font-size: 12.5px; color: var(--text-3); }

/* Programmes */
.hmt-progs { display: grid; gap: 22px; }
.hmt-prog-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin-bottom: 10px; }
.hmt-prog-h b { font-size: 14.5px; font-weight: 700; }
.hmt-prog-h small { font-size: 12.5px; color: var(--text-3); }
.hmt-stack { display: flex; gap: 2px; height: 16px; border-radius: 6px; background: var(--viz-track); overflow: hidden; }
.hmt-stack i { width: var(--w); border-radius: 4px; transform-origin: left; animation: hmt-grow .9s var(--ease) both; }
.hmt-stack i.is-cert, .hmt-prog-l i.is-cert { background: var(--viz-cert); }
.hmt-stack i.is-done, .hmt-prog-l i.is-done { background: var(--viz-done); }
.hmt-stack i.is-go, .hmt-prog-l i.is-go { background: var(--viz-go); }
.hmt-prog-l { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 12.5px; color: var(--text-2); }
.hmt-prog-l span { display: inline-flex; align-items: center; gap: 6px; }
.hmt-prog-l b { font-weight: 650; color: var(--text); }
.hmt-prog-l i { width: 10px; height: 10px; border-radius: 3px; background: var(--viz-track); }

/* Niveaux */
.hmt-levels { flex: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; align-items: end; min-height: 170px; }
.hmt-lv { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 6px; height: 100%; }
.hmt-lv-v { font-size: 13.5px; font-weight: 700; color: var(--text); }
.hmt-lv-bar { position: relative; width: 100%; max-width: 46px; height: 100%; min-height: 110px; border-radius: 6px; background: var(--viz-track); }
.hmt-lv-bar i { position: absolute; inset: auto 0 0; height: var(--h); min-height: 3px; border-radius: 4px; background: var(--viz-1); transform-origin: bottom; animation: hmt-rise .9s var(--ease) both; }
.hmt-lv-l { font-size: 11.5px; color: var(--text-2); text-align: center; }
@keyframes hmt-rise { from { transform: scaleY(0); } }
.hmt-foot { margin-top: 14px; font-size: 12.5px; color: var(--text-3); }
.hmt-foot b { color: var(--text); }
.hmt-empty { flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; padding: 4px 0; }
.hmt-empty-ic { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: var(--text-3); background: var(--viz-track); }
.hmt-empty-ic .ic { width: 17px; height: 17px; }
.hmt-empty p { font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.hmt-empty b { display: block; margin-bottom: 4px; color: var(--text); }

/* Tableau par service ou par entreprise */
.hmt-table { display: grid; }
.hmt-tr { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: 12px; align-items: center; padding: 12px 4px; border-top: 1px solid var(--stroke); font-size: 13.5px; }
.hmt-tr.is-head { border-top: 0; padding-top: 0; font-size: 12px; font-weight: 650; color: var(--text-3); }
.hmt-tr b { font-weight: 650; }
.hmt-tr small { color: var(--text-3); }
.hmt-tr > span { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hmt-mini { width: 56px; height: 6px; border-radius: 99px; background: var(--viz-track); overflow: hidden; }
.hmt-mini i { display: block; width: var(--w); height: 100%; border-radius: inherit; background: var(--viz-1); }

.hmt-lock { display: flex; align-items: flex-start; gap: 8px; margin-top: 14px; font-size: 12.5px; line-height: 1.5; color: var(--text-3); }
.hmt-lock .ic { flex: none; width: 14px; height: 14px; margin-top: 2px; }
.hmt-anon { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 22px; font-size: 12.5px; color: var(--text-3); }
.hmt-anon .ic { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) { .hmt-f-bar i, .hmt-stack i, .hmt-lv-bar i { animation: none; } }

@media (max-width: 980px) {
  .hmt-hero, .hmt-path, .hmt-pg, .hmt-lvl { grid-column: 1 / -1; }
  .hmt-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .hmt-funnel li { grid-template-columns: minmax(0, 1fr) 70px; }
  .hmt-f-bar { grid-column: 1 / -1; grid-row: 2; }
  .hmt-tr { grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); }
  .hmt-tr > span:nth-child(4), .hmt-tr > span:nth-child(5) { display: none; }
}

/* ==========================================================================
   v50 · Profil avant le diagnostic
   ========================================================================== */
.pf0-hero { padding-top: clamp(40px, 6vw, 80px); }
.pf0-av { width: 76px; height: 76px; display: grid; place-items: center; border-radius: 26px; font-size: 26px; font-weight: 750; letter-spacing: -.02em; color: #fff; background: var(--grad); box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--g2) 80%, transparent); }
.pf0-name { margin-top: 16px; font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.pf0-who { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; margin-top: 6px; font-size: 13.5px; color: var(--text-3); }
.pf0-who i, .pf0-meta i { width: 3px; height: 3px; border-radius: 50%; background: var(--stroke-2); }
.pf0-hero h1 { margin-top: 26px; }
.pf0-cta { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 30px; }
.pf0-meta { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 10px; font-size: 13.5px; color: var(--text-3); }
.pf0-meta a { font-weight: 650; color: var(--accent); }

/* Aperçu de ce que dessinera le diagnostic : formes vides, aucun chiffre inventé */
.pf0-preview { position: relative; margin-top: clamp(44px, 6vw, 76px); padding: clamp(28px, 4vw, 48px); overflow: hidden; isolation: isolate; }
.pf0-preview::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(50% 70% at 50% 0%, color-mix(in srgb, var(--g1) 9%, transparent), transparent 70%); }
.pf0-badge { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 11.5px; font-weight: 650; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.pf0-badge .ic { width: 15px; height: 15px; }
.pf0-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin-top: 32px; }
.pf0-col h3 { margin-top: 24px; font-size: 18px; font-weight: 720; letter-spacing: -.025em; }
.pf0-col p { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.pf0-viz { position: relative; height: 190px; display: grid; place-items: center; border-radius: var(--r-l); background: var(--card-inset); border: 1px dashed var(--stroke-2); }
.pf0-viz.is-level { grid-template-rows: 1fr auto auto; gap: 10px; padding: 20px 24px 18px; }
.pf0-ring { width: 92px; height: 92px; display: grid; place-content: center; justify-items: center; border-radius: 50%; border: 8px solid color-mix(in srgb, var(--text) 8%, transparent); }
.pf0-ring b { font-size: 26px; font-weight: 750; color: var(--text-3); line-height: 1; }
.pf0-ring small { font-size: 10.5px; color: var(--text-3); }
.pf0-scale { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; width: 100%; }
.pf0-scale i { height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--text) 9%, transparent); }
.pf0-scale-l { display: flex; justify-content: space-between; width: 100%; font-size: 11.5px; color: var(--text-3); }
.pf0-viz.is-domains { align-content: center; gap: 11px; padding: 20px 24px; place-items: stretch; }
.pf0-dom { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 10px; }
.pf0-dom small { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf0-dom i { position: relative; height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--text) 8%, transparent); overflow: hidden; }
.pf0-dom i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--g1) 30%, transparent), transparent); transform: translateX(-100%); animation: pf0-sheen 2.8s var(--ease) infinite; animation-delay: calc(var(--i) * 160ms); }
@keyframes pf0-sheen { 60%, 100% { transform: translateX(100%); } }
.pf0-viz.is-family { overflow: hidden; }
.pf0-hex { width: 74px; height: 84px; display: grid; place-items: center; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: color-mix(in srgb, var(--text) 8%, transparent); }
.pf0-hex b { font-size: 26px; font-weight: 750; color: var(--text-3); }
.pf0-fam { position: absolute; left: 50%; top: 50%; font-size: 11.5px; font-weight: 600; color: var(--text-3); white-space: nowrap; transform: translate(-50%, -50%) rotate(var(--a)) translateY(-70px) rotate(calc(-1 * var(--a))); }
@media (prefers-reduced-motion: reduce) { .pf0-dom i::after { animation: none; } }

/* Déjà à votre actif, et le contexte */
.pf0-acc, .pf0-env { margin-top: clamp(56px, 7vw, 96px); }
.pf0-acc .dg2-head, .pf0-env .dg2-head { text-align: center; }
.pf0-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 30px; }
.pf0-tiles .hmt-tile { background: var(--card); }
.pf0-tiles .hmt-tile b i { font-style: normal; font-size: .55em; font-weight: 650; color: var(--text-3); }
.pf0-stamps { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 26px; }
.pf0-stamp { transition: transform .35s var(--spring); }
.pf0-stamp:hover { transform: translateY(-3px) rotate(-3deg); }
.pf0-stamp svg { width: 84px; height: auto; }
.pf0-env .env-card { margin-top: 30px; }

@media (max-width: 900px) {
  .pf0-cols { grid-template-columns: minmax(0, 1fr); }
  .pf0-tiles { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   v51 · Apprendre : reprendre, explorer, terminés
   ========================================================================== */
.lx2-hero { padding-bottom: 8px; }
.lx2-search { position: relative; display: flex; align-items: center; gap: 12px; width: min(640px, 100%); margin: 34px auto 0; padding: 0 16px 0 22px; height: 60px; border-radius: 99px; background: var(--card-strong); border: 1px solid var(--stroke-2); box-shadow: var(--shadow); cursor: text; transition: border-color .25s var(--ease), box-shadow .25s var(--ease); }
.lx2-search:focus-within { border-color: color-mix(in srgb, var(--accent) 60%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent), var(--shadow); }
.lx2-search > .ic { width: 20px; height: 20px; flex: none; color: var(--text-3); }
.lx2-search input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: inherit; font-size: 16.5px; color: var(--text); }
.lx2-search input::placeholder { color: var(--text-3); }
.lx2-search input::-webkit-search-cancel-button { cursor: pointer; }
.lx2-search kbd { flex: none; display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 8px; border: 1px solid var(--stroke-2); font: 600 12.5px/1 var(--font); color: var(--text-3); }
.lx2-search:focus-within kbd { display: none; }
.lx2-hero .dg2-meta { margin-top: 18px; }

.lx2-sec { margin-top: clamp(56px, 7vw, 88px); scroll-margin-top: 90px; }
.lx2-h { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--stroke); }
.lx2-h h2 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 740; letter-spacing: -.04em; }
.lx2-n { font-size: 14px; color: var(--text-3); white-space: nowrap; }
.lx2-sec .lx-list { margin-top: 24px; }

/* Carte « en cours », version resserrée */
.lxc.is-compact { padding: clamp(22px, 3vw, 36px) clamp(22px, 3.4vw, 40px) 24px; }
.lxc.is-compact .lxc-top { grid-template-columns: minmax(0, 1fr) 200px; gap: 32px; }
.lxc.is-compact h3 { margin-top: 14px; font-size: clamp(26px, 2.8vw, 36px); }
.lxc.is-compact .lxc-desc { margin-top: 10px; font-size: 15.5px; }
.lxc.is-compact .lxc-stats { margin-top: 18px; }
.lxc.is-compact .lxc-stats dd { font-size: 24px; }
.lxc.is-compact .fam-counts { margin-top: 14px; }
.lxc.is-compact .lxc-cta { margin-top: 20px; }
.lxc.is-compact .lxc-medal::before { top: 64px; width: 190px; height: 190px; }

/* Barre de filtres */
.lx2-h.is-tools { align-items: center; justify-content: flex-start; flex-wrap: wrap; row-gap: 12px; }
.lx2-h.is-tools .lx2-tools { margin-left: auto; }
.lx2-bar { margin-top: 18px; }
.lx2-tools { flex: none; display: flex; gap: 10px; }

/* Catégories : quatre cartes sélectionnables, chacune dit ce qu’elle contient */
.lx2-cats { display: grid; grid-template-columns: minmax(0, .8fr) repeat(3, minmax(0, 1fr)); gap: 10px; }
.lx2-cat { --hue: var(--text-3); display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--r-l); border: 1px solid var(--stroke); background: var(--card); font: inherit; text-align: left; color: var(--text); cursor: pointer; transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); }
.lx2-cat:hover { border-color: var(--stroke-2); }
.lx2-cat:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lx2-cat-ic { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 11px; color: var(--hue); background: color-mix(in srgb, var(--hue) 12%, transparent); }
.lx2-cat.is-all .lx2-cat-ic { color: var(--text-2); background: var(--card-inset); }
.lx2-cat-ic .ic { width: 17px; height: 17px; }
.lx2-cat-t { display: grid; gap: 3px; min-width: 0; }
.lx2-cat-t b { display: flex; align-items: baseline; gap: 8px; font-size: 15px; font-weight: 700; letter-spacing: -.015em; }
.lx2-cat-t b span { font-size: 12.5px; font-weight: 600; color: var(--text-3); }
.lx2-cat-t small { font-size: 12.5px; line-height: 1.45; color: var(--text-3); }
.lx2-cat[aria-pressed="true"] { border-color: color-mix(in srgb, var(--hue) 55%, transparent); background: color-mix(in srgb, var(--hue) 6%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hue) 55%, transparent); }
.lx2-cat.is-all[aria-pressed="true"] { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); background: var(--card); }

/* Tuiles du catalogue.
   Chaque tuile occupe 7 rangées de la grille parente (subgrid) : couverture, titre, description, niveaux,
   aperçu, chiffres, prérequis. Les éléments sont donc alignés d’une tuile à l’autre, quelle que soit la longueur des textes. */
.lx2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); column-gap: 18px; row-gap: 0; margin-top: 22px; }
.lxt { --hue: var(--accent); --pad: 22px; position: relative; display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 12px; margin-bottom: 18px; padding-bottom: 18px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--stroke); color: inherit; text-decoration: none; overflow: hidden; isolation: isolate; transition: border-color .25s var(--ease), transform .35s var(--spring), box-shadow .25s var(--ease); }
.lxt > :not(.lxt-cover):not(.lxt-bar) { margin-inline: var(--pad); min-width: 0; }
a.lxt:hover { border-color: color-mix(in srgb, var(--hue) 40%, var(--stroke-2)); transform: translateY(-3px); box-shadow: 0 22px 44px -26px color-mix(in srgb, var(--hue) 55%, transparent); }
a.lxt:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Couverture */
.lxt-cover { position: relative; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto 1fr auto; height: 128px; margin-bottom: 14px; padding: 14px 16px 0 var(--pad); color: var(--hue); background:
  radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--hue) 26%, transparent), transparent 60%),
  linear-gradient(160deg, color-mix(in srgb, var(--hue) 14%, var(--card)), color-mix(in srgb, var(--hue) 4%, var(--card)));
  border-bottom: 1px solid color-mix(in srgb, var(--hue) 16%, var(--stroke)); }
.lxt-art { position: absolute; inset: 0 0 0 30%; width: 70%; height: 100%; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); }
.lxt-art polygon { fill: none; stroke: currentColor; stroke-width: .8; stroke-opacity: .55; }
.lxt-art polygon.mid { fill: color-mix(in srgb, currentColor 16%, transparent); }
.lxt-art polygon.lit { fill: currentColor; stroke: none; }
a.lxt .lxt-art polygon.lit { transition: transform .5s var(--spring); transform-box: fill-box; transform-origin: center; }
a.lxt:hover .lxt-art polygon.lit { transform: scale(.8); }
.lxt-cat { position: relative; grid-column: 1; align-self: start; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 8px; border-radius: 99px; background: color-mix(in srgb, var(--card) 78%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 12px; font-weight: 700; color: var(--hue); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hue) 22%, transparent); }
.lxt-cat .ic { width: 13px; height: 13px; }
.lxt-b { position: relative; grid-column: 3; align-self: start; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 99px; font-size: 12px; font-weight: 700; white-space: nowrap; background: var(--card); box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .25); }
.lxt-b .ic { width: 13px; height: 13px; }
.lxt-b.is-reco { color: #fff; background: var(--grad); }
.lxt-b.is-go { color: var(--warn); }
.lxt-b.is-done { color: var(--good); }
.lxt-b.is-soon { color: var(--text-2); }
.lxt-ic { position: relative; grid-column: 1; grid-row: 3; display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: -22px; border-radius: 18px; color: #fff; background: linear-gradient(145deg, color-mix(in srgb, var(--hue) 78%, #fff), var(--hue) 60%, color-mix(in srgb, var(--hue) 70%, #000)); box-shadow: 0 0 0 4px var(--card), 0 14px 26px -12px color-mix(in srgb, var(--hue) 80%, transparent); }
.lxt-ic .ic { width: 26px; height: 26px; stroke-width: 1.7; }
.lxt-tags { position: relative; grid-column: 2 / 4; grid-row: 3; align-self: end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; height: 22px; overflow: hidden; margin: 0 0 10px 12px; }
.lxt-tags span { flex: none; height: 22px; display: inline-flex; align-items: center; padding: 0 9px; border-radius: 99px; font-size: 11.5px; font-weight: 650; color: var(--hue); background: color-mix(in srgb, var(--card) 80%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }

/* Texte */
.lxt-t { align-self: end; padding-top: 6px; font-size: 21px; font-weight: 740; letter-spacing: -.035em; line-height: 1.18; text-wrap: balance; }
.lxt-d { min-height: calc(2 * 1.55em); font-size: 14px; line-height: 1.55; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lxt-lv { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 650; color: var(--text-2); }
.lxt-g { display: grid; grid-template-columns: repeat(5, 16px); gap: 3px; }
.lxt-g i { height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--text) 9%, transparent); }
.lxt-g i.on { background: var(--hue); }
.lxt-g i.on:first-child, .lxt-g i:not(.on) + i.on { box-shadow: 0 0 10px -1px color-mix(in srgb, var(--hue) 70%, transparent); }

/* Aperçu des modules, ou programme en préparation */
.lxt-mods, .lxt-wip { align-self: stretch; border-radius: 14px; background: var(--card-inset); }
.lxt-mods { display: grid; align-content: start; gap: 0; margin: 0; padding: 6px 0; list-style: none; }
.lxt-mods li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 6px 12px; font-size: 13px; }
.lxt-mods li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 550; }
.lxt-mods li small { font-size: 12px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.lxt-mods li > i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-style: normal; font-size: 10.5px; font-weight: 750; color: var(--text-3); box-shadow: inset 0 0 0 1.5px var(--stroke-2); background: var(--card); }
.lxt-mods li > i .ic { width: 11px; height: 11px; stroke-width: 3; }
.lxt-mods li.is-voir > i { color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.lxt-mods li.is-cons > i { color: var(--warn); box-shadow: inset 0 0 0 1.5px var(--warn); }
.lxt-mods li.is-mai > i { color: var(--good); box-shadow: inset 0 0 0 1.5px var(--good); }
.lxt-mods li.is-done > i { color: var(--good); background: var(--good-soft); box-shadow: none; }
.lxt-mods li.is-won > i { color: #fff; background: var(--good); box-shadow: none; }
.lxt-mods li.lxt-more { display: block; padding: 5px 12px 4px 42px; font-size: 12.5px; color: var(--text-3); }
.lxt-wip { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px dashed color-mix(in srgb, var(--hue) 30%, var(--stroke-2)); background: color-mix(in srgb, var(--hue) 4%, transparent); }
.lxt-wip-ic { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 12px; color: var(--hue); background: color-mix(in srgb, var(--hue) 12%, transparent); }
.lxt-wip-ic .ic { width: 17px; height: 17px; }
.lxt-wip > span:last-child { display: grid; gap: 2px; }
.lxt-wip b { font-size: 14px; font-weight: 700; }
.lxt-wip small { font-size: 12.5px; line-height: 1.45; color: var(--text-3); }

/* Chiffres */
.lxt-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-self: start; padding-top: 12px; border-top: 1px solid var(--stroke); }
.lxt-stats > span { display: grid; grid-template-columns: auto 1fr; column-gap: 7px; align-items: center; padding: 0 10px; border-left: 1px solid var(--stroke); }
.lxt-stats > span:first-child { padding-left: 0; border-left: 0; }
.lxt-stats .ic { grid-row: span 2; width: 16px; height: 16px; color: var(--hue); }
.lxt-stats b { font-size: 17px; font-weight: 740; letter-spacing: -.03em; line-height: 1.15; color: var(--text); }
.lxt-stats small { grid-column: 2; font-size: 11.5px; line-height: 1.3; color: var(--text-3); }
.lxt-stats .is-hl b { color: var(--accent); }

/* Prérequis */
.lxt-pre { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.5; color: var(--text-2); }
.lxt-pre > .ic { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--text-3); }
.lxt-pre small { font-size: 12.5px; color: var(--text-3); }
.lxt-pre b { font-weight: 650; color: var(--text); }
.lxt-pre b.is-ok { color: var(--good); }
.lxt-pre b .ic { width: 12px; height: 12px; margin-right: 3px; vertical-align: -1px; }
.lxt-pre i { font-style: normal; color: var(--text-3); }
.lxt-pre.is-none, .lxt-pre.is-none > .ic { color: var(--text-3); }

.lxt-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: color-mix(in srgb, var(--text) 6%, transparent); }
.lxt-bar i { display: block; width: var(--w); height: 100%; background: var(--hue); }
.lxt.is-soon { background: color-mix(in srgb, var(--card) 55%, transparent); border-style: dashed; border-color: color-mix(in srgb, var(--hue) 22%, var(--stroke-2)); }
.lxt.is-soon .lxt-cover { filter: saturate(.75); }
.lxt.is-soon .lxt-t { color: var(--text-2); }

/* Modules trouvés par la recherche */
.lx2-mods { margin-top: 28px; border-radius: var(--r-l); border: 1px solid var(--stroke); background: var(--card); overflow: hidden; }
.lx2-mods-k { padding: 14px 20px; font-size: 13px; font-weight: 650; color: var(--text-3); border-bottom: 1px solid var(--stroke); }
.lx2-mod { display: flex; align-items: center; gap: 14px; padding: 13px 20px; color: inherit; text-decoration: none; transition: background .2s var(--ease); }
.lx2-mod + .lx2-mod { border-top: 1px solid var(--stroke); }
.lx2-mod:hover { background: var(--card-hover); }
.lx2-mod > .ic { width: 16px; height: 16px; flex: none; color: var(--text-3); }
.lx2-mod-ic { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 10px; background: var(--card-inset); color: var(--text-3); }
.lx2-mod-ic .ic { width: 14px; height: 14px; }
.lx2-mod-ic[class*="t-"] { background: var(--good-soft); color: var(--good); }
.lx2-mod-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.lx2-mod-t b { font-size: 15px; font-weight: 650; letter-spacing: -.01em; }
.lx2-mod-t small { font-size: 13px; color: var(--text-3); }

.lx2-empty { display: grid; justify-items: center; gap: 8px; margin-top: 22px; padding: 48px 24px; border-radius: var(--r-l); border: 1px dashed var(--stroke-2); text-align: center; }
.lx2-empty-ic { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 6px; border-radius: 16px; background: var(--card-inset); color: var(--text-3); }
.lx2-empty-ic .ic { width: 22px; height: 22px; }
.lx2-empty b { font-size: 18px; font-weight: 700; }
.lx2-empty p { max-width: 30rem; font-size: 14.5px; color: var(--text-2); }
.lx2-empty .btn { margin-top: 10px; }

/* Étagère des programmes terminés */
.lx2-done { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 12px; margin-top: 22px; }
.lx2-d { display: flex; align-items: center; gap: 16px; padding: 14px 18px 14px 14px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--stroke); color: inherit; text-decoration: none; transition: border-color .25s var(--ease); }
.lx2-d:hover { border-color: var(--stroke-2); }
.lx2-d-m { flex: none; line-height: 0; }
.lx2-d-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.lx2-d-t small { font-size: 12.5px; color: var(--text-3); }
.lx2-d-t b { font-size: 16.5px; font-weight: 700; letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lx2-d-t span { font-size: 13.5px; color: var(--text-2); }
.lx2-d-cert { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--stroke-2); font-size: 13.5px; font-weight: 650; color: var(--text); cursor: pointer; transition: background .2s var(--ease); }
.lx2-d-cert:hover { background: var(--card-hover); }
.lx2-d-cert .ic { width: 15px; height: 15px; }
.lx2-d-more { grid-column: 1 / -1; justify-self: center; margin-top: 6px; }

/* Comment ça marche, en une ligne */
.lx2-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin-top: clamp(64px, 8vw, 104px); padding-top: 28px; border-top: 1px solid var(--stroke); }
.lx2-how > div { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 4px; align-items: start; align-content: start; }
.lx2-how-ic { grid-row: span 2; align-self: start; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--card-inset); color: var(--accent); }
.lx2-how-ic .ic { width: 18px; height: 18px; }
.lx2-how b { padding-top: 8px; font-size: 15.5px; font-weight: 700; }
.lx2-how p { grid-column: 2; font-size: 14px; line-height: 1.55; color: var(--text-2); }

@media (max-width: 960px) {
  .lx2-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lxc.is-compact .lxc-top { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .lx2-how { grid-template-columns: 1fr; }
  .lx2-h.is-tools .lx2-tools { width: 100%; margin-left: 0; }
  .lx2-tools .dd { flex: 1; }
}
@media (max-width: 560px) {
  .lx2-cats { display: flex; overflow-x: auto; margin: 0 -16px; padding: 2px 16px; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; }
  .lx2-cats::-webkit-scrollbar { display: none; }
  .lx2-cat { flex: 0 0 72%; scroll-snap-align: start; }
  .lx2-cat.is-all { flex-basis: 52%; }
  .lx2-search { height: 54px; padding-left: 18px; }
  .lx2-search kbd { display: none; }
  .lx2-d { flex-wrap: wrap; }
  .lx2-d-t { flex-basis: calc(100% - 80px); }
  .lx2-d-t b { white-space: normal; }
  .lx2-d-cert { margin-left: 80px; }
  .lxc.is-compact .lxp.is-compact { margin-top: 22px; }
}

/* ==========================================================================
   v52 · Pratiquer en onglets, Mes prompts
   ========================================================================== */
.pxh .dg2-lead { max-width: 40rem; }

/* Onglets : trois cartes sélectionnables, collées sous l’en-tête au défilement */
.px-tabs { position: sticky; top: calc(var(--nav-h, 76px) + 10px); z-index: 20; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: clamp(36px, 5vw, 56px); padding: 6px; border-radius: 22px; background: color-mix(in srgb, var(--card-strong) 82%, transparent); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border: 1px solid var(--stroke); box-shadow: var(--shadow); }
.px-tab { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 14px; border-radius: 16px; font: inherit; text-align: left; color: var(--text-2); cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease); }
.px-tab:hover { color: var(--text); background: var(--card-inset); }
.px-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.px-tab-ic { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px; color: var(--text-3); background: var(--card-inset); transition: color .25s, background .25s; }
.px-tab-ic .ic { width: 18px; height: 18px; }
.px-tab-t { display: grid; gap: 1px; min-width: 0; }
.px-tab-t b { display: flex; align-items: baseline; gap: 8px; font-size: 15.5px; font-weight: 700; letter-spacing: -.02em; color: inherit; }
.px-tab-n { font-size: 12.5px; font-weight: 650; color: var(--text-3); }
.px-tab-t small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--text-3); }
.px-tab[aria-selected="true"] { color: var(--text); background: var(--card); box-shadow: 0 1px 0 var(--stroke), 0 10px 24px -14px rgba(0, 0, 0, .35); }
.px-tab[aria-selected="true"] .px-tab-ic { color: #fff; background: var(--grad); }
.px-tab[aria-selected="true"] .px-tab-n { color: var(--accent); }
.px-panel { scroll-margin-top: 160px; }
.px-panel > .pxd { margin-top: 28px; }
.px-sec { margin-top: 40px; }
.px-panel > .px-sec:first-child { margin-top: 36px; }
.px-h { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 24px; row-gap: 6px; padding-bottom: 16px; border-bottom: 1px solid var(--stroke); }
.px-h h2 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 740; letter-spacing: -.04em; }
.px-h p { grid-column: 1; max-width: 46rem; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.px-h > .pxp-tools, .px-h > .mpr-new { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin: 0; justify-content: flex-end; }
#bibliotheque .pxv { margin-top: 24px; }

/* Signet d’enregistrement */
.pc-fav.is-on, .sp-fav.is-on { color: var(--accent); }
.pc-fav.is-on .ic, .sp-fav.is-on .ic { fill: var(--accent); }

/* Mes prompts */
.mpr-bar { display: flex; align-items: center; gap: 12px 16px; margin-top: 22px; }
.mpr-seg { flex: none; display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--card-inset); border: 1px solid var(--stroke); }
.mpr-seg button { white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; border-radius: 10px; font: inherit; font-size: 14px; font-weight: 600; color: var(--text-2); cursor: pointer; transition: background .2s, color .2s; }
.mpr-seg button span { font-size: 12.5px; color: var(--text-3); }
.mpr-seg button[aria-pressed="true"] { color: var(--text); background: var(--card); box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .25); }
.mpr-seg button[aria-pressed="true"] span { color: var(--accent); }
.mpr-search { flex: 1; min-width: 240px; height: 48px; }
.mpr-group { margin-top: 30px; }
.mpr-gh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 14px; }
.mpr-gh h3 { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 720; letter-spacing: -.02em; }
.mpr-gh h3 .ic { width: 16px; height: 16px; color: var(--accent); }
.mpr-gh span { font-size: 13.5px; color: var(--text-3); }
.mpr-priv { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 99px; font-size: 11.5px; font-weight: 700; color: var(--text-2); background: var(--card-inset); box-shadow: inset 0 0 0 1px var(--stroke); }
.mpr-priv .ic { width: 11px; height: 11px; }
.pc-head .mpr-priv { margin-left: auto; }
.pxc.is-own { background: linear-gradient(180deg, color-mix(in srgb, var(--app) 6%, var(--card)), var(--card) 40%); }
.mpr-add { display: flex; align-items: center; gap: 16px; width: 100%; padding: 20px 22px; border-radius: var(--r-l); border: 1px dashed var(--stroke-2); font: inherit; text-align: left; color: var(--text); cursor: pointer; transition: border-color .2s, background .2s; }
.mpr-add:hover { border-color: var(--accent); background: var(--accent-soft); }
.mpr-add > span:last-child { display: grid; gap: 2px; }
.mpr-add b { font-size: 15px; font-weight: 700; }
.mpr-add small { font-size: 13.5px; color: var(--text-3); }
.mpr-e-ic { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 14px; }
.mpr-e-ic .ic { width: 20px; height: 20px; }
.mpr-e-ic.is-save { color: var(--accent); background: var(--accent-soft); }
.mpr-e-ic.is-own { color: #fff; background: var(--grad); box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--g2) 80%, transparent); }
.mpr-empty { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.mpr-e { display: grid; justify-items: start; align-content: start; gap: 10px; padding: clamp(24px, 3vw, 36px); }
.mpr-e .mpr-e-ic { width: 52px; height: 52px; border-radius: 16px; margin-bottom: 6px; }
.mpr-e h3 { font-size: 20px; font-weight: 730; letter-spacing: -.03em; }
.mpr-e p { max-width: 30rem; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.mpr-e .btn { margin-top: 10px; }

/* Feuille d’écriture */
.sheet-own .sheet-body { display: grid; gap: 18px; }
.sheet-prompt .sheet-body { align-content: start; }
.mpr-lock { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; color: var(--text-2); background: var(--good-soft); }
.mpr-lock .ic { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--good); }
.mpr-lock b { color: var(--text); }
.mpr-f { display: grid; gap: 8px; }
.mpr-f > span { font-size: 13px; font-weight: 650; color: var(--text-2); }
.mpr-f > span small { margin-left: 6px; font-weight: 500; color: var(--text-3); }
.mpr-f input, .mpr-f textarea { width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--stroke-2); background: var(--card-inset); font: inherit; font-size: 15px; line-height: 1.55; color: var(--text); resize: vertical; transition: border-color .2s, box-shadow .2s, background .2s; }
.mpr-f input { height: 48px; }
.mpr-f input:focus, .mpr-f textarea:focus { outline: none; border-color: var(--accent); background: var(--card-strong); box-shadow: 0 0 0 4px var(--accent-soft); }
.mpr-ta { border-radius: 14px; }
.mpr-ta textarea { min-height: 220px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.mpr-ta-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border: 1px solid var(--stroke-2); border-top: 0; border-radius: 0 0 14px 14px; background: var(--card); }
.mpr-ta-f .link-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
.mpr-ta-f .link-btn .ic { width: 14px; height: 14px; }
.mpr-count { font-size: 12px; color: var(--text-3); }
.mpr-vars { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--text-3); }
.mpr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mpr-chip { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px 0 5px; border-radius: 99px; border: 1px solid var(--stroke); background: var(--card); font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-2); cursor: pointer; transition: border-color .2s, background .2s, color .2s; }
.mpr-chip.is-plain { padding: 0 14px; }
.mpr-chip .pxa-ic { width: 26px; height: 26px; }
.mpr-chip:hover { border-color: var(--stroke-2); color: var(--text); }
.mpr-chip[aria-checked="true"] { color: var(--text); border-color: color-mix(in srgb, var(--app, var(--accent)) 55%, transparent); background: color-mix(in srgb, var(--app, var(--accent)) 9%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--app, var(--accent)) 55%, transparent); }
.mpr-err { padding: 10px 14px; border-radius: 12px; font-size: 13.5px; color: var(--bad); background: var(--bad-soft); }
.sheet-own .sheet-foot .btn-glass[data-close] { margin-right: 0; }
.mpr-foot-sp { flex: 1; }
.mpr-del { color: var(--bad); }
.mpr-del.is-confirm { font-weight: 700; }

@media (max-width: 860px) {
  .px-tab-t small { display: none; }
  .px-tab { justify-content: center; padding: 8px; gap: 8px; }
  .px-tab-ic { width: 32px; height: 32px; border-radius: 10px; }
  .px-h { grid-template-columns: 1fr; }
  .px-h > .pxp-tools, .px-h > .mpr-new { grid-column: 1; grid-row: auto; justify-content: flex-start; margin-top: 10px; }
  .mpr-empty { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .px-tabs { gap: 2px; padding: 4px; border-radius: 18px; }
  .px-tab { flex-direction: column; gap: 4px; padding: 8px 4px; }
  .px-tab-t { justify-items: center; }
  .px-tab-t b { font-size: 13px; gap: 5px; }
  .mpr-bar { flex-wrap: wrap; }
  .mpr-seg { width: 100%; }
  .mpr-seg button { flex: 1; justify-content: center; padding: 0 6px; font-size: 13px; }
  .mpr-search { min-width: 0; width: 100%; flex: none; }
}

/* ==========================================================================
   v53 · Apprendre : tuile d’un programme terminé (couleur de la distinction)
   ========================================================================== */
.lxt.is-done { --tone: var(--t-lo); border-color: color-mix(in srgb, var(--t-mid) 55%, var(--stroke)); background: linear-gradient(180deg, color-mix(in srgb, var(--t-mid) 7%, var(--card)), var(--card) 55%); }
a.lxt.is-done:hover { border-color: var(--t-mid); box-shadow: 0 22px 44px -26px color-mix(in srgb, var(--t-glow) 80%, transparent); }
.lxt.is-done .lxt-cover { color: var(--t-mid); background:
  radial-gradient(70% 120% at 18% 110%, color-mix(in srgb, var(--t-glow) 45%, transparent), transparent 60%),
  radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--t-mid) 30%, transparent), transparent 60%),
  linear-gradient(160deg, color-mix(in srgb, var(--t-hi) 55%, var(--card)), color-mix(in srgb, var(--t-mid) 18%, var(--card)));
  border-bottom-color: color-mix(in srgb, var(--t-mid) 40%, var(--stroke)); }
.lxt.is-done .lxt-art polygon.lit { fill: var(--t-mid); }
.lxt.is-done .lxt-art polygon { stroke: var(--t-lo); stroke-opacity: .35; }
.lxt.is-done .lxt-cat { color: var(--tone); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t-mid) 45%, transparent); }
.lxt.is-done .lxt-b.is-done { color: #fff; background: linear-gradient(135deg, var(--t-mid), var(--t-lo)); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--t-lo) 70%, transparent); }
.lxt.is-done .lxt-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .6) 50%, transparent 60%) 100% 0 / 300% 100% no-repeat; pointer-events: none; mix-blend-mode: soft-light; transition: background-position 1.2s var(--ease); }
a.lxt.is-done:hover .lxt-cover::after { background-position: 0 0; }
.lxt.is-done.t-argent { --tone: #4F5B6E; }
.lxt.is-done.t-argent .lxt-b.is-done { background: linear-gradient(135deg, #8E9AAB, #4F5B6E); }
.lxt-medal { position: relative; grid-column: 1; grid-row: 2 / 4; align-self: end; width: 96px; height: 96px; margin: 0 0 -30px -8px; line-height: 0; filter: drop-shadow(0 12px 18px color-mix(in srgb, var(--t-lo) 45%, transparent)); transition: transform .6s var(--spring); }
.lxt-medal svg { width: 100%; height: 100%; }
a.lxt.is-done:hover .lxt-medal { transform: rotate(-8deg) scale(1.05); }
.lxt.is-done .lxt-tags span { color: var(--tone); font-weight: 750; }
.lxt.is-done .lxt-g i.on { background: var(--t-mid); box-shadow: none; }
.lxt.is-done .lxt-stats .ic { color: var(--tone); }

/* Résultat : note finale, examen et quiz, distinctions des modules */
.lxt-res { display: grid; align-content: start; gap: 12px; padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--t-mid) 9%, var(--card-inset)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t-mid) 22%, transparent); }
.lxt-res-top { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px; }
.lxt-res-big { display: grid; }
.lxt-res-big b { font-size: 30px; font-weight: 780; letter-spacing: -.05em; line-height: 1; color: var(--tone); }
.lxt-res-big small { margin-top: 4px; font-size: 11.5px; color: var(--text-3); }
.lxt-res-bars { display: grid; gap: 7px; }
.lxt-res-bars > span { display: grid; grid-template-columns: 46px minmax(0, 1fr) 38px; align-items: center; gap: 8px; }
.lxt-res-bars small { font-size: 11.5px; color: var(--text-3); }
.lxt-res-bars i { height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--text) 9%, transparent); overflow: hidden; }
.lxt-res-bars i b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--t-mid), var(--t-lo)); }
.lxt-res-bars em { font-style: normal; font-size: 12px; font-weight: 700; text-align: right; color: var(--text-2); }
.lxt-res-mods { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.lxt-res-mods i { width: 14px; height: 14px; border-radius: 50%; background: color-mix(in srgb, var(--text) 10%, transparent); }
.lxt-res-mods i.t-or { background: radial-gradient(circle at 35% 30%, #FFF4CC, #E6B33E 55%, #946311); }
.lxt-res-mods i.t-argent { background: radial-gradient(circle at 35% 30%, #FFFFFF, #C3CCD8 55%, #6F7B8B); }
.lxt-res-mods i.t-bronze { background: radial-gradient(circle at 35% 30%, #FFE2C8, #D08A57 55%, #7A4122); }
.lxt-res-mods small { margin-left: 6px; font-size: 12px; color: var(--text-3); }

.lxt-certrow { align-items: center; }
.lxt-cert { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 99px; font-size: 12.5px; font-weight: 700; color: var(--text); background: var(--card); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--t-mid) 55%, var(--stroke-2)); cursor: pointer; transition: background .2s; }
.lxt-cert:hover { background: color-mix(in srgb, var(--t-mid) 14%, var(--card)); }
.lxt-cert .ic { width: 13px; height: 13px; }
.lxt-certrow > span:last-child { font-size: 12.5px; color: var(--text-3); }

@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lxt.is-done { --tone: var(--t-mid); } }
:root[data-theme="dark"] .lxt.is-done { --tone: var(--t-mid); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lxt.is-done.t-argent { --tone: #D5DCE6; } }
:root[data-theme="dark"] .lxt.is-done.t-argent { --tone: #D5DCE6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lxt.is-done .lxt-cover { background: radial-gradient(70% 120% at 18% 110%, color-mix(in srgb, var(--t-glow) 30%, transparent), transparent 60%), linear-gradient(160deg, color-mix(in srgb, var(--t-mid) 22%, var(--card)), color-mix(in srgb, var(--t-lo) 12%, var(--card))); } }
:root[data-theme="dark"] .lxt.is-done .lxt-cover { background: radial-gradient(70% 120% at 18% 110%, color-mix(in srgb, var(--t-glow) 30%, transparent), transparent 60%), linear-gradient(160deg, color-mix(in srgb, var(--t-mid) 22%, var(--card)), color-mix(in srgb, var(--t-lo) 12%, var(--card))); }


/* ==========================================================================
   v55 · Site vitrine en pages (préfixe vt-, barre de navigation de l’espace membre)
   ========================================================================== */
.vt { --vt-w: min(1200px, 100% - 48px); min-height: 100vh; overflow-x: clip; }
.vt-main > section, .vt-band { width: var(--vt-w); margin-inline: auto; }
.vt-k { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
/* Accroche */
.vt-hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: clamp(32px, 5vw, 72px); padding: clamp(40px, 7vw, 96px) 0 clamp(48px, 6vw, 80px); }
.vt-hero-art { position: absolute; z-index: -1; left: 66%; top: 50%; translate: -50% -50%; opacity: .16; pointer-events: none; -webkit-mask-image: radial-gradient(closest-side, #000 25%, transparent); mask-image: radial-gradient(closest-side, #000 25%, transparent); }
.vt-hero h1 { margin-top: 20px; font-size: clamp(38px, 4.7vw, 62px); font-weight: 760; letter-spacing: -.055em; line-height: 1.02; text-wrap: balance; }
.vt-hero h1 .grad-text { display: inline-block; }
.vt-lead { margin-top: 24px; max-width: 36rem; font-size: clamp(16px, 1.45vw, 18.5px); line-height: 1.62; color: var(--text-2); }
.vt-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.vt-ctas .btn .ic { width: 16px; height: 16px; }
.vt-hero-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 28px; padding: 0; list-style: none; font-size: 13.5px; color: var(--text-3); }
.vt-hero-facts li { display: inline-flex; align-items: center; gap: 7px; }
.vt-hero-facts .ic { width: 14px; height: 14px; color: var(--good); }

/* L’instrument */
.vt-inst { padding: 22px 24px 20px; border-radius: var(--r-xl); }
.vt-inst::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(140deg, color-mix(in srgb, var(--g1) 70%, transparent), transparent 40%, transparent 60%, color-mix(in srgb, var(--g3) 70%, transparent)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.vt-inst-h { display: flex; align-items: center; justify-content: space-between; }
.vt-inst-k { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 650; color: var(--text-3); }
.vt-inst-k .ic { width: 16px; height: 16px; color: var(--accent); }
.vt-live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 650; color: var(--text-2); }
.vt-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 4px var(--good-soft); }
.vt-dial-w { position: relative; margin: 6px auto 0; max-width: 420px; }
.vt-dial { display: block; width: 100%; overflow: visible; }
.vt-track { fill: none; stroke: color-mix(in srgb, var(--text) 7%, transparent); stroke-width: 18; }
.vt-seg { fill: none; stroke-width: 18; stroke-linecap: butt; opacity: .9; }
.vt-seg.s1 { stroke: color-mix(in srgb, var(--g1) 30%, transparent); }
.vt-seg.s2 { stroke: color-mix(in srgb, var(--g1) 55%, transparent); }
.vt-seg.s3 { stroke: color-mix(in srgb, var(--g2) 70%, transparent); }
.vt-seg.s4 { stroke: color-mix(in srgb, var(--g2) 85%, var(--g3)); }
.vt-seg.s5 { stroke: color-mix(in srgb, var(--g3) 85%, transparent); }
.vt-margin { fill: none; stroke: var(--text); stroke-width: 30; opacity: 0; stroke-opacity: .14; transition: opacity .6s var(--ease) 1.9s; }
.vt-inst.is-on .vt-margin { opacity: 1; }
.vt-ticks line { stroke: var(--text-3); stroke-width: 1; opacity: .5; }
.vt-ticks line.is-major { stroke-width: 1.6; opacity: .8; }
.vt-lab { font: 600 10.5px var(--font); fill: var(--text-3); letter-spacing: -.01em; }
.vt-lab.l3 { fill: var(--text); font-weight: 750; }
.vt-needle { transform-origin: 160px 160px; transform: rotate(0deg); transition: transform 1.6s cubic-bezier(.2, .9, .25, 1.08) .5s; }
.vt-inst.is-on .vt-needle { transform: rotate(104.4deg); }
.vt-needle path { fill: var(--text); }
.vt-needle circle { fill: var(--bg); stroke: var(--text); stroke-width: 3.5; }
.vt-needle circle.vt-needle-c { fill: var(--g2); stroke: none; }
.vt-read { position: absolute; left: 50%; bottom: 4px; translate: -50% 0; display: grid; justify-items: center; text-align: center; }
.vt-read b { font-size: 48px; font-weight: 780; letter-spacing: -.05em; line-height: 1; }
.vt-read span { font-size: 12.5px; color: var(--text-3); }
.vt-read em { font-style: normal; font-weight: 700; color: var(--text-2); }
.vt-read strong { margin-top: 6px; font-size: 14px; font-weight: 700; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.vt-axes { display: grid; gap: 8px; margin-top: 30px; }
.vt-ax { display: grid; grid-template-columns: 112px minmax(0, 1fr) 28px; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-2); }
.vt-ax i { height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--text) 8%, transparent); overflow: hidden; }
.vt-ax b { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--grad); transition: width 1.2s var(--ease); }
.vt-inst.is-on .vt-ax b { width: var(--w); }
.vt-ax:nth-child(2) b { transition-delay: .1s; } .vt-ax:nth-child(3) b { transition-delay: .2s; } .vt-ax:nth-child(4) b { transition-delay: .3s; } .vt-ax:nth-child(5) b { transition-delay: .4s; }
.vt-ax em { font-style: normal; font-weight: 700; text-align: right; color: var(--text); }
.vt-proofs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--stroke); }
.vt-proof { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 11px 0 8px; border-radius: 99px; font-size: 12.5px; font-weight: 650; color: var(--text-3); background: var(--card-inset); transition: color .4s, background .4s; transition-delay: calc(2.2s + var(--i) * .25s); }
.vt-proof .ic { width: 13px; height: 13px; }
.vt-inst.is-done .vt-proof { color: var(--good); background: var(--good-soft); }

/* Chiffres */
.vt-band { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding: 22px 0; border-block: 1px solid var(--stroke); }
.vt-band > div { display: grid; align-content: start; gap: 2px; padding: 0 20px; border-left: 1px solid var(--stroke); }
.vt-band > div:first-child { border-left: 0; padding-left: 0; }
.vt-band b { font-size: clamp(26px, 2.8vw, 36px); font-weight: 760; letter-spacing: -.045em; line-height: 1.1; }
.vt-band span { font-size: 13.5px; line-height: 1.4; color: var(--text-3); }

/* Sections */
.vt-sec { margin-top: clamp(88px, 11vw, 148px); scroll-margin-top: 90px; }
.vt-head { display: grid; justify-items: center; gap: 14px; max-width: 48rem; margin: 0 auto; text-align: center; }
.vt-head h2, .vt-proof-g h2, .vt-try-l h2, .vt-contact-l h2 { font-size: clamp(30px, 3.6vw, 46px); font-weight: 740; letter-spacing: -.045em; line-height: 1.07; text-wrap: balance; }
.vt-head p:not(.vt-k) { font-size: 16.5px; line-height: 1.6; color: var(--text-2); text-wrap: balance; }

.vt-why-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 44px; }
.vt-stat { padding: 28px; }
.vt-stat b { display: block; font-size: clamp(44px, 5vw, 64px); font-weight: 780; letter-spacing: -.055em; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.vt-stat.is-text b { font-size: clamp(28px, 3vw, 36px); line-height: 1.15; }
.vt-stat p { margin-top: 14px; font-size: 15.5px; line-height: 1.55; color: var(--text-2); }
.vt-src { margin-top: 14px; font-size: 12.5px; color: var(--text-3); text-align: center; }

/* Méthode : quatre étapes, dans l’ordre */
.vt-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 48px 0 0; padding: 0; list-style: none; }
.vt-steps::before { content: ''; position: absolute; top: 27px; left: 12%; right: 12%; height: 2px; background: linear-gradient(90deg, var(--g1), var(--g2), var(--g3)); opacity: .35; }
.vt-step { position: relative; display: grid; align-content: start; justify-items: start; gap: 10px; padding: 0 6px; }
.vt-step-n { position: absolute; z-index: 1; top: -8px; left: 50px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 11.5px; font-weight: 750; color: var(--text); background: var(--card-strong); box-shadow: 0 0 0 3px var(--bg), inset 0 0 0 1px var(--stroke-2); }
.vt-step-ic { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; color: #fff; background: var(--grad); box-shadow: 0 0 0 6px var(--bg), 0 14px 28px -12px color-mix(in srgb, var(--g2) 80%, transparent); }
.vt-step:nth-child(1) .vt-step-ic { background: linear-gradient(140deg, var(--g1), color-mix(in srgb, var(--g1) 60%, var(--g2))); }
.vt-step:nth-child(2) .vt-step-ic { background: linear-gradient(140deg, color-mix(in srgb, var(--g1) 40%, var(--g2)), var(--g2)); }
.vt-step:nth-child(3) .vt-step-ic { background: linear-gradient(140deg, var(--g2), color-mix(in srgb, var(--g2) 50%, var(--g3))); }
.vt-step:nth-child(4) .vt-step-ic { background: linear-gradient(140deg, color-mix(in srgb, var(--g2) 30%, var(--g3)), var(--g3)); }
.vt-step-ic .ic { width: 24px; height: 24px; }
.vt-step h3 { margin-top: 10px; font-size: 21px; font-weight: 730; letter-spacing: -.03em; }
.vt-step p { font-size: 15px; line-height: 1.6; color: var(--text-2); }

/* Échelle */
.vt-lvls { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 48px; }
.vt-lvl { position: relative; display: grid; align-content: start; gap: 6px; padding: 18px 18px 22px; border-radius: var(--r-l); background: var(--card); border: 1px solid var(--stroke); }
.vt-lvl-bar { display: block; height: 6px; margin-bottom: 10px; border-radius: 99px; background: color-mix(in srgb, var(--text) 8%, transparent); overflow: hidden; }
.vt-lvl-bar i { display: block; height: 100%; border-radius: inherit; background: var(--grad); background-size: 500% 100%; }
.vt-lvl.l1 .vt-lvl-bar i { width: 20%; background-position: 0 0; } .vt-lvl.l2 .vt-lvl-bar i { width: 40%; background-position: 25% 0; } .vt-lvl.l3 .vt-lvl-bar i { width: 60%; background-position: 50% 0; } .vt-lvl.l4 .vt-lvl-bar i { width: 80%; background-position: 75% 0; } .vt-lvl.l5 .vt-lvl-bar i { width: 100%; background-position: 100% 0; }
.vt-lvl-n { font-size: 12px; font-weight: 650; color: var(--text-3); }
.vt-lvl h3 { font-size: 20px; font-weight: 740; letter-spacing: -.03em; }
.vt-lvl-tag { font-size: 14px; font-weight: 600; color: var(--text); }
.vt-lvl p:not(.vt-lvl-tag) { font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.vt-lvl.is-ref { border-color: color-mix(in srgb, var(--accent) 50%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent), 0 18px 40px -26px color-mix(in srgb, var(--g2) 80%, transparent); }
.vt-ref { position: absolute; top: -11px; right: 14px; padding: 3px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 700; color: #fff; background: var(--grad); }

.vt-pd { --app: var(--accent); overflow: hidden; }
.vt-pd-h { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--stroke); }
.vt-app { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 650; color: var(--text-2); }
.vt-app-ic { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 9px; color: var(--app); background: color-mix(in srgb, var(--app) 13%, transparent); }
.vt-app-ic .ic { width: 15px; height: 15px; }
.vt-pd-n { font-size: 12px; font-weight: 650; color: var(--text-3); }
.vt-pd-x { max-height: 360px; overflow: auto; padding: 18px 20px; font-size: 14px; line-height: 1.7; white-space: pre-wrap; color: var(--text-2); }
.vt-var { white-space: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 1px 6px; border-radius: 6px; font-weight: 650; color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent); transition: background .3s, color .3s; }
.vt-var.is-typing { box-shadow: inset 0 0 0 1.5px var(--accent); }
.vt-var.is-set { color: var(--text); background: color-mix(in srgb, var(--good) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--good) 35%, transparent); }
.vt-pd-f { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--stroke); background: var(--card-inset); }
.vt-pd-ok { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 650; color: var(--text-3); transition: color .3s; }
.vt-pd-ok .ic { width: 15px; height: 15px; }
.vt-pd.is-ready .vt-pd-ok { color: var(--good); }
.vt-ais { display: flex; gap: 5px; }
.vt-ais span { padding: 3px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 650; color: var(--text-2); background: var(--card); box-shadow: inset 0 0 0 1px var(--stroke); }
.vt-proc { padding: clamp(22px, 3vw, 36px); }
.vt-proc-h { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: start; }
.vt-proc-h h3 { margin-top: 8px; font-size: clamp(22px, 2.4vw, 30px); font-weight: 740; letter-spacing: -.035em; line-height: 1.15; }
.vt-proc-h p:not(.vt-k) { margin-top: 8px; font-size: 15px; color: var(--text-2); }
.vt-gain { display: grid; justify-items: end; text-align: right; }
.vt-gain b { font-size: clamp(30px, 3.4vw, 44px); font-weight: 780; letter-spacing: -.05em; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.vt-gain small { margin-top: 6px; font-size: 13px; color: var(--text-3); }
.vt-proc-s { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; margin: 30px 0 0; padding: 0; list-style: none; }
.vt-proc-s::before { content: ''; position: absolute; top: 19px; left: 20px; right: 20px; height: 2px; background: var(--stroke-2); }
.vt-proc-s li { position: relative; display: grid; gap: 4px; }
.vt-proc-dot { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 8px; border-radius: 13px; color: var(--app); background: var(--card-strong); box-shadow: 0 0 0 4px var(--bg), inset 0 0 0 1.5px color-mix(in srgb, var(--app) 45%, transparent); }
.vt-proc-dot .ic { width: 18px; height: 18px; }
.vt-proc-s small { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 650; color: var(--text-3); }
.vt-proc-s small .ic { width: 12px; height: 12px; color: var(--warn); }
.vt-proc-s b { font-size: 14px; font-weight: 680; line-height: 1.35; }
.vt-proc-out { display: flex; gap: 12px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--stroke); font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.vt-proc-out span { flex: none; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); padding-top: 2px; }
.vt-list { display: grid; gap: 14px; margin: 6px 0 8px; padding: 0; list-style: none; }
.vt-list li { display: flex; gap: 12px; font-size: 15px; line-height: 1.55; color: var(--text-2); }
.vt-list li > .ic { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--accent); }
.vt-list b { color: var(--text); }
.vt-list.is-small li { font-size: 14.5px; }
.vt-list.is-small li > .ic { width: 16px; height: 16px; color: var(--good); }
.vt-cert { position: relative; padding: 10px; border-radius: 22px; background: linear-gradient(140deg, color-mix(in srgb, var(--g1) 30%, var(--card)), var(--card) 40%, color-mix(in srgb, var(--g3) 26%, var(--card))); box-shadow: var(--shadow-lg, var(--shadow)); transform: rotate(-1.5deg); }
.vt-cert-in { display: grid; justify-items: center; gap: 6px; padding: 30px 28px 22px; border-radius: 14px; text-align: center; background: var(--bg); border: 1px solid var(--stroke); }
.vt-cert-top { display: flex; align-items: center; gap: 8px; width: 100%; font-size: 14px; font-weight: 700; }
.vt-cert-top em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.vt-cert-k { margin-top: 14px; font-size: 12.5px; color: var(--text-3); }
.vt-cert-name { font-size: 30px; font-weight: 760; letter-spacing: -.04em; }
.vt-cert-prog { font-size: 19px; font-weight: 700; letter-spacing: -.02em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.vt-cert-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--stroke); }
.vt-cert-row span { display: grid; gap: 2px; }
.vt-cert-row small { font-size: 11px; color: var(--text-3); }
.vt-cert-row b { font-size: 16px; font-weight: 740; }
.vt-cert-foot { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 16px; font-size: 11.5px; line-height: 1.5; text-align: left; color: var(--text-3); }
.vt-qr { display: grid; grid-template-columns: repeat(7, 5px); gap: 1px; padding: 4px; border-radius: 4px; background: #fff; }
.vt-qr i { width: 5px; height: 5px; background: #fff; }
.vt-qr i.on { background: #0A1020; }
.vt-cert-medal { position: absolute; right: -34px; bottom: -64px; line-height: 0; transform: rotate(8deg); filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .25)); }
.vt-team { padding: 22px; }
.vt-team-h { display: flex; align-items: center; gap: 12px; }
.vt-team-av { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: #fff; background: var(--grad); }
.vt-team-av .ic { width: 20px; height: 20px; }
.vt-team-h b { display: block; font-size: 16px; font-weight: 720; }
.vt-team-h small { font-size: 12.5px; color: var(--text-3); }
.vt-tag { margin-left: auto; padding: 4px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 650; color: var(--text-3); background: var(--card-inset); box-shadow: inset 0 0 0 1px var(--stroke); }
.vt-team-g { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 12px; margin-top: 18px; }
.vt-tile, .vt-funnel, .vt-lv { padding: 16px; border-radius: 16px; background: var(--card-strong); border: 1px solid var(--stroke); }
.vt-tile { display: grid; align-content: start; gap: 6px; }
.vt-tile small, .vt-funnel p, .vt-lv p { font-size: 12.5px; font-weight: 650; color: var(--text-2); }
.vt-tile b { font-size: 56px; font-weight: 790; letter-spacing: -.06em; line-height: 1; }
.vt-tile b i { font-style: normal; font-size: 24px; color: var(--text-3); }
.vt-tile span { font-size: 12.5px; color: var(--text-3); }
.vt-funnel { display: grid; gap: 9px; }
.vt-fr { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 32px; align-items: center; gap: 10px; font-size: 12px; color: var(--text-2); }
.vt-fr i { height: 10px; border-radius: 4px; background: color-mix(in srgb, var(--text) 7%, transparent); overflow: hidden; }
.vt-fr b { display: block; width: var(--w); height: 100%; border-radius: inherit; background: #2563EB; }
.vt-fr em { font-style: normal; font-weight: 700; text-align: right; color: var(--text); }
.vt-lv { grid-column: 1 / -1; }
.vt-lv-b { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; height: 120px; margin-top: 10px; }
.vt-lv-b span { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 4px; font-size: 11.5px; }
.vt-lv-b em { font-style: normal; font-weight: 700; }
.vt-lv-b i { align-self: end; width: 100%; height: var(--h); min-height: 3px; border-radius: 6px 6px 2px 2px; background: #2563EB; }
.vt-lv-b small { color: var(--text-3); }
.vt-team-f { display: flex; align-items: center; gap: 7px; margin-top: 14px; font-size: 12.5px; color: var(--text-3); }
.vt-team-f .ic { width: 14px; height: 14px; }
.vt-feats { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.vt-feats li { display: flex; gap: 14px; }
.vt-feats li > .ic { width: 22px; height: 22px; flex: none; padding: 9px; box-sizing: content-box; border-radius: 13px; color: var(--accent); background: var(--accent-soft); }
.vt-feats span { display: grid; gap: 3px; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
.vt-feats b { font-size: 16px; font-weight: 700; color: var(--text); }
.vt-q { border-radius: 18px; background: var(--card); border: 1px solid var(--stroke); transition: border-color .2s; }
.vt-q[open] { border-color: var(--stroke-2); }
.vt-q summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; font-size: 16.5px; font-weight: 680; letter-spacing: -.015em; cursor: pointer; list-style: none; }
.vt-q summary::-webkit-details-marker { display: none; }
.vt-q summary span { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; color: var(--text-2); background: var(--card-inset); transition: transform .35s var(--spring); }
.vt-q summary span .ic { width: 15px; height: 15px; }
.vt-q[open] summary span { transform: rotate(45deg); }
.vt-q summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 18px; }
.vt-q p { padding: 0 22px 20px; font-size: 15px; line-height: 1.65; color: var(--text-2); }
/* Contact */
.vt-contact-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 56px); padding: clamp(28px, 4vw, 52px); }
.vt-contact-l { display: grid; align-content: start; gap: 16px; }
.vt-contact-l > p:not(.vt-k) { font-size: 16px; line-height: 1.6; color: var(--text-2); }
.vt-form { display: grid; gap: 14px; }
.vt-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.vt-kinds button { height: 36px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--stroke); background: var(--card); font: inherit; font-size: 13.5px; font-weight: 600; color: var(--text-2); cursor: pointer; }
.vt-kinds button[aria-checked="true"] { color: var(--text); border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent); }
.vt-f2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.vt-f { display: grid; gap: 7px; }
.vt-f > span { font-size: 13px; font-weight: 650; color: var(--text-2); }
.vt-f input, .vt-f select, .vt-f textarea { width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--stroke-2); background: var(--card-inset); font: inherit; font-size: 15px; color: var(--text); resize: vertical; transition: border-color .2s, box-shadow .2s, background .2s; }
.vt-f input, .vt-f select { height: 48px; }
.vt-f input:focus, .vt-f select:focus, .vt-f textarea:focus { outline: none; border-color: var(--accent); background: var(--card-strong); box-shadow: 0 0 0 4px var(--accent-soft); }
.vt-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vt-err { padding: 10px 14px; border-radius: 12px; font-size: 13.5px; color: var(--bad); background: var(--bad-soft); }
.vt-form > .btn { justify-self: start; }
.vt-form > .btn .ic { width: 16px; height: 16px; margin-right: 8px; }
.vt-fine { font-size: 12.5px; color: var(--text-3); }
.vt-sent { display: grid; align-content: center; justify-items: start; gap: 10px; padding: 20px 0; }
.vt-sent > span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; color: #fff; background: var(--good); }
.vt-sent > span .ic { width: 24px; height: 24px; }
.vt-sent h3 { font-size: 24px; font-weight: 740; letter-spacing: -.03em; }
.vt-sent p { font-size: 15px; line-height: 1.6; color: var(--text-2); }

/* Dernier appel */
.vt-final { position: relative; isolation: isolate; display: grid; justify-items: center; gap: 14px; margin-top: clamp(96px, 12vw, 160px); padding: clamp(56px, 8vw, 96px) 0; text-align: center; }
.vt-final-art { position: absolute; z-index: -1; left: 50%; top: 50%; translate: -50% -50%; opacity: .18; -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent); mask-image: radial-gradient(closest-side, #000 30%, transparent); pointer-events: none; }
.vt-final h2 { font-size: clamp(36px, 5vw, 64px); font-weight: 760; letter-spacing: -.055em; line-height: 1.04; }
.vt-final p { font-size: 17px; color: var(--text-2); }
.vt-final .vt-ctas { justify-content: center; margin-top: 16px; }

/* Pied de page */
.vt-foot { margin-top: 40px; border-top: 1px solid var(--stroke); }
.vt-foot-in { width: var(--vt-w); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 32px; padding: 48px 0 28px; }
.vt-foot-b p { margin-top: 14px; max-width: 22rem; font-size: 14px; line-height: 1.55; color: var(--text-3); }
.vt-foot-in > div:not(.vt-foot-b) { display: grid; align-content: start; justify-items: start; gap: 8px; }
.vt-foot-in > div:not(.vt-foot-b) > p { margin-bottom: 4px; font-size: 13px; font-weight: 700; color: var(--text); }
.vt-foot button, .vt-foot a { padding: 0; font: inherit; font-size: 14px; text-align: left; color: var(--text-3); text-decoration: none; cursor: pointer; }
.vt-foot button:hover, .vt-foot a:hover { color: var(--text); }
.vt-copy { width: var(--vt-w); margin: 0 auto; padding: 18px 0 32px; border-top: 1px solid var(--stroke); font-size: 13px; color: var(--text-3); }
.login-home { color: inherit; text-decoration: none; }

/* ---- Gabarit des pages */
.vt-main { padding-bottom: 24px; }
.vt-nav .nav-end { gap: 14px; }
.vt-login { font-size: 15px; font-weight: 500; color: var(--text-2); text-decoration: none; transition: color .3s var(--ease); }
.vt-login:hover { color: var(--text); }
.vt-ph { position: relative; isolation: isolate; display: grid; justify-items: center; text-align: center; padding: clamp(56px, 8vw, 104px) 0 0; }
.vt-ph-art { position: absolute; z-index: -1; left: 50%; top: 56%; translate: -50% -50%; opacity: .13; pointer-events: none; -webkit-mask-image: radial-gradient(closest-side, #000 25%, transparent); mask-image: radial-gradient(closest-side, #000 25%, transparent); }
.vt-ph h1 { margin-top: 18px; max-width: 22ch; font-size: clamp(40px, 5.4vw, 68px); font-weight: 760; letter-spacing: -.055em; line-height: 1.03; text-wrap: balance; }
.vt-ph h1 .grad-text { display: inline-block; }
.vt-ph .vt-lead { max-width: 42rem; margin-inline: auto; text-wrap: balance; }
.vt-sec.is-first { margin-top: clamp(48px, 6vw, 72px); }
.vt-more { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 650; color: var(--accent); text-decoration: none; }
.vt-more .ic { width: 15px; height: 15px; transition: transform .35s var(--spring); }
a:hover > .vt-more .ic, .vt-more:hover .ic { transform: translateX(3px); }
.vt-step-ic { position: relative; }
.vt-step-n { top: -7px; left: auto; right: -7px; }
.vt-steps::before { top: 27px; left: 8%; right: 8%; }
.vt-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 22px; font-size: 13.5px; color: var(--text-3); text-align: center; }
.vt-note .ic { width: 15px; height: 15px; flex: none; }
.vt-cap { margin-top: 14px; font-size: 13.5px; color: var(--text-3); text-align: center; }

/* ---- Accueil : trois portes */
.vt-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 44px; }
.vt-pil { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 8px; padding: 14px 14px 24px; color: inherit; text-decoration: none; transition: transform .45s var(--spring), border-color .3s, box-shadow .3s; }
.vt-pil > :not(.vt-pil-art) { margin-inline: 14px; }
.vt-pil:hover { transform: translateY(-3px); border-color: var(--stroke-2); }
.vt-pil h3 { font-size: 21px; font-weight: 730; letter-spacing: -.03em; }
.vt-pil > p:not(.vt-k) { font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.vt-pil .vt-more { margin-top: 8px; }
.vt-pil-art { display: grid; height: 150px; margin-bottom: 14px; padding: 20px; border-radius: var(--r-l); background: var(--card-inset); border: 1px solid var(--stroke); overflow: hidden; }
.vt-pil-art.is-scale { grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; gap: 6px; }
.vt-pil-art.is-scale i { display: grid; gap: 8px; font-style: normal; }
.vt-pil-art.is-scale b { display: block; height: calc(18px + var(--i) * 16px); border-radius: 6px 6px 3px 3px; background: var(--grad); background-size: 500% 100%; background-position: calc(var(--i) * 25%) 0; opacity: calc(.45 + var(--i) * .13); transition: transform .5s var(--spring); transform-origin: bottom; }
.vt-pil:hover .vt-pil-art.is-scale b { transform: scaleY(1.08); }
.vt-pil-art.is-scale small { font-size: 10px; font-weight: 600; text-align: center; color: var(--text-3); }
.vt-pil-art.is-tokens { display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 6px; }
.vt-pil-art.is-tokens i { padding: 6px 9px; border-radius: 8px; font: 650 14px var(--mono, var(--font)); font-style: normal; color: var(--text); background: color-mix(in srgb, var(--tkc) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tkc) 40%, transparent); --tkc: var(--g1); transition: transform .4s var(--spring); transition-delay: calc(var(--i) * 40ms); }
.vt-pil-art.is-tokens i:nth-child(2n) { --tkc: var(--g2); } .vt-pil-art.is-tokens i:nth-child(3n) { --tkc: var(--g3); }
.vt-pil:hover .vt-pil-art.is-tokens i { transform: translateY(-3px); }
.vt-pil-art.is-bars { align-content: center; gap: 8px; }
.vt-pil-art.is-bars i { display: block; height: 12px; width: var(--w); border-radius: 4px; background: #2563EB; opacity: calc(1 - var(--i) * .12); transition: width .6s var(--ease); }

.vt-strip { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(24px, 3vw, 36px) clamp(24px, 3.5vw, 44px); }
.vt-strip > div { display: grid; gap: 6px; max-width: 46rem; }
.vt-strip h3 { font-size: clamp(22px, 2.4vw, 28px); font-weight: 740; letter-spacing: -.035em; }
.vt-strip p:not(.vt-k) { font-size: 15px; line-height: 1.6; color: var(--text-2); }
.vt-strip > .btn { flex: none; }
.vt-strip-ic { display: grid; place-items: center; width: 64px; height: 64px; flex: none; border-radius: 20px; color: #fff; background: var(--grad); box-shadow: 0 16px 32px -14px color-mix(in srgb, var(--g2) 80%, transparent); }
.vt-strip-ic .ic { width: 28px; height: 28px; }

/* ---- La méthode */
.vt-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.vt-split .vt-head { justify-items: start; text-align: left; margin: 0; }
.vt-spec { display: grid; gap: 18px; margin: 28px 0 0; }
.vt-spec > div { display: grid; gap: 4px; padding-left: 16px; border-left: 2px solid var(--stroke-2); }
.vt-spec dt { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; }
.vt-spec dt .ic { width: 17px; height: 17px; color: var(--accent); }
.vt-spec dd { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.vt-format { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--stroke); }
.vt-format span { display: grid; gap: 2px; padding: 0 12px; border-left: 1px solid var(--stroke); }
.vt-format span:first-child { padding-left: 0; border-left: 0; }
.vt-format b { font-size: 22px; font-weight: 760; letter-spacing: -.04em; }
.vt-format small { font-size: 12.5px; line-height: 1.35; color: var(--text-3); }
.vt-axes-card { display: grid; gap: 4px; padding: 22px; }
.vt-axes-k { padding: 0 6px 8px; font-size: 12.5px; font-weight: 650; color: var(--text-3); }
.vt-axr { display: flex; gap: 14px; padding: 12px 8px; border-radius: 14px; transition: background .25s; }
.vt-axr + .vt-axr { border-top: 1px solid var(--stroke); }
.vt-axr:hover { background: var(--card-inset); }
.vt-axr-ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 13px; color: #fff; background: var(--grad); }
.vt-axr:nth-child(2) .vt-axr-ic { background: linear-gradient(140deg, var(--g1), color-mix(in srgb, var(--g1) 50%, var(--g2))); }
.vt-axr:nth-child(3) .vt-axr-ic { background: linear-gradient(140deg, color-mix(in srgb, var(--g1) 40%, var(--g2)), var(--g2)); }
.vt-axr:nth-child(4) .vt-axr-ic { background: linear-gradient(140deg, var(--g2), color-mix(in srgb, var(--g2) 50%, var(--g3))); }
.vt-axr:nth-child(5) .vt-axr-ic { background: linear-gradient(140deg, color-mix(in srgb, var(--g2) 40%, var(--g3)), var(--g3)); }
.vt-axr:nth-child(6) .vt-axr-ic { background: linear-gradient(140deg, color-mix(in srgb, var(--g3) 80%, var(--g2)), var(--g3)); }
.vt-axr-ic .ic { width: 19px; height: 19px; }
.vt-axr > span:last-child { display: grid; gap: 3px; }
.vt-axr b { font-size: 15.5px; font-weight: 700; }
.vt-axr small { font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.vt-proofs-g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 44px; }
.vt-pf { display: grid; align-content: start; gap: 10px; padding: 24px; }
.vt-pf-ic { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 6px; border-radius: 14px; color: var(--good); background: var(--good-soft); }
.vt-pf-ic .ic { width: 21px; height: 21px; }
.vt-pf h3 { font-size: 19px; font-weight: 730; letter-spacing: -.025em; }
.vt-pf p { font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.vt-evid-g { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.vt-evid-g > div:first-child { display: grid; justify-items: start; gap: 18px; }
.vt-evid-g .vt-head { justify-items: start; text-align: left; margin: 0; }

/* ---- Les contenus : le lecteur de module */
.vt-mp { overflow: hidden; }
.vt-mp::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(140deg, color-mix(in srgb, var(--g1) 60%, transparent), transparent 35%, transparent 65%, color-mix(in srgb, var(--g3) 60%, transparent)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: 1; }
.vt-mp-h { display: flex; align-items: center; gap: 14px; padding: 16px 22px; border-bottom: 1px solid var(--stroke); }
.vt-mp-ic { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px; color: #fff; background: var(--grad); }
.vt-mp-ic .ic { width: 18px; height: 18px; }
.vt-mp-t { display: grid; flex: 1; min-width: 0; }
.vt-mp-t small { font-size: 12.5px; color: var(--text-3); }
.vt-mp-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15.5px; font-weight: 700; }
.vt-mp-bar { display: flex; gap: 5px; }
.vt-mp-bar i { width: 34px; height: 4px; border-radius: 99px; background: var(--stroke-2); transition: background .5s var(--ease); }
.vt-mp-bar i.on { background: var(--g2); } .vt-mp-bar i.cur { background: var(--grad); }
.vt-mp-stage { display: grid; place-items: start center; min-height: 560px; padding: clamp(28px, 4vw, 48px) clamp(16px, 3vw, 40px); }
.vt-mp-stage .mp-scene { width: min(880px, 100%); }
.vt-mp-f { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 22px; border-top: 1px solid var(--stroke); background: var(--card-inset); }
.vt-mp-f .btn .ic { width: 14px; height: 14px; }
.vt-mp-f .btn[data-mp="-1"] .ic { margin-right: 6px; }
.vt-mp-f .btn:disabled { opacity: .4; pointer-events: none; }
.vt-mp-pos { font-size: 13px; color: var(--text-3); }

.vt-progs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 18px; margin-top: 40px; }
.vt-prog { --hue: var(--accent); display: flex; gap: 18px; padding: 26px; }
.vt-prog-ic { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 16px; color: #fff; background: linear-gradient(145deg, color-mix(in srgb, var(--hue) 78%, #fff), var(--hue) 60%, color-mix(in srgb, var(--hue) 70%, #000)); box-shadow: 0 14px 26px -12px color-mix(in srgb, var(--hue) 80%, transparent); }
.vt-prog-ic .ic { width: 24px; height: 24px; }
.vt-prog small { font-size: 12.5px; font-weight: 650; color: var(--hue); }
.vt-prog h3 { margin-top: 2px; font-size: 22px; font-weight: 740; letter-spacing: -.03em; }
.vt-prog > div > p:not(.vt-prog-f) { margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.vt-prog-f { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--stroke); font-size: 13px; color: var(--text-3); }
.vt-prog-f span { display: inline-flex; align-items: center; gap: 5px; }
.vt-prog-f b { color: var(--text); font-weight: 700; }
.vt-prog-f .ic { width: 14px; height: 14px; color: var(--hue); }
.vt-soon { display: flex; align-items: center; gap: 20px; margin-top: 16px; padding: 18px 24px; border-style: dashed; background: transparent; box-shadow: none; }
.vt-soon-n { font-size: 34px; font-weight: 780; letter-spacing: -.05em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.vt-soon > div { flex: 1; min-width: 0; }
.vt-soon b { font-size: 15.5px; font-weight: 700; }
.vt-soon p { margin-top: 2px; font-size: 13.5px; color: var(--text-3); }
.vt-soon-c { display: flex; flex-wrap: wrap; gap: 6px; }
.vt-soon-c span { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 99px; font-size: 12.5px; font-weight: 650; color: var(--hue); background: color-mix(in srgb, var(--hue) 11%, transparent); }
.vt-soon-c .ic { width: 13px; height: 13px; }

.vt-split.is-prompts { align-items: center; }
.vt-pd-t { display: grid; flex: 1; min-width: 0; }
.vt-pd-t small { font-size: 12px; font-weight: 650; color: var(--text-3); }
.vt-pd-t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; font-weight: 700; }
.vt-pd-x { max-height: 340px; }
.vt-big { display: flex; gap: 36px; margin-top: 26px; }
.vt-big span { display: grid; }
.vt-big b { font-size: 48px; font-weight: 790; letter-spacing: -.055em; line-height: 1; }
.vt-big small { margin-top: 4px; font-size: 13.5px; color: var(--text-3); }
.vt-apps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.vt-apps span { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px 0 5px; border-radius: 99px; font-size: 13px; font-weight: 600; color: var(--text-2); background: var(--card); border: 1px solid var(--stroke); }
.vt-apps i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: var(--app); background: color-mix(in srgb, var(--app) 13%, transparent); }
.vt-apps .ic { width: 14px; height: 14px; }
.vt-proc { margin-top: 40px; }

/* ---- Entreprises */
.vt-ent-g { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(24px, 4vw, 48px); align-items: center; }
.vt-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 40px; }
.vt-role { display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; padding: 26px; }
.vt-role-ic { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 6px; border-radius: 15px; color: var(--accent); background: var(--accent-soft); }
.vt-role:nth-child(2) .vt-role-ic { color: #fff; background: linear-gradient(140deg, color-mix(in srgb, var(--g1) 40%, var(--g2)), var(--g2)); }
.vt-role:nth-child(3) .vt-role-ic { color: #fff; background: var(--grad); }
.vt-role-ic .ic { width: 22px; height: 22px; }
.vt-role h3 { font-size: 19px; font-weight: 730; }
.vt-role p { font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.vt-role-plan { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--stroke); font-size: 14px; font-weight: 650; color: var(--accent); text-decoration: none; }
.vt-role-plan .ic { width: 14px; height: 14px; }
.vt-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-top: 40px; }
.vt-tr { display: grid; align-content: start; gap: 10px; padding-top: 18px; border-top: 2px solid var(--stroke-2); }
.vt-tr > span { color: var(--accent); }
.vt-tr > span .ic { width: 24px; height: 24px; }
.vt-tr h3 { font-size: 17px; font-weight: 720; }
.vt-tr p { font-size: 14.5px; line-height: 1.6; color: var(--text-2); }
.vt-act { display: flex; gap: 22px; padding: clamp(24px, 3vw, 36px); }
.vt-act-ic { display: grid; place-items: center; width: 56px; height: 56px; flex: none; border-radius: 18px; color: var(--accent); background: var(--accent-soft); }
.vt-act-ic .ic { width: 26px; height: 26px; }
.vt-act h3 { font-size: 21px; font-weight: 730; letter-spacing: -.03em; }
.vt-act p { margin-top: 8px; max-width: 52rem; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.vt-act small { display: block; margin-top: 10px; font-size: 12.5px; color: var(--text-3); }
.vt-form-f { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.vt-form-f .btn .ic { width: 16px; height: 16px; margin-right: 8px; }

/* ---- Offres */
.vt-bill { display: flex; width: max-content; margin: 0 auto; padding: 5px; border-radius: 99px; background: var(--card); border: 1px solid var(--stroke); box-shadow: var(--shadow); }
.vt-bill button { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 20px; border-radius: 99px; font: inherit; font-size: 14.5px; font-weight: 650; color: var(--text-2); cursor: pointer; transition: background .25s, color .25s; }
.vt-bill button span { padding: 3px 8px; border-radius: 99px; font-size: 11.5px; font-weight: 700; color: var(--good); background: var(--good-soft); }
.vt-bill button[aria-checked="true"] { color: var(--text); background: var(--card-strong); box-shadow: 0 1px 0 var(--stroke), 0 8px 20px -12px rgba(0, 0, 0, .35); }
.vt-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(7, auto); gap: 0 16px; margin-top: 36px; }
.vt-plan { position: relative; grid-row: span 7; display: grid; grid-template-rows: subgrid; row-gap: 8px; padding: 26px 24px; }
.vt-plan-ic { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 14px; color: var(--accent); background: var(--accent-soft); }
.vt-plan-ic .ic { width: 21px; height: 21px; }
.vt-plan h3 { font-size: 21px; font-weight: 740; letter-spacing: -.03em; }
.vt-plan-d { font-size: 14px; line-height: 1.5; color: var(--text-3); }
.vt-price { display: flex; align-items: flex-end; gap: 10px; margin-top: 10px; }
.vt-price b { font-size: 46px; font-weight: 790; letter-spacing: -.055em; line-height: .95; }
.vt-plan.is-quote .vt-price b { font-size: 34px; letter-spacing: -.045em; }
.vt-price span { padding-bottom: 3px; font-size: 12.5px; line-height: 1.3; color: var(--text-3); }
.vt-price-y { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 22px; font-size: 13px; color: var(--text-2); }
.vt-price-y em { padding: 2px 7px; border-radius: 99px; font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--good); background: var(--good-soft); }
.vt-plan ul { display: grid; align-content: start; gap: 9px; margin: 10px 0 14px; padding: 16px 0 0; list-style: none; border-top: 1px solid var(--stroke); }
.vt-plan li { display: flex; gap: 9px; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.vt-plan li .ic { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--good); }
.vt-plan li.is-lead { font-weight: 650; color: var(--text); }
.vt-plan.is-main { border-color: transparent; box-shadow: var(--shadow-lg, var(--shadow)); }
.vt-plan.is-main::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1.5px; pointer-events: none; background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.vt-plan.is-main .vt-plan-ic { color: #fff; background: var(--grad); }
.vt-plan.is-quote { background: transparent; border-style: dashed; box-shadow: none; }
.vt-sim { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); padding: clamp(26px, 4vw, 48px); }
.vt-sim-l { display: grid; align-content: start; gap: 14px; }
.vt-sim-l h2 { font-size: clamp(28px, 3.2vw, 40px); font-weight: 740; letter-spacing: -.045em; line-height: 1.08; }
.vt-sim-l > p:not(.vt-k) { font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.vt-sim-in { display: grid; gap: 10px; margin-top: 10px; }
.vt-step2 { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border-radius: 16px; background: var(--card-inset); border: 1px solid var(--stroke); }
.vt-step2 > span:first-child { display: grid; }
.vt-step2 b { font-size: 15px; font-weight: 680; }
.vt-step2 small { font-size: 12.5px; color: var(--text-3); }
.vt-stepper { display: flex; align-items: center; gap: 4px; }
.vt-stepper button { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px; color: var(--text-2); background: var(--card); border: 1px solid var(--stroke); cursor: pointer; }
.vt-stepper button:hover { color: var(--text); border-color: var(--stroke-2); }
.vt-stepper .ic { width: 15px; height: 15px; }
.vt-stepper input { width: 66px; height: 34px; border: 0; background: none; font: inherit; font-size: 17px; font-weight: 700; text-align: center; color: var(--text); -moz-appearance: textfield; }
.vt-stepper input::-webkit-inner-spin-button, .vt-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.vt-stepper input:focus { outline: 2px solid var(--accent); border-radius: 8px; }
.vt-sim-r { display: grid; align-content: start; gap: 16px; padding: 24px; border-radius: var(--r-l); background: var(--card-strong); border: 1px solid var(--stroke); }
.vt-sim-k { font-size: 13px; font-weight: 650; color: var(--text-3); }
.vt-sim-big { display: grid; gap: 2px; }
.vt-sim-big small, .vt-sim-alt small { font-size: 12.5px; color: var(--text-3); }
.vt-sim-big b { font-size: clamp(40px, 4.4vw, 56px); font-weight: 790; letter-spacing: -.055em; line-height: 1.05; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.vt-sim-big em, .vt-sim-alt em { font-style: normal; font-size: 13px; color: var(--text-2); }
.vt-sim-alt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding-top: 16px; border-top: 1px solid var(--stroke); }
.vt-sim-alt span { display: grid; gap: 2px; }
.vt-sim-alt b { font-size: 24px; font-weight: 760; letter-spacing: -.04em; }
.vt-sim-alt .is-save b { color: var(--good); }
.vt-sim-rows { display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid var(--stroke); }
.vt-sim-rows span { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--text-2); }
.vt-sim-rows i { font-style: normal; }
.vt-sim-rows b { font-weight: 650; color: var(--text); }
.vt-sim-hint { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--accent); }
.vt-sim-hint .ic { width: 15px; height: 15px; }

/* ---- Questions */
.vt-faq-g { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.vt-faq-nav { position: sticky; top: calc(var(--nav-h, 76px) + 24px); display: grid; gap: 2px; }
.vt-faq-nav button { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 12px; font: inherit; font-size: 14.5px; font-weight: 600; text-align: left; color: var(--text-2); cursor: pointer; transition: background .2s, color .2s; }
.vt-faq-nav button span { font-size: 12px; color: var(--text-3); }
.vt-faq-nav button:hover { color: var(--text); background: var(--card-inset); }
.vt-faq-nav button.is-on { color: var(--text); background: var(--card); box-shadow: inset 0 0 0 1px var(--stroke); }
.vt-faq { display: grid; gap: 40px; }
.vt-faq-s { display: grid; gap: 10px; scroll-margin-top: 110px; }
.vt-faq-s h2 { margin-bottom: 6px; font-size: 22px; font-weight: 740; letter-spacing: -.03em; }
.vt-q { border-radius: 18px; background: var(--card); border: 1px solid var(--stroke); transition: border-color .2s; }
.vt-q[open] { border-color: var(--stroke-2); }
.vt-q summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 17px 22px; font-size: 16px; font-weight: 660; letter-spacing: -.01em; cursor: pointer; list-style: none; }
.vt-q summary::-webkit-details-marker { display: none; }
.vt-q summary span { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; color: var(--text-2); background: var(--card-inset); transition: transform .35s var(--spring); }
.vt-q summary span .ic { width: 15px; height: 15px; }
.vt-q[open] summary span { transform: rotate(45deg); }
.vt-q summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 18px; }
.vt-q p { padding: 0 22px 20px; font-size: 15px; line-height: 1.65; color: var(--text-2); }

@media (max-width: 1080px) {
  .vt-hero { grid-template-columns: 1fr; }
  .vt-inst { max-width: 520px; width: 100%; justify-self: center; }
  .vt-band { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .vt-band > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .vt-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 36px; }
  .vt-steps::before { display: none; }
  .vt-lvls { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 18px; }
  .vt-pillars, .vt-roles { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; }
  .vt-split, .vt-evid-g, .vt-ent-g, .vt-contact-in, .vt-sim { grid-template-columns: 1fr; }
  .vt-proofs-g, .vt-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vt-cert { max-width: 520px; width: 100%; justify-self: center; }
  .vt-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
  .vt-faq-g { grid-template-columns: 1fr; }
  .vt-faq-nav { position: static; display: flex; flex-wrap: wrap; }
  .vt-foot-in { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vt-foot-b { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .vt { --vt-w: calc(100% - 32px); }
  .vt-login { display: none; }
  .vt-why-g, .vt-proofs-g, .vt-trust, .vt-plans { grid-template-columns: 1fr; }
  .vt-plan { grid-row: auto; grid-template-rows: none; }
  .vt-steps, .vt-lvls { grid-template-columns: 1fr; }
  .vt-format { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; }
  .vt-format span:nth-child(3) { border-left: 0; padding-left: 0; }
  .vt-proc-s { grid-auto-flow: row; }
  .vt-proc-s::before { display: none; }
  .vt-proc-h { grid-template-columns: 1fr; }
  .vt-gain { justify-items: start; text-align: left; }
  .vt-team-g, .vt-f2 { grid-template-columns: 1fr; }
  .vt-strip, .vt-soon, .vt-act { flex-direction: column; align-items: flex-start; }
  .vt-mp-bar { display: none; }
  .vt-mp-stage { min-height: 0; }
  .vt-prog { flex-direction: column; }
  .vt-cert-medal { right: -8px; bottom: -36px; }
  .vt-cert-medal svg { width: 104px; height: 104px; }
  .vt-ax { grid-template-columns: 92px minmax(0, 1fr) 24px; }
  .vt-foot-in { grid-template-columns: 1fr 1fr; }
  .vt-sim-alt { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .vt-needle, .vt-ax b, .vt-proof { transition: none !important; }
}

/* ==========================================================================
   v56 · Vitrine : accès sur demande, questions par page, transitions ; demandes côté équipe
   ========================================================================== */
/* Le lecteur de démonstration, plus compact */
.vt-mp { max-width: 940px; margin-inline: auto; }
.vt-mp-stage { min-height: 470px; padding: clamp(22px, 3vw, 34px) clamp(14px, 2.5vw, 30px); }
.vt-mp-stage .mp-scene { width: min(820px, 100%); }
@media (min-width: 721px) { .vt-mp-stage .mp-scene { zoom: .88; } }
.vt-mp-stage .sc h2 { font-size: clamp(22px, 2.4vw, 28px); }

/* Questions en bas de chaque page */
.vt-faqs { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.vt-faqs-h { position: sticky; top: calc(var(--nav-h, 76px) + 28px); display: grid; gap: 12px; }
.vt-faqs-h h2 { font-size: clamp(26px, 2.8vw, 34px); font-weight: 740; letter-spacing: -.04em; line-height: 1.1; }
.vt-faqs .vt-faq { display: grid; gap: 10px; }

/* Demande d’accès */
.vt-req { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); margin-top: 36px; overflow: hidden; }
.vt-req-l { display: grid; align-content: start; gap: 18px; padding: clamp(24px, 3.4vw, 40px); }
.vt-req-r { display: grid; align-content: start; gap: 22px; padding: clamp(24px, 3.4vw, 40px); border-left: 1px solid var(--stroke); background: var(--card-inset); }
.vt-req .vt-kinds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.vt-req .vt-kinds button { display: flex; align-items: center; gap: 12px; height: auto; padding: 14px 16px; border-radius: 16px; text-align: left; }
.vt-req .vt-kinds button b { display: block; font-size: 15px; font-weight: 700; color: var(--text); }
.vt-req .vt-kinds button small { font-size: 12.5px; color: var(--text-3); }
.vt-kind-ic { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px; color: var(--text-3); background: var(--card-inset); transition: color .25s, background .25s; }
.vt-kind-ic .ic { width: 18px; height: 18px; }
.vt-req .vt-kinds button[aria-checked="true"] .vt-kind-ic { color: #fff; background: var(--grad); }
.vt-req-plans { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.vt-req-plans legend { margin-bottom: 8px; padding: 0; font-size: 13px; font-weight: 650; color: var(--text-2); }
.vt-rp { display: flex; align-items: center; gap: 12px; padding: 6px 8px 6px 6px; border-radius: 16px; border: 1px solid var(--stroke); background: var(--card); transition: border-color .25s, background .25s, box-shadow .25s; }
.vt-rp.is-on { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 5%, var(--card)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.vt-rp-t { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: 12px; font: inherit; text-align: left; color: var(--text); cursor: pointer; }
.vt-rp-t b { display: block; font-size: 15px; font-weight: 700; }
.vt-rp-t small { font-size: 12.5px; color: var(--text-3); }
.vt-rp-t em { margin-left: auto; font-style: normal; font-size: 12.5px; color: var(--text-3); white-space: nowrap; }
.vt-rp-t em::after { content: ' / an'; }
.vt-rp-box { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 7px; color: transparent; box-shadow: inset 0 0 0 1.5px var(--stroke-2); transition: background .2s, color .2s, box-shadow .2s; }
.vt-rp-box .ic { width: 13px; height: 13px; stroke-width: 3; }
.vt-rp.is-on .vt-rp-box { color: #fff; background: var(--accent); box-shadow: none; }
.vt-rp .vt-stepper { flex: none; }
.vt-rp .vt-stepper input { width: 70px; }
.vt-f > span small { margin-left: 6px; font-weight: 500; color: var(--text-3); }
.vt-sum-rows { display: grid; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--stroke); }
.vt-sum-rows span { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--text-2); }
.vt-sum-rows i { font-style: normal; }
.vt-sum-rows b { font-weight: 650; color: var(--text); }
#vtSum { display: grid; gap: 14px; }
.vt-sum-empty { font-size: 14px; color: var(--text-3); }
.vt-next { position: relative; display: grid; gap: 16px; margin: 0; padding: 18px 0 0; list-style: none; counter-reset: nx; border-top: 1px solid var(--stroke); }
.vt-next li { position: relative; display: grid; gap: 2px; padding-left: 38px; counter-increment: nx; }
.vt-next li::before { content: counter(nx); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-size: 12px; font-weight: 750; color: var(--accent); background: var(--accent-soft); }
.vt-next li:not(:last-child)::after { content: ''; position: absolute; left: 12.5px; top: 30px; bottom: -14px; width: 1px; background: var(--stroke-2); }
.vt-next b { font-size: 14.5px; font-weight: 700; }
.vt-next span { font-size: 13.5px; line-height: 1.5; color: var(--text-2); }
.vt-req .vt-sent { grid-column: 1 / -1; padding: clamp(28px, 4vw, 48px); }

/* Page de connexion : pas de compte */
.auth-alt { display: grid; gap: 10px; margin-top: 22px; }
.auth-alt .btn .ic { width: 16px; height: 16px; }
.auth-note { display: flex; gap: 10px; margin-top: 18px; font-size: 13.5px; line-height: 1.5; color: var(--text-3); }
.auth-note .ic { width: 16px; height: 16px; flex: none; margin-top: 1px; }

/* ---- Transitions d’une page à l’autre
   Le contenu glisse dans le sens de la navigation, un trait balaie la barre, puis le titre se pose. */
.vt-body { view-transition-name: vt-page; }
html[data-vt-dir]::view-transition-old(root), html[data-vt-dir]::view-transition-new(root) { animation: none; }
html[data-vt-dir]::view-transition-group(vt-page) { animation: none; }
html[data-vt-dir="fwd"] { --vtx: 1; } html[data-vt-dir="back"] { --vtx: -1; } html[data-vt-dir="same"] { --vtx: 0; }
html[data-vt-dir]::view-transition-old(vt-page) { animation: vtp-out .34s cubic-bezier(.5, 0, .75, 0) both; }
html[data-vt-dir]::view-transition-new(vt-page) { animation: vtp-in .7s cubic-bezier(.16, 1, .3, 1) .08s both; }
@keyframes vtp-out { to { opacity: 0; transform: translateX(calc(var(--vtx, 0) * -36px)) translateY(calc((1 - var(--vtx, 0) * var(--vtx, 0)) * -10px)) scale(.985); filter: blur(6px); } }
@keyframes vtp-in { from { opacity: 0; transform: translateX(calc(var(--vtx, 0) * 56px)) translateY(calc((1 - var(--vtx, 0) * var(--vtx, 0)) * 14px)); filter: blur(6px); } }
.vt-sweep { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--grad); opacity: 0; transform: scaleX(0); pointer-events: none; }
html[data-vt-dir="fwd"] .vt-sweep, html[data-vt-dir="same"] .vt-sweep { transform-origin: left; animation: vt-sweep .9s cubic-bezier(.65, 0, .35, 1) both; }
html[data-vt-dir="back"] .vt-sweep { transform-origin: right; animation: vt-sweep .9s cubic-bezier(.65, 0, .35, 1) both; }
@keyframes vt-sweep { 0% { opacity: 1; transform: scaleX(0); } 60% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
/* Arrivée du titre : le surtitre, puis le titre qui se dévoile, puis le texte */
.vt-ph > *, .vt-hero-txt > * { animation: vt-rise .9s cubic-bezier(.16, 1, .3, 1) both; }
.vt-ph > .vt-k, .vt-hero-txt > .vt-k { animation-delay: .1s; }
.vt-ph > h1, .vt-hero-txt > h1 { animation-name: vt-unveil; animation-duration: 1.1s; animation-delay: .16s; }
.vt-ph > .vt-lead, .vt-hero-txt > .vt-lead { animation-delay: .34s; }
.vt-hero-txt > .vt-ctas, .vt-hero-txt > .vt-hero-facts { animation-delay: .46s; }
.vt-ph > .vt-ph-art { animation: vt-fade 1.6s var(--ease) both; }
.vt-ph h1 .grad-text, .vt-hero h1 .grad-text { background-size: 200% 100%; animation: vt-grad 2.2s cubic-bezier(.16, 1, .3, 1) .3s both; }
@keyframes vt-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes vt-unveil { from { opacity: 0; transform: translateY(22px); clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 -20% 0); } }
@keyframes vt-fade { from { opacity: 0; } }
@keyframes vt-grad { from { background-position: 100% 0; } to { background-position: 0 0; } }
.vt-inst { animation: vt-rise 1s cubic-bezier(.16, 1, .3, 1) .3s both; }
@media (prefers-reduced-motion: reduce) {
  .vt-ph > *, .vt-hero-txt > *, .vt-inst, .vt-ph h1 .grad-text, .vt-hero h1 .grad-text, .vt-sweep { animation: none !important; }
}

/* Administration : demandes d’accès */
.adm-tab-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 7px; padding: 0 5px; border-radius: 99px; font-style: normal; font-size: 11px; font-weight: 750; color: #fff; background: var(--bad); vertical-align: 1px; }
.adm-state.is-off { color: var(--text-3); background: var(--card-inset); }
.adm-new-acc { margin-left: auto; }
.adm-card-head .adm-new-acc + .adm-filter { margin-left: 0; width: 100%; }
.adm-new-acc .ic { width: 15px; height: 15px; margin-right: 6px; }
.adm-reqs { display: grid; gap: 12px; margin-top: 16px; }
.adm-req { display: grid; gap: 14px; padding: 18px 20px; border-radius: var(--r-l); background: var(--card-strong); border: 1px solid var(--stroke); }
.adm-req.is-new { border-color: color-mix(in srgb, var(--accent) 45%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.adm-req-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.adm-req-id { flex: 1; min-width: 200px; }
.adm-req-id h3 { font-size: 17px; font-weight: 720; letter-spacing: -.02em; }
.adm-req-id p { font-size: 13.5px; color: var(--text-3); }
.adm-req-id a { color: var(--accent); }
.adm-req-k { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 99px; font-size: 12px; font-weight: 700; color: var(--text-2); background: var(--card-inset); }
.adm-req-k.is-ent { color: var(--accent); background: var(--accent-soft); }
.adm-req-k .ic { width: 13px; height: 13px; }
.adm-req-acc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.adm-req-acc span { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 12px; font-size: 13.5px; font-weight: 600; color: var(--text-2); background: var(--card-inset); border: 1px solid var(--stroke); }
.adm-req-acc span b { font-size: 16px; font-weight: 760; color: var(--text); }
.adm-req-acc em { margin-left: 4px; font-style: normal; font-size: 13px; color: var(--text-3); }
.adm-req-msg { padding: 12px 14px; border-radius: 12px; font-size: 14px; line-height: 1.55; color: var(--text-2); background: var(--card-inset); white-space: pre-wrap; }
.adm-req-f { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--stroke); }
.adm-req-f small { font-size: 12.5px; color: var(--text-3); }
.adm-req-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.adm-req-acts .btn .ic { width: 14px; height: 14px; margin-right: 6px; }

@media (max-width: 1080px) {
  .vt-faqs, .vt-req { grid-template-columns: 1fr; }
  .vt-faqs-h { position: static; }
  .vt-req-r { border-left: 0; border-top: 1px solid var(--stroke); }
}
@media (max-width: 720px) {
  .vt-req .vt-kinds { grid-template-columns: 1fr; }
  .vt-rp { flex-wrap: wrap; row-gap: 0; }
  .vt-rp-t { flex-basis: 100%; }
  .vt-rp .vt-stepper { margin: 0 0 6px 42px; }
  .vt-mp-stage { min-height: 0; }
}

/* v57 · Demandes : facturation affichée sur chaque demande */
.adm-req-acc .adm-req-bill { display: inline-flex; border: 0; align-items: center; height: 26px; padding: 0 10px; border-radius: 99px; font-size: 12.5px; font-weight: 650; color: var(--text-2); background: var(--card-inset); }
.adm-req-acc .adm-req-bill.is-year { color: var(--good); background: var(--good-soft); }


/* ==========================================================================
   v58 · Rideau de connexion et de déconnexion
   La nuit s’ouvre depuis le geste, le logo se construit dans une orbite qui se trace, le message
   monte mot à mot, puis la page d’arrivée apparaît en iris depuis le centre.
   ========================================================================== */
@property --hole { syntax: '<length>'; inherits: false; initial-value: 0px; }
.gate { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; color: #fff; pointer-events: auto;
  clip-path: circle(0 at var(--ox, 50%) var(--oy, 50%)); transition: clip-path .82s cubic-bezier(.76, 0, .24, 1);
  -webkit-mask: radial-gradient(circle at 50% 46%, transparent var(--hole), #000 calc(var(--hole) + 1.5px)); mask: radial-gradient(circle at 50% 46%, transparent var(--hole), #000 calc(var(--hole) + 1.5px)); }
.gate.is-on { clip-path: circle(150vmax at var(--ox, 50%) var(--oy, 50%)); }
.gate.is-open { --hole: 160vmax; transition: --hole 1.1s cubic-bezier(.65, 0, .35, 1); }
.gate-bg { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(120% 90% at 50% 46%, #0B1230 0%, #060A1C 46%, #03050F 100%); }
.gate-glow { position: absolute; left: 50%; top: 46%; width: 70vmin; height: 70vmin; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--g2) 38%, transparent), color-mix(in srgb, var(--g3) 14%, transparent) 45%, transparent 70%);
  filter: blur(18px); opacity: 0; scale: .6; transition: opacity 1.4s var(--ease) .25s, scale 2.4s cubic-bezier(.16, 1, .3, 1) .25s; }
.gate.is-on .gate-glow { opacity: 1; scale: 1; }
.gate-grain { position: absolute; inset: 0; opacity: .5; background-image: radial-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px); background-size: 3px 3px; -webkit-mask: radial-gradient(circle at 50% 46%, #000, transparent 75%); mask: radial-gradient(circle at 50% 46%, #000, transparent 75%); }
.gate-in { position: relative; display: grid; justify-items: center; gap: 0; padding: 0 24px; text-align: center; transform: translateY(-2vh); transition: transform 1.1s cubic-bezier(.65, 0, .35, 1), opacity .5s var(--ease); }
.gate.is-open .gate-in { transform: translateY(-2vh) scale(1.08); opacity: 0; }

/* Le logo et son orbite */
.gate-mark { position: relative; display: grid; place-items: center; width: 220px; height: 220px; }
.gate-mark .logo-mark { position: relative; width: 156px; height: 156px; overflow: visible; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--g2) 55%, transparent)); }
.gate-mark .lm-hex { opacity: 0; transform-box: fill-box; transform-origin: center; scale: .2; rotate: -60deg; }
.gate.is-on .gate-mark .lm-hex { animation: gate-hex .9s cubic-bezier(.2, .9, .25, 1.25) both; animation-delay: calc(.4s + var(--r) * .13s + var(--a) * .22s); }
.gate[data-mode="out"].is-on .gate-mark .lm-hex { animation-delay: calc(.4s + (3 - var(--r)) * .13s + var(--a) * .22s); }
.gate.is-on .gate-mark .lm-accent { animation: gate-hex .9s cubic-bezier(.2, .9, .25, 1.25) both, gate-beacon 1.6s ease-in-out 1.4s infinite; animation-delay: calc(.4s + var(--r) * .13s + var(--a) * .22s), 1.5s; }
@keyframes gate-hex { from { opacity: 0; scale: .2; rotate: -60deg; } 60% { opacity: 1; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes gate-beacon { 50% { filter: brightness(1.6); } }
.gate-orbit { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; rotate: -90deg; }
.gate-track { fill: none; stroke: rgba(255, 255, 255, .07); stroke-width: 1; }
.gate-arc { fill: none; stroke: url(#none); stroke: color-mix(in srgb, var(--g2) 85%, #fff); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 4px var(--g2)); }
.gate.is-on .gate-arc { animation: gate-arc 1.9s cubic-bezier(.65, 0, .35, 1) .35s both; }
.gate-spark { fill: #fff; opacity: 0; transform-origin: 100px 100px; filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 12px var(--g2)); }
.gate.is-on .gate-spark { animation: gate-spark 1.9s cubic-bezier(.65, 0, .35, 1) .35s both; }
@keyframes gate-arc { to { stroke-dashoffset: 0; } }
@keyframes gate-spark { 0% { opacity: 0; rotate: 0deg; } 8% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; rotate: 360deg; } }

/* Le message */
.gate-hello { margin-top: 30px; font-size: clamp(30px, 4.6vw, 52px); font-weight: 740; letter-spacing: -.045em; line-height: 1.12; max-width: 16ch; text-wrap: balance; }
.gate-w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .02em .12em; margin-bottom: -.12em; }
.gate-w > span { display: inline-block; transform: translateY(105%); opacity: 0; }
.gate.is-on .gate-w > span { animation: gate-word .9s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(.95s + var(--i) * .085s); }
@keyframes gate-word { to { transform: none; opacity: 1; } }
.gate-name > span { background: linear-gradient(100deg, var(--g1), var(--g2) 45%, var(--g3)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.gate-sub { margin-top: 14px; font-size: 15px; font-weight: 500; color: rgba(255, 255, 255, .62); opacity: 0; transform: translateY(8px); }
.gate.is-on .gate-sub { animation: gate-word .9s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(1.25s + var(--n) * .085s); }
.gate[data-mode="out"] .gate-name > span { background: linear-gradient(100deg, #fff, rgba(255, 255, 255, .7)); -webkit-background-clip: text; background-clip: text; }

/* Sous le rideau, la page d’arrivée se pose */
html.gating #app, html.gating .nav, html.gating .vt-body { pointer-events: none; }
html.gate-reveal #app { animation: gate-page 1.3s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes gate-page { from { opacity: .2; transform: scale(1.035); filter: blur(8px); } }
@media (max-width: 720px) { .gate-mark { width: 176px; height: 176px; } .gate-mark .logo-mark { width: 124px; height: 124px; } }
@media (prefers-reduced-motion: reduce) { .gate { display: none; } }

/* ==========================================================================
   v59 · Accès Premium et Free
   ========================================================================== */
/* Badges d’accès */
.acct-acc, .adm-acc { display: inline-flex; align-items: center; height: 19px; margin-left: 8px; padding: 0 7px; border-radius: 99px; font-size: 10.5px; font-weight: 750; letter-spacing: .01em; vertical-align: 2px; }
.acct-acc.is-premium, .adm-acc.is-premium { color: #fff; background: var(--grad); }
.acct-acc.is-free, .adm-acc.is-free { color: var(--text-2); background: var(--card-inset); box-shadow: inset 0 0 0 1px var(--stroke-2); }
/* Navigation : un cadenas discret sur ce qui est fermé */
.nav-link.is-locked { color: var(--text-3); }
.nav-lock { display: inline-grid; place-items: center; margin-left: -2px; opacity: .8; }
.nav-link .nav-lock .ic { display: block; width: 12px; height: 12px; }

/* Verrou d’une partie Premium */
.fr-page { display: grid; place-items: start center; padding: clamp(28px, 6vh, 64px) 0 40px; }
.fr-lock { display: grid; justify-items: center; gap: 12px; width: min(720px, 100%); padding: clamp(28px, 5vw, 48px); text-align: center; }
.fr-lock-ic { position: relative; display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 6px; border-radius: 20px; color: var(--text-2); background: var(--card-inset); box-shadow: inset 0 0 0 1px var(--stroke); }
.fr-lock-ic > .ic { width: 28px; height: 28px; opacity: .55; }
.fr-lock-ic i { position: absolute; right: -6px; bottom: -6px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; background: var(--grad); box-shadow: 0 0 0 3px var(--bg, #fff), 0 6px 16px color-mix(in srgb, var(--g2) 35%, transparent); }
.fr-lock-ic i .ic { width: 14px; height: 14px; }
.fr-lock h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 740; letter-spacing: -.035em; line-height: 1.15; max-width: 22ch; text-wrap: balance; }
.fr-lead { max-width: 56ch; font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.fr-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.fr-lock .fr-back { width: 100%; margin-top: 18px; padding-top: 22px; border-top: 1px solid var(--stroke); text-align: left; }
.fr-back { display: grid; gap: 14px; }
.fr-back h3 { font-size: 16px; font-weight: 720; letter-spacing: -.015em; }
.fr-ways { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.fr-ways li { display: flex; gap: 14px; padding: 14px 16px; border-radius: 16px; background: var(--card-inset); }
.fr-ways b { display: block; font-size: 14.5px; font-weight: 700; }
.fr-ways p { margin-top: 3px; font-size: 13.5px; line-height: 1.55; color: var(--text-2); }
.fr-ways .btn { margin-top: 10px; }
.fr-way-ic { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 11px; color: var(--accent); background: var(--accent-soft); }
.fr-way-ic .ic { width: 16px; height: 16px; }

/* Accueil d’un compte Free */
.fr-keep { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.fr-tile { display: flex; align-items: center; gap: 14px; padding: 18px 18px 18px 16px; color: var(--text); text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.fr-tile:hover { transform: translateY(-2px); }
.fr-tile > span:nth-child(2) { flex: 1; min-width: 0; }
.fr-tile b { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; }
.fr-tile small { font-size: 13px; color: var(--text-3); }
.fr-tile > .ic { width: 16px; height: 16px; color: var(--text-3); }
.fr-tile-ic { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 13px; color: #fff; background: var(--grad); }
.fr-tile-ic .ic { width: 19px; height: 19px; }
.fr-closed { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 4vw, 48px); margin-top: 16px; padding: clamp(22px, 3.4vw, 36px); }
.fr-k { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--text-2); }
.fr-k .ic { width: 15px; height: 15px; }
.fr-closed-list { display: grid; gap: 12px; margin: 16px 0 0; padding: 0; list-style: none; }
.fr-closed-list li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--text-3); }
.fr-closed-list span { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 10px; background: var(--card-inset); }
.fr-closed-list .ic { width: 15px; height: 15px; opacity: .7; }
@media (max-width: 900px) { .fr-keep { grid-template-columns: 1fr; } .fr-closed { grid-template-columns: 1fr; } }

/* Administration : création d’un compte */
.adm-opt { margin-left: 4px; font-weight: 500; color: var(--text-3); }
.adm-hint { margin-top: -4px; font-size: 12.5px; color: var(--text-3); }
.adm-acc-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--stroke); background: var(--card); font: inherit; text-align: left; color: var(--text); cursor: pointer; transition: border-color .25s, background .25s; }
.adm-acc-row[aria-pressed="true"] { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 5%, var(--card)); }
.adm-acc-row:disabled { cursor: default; opacity: .7; }
.adm-acc-ic { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 11px; color: var(--accent); background: var(--accent-soft); }
.adm-acc-ic .ic { width: 17px; height: 17px; }
.adm-acc-t { flex: 1; min-width: 0; }
.adm-acc-t b { display: block; font-size: 14.5px; font-weight: 700; }
.adm-acc-t small { font-size: 12.5px; color: var(--text-3); }
.fr-page[hidden] { display: none; }
.fr-page.is-px { padding-top: 28px; }