/* 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 .wm .lead{letter-spacing:.05em;font-size:.92em}
.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:12px;line-height:1.5}
  .fbrand span{display:block;margin-top:3px}
  .fl{gap:14px 18px;font-size:12px}
  .legalin{gap:12px 14px;font-size:12px;padding-top:12px;padding-bottom:14px}
}
@media (max-width:420px){
  /* logo complet « Lead with Néty », un peu plus petit pour tenir à côté de Menu et S'abonner */
  .nav .wm{font-size:17px;gap:6px;letter-spacing:-.01em}
  .nav .wm img{height:22px!important}
  .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{position:relative;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}
  /* très petits écrans : le bouton Menu garde son icône et son nom accessible, sans le mot visible */
  .menu-btn{font-size:0;gap:0;padding:9px 11px}
  .nav .wm{font-size:16px}
}
/* 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}
/* navigation ordinateur : zones cliquables de 44 px de haut */
@media (min-width:761px){ .nav .menu a:not(.navsub){min-height:44px;padding:0 4px} }

/* ===== Formulaires de collecte (affichés quand /api/etat les déclare actifs) ===== */
.lwn-form{max-width:480px;position:relative;text-align:left}
.lwn-form .lf-lbl{display:block;font-family:var(--font-display);font-weight:600;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--lwn-aubergine);margin:0 0 6px}
.lwn-form .lf-opt{font-weight:500;letter-spacing:.04em;text-transform:none;opacity:.8}
.lwn-form .lf-in{display:block;width:100%;min-height:48px;padding:12px 18px;margin:0 0 14px;border:1.5px solid rgba(42,24,38,.3);border-radius:var(--radius-pill);background:#fff;color:var(--lwn-ink);font-family:var(--font-body);font-size:16px}
.lwn-form .lf-ta{border-radius:14px;min-height:140px;resize:vertical;line-height:1.55}
.lwn-form .lf-in:focus{border-color:var(--lwn-aubergine)}
.lwn-form .lf-row{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.lwn-form .lf-check{display:flex;gap:10px;align-items:flex-start;margin:2px 0 16px;font-size:14px;line-height:1.5;color:var(--lwn-ink);cursor:pointer}
.lwn-form .lf-check input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--lwn-aubergine)}
.lwn-form .lf-check a{text-decoration:underline}
.lwn-form .lf-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:50px;padding:12px 22px;border:0;border-radius:var(--radius-pill);background:var(--lwn-aubergine);color:var(--lwn-creme);font-family:var(--font-display);font-weight:600;font-size:15px;cursor:pointer}
.lwn-form .lf-btn:hover{background:var(--lwn-aubergine-deep)}
.lwn-form .lf-btn[disabled]{opacity:.6;cursor:wait}
/* attente pendant l'enregistrement : roue qui tourne + reflet qui passe sur le bouton */
.lwn-form .lf-btn.is-loading{opacity:1;gap:10px;position:relative;overflow:hidden}
.lwn-form .lf-btn.is-loading::before{content:"";width:18px;height:18px;flex:none;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:lf-tourne .8s linear infinite}
.lwn-form .lf-btn.is-loading::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(245,237,225,.18) 50%,transparent 70%);transform:translateX(-100%);animation:lf-reflet 1.6s ease-in-out infinite}
@keyframes lf-tourne{to{transform:rotate(360deg)}}
@keyframes lf-reflet{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){
  .lwn-form .lf-btn.is-loading::before{animation:none;border-right-color:currentColor;opacity:.6}
  .lwn-form .lf-btn.is-loading::after{animation:none;display:none}
}
.lwn-form .lf-fine{margin:0 0 14px;font-size:12.5px;line-height:1.5;color:var(--lwn-ink-70);font-style:normal;font-family:var(--font-body)}
.lwn-form .f-msg{margin:12px 0 0;font-size:15px;font-weight:600;line-height:1.45;font-family:var(--font-body);font-style:normal}
.lwn-form .f-msg:empty{display:none}
.lwn-form .f-msg.err{color:#8A2D16}
.lwn-form .f-msg.ok-msg{color:var(--lwn-ink)}
/* Carte de confirmation après l'envoi */
.lwn-form .f-msg.ok-msg{display:block;margin:0;padding:26px 26px 22px;border-radius:18px;background:rgba(255,255,255,.72);border:1px solid rgba(42,24,38,.12);box-shadow:0 10px 30px rgba(42,24,38,.10);font-weight:400;animation:merci-entre .5s cubic-bezier(.2,.7,.2,1) both;outline:none}
.lwn-form .merci-ic{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:var(--lwn-aubergine);color:var(--lwn-or-bright);margin-bottom:14px;animation:merci-pop .45s .15s cubic-bezier(.3,1.6,.5,1) both}
.lwn-form .merci-ic path{stroke-dasharray:24;stroke-dashoffset:24;animation:merci-trace .45s .35s ease-out forwards}
.lwn-form .merci-t{margin:0 0 6px;max-width:none;font-family:var(--font-editorial);font-style:normal;font-weight:600;font-size:26px;line-height:1.15;color:var(--lwn-aubergine-deep)}
.lwn-form .merci-p{margin:0;max-width:none;font-family:var(--font-body);font-style:normal;font-size:15.5px;line-height:1.55;color:var(--lwn-ink-70,rgba(36,24,32,.78))}
.lwn-form .merci-sig{margin:10px 0 14px;max-width:none;font-style:normal;font-family:var(--font-script);font-size:26px;line-height:1;color:var(--lwn-terracotta-dark)}
.lwn-form .merci-lien{display:inline-block;font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--lwn-aubergine);text-decoration:underline;text-underline-offset:3px}
.lwn-form .merci-lien:hover{color:var(--lwn-terracotta-dark)}
.lwn-form.on-dark .f-msg.ok-msg{background:rgba(245,237,225,.08);border-color:rgba(245,237,225,.22);box-shadow:none}
.lwn-form.on-dark .merci-ic{background:var(--lwn-or-bright);color:var(--lwn-aubergine-deep)}
.lwn-form.on-dark .merci-t{color:var(--lwn-creme)}
.lwn-form.on-dark .merci-p{color:rgba(245,237,225,.85)}
.lwn-form.on-dark .merci-sig,.lwn-form.on-dark .merci-lien{color:var(--lwn-or-bright)}
@keyframes merci-entre{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes merci-pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes merci-trace{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .lwn-form .f-msg.ok-msg,.lwn-form .merci-ic{animation:none}
  .lwn-form .merci-ic path{animation:none;stroke-dashoffset:0}
}
.lwn-form .hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.lwn-form.on-dark .lf-lbl,.lwn-form.on-dark .lf-check,.lwn-form.on-dark .lf-fine{color:var(--lwn-creme)}
.lwn-form.on-dark .lf-in{background:rgba(245,237,225,.08);border-color:rgba(245,237,225,.35);color:var(--lwn-creme)}
.lwn-form.on-dark .lf-in option{color:var(--lwn-ink)}
.lwn-form.on-dark .lf-btn{background:var(--lwn-terracotta-deep);color:#fff}
.lwn-form.on-dark .lf-btn:hover{background:var(--lwn-terracotta-dark)}
.lwn-form.on-dark .f-msg.err{color:#FFC2AE}
.lwn-form.on-dark .f-msg.ok-msg{color:#CFEBD3}
.lwn-form.on-dark .lf-check input{accent-color:var(--lwn-or)}
@media (max-width:520px){.lwn-form .lf-row{grid-template-columns:1fr}}

/* ===== Pied de page compact et aligné (cibles ≥ 32 px, au-dessus des 24 px WCAG 2.2) ===== */
.foot .fl a,.legal a{min-height:32px}
.social a{width:34px;height:34px}
@media (max-width:760px){
  .footin{gap:12px!important;padding-top:22px!important;padding-bottom:16px!important}
  .fbrand{font-size:12px}
  .fbrand span{display:inline;margin:0}
  .fl{display:grid!important;grid-template-columns:repeat(3,auto);justify-content:start;gap:0 22px!important;width:100%}
  .fl a{min-height:34px}
  .social{gap:10px;margin-top:2px}
  .legalin{display:grid!important;grid-template-columns:repeat(3,auto);justify-content:start;gap:0 18px!important;padding-top:8px!important;padding-bottom:12px!important}
  .legal a{min-height:32px}
  .legal a[href*="accessibilite"]{grid-column:span 2}
}
@media (max-width:360px){ .fl,.legalin{grid-template-columns:repeat(2,auto)} .legal a[href*="accessibilite"]{grid-column:span 2} }

/* ===== Lecteur « onde sonore » (bande-annonce) ===== */
audio.onde-natif{display:none}
.onde{display:flex;align-items:center;gap:14px;padding:10px 16px 10px 10px;border-radius:var(--radius-pill);background:rgba(245,237,225,.06);border:1px solid rgba(245,237,225,.14)}
.onde-bt{flex:none;display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;border:0;background:var(--lwn-or-bright);color:var(--lwn-aubergine-deep);cursor:pointer;transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.onde-bt:hover{transform:scale(1.06);box-shadow:0 0 0 6px rgba(217,183,126,.18)}
.onde-bt svg{width:20px;height:20px;fill:currentColor}
.onde-bt .i-pause,.onde.joue .onde-bt .i-play{display:none}
.onde.joue .onde-bt .i-pause{display:block}
.onde-wv{flex:1;min-width:0;height:40px;display:flex;align-items:center;gap:2px;cursor:pointer;touch-action:none;border-radius:6px}
.onde-wv span{flex:1;min-width:2px;border-radius:2px;background:rgba(245,237,225,.28);transform-origin:center;transition:background-color .15s linear}
.onde-wv span.on{background:var(--lwn-or-bright)}
.onde.joue .onde-wv span{animation:onde-vibre .9s ease-in-out var(--d,0s) infinite alternate}
@keyframes onde-vibre{from{transform:scaleY(.72)}to{transform:scaleY(1.08)}}
.onde-tm{flex:none;min-width:78px;text-align:right;font-family:var(--font-display);font-weight:600;font-size:13px;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:rgba(245,237,225,.85)}
@media (max-width:420px){ .onde{gap:10px;padding-right:12px} .onde-tm{min-width:0;font-size:12px} .onde-wv span:nth-child(2n){display:none} }
@media (prefers-reduced-motion:reduce){ .onde.joue .onde-wv span{animation:none} .onde-bt{transition:none} }

/* <picture> (versions WebP) : aucune boîte propre, la mise en page reste celle de l'<img> */
picture{display:contents}

/* Épisode pas encore sorti : badge de date à la place du bouton lecture et de la durée */
.avant .pb,.avant .dur{display:none!important}
.sortie{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--radius-pill);background:rgba(36,24,32,.86);color:var(--lwn-creme);font-family:var(--font-display);font-weight:600;font-size:13px;letter-spacing:.03em;pointer-events:none}
.sortie .dot{width:8px;height:8px;border-radius:50%;background:var(--lwn-terracotta-bright,#E07A4F)}
@media (max-width:600px){.sortie{right:10px;bottom:10px;font-size:11.5px;padding:6px 11px}}

/* ===== Plateformes en une ligne d'icônes ===== */
.plat-ic{display:flex;flex-wrap:wrap;gap:10px}
.plat-ic a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--lwn-creme-shade);transition:transform var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
.plat-ic a:hover{background:var(--lwn-creme);transform:translateY(-2px)}
.plat-ic img{width:20px;height:20px}
/* ===== Accroche d'épisode + appel à voir l'épisode ===== */
.teaser{font-family:var(--font-editorial);font-style:italic;font-size:20px;line-height:1.5;color:var(--lwn-aubergine);margin:22px 0 18px}
.ep-cta{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin:24px 0 10px}
.ep-alt{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.ep-cta .ou{font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--lwn-ink-70)}
/* ===== Défi de la semaine : bloc mis en avant + Antisèche ===== */
.defi-card{position:relative;margin:26px 0 30px;padding:28px 30px 26px;border-radius:18px;background:linear-gradient(158deg,#3D2438,#2A1826);color:var(--lwn-creme);box-shadow:var(--shadow-md);overflow:hidden}
.defi-card::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(closest-side,rgba(217,183,126,.22),transparent)}
.defi-card .dk{font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--lwn-or-bright)}
.defi-card .dq{position:relative;font-family:var(--font-editorial);font-style:italic;font-weight:600;font-size:clamp(24px,3vw,32px);line-height:1.2;color:var(--lwn-creme);margin:12px 0 10px}
.defi-card .dt{font-size:15.5px;line-height:1.55;color:rgba(245,237,225,.85);margin:0 0 20px;max-width:46ch}
.defi-card .dbtn{position:relative;display:inline-flex;align-items:center;gap:10px;padding:14px 24px;border-radius:var(--radius-pill);background:var(--lwn-or-bright);color:var(--lwn-aubergine-deep);font-family:var(--font-display);font-weight:600;font-size:15.5px;box-shadow:0 8px 22px rgba(20,12,18,.35)}
.defi-card .dbtn:hover{background:var(--lwn-creme);color:var(--lwn-aubergine-deep)}
.defi-card .dbtn svg{width:19px;height:19px}
.defi-card .dn{margin-top:10px;font-size:12.5px;color:rgba(245,237,225,.7)}
@media (max-width:600px){.defi-card{padding:24px 20px}.defi-card .dbtn{width:100%;justify-content:center;padding:14px 16px;font-size:15px;white-space:nowrap}.ep-cta .btn{width:100%;justify-content:center}}

/* Défi en bandeau pleine largeur (accueil) : texte à gauche, téléchargement à droite */
.defi-card.wide{margin:40px 0 0}
@media (min-width:901px){.defi-card.wide{display:grid;grid-template-columns:1fr auto;gap:18px 48px;align-items:end;padding:34px 40px}.defi-card.wide .dc-act{text-align:left;min-width:260px}}

/* Formulaire de l'Antisèche dans le bandeau du défi */
.defi-card .as-form{position:relative;margin-top:6px;max-width:560px}
.defi-card.wide .as-form{grid-column:1/-1}
.defi-card .as-form .lf-fine{color:rgba(245,237,225,.72)}
.defi-card button.dbtn{border:0;cursor:pointer}

.defi-card .as-optin{background:rgba(217,183,126,.12);border:1px solid rgba(217,183,126,.35);border-radius:12px;padding:12px 14px}
.defi-card .as-optin b{color:var(--lwn-or-bright)}
.defi-card .lf-fine a{color:var(--lwn-or-bright);text-decoration:underline}

/* Voyant « enregistrement » du badge de sortie : lumière rouge qui respire, avec une onde autour */
.sortie .dot{position:relative;width:10px!important;height:10px!important;background:#E5483B;box-shadow:0 0 6px 1px rgba(229,72,59,.75);animation:rec-souffle 1.4s ease-in-out infinite}
.sortie .dot::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(229,72,59,.8);animation:rec-onde 1.4s ease-out infinite}
@keyframes rec-souffle{0%,100%{opacity:1;box-shadow:0 0 8px 2px rgba(229,72,59,.85)}50%{opacity:.35;box-shadow:0 0 2px 0 rgba(229,72,59,.3)}}
@keyframes rec-onde{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.sortie .dot,.sortie .dot::after{animation:none}.sortie .dot::after{display:none}}

/* ===== Avant la sortie d'un épisode : compte à rebours + formulaire « Me prévenir » ===== */
.compte{margin:22px 0 8px;padding:22px 24px 20px;border-radius:18px;background:linear-gradient(158deg,#3D2438,#2A1826);color:var(--lwn-creme);box-shadow:var(--shadow-md)}
.compte .ck{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--lwn-or-bright)}
.compte .dot{position:relative;width:10px;height:10px;border-radius:50%;background:#E5483B;flex:none;animation:rec-souffle 1.4s ease-in-out infinite}
.compte .dot::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(229,72,59,.8);animation:rec-onde 1.4s ease-out infinite}
.compte .cells{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0 14px}
.compte .cells span{background:rgba(245,237,225,.06);border:1px solid rgba(245,237,225,.14);border-radius:12px;padding:14px 4px 12px;text-align:center}
.compte .cells b{display:block;font-family:var(--font-editorial);font-weight:600;font-size:clamp(30px,4vw,44px);line-height:1;color:var(--lwn-creme);font-variant-numeric:tabular-nums}
.compte .cells i{display:block;margin-top:6px;font-style:normal;font-family:var(--font-display);font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--lwn-or-bright)}
.compte .cn{margin:0;font-size:15px;line-height:1.55;color:rgba(245,237,225,.82)}
.compte .cn b{color:var(--lwn-creme)}
.lance{background:linear-gradient(158deg,#3D2438,#2A1826);color:var(--lwn-creme);border-radius:18px;padding:24px 24px 22px;margin:0 0 18px;box-shadow:var(--shadow-md)}
.lance .lk{font-family:var(--font-editorial);font-weight:600;font-size:23px;line-height:1.2;color:var(--lwn-creme);margin-bottom:6px}
.lance .lt{font-size:15px;line-height:1.55;color:rgba(245,237,225,.82);margin:0 0 16px}
.lance .lwn-form{max-width:none}
.wrap .lance{margin-top:14px}
@media (prefers-reduced-motion:reduce){.compte .dot,.compte .dot::after{animation:none}}