/* Lead with Néty — site chrome partagé (bandeau, pied de page, base)
   Chargé par toutes les pages de ui_kits/website/ et ui_kits/lead_magnets/.
   Les tokens viennent de ../../styles.css — ne pas redéfinir de couleurs ici. */
*{box-sizing:border-box}
body{margin:0;font-family:var(--font-body);background:var(--lwn-creme);color:var(--lwn-ink)}
a{color:var(--lwn-terracotta-deep);text-decoration:none}
a:hover{color:var(--lwn-terracotta)}
.nav{position:sticky;top:0;z-index:40;padding:0;background:linear-gradient(160deg,#3D2438,#2A1826);box-shadow:0 2px 18px rgba(20,12,18,.28)}
.navin{max-width:1120px;margin:0 auto;width:100%;padding:20px 48px;display:flex;align-items:center;justify-content:space-between}
.nav .wm{display:flex;align-items:center;gap:12px;font-family:var(--font-editorial);font-weight:600;font-size:24px;color:var(--lwn-creme)}
.nav .wm .e{color:var(--lwn-or-bright);font-style:italic}
.nav .wm .with{font-style:italic;font-weight:500;opacity:.78}
.nav .menu{display:flex;align-items:center;gap:26px;font-family:var(--font-display);font-weight:600;font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.nav .menu>*{display:inline-flex;align-items:center;line-height:1}
.nav .menu a{color:rgba(245,237,225,.85)}
.nav .menu a:hover{color:var(--lwn-or-bright)}
.navsub{display:inline-flex;align-items:center;gap:7px;background:var(--lwn-terracotta-deep);color:#fff!important;padding:9px 18px;border-radius:var(--radius-pill);font-family:var(--font-display);font-weight:600;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;transition:filter var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.navsub:hover{filter:brightness(.93);color:#fff!important}
.navsub:active{transform:scale(.97)}
.navsub svg{width:14px;height:14px;fill:currentColor}
.foot{background:linear-gradient(160deg,#3D2438,#2A1826);color:rgba(245,237,225,.6);padding:0;text-align:left;font-family:var(--font-body);font-size:13px;letter-spacing:0;text-transform:none}
.footin{max-width:1120px;margin:0 auto;padding:22px 48px;display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap}
.fbrand{font-family:var(--font-display);font-weight:600;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--lwn-or-bright);white-space:nowrap}
.fbrand span{color:rgba(245,237,225,.5)}
.fl{display:flex;gap:20px;flex-wrap:wrap;margin:0;font-family:var(--font-display);font-weight:600;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase}
.fl a{color:rgba(245,237,225,.72)}
.fl a:hover{color:var(--lwn-or-bright)}
.social{display:flex;gap:8px;margin:0}
.social a{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:rgba(245,237,225,.08);border:1px solid rgba(245,237,225,.16);transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.social a:hover{background:rgba(201,168,118,.2);border-color:var(--lwn-or)}
.social img{width:13px;height:13px}
.legal{border-top:1px solid rgba(245,237,225,.12);margin:0}
.legalin{max-width:1120px;margin:0 auto;padding:13px 48px;display:flex;gap:18px;flex-wrap:wrap;font-family:var(--font-display);font-weight:600;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.legal a{color:rgba(245,237,225,.45)}
.legal a:hover{color:var(--lwn-or-bright)}
.kick{font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--lwn-or-dark);display:flex;align-items:center;gap:10px}
.kick .b{width:24px;height:1.5px;background:currentColor;flex:none}
.kick.on-dark{color:var(--lwn-or-bright)}
.kick.on-dark .b{background:var(--lwn-or-bright)}

/* ---- Formulaires (contact, téléchargement) ---- */
.f-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.f-lbl{display:block;font-family:var(--font-display);font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--lwn-or-dark);margin:0 0 8px}
.f-lbl .opt{font-weight:500;letter-spacing:.06em;text-transform:none;color:var(--lwn-ink-45)}
.f-in,.f-sel,.f-ta{width:100%;font-family:var(--font-body);font-size:15px;padding:13px 18px;border:1.5px solid var(--lwn-creme-shade);background:var(--lwn-creme);color:var(--lwn-ink);outline:none;margin-bottom:18px;border-radius:var(--radius-pill);transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.f-ta{border-radius:var(--radius-md);min-height:130px;resize:vertical;line-height:1.55}
.f-in:focus,.f-sel:focus,.f-ta:focus{border-color:var(--lwn-or);box-shadow:0 0 0 3px rgba(201,168,118,.26)}
.f-in::placeholder,.f-ta::placeholder{color:var(--lwn-ink-45)}
.f-optin{display:flex;gap:12px;align-items:flex-start;margin:4px 0 20px;cursor:pointer}
.f-optin input{appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;margin:1px 0 0;border:1.5px solid var(--lwn-creme-shade);border-radius:5px;background:var(--lwn-creme);cursor:pointer;position:relative;transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.f-optin input:checked{background:var(--lwn-aubergine);border-color:var(--lwn-aubergine)}
.f-optin input:checked::after{content:"";position:absolute;left:5.5px;top:2px;width:6px;height:11px;border:solid var(--lwn-creme);border-width:0 2px 2px 0;transform:rotate(42deg)}
.f-optin input:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(201,168,118,.32)}
.f-optin span{font-size:13.5px;line-height:1.5;color:var(--lwn-ink-70)}
.f-optin a{font-weight:600}
.f-fine{font-size:12.5px;line-height:1.5;color:var(--lwn-ink-45);margin-top:12px;text-align:center}
/* variante sur fond aubergine */
.on-dark .f-lbl{color:var(--lwn-or-bright)}
.on-dark .f-lbl .opt{color:rgba(245,237,225,.5)}
.on-dark .f-in,.on-dark .f-sel,.on-dark .f-ta{background:rgba(245,237,225,.08);border-color:rgba(245,237,225,.24);color:var(--lwn-creme)}
.on-dark .f-in::placeholder,.on-dark .f-ta::placeholder{color:rgba(245,237,225,.45)}
.on-dark .f-sel option{color:var(--lwn-ink)}
.on-dark .f-optin input{background:rgba(245,237,225,.08);border-color:rgba(245,237,225,.3)}
.on-dark .f-optin input:checked{background:var(--lwn-or);border-color:var(--lwn-or)}
.on-dark .f-optin input:checked::after{border-color:var(--lwn-aubergine-deep)}
.on-dark .f-optin span{color:rgba(245,237,225,.78)}
.on-dark .f-fine{color:rgba(245,237,225,.55)}


/* ================== TABLETTE — 761 à 1080 px ==================
   Palier qui manquait : entre le mobile et la maquette 1120 px, les grilles
   à 3 et 5 colonnes devenaient des colonnes de 150 px illisibles. */
@media (min-width:761px) and (max-width:1080px){
  .navin,.footin,.legalin,section,.hero .in,.head .in,.news .in,.direct .in,.work .in,.wrap,.arch .in,.dl .in{padding-left:32px!important;padding-right:32px!important}
  .hero .in{grid-template-columns:1fr!important;gap:40px!important}
  .hero h1{font-size:50px}
  .hero .promise{max-width:44ch}
  .cover{max-width:420px}
  .pgrid{grid-template-columns:repeat(2,1fr)!important}
  .tgrid,.dgrid,.docs,.offers,.grid{grid-template-columns:repeat(2,1fr)!important}
  .ep,.feat,.split,.about .in,.news .in,.direct .in,.wrap:not(.grid){grid-template-columns:1fr!important;gap:34px!important}
  .about .ph{max-width:340px}
  h1,.htitle{font-size:44px}
  h2{font-size:34px}
  .iss{grid-template-columns:72px 1fr auto}
}

/* ================== MOBILE — on ne garde que l'essentiel ==================
   Bandeau : logo + une entrée + S'abonner. Pied de page : réseaux + légal.
   Les grilles passent en une colonne, les décors lourds disparaissent. */
@media (max-width:760px){
  /* pages en deux colonnes (épisodes, pages de contenu) : une seule colonne sur mobile */
  .wrap:not(.grid){grid-template-columns:1fr!important;gap:34px!important}
  /* --- bandeau --- */
  .navin{padding:14px 20px;gap:12px}
  .nav .wm{font-size:19px;gap:9px}
  .nav .wm img{height:26px!important}
  .nav .menu{gap:16px;font-size:11.5px}
  .nav .menu a:not(.navsub){display:none}
  .nav .menu a[href*="episodes"]{display:inline-flex}
  .navsub{padding:8px 14px;font-size:11.5px}

  /* --- rythme général --- */
  .wrap,.body,.rules,.dl .in,.arch .in,.proof section,.work .in,.direct .in,.hero .in,.head .in,.news .in,.footin,.legalin{padding-left:20px!important;padding-right:20px!important}
  .wrap,.body{padding-top:32px!important;padding-bottom:44px!important}
  section,.work .in,.head .in,.hero .in,.dl,.arch,.proof section{padding-top:44px!important;padding-bottom:48px!important}

  /* --- une seule colonne partout --- */
  .split,.grid,.pgrid,.dgrid,.docs,.tgrid,.offers,.ep,.feat,.hero .in,.head .in,.news .in,.direct .in,.wrap.grid,.f-row{grid-template-columns:1fr!important;display:grid!important;gap:22px!important}
  .f-row{gap:0!important} /* les champs ont déjà 18px de marge basse : même écart que les autres */
  .toc ol{columns:1}

  /* --- typo resserrée --- */
  h1,.htitle,.hero h1,.head h1{font-size:34px!important;line-height:1.06!important}
  h2,.feat h2{font-size:26px!important}
  .lede,.hsub,.hero .promise,.hero .sub,.head p,.work .lede{font-size:17px!important;max-width:none!important}
  .pull,.quote,.feat .fq{font-size:19px!important;padding-left:16px!important}
  .bio p,.pitch{font-size:16.5px!important}

  /* --- boutons pleine largeur, cible 44px --- */
  .ctas,.btns,.direct .btns{flex-direction:column;align-items:stretch}
  .btn,.b1,.b2,.of .go,.subbtn,.form button,.nf button,.dbar .all{width:100%;justify-content:center;min-height:48px}
  .nf,.form .nf,.eo .fm{flex-direction:column;align-items:stretch}
  .nf input,.eo input,.f-in,.f-sel,.f-ta{width:100%;min-height:48px}

  /* --- décors coûteux masqués --- */
  .head .pl,.work .pl,.big .pl,.wmplume,.hero .cover .cg{display:none}
  .hero .cover,.mock{aspect-ratio:1;padding:30px}
  .cover .cn{font-size:76px!important}
  .cover .ct,.mock .mq{font-size:15px!important}

  /* --- lecteur & médias --- */
  .player,.feat .im{min-height:0!important;aspect-ratio:16/9}
  .about .ph,.hportrait{height:auto;aspect-ratio:4/5}

  /* --- pied de page --- */
  .footin{flex-direction:column;align-items:flex-start;gap:16px;padding-top:26px;padding-bottom:22px}
  .fbrand{white-space:normal;font-size:10.5px;line-height:1.5}
  .fbrand span{display:block;margin-top:3px}
  .fl{gap:14px 18px;font-size:11px}
  .legalin{gap:12px 14px;font-size:10px;padding-top:12px;padding-bottom:14px}
}
@media (max-width:420px){
  .nav .wm .with{display:none}
  .cover .cn{font-size:60px!important}
  h1,.htitle,.hero h1,.head h1{font-size:30px!important}
  .chips{gap:7px}
  .chip{font-size:10.5px;padding:8px 13px}
}

/* ---- Mouvement : apparition au scroll, filets tracés, survol des cartes ---- */
.rev{opacity:0;transform:translateY(16px);transition:opacity .62s var(--ease-out),transform .62s var(--ease-out)}
.rev.rev-on{opacity:1;transform:none}
/* filets or : se tracent de gauche à droite */
.hr,.rule,.kick .b,.sk .b{transform-origin:left center}
.hr.draw,.rule.draw{transform:scaleX(0);transition:transform .8s var(--ease-out)}
.hr.draw.rev-on,.rule.draw.rev-on{transform:scaleX(1)}
/* cartes épisode : la photo respire, le numéro passe en terracotta */
.ep .im{overflow:hidden}
.ep .im img{transition:transform .55s var(--ease-out)}
.ep .num{transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.ep:hover .im img{transform:scale(1.035)}
.ep:hover .num{background:var(--lwn-terracotta-deep);color:#fff}
/* barre de progression de lecture, filet or en haut de page */
#readbar{position:fixed;top:0;left:0;height:2px;width:0;background:var(--lwn-or-bright);z-index:60;transition:width .12s linear;pointer-events:none}
/* header condensé au scroll */
.nav{transition:box-shadow var(--dur-med) var(--ease-out)}
.nav .navin{transition:padding var(--dur-med) var(--ease-out)}
.nav.small .navin{padding-top:11px;padding-bottom:11px}
.nav.small{box-shadow:0 2px 22px rgba(20,12,18,.4)}
@media (max-width:760px){.nav.small .navin{padding-top:9px;padding-bottom:9px}}
@media (prefers-reduced-motion:reduce){
  .rev{opacity:1;transform:none;transition:none}
  .hr.draw,.rule.draw{transform:none;transition:none}
  .ep .im img,.ep:hover .im img{transition:none;transform:none}
  #readbar{display:none}
}

/* ---- Recherche & résultats (page épisodes) ---- */
.epsearch{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px}
.epsearch input{font-family:var(--font-body);font-size:14.5px;padding:11px 20px;border-radius:var(--radius-pill);border:1px solid rgba(245,237,225,.26);background:rgba(245,237,225,.07);color:var(--lwn-creme);outline:none;min-width:280px;transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}
.epsearch input::placeholder{color:rgba(245,237,225,.5)}
.epsearch input:focus{border-color:var(--lwn-or);background:rgba(245,237,225,.11)}
.epsearch .cnt{font-family:var(--font-display);font-weight:600;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--lwn-or-bright)}
.epempty{font-family:var(--font-editorial);font-style:italic;font-size:21px;line-height:1.45;color:var(--lwn-ink-70);text-align:center;padding:54px 20px;border:1px dashed var(--lwn-creme-shade);border-radius:16px}
.ep[hidden]{display:none}
/* ---- Bandeau cookies ---- */
.ckbar{position:fixed;left:22px;right:22px;bottom:22px;max-width:620px;margin:0 auto;z-index:70;background:linear-gradient(158deg,#3D2438,#2A1826);color:var(--lwn-creme);border-radius:16px;padding:22px 26px;box-shadow:0 14px 44px rgba(20,12,18,.44);display:flex;gap:20px;align-items:center;flex-wrap:wrap;opacity:0;transform:translateY(18px);transition:opacity .38s var(--ease-out),transform .38s var(--ease-out)}
.ckbar.rev-on{opacity:1;transform:none}
.ckbar p{margin:0;flex:1 1 300px;font-size:14px;line-height:1.5;color:rgba(245,237,225,.82)}
.ckb{display:flex;gap:10px;align-items:center;flex:none}
.ckb button{font-family:var(--font-display);font-weight:600;font-size:13px;padding:10px 20px;border-radius:var(--radius-pill);border:1px solid rgba(245,237,225,.3);background:none;color:var(--lwn-creme);cursor:pointer;transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.ckb button:hover{border-color:var(--lwn-or);color:var(--lwn-or-bright)}
.ckb .ckok{background:var(--lwn-or);border-color:var(--lwn-or);color:var(--lwn-aubergine-deep)}
.ckb .ckok:hover{filter:brightness(1.06);color:var(--lwn-aubergine-deep)}
.ckb a{font-size:13px;color:rgba(245,237,225,.62);text-decoration:underline;text-underline-offset:3px}
.ckb a:hover{color:var(--lwn-or-bright)}
@media (max-width:640px){.ckbar{padding:18px 20px;gap:14px}.ckb{width:100%}.ckb button{flex:1}}
@media (prefers-reduced-motion:reduce){.ckbar{transition:none;opacity:1;transform:none}}

a.wm{transition:opacity var(--dur-fast) var(--ease-out)}
a.wm:hover{opacity:.82}
a.wm:focus-visible{outline:none;border-radius:6px;box-shadow:0 0 0 3px var(--lwn-or)}

/* Éléments masqués (ex. épisodes pas encore publiés) : l’attribut hidden l’emporte toujours */
[hidden]{display:none !important}

/* ===== Accessibilité (audit du 27/09/2026) ===== */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:100;padding:12px 18px;background:var(--lwn-creme);color:var(--lwn-aubergine);font-family:var(--font-display);font-weight:600;border-radius:0 0 10px 0}
.skip:focus{left:0}
main:focus{outline:none}
/* contour de focus visible : aubergine sur fond clair, crème sur fond sombre */
:focus-visible{outline:3px solid var(--lwn-aubergine);outline-offset:3px;border-radius:4px}
.nav :focus-visible,.foot :focus-visible,.hero :focus-visible,.about :focus-visible,.head :focus-visible,.subcard :focus-visible,.pcard.main:focus-visible,.cover :focus-visible{outline-color:var(--lwn-creme)}
/* zones cliquables d'au moins 44 px */
.foot .fl a,.legal a,.logos .lg,.plat a,.legalnav a{min-height:44px;display:inline-flex;align-items:center}

/* bouton Menu (mobile) */
.menu-btn{display:none;align-items:center;gap:8px;min-height:40px;padding:8px 14px;border-radius:var(--radius-pill);border:1px solid rgba(245,237,225,.35);background:none;color:var(--lwn-creme);font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;margin-left:auto;margin-right:10px}
.menu-btn::before{content:"";width:14px;height:10px;background:linear-gradient(currentColor,currentColor) 0 0/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 0 4px/100% 2px no-repeat,linear-gradient(currentColor,currentColor) 0 8px/100% 2px no-repeat}
.nav.open .menu-btn::before{background:none;border:0;content:"✕";width:auto;height:auto;font-size:12px}
@media (max-width:760px){
  .menu-btn{display:inline-flex}
  .nav .menu a[href*="episodes"]{display:none}
  .nav{position:sticky}
  .nav.open .menu{position:absolute;top:100%;left:0;right:0;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:6px 20px 18px;background:linear-gradient(160deg,#3D2438,#2A1826);box-shadow:0 14px 28px rgba(20,12,18,.4);font-size:13px}
  .nav.open .menu a,.nav.open .menu a[href*="episodes"]{display:flex;min-height:48px;align-items:center;border-bottom:1px solid rgba(245,237,225,.12)}
  .nav.open .menu a.navsub{justify-content:center;border:0;margin-top:14px;min-height:46px}
}

/* formulaires en attente de l'outil d'e-mailing */
.bientot{border:1px solid currentColor;border-color:rgba(42,24,38,.18);border-radius:16px;padding:18px 20px;max-width:460px;background:rgba(255,255,255,.55)}
.bientot p{margin:0 0 14px;font-family:var(--font-body);font-style:normal;font-size:15px;line-height:1.5;color:var(--lwn-ink)}
.bientot .cta-app{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:12px 22px;border-radius:var(--radius-pill);background:var(--lwn-aubergine);color:var(--lwn-creme);font-family:var(--font-display);font-weight:600;font-size:15px;width:100%}
.bientot .cta-app:hover{background:var(--lwn-aubergine-deep);color:var(--lwn-creme)}
.on-dark .bientot,.bientot.on-dark{border-color:rgba(245,237,225,.25);background:rgba(245,237,225,.07)}
.on-dark .bientot p,.bientot.on-dark p{color:var(--lwn-creme)}
.on-dark .bientot .cta-app,.bientot.on-dark .cta-app{background:var(--lwn-terracotta-deep);color:#fff}
/* liens dans un paragraphe : soulignés, pas seulement colorés */
main p a:not([class]),main li a:not([class]),.f-fine a,.fine a{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
/* en-tête mobile : logo, Menu et S'abonner tiennent dans 320 px */
@media (max-width:760px){
  .navin{gap:8px}
  .menu-btn{padding:7px 11px;gap:6px;margin-right:0;font-size:11px}
  .nav .menu{gap:0}
  .nav .navsub{padding:8px 13px;font-size:11px;white-space:nowrap}
}
@media (max-width:360px){ .nav .navsub svg{display:none} }
/* focus : toujours un contour net, y compris là où un style local le retirait */
:focus-visible{outline:3px solid var(--lwn-aubergine)!important;outline-offset:3px!important}
.nav :focus-visible,.foot :focus-visible,.hero :focus-visible,.about :focus-visible,.head :focus-visible,.subcard :focus-visible,.pcard.main:focus-visible,.cover :focus-visible,.on-dark :focus-visible,.trailer :focus-visible{outline-color:var(--lwn-creme)!important}