/* =====================================================================
   v3.css : la coque et les gabarits des pages v3 (guide, fiche, page statique).
   Même charte que la landing proto-v3c (brand.css, jetons inchangés).
   Toutes les classes sont préfixées v3- (sauf la barre .vye-barre/.vb-*, copiée
   telle quelle de la landing) : les pages « habillées » gardent leur propre <style>
   (setup, plug-codex...) et ne doivent pas entrer en collision avec celui-ci.
   Règle de la charte : l'orange ne vit que sur charbon. Sur le clair, --orange-ink.
   ===================================================================== */
[hidden]{display:none !important}
.v3-w{max-width:1080px; margin:0 auto; padding:0 24px}
@media (max-width:759px){ .v3-w{padding:0 16px} }
.v3-mono{font:700 var(--t-xs)/1.4 "JetBrains Mono",ui-monospace,monospace; letter-spacing:.08em; text-transform:uppercase}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.saut{position:absolute; left:-999px; top:8px; z-index:99; background:var(--accent); color:#fff; padding:10px 14px; font-weight:700}
.saut:focus{left:8px}
html{scroll-padding-top:76px}

/* ---------- Les bandes : clair par défaut, sombre en redéfinissant les jetons ---------- */
.v3-b{position:relative; isolation:isolate; padding-block:var(--e-7); background:var(--paper); color:var(--body)}
.v3-b::before{content:""; position:absolute; inset:0 0 auto; height:1px; z-index:-1; background:var(--line)}
.v3-sombre{--ink:#F1F2F3; --body:#D6D8DC; --soft:#A3AAB6; --line:#2C3038; --card:#1F2229; --accent-ink:#8FA9FF; --orange-ink:var(--orange);
  background:#16181D; color:var(--body)}
/* la ligne lumineuse (linear) en haut des bandes sombres */
.v3-sombre::before{background:linear-gradient(90deg,transparent,rgba(232,98,42,0) 18%,rgba(232,98,42,.75) 50%,rgba(232,98,42,0) 82%,transparent)}
.v3-b h1,.v3-b h2,.v3-b h3{color:var(--ink)}
.v3-b a:not([class]){color:var(--accent-ink)}
.v3-b b,.v3-b strong{color:var(--ink)}
.v3-rub{color:var(--orange-ink); margin:0 0 var(--e-3)}
.v3-reperes{display:flex; justify-content:space-between; gap:var(--e-3); color:var(--soft); margin:0}
.v3-groupe{display:grid; gap:var(--e-4)}
@media (min-width:960px){ .v3-groupe{grid-template-columns:260px minmax(0,1fr); column-gap:var(--e-6); align-items:start} }
.v3-groupe > .v3-g-t h2{font-size:clamp(1.5rem,3vw,2rem); font-weight:800; line-height:1.08; margin:0}
.v3-groupe > .v3-g-t p{color:var(--soft); font-size:var(--t-sm2); margin-top:var(--e-2); max-width:34ch}
.v3-groupe > .v3-g-t .v3-rub{color:var(--orange-ink); font-size:var(--t-xs); margin:0 0 var(--e-3)}

/* =====================================================================
   1. LA BARRE (identique à la landing v3c)
   ===================================================================== */
.vye-barre{position:sticky; top:0; z-index:50; background:rgba(22,24,29,.94); -webkit-backdrop-filter:blur(10px) saturate(1.2); backdrop-filter:blur(10px) saturate(1.2);
  border-bottom:1px solid #2C3038; font-family:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; line-height:1.4}
/* brand.css peint tout <nav> en clair avec !important, et certaines pages habillées
   rendent <nav> collant : on neutralise tout ici. */
.vye-barre nav{background:transparent !important; border:0 !important; position:static !important; height:auto !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; box-shadow:none !important}
.vb-in{max-width:1080px; margin:0 auto; padding:0 24px; min-height:60px; display:flex; align-items:center; gap:var(--e-4)}
.vb-logo{display:inline-flex; align-items:center; gap:8px; text-decoration:none; margin-right:auto; color:#F1F2F3}
.vb-logo img{display:block; width:auto; height:40px; margin:-6px 0}
.vb-term{font:800 16px/1 "JetBrains Mono",ui-monospace,monospace; letter-spacing:-.02em; color:#E7E3D8; white-space:nowrap}
.vb-o{color:#E8622A}
.vb-cur{display:inline-block; width:.55em; height:.95em; background:#E7E3D8; vertical-align:-.12em; margin-left:.08em}
/* Le curseur ne clignote plus : aucune animation en boucle (décision David, 06/10). */
.vb-liste{list-style:none; display:flex; align-items:center; gap:4px; margin:0; padding:0}
.vb-liste li{margin:0; padding:0}
.vb-liste li::before{content:none}
.vb-liste a{display:inline-flex; align-items:center; min-height:44px; padding:0 12px; color:#C3CED8; font-size:var(--t-sm2); font-weight:600; text-decoration:none; position:relative;
  transition:color var(--d-fast) var(--snap)}
.vb-liste a:not(.vb-cta)::after{content:""; position:absolute; left:12px; right:12px; bottom:9px; height:1px; background:#E8622A; transform:scaleX(0); transform-origin:left; transition:transform var(--d-ui) var(--out)}
.vb-liste a:hover, .vb-liste a[aria-current]{color:#FFFFFF}
.vb-liste a:hover::after, .vb-liste a[aria-current]::after{transform:none}
.vb-liste .vb-cta{margin-left:8px; background:#E8622A; color:#16181D; font-weight:800; padding:0 16px; transition:background var(--d-fast) var(--snap)}
.vb-liste .vb-cta:hover{background:#F1F2F3; color:#16181D}
.vye-barre a:focus-visible, .vb-menu:focus-visible{outline:2px solid #E8622A; outline-offset:2px}
.vb-menu{display:none; font:700 var(--t-xs)/1 "JetBrains Mono",monospace; letter-spacing:.08em; text-transform:uppercase; color:#F1F2F3; background:transparent;
  border:1px solid #3A3F49; border-radius:0; min-height:44px; padding:0 14px; margin:0; cursor:pointer; align-items:center; gap:10px}
.vb-menu i{position:relative; display:block; width:14px; height:2px; background:currentColor; transition:background var(--d-fast)}
.vb-menu i::before, .vb-menu i::after{content:""; position:absolute; left:0; width:14px; height:2px; background:currentColor; transition:transform var(--d-ui) var(--out)}
.vb-menu i::before{top:-5px} .vb-menu i::after{top:5px}
.vb-menu[aria-expanded="true"] i{background:transparent}
.vb-menu[aria-expanded="true"] i::before{transform:translateY(5px) rotate(45deg)}
.vb-menu[aria-expanded="true"] i::after{transform:translateY(-5px) rotate(-45deg)}
@media (max-width:759px){
  .vb-in{padding:0 16px; flex-wrap:wrap; gap:0}
  .vb-logo{min-height:60px}
  .vb-liste{flex-wrap:wrap; padding-bottom:var(--e-2)}
  .vb-liste li{flex:none}
  html.vj .vb-menu{display:inline-flex}
  html.vj .vb-nav{display:none; flex:1 1 100%}
  html.vj .vye-barre.ouvert .vb-nav{display:block; animation:vb-ouvre var(--d-ui) var(--out)}
  html.vj .vb-liste{flex-direction:column; align-items:stretch; gap:0; padding:var(--e-2) 0 var(--e-4); border-top:1px solid #2C3038}
  html.vj .vb-liste a{width:100%; min-height:52px; padding:0 4px; font-size:var(--t-md); border-bottom:1px solid #22262D}
  html.vj .vb-liste a::after{display:none}
  html.vj .vb-liste a[aria-current]{color:#FFFFFF; box-shadow:inset 3px 0 0 #E8622A; padding-left:14px}
  html.vj .vb-liste .vb-cta{margin:var(--e-4) 0 0; justify-content:center; border:0}
}
@keyframes vb-ouvre{from{opacity:0; transform:translateY(-6px)}}

/* Barre de lecture (guides, fiches) : 3 px orange au-dessus de la barre. */
.v3-progres{position:fixed; top:0; left:0; right:0; height:3px; z-index:60; pointer-events:none}
.v3-progres i{display:block; height:100%; background:var(--orange); transform-origin:0 50%; transform:scaleX(0)}

/* Bande de repères des pages habillées (setup, plug-codex...) */
.v3-bandeau{background:#16181D; border-bottom:1px solid #2C3038; padding-block:10px}
.v3-bandeau .v3-reperes{color:#A3AAB6}

/* =====================================================================
   2. LE PIED, avec ses repères de page
   ===================================================================== */
.vye-pied{background:#0F1115; color:#A3AAB6; padding:var(--e-6) 0; font-size:var(--t-sm); line-height:1.5; border-top:1px solid #2C3038; margin:0}
.vye-pied p{margin:0; max-width:none}
.vye-pied .v3-pied-l{display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center}
.vye-pied a{color:#E8E9EB; text-decoration:none; display:inline-block; padding:6px 0}
.vye-pied a:hover{color:#FFFFFF; text-decoration:underline}
.vye-pied a:focus-visible{outline:2px solid #E8622A; outline-offset:3px}
.vye-pied .v3-pied-plus{margin-top:var(--e-2)}
.vye-pied .v3-reperes{color:#A3AAB6; margin-top:var(--e-5); padding-top:var(--e-3); border-top:1px solid #2C3038}

/* =====================================================================
   3. LA TÊTE DE PAGE (bande sombre) : repères, fil, titre, chapeau, méta
   ===================================================================== */
.v3-tete{padding-block:var(--e-5) var(--e-7); overflow:hidden}
.v3-tete::after{content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(55% 60% at 30% 0%, rgba(31,91,255,.14), transparent 70%)}
.v3-tete-g{display:grid; gap:var(--e-5); align-items:end; margin-top:var(--e-7)}
@media (min-width:760px){ .v3-tete-g{grid-template-columns:minmax(0,1fr) auto} }
/* brand.css peint tout <nav> en clair avec !important : les nav de contenu restent transparentes */
.v3 nav:not(.v3-toc nav){background:transparent !important; border-bottom-color:transparent !important}
.v3-fil{display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; color:var(--soft); margin:0 0 var(--e-4)}
.v3-fil a{color:var(--orange); text-decoration:none; display:inline-flex; align-items:center; min-height:32px}
.v3-fil a:hover{text-decoration:underline}
.v3-fil a:focus-visible{outline:2px solid var(--orange); outline-offset:2px}
.v3-tete h1{font-size:clamp(2.3rem,5.6vw,4.4rem); font-variation-settings:"wdth" 112; font-weight:800; line-height:1; letter-spacing:-.025em; max-width:18ch; margin:0}
.v3-tete h1 em{font-style:normal; color:var(--orange)}
.v3-chapeau{margin-top:var(--e-4); max-width:52ch; font-size:var(--t-md); line-height:1.55; color:#C3CED8}
.v3-meta{list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:var(--e-5) 0 0; padding:0}
.v3-meta li{border:1px solid #3A3F49; padding:7px 10px; color:#D6D8DC}
.v3-meta li b{color:var(--orange)}
.v3-tete-m{width:auto; max-height:220px; max-width:180px; object-fit:contain; justify-self:end}
@media (max-width:759px){
  .v3-tete-g{margin-top:var(--e-6)}
  .v3-tete-m{max-height:104px; max-width:104px; justify-self:start; order:-1}
  .v3-tete h1{font-variation-settings:"wdth" 100}
}

/* Verdict de fiche : un tampon en tête */
.v3-verdict{display:flex; flex-wrap:wrap; gap:var(--e-3); align-items:center; margin-top:var(--e-5)}
.v3-tampon{font:800 var(--t-md)/1 "JetBrains Mono",monospace; letter-spacing:.06em; text-transform:uppercase; padding:12px 14px}
.v3-tampon.v-oui{background:var(--accent); color:#fff}
.v3-tampon.v-part{background:var(--orange); color:#16181D}
.v3-tampon.v-non{border:2px solid #F1F2F3; color:#F1F2F3}
.v3-verdict p{margin:0; font-weight:700; color:#F1F2F3; font-size:var(--t-md); line-height:1.35; max-width:44ch}

/* =====================================================================
   4. LE CORPS D'UN GUIDE : sommaire collant + colonne lisible
   ===================================================================== */
.v3-grille{display:grid; gap:var(--e-6)}
@media (min-width:1100px){
  .v3-grille{grid-template-columns:232px minmax(0,1fr); column-gap:var(--e-7); align-items:start}
  .v3-toc{position:sticky; top:84px; max-height:calc(100vh - 104px); overflow:auto}
}
.v3-toc{font-size:var(--t-sm)}
.v3-toc nav{border-top:3px solid var(--ink) !important; border-bottom:0 !important; padding-top:var(--e-3); background:transparent !important}
.v3-toc .v3-mono{color:var(--soft); margin:0 0 var(--e-2)}
.v3-toc ol{list-style:none; margin:0; padding:0; display:grid}
.v3-toc li{margin:0}
.v3 .v3-toc nav a{display:grid; grid-template-columns:2.4em minmax(0,1fr); gap:4px; padding:7px 0 7px 8px; margin-left:-8px; border-left:2px solid transparent;
  color:var(--body); text-decoration:none; line-height:1.35; transition:color var(--d-fast) var(--snap), border-color var(--d-fast) var(--snap)}
.v3-toc nav a .n{font:700 12px/1.6 "JetBrains Mono",monospace; color:var(--soft)}
.v3-toc nav a em{grid-column:2; font:500 12px/1.3 "JetBrains Mono",monospace; font-style:normal; color:var(--soft)}
.v3-toc nav a:hover{color:var(--ink)}
.v3-toc nav a[aria-current]{color:var(--ink); font-weight:700; border-left-color:var(--orange-ink)}
.v3-toc nav a[aria-current] .n{color:var(--orange-ink)}
.v3-toc nav a:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.v3-etat{margin-top:var(--e-3); padding-top:var(--e-3); border-top:1px solid var(--line); color:var(--soft); display:grid; gap:6px}
.v3-etat b{color:var(--ink); font-variant-numeric:tabular-nums}
.v3-jauge{height:4px; background:var(--line)}
.v3-jauge i{display:block; height:100%; background:var(--ink); transform-origin:0 50%; transform:scaleX(0); transition:transform var(--d-ui) var(--out)}
@media (max-width:1099px){
  .v3-toc nav{background:var(--card) !important; padding:var(--e-4)}
  .v3-toc ol{grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); column-gap:var(--e-4)}
}

/* La colonne lisible : 18 px, interligne 1,7, 66 caractères au plus. */
.v3-art{font-size:18px; line-height:1.7; color:var(--body); min-width:0}
.v3-art > * {max-width:68ch}
.v3-art p{margin-block:0}
.v3-art .v3-ch > * + *{margin-top:var(--e-4)}
.v3-art .v3-ch > .v3-rub + h2{margin-top:var(--e-2)}
.v3-art h2{font-size:clamp(1.55rem,2.6vw,2.05rem); font-weight:800; line-height:1.12; letter-spacing:-.015em; margin:0}
.v3-art h3{font-size:var(--t-lg); font-weight:800; line-height:1.2; margin-top:var(--e-6) !important}
.v3-art a:not([class]){color:var(--accent-ink); text-underline-offset:3px}
.v3-art code{font:500 .88em "JetBrains Mono",monospace; background:var(--card); padding:1px 5px}
.v3-ch{scroll-margin-top:84px; padding-top:var(--e-7); margin-top:var(--e-7); border-top:1px solid var(--line)}
.v3-ch .v3-rub{margin-bottom:0}
.v3-ch:first-of-type{margin-top:var(--e-6)}
.v3-art > .v3-ch:first-child{margin-top:0; padding-top:0; border-top:0}

/* Avant de commencer */
.v3-depart{display:grid; gap:3px}
@media (min-width:700px){ .v3-depart{grid-template-columns:1fr 1fr} }
.v3-depart > div{padding:var(--e-5); background:var(--card)}
.v3-depart .v3-fin{background:#16181D; color:#D6D8DC}
.v3-depart .v3-fin .v3-mono{color:var(--orange)}
.v3-depart .v3-fin p{color:#F1F2F3; font-weight:700; font-size:var(--t-md); line-height:1.45; margin-top:var(--e-2)}
.v3-depart .v3-fin b{color:#F1F2F3}
.v3-depart h2{font:700 var(--t-xs)/1.4 "JetBrains Mono",monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--orange-ink)}
.v3-besoin{list-style:none; margin:var(--e-2) 0 0; padding:0; display:grid; gap:6px; font-size:var(--t-base); line-height:1.5}
.v3-besoin li{position:relative; padding-left:1.5em}
.v3-besoin li::before{content:"□"; position:absolute; left:0; top:-1px; font-family:"JetBrains Mono",monospace; color:var(--ink)}

/* Les étapes : numérotées, très lisibles, à cocher */
.v3-etapes{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.v3-ch > .v3-etapes{margin-top:var(--e-5)}
.v3-etapes li{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:var(--e-4); align-items:start; padding:var(--e-4) 0; border-bottom:1px solid var(--line)}
.v3-n{display:grid; place-items:center; min-width:52px; height:40px; padding:0 8px; background:#16181D; color:var(--orange); font:800 15px/1 "JetBrains Mono",monospace; letter-spacing:.02em; font-variant-numeric:tabular-nums}
.v3-etapes li > span:not(.v3-n){padding-top:5px; line-height:1.6}
.v3-coche{position:relative; width:44px; height:44px; margin:-2px 0 0; padding:0; border:0; background:transparent; cursor:pointer; color:var(--ink)}
.v3-coche::before{content:""; position:absolute; inset:7px; border:2px solid currentColor; transition:background var(--d-fast) var(--snap), border-color var(--d-fast) var(--snap)}
.v3-coche::after{content:""; position:absolute; left:18px; top:12px; width:8px; height:15px; border:solid transparent; border-width:0 3px 3px 0; transform:rotate(45deg)}
.v3-coche:hover::before{border-color:var(--accent)}
.v3-coche:focus-visible{outline:2px solid var(--accent); outline-offset:0}
.v3-etapes li.fait > span:not(.v3-n){color:var(--soft); text-decoration:line-through; text-decoration-thickness:1px}
.v3-etapes li.fait .v3-n{background:var(--card); color:var(--soft)}
.v3-etapes li.fait .v3-coche::before{background:#16181D; border-color:#16181D}
.v3-etapes li.fait .v3-coche::after{border-color:var(--orange)}
@media (max-width:520px){
  .v3-etapes li{gap:var(--e-3)}
  .v3-n{min-width:44px; height:36px; font-size:14px}
}

/* Plan B : repliable, juste sous l'étape qui peut bloquer */
.v3-planb{background:var(--card); border-top:3px solid var(--orange-ink)}
.v3-planb summary{display:flex; align-items:center; gap:var(--e-3); min-height:52px; padding:0 var(--e-4); cursor:pointer; list-style:none; font-weight:700; color:var(--ink)}
.v3-planb summary::-webkit-details-marker{display:none}
.v3-planb summary .v3-mono{color:var(--orange-ink)}
.v3-planb summary::after{content:"+"; margin-left:auto; font:700 20px/1 "JetBrains Mono",monospace; color:var(--ink); transition:transform var(--d-ui) var(--out)}
.v3-planb[open] summary::after{transform:rotate(45deg)}
.v3-planb summary:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.v3-planb > div{padding:0 var(--e-4) var(--e-4)}

/* Encarts : Mot, À retenir, Astuce, Attention */
.v3-enc{padding:var(--e-4) var(--e-5); background:var(--card); border-top:3px solid var(--ink)}
.v3-enc .v3-mono{display:block; color:var(--soft); margin-bottom:var(--e-1)}
.v3-enc p{font-size:var(--t-base); line-height:1.6}
.v3-enc-astuce{border-top-color:var(--accent)}
.v3-enc-astuce .v3-mono{color:var(--accent-ink)}
.v3-enc-attention{background:#16181D; border-top-color:var(--orange); color:#D6D8DC}
.v3-enc-attention .v3-mono{color:var(--orange)}
.v3-enc-attention b{color:#F1F2F3}
.v3 .v3-enc-attention a, .v3 .v3-depart .v3-fin a{color:#8FA9FF}
.v3-enc-attention code, .v3-depart .v3-fin code{background:#2C3038; color:#F1F2F3}
.v3-mot{background:transparent; border:1px solid var(--line); border-top:3px solid var(--line)}
.v3-mot dfn{font-style:normal; font-weight:800; color:var(--ink)}

/* Prompt et commande : panneau charbon, bouton copier */
.v3-code{background:#16181D; color:#E8E9EB; border:1px solid #2C3038}
.v3-sombre .v3-code{background:#0E1014}
.v3-code-h{display:flex; align-items:center; justify-content:space-between; gap:var(--e-3); min-height:48px; padding:0 0 0 var(--e-4); border-bottom:1px solid #2C3038}
.v3-code-h .v3-mono{color:#C3CED8}
.v3-code pre{margin:0; padding:var(--e-4); font:400 15.5px/1.65 "JetBrains Mono",monospace; white-space:pre-wrap; overflow-wrap:anywhere; color:#E8E9EB; background:transparent; border:0}
.v3-code.cmd pre::before{content:"$ "; color:var(--orange); user-select:none}
.v3-copie{flex:none; align-self:stretch; min-width:96px; min-height:48px; padding:0 var(--e-4); border:0; border-left:1px solid #2C3038; border-radius:0; background:transparent; color:#F1F2F3;
  font:700 var(--t-xs)/1 "JetBrains Mono",monospace; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; transition:background var(--d-fast) var(--snap), color var(--d-fast) var(--snap)}
.v3-copie:hover,.v3-copie.ok{background:var(--orange); color:#16181D}
.v3-copie:focus-visible{outline:2px solid var(--orange); outline-offset:-2px}

/* Avant / après */
.v3-ba{display:grid; gap:3px}
@media (min-width:640px){ .v3-ba{grid-template-columns:1fr 1fr} }
.v3-ba > div{padding:var(--e-4); background:var(--card); font-size:var(--t-base); line-height:1.6}
.v3-ba .non{color:var(--soft)}
.v3-ba .non .v3-mono{color:var(--soft)}
.v3-ba .oui{border-top:3px solid var(--accent)}
.v3-ba .oui .v3-mono{color:var(--accent-ink)}
.v3-ba .v3-mono{display:block; margin-bottom:var(--e-1)}

.v3-liste{margin:0; padding-left:1.2em; display:grid; gap:var(--e-2)}
.v3-liste li::marker{color:var(--ink)}
.v3-art .ecran{margin:var(--e-6) 0 var(--e-5); max-width:620px}

/* Outils (fiche) */
.v3-outils{display:grid; grid-template-columns:max-content minmax(0,1fr); gap:var(--e-3) var(--e-5); margin:0}
.v3-outils dt{font-weight:800; color:var(--ink)}
.v3-outils dd{margin:0}
@media (max-width:600px){ .v3-outils{grid-template-columns:1fr; gap:2px} .v3-outils dd{margin-bottom:var(--e-3)} }
.v3-mention{font-size:var(--t-sm); color:var(--soft)}
.v3-fil-q{display:flex; justify-content:space-between; gap:var(--e-4); flex-wrap:wrap; font-size:var(--t-sm2); padding-top:var(--e-4); border-top:1px solid var(--line)}

/* La limite (fiche) : en bande sombre, dite sans détour */
.v3-limite p{font-size:var(--t-md); line-height:1.6; color:#F1F2F3; max-width:58ch}

/* =====================================================================
   5. LA SUITE et le lien Prompt Bank
   ===================================================================== */
.v3-suite{display:flex; align-items:center; justify-content:space-between; gap:var(--e-4); padding:var(--e-5); background:#16181D; color:#E8E9EB; text-decoration:none; border-top:3px solid var(--orange);
  transition:transform var(--d-ui) var(--out)}
.v3-suite .v3-mono{display:block; color:var(--orange)}
.v3-suite .t{display:block; font-weight:800; font-size:var(--t-lg); line-height:1.2; margin-top:var(--e-2); color:#F1F2F3}
.v3-suite .fl{flex:none; color:var(--orange); font:700 var(--t-xl)/1 "JetBrains Mono",monospace; transition:transform var(--d-ui) var(--out)}
.v3-suite:hover .fl,.v3-suite:focus-visible .fl{transform:translateX(5px)}
.v3-suite:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.v3-suite:active{transform:scale(.99)}
.v3-bonus{margin-top:var(--e-4); font-size:var(--t-sm2); color:var(--soft)}

/* =====================================================================
   6. LES INDEX : une table des matières de manuel
   ===================================================================== */
.v3-tdm{list-style:none; margin:0; padding:0; border-top:3px solid var(--ink)}
.v3-tdm li{margin:0; border-bottom:1px solid var(--line)}
.v3-tdm a, .v3-tdm .v3-tdm-l{display:grid; grid-template-columns:3.4em minmax(0,1fr) auto; gap:var(--e-3); align-items:baseline; padding:var(--e-4) var(--e-2); color:var(--ink); text-decoration:none;
  transition:background var(--d-fast) var(--snap), color var(--d-fast) var(--snap)}
.v3-b .v3-tdm a{color:var(--ink)}
@media (hover:hover) and (pointer:fine){ .v3-b .v3-tdm a:hover{color:#F1F2F3} }
.v3-tdm .n{font:700 13px/1.4 "JetBrains Mono",monospace; color:var(--soft)}
.v3-tdm .q{font-weight:800; font-size:var(--t-md); line-height:1.3}
.v3-tdm .p{display:block; font-weight:400; color:var(--soft); font-size:var(--t-sm2); line-height:1.45; margin-top:3px}
.v3-tdm .d{font:700 12px/1 "JetBrains Mono",monospace; letter-spacing:.04em; text-transform:uppercase; color:var(--soft); white-space:nowrap}
.v3-tdm .d i{font-style:normal; display:inline-block; margin-left:6px; transition:transform .35s var(--out)}
.v3-tdm .v{font:700 12px/1 "JetBrains Mono",monospace; letter-spacing:.04em; text-transform:uppercase; padding:6px 8px; white-space:nowrap}
.v3-tdm .v-oui{background:var(--accent); color:#fff}
.v3-tdm .v-part{background:#16181D; color:var(--orange)}
.v3-tdm .v-non{border:1.5px solid var(--ink); color:var(--ink); padding:4.5px 6.5px}
.v3-tdm .bientot{display:block; margin-top:6px; font:700 11px/1 "JetBrains Mono",monospace; letter-spacing:.06em; color:var(--soft); text-align:right}
@media (hover:hover) and (pointer:fine){
  .v3-tdm a:hover{background:#16181D; color:#F1F2F3}
  .v3-tdm a:hover .p, .v3-tdm a:hover .n{color:#C3CED8}
  .v3-tdm a:hover .d{color:var(--orange)}
  .v3-tdm a:hover .d i{transform:translateX(4px)}
  .v3-tdm a:hover .v-non{border-color:#F1F2F3; color:#F1F2F3}
}
.v3-tdm a:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
@media (max-width:520px){ .v3-tdm a, .v3-tdm .v3-tdm-l{grid-template-columns:2.6em minmax(0,1fr); } .v3-tdm .d, .v3-tdm .v, .v3-tdm .fin{grid-column:2; justify-self:start} .v3-tdm .bientot{text-align:left} }
.v3-envie + .v3-envie{margin-top:var(--e-7)}

/* =====================================================================
   7. PAGE STATIQUE : le vocabulaire des anciennes pages (marches.css)
   remis dans la colonne v3. Sections en bandes, titre de groupe à gauche.
   ===================================================================== */
.v3-prose{font-size:18px; line-height:1.7; color:var(--body); min-width:0}
.v3-prose > * + *{margin-top:var(--e-4)}
.v3-prose > *{max-width:68ch}
.v3-prose h3{font-size:var(--t-lg); line-height:1.2; font-weight:800; margin-top:var(--e-6)}
.v3-prose .sous, .v3-prose .mention, .v3-prose .maj, .v3-prose .fine{color:var(--soft); font-size:var(--t-sm2)}
.v3-prose .prompt{background:#16181D; color:#E8E9EB; padding:0; border:1px solid #2C3038}
.v3-sombre .v3-prose .prompt{background:#0E1014}
.v3-prose .prompt .lbl{display:block; padding:16px var(--e-4) 0; color:#C3CED8; margin:0}
.v3-prose .prompt pre{padding:var(--e-3) var(--e-4) var(--e-4); font-size:15.5px; color:#E8E9EB; margin:0}
.v3-prose .copie{margin:0 var(--e-4) var(--e-4); min-height:44px}
.v3-prose .outils{max-width:none}
.v3-prose .etapes li{font-size:var(--t-base)}
.v3-prose table{border-collapse:collapse; width:100%; font-size:var(--t-sm2); line-height:1.5}
.v3-prose th,.v3-prose td{text-align:left; vertical-align:top; padding:10px 12px 10px 0; border-bottom:1px solid var(--line)}
.v3-prose th{font:700 var(--t-xs)/1.4 "JetBrains Mono",monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--soft)}
.v3-prose .note{background:var(--card); border-top:3px solid var(--ink); padding:var(--e-4)}
.v3-prose .prise{max-width:520px}
.v3-prose .prise input{border-radius:0; min-height:54px}
.v3-prose .prise button{min-height:54px; background:#16181D; color:#E8E9EB}
.v3-prose .prise button:hover{background:var(--orange); color:#16181D}
.v3-sombre .v3-prose .prise input{background:var(--card); color:var(--ink); border-color:var(--soft)}
.v3-sombre .v3-prose .prise button{background:var(--orange); color:#16181D}
.v3-sombre .v3-prose .etapes li::before,.v3-sombre .v3-prose .outils dt{color:var(--ink)}
.v3-sombre .v3-prose .etapes li::before{color:var(--orange)}
.v3-sombre .v3-prose .qa-l{color:var(--ink)}
.v3-prose .qa{max-width:none}
/* alternance automatique des sections d'une page statique, calculée sur les visibles */
.v3-stat > .v3-b:nth-child(even of .v3-b:not([hidden])){--ink:#F1F2F3; --body:#D6D8DC; --soft:#A3AAB6; --line:#2C3038; --card:#1F2229; --accent-ink:#8FA9FF; --orange-ink:var(--orange); background:#16181D}
.v3-stat > .v3-b:nth-child(even of .v3-b:not([hidden]))::before{background:linear-gradient(90deg,transparent,rgba(232,98,42,0) 18%,rgba(232,98,42,.75) 50%,rgba(232,98,42,0) 82%,transparent)}
.v3-boutons{display:flex; flex-wrap:wrap; gap:var(--e-3); margin-top:var(--e-6)}
.v3-bouton{display:inline-flex; align-items:center; gap:10px; min-height:52px; padding:0 var(--e-5); background:var(--orange); color:#16181D; font-weight:800; text-decoration:none; transition:background var(--d-fast) var(--snap)}
.v3-bouton:hover{background:#F1F2F3}
.v3-bouton.fant{background:transparent; color:#F1F2F3; box-shadow:inset 0 0 0 1px #3A3F49}
.v3-bouton.fant:hover{box-shadow:inset 0 0 0 1px #F1F2F3}
.v3-bouton:focus-visible{outline:2px solid #F1F2F3; outline-offset:3px}

/* =====================================================================
   8. LE MOUVEMENT : sobre, coupé en mouvement réduit. Chaque animation se joue UNE fois,
   au premier passage à l'écran ; rien ne boucle, rien ne se rejoue au survol.
   html.vj est posé par v3.js : sans script, rien n'est masqué.
   ===================================================================== */
@media (prefers-reduced-motion:no-preference){
  .v3-tete h1{animation:v3-titre 1.1s var(--out) both}
  .v3-tete h1 em{animation:v3-titre-o 1.1s var(--out) .25s both}
  @keyframes v3-titre{from{color:#5E6573}}
  @keyframes v3-titre-o{from{color:#7A4A36}}
  .v3-tete::before{background:linear-gradient(90deg,transparent,rgba(232,98,42,0) 30%,rgba(232,98,42,.9) 50%,rgba(232,98,42,0) 70%,transparent) 0 0/250% 100% no-repeat !important;
    animation:v3-balai 2.4s var(--out) .3s both}
  @keyframes v3-balai{from{background-position:120% 0}to{background-position:50% 0}}
  .vj .rv{opacity:0; transform:translateY(10px); transition:opacity .55s var(--out), transform .55s var(--out); transition-delay:calc(var(--i,0) * 60ms)}
  .vj .rv.vu{opacity:1; transform:none}
  .v3-copie.ok{animation:v3-pop .3s var(--out)}
  @keyframes v3-pop{50%{transform:scale(1.06)}}
  .v3-etapes li.fait .v3-coche::after{animation:v3-coche .3s var(--out)}
  @keyframes v3-coche{from{opacity:0; transform:rotate(45deg) scale(.4)}}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
}

/* =====================================================================
   9. PAGES VITRINES (setup, plug-codex, ai-stack, insta-save-engine) : 06/10/2026
   ===================================================================== */
.v3-enc-moi{border-top-color:var(--orange); background:#16181D; color:#D6D8DC}
.v3-enc-moi .v3-mono{color:var(--orange)}
.v3-enc-moi b, .v3-enc-moi code{color:#F1F2F3}
.v3-art .v3-enc-moi code{background:#2C3038}
.v3-table{overflow-x:auto; max-width:100%}
.v3-art table{border-collapse:collapse; width:100%; font-size:var(--t-sm2); line-height:1.5}
.v3-art th, .v3-art td{text-align:left; vertical-align:top; padding:10px 12px 10px 0; border-bottom:1px solid var(--line)}
.v3-art thead th{font:700 var(--t-xs)/1.4 "JetBrains Mono",monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--soft)}
.v3-art tbody th{font-weight:800; color:var(--ink); min-width:8em}
.v3-art td code, .v3-art th code{white-space:nowrap}
.v3-art .v3-liste li{line-height:1.6}
.v3-form{display:flex; flex-wrap:wrap; gap:8px; max-width:520px}
.v3-form input{flex:1 1 220px; min-height:52px; padding:0 14px; border:1px solid var(--soft); border-radius:0; background:#fff; color:#15171C; font:inherit}
.v3-form button{min-height:52px; padding:0 20px; border:0; border-radius:0; background:#16181D; color:#F1F2F3; font:inherit; font-weight:800; cursor:pointer}
.v3-form button:hover{background:var(--orange); color:#16181D}
.v3-form :focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.v3-msg{min-height:1.6em; font-size:var(--t-sm2); color:var(--soft)}