:root{
  --nuit:#0B0C10;
  --nuit-2:#14151A;
  --ivoire:#EFE4C8;
  --eclat:#FFF6DE;
  --cendre:#8C846F;
  --ombre:#2E2C25;
  --trait:#5A5444;
  --or:#D9A441;
  --braise:#E0702E;
  --page:1280px;
  --lecture:660px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--nuit);color-scheme:dark;scroll-behavior:smooth}
body{
  background:var(--nuit);color:var(--ivoire);
  font-family:Montserrat,system-ui,sans-serif;font-weight:300;
  font-size:1.0625rem;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* grain argentique sur tout le site */
body::after{content:"";position:fixed;inset:-50%;pointer-events:none;z-index:50;opacity:.07;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
a{color:inherit;text-decoration-color:var(--trait);text-underline-offset:.25em}
a:hover{text-decoration-color:var(--eclat)}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--or);outline-offset:4px}
.wrap{max-width:var(--page);margin:0 auto;padding:0 clamp(16px,4vw,48px)}
.lecture{max-width:var(--lecture)}
.nw{white-space:nowrap}
.lourd{font-weight:900;text-transform:uppercase;letter-spacing:-.025em;line-height:.96}

/* En-tête */
.entete{position:fixed;top:0;left:0;right:0;z-index:40;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
.entete.scroll{background:color-mix(in srgb,var(--nuit) 86%,transparent);backdrop-filter:blur(12px);border-bottom-color:var(--ombre)}
.entete .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:300;letter-spacing:.32em;font-size:.8rem}
.logo svg{width:26px;height:26px}
.nav{display:flex;align-items:center;gap:28px;font-size:.9rem;font-weight:500}
.nav a{text-decoration:none;color:var(--ivoire);opacity:.72}
.nav a:hover,.nav a[aria-current="page"]{opacity:1}
.nav .pill{opacity:1;background:var(--eclat);color:var(--nuit);padding:8px 16px;border-radius:999px}
@media (max-width:720px){.logo span{display:none}.nav{gap:16px;font-size:.82rem}.nav .pill{display:none}}
main{display:block}
.page-interne main{padding-top:72px}

/* Ouverture : l'éclaircie */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;padding:120px 0 9vh}
.hero .halo{position:absolute;z-index:-1;right:-14vw;top:50%;width:min(92vw,1100px);aspect-ratio:1;transform:translateY(-52%)}
.hero .halo .lueur{position:absolute;inset:-18%;background:radial-gradient(closest-side at 70% 48%,rgba(224,112,46,.30),rgba(217,164,65,.12) 45%,transparent 72%);filter:blur(30px)}
.hero .halo svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hero .halo .retrait{fill:none;stroke:var(--ombre);stroke-width:1}
.hero .halo .lumiere{fill:url(#degrade);filter:drop-shadow(0 0 40px rgba(255,214,150,.45)) drop-shadow(0 0 120px rgba(224,112,46,.35))}
.hero .halo .etoile{fill:var(--eclat);transform-origin:298px 7px;filter:drop-shadow(0 0 12px #fff)}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,var(--nuit) 18%,rgba(11,12,16,.55) 52%,transparent 80%),linear-gradient(0deg,var(--nuit),transparent 40%)}
.hero h1{font-size:clamp(3.6rem,14.5vw,13.5rem);color:var(--eclat)}
.hero h1 span{display:block;overflow:hidden}
.hero h1 span i{display:block;font-style:normal}
.hero .sous{margin-top:clamp(20px,3vh,36px);max-width:34ch;font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--ivoire)}
.hero .sous b{font-weight:500;color:var(--eclat)}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(28px,4vh,44px)}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:999px;text-decoration:none;font-weight:600;font-size:.95rem;transition:transform .2s,background .2s,color .2s}
.btn:hover{transform:translateY(-2px)}
.btn-plein{background:var(--eclat);color:var(--nuit)}
.btn-plein:hover{background:#fff}
.btn-creux{border:1px solid var(--trait);color:var(--ivoire)}
.btn-creux:hover{border-color:var(--eclat);color:var(--eclat)}
.btn svg{width:16px;height:16px;fill:currentColor}
@media (max-width:720px){
  .hero{align-items:flex-end}
  .hero .halo{right:-48vw;top:34%;width:130vw}
  .hero::before{background:linear-gradient(0deg,var(--nuit) 30%,rgba(11,12,16,.6) 60%,transparent)}
}
@media (prefers-reduced-motion:no-preference){
  .hero .halo .retrait{stroke-dasharray:1260;stroke-dashoffset:1260;animation:trace 2s ease-out .1s forwards}
  .hero .halo .lumiere{clip-path:inset(0 0 0 100%);animation:devoile 2.2s cubic-bezier(.7,0,.2,1) .7s forwards}
  .hero .halo .lueur{opacity:0;animation:apparait 2.4s ease-out 1.4s forwards}
  .hero .halo .etoile{opacity:0;transform:scale(.2);animation:point 1s ease-out 2.6s forwards}
  .hero h1 span i{transform:translateY(105%);animation:monte 1s cubic-bezier(.2,.8,.2,1) forwards}
  .hero h1 span:nth-child(1) i{animation-delay:1.5s}
  .hero h1 span:nth-child(2) i{animation-delay:1.65s}
  .hero .sous,.hero .actions{opacity:0;animation:apparait 1s ease-out 2.2s forwards}
}
@keyframes trace{to{stroke-dashoffset:0}}
@keyframes devoile{to{clip-path:inset(0 0 0 0)}}
@keyframes point{60%{opacity:1;transform:scale(1.3)}to{opacity:1;transform:scale(1)}}
@keyframes apparait{to{opacity:1}}
@keyframes monte{to{transform:none}}

/* Bandeau défilant : la question dans toutes les langues */
.defile{border-block:1px solid var(--ombre);overflow:hidden;padding:26px 0;background:var(--nuit)}
.defile ul{display:flex;gap:56px;list-style:none;width:max-content;font-size:clamp(1.3rem,2.6vw,2.1rem);font-weight:200;color:var(--eclat);white-space:nowrap}
.defile li::after{content:"";display:inline-block;width:.45em;height:.45em;margin-left:56px;vertical-align:middle;background:var(--or);clip-path:polygon(50% 0,56% 44%,100% 50%,56% 56%,50% 100%,44% 56%,0 50%,44% 44%)}
@media (prefers-reduced-motion:no-preference){.defile ul{animation:defile 48s linear infinite}}
@keyframes defile{to{transform:translateX(-50%)}}

/* Sections */
.bloc{padding:clamp(80px,14vh,160px) 0}
.etiquette{color:var(--or);font-weight:500;font-size:.92rem;margin-bottom:1.4rem}
.titre-bloc{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:clamp(32px,5vh,56px)}
.titre-bloc h2{font-size:clamp(2.6rem,7vw,6rem);color:var(--eclat)}
.titre-bloc a{color:var(--cendre);font-size:.95rem;white-space:nowrap}

/* Une question */
.une-q{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,4vw,64px);align-items:center}
.une-q .chiffre{font-weight:900;font-size:clamp(12rem,34vw,30rem);line-height:.78;color:var(--ombre);letter-spacing:-.05em}
.une-q .q-texte p{font-weight:500;color:var(--or);margin-bottom:1.2rem}
.une-q h2{font-weight:200;font-size:clamp(2rem,4.6vw,4rem);line-height:1.1;color:var(--eclat);max-width:17ch}
.une-q .q-note{margin-top:1.8rem;color:var(--cendre);max-width:46ch}
@media (max-width:720px){.une-q{grid-template-columns:1fr}.une-q .chiffre{font-size:14rem}}

/* Vignettes d'épisodes, façon miniature */
.vignettes{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:clamp(20px,2.4vw,32px)}
.vignette{text-decoration:none;display:block}
.vignette[hidden]{display:none}
.vignette .image{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:radial-gradient(120% 120% at 85% 20%,rgba(224,112,46,.55),transparent 55%),linear-gradient(135deg,#1c1a16,#0b0c10);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.vignette:hover .image{transform:scale(1.02)}
.vignette .image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vignette .image::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.72),transparent 58%)}
.vignette .accroche{position:absolute;left:18px;right:18px;bottom:14px;z-index:1;font-weight:900;text-transform:uppercase;font-size:clamp(1.4rem,2.4vw,1.9rem);line-height:.95;letter-spacing:-.01em;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.5)}
.vignette .numero{position:absolute;top:12px;left:16px;z-index:1;font-weight:800;font-size:.85rem;color:var(--nuit);background:var(--eclat);padding:3px 10px;border-radius:999px}
.vignette .duree{position:absolute;top:12px;right:14px;z-index:1;font-size:.8rem;font-weight:600;background:rgba(0,0,0,.65);color:#fff;padding:3px 8px;border-radius:6px}
.vignette .croissant{position:absolute;right:-8%;top:-30%;width:62%;opacity:.9}
.vignette .legende{margin-top:14px}
.vignette .legende b{display:block;font-weight:600;color:var(--eclat);font-size:1.05rem}
.vignette .legende span{color:var(--cendre);font-size:.9rem}
.vignette.bientot .image{display:grid;place-items:center}
.vignette.bientot .accroche{position:static;text-align:center;font-size:clamp(2rem,4vw,3.2rem)}
.vignette.bientot .accroche small{display:block;font-weight:500;font-size:.9rem;letter-spacing:.2em;color:var(--or);margin-bottom:.6rem;text-transform:uppercase}
.vignette.bientot .image::after{display:none}

/* Mur des réponses */
.reponses{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:1px;background:var(--ombre);border:1px solid var(--ombre);border-radius:14px;overflow:hidden}
.reponse{background:var(--nuit);padding:34px 30px 28px;display:flex;flex-direction:column;justify-content:space-between;gap:32px;text-decoration:none;min-height:280px;transition:background .3s}
.reponse:hover{background:var(--nuit-2)}
.reponse q{font-weight:300;font-size:1.4rem;line-height:1.38;color:var(--eclat);quotes:"« " " »"}
.reponse .sig{font-size:.88rem;color:var(--cendre)}
.reponse .sig b{display:block;font-weight:600;color:var(--ivoire)}
.reponse[hidden]{display:none}

/* Filtres */
.filtres{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:2.4rem}
.filtres button{font:inherit;font-size:.9rem;font-weight:500;color:var(--ivoire);background:none;border:1px solid var(--ombre);border-radius:999px;padding:8px 16px;cursor:pointer}
.filtres button[aria-pressed="true"]{color:var(--nuit);background:var(--eclat);border-color:var(--eclat)}

/* L'équation du nom */
.equation{display:flex;flex-wrap:wrap;align-items:flex-end;gap:clamp(12px,2.4vw,36px);margin:2rem 0 4rem}
.equation .terme b{display:block;font-weight:900;text-transform:uppercase;font-size:clamp(2.6rem,8vw,7rem);line-height:.86;letter-spacing:-.03em;color:var(--eclat)}
.equation .terme span{display:block;margin-top:.8rem;color:var(--cendre);font-size:.95rem}
.equation .op{font-weight:200;font-size:clamp(2rem,5vw,4.6rem);color:var(--or);line-height:1}
.equation .ligne{flex-basis:100%;display:flex;align-items:flex-end;gap:clamp(12px,2.4vw,36px);margin-top:clamp(8px,2vh,24px)}
.equation .resultat b{font-size:clamp(2.8rem,10.5vw,9.6rem);background:linear-gradient(180deg,#FFF6DE 10%,#F2D79A 50%,#E0702E 95%);-webkit-background-clip:text;background-clip:text;color:transparent}
.antithese{font-weight:300;font-size:clamp(1.5rem,3.4vw,2.6rem);line-height:1.2;color:var(--eclat);max-width:24ch}
.antithese span{display:block;color:var(--cendre)}
.texte{margin-top:2.6rem}
.texte p+p{margin-top:1.2rem}
.texte em{font-style:italic;color:var(--eclat)}

/* Liste détaillée des épisodes */
.page-tete{padding:clamp(80px,14vh,150px) 0 clamp(40px,6vh,64px)}
.page-tete h1{font-size:clamp(3.2rem,11vw,9.5rem);color:var(--eclat)}
.page-tete p{margin-top:1.6rem;color:var(--cendre);max-width:52ch;font-size:1.1rem}
.vide-msg{color:var(--cendre);font-size:1.1rem}

/* Page épisode */
.ep-tete{padding:clamp(60px,10vh,120px) 0 clamp(32px,5vh,56px)}
.fil{font-size:.9rem;color:var(--cendre);margin-bottom:2.6rem}
.fil a{color:var(--cendre)}
.ep-num{display:inline-block;font-weight:800;font-size:.85rem;color:var(--nuit);background:var(--eclat);padding:3px 12px;border-radius:999px}
.ep-tete h1{font-size:clamp(3rem,9vw,8rem);color:var(--eclat);margin:1.4rem 0 1rem}
.ep-tete .role{color:var(--or);font-weight:500}
.ep-tete .sous{margin-top:1rem;font-size:1.25rem;font-weight:300}
.ep-meta{display:flex;gap:20px;color:var(--cendre);font-size:.9rem;margin-top:1.2rem}
.lecteur{aspect-ratio:16/9;background:var(--nuit-2);border-radius:16px;position:relative;display:grid;place-items:center;overflow:hidden;margin-bottom:24px;box-shadow:0 40px 120px -40px rgba(224,112,46,.35)}
.lecteur button{all:unset;cursor:pointer;position:absolute;inset:0;display:grid;place-items:center;background-size:cover;background-position:center}
.lecteur button span{width:92px;height:92px;border-radius:50%;background:var(--eclat);display:grid;place-items:center;transition:transform .2s}
.lecteur button:hover span{transform:scale(1.08)}
.lecteur button svg{width:26px;height:26px;fill:var(--nuit);margin-left:5px}
.lecteur iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lecteur .vide{color:var(--cendre);font-size:.95rem}
.ecouter{display:flex;flex-wrap:wrap;gap:10px}
.ecouter a{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border:1px solid var(--ombre);border-radius:999px;text-decoration:none;font-size:.9rem;font-weight:500;transition:border-color .2s,color .2s}
.ecouter a:hover{border-color:var(--eclat);color:var(--eclat)}
.ecouter svg{width:16px;height:16px;fill:currentColor}

.reponse-ep{position:relative;margin-top:clamp(64px,10vh,120px);padding:clamp(64px,12vh,140px) clamp(24px,5vw,72px);border-radius:24px;overflow:hidden;isolation:isolate;background:var(--nuit-2)}
.reponse-ep::before{content:"";position:absolute;z-index:-1;right:-20%;top:-40%;width:70%;aspect-ratio:1;background:radial-gradient(closest-side,rgba(224,112,46,.35),transparent 70%);filter:blur(20px)}
.reponse-ep .q{color:var(--or);font-weight:500;margin-bottom:2rem;max-width:46ch}
.reponse-ep blockquote{font-weight:200;font-size:clamp(2.2rem,5.4vw,4.6rem);line-height:1.1;color:var(--eclat);max-width:20ch;quotes:"« " " »"}
.reponse-ep blockquote::before{content:open-quote}
.reponse-ep blockquote::after{content:close-quote}
.reponse-ep .sig{margin-top:2.2rem;color:var(--ivoire);font-weight:500}

.ep-corps{display:grid;grid-template-columns:minmax(0,var(--lecture)) 1fr;gap:clamp(32px,6vw,96px);padding-top:clamp(64px,10vh,120px);padding-bottom:clamp(64px,10vh,120px)}
.ep-corps aside{position:sticky;top:104px;align-self:start}
@media (max-width:900px){.ep-corps{grid-template-columns:1fr}.ep-corps aside{position:static}}
.ep-section+.ep-section{margin-top:4.5rem}
.ep-section h2{font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:.95rem;color:var(--or);margin-bottom:1.3rem}
.ep-section p+p{margin-top:1rem}
.chapitres{list-style:none}
.chapitres li{display:grid;grid-template-columns:80px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--ombre)}
.chapitres a,.chapitres time{color:var(--cendre);font-variant-numeric:tabular-nums}
.mot dt{font-weight:900;text-transform:uppercase;font-size:clamp(2.4rem,5vw,3.6rem);letter-spacing:-.02em;color:var(--eclat);line-height:1}
.mot dd{margin-top:.8rem}
.mot dd.ety{color:var(--cendre);font-style:italic}
.chiffres{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.chiffres .v{font-weight:900;font-size:3.4rem;line-height:1;color:var(--eclat);letter-spacing:-.03em}
.chiffres p{margin-top:.6rem;font-size:.95rem}
.chiffres cite{display:block;margin-top:.4rem;color:var(--cendre);font-size:.82rem;font-style:normal}
@media (max-width:520px){.chiffres{grid-template-columns:1fr}}
.citation+.citation{margin-top:2rem}
.citation blockquote{font-size:1.2rem;color:var(--eclat);quotes:"« " " »"}
.citation blockquote::before{content:open-quote}.citation blockquote::after{content:close-quote}
.citation figcaption{margin-top:.5rem;color:var(--cendre);font-size:.88rem}
.cloture{font-weight:300;font-size:1.5rem;line-height:1.4;color:var(--eclat)}
.ressources{list-style:none}
.ressources li{padding:10px 0;border-bottom:1px solid var(--ombre)}
details.transcription summary{cursor:pointer;color:var(--eclat);font-weight:600;list-style:none}
details.transcription summary::-webkit-details-marker{display:none}
details.transcription summary::after{content:" +";color:var(--or)}
details.transcription[open] summary::after{content:" −"}
details.transcription div{margin-top:1.4rem}
details.transcription p+p{margin-top:1rem}
.voisins{display:flex;justify-content:space-between;gap:24px;border-top:1px solid var(--ombre);padding-top:40px;padding-bottom:56px}
.voisins a{text-decoration:none;font-weight:600}
.voisins a:hover{color:var(--eclat)}
.voisins a:last-child{text-align:right}
.voisins small{display:block;color:var(--cendre);font-size:.82rem;font-weight:400;margin-bottom:.4rem}

/* Appel final */
.appel{text-align:center;padding:clamp(100px,18vh,200px) 0;position:relative;overflow:hidden;isolation:isolate}
.appel::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:min(900px,120vw);aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(224,112,46,.22),transparent 70%)}
.appel h2{font-size:clamp(2.8rem,9vw,8rem);color:var(--eclat)}
.appel p{margin:1.6rem auto 0;color:var(--cendre);max-width:40ch}
.appel .actions{justify-content:center}

/* Pied */
.pied{border-top:1px solid var(--ombre);padding:64px 0 40px;color:var(--cendre);font-size:.9rem;overflow:hidden}
.pied .haut{display:flex;flex-wrap:wrap;justify-content:space-between;gap:32px}
.pied nav{display:flex;flex-wrap:wrap;gap:24px}
.pied a{text-decoration:none}
.pied a:hover{color:var(--eclat)}
.pied .geant{font-weight:200;letter-spacing:.24em;margin-right:-.24em;color:var(--ombre);font-size:clamp(2.4rem,9.6vw,8.8rem);line-height:1;margin-top:48px;white-space:nowrap;text-align:center}
.apercu{position:relative;z-index:45;background:var(--or);color:var(--nuit);text-align:center;font-size:.85rem;font-weight:600;padding:6px 16px}
.apercu+.entete{top:30px}
