/* =========================================================
   GUILLAUME NATAS — Landing
   Charte du logo (Guillaume Brindon) :
   near-black · vert néon #01FE91 · violet électrique #5A00E8
   ========================================================= */

:root{
  --bg:        #08090a;
  --bg-2:      #0d0f10;
  --panel:     #111513;
  --panel-2:   #161b18;
  --ink:       #f2f6f3;
  --ink-dim:   #8b958d;
  --ink-soft:  #b9c2bb;
  --line:      #20251f;
  --line-2:    #2c332b;
  --green:     #01fe91;
  --green-deep:#04c873;
  --green-glow:#01fe9133;
  --violet:    #7a3bff;
  --violet-2:  #5a00e8;
  --maxw:      1120px;
  --ease:      cubic-bezier(.2,.75,.2,1);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Space Grotesk', system-ui, sans-serif;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; height:auto; }
::selection{ background:var(--green); color:var(--bg); }

/* Accessibilité : focus clavier visible partout */
:focus-visible{ outline:2px solid var(--green); outline-offset:3px; border-radius:4px; }
/* Lien d'évitement */
.skip-link{
  position:fixed; top:-100px; left:14px; z-index:1000;
  background:var(--green); color:var(--bg); font-family:'Space Mono',monospace; font-size:13px;
  padding:10px 16px; border-radius:10px; transition:top .2s var(--ease);
}
.skip-link:focus{ top:14px; }

/* Barre de progression de lecture (néon) */
.progress{
  position:fixed; top:0; left:0; height:3px; width:0; z-index:300;
  background:linear-gradient(90deg,var(--green-deep),var(--green));
  box-shadow:0 0 12px var(--green-glow); transition:width .08s linear;
}

/* ---------- overlays globaux ---------- */
.noise{
  position:fixed; inset:0; z-index:9998; pointer-events:none;
  opacity:.045; mix-blend-mode:screen;
  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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.scan{
  position:fixed; inset:0; z-index:9997; pointer-events:none; opacity:.5;
  background:repeating-linear-gradient(to bottom,#ffffff04 0 1px,transparent 1px 3px);
}

/* ---------- utilitaires ---------- */
/* L'attribut hidden gagne TOUJOURS, même si un display est posé ailleurs (.vid, etc.). */
[hidden]{ display:none !important; }
/* Visible uniquement des lecteurs d'écran (et des moteurs de recherche). */
.sr-only{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(20px,5vw,40px); }
.kicker{
  font-family:'Space Mono', monospace;
  font-size:12px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--green); display:inline-flex; align-items:center; gap:10px;
}
.kicker::before{ content:''; width:26px; height:1px; background:var(--green); }

.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* Flux des blocs d'accueil : l'ordre est piloté par la propriété CSS `order` (réglable en admin). */
.home-flow{ display:flex; flex-direction:column; }
.home-block{ min-width:0; }

/* Révélation en cascade des enfants d'une grille (délai via --i posé en JS). */
.stagger > *{ opacity:0; transform:translateY(24px); transition:opacity .6s var(--ease), transform .6s var(--ease); transition-delay:calc(var(--i, 0) * 70ms); }
.stagger.in > *{ opacity:1; transform:none; }

/* Effet de profondeur (tilt 3D) — transform pilotée en inline par JS sur desktop. */
.tilt{ transition:transform .16s var(--ease); will-change:transform; }

/* Balayage lumineux sur les titres de section à l'apparition.
   Une bande inclinée déplacée par transform (GPU) : fluide, contrairement à
   l'ancienne animation de background-position qui repeignait à chaque frame. */
/* overflow:hidden contient la bande lumineuse ; le padding (annulé par des marges
   négatives) agrandit la zone de rognage pour ne pas couper jambages et accents. */
.section__title{ position:relative; overflow:hidden;
  padding:.15em .3em .28em 0; margin:-.15em -.3em -.28em 0; }
.section__head.in .section__title::after{
  content:''; position:absolute; top:-12%; bottom:-12%; left:0; width:30%;
  background:linear-gradient(105deg, transparent, #01fe9138 45%, #ffffff1c 52%, transparent);
  transform:translateX(-140%) skewX(-16deg); mix-blend-mode:screen; pointer-events:none;
  animation:title-shine 1.15s cubic-bezier(.3,.1,.25,1) .25s 1 forwards;
}
@keyframes title-shine{ to{ transform:translateX(480%) skewX(-16deg); } }
@media (prefers-reduced-motion:reduce){ .section__head.in .section__title::after{ animation:none; opacity:0; } }

/* ======================================================
   TOPBAR
   ====================================================== */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:200;
  display:flex; align-items:center; justify-content:flex-end;
  padding:16px clamp(20px,5vw,40px);
  transition:background .3s, border-color .3s, backdrop-filter .3s;
  border-bottom:1px solid transparent;
}
.topbar.solid{
  background:rgba(8,9,10,.72); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
/* Marque texte : retirée de l'accueil (le logo du hero suffit), conservée sur les pages podcast. */
.topbar__brand{
  font-family:'Michroma',sans-serif; font-size:14px; letter-spacing:.06em;
  display:flex; gap:.45em; margin-right:auto;
}
.topbar__brand b{ color:var(--green); font-weight:400; }
/* Accueil : le logo n'apparaît dans la barre que quand le grand logo du hero a quitté l'écran */
#topbarBrand{ opacity:0; transform:translateY(-10px); pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease); }
#topbarBrand img{ height:46px; width:auto; display:block; filter:drop-shadow(0 0 14px #01fe911f); }
#topbarBrand.is-shown{ opacity:1; transform:none; pointer-events:auto; }
.topbar__cta{
  font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.06em;
  border:1px solid var(--line-2); padding:9px 16px; border-radius:999px;
  color:var(--ink); transition:.2s var(--ease);
}
.topbar__cta:hover{ border-color:var(--green); color:var(--green); transform:translateY(-1px); }
.topbar__nav{ display:flex; align-items:center; gap:14px; }
.topbar__link{
  font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.06em; color:var(--ink-soft);
  transition:.2s var(--ease); position:relative;
}
.topbar__link::after{ content:''; position:absolute; left:0; right:100%; bottom:-4px; height:1px; background:var(--green); transition:right .25s var(--ease); }
.topbar__link:hover{ color:var(--green); }
.topbar__link:hover::after{ right:0; }
/* Lien NatasTube : pastille façon logo de la page, halo qui respire */
.topbar__tube{
  display:inline-flex; align-items:center; gap:9px; padding:8px 15px 8px 10px;
  border:1px solid var(--line-2); border-radius:999px; transition:.22s var(--ease);
  animation:tube-breathe 3.2s ease-in-out infinite;
}
.topbar__tube-play{
  width:26px; height:19px; border-radius:5px; background:var(--green);
  display:grid; place-items:center; flex:none; transition:transform .22s var(--ease);
}
.topbar__tube-play svg{ width:11px; height:11px; fill:var(--bg); margin-left:1px; }
.topbar__tube-txt{ font-family:'Michroma',sans-serif; font-size:12px; letter-spacing:.02em; color:var(--ink); white-space:nowrap; }
.topbar__tube-txt b{ font-weight:400; color:var(--green); }
.topbar__tube:hover{
  border-color:var(--green); animation:none;
  box-shadow:0 0 0 3px var(--green-glow), 0 8px 30px -10px var(--green-glow);
  transform:translateY(-1px);
}
.topbar__tube:hover .topbar__tube-play{ transform:scale(1.12); }
@keyframes tube-breathe{
  0%,100%{ box-shadow:0 0 0 0 rgba(1,254,145,0); border-color:var(--line-2); }
  50%    { box-shadow:0 0 14px -2px rgba(1,254,145,.35); border-color:#01fe9166; }
}
@media (prefers-reduced-motion:reduce){ .topbar__tube{ animation:none; } }
@media (max-width:560px){ .topbar__tube{ padding:7px 11px 7px 8px; } .topbar__tube-txt{ font-size:11px; } }

/* ======================================================
   HERO
   ====================================================== */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center; padding:120px clamp(20px,5vw,40px) 140px; overflow:hidden;
}
/* Spotlight qui suit la souris : div dédiée déplacée par transform (GPU, aucun repaint),
   lissage fait en JS via requestAnimationFrame. */
.hero__spot{
  position:absolute; top:0; left:0; z-index:0; pointer-events:none;
  width:680px; height:680px; margin:-340px 0 0 -340px; border-radius:50%;
  background:radial-gradient(closest-side, #01fe9122, transparent 72%);
  transform:translate3d(50vw,24vh,0); will-change:transform;
}
.hero__glow{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(760px 460px at 50% 8%,  var(--green-glow), transparent 62%),
    radial-gradient(620px 420px at 14% 70%, #7a3bff26, transparent 60%),
    radial-gradient(680px 520px at 88% 30%, #7a3bff1f, transparent 60%);
}
/* skyline pixel en bas du hero (rappel du logo) */
.hero__skyline{
  position:absolute; left:0; right:0; bottom:0; width:100%; height:140px; z-index:0;
  pointer-events:none; opacity:.32;
  -webkit-mask-image:linear-gradient(to top, #000 0%, transparent 100%);
          mask-image:linear-gradient(to top, #000 0%, transparent 100%);
}
.hero__inner{ position:relative; z-index:2; width:100%; max-width:880px; }
.hero__logobox{ position:relative; display:block; width:min(72%,430px); margin:0 auto 20px; }
.hero__logo{
  display:block; width:100%;
  filter:drop-shadow(0 0 40px #01fe911f);
  animation:rise .9s var(--ease) both, float 7s ease-in-out 1s infinite;
  will-change:transform;
}
/* Toast « Succès débloqué » (easter eggs trouvés), façon jeu vidéo */
.ach{ position:fixed; left:50%; bottom:26px; z-index:500;
  transform:translateX(-50%) translateY(90px);
  display:flex; align-items:center; gap:13px;
  background:var(--panel); border:1px solid var(--green); border-radius:14px; padding:13px 20px;
  box-shadow:0 0 30px -6px var(--green-glow), 0 24px 60px -20px #000;
  opacity:0; transition:transform .45s var(--ease), opacity .45s var(--ease); }
.ach.on{ transform:translateX(-50%) translateY(0); opacity:1; }
.ach__ic{ font-size:24px; line-height:1; filter:drop-shadow(0 0 10px rgba(1,254,145,.5)); }
.ach__t{ font-family:'Michroma',sans-serif; font-size:11.5px; color:var(--green); }
.ach__s{ font-family:'Space Mono',monospace; font-size:11px; color:var(--ink-soft); }

/* Mot « Natas » secrètement cliquable dans la légende de la photo « à propos » :
   il hérite du style du texte (aucun indice visuel), seul le curseur « ? » trahit l'œuf. */
.about__secret{ all:unset; cursor:help; }
.about__secret:focus-visible{ outline:1px dashed var(--green); outline-offset:3px; }

/* Fenêtre « définition de dictionnaire » (easter egg) : fond blanc, typographie de dico */
.defmodal{ position:fixed; inset:0; z-index:400; display:grid; place-items:center; padding:24px;
  background:rgba(4,6,5,.7); backdrop-filter:blur(6px); }
.defmodal__card{ position:relative; width:min(440px,92vw); background:#faf8f4; color:#1b1b1b;
  border-radius:10px; padding:30px 32px 28px; box-shadow:0 40px 100px -20px #000;
  animation:def-in .28s var(--ease); }
@keyframes def-in{ from{ transform:translateY(14px) scale(.97); opacity:0; } to{ transform:none; opacity:1; } }
.defmodal__body{ font-family:Georgia,'Times New Roman',serif; font-size:16px; line-height:1.75; }
.defmodal__body::first-line{ font-weight:700; font-size:1.15em; }   /* l'entrée du dico en gras */
.defmodal__x{ position:absolute; top:10px; right:10px; width:28px; height:28px; border-radius:50%;
  background:none; border:none; color:#8a8578; font-size:14px; cursor:pointer; transition:.15s var(--ease); }
.defmodal__x:hover{ color:#1b1b1b; background:#00000010; }
.hero__role{
  font-family:'Michroma',sans-serif;
  font-size:clamp(11px,2.4vw,14px); letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink); margin-bottom:22px;
  animation:rise .9s .08s var(--ease) both;
}
.hero__role span{ color:var(--green); }
.hero__line{
  max-width:30ch; margin:0 auto 34px;
  font-size:clamp(20px,4.4vw,30px); font-weight:500; line-height:1.32; color:var(--ink);
  letter-spacing:-.01em;
  animation:rise .9s .16s var(--ease) both;
}
/* Les groupes verts ne se coupent jamais en fin de ligne (équivaut à des espaces insécables). */
.hero__line em{ color:var(--green); font-style:normal; white-space:nowrap; }
.hero__socials{
  display:flex; justify-content:center; gap:10px;
  animation:rise .9s .24s var(--ease) both;
}
.soc{
  display:grid; place-items:center; width:44px; height:44px;
  border:1px solid var(--line-2); border-radius:12px;
  color:var(--ink-soft); background:#ffffff05;
  transition:.2s var(--ease);
}
.soc svg{ width:19px; height:19px; }
.soc:hover{ color:var(--bg); background:var(--green); border-color:var(--green); transform:translateY(-3px); }

.hero__scroll{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:2;
  font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-dim); display:flex; flex-direction:column; align-items:center; gap:8px;
}
.hero__scroll::after{ content:''; width:1px; height:34px; background:linear-gradient(var(--green),transparent); animation:scrolld 1.8s var(--ease) infinite; }

/* ======================================================
   SECTIONS génériques
   ====================================================== */
.section{ position:relative; padding:clamp(70px,11vw,130px) 0; }
.section__head{ margin-bottom:clamp(34px,6vw,60px); }
.section__head .num{
  font-family:'Space Mono',monospace; font-size:12px; color:var(--ink-dim);
  letter-spacing:.2em; margin-left:auto;
}
.section__title{
  font-family:'Michroma',sans-serif;
  font-size:clamp(30px,7vw,64px); line-height:1; letter-spacing:-.01em;
  margin-top:calc(18px - .15em); color:var(--ink);   /* -.15em : annule le padding-top anti-rognage */
}
.section__title em{ color:var(--green); font-style:normal; }
.section__topline{ display:flex; align-items:center; gap:16px; }

/* ======================================================
   ILS M'ONT FAIT CONFIANCE — bandeau défilant
   ====================================================== */
.trust{ position:relative; padding:26px 0; overflow:hidden;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#0b0d0c,var(--bg)); }
.trust__label{ text-align:center; font-family:'Space Mono',monospace; font-size:11px;
  letter-spacing:.28em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:20px; }
.trust__viewport{ overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); }
.trust__track{ display:flex; align-items:center; width:max-content;
  animation:trust-scroll 38s linear infinite; }
.trust:hover .trust__track{ animation-play-state:paused; }
.trust__item{ display:inline-flex; align-items:center; gap:13px; margin-right:44px; flex:0 0 auto; }
.trust__ava{ width:46px; height:46px; border-radius:50%; object-fit:cover; flex:none;
  border:1px solid var(--line-2); background:var(--panel); }
.trust__name{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:17px;
  color:var(--ink-soft); white-space:nowrap; }
.trust__item:hover .trust__name{ color:var(--green); }
@keyframes trust-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .trust__track{ animation:none; } }

/* --- Le pendant ironique : « Ils ne m'ont jamais fait confiance » --- */
.trust--neg{ background:linear-gradient(180deg,#100a0c,#0a0708);
  border-color:#3a1f26; }
.trust--neg .trust__track{ animation-direction:reverse; animation-duration:34s; } /* défile dans l'autre sens */
.trust--neg .trust__label{ color:#ff7a8c; }
.trust--neg .trust__label::before{ content:"✘ "; opacity:.8; }
.trust--neg .trust__ava{ filter:grayscale(1) contrast(.85) brightness(.85); opacity:.6;
  border-color:#5a2a33; transition:filter .25s var(--ease), opacity .25s var(--ease); }
.trust--neg .trust__name{ color:var(--ink-dim); text-decoration:line-through;
  text-decoration-color:#ff5d7399; text-decoration-thickness:2px; transition:.2s var(--ease); }
/* Rédemption au survol : ils reprennent des couleurs 😏 */
.trust--neg .trust__item:hover .trust__ava{ filter:none; opacity:1; border-color:var(--green); }
.trust--neg .trust__item:hover .trust__name{ color:var(--ink); text-decoration-color:transparent; }

/* ======================================================
   MARQUES — mur de logos
   ====================================================== */
.section--brands{ padding:clamp(54px,8vw,96px) 0; }
.brand-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:16px; }
.brand{ display:grid; place-items:center; aspect-ratio:16/9; padding:22px 24px; border-radius:14px;
  border:1px solid var(--line-2); background:#eef1ef; transition:.22s var(--ease); overflow:hidden; }
.brand:hover{ border-color:var(--green); transform:translateY(-4px); box-shadow:0 18px 40px -26px #000; }
.brand__logo{ max-width:100%; max-height:64px; width:auto; object-fit:contain;
  filter:grayscale(1); opacity:.78; transition:.22s var(--ease); }
.brand:hover .brand__logo{ filter:none; opacity:1; }
.brand__name{ font-family:'Michroma',sans-serif; font-size:15px; color:#1a1f1c; text-align:center; line-height:1.2; }

/* ======================================================
   MANIFESTO / stats
   ====================================================== */
.manifesto{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-2); }
.about{
  display:grid; grid-template-columns:.82fr 1.18fr; gap:clamp(28px,5vw,62px); align-items:center;
}
.about__photo{
  position:relative; margin:0; border-radius:18px; overflow:hidden;
  border:1px solid var(--line-2); box-shadow:0 30px 70px -40px #000;
}
.about__photo img{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:50% 30%; filter:contrast(1.03) saturate(1.03); }
.about__photo::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top,#08090a 1%,transparent 38%), radial-gradient(120% 70% at 50% 0,transparent 60%,#01fe9114);
}
.about__photo figcaption{
  position:absolute; left:16px; bottom:14px; z-index:2;
  font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.08em; color:var(--ink);
  display:flex; align-items:center; gap:8px;
}
.about__photo figcaption::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 10px var(--green); }
.manifesto__txt{ font-size:clamp(18px,2.6vw,24px); line-height:1.5; color:var(--ink-soft); font-weight:400; }
.manifesto__txt b{ color:var(--ink); font-weight:600; }
.stats{ display:flex; gap:clamp(20px,4vw,44px); flex-wrap:wrap; margin-top:clamp(26px,4vw,38px); }
.stat__n{ font-family:'Michroma',sans-serif; font-size:clamp(34px,6vw,52px); color:var(--green); line-height:1; }
.stat__l{ font-family:'Space Mono',monospace; font-size:12px; color:var(--ink-dim); letter-spacing:.06em; margin-top:8px; max-width:16ch; }

/* ======================================================
   FEATURE — ev.l prod
   ====================================================== */
.evl{
  position:relative; border-radius:24px; overflow:hidden;
  padding:clamp(36px,6vw,72px);
  background:
    radial-gradient(700px 360px at 80% 0%, #01fe9114, transparent 70%),
    radial-gradient(600px 420px at 0% 100%, #7a3bff1a, transparent 70%),
    linear-gradient(160deg,#0e1411,#0a0c0b);
  border:1px solid var(--line-2);
}
/* Logo EVL : à droite du texte, avec un léger halo (remplace l'ancienne image de fond). */
.evl__logo{
  position:absolute; right:clamp(24px,6vw,72px); top:50%; transform:translateY(-50%);
  z-index:1; width:auto; height:auto; max-width:clamp(150px,24vw,300px); max-height:82%;
  pointer-events:none;
  filter:drop-shadow(0 0 34px #01fe9126) drop-shadow(0 12px 30px rgba(0,0,0,.5));
}
@media(min-width:861px){
  .evl{ padding-right:clamp(220px,34vw,430px); }      /* réserve la place du logo */
}
@media(max-width:860px){
  .evl__logo{ right:-6%; max-width:52vw; opacity:.14; }   /* filigrane derrière le texte */
}
.evl::before{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:repeating-linear-gradient(115deg,#ffffff03 0 2px,transparent 2px 9px);
}
.evl__tag,.evl__sub,.evl__cta{ z-index:2; }
.evl__tag{ position:relative; }
.evl__sub{ position:relative; font-size:clamp(16px,2.4vw,20px); color:var(--ink-soft); max-width:42ch; margin-top:18px; }
.evl__cta{
  position:relative; display:inline-flex; align-items:center; gap:12px; margin-top:30px;
  font-family:'Space Mono',monospace; font-size:14px; letter-spacing:.04em;
  background:var(--green); color:var(--bg); padding:14px 24px; border-radius:999px;
  transition:.2s var(--ease);
}
.evl__cta:hover{ gap:18px; box-shadow:0 14px 40px -12px var(--green-glow); transform:translateY(-2px); }

/* ======================================================
   PODCASTS
   ====================================================== */
.pods{ display:flex; flex-direction:column; gap:22px; }
.pod-feat{
  position:relative; border-radius:20px; overflow:hidden;
  border:1px solid var(--line-2); background:var(--panel);
  display:grid; grid-template-columns:minmax(0,38%) 1fr; align-items:stretch;
  transition:.25s var(--ease);
}
.pod-feat:hover{ border-color:var(--line-2); }
.pod-feat__art{ position:relative; overflow:hidden; min-height:340px; }
.pod-feat__art img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); filter:saturate(1.05); }
.pod-feat:hover .pod-feat__art img{ transform:scale(1.05); }
.pod-feat__art::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top,#0b0f0d 4%,transparent 60%); }
.pod-feat__badge{
  position:absolute; top:16px; left:16px; z-index:2;
  font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  background:rgba(8,9,10,.72); color:var(--ink); border:1px solid #ffffff22;
  backdrop-filter:blur(6px); padding:6px 11px; border-radius:7px;
}
.pod-feat__badge.is-new{ background:var(--green); color:var(--bg); border-color:var(--green); }
.pod-feat__play{
  position:absolute; bottom:16px; right:16px; z-index:2;
  width:54px; height:54px; border-radius:50%; display:grid; place-items:center;
  background:rgba(8,9,10,.6); border:1px solid #ffffff33; backdrop-filter:blur(6px);
  transition:.2s var(--ease);
}
.pod-feat__play svg{ width:20px; height:20px; fill:#fff; margin-left:2px; }
.pod-feat:hover .pod-feat__play{ background:var(--green); border-color:var(--green); }
.pod-feat:hover .pod-feat__play svg{ fill:var(--bg); }
.pod-feat__body{ padding:clamp(22px,2.6vw,30px); display:flex; flex-direction:column; }
.pod-feat__title{ font-family:'Michroma',sans-serif; font-size:clamp(22px,3vw,30px); line-height:1.05; }
.pod-feat__desc{ color:var(--ink-soft); font-size:14.5px; line-height:1.6; margin-top:12px; max-width:54ch; }
.pod-feat__ep{ font-size:14.5px; color:var(--ink-soft); margin-top:12px; line-height:1.4; }
.pod-feat__ep strong{ color:var(--ink); font-weight:600; }
.pod-feat__meta{ font-family:'Space Mono',monospace; font-size:12.5px; color:var(--ink-dim); margin-top:10px; }
.pod-feat__badge{ display:inline-flex; align-items:center; gap:6px; }

/* ---- Liste des derniers épisodes (podcast à la une) ---- */
.ep-list__head{ font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-dim); margin:20px 0 6px; }
.ep-list{ list-style:none; display:flex; flex-direction:column; }
.ep+.ep{ border-top:1px solid var(--line); }
.ep__link{ display:flex; align-items:center; gap:13px; padding:11px 8px; border-radius:12px; transition:.16s var(--ease); }
.ep__link:hover{ background:#ffffff08; }
.ep__play{ width:32px; height:32px; flex:none; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line-2); background:var(--bg-2); transition:.16s var(--ease); }
.ep__play svg{ width:13px; height:13px; fill:var(--ink-soft); margin-left:1px; transition:.16s var(--ease); }
.ep__link:hover .ep__play{ background:var(--green); border-color:var(--green); transform:scale(1.06); }
.ep__link:hover .ep__play svg{ fill:var(--bg); }
.ep__play--fav{ border-color:var(--green-deep); }
.ep__play--fav svg{ width:15px; height:15px; fill:var(--green); margin-left:0; }
.ep__link:hover .ep__play--fav svg{ fill:var(--bg); }
.ep__main{ min-width:0; flex:1; display:flex; flex-direction:column; }
.ep__title{ font-size:14.5px; font-weight:500; color:var(--ink); line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; }
.ep__link:hover .ep__title{ color:var(--green); }
.ep__sub{ font-family:'Space Mono',monospace; font-size:11.5px; color:var(--ink-dim); margin-top:3px; }
.ep__tag{ flex:none; font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--bg); background:var(--green); padding:3px 8px; border-radius:6px; }
.pod-feat .pod-links{ margin-top:auto; padding-top:18px; }

.pod-side{ display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.pod{
  display:flex; gap:18px; align-items:center; flex:1;
  border:1px solid var(--line); border-radius:18px; padding:16px; background:var(--panel);
  transition:.22s var(--ease);
}
.pod:hover{ border-color:var(--green); background:var(--panel-2); transform:translateX(5px); }
.pod__art{ width:84px; height:84px; flex:none; border-radius:12px; overflow:hidden; border:1px solid var(--line-2); }
.pod__art img{ width:100%; height:100%; object-fit:cover; }
.pod__txt{ display:flex; flex-direction:column; min-width:0; flex:1; }
.pod__title{ display:block; font-size:18px; font-weight:600; }
.pod__title a:hover{ color:var(--green); }
.pod-page-link{ display:inline-flex; align-items:center; gap:8px; margin-top:16px;
  font-family:'Space Mono',monospace; font-size:13px; color:var(--green);
  border:1px solid var(--green-deep); border-radius:999px; padding:9px 16px; transition:.2s var(--ease); }
.pod-page-link:hover{ background:var(--green); color:var(--bg); transform:translateY(-1px); }
.pod-page-link span{ transition:transform .2s var(--ease); }
.pod-page-link:hover span{ transform:translateX(3px); }
.pod__meta{ display:block; font-family:'Space Mono',monospace; font-size:12px; color:var(--ink-dim); margin-top:4px; }

/* ---- Boutons plateformes ---- */
.pod-links{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.pod-links--sm{ margin-top:10px; gap:6px; }
.pod-chip{
  display:inline-flex; align-items:center; gap:5px;
  font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.01em;
  color:var(--ink-soft); background:#ffffff08; border:1px solid var(--line-2);
  padding:6px 11px; border-radius:999px; transition:.18s var(--ease);
}
.pod-chip span{ color:var(--ink-dim); font-size:11px; transition:.18s var(--ease); }
.pod-chip:hover{ color:var(--bg); background:var(--green); border-color:var(--green); transform:translateY(-1px); }
.pod-chip:hover span{ color:var(--bg); }
.pod-links--sm .pod-chip{ font-size:11px; padding:5px 9px; }

/* ======================================================
   VIDÉO
   ====================================================== */
.video{
  position:relative; display:flex; align-items:center; gap:clamp(20px,4vw,44px);
  border-radius:22px; overflow:hidden; padding:clamp(18px,2.4vw,24px);
  border:1px solid var(--line-2);
  background:radial-gradient(600px 300px at 95% 50%, #7a3bff1c, transparent 70%), var(--panel);
  flex-wrap:wrap;
}
.video__thumb{
  position:relative; flex:none; width:clamp(240px,34%,380px); aspect-ratio:16/9;
  border-radius:14px; overflow:hidden; border:1px solid var(--line-2);
}
.video__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.video:hover .video__thumb img{ transform:scale(1.05); }
.video__thumb::after{ content:''; position:absolute; inset:0; background:linear-gradient(120deg,#08090a55,transparent 55%); }
.video__play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  width:64px; height:64px; flex:none; border-radius:50%; display:grid; place-items:center;
  background:#fff; transition:.25s var(--ease);
}
.video__play svg{ width:24px; height:24px; fill:var(--bg); margin-left:3px; }
.video:hover .video__play{ background:var(--green); transform:translate(-50%,-50%) scale(1.06); }
.video__txt h3{ font-family:'Michroma',sans-serif; font-size:clamp(20px,3.4vw,30px); line-height:1.1; }
.video__txt p{ color:var(--ink-dim); font-family:'Space Mono',monospace; font-size:13px; margin-top:8px; }
.video__go{ margin-left:auto; align-self:center; font-family:'Space Mono',monospace; font-size:13px; color:var(--ink-dim); }
.video:hover .video__go{ color:var(--green); }

/* ---- Grille des vidéos (rôles + récup. auto) ---- */
.vid-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:clamp(22px,3vw,32px); }
.vid{
  display:flex; flex-direction:column; border-radius:16px; overflow:hidden;
  border:1px solid var(--line-2); background:var(--panel); transition:.25s var(--ease);
}
.vid:hover{ transform:translateY(-6px); border-color:var(--green); box-shadow:0 24px 50px -28px #000; }
.vid__thumb{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--bg-2); }
.vid__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.vid:hover .vid__thumb img{ transform:scale(1.06); }
.vid__thumb::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top,#08090a99 2%,transparent 42%); }
.vid__play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  background:rgba(255,255,255,.92); transition:.25s var(--ease);
}
.vid__play svg{ width:20px; height:20px; fill:var(--bg); margin-left:2px; }
.vid:hover .vid__play{ background:var(--green); transform:translate(-50%,-50%) scale(1.08); }
.vid__role{
  position:absolute; top:12px; left:12px; z-index:2;
  font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--bg); background:var(--green); padding:5px 10px; border-radius:999px; font-weight:700;
}
.vid__dur{ position:absolute; bottom:10px; right:10px; z-index:2;
  font-family:'Space Mono',monospace; font-size:11px; font-weight:700; color:var(--ink);
  background:rgba(8,9,10,.78); border:1px solid #ffffff1f; backdrop-filter:blur(4px);
  padding:3px 8px; border-radius:6px; }
.vid__txt{ padding:16px 18px 18px; }
.vid__title{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:16px; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.vid__meta{ font-family:'Space Mono',monospace; font-size:11.5px; color:var(--green); margin-top:8px; letter-spacing:.02em; }
.vid__note{ font-family:'Space Mono',monospace; font-size:12px; color:var(--ink-dim); margin-top:8px; }
.vid__desc{ color:var(--ink-soft); font-size:13.5px; line-height:1.55; margin-top:9px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.vid__desc b, .vid__desc strong{ color:var(--ink); }
.vid__desc a{ color:var(--green); }

/* Lien « Tout voir sur NatasTube » */
.vid-all{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:clamp(24px,3vw,36px); }
.vid-all__btn{ display:inline-flex; align-items:center; gap:12px; font-family:'Space Grotesk',sans-serif;
  font-size:15px; font-weight:600; color:var(--ink); background:var(--panel);
  border:1px solid var(--line-2); border-radius:999px; padding:13px 24px; transition:.22s var(--ease); }
/* Marque NatasTube dans le bouton : même langage que la pastille du menu */
.vid-all__brand{ display:inline-flex; align-items:center; gap:9px;
  font-family:'Michroma',sans-serif; font-size:.92em; color:var(--ink); }
.vid-all__brand b{ font-weight:400; color:var(--green); }
.vid-all__play{ width:26px; height:19px; border-radius:5px; background:var(--green);
  display:grid; place-items:center; flex:none; transition:transform .2s var(--ease); }
.vid-all__play svg{ width:11px; height:11px; fill:var(--bg); margin-left:1px; }
.vid-all__btn:hover{ border-color:var(--green); color:var(--green); transform:translateY(-2px); box-shadow:0 14px 40px -16px var(--green-glow); }
.vid-all__btn:hover .vid-all__play{ transform:scale(1.12); }
.vid-all__arrow{ transition:transform .2s var(--ease); }
.vid-all__btn:hover .vid-all__arrow{ transform:translateX(4px); }
/* Dé : dans le titre, juste après « générique » — re-pioche 6 vidéos (max 1 par série) */
.vid-dice{ display:inline-grid; place-items:center; vertical-align:middle;
  width:.62em; height:.62em; margin-left:.32em; border-radius:50%; cursor:pointer;
  font-size:inherit; line-height:1; background:var(--panel); border:1px solid var(--line-2);
  transition:.2s var(--ease); }
.vid-dice::before{ content:'🎲'; font-size:.42em; filter:grayscale(1) brightness(1.4); transition:.2s var(--ease); }
.vid-dice:hover{ border-color:var(--green); transform:rotate(-14deg) scale(1.08);
  box-shadow:0 0 18px -4px var(--green-glow); }
.vid-dice:hover::before{ filter:none; }
.vid-dice.roll{ animation:diceroll .5s var(--ease); }
@keyframes diceroll{ 0%{ transform:rotate(0); } 60%{ transform:rotate(310deg) scale(1.15); } 100%{ transform:rotate(360deg); } }

/* ======================================================
   LIVRES — étagère
   ====================================================== */
/* ---- Étagère 3D : couvertures entières + tranche colorée, posées sur une barre néon ---- */
.shelf-wrap{ position:relative; }
.shelf{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,3vw,36px); align-items:start; }
.tome{ display:flex; flex-direction:column; align-items:center; gap:18px; perspective:1000px; }
/* Le livre : légère rotation 3D qui révèle la tranche ; il se redresse au survol. */
.tome__book{
  position:relative; display:block; width:min(100%,200px); aspect-ratio:2/3;
  transform-style:preserve-3d; transform:rotateY(-22deg);
  transition:transform .5s var(--ease);
}
.tome:hover .tome__book{ transform:rotateY(-6deg) translateY(-12px); }
.tome__cover{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  border-radius:2px 8px 8px 2px; transform:translateZ(14px); backface-visibility:hidden;
  box-shadow:0 24px 44px -18px rgba(0,0,0,.85);
}
.tome:hover .tome__cover{ box-shadow:0 30px 60px -20px rgba(0,0,0,.9), 0 0 44px -8px var(--ba,var(--green)); }
/* Tranche : plan perpendiculaire à la couverture, teinté couleur d'accent. */
.tome__spine{
  position:absolute; left:0; top:0; bottom:0; width:28px;
  transform-origin:left center; transform:rotateY(-90deg) translateZ(0);
  background:linear-gradient(90deg, var(--ba,var(--green)) -60%, var(--b1,#15201b) 55%, var(--b2,#0c100e));
  border-radius:2px 0 0 2px;
}
/* Reflet lumineux qui glisse sur la couverture au survol. */
.tome__sheen{
  position:absolute; inset:0; z-index:2; transform:translateZ(15px); pointer-events:none;
  border-radius:2px 8px 8px 2px; overflow:hidden;
}
.tome__sheen::before{
  content:''; position:absolute; top:-20%; bottom:-20%; left:-80%; width:45%;
  background:linear-gradient(105deg,transparent,#ffffff2e,transparent);
  transform:skewX(-18deg); transition:left .55s var(--ease);
}
.tome:hover .tome__sheen::before{ left:130%; }
/* Couverture auto (pas d'image) : dégradé + titre, même gabarit. */
.tome__cover--auto{
  display:grid; place-items:center; padding:18px; text-align:center;
  background:linear-gradient(155deg,var(--b1,#15201b),var(--b2,#0c100e));
  border:1px solid var(--line-2);
  font-family:'Michroma',sans-serif; font-size:15px; line-height:1.35; color:var(--ink);
}
/* Fiche sous le livre : catégorie en pastille, titre, lien d'achat. */
.tome__info{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.tome__cat{
  font-family:'Space Mono',monospace; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ba,var(--green)); border:1px solid color-mix(in srgb, var(--ba,#01fe91) 45%, transparent);
  padding:3px 9px; border-radius:999px;
}
.tome__title{ font-family:'Michroma',sans-serif; font-size:clamp(13px,1.4vw,15px); line-height:1.35; color:var(--ink); max-width:22ch; }
/* Co-auteurs, note (« pour Squeezie »…) et éditeur·année */
.tome__authors{ font-family:'Space Grotesk',sans-serif; font-size:12.5px; font-style:italic; color:var(--ink-soft); }
.tome__note{ font-family:'Space Grotesk',sans-serif; font-size:12.5px; font-style:italic; color:var(--ink-dim); }
.tome__pub{ font-family:'Space Mono',monospace; font-size:10.5px; letter-spacing:.06em; color:var(--ink-dim); }
/* Bouton d'achat : gros sticker penché à la couleur du livre, panier qui gigote */
.tome__buybtn{
  display:inline-flex; align-items:center; gap:9px; margin-top:8px;
  font-family:'Space Mono',monospace; font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  padding:11px 18px; border-radius:12px; background:var(--ba,var(--green)); color:var(--bg);
  box-shadow:3px 3px 0 rgba(0,0,0,.85); transform:rotate(-1.5deg); transition:.18s var(--ease);
}
.tome__buybtn-cart{ font-size:15px; line-height:1; }
.tome__buybtn:hover{
  transform:rotate(0deg) translateY(-3px);
  box-shadow:5px 7px 0 rgba(0,0,0,.85), 0 16px 40px -12px var(--ba,var(--green));
}
.tome__buybtn:hover .tome__buybtn-cart{ animation:cart-wiggle .5s var(--ease); }
.tome__buybtn:active{ transform:rotate(0deg) translateY(0); box-shadow:1px 1px 0 rgba(0,0,0,.85); }
@keyframes cart-wiggle{ 25%{ transform:rotate(-16deg) translateX(-2px); } 60%{ transform:rotate(12deg) translateX(2px); } 100%{ transform:none; } }
/* Liens d'achat générés depuis l'ISBN */
.tome__links{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:7px; margin-top:2px;
  font-family:'Space Mono',monospace; font-size:11px; }
.tome__links a{ color:var(--ink-dim); transition:.18s var(--ease); border-bottom:1px solid transparent; }
.tome__links a:hover{ color:var(--ba,var(--green)); border-bottom-color:var(--ba,var(--green)); }
.tome__links i{ font-style:normal; color:var(--line-2); }
/* Socle néon : chaque livre est posé sur sa lumière (couleur d'accent du livre). */
.tome__base{
  width:74%; height:2px; margin-top:-6px; border-radius:999px;
  background:linear-gradient(90deg,transparent, var(--ba,var(--green)), transparent);
  box-shadow:0 6px 26px -2px color-mix(in srgb, var(--ba,#01fe91) 45%, transparent);
  opacity:.8; transition:.3s var(--ease);
}
.tome:hover .tome__base{ opacity:1; width:88%; }

/* ======================================================
   NEWSLETTER
   ====================================================== */
.news{
  position:relative; border-radius:24px; overflow:hidden; padding:clamp(40px,7vw,80px);
  text-align:center;
  background:radial-gradient(600px 400px at 50% 0%, #7a3bff33, transparent 70%),
             linear-gradient(160deg,#15101f,#0b0a10);
  border:1px solid #2e2350;
}
.news__k{ color:var(--violet); }
.news__k::before{ background:var(--violet); }
.news__title{
  font-family:'Michroma',sans-serif; font-size:clamp(28px,6vw,56px); line-height:1.02;
  margin:18px 0 14px;
  background:linear-gradient(180deg,#fff,#cdbcff); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.news__sub{ color:var(--ink-soft); max-width:40ch; margin:0 auto 30px; font-size:clamp(15px,2.2vw,18px); }
.news__cta{
  display:inline-flex; align-items:center; gap:12px;
  font-family:'Space Mono',monospace; font-size:14px;
  background:#fff; color:var(--bg); padding:14px 26px; border-radius:999px; transition:.2s var(--ease);
}
.news__cta:hover{ gap:18px; background:var(--violet); color:#fff; transform:translateY(-2px); box-shadow:0 16px 40px -14px #7a3bff80; }

/* ======================================================
   FOOTER / contact
   ====================================================== */
.foot{ position:relative; padding:clamp(70px,10vw,120px) 0 50px; border-top:1px solid var(--line); }
.foot__cta{ font-family:'Michroma',sans-serif; font-size:clamp(13px,2vw,16px); color:var(--ink-dim); letter-spacing:.1em; text-transform:uppercase; margin-bottom:18px; }
.foot__mail{
  display:inline-block; font-family:'Michroma',sans-serif;
  font-size:clamp(26px,7vw,68px); line-height:1; letter-spacing:-.02em; color:var(--ink);
  background-image:linear-gradient(var(--green),var(--green)); background-size:0% 3px; background-repeat:no-repeat; background-position:0 100%;
  transition:background-size .35s var(--ease), color .25s;
}
.foot__mail:hover{ color:var(--green); background-size:100% 3px; }
.foot__bottom{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:18px;
  margin-top:clamp(40px,7vw,72px); padding-top:26px; border-top:1px solid var(--line);
  font-family:'Space Mono',monospace; font-size:12px; color:var(--ink-dim);
}
.foot__socials{ display:flex; gap:10px; }
.foot__credit b{ color:var(--ink-soft); font-weight:400; }
.foot__credit a{ color:var(--ink-soft); border-bottom:1px solid var(--line-2); }
.foot__credit a:hover{ color:var(--green); border-color:var(--green); }

/* ======================================================
   RESPONSIVE
   ====================================================== */
@media (max-width:880px){
  .about{ grid-template-columns:1fr; }
  .about__photo{ max-width:340px; }
  .about__photo img{ aspect-ratio:3/2; object-position:50% 28%; }
  .pod-feat{ grid-template-columns:1fr; }
  .pod-feat__art{ min-height:0; aspect-ratio:16/10; }
  /* Livres : carrousel horizontal à aimantation (les couvertures restent grandes). */
  .shelf{
    display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
    padding:6px 4px 14px; -webkit-overflow-scrolling:touch;
  }
  .shelf::-webkit-scrollbar{ display:none; }
  .shelf .tome{ flex:0 0 58%; max-width:230px; scroll-snap-align:center; }
  .vid-grid{ grid-template-columns:repeat(2,1fr); }
  .section__topline{ flex-wrap:wrap; }
  .video__thumb{ width:100%; }
}
@media (max-width:540px){
  .pod-side{ grid-template-columns:1fr; }
  .vid-grid{ grid-template-columns:1fr; }
  .video{ justify-content:center; text-align:center; }
  .video__go{ margin:0; width:100%; }
  .topbar__cta{ display:none; }
}

@keyframes rise{ from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:none;} }
@keyframes float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } }
@keyframes scrolld{ 0%{transform:scaleY(0);transform-origin:top;} 45%{transform:scaleY(1);transform-origin:top;} 55%{transform:scaleY(1);transform-origin:bottom;} 100%{transform:scaleY(0);transform-origin:bottom;} }
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } .reveal{opacity:1;transform:none;} }

/* ======================================================
   PAGE PODCAST DÉDIÉE (podcast.php)
   ====================================================== */
.pp-empty{ padding:170px 0 120px; text-align:center; }
.pp-empty h1{ font-family:'Michroma',sans-serif; font-size:clamp(26px,6vw,46px); }
.pp-empty p{ color:var(--ink-soft); margin-top:14px; }
.pp-empty a{ color:var(--green); }

.pp-hero{ position:relative; padding:clamp(120px,16vw,180px) 0 clamp(40px,6vw,72px); overflow:hidden; }
.pp-hero__bg{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center;
  filter:blur(64px) saturate(1.4); opacity:.30; transform:scale(1.25); }
.pp-hero::after{ content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(8,9,10,.45),var(--bg) 88%); }
.pp-hero__inner{ position:relative; z-index:2; display:grid; grid-template-columns:300px 1fr;
  gap:clamp(28px,5vw,56px); align-items:center; }
.pp-hero__art{ position:relative; aspect-ratio:1; border-radius:20px; overflow:hidden;
  border:1px solid var(--line-2); box-shadow:0 44px 90px -40px #000; }
.pp-hero__art img{ width:100%; height:100%; object-fit:cover; }
.pp-hero__title{ font-family:'Michroma',sans-serif; font-size:clamp(30px,5.4vw,58px); line-height:1.03; margin:14px 0 0; }
.pp-hero__sub{ color:var(--ink-soft); font-size:clamp(15px,2vw,18px); margin-top:12px; }
.pp-meta{ display:flex; flex-wrap:wrap; gap:9px; margin-top:18px; }
.pp-meta__i{ font-family:'Space Mono',monospace; font-size:12px; color:var(--ink-soft);
  border:1px solid var(--line-2); border-radius:999px; padding:6px 12px; }
.pp-meta__i b{ color:var(--green); font-weight:700; }
.pp-hero__desc{ color:var(--ink-soft); line-height:1.7; margin-top:20px; max-width:64ch; font-size:15.5px; }
.pp-cta{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:26px; }
.pp-cta__main{ display:inline-flex; align-items:center; gap:11px; background:var(--green); color:var(--bg);
  font-family:'Space Grotesk',sans-serif; font-weight:700; padding:13px 22px; border-radius:999px; transition:.2s var(--ease); }
.pp-cta__main:hover{ transform:translateY(-2px); box-shadow:0 16px 44px -12px var(--green-glow); }
.pp-cta__play{ width:26px; height:26px; border-radius:50%; background:var(--bg); display:grid; place-items:center; flex:none; }
.pp-cta__play svg{ width:13px; height:13px; fill:var(--green); margin-left:1px; }

.pp-section{ padding-top:clamp(36px,5vw,56px); }
.pp-fav-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.pp-fav{ display:flex; align-items:center; gap:14px; padding:16px 18px; border-radius:14px;
  border:1px solid var(--line-2); background:var(--panel); transition:.2s var(--ease); }
.pp-fav:hover{ border-color:var(--green); transform:translateY(-3px); }
.pp-fav__star{ width:38px; height:38px; flex:none; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--green-deep); background:var(--bg-2); }
.pp-fav__star svg{ width:18px; height:18px; fill:var(--green); }
.pp-fav__body{ display:flex; flex-direction:column; min-width:0; }
.pp-fav__title{ font-weight:600; font-size:15.5px; line-height:1.3; }
.pp-fav__meta{ font-family:'Space Mono',monospace; font-size:12px; color:var(--ink-dim); margin-top:4px; }

.pp-eps{ list-style:none; display:flex; flex-direction:column; gap:14px; margin:0; padding:0; }
.pp-ep{ display:flex; gap:18px; padding:20px clamp(16px,2.2vw,22px); border-radius:16px;
  border:1px solid var(--line); background:var(--panel); transition:.2s var(--ease); }
.pp-ep:hover{ border-color:var(--line-2); background:var(--panel-2); }
.pp-ep__thumb{ position:relative; width:88px; height:88px; flex:none; border-radius:12px; overflow:hidden;
  border:1px solid var(--line-2); background:var(--bg-2); }
.pp-ep__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease); }
.pp-ep:hover .pp-ep__thumb img{ transform:scale(1.06); }
.pp-ep__thumb::after{ content:''; position:absolute; inset:0; background:rgba(8,9,10,.35); opacity:0; transition:.2s var(--ease); }
.pp-ep:hover .pp-ep__thumb::after{ opacity:1; }
.pp-ep__play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.9); z-index:2;
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center;
  background:rgba(8,9,10,.6); border:1px solid #ffffff33; backdrop-filter:blur(4px);
  opacity:0; transition:.2s var(--ease); }
.pp-ep__play svg{ width:16px; height:16px; fill:#fff; margin-left:2px; }
.pp-ep:hover .pp-ep__play{ opacity:1; transform:translate(-50%,-50%) scale(1); background:var(--green); border-color:var(--green); }
.pp-ep:hover .pp-ep__play svg{ fill:var(--bg); }
@media(max-width:760px){ .pp-ep__thumb{ width:66px; height:66px; } }
.pp-ep__main{ min-width:0; flex:1; }
.pp-ep__head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.pp-ep__n{ font-family:'Space Mono',monospace; font-size:12px; color:var(--green); flex:none; }
.pp-ep__title{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:clamp(16px,2.2vw,19px); line-height:1.3; }
.pp-ep:hover .pp-ep__title{ color:var(--green); }
.pp-ep__meta{ font-family:'Space Mono',monospace; font-size:12px; color:var(--ink-dim); margin-top:6px; }
.pp-ep__desc{ color:var(--ink-soft); font-size:14.5px; line-height:1.65; margin-top:10px;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.pp-noeps{ color:var(--ink-dim); }

@media (max-width:760px){
  .pp-hero__inner{ grid-template-columns:1fr; }
  .pp-hero__art{ width:min(260px,68%); }
  .pp-fav-grid{ grid-template-columns:1fr; }
}

/* ======================================================
   NATASTUBE — page « toutes les vidéos » (parodie YouTube)
   ====================================================== */
body.nt{ background:var(--bg); }
.nt-bar{
  position:sticky; top:0; z-index:200; display:flex; align-items:center; gap:clamp(12px,3vw,28px);
  padding:12px clamp(16px,4vw,32px); background:rgba(8,9,10,.86); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nt-logo{ display:inline-flex; align-items:center; gap:10px; flex:none; }
.nt-logo__play{ width:34px; height:26px; border-radius:7px; background:var(--green); display:grid; place-items:center; }
.nt-logo__play svg{ width:16px; height:16px; fill:var(--bg); margin-left:1px; }
.nt-logo__txt{ font-family:'Michroma',sans-serif; font-size:16px; letter-spacing:.02em; color:var(--ink); }
.nt-logo__txt b{ font-weight:400; color:var(--green); }
/* Recherche façon YouTube : champ arrondi + bouton loupe accolé */
.nt-search{ display:flex; flex:1; max-width:560px; margin:0 auto; }
.nt-search__field{ position:relative; flex:1; display:flex; align-items:center; }
.nt-search input{
  width:100%; font-family:'Space Grotesk',sans-serif; font-size:14px; color:var(--ink);
  background:var(--bg-2); border:1px solid var(--line-2); border-right:none;
  border-radius:999px 0 0 999px; padding:11px 40px 11px 18px; outline:none; transition:.18s var(--ease);
}
.nt-search input::placeholder{ color:var(--ink-dim); }
.nt-search__field:focus-within input{ border-color:var(--green); box-shadow:inset 0 0 0 1px var(--green); }
.nt-search__clear{ position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  background:transparent; border:none; color:var(--ink-dim); font-size:20px; line-height:1; transition:.15s var(--ease); }
.nt-search__clear:hover{ color:var(--ink); background:#ffffff12; }
.nt-search__clear[hidden]{ display:none; }
.nt-search__btn{ flex:none; width:58px; border:1px solid var(--line-2); border-left:none;
  border-radius:0 999px 999px 0; background:var(--panel); color:var(--ink-soft); cursor:pointer; transition:.18s var(--ease); }
.nt-search__btn svg{ width:20px; height:20px; }
.nt-search__btn:hover{ background:var(--green); border-color:var(--green); color:var(--bg); }
.nt-search__field:focus-within + .nt-search__btn{ border-color:var(--green); }
.nt-back{ flex:none; display:inline-flex; align-items:center; gap:7px; font-family:'Space Mono',monospace; font-size:12px; color:var(--ink-soft);
  border:1px solid var(--line-2); border-radius:999px; padding:9px 14px; transition:.2s var(--ease); }
.nt-back svg{ width:15px; height:15px; }
.nt-back:hover{ border-color:var(--green); color:var(--green); }
@media(max-width:760px){ .nt-back span{ display:none; } .nt-back{ padding:9px 11px; } }

.nt-main{ max-width:1320px; margin:0 auto; padding:clamp(24px,4vw,44px) clamp(16px,4vw,32px) 60px; }
.nt-head{ margin-bottom:22px; }
.nt-title{ font-family:'Michroma',sans-serif; font-size:clamp(24px,5vw,44px); line-height:1.05; }
.nt-title em{ color:var(--green); font-style:normal; }
.nt-sub{ color:var(--ink-dim); font-family:'Space Mono',monospace; font-size:13px; margin-top:12px; }

.nt-intro{ margin-bottom:28px; max-width:760px; }
.nt-intro__title{ font-family:'Michroma',sans-serif; font-size:clamp(24px,5vw,42px); line-height:1.05; }
.nt-intro__title::first-letter{ color:var(--green); }
.nt-intro__text{ color:var(--ink-soft); line-height:1.7; margin-top:14px; font-size:clamp(14px,2vw,16px); }
/* Barre de contrôle : chips « Trier » + pastilles « Séries », défilement horizontal façon YouTube */
.nt-controls{ display:flex; align-items:center; gap:22px; flex-wrap:nowrap; margin-bottom:26px;
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
          mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent); }
.nt-controls::-webkit-scrollbar{ display:none; }
.nt-chips{ display:flex; align-items:center; gap:9px; flex-wrap:nowrap; flex:none; }
.nt-chips--coll{ position:relative; padding-left:23px; }
.nt-chips--coll::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:22px; background:var(--line-2); }
.nt-sort-label{ font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim); margin-right:4px; }
.nt-chip{ font-family:'Space Mono',monospace; font-size:12.5px; color:var(--ink-soft); cursor:pointer;
  background:var(--panel); border:1px solid var(--line-2); border-radius:999px; padding:8px 15px; transition:.18s var(--ease); }
.nt-chip:hover{ border-color:var(--green); color:var(--ink); }
.nt-chip.is-on{ background:var(--green); border-color:var(--green); color:var(--bg); font-weight:700; }
/* Pastille série : toggle « fondre dans la grille principale » (+ → ✓) */
.nt-cpill{ display:inline-flex; align-items:center; gap:7px; font-family:'Space Grotesk',sans-serif; font-size:13px;
  color:var(--ink-soft); cursor:pointer; background:var(--panel); border:1px solid var(--line-2);
  border-radius:999px; padding:6px 13px 6px 11px; transition:.18s var(--ease); }
.nt-cpill:hover{ border-color:var(--green); color:var(--ink); }
.nt-cpill__e{ font-size:14px; line-height:1; }
.nt-cpill__t{ font-weight:600; }
.nt-cpill__s{ font-family:'Space Mono',monospace; font-size:13px; opacity:.55; margin-left:1px; }
.nt-cpill:hover .nt-cpill__s{ opacity:.85; }
.nt-cpill[aria-pressed="true"]{ background:var(--green); border-color:var(--green); color:var(--bg); }
.nt-cpill[aria-pressed="true"] .nt-cpill__t{ font-weight:700; }
.nt-cpill[aria-pressed="true"] .nt-cpill__s{ opacity:1; }

/* Étagères façon page d'accueil YouTube : chaque bloc dans son cadre */
.nt-shelf{ border:1px solid var(--line-2); border-radius:18px;
  background:linear-gradient(180deg,var(--panel),transparent 80%);
  padding:clamp(16px,2.6vw,26px); margin-bottom:clamp(20px,3vw,30px); }
.nt-shelf--star{ border-color:#01fe9138;
  background:
    radial-gradient(560px 200px at 12% 0%, #01fe910d, transparent 70%),
    linear-gradient(180deg,var(--panel),transparent 80%); }
.nt-shelf__head{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:18px; }
.nt-shelf__title{ font-family:'Michroma',sans-serif; font-size:clamp(15px,2vw,19px); color:var(--ink); }
.nt-shelf__title b{ font-weight:400; color:var(--green); }
.nt-shelf--star .nt-shelf__title{ text-shadow:0 0 24px var(--green-glow); }
.nt-shelf__side{ display:flex; align-items:center; gap:12px; }
/* La sélection : UNE ligne, défilement horizontal aimanté + flèches */
.nt-vedette{ display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x proximity;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; padding:2px;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 46px),transparent);
          mask-image:linear-gradient(90deg,#000 calc(100% - 46px),transparent); }
.nt-vedette::-webkit-scrollbar{ display:none; }
.nt-vedette .nt-card{ flex:0 0 clamp(240px,26vw,320px); scroll-snap-align:start; }
.nt-arrow{ width:32px; height:32px; border-radius:50%; flex:none; cursor:pointer;
  background:var(--panel); border:1px solid var(--line-2); color:var(--ink-soft);
  font-size:19px; line-height:1; display:grid; place-items:center; padding-bottom:2px; transition:.18s var(--ease); }
.nt-arrow:hover{ border-color:var(--green); color:var(--green); }
.nt-shelf .nt-controls{ margin-bottom:20px; }
/* Vedette : cartes un peu plus compactes pour tenir à 4 de front en desktop */
.nt-grid.nt-vedette{ grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); }

.nt-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:clamp(18px,2vw,26px) 18px; }
.nt-card{ display:flex; flex-direction:column; gap:12px; }
.nt-card__thumb{ position:relative; aspect-ratio:16/9; border-radius:14px; overflow:hidden;
  background:var(--bg-2); border:1px solid var(--line-2); }
.nt-card__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.nt-card:hover .nt-card__thumb{ border-color:var(--green); }
.nt-card:hover .nt-card__thumb img{ transform:scale(1.05); }
.nt-card__play{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(.85); z-index:2;
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center; opacity:0;
  background:rgba(8,9,10,.6); border:1px solid #ffffff33; backdrop-filter:blur(4px); transition:.22s var(--ease); }
.nt-card__play svg{ width:20px; height:20px; fill:#fff; margin-left:2px; }
.nt-card:hover .nt-card__play{ opacity:1; transform:translate(-50%,-50%) scale(1); background:var(--green); border-color:var(--green); }
.nt-card:hover .nt-card__play svg{ fill:var(--bg); }
.nt-card__dur{ position:absolute; bottom:8px; right:8px; z-index:2;
  font-family:'Space Mono',monospace; font-size:11px; font-weight:700; color:#fff;
  background:rgba(0,0,0,.82); padding:2px 5px; border-radius:5px; line-height:1.35; }
/* Rôle : badge en surimpression sur la vignette (haut-gauche). */
.nt-card__role{ position:absolute; top:9px; left:9px; z-index:2;
  font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; font-weight:700;
  color:var(--bg); background:var(--green); padding:3px 9px; border-radius:6px; box-shadow:0 4px 12px -4px rgba(0,0,0,.6); }
/* Corps de carte façon YouTube : avatar de la chaîne + infos. */
.nt-card__body{ display:flex; gap:11px; align-items:flex-start; }
.nt-card__ava{ width:36px; height:36px; flex:none; border-radius:50%; overflow:hidden; background:var(--panel-2);
  border:1px solid var(--line-2); display:grid; place-items:center;
  font-family:'Michroma',sans-serif; font-size:13px; color:var(--ink-soft); }
.nt-card__ava img{ width:100%; height:100%; object-fit:cover; }
.nt-card__info{ min-width:0; display:flex; flex-direction:column; gap:3px; }
.nt-card__title{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15.5px; line-height:1.35; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.nt-card:hover .nt-card__title{ color:var(--green); }
.nt-card__chan{ font-family:'Space Mono',monospace; font-size:12.5px; color:var(--ink-soft); }
.nt-card:hover .nt-card__chan{ color:var(--ink); }
.nt-card__meta{ font-family:'Space Mono',monospace; font-size:12px; color:var(--ink-dim); }
.nt-empty, .nt-noresult{ color:var(--ink-dim); font-family:'Space Mono',monospace; padding:30px 0; }

/* --- NatasTube : sections « collection » (émissions) repliables --- */
.nt-collection{ margin-top:30px; border:1px solid var(--line-2); border-radius:16px; overflow:hidden;
  background:linear-gradient(180deg,var(--panel),var(--bg-2)); }
.nt-collection__bar{ display:flex; align-items:center; gap:16px; padding:16px 20px; cursor:pointer; list-style:none; }
.nt-collection__bar::-webkit-details-marker{ display:none; }
.nt-collection__bar:hover{ background:#ffffff06; }
.nt-collection__emoji{ font-size:30px; line-height:1; filter:drop-shadow(0 5px 12px rgba(0,0,0,.5)); transition:transform .25s var(--ease); }
.nt-collection__bar:hover .nt-collection__emoji{ transform:scale(1.12) rotate(-6deg); }
.nt-collection__txt{ display:flex; flex-direction:column; flex:1; min-width:0; }
.nt-collection__name{ font-family:'Michroma',sans-serif; font-size:clamp(15px,2.2vw,20px); color:var(--ink); }
.nt-collection__count{ font-family:'Space Mono',monospace; font-size:12px; color:var(--green); margin-top:5px; }
.nt-collection__chevron{ color:var(--ink-dim); transition:transform .22s var(--ease); }
.nt-collection[open] .nt-collection__chevron{ transform:rotate(180deg); }
.nt-collection[open] .nt-collection__bar{ border-bottom:1px solid var(--line); }
.nt-collection .nt-grid{ padding:22px 20px; }

/* ======================================================
   NATASTUBE — page de lecture (watch.php)
   ====================================================== */
.watch{ max-width:1320px; margin:0 auto; padding:clamp(18px,3vw,32px) clamp(16px,4vw,32px) 60px;
  display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:clamp(20px,3vw,34px); align-items:start; }
/* Le « stage » réserve la place du lecteur ; le lecteur peut s'en détacher en mini-lecteur. */
.watch__stage{ position:relative; aspect-ratio:16/9; }
.watch__player{ position:absolute; inset:0; border-radius:14px; overflow:hidden; background:#000; border:1px solid var(--line-2); }
.watch__player iframe{ width:100%; height:100%; border:0; display:block; }
.watch__player.is-mini{
  position:fixed; inset:auto 16px 16px auto; width:min(400px,62vw); height:auto; aspect-ratio:16/9;
  z-index:260; overflow:visible; box-shadow:0 26px 70px -18px #000; animation:mini-in .28s var(--ease);
}
.watch__player.is-mini iframe{ border-radius:12px; }
@keyframes mini-in{ from{ transform:translateY(16px); opacity:.4; } to{ transform:none; opacity:1; } }
.watch__mini-x{ display:none; position:absolute; top:-11px; left:-11px; width:26px; height:26px; border-radius:50%;
  background:var(--bg-2); border:1px solid var(--line-2); color:var(--ink-soft); cursor:pointer;
  font-size:12px; line-height:1; z-index:2; }
.watch__mini-x:hover{ color:var(--ink); border-color:var(--green); }
.watch__player.is-mini .watch__mini-x{ display:grid; place-items:center; }
/* Navigation d'épisode dans la série */
.watch__nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px;
  font-family:'Space Mono',monospace; font-size:12px; }
.watch__nav-btn{ display:inline-flex; align-items:center; gap:8px; color:var(--ink-soft);
  border:1px solid var(--line-2); border-radius:999px; padding:8px 15px; max-width:44%; transition:.2s var(--ease); }
.watch__nav-t{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.watch__nav-btn:hover{ border-color:var(--green); color:var(--green); }
.watch__nav-coll{ color:var(--green); font-size:11px; }
/* Réactions parodiques : pilule segmentée façon YouTube */
.watch__reacts{ display:inline-flex; align-items:stretch; background:var(--panel);
  border:1px solid var(--line-2); border-radius:999px; }
.wr{ position:relative; display:inline-flex; align-items:center; gap:7px; padding:8px 14px; background:none; border:none;
  cursor:pointer; font-family:'Space Mono',monospace; font-size:12px; color:var(--ink-soft); transition:.18s var(--ease); }
.wr:first-child{ border-radius:999px 0 0 999px; }
.wr:last-child{ border-radius:0 999px 999px 0; }
.wr + .wr{ border-left:1px solid var(--line-2); }
.wr:hover{ background:#ffffff0d; color:var(--ink); }
.wr__ic{ font-size:15px; line-height:1; display:inline-block; }
.wr.is-on{ background:var(--green); color:var(--bg); }
.wr--dead.is-on{ background:#ff3b5c; color:#fff; }
.wr.pop .wr__ic{ animation:wr-pop .35s var(--ease); }
@keyframes wr-pop{ 40%{ transform:scale(1.5) rotate(-10deg); } }
/* Infobulles des réactions : « Bravo Guillaume » / « Je te hais, Natas » */
.wr[data-tip]::after{
  content:attr(data-tip); position:absolute; bottom:calc(100% + 10px); left:50%; z-index:6;
  transform:translate(-50%,4px); white-space:nowrap;
  font-family:'Space Mono',monospace; font-size:10.5px; color:var(--ink);
  background:rgba(8,9,10,.95); border:1px solid var(--green); border-radius:7px; padding:5px 10px;
  box-shadow:0 8px 22px -8px #000; opacity:0; pointer-events:none; transition:.16s var(--ease); }
.wr--dead[data-tip]::after{ border-color:#ff5c5c; }
.wr[data-tip]:hover::after{ opacity:1; transform:translate(-50%,0); }
/* Survol : le pouce jubile, la tête de mort cliquette */
.wr[data-r="like"]:hover .wr__ic{ animation:thumb-cheer .55s var(--ease); }
.wr--dead:hover .wr__ic{ animation:skull-rattle .45s var(--ease); }
@keyframes thumb-cheer{ 30%{ transform:rotate(-18deg) scale(1.3) translateY(-2px); } 60%{ transform:rotate(10deg) scale(1.15); } }
@keyframes skull-rattle{ 20%,60%{ transform:translateX(-2px) rotate(-9deg); } 40%,80%{ transform:translateX(2px) rotate(9deg); } }
/* Clic 👍 : feu d'artifice de pouces */
.wr-frag{ position:fixed; left:0; top:0; z-index:450; pointer-events:none; font-size:18px;
  animation:wr-frag .95s cubic-bezier(.1,.7,.3,1) forwards; }
@keyframes wr-frag{
  from{ transform:translate(var(--x),var(--y)) translate(-50%,-50%) rotate(0) scale(.7); opacity:1; }
  to  { transform:translate(calc(var(--x) + var(--dx)), calc(var(--y) + var(--dy))) translate(-50%,-50%) rotate(var(--rot)) scale(1.3); opacity:0; } }
/* Clic 💀 : elle grossit, vire au rouge, puis disparaît */
.wr-doom{ position:fixed; left:0; top:0; z-index:450; pointer-events:none; font-size:44px;
  filter:grayscale(1) sepia(1) saturate(26) hue-rotate(-46deg) brightness(.95);
  animation:wr-doom 1.05s var(--ease) forwards; }
@keyframes wr-doom{
  from{ transform:translate(var(--x),var(--y)) translate(-50%,-50%) scale(.5) rotate(-6deg); opacity:1; }
  55% { opacity:1; }
  to  { transform:translate(var(--x),var(--y)) translate(-50%,-50%) scale(7) rotate(6deg); opacity:0; } }
/* En-tête « À suivre » + interrupteur lecture auto */
.wnext__head{ display:flex; align-items:center; justify-content:flex-end; gap:10px; }
.wnext__auto{ display:inline-flex; align-items:center; gap:7px; font-family:'Space Mono',monospace;
  font-size:11px; color:var(--ink-dim); cursor:pointer; white-space:nowrap; }
.wnext__auto input{ accent-color:var(--green); width:14px; height:14px; }
.watch__title{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:clamp(17px,2.4vw,23px); line-height:1.35; margin-top:16px; }
.watch__row{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:14px; }
.watch__chan{ display:flex; align-items:center; gap:14px; min-width:0; }
.watch__chan .nt-card__ava{ width:42px; height:42px; }
.watch__chan-link{ display:flex; align-items:center; gap:12px; min-width:0; }
a.watch__chan-link:hover .watch__chan-name{ color:var(--green); }
a.watch__chan-link:hover .nt-card__ava{ border-color:var(--green); }
.watch__chan-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.watch__chan-name{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:15px; color:var(--ink); transition:color .18s var(--ease); }
/* Bouton « S'abonner » : la pilule blanche de YouTube (thème sombre), telle quelle — c'est la parodie */
.watch__sub{ flex:none; font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:13.5px;
  background:#f1f1f1; color:#0f0f0f; border-radius:999px; padding:9px 17px; transition:.18s var(--ease); }
.watch__sub:hover{ background:#fff; transform:translateY(-1px); box-shadow:0 8px 26px -10px rgba(255,255,255,.35); }
.watch__chan-subs{ font-family:'Space Mono',monospace; font-size:11.5px; color:var(--ink-dim); }
.watch__actions{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.watch__role{ position:relative; font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.06em; text-transform:uppercase; font-weight:700;
  color:var(--bg); background:var(--green); padding:7px 13px; border-radius:999px; }
.watch__role[data-tip]{ cursor:help; }
.watch__role[data-tip]::after{
  content:attr(data-tip); position:absolute; right:0; top:calc(100% + 7px); z-index:5;
  white-space:nowrap; font-size:10px; letter-spacing:.04em; text-transform:none; font-weight:400;
  color:var(--ink); background:rgba(8,9,10,.94); border:1px solid var(--green);
  border-radius:7px; padding:5px 9px; box-shadow:0 8px 22px -8px #000;
  opacity:0; transform:translateY(-4px); pointer-events:none; transition:.16s var(--ease); }
.watch__role[data-tip]:hover::after, .watch__role[data-tip]:focus::after{ opacity:1; transform:translateY(0); }
.watch__desc{ margin-top:18px; background:var(--panel); border:1px solid var(--line-2); border-radius:14px;
  padding:16px 18px; font-size:14px; line-height:1.7; color:var(--ink-soft); }
/* Première ligne de l'encadré : « 810 k vues  il y a 11 jours » en gras, comme YouTube */
.watch__stats{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14px; color:var(--ink);
  margin-bottom:6px; white-space:pre-wrap; }
.watch__desc.is-clamped .watch__desc-txt{ max-height:170px; overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 60%,transparent);
          mask-image:linear-gradient(#000 60%,transparent); }
.watch__desc-txt a{ color:var(--green); }
.watch__coll{ display:inline-block; font-family:'Space Mono',monospace; font-size:11.5px; color:var(--green); margin-bottom:8px; }
.watch__note{ font-style:italic; color:var(--ink-dim); margin-bottom:8px; }
.watch__more{ display:block; margin-top:8px; font-family:'Space Mono',monospace; font-size:12px; font-weight:700;
  color:var(--ink); background:none; border:none; cursor:pointer; }
.watch__more:hover{ color:var(--green); }
/* Colonne « À suivre » */
.wnext{ display:flex; flex-direction:column; gap:12px; }
.wnext__item{ display:flex; gap:10px; border-radius:12px; padding:4px; margin:-4px; transition:background .15s var(--ease); }
.wnext__item:hover{ background:#ffffff08; }
.wnext__thumb{ position:relative; flex:none; width:168px; aspect-ratio:16/9; border-radius:9px; overflow:hidden;
  background:var(--bg-2); border:1px solid var(--line-2); }
.wnext__thumb img{ width:100%; height:100%; object-fit:cover; }
.wnext__dur{ position:absolute; bottom:5px; right:5px; font-family:'Space Mono',monospace; font-size:10px; font-weight:700;
  color:#fff; background:rgba(0,0,0,.82); padding:1px 4px; border-radius:4px; }
.wnext__txt{ display:flex; flex-direction:column; gap:3px; min-width:0; padding-top:2px; }
.wnext__title{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:13.5px; line-height:1.35; color:var(--ink);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.wnext__item:hover .wnext__title{ color:var(--green); }
.wnext__chan, .wnext__meta{ font-family:'Space Mono',monospace; font-size:11px; color:var(--ink-dim); }
.wnext__coll{ font-family:'Space Mono',monospace; font-size:10.5px; color:var(--green); }
.wnext__all{ margin-top:6px; font-family:'Space Mono',monospace; font-size:12px; color:var(--ink-soft);
  border:1px solid var(--line-2); border-radius:999px; padding:9px 16px; text-align:center; transition:.2s var(--ease); }
.wnext__all:hover{ border-color:var(--green); color:var(--green); }
@media (max-width:1020px){
  .watch{ grid-template-columns:1fr; }
  .wnext{ margin-top:6px; }
}

/* --- Badge rôle : détail (rôle précis) au survol de la famille --- */
.nt-card__role[data-tip], .vid__role[data-tip]{ cursor:help; }
.nt-card__role[data-tip]::after, .vid__role[data-tip]::after{
  content:attr(data-tip); position:absolute; left:0; top:calc(100% + 7px); z-index:5;
  white-space:nowrap; font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.04em;
  text-transform:none; color:var(--ink); background:rgba(8,9,10,.94); border:1px solid var(--green);
  border-radius:7px; padding:5px 9px; box-shadow:0 8px 22px -8px #000;
  opacity:0; transform:translateY(-4px); pointer-events:none; transition:.16s var(--ease); }
.nt-card__role[data-tip]:hover::after, .nt-card__role[data-tip]:focus::after,
.vid__role[data-tip]:hover::after, .vid__role[data-tip]:focus::after{ opacity:1; transform:translateY(0); }

/* ======================================================
   COMMUNITY MANAGER — « Le Bulletin de la Commu »
   (rubrique accueil 3a + étiquette de menu 3b, design dédié)
   ====================================================== */
/* Étiquette papier collée sur le menu sombre */
.cm-chip{ display:inline-flex; align-items:center; gap:7px; background:#f2ecdd; color:#221d14;
  font-family:'Courier Prime','Space Mono',monospace; font-size:11.5px; font-weight:700; letter-spacing:.06em;
  padding:6px 11px; border:1px solid #221d14; box-shadow:2px 2px 0 rgba(0,0,0,.55);
  transform:rotate(-2deg); transition:.18s var(--ease); white-space:nowrap; }
.cm-chip:hover{ transform:rotate(0deg); box-shadow:3px 3px 0 rgba(0,0,0,.65); }
.cm-chip__dot{ width:7px; height:7px; border-radius:99px; background:#1c7a3e; display:inline-block; flex:none; }
.cm-eq{ display:inline-flex; align-items:flex-end; gap:2px; height:10px; flex:none; }
.cm-eq i{ width:2.5px; background:#221d14; display:inline-block; transform-origin:bottom; }
.cm-eq i:nth-child(1){ height:5px; } .cm-eq i:nth-child(2){ height:10px; }
.cm-eq i:nth-child(3){ height:7px; } .cm-eq i:nth-child(4){ height:4px; }
.cm-chip:hover .cm-eq i{ animation:cmEq .8s ease-in-out infinite; }
.cm-chip:hover .cm-eq i:nth-child(2){ animation-delay:.12s; }
.cm-chip:hover .cm-eq i:nth-child(3){ animation-delay:.24s; }
.cm-chip:hover .cm-eq i:nth-child(4){ animation-delay:.36s; }
@keyframes cmEq{ 0%,100%{ transform:scaleY(.35); } 50%{ transform:scaleY(1); } }
@media (max-width:900px){ .cm-chip{ display:none; } }

/* Rubrique accueil : fanzine épinglé sur le site sombre */
.cmx{ background:radial-gradient(900px 460px at 72% 40%, #1c1c20, #141416); }
.cmx__grid{ display:grid; grid-template-columns:1fr 470px; gap:56px; align-items:center;
  padding-top:clamp(40px,6vw,64px); padding-bottom:clamp(44px,6vw,68px); }
@media (max-width:980px){ .cmx__grid{ grid-template-columns:1fr; gap:40px; } }
.cmx__kicker{ display:flex; align-items:center; gap:9px; font-family:'Courier Prime','Space Mono',monospace;
  font-size:12px; letter-spacing:.08em; color:#40d971; margin-bottom:16px; }
.cmx__dot{ width:7px; height:7px; border-radius:99px; background:#40d971; flex:none; }
.cmx__title{ font-family:'Archivo','Space Grotesk',sans-serif; font-weight:900; font-size:clamp(34px,5.4vw,54px);
  line-height:1.02; text-transform:uppercase; color:#f2efe8; letter-spacing:-.01em; }
.cmx__para{ font-size:16px; line-height:1.65; color:#c9c5bb; max-width:46ch; margin:16px 0 22px; }
.cmx__ctas{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.cmx__main{ display:inline-flex; align-items:center; gap:8px; background:#40d971; color:#0c130e;
  font-family:'Archivo','Space Grotesk',sans-serif; font-weight:900; font-size:14.5px; padding:14px 24px;
  border-radius:4px; transition:.15s var(--ease); }
.cmx__main:hover{ background:#f2efe8; }
.cmx__sec{ font-family:'Courier Prime','Space Mono',monospace; font-size:12px; color:#c9c5bb;
  border:1px solid rgba(242,239,232,.35); border-radius:4px; padding:12px 16px; transition:.15s var(--ease); }
.cmx__sec:hover{ border-color:#40d971; color:#40d971; }
.cmx__micro{ font-family:'Courier Prime','Space Mono',monospace; font-size:11px; color:#7c776f; margin-top:14px; }
/* Mini-fanzine papier */
.cmx__zine{ position:relative; display:block; justify-self:center; width:min(100%,380px); }
.cmx__back{ position:absolute; inset:10px -8px -10px 8px; background:#e6dfc9; transform:rotate(2.5deg);
  box-shadow:0 24px 60px rgba(0,0,0,.5); }
.cmx__paper{ position:relative; display:block; background:#f2ecdd; color:#221d14; padding:20px 22px 22px;
  transform:rotate(-3deg); box-shadow:0 18px 50px rgba(0,0,0,.45); transition:transform .25s var(--ease); }
.cmx__zine:hover .cmx__paper{ transform:rotate(-1.2deg) translateY(-4px); }
.cmx__tape{ position:absolute; top:-13px; left:50%; transform:translateX(-50%) rotate(2deg);
  width:96px; height:26px; background:rgba(242,236,221,.55); border:1px solid rgba(34,29,20,.12); }
.cmx__meta{ display:flex; justify-content:space-between; gap:8px; font-family:'Courier Prime','Space Mono',monospace;
  font-size:10px; letter-spacing:.1em; color:#5c5343; margin-bottom:10px; }
.cmx__mast{ display:block; font-family:'Archivo','Space Grotesk',sans-serif; font-weight:900; font-size:34px;
  line-height:.96; text-transform:uppercase; border-top:4px solid #221d14; border-bottom:4px solid #221d14;
  padding:9px 0 11px; margin-bottom:14px; }
.cmx__fresh{ display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.cmx__fresh img{ width:78px; height:78px; object-fit:cover; filter:grayscale(1) contrast(1.12);
  border:1px solid rgba(34,29,20,.3); flex:none; }
.cmx__fresh-txt{ min-width:0; font-size:14px; line-height:1.4; }
.cmx__fresh-txt b{ font-family:'Archivo','Space Grotesk',sans-serif; font-weight:900; }
.cmx__flabel{ display:block; font-family:'Courier Prime','Space Mono',monospace; font-size:10px; font-weight:700;
  letter-spacing:.1em; color:#1c7a3e; }
.cmx__facc{ display:block; font-family:'Courier Prime','Space Mono',monospace; font-size:11px; color:#3d362a; }
.cmx__som{ display:block; font-family:'Courier Prime','Space Mono',monospace; font-size:11px; line-height:1.6;
  color:#5c5343; border-top:1px solid rgba(34,29,20,.25); padding-top:10px; margin-bottom:14px; }
.cmx__stamp{ display:inline-block; border:3px solid #1c7a3e; color:#1c7a3e; border-radius:6px; padding:6px 13px;
  transform:rotate(-6deg); font-family:'Archivo','Space Grotesk',sans-serif; font-weight:900; letter-spacing:.08em; font-size:12.5px; }
.cmx__stamp small{ display:block; font-family:'Courier Prime','Space Mono',monospace; font-weight:400; font-size:9px; margin-top:1px; }

/* Bulletin intégré à la section Podcasts : panneau arrondi + cartes des autres podcasts dessous */
.cmx--panel{ border-radius:24px; border:1px solid var(--line-2); overflow:hidden;
  background:radial-gradient(900px 460px at 72% 40%, #1c1c20, #141416); }
.cmx--panel .cmx__grid{ padding:clamp(30px,5vw,56px) clamp(20px,4.5vw,56px); }
.pod-side--row{ grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); margin-top:22px; }