/* v4.css : la couche globale HUD + aurore (28/10/2026). Chargée APRÈS brand.css, marches.css, v3.css, v3-niveaux.css.
   Elle redéfinit les jetons communs du brief, passe tout le site en sombre aurore, et reprend les composants v3.
   Pages hors accueil : <body class="v4l"> (les anciens jetons --ink/--body/--card sont alors remappés en sombre).
   Accueil : <body class="v4h"> (jetons du brief seulement, l'accueil a sa propre feuille). */

/* ---------- 1. JETONS COMMUNS (brief) ---------- */
:root{
  --ink:#04050a; --tx:#eceef7; --mut:#a9aec4; --line:rgba(255,255,255,.13);
  --warm:#ffb067; --coral:#ff6f61; --cold:#5cc8ff; --vio:#8a74ff; --ok:#7ee2a8; --no:#ff9990; --sig:#1f5bff;
  --serif:Archivo,ui-sans-serif,system-ui,sans-serif; --sans:Archivo,ui-sans-serif,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --out:cubic-bezier(.22,1,.36,1); --gutter:clamp(18px,5vw,56px);
  --v4-glass:linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.014));
  color-scheme:dark;
}
/* dark tech (28/10/2026, David : « trop clair ») : noir bleuté, grille fine, l'aurore en lueurs */
html{background-color:#04050a; background-image:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px); background-size:64px 64px; background-attachment:fixed}
body{font-family:var(--sans); color:var(--tx); overflow-x:clip}
:focus-visible{outline:2px solid var(--cold); outline-offset:3px}

/* Anciens jetons, remappés pour les pages hors accueil. --ink devient la couleur de texte forte. */
body.v4l,body.v4l .v3-sombre,.v3-stat > .v3-b:nth-child(even of .v3-b:not([hidden])){
  --ink:#eceef7; --body:#d5d8e8; --soft:#a9aec4; --line:rgba(255,255,255,.13); --paper:#04050a;
  --card:rgba(255,255,255,.035); --orange:#ffb067; --orange-ink:#ffb067; --accent-ink:#5cc8ff; --accent:#1f5bff; --dark:#0b0d18;
  --charbon:#0b0d18; --charbon-2:#12152a; --line-d:rgba(255,255,255,.13); --creme:#eceef7;
}
body.v4l{background:transparent; color:var(--body); font-family:var(--sans)}
body.v4l{padding-top:84px}

/* ---------- 2. AURORE + PETITES ÉTOILES (CSS seul, pages hors accueil) ---------- */
body.v4l::before{content:""; position:fixed; inset:-20%; z-index:-2; pointer-events:none;
  background:radial-gradient(40% 34% at 14% 8%,rgba(255,150,80,.13),transparent 70%),radial-gradient(34% 40% at 92% 24%,rgba(70,160,255,.12),transparent 70%),radial-gradient(34% 34% at 55% 100%,rgba(138,116,255,.09),transparent 70%)}
body.v4l::after{content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.09;
  background:radial-gradient(circle,#fff 0 1px,transparent 1.5px) 0 0/28px 28px;
  -webkit-mask:radial-gradient(220px circle at var(--mx,50%) var(--my,30%),#000,rgba(0,0,0,.35) 55%,rgba(0,0,0,.18));mask:radial-gradient(220px circle at var(--mx,50%) var(--my,30%),#000,rgba(0,0,0,.35) 55%,rgba(0,0,0,.18))}
@media (prefers-reduced-motion:no-preference){
  body.v4l::before{animation:v4-aurore 38s ease-in-out infinite alternate}
  @keyframes v4-aurore{to{transform:translate3d(3%,-2%,0) scale(1.06)}}
}
html.david.fx-aurore body.v4l::before{opacity:1;filter:saturate(1.5) brightness(1.25)}
html.no-dots body.v4l::after{display:none}

/* ---------- 3. TYPO ---------- */
body.v4l h1,body.v4l h2{font-family:var(--serif); font-weight:700; font-stretch:112%; text-transform:uppercase; letter-spacing:-.005em; font-variation-settings:normal}
body.v4l .v3-art h2,body.v4l .v3-groupe > .v3-g-t h2,body.v4l .v3-prose h2{font-weight:700; line-height:1.08}
body.v4l h3{font-family:var(--serif); font-weight:700}
.v3-mono,.v3-rub{font-family:var(--mono); font-size:13px; letter-spacing:.1em; font-weight:500}
body.v4l .v3-tete h1{font-weight:700; line-height:1.02; letter-spacing:-.005em; max-width:20ch; font-size:clamp(2rem,5.2vw,4rem); animation:none}
body.v4l .v3-tete h1 em,body.v4l h1 em,body.v4l h2 em{font-style:normal; background:linear-gradient(100deg,var(--warm),var(--coral) 38%,#c86fd0 68%,var(--cold)); -webkit-background-clip:text; background-clip:text; color:transparent; padding-right:.06em; animation:none}
.v3-rub{color:var(--warm)}
.v3-b a:not([class]),.v3-art a:not([class]){color:var(--cold)}
.v3-b b,.v3-b strong,.v3-b h1,.v3-b h2,.v3-b h3{color:var(--tx)}
.v3-art code,.v3-prose code{background:rgba(255,255,255,.08); color:var(--tx); border-radius:2px}
::selection{background:rgba(92,200,255,.35)}

/* ---------- 4. BANDES ---------- */
body.v4l .v3-b{background:transparent; color:var(--body)}
body.v4l .v3-b::before{background:var(--line)}
body.v4l .v3-sombre{background:rgba(4,5,12,.38)}
body.v4l .v3-sombre::before,body.v4l .v3-stat > .v3-b:nth-child(even of .v3-b:not([hidden]))::before{background:linear-gradient(90deg,transparent,rgba(92,200,255,0) 18%,rgba(92,200,255,.55) 50%,rgba(255,176,103,0) 82%,transparent)}
body.v4l .v3-stat > .v3-b:nth-child(even of .v3-b:not([hidden])){background:rgba(4,5,12,.38)}
.v3-tete::after{background:radial-gradient(55% 60% at 30% 0%,rgba(255,150,80,.12),transparent 70%)}
.v3-fil a{color:var(--warm)}
.v3-fil a:focus-visible{outline-color:var(--cold)}
.v3-meta li{border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--tx); border-radius:2px}
.v3-meta li b{color:var(--warm)}
.v3-chapeau{color:#cfd3e6}
.v3-tete-m{filter:drop-shadow(0 12px 30px rgba(255,150,80,.18))}

/* ---------- 5. VERRE ---------- */
.v3-enc,.v3-depart>div,.v3-planb,.v3-ba>div,.v3-prose .note,.nv-duo aside,.nv-nav a,.nv-test,.nv-carte,.v3-suite,.v3-toc nav{
  background:var(--v4-glass) !important; border:1px solid var(--line); border-radius:4px; box-shadow:none;
  -webkit-backdrop-filter:blur(10px) saturate(1.2); backdrop-filter:blur(10px) saturate(1.2)}
.v3-depart .v3-fin{background:linear-gradient(160deg,rgba(255,176,103,.14),rgba(255,111,97,.05)) !important; border-color:rgba(255,176,103,.35)}
.v3-depart .v3-fin .v3-mono{color:var(--warm)}
.v3-depart .v3-fin p,.v3-depart .v3-fin b{color:var(--tx)}
.v3-depart h2{color:var(--warm); font-family:var(--mono); font-size:13px; font-stretch:100%; letter-spacing:.1em}
.v3-besoin li::before{color:var(--cold)}
.v3-depart{gap:12px}
@media (prefers-reduced-transparency:reduce){.v3-enc,.v3-depart>div,.v3-planb,.v3-ba>div,.nv-duo aside,.nv-nav a,.nv-test,.nv-carte,.v3-suite,.v3-toc nav{background:#10132a !important; -webkit-backdrop-filter:none; backdrop-filter:none}}

/* Callouts */
.v3-enc{border-left:3px solid var(--tx)}
.v3-enc .v3-mono{color:var(--mut)}
.v3-enc-astuce{border-left-color:var(--cold); border-top-color:var(--line)}
.v3-enc-astuce .v3-mono{color:var(--cold)}
.v3-enc-attention{border-left-color:var(--coral); border-top-color:var(--line); color:var(--body)}
.v3-enc-attention .v3-mono{color:var(--no)}
.v3-enc-attention b,.v3-enc-moi b,.v3-enc-moi code,.v3-enc-attention code{color:var(--tx)}
.v3-enc-retenir{border-left-color:var(--ok)}
.v3-enc-retenir .v3-mono{color:var(--ok)}
.v3-enc-moi{border-left-color:var(--warm); border-top-color:var(--line); background:var(--v4-glass); color:var(--body)}
.v3-enc-moi .v3-mono{color:var(--warm)}
.v3-mot{border-left-color:var(--vio); border-top-color:var(--line)}
.v3-mot dfn{color:var(--tx)}
.v3 .v3-enc-attention a,.v3 .v3-depart .v3-fin a{color:var(--cold)}
.v3-art .v3-enc-moi code,.v3-enc-attention code,.v3-depart .v3-fin code{background:rgba(255,255,255,.1)}
/* La limite honnête et le piège : mis en valeur */
.nv-duo{border-top:0; padding-top:0; gap:14px; max-width:none}
.nv-duo aside{padding:var(--e-5); border-top:1px solid var(--line)}
.nv-limite{border-left:3px solid var(--warm) !important; background:linear-gradient(160deg,rgba(255,176,103,.14),rgba(255,176,103,.03)) !important}
.nv-piege{border-left:3px solid var(--coral) !important; background:linear-gradient(160deg,rgba(255,111,97,.14),rgba(255,111,97,.03)) !important}
.nv-duo h2{font:500 13px/1.4 var(--mono); letter-spacing:.1em; font-stretch:100%; color:var(--warm)}
.nv-piege h2{color:var(--no)}
.nv-duo p{font-size:18px; line-height:1.6; color:var(--tx)}

/* ---------- 6. BARRE FLOTTANTE DE VERRE ---------- */
.vye-barre{position:fixed; top:12px; left:0; right:0; z-index:50; padding:0 12px; background:none; border:0; -webkit-backdrop-filter:none; backdrop-filter:none; pointer-events:none}
.vb-in{pointer-events:auto; max-width:1120px; margin:0 auto; padding:7px 9px 7px 16px; min-height:56px; border-radius:2px; border:1px solid var(--line);
  background:rgba(10,12,22,.58); -webkit-backdrop-filter:blur(16px) saturate(1.3); backdrop-filter:blur(16px) saturate(1.3); box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 18px 40px -20px #000}
@media (prefers-reduced-transparency:reduce){.vb-in{background:#0d1020; -webkit-backdrop-filter:none; backdrop-filter:none}}
.vb-logo{color:var(--tx)}
.vb-logo img{height:36px; margin:-4px 0}
.vb-term{color:var(--tx); font-weight:700; font-size:15px}
.vb-o{color:var(--warm)}
.vb-cur{background:var(--tx)}
/* le curseur du logo clignote comme dans un terminal : franc, sans fondu */
@media (prefers-reduced-motion:no-preference){.vb-cur{animation:vb-clign 1.06s steps(1,end) infinite} @keyframes vb-clign{50%{opacity:0}}}
.vb-liste a{color:var(--mut); font-size:14px; min-height:44px; border-radius:2px}
.vb-liste a:hover,.vb-liste a[aria-current]{color:var(--tx); background:rgba(255,255,255,.07)}
.vb-liste a:not(.vb-cta)::after{display:none}
.vb-liste .vb-cta,.vb-liste a.vb-cta:hover{padding-inline:20px; margin-left:8px; background:linear-gradient(120deg,var(--warm),var(--coral)); color:#1a0d08; font-weight:700; border-radius:2px}
.vb-liste .vb-cta:hover{filter:brightness(1.08)}
.vye-barre a:focus-visible,.vb-menu:focus-visible{outline-color:var(--cold)}
.vb-menu{border:1px solid var(--line); color:var(--tx); background:rgba(255,255,255,.06); border-radius:2px}
@media (max-width:759px){
  .vye-barre{top:8px; padding:0 8px}
  .vb-in{padding:0 6px 0 12px}
  .vb-logo{min-height:52px}
  .vb-menu{margin:4px 0}
  html.vj .vb-liste{border-top-color:var(--line)}
  html.vj .vb-liste a{border-bottom:1px solid rgba(255,255,255,.07)}
  html.vj .vb-liste a[aria-current]{box-shadow:inset 3px 0 0 var(--warm)}
  html.vj .vb-liste .vb-cta{border:0; margin:var(--e-3) 0 var(--e-2); color:#1a0d08}
  body.v4l{padding-top:72px}
}
.v3-progres{z-index:60; height:2px}
.v3-progres i{background:linear-gradient(90deg,var(--warm),var(--coral),var(--cold))}
.saut{background:var(--tx); color:#000; border-radius:2px}
.v3-bandeau{background:rgba(4,5,12,.5); border-bottom:1px solid var(--line)}

/* ---------- 7. PIED ---------- */
.vye-pied{background:rgba(4,5,12,.7); color:var(--mut); border-top:1px solid var(--line); margin-top:var(--e-7)}
.vye-pied a{color:var(--tx)}
.vye-pied a:hover{color:var(--warm)}
.vye-pied a:focus-visible{outline-color:var(--cold)}
.vye-pied .v3-reperes{color:var(--mut); border-top-color:var(--line)}
.vye-pied .v3-pied-l>span:first-child{font-family:var(--mono); color:var(--warm); font-weight:700}
.v4-sign{margin:var(--e-3) 0 0; font:500 13px/1.4 var(--mono); letter-spacing:.06em; color:var(--mut)}

/* ---------- 8. GUIDE : étapes, prompts, sommaire ---------- */
.v3-art{color:var(--body)}
.v3-ch{border-top-color:var(--line)}
.v3-etapes{border-top:0; display:grid; gap:10px}
.v3-etapes li{border:1px solid var(--line); border-radius:4px; padding:var(--e-4); background:var(--v4-glass); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
.v3-n{background:transparent; color:var(--warm); border:1px solid rgba(255,176,103,.5); border-radius:2px; font-weight:500}
.v3-etapes li > span:not(.v3-n){color:var(--tx)}
.v3-coche{color:var(--tx)}
.v3-coche:hover::before{border-color:var(--cold)}
.v3-coche::before{border-radius:2px}
.v3-etapes li.fait .v3-n{background:rgba(255,255,255,.06); color:var(--mut); border-color:var(--line)}
.v3-etapes li.fait .v3-coche::before{background:var(--ok); border-color:var(--ok)}
.v3-etapes li.fait .v3-coche::after{border-color:#06070d}
.v3-etapes li > span:not(.v3-n) .sr{position:absolute}
.v3-planb{border-left:3px solid var(--vio); border-top:1px solid var(--line)}
.v3-planb summary{color:var(--tx)}
.v3-planb summary .v3-mono{color:var(--vio)}
.v3-planb summary::after{color:var(--tx)}
.v3-planb summary:focus-visible{outline-color:var(--cold)}
.v3-ba .non{color:var(--mut)}
.v3-ba .non .v3-mono{color:var(--no)}
.v3-ba .oui{border-top:1px solid var(--line); border-left:3px solid var(--ok)}
.v3-ba .oui .v3-mono{color:var(--ok)}
.v3-liste li::marker{color:var(--warm)}

.v3-code,.v3-prose .prompt,body.v4l .v3-sombre .v3-code,body.v4l .v3-sombre .v3-prose .prompt{background:rgba(3,4,10,.72); color:var(--tx); border:1px solid var(--line); border-radius:4px; overflow:hidden}
.v3-code-h{border-bottom:1px solid var(--line); background:rgba(255,255,255,.04)}
.v3-code-h .v3-mono{color:var(--cold)}
.v3-code pre,.v3-prose .prompt pre{color:var(--tx); font-family:var(--mono); font-size:15px}
.v3-code.cmd pre::before{color:var(--warm)}
.v3-copie{border-left:1px solid var(--line); color:var(--tx); background:transparent; font-family:var(--mono); font-weight:500}
.v3-copie:hover,.v3-copie.ok{background:linear-gradient(120deg,var(--warm),var(--coral)); color:#1a0d08}
.v3-copie:focus-visible{outline-color:var(--cold)}
.v3-prose .prompt .lbl{color:var(--cold)}

.v3-toc nav{border-top:1px solid var(--line) !important; padding:var(--e-4)}
.v3-toc .v3-mono{color:var(--mut)}
.v3 .v3-toc nav a{color:var(--mut); border-left-color:transparent; padding-left:10px}
.v3-toc nav a:hover{color:var(--tx)}
.v3-toc nav a[aria-current]{color:var(--tx); border-left-color:var(--warm)}
.v3-toc nav a[aria-current] .n{color:var(--warm)}
.v3-toc nav a .n,.v3-toc nav a em{color:var(--mut)}
.v3-toc nav a:focus-visible{outline-color:var(--cold)}
.v3-etat{border-top-color:var(--line); color:var(--mut)}
.v3-etat b{color:var(--tx)}
.v3-jauge{background:rgba(255,255,255,.1)}
.v3-jauge i{background:linear-gradient(90deg,var(--warm),var(--coral),var(--cold))}
@media (min-width:1100px){.v3-toc{top:96px}}
@media (max-width:1099px){.v3-toc nav{background:var(--v4-glass) !important}}

/* Niveaux : pastille, rail, navigation */
.nv-pastille{background:rgba(255,255,255,.06) !important; color:var(--tx) !important; border:1px solid var(--line); border-radius:2px; box-shadow:none !important; font-family:var(--mono); font-weight:500}
.nv-pastille .v3-mono{color:var(--warm)}
.nv-rail{border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.nv-rail-item{color:var(--mut); border-left-color:var(--line)}
.nv-rail-item .v3-mono{color:var(--mut)}
.nv-rail-item:hover{color:var(--tx); background:rgba(255,255,255,.05)}
.nv-rail-item.nv-courant{background:rgba(255,176,103,.12); color:var(--tx); box-shadow:inset 0 -2px 0 var(--warm)}
.nv-rail-item.nv-courant .v3-mono{color:var(--warm)}
.nv-rail-item:focus-visible,.nv-nav a:focus-visible{outline-color:var(--cold)}
.nv-nav{border-top:0; padding-top:0; max-width:none}
.nv-nav a{color:var(--tx); padding:var(--e-4)}
.nv-nav a:hover{border-color:rgba(255,176,103,.5)}
.nv-nav a .v3-mono{color:var(--warm)}
.nv-test{border-top:1px solid var(--line)}
.nv-test legend{color:var(--tx)}
.nv-test input{accent-color:var(--warm)}
.nv-test > p:not(.v3-rub){color:var(--mut)}
.nv-resultat{color:var(--tx)}
.nv-carte{color:var(--body); border:1px solid var(--line)}
.nv-carte h3{color:var(--tx)}
.nv-carte .nv-duo aside{background:transparent !important; border:0; backdrop-filter:none; -webkit-backdrop-filter:none; padding:0}
.nv-carte .nv-duo h4{color:var(--warm); font-family:var(--mono); font-weight:500}
.nv-credit{color:var(--mut)}
.nv-carte .nv-pastille.nv-n2,.v3-sombre .nv-pastille.nv-n2{color:var(--tx) !important}
.v3-suite{border-top:1px solid var(--line); color:var(--tx)}
.v3-suite .v3-mono{color:var(--warm)}
.v3-suite .t{color:var(--tx); font-weight:700}
.v3-suite .fl{color:var(--warm)}
.v3-suite:hover{border-color:rgba(255,176,103,.5)}
.v3-suite:focus-visible{outline-color:var(--cold)}
.v3-bonus,.v3-mention{color:var(--mut)}

/* ---------- 9. BOUTONS, FORMULAIRES ---------- */
.v3-bouton,.nv-test .v3-bouton{background:linear-gradient(120deg,var(--warm),var(--coral)); color:#1a0d08; border:0; border-radius:2px; font-weight:700; transition:transform .25s var(--out),filter .25s}
.v3-bouton:hover,.nv-test .v3-bouton:hover{background:linear-gradient(120deg,var(--warm),var(--coral)); filter:brightness(1.08); transform:translateY(-1px)}
.v3-bouton:active{transform:scale(.97)}
.v3-bouton.fant{background:rgba(255,255,255,.06); color:var(--tx); box-shadow:none; border:1px solid var(--line)}
.v3-bouton.fant:hover{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.35); filter:none}
.v3-bouton:focus-visible{outline-color:var(--cold)}
.v3-form input,.v3-prose .prise input,body.v4l .v3-sombre .v3-prose .prise input{background:rgba(255,255,255,.06); color:var(--tx); border:1px solid var(--line); border-radius:2px}
.v3-form input::placeholder{color:var(--mut)}
.v3-form button,.v3-prose .prise button,body.v4l .v3-sombre .v3-prose .prise button{background:linear-gradient(120deg,var(--warm),var(--coral)); color:#1a0d08; border-radius:2px}
.v3-form button:hover,.v3-prose .prise button:hover{background:linear-gradient(120deg,var(--warm),var(--coral)); color:#1a0d08; filter:brightness(1.08)}
.v3-form :focus-visible{outline-color:var(--cold)}
.v3-msg{color:var(--mut)}

/* ---------- 10. VERDICT, INDEX, TABLEAUX, PROSE ---------- */
.v3-tampon{border-radius:2px; font-family:var(--mono); font-weight:500}
.v3-tampon.v-oui{background:rgba(126,226,168,.16); color:var(--ok); border:1px solid rgba(126,226,168,.5)}
.v3-tampon.v-part{background:rgba(255,176,103,.14); color:var(--warm); border:1px solid rgba(255,176,103,.5)}
.v3-tampon.v-non{border:1px solid rgba(255,153,144,.6); color:var(--no)}
.v3-verdict p{color:var(--tx); font-weight:600}
.v3-limite p{color:var(--tx)}
.v3-tdm{border-top:1px solid var(--line)}
.v3-tdm li{border-bottom-color:var(--line)}
.v3-tdm a,.v3-b .v3-tdm a{color:var(--tx)}
.v3-tdm .q{font-weight:700}
.v3-tdm .n,.v3-tdm .p,.v3-tdm .d,.v3-tdm .bientot{color:var(--mut)}
.v3-tdm .v{border-radius:2px}
.v3-tdm .v-oui{background:rgba(126,226,168,.16); color:var(--ok)}
.v3-tdm .v-part{background:rgba(255,176,103,.14); color:var(--warm)}
.v3-tdm .v-non{border-color:rgba(255,153,144,.6); color:var(--no)}
@media (hover:hover) and (pointer:fine){
  .v3-b .v3-tdm a:hover,.v3-tdm a:hover{background:rgba(255,255,255,.05); color:var(--tx)}
  .v3-tdm a:hover .p,.v3-tdm a:hover .n{color:var(--mut)}
  .v3-tdm a:hover .d{color:var(--warm)}
  .v3-tdm a:hover .v-non{border-color:rgba(255,153,144,.6); color:var(--no)}
}
.v3-tdm a:focus-visible{outline-color:var(--cold)}
.v3-art th,.v3-art td,.v3-prose th,.v3-prose td{border-bottom-color:var(--line)}
.v3-art thead th,.v3-prose th{color:var(--mut); font-family:var(--mono); font-weight:500}
.v3-art tbody th{color:var(--tx)}
.v3-outils dt{color:var(--tx)}
.v3-prose .sous,.v3-prose .mention,.v3-prose .maj,.v3-prose .fine{color:var(--mut)}
.v3-prose .prompt .copie{border-radius:2px}
.v3-b .v3-prose .etapes li::before{color:var(--warm)}
.v3-prose .qa-l{color:var(--tx)}

/* marches.css (vocabulaire des anciennes pages) : surfaces claires écrites en dur */
body.v4l .v3-prose [class*="card"],body.v4l .v3-prose .carte,body.v4l .v3-prose .exemple,body.v4l .v3-prose .cmdbox{background:var(--v4-glass); color:var(--body); border-color:var(--line); border-radius:4px}

/* ---------- 11. PROMPT BANK ---------- */
body.v4l .pb #q{background:rgba(255,255,255,.06); color:var(--tx); border-radius:2px}
body.v4l .pb #q:focus{border-color:var(--cold); box-shadow:0 0 0 3px rgba(92,200,255,.18)}
body.v4l .pb .filters button{color:var(--mut); border-radius:2px}
body.v4l .pb .filters button:hover{border-color:var(--mut); color:var(--tx)}
body.v4l .pb .filters button.on{background:rgba(255,176,103,.14); border-color:var(--warm); color:var(--warm)}
body.v4l .pb .filters button.kind.on{background:rgba(92,200,255,.14); border-color:var(--cold); color:var(--cold)}
body.v4l .pb .card{background:var(--v4-glass); border-radius:4px; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px)}
body.v4l .pb .card:hover{border-color:rgba(255,176,103,.5)}
body.v4l .pb .card h2{text-transform:none; font-stretch:100%; font-weight:700; color:var(--tx)}
body.v4l .pb .b{border-radius:2px}
body.v4l .pb .b-feat{background:rgba(255,176,103,.16); color:var(--warm)}
body.v4l .pb .b-kind{background:rgba(255,255,255,.07); color:var(--body)}
body.v4l .pb .howto{background:rgba(92,200,255,.07); border-color:rgba(92,200,255,.25); border-radius:2px}
body.v4l .pb .howto b{color:var(--cold)}
body.v4l .pb .promptbox{background:rgba(3,4,10,.7); border:1px solid var(--line); border-top:1px solid var(--line); border-radius:2px}
body.v4l .pb .fade{background:linear-gradient(transparent,#05060d)}
body.v4l .pb .actions,body.v4l .pb .actions button+button{border-color:var(--line)}
body.v4l .pb .actions button{color:var(--mut)}
body.v4l .pb .actions button:hover{color:var(--tx); background:rgba(255,255,255,.07)}
body.v4l .pb .actions .fiche{color:var(--cold)}
body.v4l .pb .actions .copy.done{color:var(--ok)}
body.v4l .pb .cmp-la,body.v4l .pb .clip::after{background:var(--cold); color:#06070d}

/* ---------- 12. COMPANION (Vee voxel, discret) ---------- */
/* la mascotte animée (héros de l'accueil et petite en bas à droite) : pose fixe, canvas par-dessus pendant un clip */
.mz{position:relative; display:block; aspect-ratio:3/4; padding:0; border:0; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent}
.mz-p,.mz-c{position:absolute; inset:0; width:100%; height:100%}
.mz-p{object-fit:contain; transition:opacity .18s}
.mz-c{opacity:0; pointer-events:none; transition:opacity .18s}
.mz.joue .mz-p,.mz.absent .mz-p{opacity:0}
.mz.joue .mz-c{opacity:1}
.mz.bug .mz-p{animation:mz-bug .42s steps(6)}
@keyframes mz-bug{20%{translate:-5px 2px; filter:hue-rotate(60deg) drop-shadow(-5px 0 0 #f0f)}60%{translate:5px -2px; filter:hue-rotate(-60deg) drop-shadow(5px 0 0 #0ff)}}
.mz:focus-visible{outline:2px solid var(--cold); outline-offset:2px; border-radius:2px}
.v4-mate{position:fixed; right:max(8px,env(safe-area-inset-right)); bottom:6px; z-index:40; width:96px; filter:drop-shadow(0 6px 14px rgba(0,0,0,.6)); transition:opacity .4s var(--out),transform .4s var(--out),visibility .4s}
.v4-mate:not(.joue):hover .mz-p{transform:translateY(-3px); transition:transform .3s var(--out)}
.v4-mate.hop .mz-p{animation:v4-hop .5s var(--out)}
@keyframes v4-hop{40%{transform:translateY(-10px)}}
html.no-mate .v4-mate{display:none}
@media (max-width:759px){.v4-mate{width:72px; right:4px; bottom:4px}}
@media print{.v4-mate{display:none}}

/* ---------- 13. MODE DAVID (flag navigateur, PAS de la sécurité : tout est dans le HTML public) ---------- */
[data-david]{display:none}
html.david [data-david]{display:revert}
.v4-test{margin:0; padding:8px var(--gutter); font:500 13px/1.5 var(--mono); letter-spacing:.04em; color:var(--tx); background:rgba(138,116,255,.18); border-bottom:1px solid rgba(138,116,255,.5); position:relative; z-index:2}
.v4-test b{color:var(--vio); filter:brightness(1.5)}
.v4-test a{color:var(--cold)}
html.david.no-tests .v4-test{display:none}
.v4-dbadge{position:fixed; left:12px; bottom:12px; z-index:70; display:none; font:700 12px/1 var(--mono); letter-spacing:.12em; color:#06070d; background:var(--vio); border:0; border-radius:2px; padding:10px 12px; min-height:36px; cursor:pointer}
html.david .v4-dbadge{display:block}
.v4-dbadge:focus-visible{outline:2px solid var(--tx); outline-offset:2px}
.v4-dpanel{position:fixed; left:12px; bottom:56px; z-index:70; width:min(320px,calc(100vw - 24px)); padding:14px; display:none; border:1px solid var(--line); border-radius:4px;
  background:rgba(10,12,22,.92); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); color:var(--tx); font:400 14px/1.5 var(--sans)}
.v4-dpanel.on{display:grid; gap:6px}
.v4-dpanel h2{font:500 12px/1.4 var(--mono); letter-spacing:.12em; text-transform:uppercase; font-stretch:100%; color:var(--vio); filter:brightness(1.4); margin:0 0 4px}
.v4-dpanel label{display:flex; gap:10px; align-items:center; min-height:36px; cursor:pointer}
.v4-dpanel input{accent-color:var(--vio); width:18px; height:18px}
.v4-dpanel p{margin:6px 0 0; font-size:12.5px; color:var(--mut)}
.v4-dpanel button{justify-self:start; margin-top:4px; font:500 12px/1 var(--mono); letter-spacing:.08em; color:var(--tx); background:rgba(255,255,255,.07); border:1px solid var(--line); border-radius:2px; padding:9px 12px; cursor:pointer}
.v4-dpanel button:hover{border-color:rgba(255,255,255,.35)}
html.fx-full .v3-enc,html.fx-full .v3-depart>div,html.fx-full .nv-duo aside{box-shadow:0 0 0 1px rgba(92,200,255,.25),0 0 30px -8px rgba(92,200,255,.35)}

/* ---------- 14. MOUVEMENT RÉDUIT ---------- */
@media (prefers-reduced-motion:reduce){
  body.v4l::before{animation:none}
  .v4-mate.hop .mz-p{animation:none}
}

/* ---------- 15. CIBLES TACTILES (mobile) ---------- */
@media (max-width:759px){
  .v3-fil-q a, .v4l th a{display:inline-flex; align-items:center; min-height:44px}
}

/* ---------- 16. GUIDES SIMPLIFIÉS (28/10/2026) : une seule numérotation, le niveau ---------- */
/* « Bon à savoir » : astuce, à retenir et mot ont le même encadré */
.v3-enc-retenir,.v3-enc-astuce,.v3-mot{border-left-color:var(--cold)}
.v3-enc-retenir .v3-mono,.v3-enc-astuce .v3-mono,.v3-mot .v3-mono{color:var(--cold)}

/* page des guides : une carte par niveau, ses guides en gros boutons */
.gx-grille{display:grid; gap:18px}
@media (min-width:900px){.gx-grille{grid-template-columns:1fr 1fr; align-items:start}}
.gx-niv{scroll-margin-top:100px; border:1px solid var(--line); border-radius:4px; background:var(--v4-glass); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); padding:clamp(20px,3vw,30px); position:relative}
.gx-niv::before,.gx-niv::after{content:""; position:absolute; width:12px; height:12px; border:1px solid var(--cold); opacity:.75; pointer-events:none}
.gx-niv::before{top:9px; left:9px; border-right:0; border-bottom:0}
.gx-niv::after{bottom:9px; right:9px; border-left:0; border-top:0}
.gx-niv:target{border-color:rgba(255,176,103,.55); box-shadow:0 0 0 1px rgba(255,176,103,.25),0 20px 50px -30px rgba(255,111,97,.6)}
.gx-h{display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:start; margin-bottom:18px}
.gx-num{font:800 clamp(72px,9vw,104px)/.8 var(--serif); font-variation-settings:'wdth' 112; background:linear-gradient(160deg,#fff,var(--warm) 55%,var(--coral)); -webkit-background-clip:text; background-clip:text; color:transparent; padding-right:.06em}
.gx-k{color:var(--warm); font-size:12px; letter-spacing:.16em; text-transform:uppercase; margin:2px 0 6px}
.gx-h h2{font-size:clamp(22px,2.6vw,28px); line-height:1.1; margin:0 0 6px}
.gx-h p:last-child{color:var(--body); margin:0}
.gx-liste{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.gx-liste a{display:grid; grid-template-columns:1fr auto; gap:4px 14px; align-items:center; padding:14px 16px; border:1px solid var(--line); border-radius:2px; background:rgba(0,0,0,.25); color:var(--tx); text-decoration:none; transition:border-color .2s,background .2s,transform .2s var(--out)}
.gx-liste a:hover{border-color:rgba(255,176,103,.7); background:rgba(255,176,103,.06); transform:translateX(3px)}
.gx-liste .t{font-weight:700; font-size:18px; grid-column:1}
.gx-liste .p{grid-column:1; color:var(--body); font-size:15px; line-height:1.45}
.gx-liste .d{grid-column:2; grid-row:1 / span 2; color:var(--warm); font-size:13px; white-space:nowrap}
.gx-liste .d i{font-style:normal}
.gx-test{margin-top:18px; color:var(--body)}
.gx-test a{color:var(--cold); border-bottom:1px solid currentColor; text-decoration:none}

/* haut d'un guide : tout tient dans un écran, la première action est le gros bouton */
.g-fin{margin:16px 0 0; color:var(--body); max-width:60ch}
.g-fin .v3-mono{display:block; color:var(--warm); font-size:12px; letter-spacing:.16em; text-transform:uppercase; margin-bottom:4px}
.g-go{display:flex; flex-wrap:wrap; gap:12px 18px; align-items:center; margin:20px 0 4px}
.g-start{display:inline-flex; align-items:center; gap:8px; min-height:50px; padding:0 22px; border-radius:2px; background:linear-gradient(120deg,var(--warm),var(--coral)); color:#1a0d08 !important; font-weight:700; text-decoration:none !important}
.g-start:hover{filter:brightness(1.08)}
.g-besoin summary{cursor:pointer; color:var(--cold); font-size:15px; min-height:44px; display:flex; align-items:center}
.g-besoin ul{margin:6px 0 0; padding-left:18px; color:var(--body)}
.v3-tete .v3-meta{margin-top:18px}

/* sommaire : sur mobile et tablette, la fine barre de lecture en haut d'écran suffit, pas de boîte d'un écran avant le guide */
@media (max-width:1099px){.v3-grille > .v3-toc{display:none}}
/* titres des guides en blanc, la couleur de lien reste pour la flèche */
.v3 .gx-liste a,.v3 .gx-liste a .t{color:var(--tx)}
/* mobile : la mascotte du haut passe en petit à droite, le titre remonte */
@media (max-width:759px){
  .v3-tete{position:relative}
  .v3-tete .v3-tete-m{position:absolute; right:14px; top:18px; width:56px; max-height:84px; height:auto; margin:0}
  .v3-tete .v3-fil{padding-right:84px}
}

/* fin d'un guide : le suivant, et partager */
.g-apres .v3-w{display:grid; gap:14px; justify-items:start}
.g-apres .v3-suite{width:100%}
.g-partage{font:600 15px var(--sans); color:var(--tx); background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:2px; min-height:46px; padding:0 18px; cursor:pointer}
.g-partage:hover{border-color:var(--cold)}