/* Pages intérieures — reprend à l'identique le style de la page d'accueil */
@font-face{font-family:Fraunces;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/fraunces-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:Fraunces;font-style:normal;font-weight:800;font-display:swap;src:url(/assets/fonts/fraunces-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:Fraunces;font-style:italic;font-weight:500;font-display:swap;src:url(/assets/fonts/fraunces-latin-500-italic.woff2) format('woff2')}
@font-face{font-family:Nunito;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/nunito-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:Nunito;font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/nunito-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:Nunito;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/nunito-latin-700-normal.woff2) format('woff2')}
:root{
  --night:#0b1532; --night-2:#141238; --ink:#e9e4f5; --muted:#a9a6c9;
  --gold:#f2c46b; --cream:#fff3d9; --card:rgba(255,255,255,.06); --line:rgba(255,255,255,.12);
  --radius:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:#141238}
body{
  font-family:Nunito,system-ui,sans-serif;color:var(--ink);line-height:1.55;
  background:
    radial-gradient(1px 1px at 12% 18%,#fff8 50%,transparent 51%),
    radial-gradient(1px 1px at 78% 32%,#fff6 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 40% 62%,#fff5 50%,transparent 51%),
    radial-gradient(1px 1px at 88% 80%,#fff7 50%,transparent 51%),
    radial-gradient(1px 1px at 22% 88%,#fff5 50%,transparent 51%),
    linear-gradient(180deg,var(--night) 0%,var(--night-2) 100%);
  background-attachment:fixed;min-height:100vh;
}
img{display:block;max-width:100%;height:auto}

/* En-tête : le nom en haut, centré */
.marque{display:block;text-align:center;padding:1.35rem 4rem .25rem;font-family:Fraunces,serif;font-weight:800;font-size:1.5rem;color:var(--cream);text-decoration:none;text-shadow:0 0 22px rgba(242,196,107,.35)}
.marque small{display:block;font-style:italic;font-weight:500;font-size:.95rem;color:var(--gold)}

main{max-width:560px;margin:0 auto;padding:1rem 1.25rem 3rem}
.fil{font-size:.82rem;color:var(--muted);margin-bottom:1.25rem}
.fil a{color:var(--muted)}
h1{font-family:Fraunces,serif;font-weight:800;font-size:clamp(1.8rem,6vw,2.3rem);color:var(--cream);line-height:1.15;margin-bottom:.6rem}
.tag{font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.lead{color:var(--muted);font-size:1.05rem;margin-bottom:1.75rem}
h2{font-family:Fraunces,serif;font-weight:800;font-size:1.35rem;color:var(--cream);margin-bottom:.9rem}
h3{font-family:Fraunces,serif;font-size:1.15rem;color:var(--cream);margin:.15rem 0 .35rem}
section{margin-bottom:2.5rem}
main p{margin-bottom:.9rem}
main section p,main ul{color:var(--muted)}
main ul{padding-left:1.2rem}
main li{margin-bottom:.45rem}
a{color:var(--gold)}

/* Boutons (identiques à l'accueil) */
.links{display:grid;gap:.8rem}
.btn{display:flex;align-items:center;gap:.9rem;padding:1rem 1.15rem;border-radius:var(--radius);
  background:var(--card);border:1px solid var(--line);color:var(--ink);text-decoration:none;
  font-weight:700;font-size:1.05rem;backdrop-filter:blur(6px);
  transition:transform .15s ease,background .15s ease,border-color .15s ease}
.btn:hover,.btn:focus-visible{transform:translateY(-2px);background:rgba(255,255,255,.1);border-color:rgba(242,196,107,.55);outline:none}
.btn svg{width:26px;height:26px;flex:none}
.btn small{margin-left:auto;font-weight:600;font-size:.8rem;color:var(--muted)}
.btn.primary{background:linear-gradient(135deg,#f2c46b,#e79d4f);color:#2a1a0c;border:none}
.btn.primary small{color:#5a3a1c}

/* Cartes épisode (identiques à l'accueil) */
.episode{display:grid;grid-template-columns:120px 1fr;gap:1rem;align-items:center;padding:.85rem;
  border-radius:var(--radius);background:var(--card);border:1px solid var(--line);text-decoration:none;color:inherit;
  transition:border-color .15s ease;margin-bottom:.8rem}
.episode:hover{border-color:rgba(242,196,107,.55)}
.episode img{width:120px;aspect-ratio:9/12;object-fit:cover;border-radius:12px}
.episode h3{margin:.15rem 0 .35rem}
.episode p{font-size:.92rem;color:var(--muted);margin:0}

/* Vidéo : image cliquable vers TikTok */
.video{position:relative;display:block;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);margin-bottom:1.25rem;text-decoration:none}
.video img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .3s ease}
.video:hover img{transform:scale(1.03)}
.video .play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;background:linear-gradient(180deg,rgba(11,21,50,0) 40%,rgba(11,21,50,.75));color:var(--cream);font-weight:700}
.video .play span{width:68px;height:68px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#f2c46b,#e79d4f);box-shadow:0 0 30px rgba(242,196,107,.5)}
.video .play svg{width:28px;height:28px;margin-left:4px;color:#2a1a0c}

/* Encadré infos */
.bloc{padding:1rem 1.15rem;border-radius:var(--radius);background:var(--card);border:1px solid var(--line);margin-bottom:1.75rem}
.bloc dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem 1rem;font-size:.95rem}
.bloc dt{font-weight:700;color:var(--cream)}
.bloc dd{color:var(--muted)}

/* Personnages (style « L'univers » de l'accueil) */
.about{display:flex;gap:1rem;align-items:flex-start;padding:.85rem;border-radius:var(--radius);background:var(--card);border:1px solid var(--line);margin-bottom:.8rem}
.about img{width:84px;height:84px;border-radius:50%;flex:none;border:2px solid rgba(242,196,107,.6);object-fit:cover}
.about h2{font-size:1.15rem;margin:0 0 .25rem}
.about p{color:var(--muted);font-size:.95rem;margin:0}

/* Coulisses */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-bottom:.5rem}
.duo img{border-radius:12px;border:1px solid var(--line);aspect-ratio:9/16;object-fit:cover;width:100%}
.legende{font-size:.85rem;color:var(--muted);margin-bottom:2rem}
.etapes{list-style:none;padding:0;counter-reset:e;display:grid;gap:.7rem}
.etapes li{counter-increment:e;position:relative;padding:.85rem 1rem .85rem 3.3rem;border-radius:var(--radius);background:var(--card);border:1px solid var(--line);margin:0}
.etapes li::before{content:counter(e);position:absolute;left:.9rem;top:.9rem;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#f2c46b,#e79d4f);color:#2a1a0c;font-weight:800;font-size:.9rem}
.etapes p{font-size:.93rem;margin:0}

.suite{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-weight:700;font-size:.95rem}

/* Pied de page (identique à l'accueil) */
footer{text-align:center;color:var(--muted);font-size:.82rem;padding:1.5rem 1rem 2.5rem;border-top:1px solid var(--line);max-width:560px;margin:0 auto}
footer a{color:var(--muted)}
details.legal{margin-top:1rem;text-align:left}
details.legal summary{cursor:pointer;text-align:center}
details.legal div{margin-top:.75rem;line-height:1.6}
details.legal p{margin-bottom:.5rem}
.etape-img{margin-top:.8rem}
.etape-img img{width:100%;border-radius:12px;border:1px solid var(--line)}
.etape-img figcaption{font-size:.82rem;color:var(--muted);margin-top:.4rem}
/* Coulisses : page plus large sur ordinateur, images agrandissables */
@media (min-width:900px){
  main:has(.etapes){max-width:960px}
  main:has(.etapes) .duo{max-width:640px;margin-left:auto;margin-right:auto}
  main:has(.etapes) .lead,main:has(.etapes) .legende{max-width:720px}
  .etapes li{padding:1.1rem 1.4rem 1.2rem 3.6rem}
  .etapes p{font-size:1rem}
}
.etape-img a{display:block;cursor:zoom-in}
.etape-img a:hover img{border-color:rgba(242,196,107,.55)}
/* Coulisses sur ordinateur : titre, intro et légende centrés sur les images */
@media (min-width:900px){
  main:has(.etapes) > h1,
  main:has(.etapes) > .lead,
  main:has(.etapes) > .legende{max-width:640px;margin-left:auto;margin-right:auto;text-align:center}
}
button.btn{width:100%;font-family:inherit;cursor:pointer;text-align:left}