/* Fablium Story · pages des épisodes OLYMPOS (extension fablium-site) */
:root{--ink:#070605;--ink-2:#12100d;--ink-3:#1c1813;--gold:#cfa553;--gold-hi:#f3dc9a;--gold-lo:#8a6a2c;--red:#9a2e25;--parch:#f1eadb;--parch-dim:#b9b0a0;--line:rgba(207,165,83,.28);color-scheme:dark}
html{scroll-behavior:smooth}
body.fab-ep-body{margin:0;background:var(--ink);color:var(--parch);font:400 1.0625rem/1.7 "Spectral",Georgia,serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.fab-ep *,.fab-ep *::before,.fab-ep *::after{box-sizing:border-box}
.fab-ep img{display:block;max-width:100%;height:auto}
.fab-ep a{color:var(--gold);text-decoration:none}
.fab-ep a:hover{color:var(--gold-hi)}
.fab-ep h1,.fab-ep h2,.fab-ep h3{font-family:"Cinzel",serif;font-weight:600;line-height:1.1;color:var(--parch);margin:0}
.fab-ep p{margin:0 0 1.1em}
.fab-wrap{width:min(1160px,100% - 32px);margin-inline:auto}
.fab-kick{font:500 .72rem/1.4 "Montserrat",sans-serif;letter-spacing:.32em;text-transform:uppercase;color:var(--gold)}
.fab-rule{width:110px;height:2px;background:var(--red);border:0;margin:1.2rem 0 1.4rem}

/* En-tête */
.fab-top{position:sticky;top:0;z-index:50;background:rgba(7,6,5,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.fab-top .fab-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px}
.fab-top .brand img{height:34px;width:auto}
.fab-top nav{display:flex;gap:26px}
.fab-top nav a{font:500 .72rem "Montserrat",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--parch-dim)}
.fab-top nav a:hover{color:var(--gold)}

/* Fil d'Ariane */
.fab-crumbs{font:500 .7rem/1.6 "Montserrat",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--parch-dim);padding:22px 0 0}
.fab-crumbs a{color:var(--parch-dim)}
.fab-crumbs span{color:var(--gold);margin:0 .5em}

/* Haut de page : vidéo + fiche */
.fab-hero{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:56px;align-items:center;padding:34px 0 70px}
.fab-video{position:relative;aspect-ratio:9/16;width:100%;background:var(--ink-3);border:1px solid var(--line);overflow:hidden}
.fab-video.carre{aspect-ratio:4/5}
.fab-video img{width:100%;height:100%;object-fit:cover}
.fab-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.fab-play{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(180deg,rgba(7,6,5,0) 40%,rgba(7,6,5,.75));border:0;cursor:pointer;padding:0;width:100%}
.fab-play span{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;background:rgba(7,6,5,.6);border:2px solid var(--gold);transition:transform .2s,background .2s}
.fab-play span::before{content:"";border-style:solid;border-width:15px 0 15px 25px;border-color:transparent transparent transparent var(--gold);margin-left:6px}
.fab-play:hover span{transform:scale(1.06);background:rgba(154,46,37,.75)}
.fab-play small{position:absolute;bottom:16px;left:0;right:0;text-align:center;font:500 .66rem "Montserrat",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--parch-dim)}
.fab-bientot{position:absolute;left:0;right:0;bottom:0;padding:18px;background:linear-gradient(180deg,rgba(7,6,5,0),rgba(7,6,5,.92) 45%);text-align:center;font:600 .74rem "Montserrat",sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-hi)}
.fab-num{font:600 clamp(4rem,9vw,7rem)/1 "Cinzel",serif;color:var(--gold);opacity:.18;position:absolute;inset:0;display:grid;place-items:center}

.fab-fiche h1{font-size:clamp(2.6rem,6vw,4.6rem);letter-spacing:.04em;margin:.25em 0 .1em}
.fab-sous{font:italic 400 clamp(1.25rem,2.4vw,1.6rem)/1.35 "Spectral",serif;color:var(--gold-hi);margin:0}
.fab-dl{display:grid;gap:14px;margin:0 0 26px}
.fab-dl div{border-left:2px solid var(--gold);padding:2px 0 2px 16px}
.fab-dl dt{font:600 .66rem "Montserrat",sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
.fab-dl dd{margin:0;color:var(--parch)}
.fab-statut{display:inline-block;font:600 .66rem "Montserrat",sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-hi);margin-bottom:12px}
.fab-liens{display:flex;flex-wrap:wrap;gap:10px}
.fab-liens a{display:inline-flex;align-items:center;gap:9px;padding:12px 18px;border:1px solid var(--gold);color:var(--gold);font:600 .7rem "Montserrat",sans-serif;letter-spacing:.16em;text-transform:uppercase;transition:background .2s,color .2s}
.fab-liens a:hover{background:var(--gold);color:var(--ink)}
.fab-liens a.main{background:linear-gradient(180deg,var(--gold-hi),var(--gold) 55%,var(--gold-lo));color:var(--ink)}
.fab-liens svg{width:16px;height:16px;fill:currentColor}

/* Récit */
.fab-recit{background:var(--parch);color:#2a2018;padding:90px 0}
.fab-recit .fab-in{max-width:720px;margin-inline:auto;padding:0 16px}
.fab-recit h2{color:#1c1813;font-size:clamp(1.8rem,3.6vw,2.5rem)}
.fab-recit .fab-kick{color:var(--red)}
.fab-recit .fab-texte{font-size:1.18rem;line-height:1.8}
.fab-recit .fab-texte p:first-child::first-letter{float:left;font:600 4.2em/.82 "Cinzel",serif;color:var(--red);margin:.06em .1em 0 0}
.fab-recit .fab-note{font:500 .78rem/1.6 "Montserrat",sans-serif;color:#6b5d4b;border-top:1px solid rgba(42,32,24,.2);padding-top:18px;margin-top:30px}
.fab-recit .fab-note a{color:var(--red)}

/* Épisodes voisins */
.fab-voisins{padding:80px 0;background:var(--ink-2)}
.fab-voisins h2{font-size:clamp(1.6rem,3vw,2.2rem);text-align:center;margin-bottom:34px}
.fab-vgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.fab-vcard{position:relative;display:flex;align-items:flex-end;min-height:220px;padding:22px;border:1px solid var(--line);background:var(--ink-3) center/cover no-repeat;overflow:hidden}
.fab-vcard::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,6,5,.15),rgba(7,6,5,.88))}
.fab-vcard>*{position:relative}
.fab-vcard small{display:block;font:600 .64rem "Montserrat",sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.fab-vcard strong{display:block;font:600 1.6rem/1.15 "Cinzel",serif;color:var(--parch);margin-top:6px}
.fab-vcard.suiv{justify-content:flex-end;text-align:right}
.fab-vcard:hover{border-color:var(--gold)}
.fab-ep .fab-tous{text-align:center;margin:34px 0 0}
.fab-btn{display:inline-block;padding:16px 26px;border:1px solid var(--gold);font:600 .74rem "Montserrat",sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.fab-btn:hover{background:rgba(207,165,83,.12)}

/* Lettre + pied */
.fab-lettre{padding:80px 0;text-align:center;border-top:1px solid var(--line)}
.fab-lettre h2{font-size:clamp(1.6rem,3vw,2.2rem);margin:.3em 0 .4em}
.fab-lettre p{color:var(--parch-dim);max-width:34em;margin:0 auto 24px}
.fab-foot{border-top:1px solid var(--line);padding:34px 0;font:500 .74rem/1.8 "Montserrat",sans-serif;color:var(--parch-dim)}
.fab-foot .fab-wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center}
.fab-foot a{color:var(--parch-dim)}
.fab-foot a:hover{color:var(--gold)}
.fab-foot nav{display:flex;flex-wrap:wrap;gap:8px 22px}

@media (max-width:860px){
  .fab-hero{grid-template-columns:1fr;gap:34px;padding-top:24px}
  .fab-video{max-width:360px;margin-inline:auto}
  .fab-top nav{gap:16px}
  .fab-top nav a.opt{display:none}
}
@media (max-width:560px){
  .fab-vgrid{grid-template-columns:1fr}
  .fab-vcard.suiv{justify-content:flex-start;text-align:left}
  .fab-vcard{min-height:170px}
  .fab-recit{padding:64px 0}
  .fab-recit .fab-texte{font-size:1.08rem}
}