/* =========================================================================
   D.SANTORYU — feuille de style publique
   Port fidèle du design (Claude Design) : warm-dark ambre, CRT, brutalist.
   Tokens + keyframes repris à l'identique ; styles inline du proto
   réorganisés en classes pour rester éditables.
   ========================================================================= */

/* THÈMES — rouge/noir (anarchie) par défaut. Ambre et vert en alternatives.
   Le scanner (bouton cycle) bascule entre les trois. */
:root, [data-theme="rouge"]{
  --bg:#0d0a0a;
  --panel:#171010;
  --panel2:#201414;
  --paper:#f2e9e4;
  --amber:#ff2f2f;
  --gold:#ff7a6e;
  --dim:#b08a84;
  --faint:#6f4d48;
  --line:#3c1c1c;
  --red:#ff2f2f;
  --navbg:rgba(13,10,10,.86);
  --scan:rgba(0,0,0,.16);
  --vig:inset 0 0 200px 60px rgba(0,0,0,.5);
  --grainOp:.7;
  --grainBlend:overlay;
}

/* Ambre — le thème d'origine (warm dark). */
[data-theme="ambre"]{
  --bg:#17130c;
  --panel:#211b11;
  --panel2:#2a2216;
  --paper:#f0e8d6;
  --amber:#ff7a1a;
  --gold:#ffcf4d;
  --dim:#9c8c66;
  --faint:#6b5d3f;
  --line:#372d1b;
  --red:#ff3b30;
  --navbg:rgba(23,19,12,.86);
}

/* Vert — phosphore. */
[data-theme="vert"]{
  --bg:#0c120c;
  --panel:#10180f;
  --panel2:#16210f;
  --paper:#dff5e2;
  --amber:#39ff8c;
  --gold:#b6ff5e;
  --dim:#7fae87;
  --faint:#4f6b53;
  --line:#1f3a24;
  --red:#ff5a4d;
  --navbg:rgba(10,18,12,.86);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); }
body{ color:var(--paper); font-family:'Space Mono',monospace; }
::selection{ background:var(--amber); color:var(--bg); }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:#43381f; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:var(--amber); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
/* filet responsive : un mot ou une URL trop long se coupe au lieu de déborder */
.display, .art-title, .feat-title, .man-title, .post-title, .article-body, .man-body, .lead, .pull{ overflow-wrap:break-word; }

@keyframes scan { from{ transform:translateY(-22vh);} to{ transform:translateY(122vh);} }
@keyframes flick { 0%,100%{opacity:.18;} 50%{opacity:.10;} 7%{opacity:.05;} 9%{opacity:.2;} }
@keyframes blink { 0%,49%{opacity:1;} 50%,100%{opacity:0;} }
@keyframes tk { from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
@keyframes gl {
  0%,86%,100%{ transform:translate(0,0); text-shadow:none; clip-path:none; }
  87%{ transform:translate(-3px,1px); text-shadow:3px 0 #ff3b30,-3px 0 #00e0ff; }
  89%{ transform:translate(3px,-1px); text-shadow:-3px 0 #ffd400,3px 0 #ff3b30; clip-path:inset(12% 0 40% 0); }
  91%{ transform:translate(-2px,0); text-shadow:2px 0 #00e0ff,-2px 0 #ff3b30; clip-path:inset(60% 0 8% 0); }
  93%{ transform:translate(2px,1px); text-shadow:none; clip-path:none; }
}
@keyframes hum { 0%,100%{ text-shadow:0 0 18px rgba(255,122,26,.4);} 50%{ text-shadow:0 0 26px rgba(255,122,26,.62);} }

/* ---- ossature + overlays CRT ------------------------------------------- */
.wrap{ position:relative; min-height:100vh; background:var(--bg); color:var(--paper); overflow-x:hidden; }

.fx-grain{
  position:fixed; inset:0; z-index:90; pointer-events:none;
  mix-blend-mode:var(--grainBlend); opacity:var(--grainOp);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.45' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
.fx-scan{
  position:fixed; inset:0; z-index:91; pointer-events:none; animation:flick 6s infinite;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, var(--scan) 3px, var(--scan) 4px);
}
.fx-sweep{
  position:fixed; left:0; right:0; height:24vh; z-index:92; pointer-events:none; animation:scan 9s linear infinite;
  background:linear-gradient(to bottom, transparent, rgba(255,122,26,.05), transparent);
}
.fx-vig{ position:fixed; inset:0; z-index:93; pointer-events:none; box-shadow:var(--vig); }

/* ---- ticker ------------------------------------------------------------ */
.ticker{ position:relative; z-index:20; border-bottom:1px solid var(--line); background:var(--amber); color:var(--bg); overflow:hidden; white-space:nowrap; }
.ticker-track{ display:inline-block; padding:6px 0; font-weight:700; font-size:12px; letter-spacing:.18em; animation:tk 34s linear infinite; }
.ticker-track span.t{ padding:0 14px; }
.ticker-track span.d{ opacity:.6; }

/* ---- header / nav ------------------------------------------------------ */
.nav{ position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 26px; background:var(--navbg); backdrop-filter:blur(6px); border-bottom:1px solid var(--line); }
.brand{ display:flex; align-items:baseline; gap:10px; color:var(--paper); font-family:'Syne',sans-serif; }
.brand-mark{ font-size:13px; color:var(--amber); font-family:'Space Mono',monospace; }
.brand-name{ font-weight:800; font-size:20px; letter-spacing:-.02em; animation:hum 4s infinite; }
.brand-ver{ font-size:10px; color:var(--dim); font-family:'Space Mono',monospace; letter-spacing:.1em; }
.nav-links{ display:flex; align-items:center; gap:6px; font-size:12px; letter-spacing:.14em; }
.nav-btn{ background:none; border:1px solid transparent; color:var(--paper); cursor:pointer; padding:7px 12px; font-family:inherit; font-size:12px; letter-spacing:.14em; }
.nav-btn:hover, .nav-btn:focus-visible{ border:1px solid var(--amber); color:var(--amber); outline:none; }
.nav-btn.muted{ color:var(--dim); }
.nav-toggle{ background:none; border:1px solid var(--line); color:var(--amber); cursor:pointer; padding:7px 12px; font-family:inherit; font-size:12px; letter-spacing:.14em; }
.nav-toggle:hover, .nav-toggle:focus-visible{ border-color:var(--amber); background:rgba(255,122,26,.08); outline:none; }
.clock{ display:flex; align-items:center; gap:8px; margin-left:2px; padding:6px 11px; border:1px solid var(--line); color:var(--dim); font-size:11px; }
.clock-dot{ width:7px; height:7px; background:var(--amber); border-radius:50%; box-shadow:0 0 8px var(--amber); animation:flick 3s infinite; }

/* ---- vue HOME ---------------------------------------------------------- */
.home{ max-width:1320px; margin:0 auto; padding:0 26px 80px; }
.hero{ position:relative; padding:54px 0 30px; border-bottom:2px solid var(--line); }
.kicker{ display:flex; align-items:center; gap:10px; font-size:11px; letter-spacing:.22em; color:var(--dim); margin-bottom:18px; }
.kicker .mark{ color:var(--amber); }
.display{ margin:0; font-family:'Syne',sans-serif; font-weight:800; line-height:.86; letter-spacing:-.03em; color:var(--paper); animation:gl 7s infinite; }
.hero .display{ font-size:clamp(48px,9vw,128px); }
.accent{ color:var(--amber); }
.intro{ max-width:680px; margin:26px 0 0; font-size:14.5px; line-height:1.75; color:var(--paper); }

.filter{ display:flex; align-items:center; flex-wrap:wrap; gap:9px; padding:22px 0; border-bottom:1px solid var(--line); }
.filter-label{ font-size:11px; color:var(--faint); letter-spacing:.18em; margin-right:6px; }
.chip{ background:none; border:1px solid var(--line); color:var(--dim); cursor:pointer; padding:7px 12px; font-family:inherit; font-size:12px; letter-spacing:.06em; }
.chip:hover, .chip:focus-visible{ border-color:var(--amber); color:var(--amber); outline:none; }
.chip.active{ border-color:var(--amber); color:var(--bg); background:var(--amber); }
.chip-count{ opacity:.55; font-size:10px; margin-left:7px; }
.chip.active .chip-count{ opacity:.8; }

.grid{ display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:40px; padding-top:34px; }

.featured{ position:relative; display:block; cursor:pointer; border:1px solid var(--line); background:var(--panel); margin-bottom:34px; }
.featured:hover, .featured:focus-visible{ border-color:var(--amber); outline:none; }
.featured-visual{ height:184px; position:relative; overflow:hidden; border-bottom:1px solid var(--line);
  background:var(--panel); }
.featured-visual .glow{ position:absolute; inset:0; background:radial-gradient(circle at 30% 40%, rgba(255,122,26,.16), transparent 55%); }
.visual-badges{ position:absolute; top:16px; left:16px; display:flex; gap:8px; font-size:10px; letter-spacing:.16em; z-index:6; }
.badge-une{ background:var(--amber); color:var(--bg); padding:4px 9px; font-weight:700; }
.badge-cat{ border:1px solid var(--faint); color:var(--gold); padding:4px 9px; }
.visual-tag{ position:absolute; bottom:14px; right:16px; font-size:10px; color:var(--faint); letter-spacing:.2em; }
.featured-body{ padding:26px 28px 28px; }
.feat-title{ margin:0; font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(26px,3.4vw,42px); line-height:1; letter-spacing:-.02em; color:var(--paper); }
.dek{ margin:16px 0 0; font-size:14px; line-height:1.7; color:var(--dim); max-width:60ch; }
.meta{ display:flex; align-items:center; gap:16px; margin-top:20px; font-size:11px; color:var(--faint); letter-spacing:.1em; }
.meta .sep{ color:var(--line); }
.meta .open{ color:var(--amber); }

.section-head{ display:flex; align-items:center; gap:12px; margin-bottom:18px; font-size:11px; letter-spacing:.2em; color:var(--faint); }
.section-head .mark{ color:var(--amber); }
.section-head .rule{ flex:1; height:1px; background:var(--line); }

.post{ display:grid; grid-template-columns:62px minmax(0,1fr) auto; gap:20px; align-items:start; cursor:pointer; padding:22px 4px; border-bottom:1px solid var(--line); }
.post:hover, .post:focus-visible{ background:var(--panel); outline:none; }
.post-num{ font-family:'Syne',sans-serif; font-weight:800; font-size:30px; color:var(--faint); line-height:1; }
.post-cat{ display:inline-block; font-size:10px; letter-spacing:.16em; color:var(--gold); border:1px solid var(--line); padding:3px 8px; margin-bottom:11px; }
.post-title{ margin:0; font-family:'Syne',sans-serif; font-weight:700; font-size:22px; line-height:1.08; letter-spacing:-.015em; color:var(--paper); }
.post-dek{ margin:9px 0 0; font-size:13px; line-height:1.65; color:var(--dim); max-width:62ch; }
.post-meta{ text-align:right; font-size:10px; color:var(--faint); letter-spacing:.1em; white-space:nowrap; padding-top:4px; }
.post-meta .read{ color:var(--amber); }

.empty{ padding:40px 4px; color:var(--dim); font-size:13px; line-height:1.8; border-bottom:1px solid var(--line); }
.empty .mark{ color:var(--amber); }

/* ---- aside ------------------------------------------------------------- */
.aside{ display:flex; flex-direction:column; gap:22px; font-size:12px; }
.card{ border:1px solid var(--line); background:var(--panel); }
.card-head{ padding:10px 14px; border-bottom:1px solid var(--line); font-size:10px; letter-spacing:.2em; color:var(--amber); display:flex; justify-content:space-between; }
.card-head .rec{ color:var(--faint); animation:flick 2s infinite; }
.card-body{ padding:16px 14px; }
.now-title{ font-family:'Syne',sans-serif; font-weight:700; font-size:17px; color:var(--paper); line-height:1.1; }
.now-artist{ color:var(--dim); margin-top:4px; }
.now-bar{ height:6px; background:var(--bg); border:1px solid var(--line); margin-top:14px; position:relative; overflow:hidden; }
.now-bar-fill{ position:absolute; left:0; top:0; bottom:0; width:43%; background:var(--amber); }
.now-time{ display:flex; justify-content:space-between; color:var(--faint); margin-top:6px; font-size:10px; }

.index-head{ padding:10px 14px; border-bottom:1px solid var(--line); font-size:10px; letter-spacing:.2em; color:var(--amber); }
.index-item{ display:flex; width:100%; justify-content:space-between; align-items:center; background:none; border:none; border-bottom:1px solid var(--line); color:var(--paper); cursor:pointer; padding:11px 14px; font-family:inherit; font-size:12px; letter-spacing:.06em; }
.index-item:last-child{ border-bottom:none; }
.index-item:hover, .index-item:focus-visible{ color:var(--amber); background:var(--panel2); outline:none; }
.index-item.active{ color:var(--amber); }
.index-item .n{ color:var(--faint); }

.teaser{ display:block; text-align:left; border:1px solid var(--amber); background:rgba(255,122,26,.06); color:var(--paper); cursor:pointer; padding:18px 16px; font-family:inherit; }
.teaser:hover, .teaser:focus-visible{ background:rgba(255,122,26,.12); outline:none; }
.teaser .eyebrow{ font-size:10px; letter-spacing:.2em; color:var(--amber); margin-bottom:9px; }
.teaser .line{ font-family:'Syne',sans-serif; font-weight:700; font-size:16px; line-height:1.2; color:var(--paper); }
.teaser .go{ margin-top:11px; font-size:11px; color:var(--gold); }

.sys{ font-size:10px; color:var(--faint); line-height:1.8; letter-spacing:.05em; border-top:1px solid var(--line); padding-top:16px; }

/* ---- vue ARTICLE ------------------------------------------------------- */
.article{ max-width:760px; margin:0 auto; padding:40px 26px 90px; }
.back-btn{ display:inline-block; background:none; border:1px solid var(--line); color:var(--dim); cursor:pointer; padding:8px 14px; font-family:inherit; font-size:11px; letter-spacing:.14em; }
.back-btn:hover, .back-btn:focus-visible{ border-color:var(--amber); color:var(--amber); outline:none; }
.art-tags{ display:flex; gap:10px; align-items:center; font-size:11px; letter-spacing:.16em; margin:34px 0 18px; }
.tag-cat{ background:var(--amber); color:var(--bg); padding:4px 9px; font-weight:700; }
.tag-num{ color:var(--faint); }
.art-title{ margin:0; font-family:'JetBrains Mono',monospace; font-weight:800; font-size:clamp(34px,6vw,62px); line-height:1.05; letter-spacing:-.02em; color:var(--paper); animation:gl 8s infinite; }
.byline{ display:flex; flex-wrap:wrap; gap:14px; margin-top:22px; padding-bottom:22px; border-bottom:1px solid var(--line); font-size:11px; color:var(--faint); letter-spacing:.1em; }
.byline .by{ color:var(--amber); }
/* Bloc-signature par catégorie (≈132px, 100% CSS, zéro image).
   Motif piloté par la catégorie de l'article ; défaut = rayé générique. */
.art-visual{ position:relative; height:132px; margin:32px 0; border:1px solid var(--line); background:var(--panel); overflow:hidden; }
.art-visual .av-scan, .featured-visual .av-scan{ position:absolute; inset:0; pointer-events:none; z-index:4; background:repeating-linear-gradient(to bottom, transparent 0 2px, var(--scan) 3px 4px); }
.art-visual .tag, .featured-visual .tag{ position:absolute; bottom:11px; left:16px; font-size:10px; color:var(--faint); letter-spacing:.2em; z-index:5; }
.art-visual .corner, .featured-visual .corner{ position:absolute; top:11px; right:16px; font-size:10px; color:var(--amber); letter-spacing:.16em; z-index:5; }
/* sur la une, le contenu haut des motifs doit dégager la rangée de badges (haut-gauche) */
.featured-visual .av-telem{ padding-top:48px; }
.featured-visual .av-boot{ padding-top:46px; }

/* SON — équaliseur */

/* MACHINE — log de boot */
.av-boot{ position:absolute; inset:0; padding:15px 18px; z-index:2; font-family:'JetBrains Mono',monospace; font-size:11px; line-height:1.48; color:var(--dim); }
.av-telem .t-delta{ font-family:'JetBrains Mono',monospace; font-weight:700; font-size:12px; letter-spacing:.02em; }
.av-boot .ok{ color:var(--amber); }
.av-boot .cur{ color:var(--amber); animation:blink 1s step-end infinite; }

/* ÉCRAN — mire / barres de couleur */
.av-bars{ position:absolute; inset:0; display:flex; z-index:2; }
.av-bars span{ flex:1; }
.av-bars2{ position:absolute; left:0; right:0; bottom:0; height:26px; display:flex; z-index:3; }
.av-bars2 span{ flex:1; }

/* ASPHALTE — télémétrie */
.av-telem{ position:absolute; inset:0; padding:16px 18px; z-index:2; display:flex; flex-direction:column; justify-content:flex-start; gap:12px; }
.av-telem .lap{ font-family:'JetBrains Mono',monospace; font-weight:800; font-size:32px; letter-spacing:-.02em; color:var(--paper); line-height:1; }
.av-telem .gear{ font-family:'JetBrains Mono',monospace; font-weight:700; font-size:13px; color:var(--gold); letter-spacing:.1em; }
.av-telem .row{ display:flex; justify-content:space-between; align-items:flex-end; font-size:10px; letter-spacing:.12em; color:var(--dim); }
.av-rpm{ height:8px; background:var(--bg); border:1px solid var(--line); position:relative; margin:8px 0 6px; overflow:hidden; }
.av-rpm .fill{ position:absolute; left:0; top:0; bottom:0; width:78%; background:var(--amber); }
.av-rpm .red{ position:absolute; right:0; top:0; bottom:0; width:14%; background:var(--red); opacity:.55; }

/* DÉFAUT — motif générique rayé */
.av-generic{ position:absolute; inset:0; z-index:2; background:repeating-linear-gradient(115deg, var(--panel) 0 24px, var(--panel2) 24px 48px); }
.av-generic .glow{ position:absolute; inset:0; background:radial-gradient(circle at 70% 30%, rgba(255,255,255,.05), transparent 55%); }

/* INTERFÉRENCE : neige + bande blanche (repos) ; chaos au clic (bande rouge, déchirures, flash chroma, bruit, secousse) */
.av-itf{ position:absolute; inset:0; z-index:2; overflow:hidden; }
.av-itf.tear{ animation:itfjolt .5s steps(3); }
.av-itf .itf-noise{ position:absolute; inset:-6px; opacity:.5; mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23s)' opacity='0.6'/%3E%3C/svg%3E");
  animation:itfsnow .28s steps(5) infinite; }
.av-itf.tear .itf-noise{ animation:itfsnow .07s steps(5) infinite, itfburst 1s steps(8); }
.av-itf .itf-drop{ position:absolute; left:0; right:0; height:22%; top:-22%; z-index:3;
  background:linear-gradient(to bottom, transparent, color-mix(in srgb,var(--paper) 16%, transparent), transparent);
  animation:itfdrop 4.5s linear infinite; }
.av-itf .itf-band{ position:absolute; left:0; right:0; height:34%; top:-44%; z-index:4; opacity:0; pointer-events:none;
  background:linear-gradient(to bottom, transparent, color-mix(in srgb,var(--red) 55%, transparent) 40%, color-mix(in srgb,var(--paper) 26%, transparent) 52%, color-mix(in srgb,var(--red) 32%, transparent) 64%, transparent); }
.av-itf.tear .itf-band{ animation:itfvhold 1.05s linear; }
.itf-tear{ position:absolute; left:0; right:0; z-index:5; opacity:0; pointer-events:none; mix-blend-mode:screen; }
.itf-tear.t1{ top:22%; height:9%;  background:linear-gradient(to bottom, transparent, color-mix(in srgb,var(--paper) 34%, transparent), transparent); }
.itf-tear.t2{ top:50%; height:6%;  background:linear-gradient(to bottom, transparent, color-mix(in srgb,var(--red) 45%, transparent), transparent); }
.itf-tear.t3{ top:68%; height:11%; background:linear-gradient(to bottom, transparent, color-mix(in srgb,var(--paper) 28%, transparent), transparent); }
.av-itf.tear .itf-tear.t1{ animation:tearA .5s steps(4); }
.av-itf.tear .itf-tear.t2{ animation:tearB .42s steps(3) .08s; }
.av-itf.tear .itf-tear.t3{ animation:tearA .55s steps(5) .03s; }
.itf-rgb{ position:absolute; inset:0; z-index:5; opacity:0; pointer-events:none; mix-blend-mode:screen;
  background:linear-gradient(90deg, rgba(0,255,240,.30) 0%, rgba(0,255,240,0) 14%, transparent 86%, rgba(255,42,109,.30) 100%); }
.av-itf.tear .itf-rgb{ animation:rgbflash .34s steps(2); }
@keyframes itfsnow{ 0%{background-position:0 0} 100%{background-position:90px 70px} }
@keyframes itfdrop{ 0%{top:-22%} 100%{top:118%} }
@keyframes itfburst{ 0%{opacity:.5} 12%{opacity:.95} 24%{opacity:.55} 38%{opacity:.9} 52%{opacity:.5} 68%{opacity:.86} 84%{opacity:.6} 100%{opacity:.5} }
@keyframes itfjolt{ 0%{transform:translateX(0)} 22%{transform:translateX(-6px)} 48%{transform:translateX(5px)} 70%{transform:translateX(-3px)} 100%{transform:translateX(0)} }
@keyframes itfvhold{ 0%{top:-44%;opacity:0} 8%{opacity:1} 20%{top:-12%} 27%{top:2%} 33%{top:-4%} 50%{top:34%} 56%{top:27%} 74%{top:78%} 80%{top:72%} 92%{opacity:1} 100%{top:126%;opacity:0} }
@keyframes tearA{ 0%{opacity:0;transform:translateX(0)} 12%{opacity:.95;transform:translateX(-16px)} 45%{transform:translateX(12px)} 72%{transform:translateX(-6px)} 100%{opacity:0;transform:translateX(0)} }
@keyframes tearB{ 0%{opacity:0;transform:translateX(0)} 15%{opacity:.95;transform:translateX(14px)} 55%{transform:translateX(-10px)} 100%{opacity:0;transform:translateX(0)} }
@keyframes rgbflash{ 0%{opacity:0;transform:translateX(0)} 18%{opacity:.8;transform:translateX(-5px)} 45%{opacity:.35;transform:translateX(4px)} 100%{opacity:0;transform:translateX(0)} }
@media (prefers-reduced-motion: reduce){
  .av-itf .itf-noise, .av-itf .itf-drop{ animation:none; }
  .av-itf.tear, .av-itf.tear .itf-noise, .av-itf.tear .itf-band, .av-itf.tear .itf-tear, .av-itf.tear .itf-rgb{ animation:none; }
}

/* --- Interactivité discrète des blocs (page article uniquement, piloté en JS) --- */
.art-visual{ cursor:pointer; }
@keyframes avwob{ 0%{transform:translate(0,0);} 20%{transform:translate(-2px,1px);} 40%{transform:translate(2px,-1px);} 60%{transform:translate(-1px,1px);} 80%{transform:translate(1px,0);} 100%{transform:translate(0,0);} }
.art-visual.av-wob{ animation:avwob .42s ease; }
.av-rpm .fill{ transition:width .3s linear; }
@keyframes avglitch{ 0%{transform:translateX(0);} 25%{transform:translateX(-6px);} 50%{transform:translateX(5px);} 75%{transform:translateX(-3px);} 100%{transform:translateX(0);} }
.av-bars.glitch, .av-bars2.glitch{ animation:avglitch .4s steps(3); }
@media (prefers-reduced-motion:reduce){
  .art-visual.av-wob{ animation:none; }
  .av-bars.glitch, .av-bars2.glitch{ animation:none; }
}
.lead{ font-size:19px; line-height:1.65; color:var(--paper); margin:0 0 28px; font-weight:700; font-family:'JetBrains Mono',monospace; }

.article-body{ font-family:'JetBrains Mono',monospace; font-size:16px; line-height:1.8; color:var(--paper); }
.article-body p{ margin:0 0 22px; }
.article-body h2{ font-family:'JetBrains Mono',monospace; font-weight:800; font-size:26px; letter-spacing:-.02em; margin:38px 0 14px; color:var(--paper); }
.article-body h3{ font-family:'JetBrains Mono',monospace; font-weight:700; font-size:19px; letter-spacing:-.01em; margin:30px 0 12px; color:var(--paper); }
.article-body a{ color:var(--amber); border-bottom:1px solid var(--line); }
.article-body a:hover{ border-bottom-color:var(--amber); }
.article-body ul, .article-body ol{ margin:0 0 22px; padding-left:24px; }
.article-body li{ margin:0 0 8px; }
.article-body code{ font-family:'Space Mono',monospace; font-size:.92em; background:var(--panel); border:1px solid var(--line); padding:1px 6px; color:var(--gold); }
.article-body pre{ background:var(--panel); border:1px solid var(--line); padding:16px 18px; overflow:auto; margin:0 0 22px; }
.article-body pre code{ background:none; border:none; padding:0; color:var(--paper); }
.article-body blockquote{ margin:0 0 22px; padding:12px 18px; border-left:3px solid var(--line); color:var(--dim); }
.article-body strong{ color:var(--gold); }
.article-body hr{ border:none; border-top:1px solid var(--line); margin:32px 0; }

.pull{ margin:38px 0; padding:24px 28px; border-left:3px solid var(--amber); background:var(--panel); font-family:'JetBrains Mono',monospace; font-weight:700; font-size:20px; line-height:1.35; color:var(--gold); }
.art-foot{ margin-top:44px; padding-top:22px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; font-size:11px; color:var(--faint); letter-spacing:.16em; }
.end-mark{ color:var(--amber); }
.end-mark .cursor{ animation:blink 1s infinite; }

/* ---- vue MANIFESTE ----------------------------------------------------- */
.manifeste{ max-width:840px; margin:0 auto; padding:48px 26px 100px; }
.man-kicker{ font-size:11px; letter-spacing:.24em; color:var(--amber); margin:40px 0 18px; }
.man-title{ margin:0; font-family:'Syne',sans-serif; font-weight:800; font-size:clamp(40px,8vw,92px); line-height:.9; letter-spacing:-.03em; color:var(--paper); animation:gl 9s infinite; }
.man-intro{ font-size:18px; line-height:1.7; color:var(--paper); margin:34px 0 0; max-width:62ch; }
.principles{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin:44px 0; }
.principle{ background:var(--panel); padding:24px; }
.principle-n{ font-family:'Syne',sans-serif; font-weight:800; font-size:30px; color:var(--amber); }
.principle-text{ font-size:13px; line-height:1.6; color:var(--paper); margin-top:10px; }
.man-body{ font-size:16px; line-height:1.85; color:var(--paper); margin:0 0 22px; max-width:64ch; }
.man-pull{ margin:38px 0; padding:26px 30px; border-left:3px solid var(--amber); background:var(--panel); font-family:'Syne',sans-serif; font-weight:700; font-size:26px; line-height:1.25; color:var(--gold); }
.enter-btn{ display:inline-block; background:var(--amber); border:none; color:var(--bg); cursor:pointer; padding:14px 22px; font-family:'Syne',sans-serif; font-weight:700; font-size:14px; letter-spacing:.04em; }
.enter-btn:hover, .enter-btn:focus-visible{ background:var(--gold); outline:none; }

/* ---- footer ------------------------------------------------------------ */
.site-foot{ position:relative; z-index:10; border-top:1px solid var(--line); padding:26px; display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center; font-size:11px; color:var(--faint); letter-spacing:.12em; }
.foot-links{ display:flex; gap:18px; }
.foot-links .l{ color:var(--dim); }
.foot-links .nt{ color:var(--amber); }

/* contact : liens mail (adresse reconstruite par JS, jamais en clair) + bloc "réagir" en bas d'article */
.mail-link{ color:var(--amber); text-decoration:none; border-bottom:1px solid color-mix(in srgb,var(--amber) 40%, transparent); cursor:pointer; transition:color .15s, border-color .15s; }
.mail-link:hover{ color:var(--paper); border-color:var(--paper); }
.react-line{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:34px 0; padding:16px 2px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.react-line .react-dot{ flex:0 0 auto; width:8px; height:8px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 4px color-mix(in srgb,var(--amber) 18%, transparent); animation:reactpulse 2s ease-in-out infinite; }
.react-line .react-txt{ font-size:14px; color:var(--paper); }
.react-line .react-link{ margin-left:auto; font-size:13px; letter-spacing:.04em; }
@keyframes reactpulse{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }
@media (prefers-reduced-motion: reduce){ .react-line .react-dot{ animation:none; } }

/* ---- responsive -------------------------------------------------------- */
@media (max-width:920px){
  .grid{ grid-template-columns:1fr; gap:34px; }
  .aside{ order:2; }
}
@media (max-width:560px){
  .home, .article, .manifeste{ padding-left:18px; padding-right:18px; }
  .nav{ padding:12px 16px; gap:10px; flex-wrap:wrap; }
  .principles{ grid-template-columns:1fr; }
  .post{ grid-template-columns:40px minmax(0,1fr); }
  .post-meta{ grid-column:1 / -1; text-align:left; padding-top:8px; }
  .brand-ver{ display:none; }
}

/* ---- accessibilité : on respecte reduce-motion ------------------------- */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; }
  .display, .art-title, .man-title{ text-shadow:none !important; clip-path:none !important; transform:none !important; }
}

/* =========================================================================
   SCANNER (aside) — fidget radio pirate. Remplace « EN ROTATION ».
   Hérite des tokens globaux ; les switches pilotent le thème + les overlays.
   ========================================================================= */
html.no-scan .fx-scan, html.no-scan .fx-sweep{ display:none; }
html.no-grain .fx-grain{ display:none; }

@keyframes wob{
  0%,100%{ transform:translate(0,0); }
  20%{ transform:translate(-3px,1px); }
  35%{ transform:translate(3px,-1px); }
  55%{ transform:translate(-2px,0); }
  75%{ transform:translate(1px,1px); }
}

.scanner{ position:relative; overflow:hidden; }
.scanner.wobble{ animation:wob .42s steps(2,end); }
.sc-body{ padding:16px 14px 14px; }

.freq-row{ display:flex; align-items:baseline; gap:8px; }
.freq{ font-family:'Syne',sans-serif; font-weight:800; font-size:34px; line-height:1; letter-spacing:-.02em; color:var(--paper); animation:hum 4s infinite; }
.mhz{ font-size:12px; letter-spacing:.18em; color:var(--dim); }
.band{ margin-left:auto; font-size:10px; letter-spacing:.14em; color:var(--faint); }

.scope-wrap{ position:relative; height:64px; margin:14px 0 10px; border:1px solid var(--line); background:var(--bg); overflow:hidden; }
canvas.scope{ display:block; width:100%; height:100%; }
.scope-grid{ position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(to right, transparent 0 31px, color-mix(in srgb, var(--line) 60%, transparent) 31px 32px); }

.sig{ display:flex; align-items:center; gap:9px; font-size:9px; letter-spacing:.16em; color:var(--faint); margin-bottom:14px; }
.sig .meter{ flex:1; height:5px; background:var(--bg); border:1px solid var(--line); position:relative; overflow:hidden; }
.sig .fill{ position:absolute; left:0; top:0; bottom:0; width:0%; background:var(--amber); transition:width .08s linear; }

.tuner{ position:relative; padding:2px 0 4px; }
.scanner input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:26px; background:transparent; cursor:ew-resize; margin:0; }
.scanner input[type=range]::-webkit-slider-runnable-track{ height:26px; background-image:repeating-linear-gradient(to right, var(--faint) 0 1px, transparent 1px 11px); background-position:bottom; background-size:100% 9px; background-repeat:repeat-x; border-bottom:1px solid var(--line); }
.scanner input[type=range]::-moz-range-track{ height:26px; background-image:repeating-linear-gradient(to right, var(--faint) 0 1px, transparent 1px 11px); background-position:bottom; background-size:100% 9px; background-repeat:repeat-x; border-bottom:1px solid var(--line); }
.scanner input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:3px; height:26px; background:var(--amber); box-shadow:0 0 10px var(--amber); border:none; border-radius:0; }
.scanner input[type=range]::-moz-range-thumb{ width:3px; height:26px; background:var(--amber); box-shadow:0 0 10px var(--amber); border:none; border-radius:0; }
.scanner input[type=range]:focus{ outline:none; }
.scanner input[type=range]:focus-visible::-webkit-slider-thumb{ outline:2px solid var(--gold); outline-offset:2px; }
.scanner input[type=range]:focus-visible::-moz-range-thumb{ outline:2px solid var(--gold); outline-offset:2px; }
.scale{ display:flex; justify-content:space-between; font-size:9px; letter-spacing:.1em; color:var(--faint); margin-top:2px; }

.tx{ margin-top:14px; padding:10px 12px; border:1px solid var(--line); background:var(--bg); min-height:38px; display:flex; align-items:center; font-size:12px; letter-spacing:.06em; color:var(--gold); line-height:1.4; word-break:break-word; }

.switches{ display:flex; gap:7px; padding:12px 14px; border-top:1px solid var(--line); }
.sw{ flex:1; background:var(--panel2); border:1px solid var(--line); color:var(--dim); cursor:pointer; padding:9px 4px 8px; font-family:'Space Mono',monospace; font-size:9px; letter-spacing:.1em; display:flex; flex-direction:column; align-items:center; gap:6px; }
.sw:hover{ border-color:var(--amber); color:var(--amber); }
.sw:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; }
.sw .led{ width:8px; height:8px; border:1px solid var(--faint); background:var(--bg); }
.sw[aria-pressed="true"]{ color:var(--amber); border-color:var(--amber); }
.sw[aria-pressed="true"] .led{ background:var(--amber); border-color:var(--amber); box-shadow:0 0 8px var(--amber); }

/* BLEU électrique — ajouté au cycle (#3b82ff sur fond #070a12). */
[data-theme="bleu"]{
  --bg:#070a12; --panel:#0d1322; --panel2:#15203a; --paper:#e2ebfb;
  --amber:#3b82ff; --gold:#7db4ff; --dim:#8194bf; --faint:#4a5d85; --line:#1e2b4a; --red:#ff5a4d;
  --navbg:rgba(7,10,18,.86);
}

/* SON — onde de transmission (remplace l'ancien equaliseur).
   Repos : signal dormant. Clic (page article) : reveil + code verrouille + vibration. */
@keyframes son-tremble{
  0%,100%{ transform:translate(0,0) }
  20%{ transform:translate(.5px,-.3px) }
  40%{ transform:translate(-.4px,.3px) }
  60%{ transform:translate(.3px,.4px) }
  80%{ transform:translate(-.3px,-.2px) }
}
@keyframes son-dot{ 50%{ opacity:.3 } }
.av-wave{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:2px; padding:16px 18px; z-index:2; }
.av-wave i{ flex:1 1 0; min-width:0; min-height:3px; border-radius:1px; background:linear-gradient(180deg, var(--amber), var(--gold) 50%, var(--amber)); }
.live .av-wave i{ box-shadow:0 0 6px var(--amber); }
.av-onair{ position:absolute; top:11px; left:16px; z-index:5; display:flex; align-items:center; gap:7px; font-size:10px; letter-spacing:.16em; color:var(--dim); }
.av-dot{ width:7px; height:7px; border-radius:50%; background:var(--dim); }
.live .av-dot{ background:var(--amber); box-shadow:0 0 8px var(--amber); animation:son-dot 1s ease-in-out infinite; }
.av-crypt{ position:absolute; top:11px; right:16px; z-index:5; font-size:10px; letter-spacing:.16em; color:var(--dim); display:inline-block; }
.live .av-crypt{ color:var(--amber); animation:son-tremble .2s steps(2,end) infinite; }
.av-crypt.glitch{ filter:blur(.4px); text-shadow:1px 0 var(--gold), -1px 0 var(--amber); }
@media (prefers-reduced-motion: reduce){ .live .av-dot, .live .av-crypt{ animation:none; } }

/* ÉCRAN — amorce de projection (remplace l'ancienne mire .av-bars).
   Repos : l'amorce fremit (grain, gate weave). Clic (page article) : decompte,
   image cachee du code une frame, puis message intrus + signature ECHO. */
.av-cine{ position:absolute; inset:0; z-index:2; background:#0a0a0a; }
.av-cine svg{ position:absolute; inset:0; width:100%; height:100%; }
.av-cine .leader{ animation:avc-weave .9s steps(3) infinite; transform-origin:center; }
@keyframes avc-weave{ 0%,100%{ transform:translate(0,0) } 33%{ transform:translate(.7px,-.5px) } 66%{ transform:translate(-.5px,.6px) } }
.av-cine .ring,.av-cine .cross{ stroke:var(--paper); fill:none; opacity:.5; }
.av-cine .wedge{ fill:var(--amber); opacity:.20; transform-origin:center; }
.av-cine.run .wedge{ animation:avc-wipe .85s linear infinite; }
@keyframes avc-wipe{ from{ transform:rotate(0deg) } to{ transform:rotate(360deg) } }
.av-cine .num{ fill:var(--paper); font-family:'JetBrains Mono',monospace; font-weight:800; font-size:62px; text-anchor:middle; dominant-baseline:central; }
.av-cine .grain{ opacity:.07; animation:avc-grain .12s steps(2) infinite; mix-blend-mode:screen; }
@keyframes avc-grain{ 50%{ opacity:.04 } }
.av-cine .sub{ position:absolute; inset:0; z-index:7; display:flex; align-items:center; justify-content:center; background:#000; opacity:0; pointer-events:none; font-family:'JetBrains Mono',monospace; font-weight:800; font-size:26px; letter-spacing:.1em; color:var(--amber); }
.av-cine .end{ position:absolute; inset:0; z-index:6; display:flex; align-items:center; justify-content:center; background:#0a0a0a; opacity:0; transition:opacity .16s; text-align:center; padding:0 18px; }
.av-cine.msg .end, .av-cine.sign .end{ opacity:1; }
.av-cine .end .msg-txt, .av-cine .end .sign-txt{ display:none; }
.av-cine.msg .end .msg-txt{ display:block; }
.av-cine.sign .end .sign-txt{ display:block; }
.av-cine .msg-txt{ font-family:Georgia,'Times New Roman',serif; font-style:italic; font-size:23px; color:#e8dcdc; text-shadow:1.5px 0 var(--amber), -1.5px 0 rgba(120,170,255,.55); animation:avc-msgflick .18s steps(2) infinite; }
@keyframes avc-msgflick{ 50%{ opacity:.86 } }
.av-cine .sign-txt{ font-family:'JetBrains Mono',monospace; font-weight:800; font-size:30px; letter-spacing:.14em; color:var(--paper); }
.av-cine .cut{ position:absolute; inset:0; z-index:8; background:var(--paper); opacity:0; pointer-events:none; transition:opacity .08s; }
@media (prefers-reduced-motion: reduce){ .av-cine .leader, .av-cine .grain, .av-cine.run .wedge, .av-cine .msg-txt{ animation:none !important } }