/* CULANTA — habillage. Codes generiques d'aventure tropicale (sable, jungle, feu, bois brule).
   Creation originale : aucun element graphique emprunte a une emission existante. */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --sable:#e8d5a9; --sable-fonce:#c9ad72; --jungle:#1d3b2a; --jungle-clair:#2d5940;
  --feu:#e2622a; --feu-clair:#f59331; --nuit:#0d1310; --nuit2:#141d18; --texte:#f2ece0;
}
body{background:var(--nuit);color:var(--texte);
  font-family:-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.6}
a{color:inherit;text-decoration:none}
.wrap{max-width:1280px;margin:0 auto;padding:0 22px}

/* ---- barre du haut ---- */
header.top{position:sticky;top:0;z-index:40;background:rgba(13,19,16,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid rgba(232,213,169,.14)}
.top .wrap{display:flex;align-items:center;gap:26px;height:62px}
.marque{font-weight:900;letter-spacing:.16em;font-size:1.22rem;color:var(--sable)}
.marque span{color:var(--feu)}
nav.menu{display:flex;gap:20px;margin-left:auto;font-size:.92rem}
nav.menu a{color:#cfc7b6;padding:5px 0;border-bottom:2px solid transparent;transition:.16s}
nav.menu a:hover,nav.menu a.on{color:var(--sable);border-bottom-color:var(--feu)}
.langues{display:flex;gap:7px;margin-left:14px}
.langues a{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:#8d8878;
  border:1px solid rgba(232,213,169,.2);border-radius:4px;padding:3px 7px;transition:.16s}
.langues a:hover{color:var(--sable);border-color:var(--sable)}
.langues a.on{background:var(--feu);border-color:var(--feu);color:#1a0f08;font-weight:700}

/* ---- banniere ---- */
.hero{position:relative;padding:74px 0 60px;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%, #1e3527 0%, var(--nuit) 68%)}
.hero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--feu),transparent)}
.hero h1{font-size:clamp(3rem,11vw,7.4rem);font-weight:900;letter-spacing:.06em;line-height:.94;
  text-align:center;color:var(--sable);text-shadow:0 0 46px rgba(226,98,42,.34)}
.hero .sous{text-align:center;color:var(--feu-clair);font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;font-size:.9rem;margin-top:16px}
.hero .intro{max-width:660px;margin:20px auto 0;text-align:center;color:#c8c0b0;font-size:1.03rem}
.chiffres{display:flex;gap:52px;justify-content:center;margin-top:38px;flex-wrap:wrap}
.chiffre .n{font-size:2.1rem;font-weight:900;color:var(--sable);line-height:1}
.chiffre .l{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#8d8878;margin-top:5px}

/* ---- titres de section ---- */
.section{padding:52px 0 10px}
.titre-section{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.titre-section h2{font-size:1.42rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--sable)}
.titre-section .trait{flex:1;height:1px;background:linear-gradient(90deg,rgba(232,213,169,.32),transparent)}
.titre-section .compte{font-size:.76rem;background:var(--feu);color:#1a0f08;font-weight:800;
  padding:3px 10px;border-radius:11px}
.titre-section a.plus{font-size:.82rem;color:#8d8878}
.titre-section a.plus:hover{color:var(--feu-clair)}

/* ---- grille episodes ---- */
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:20px}
.carte{background:var(--nuit2);border:1px solid rgba(232,213,169,.1);border-radius:11px;
  overflow:hidden;transition:.2s;display:block}
.carte:hover{transform:translateY(-3px);border-color:rgba(226,98,42,.5);
  box-shadow:0 14px 34px rgba(0,0,0,.55)}
.vue{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.vue img,.vue video{width:100%;height:100%;object-fit:cover;display:block}
.vue video{position:absolute;inset:0;opacity:0;transition:opacity .25s}
.carte:hover .vue video{opacity:1}
.num-ep{position:absolute;top:9px;left:9px;background:var(--feu);color:#1a0f08;
  font-weight:900;font-size:.72rem;letter-spacing:.08em;padding:3px 9px;border-radius:4px}
.duree{position:absolute;bottom:9px;right:9px;background:rgba(0,0,0,.82);
  font-size:.74rem;padding:2px 7px;border-radius:4px;color:#e6ddcb}
.carte .txt{padding:13px 15px 16px}
.carte h3{font-size:.97rem;font-weight:600;color:var(--texte);line-height:1.38;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.carte .meta{margin-top:8px;font-size:.76rem;color:#827d6e}

/* ---- casting ---- */
.trombi{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:16px}
.tete{text-align:center}
.tete img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:10px;
  border:1px solid rgba(232,213,169,.14);background:#000}
.tete .nom{margin-top:9px;font-weight:600;font-size:.9rem;color:var(--sable)}
.tete .role{font-size:.74rem;color:#827d6e}

/* ---- page episode ---- */
.retour{display:inline-block;margin:26px 0 8px;color:#8d8878;font-size:.87rem}
.retour:hover{color:var(--feu-clair)}
.ep-entete{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:34px;align-items:start;margin-top:12px}
.ep-entete .affiche{width:100%;border-radius:12px;border:1px solid rgba(232,213,169,.14)}
.ep-entete h1{font-size:1.72rem;font-weight:800;color:var(--sable);line-height:1.24}
.ep-badges{display:flex;gap:9px;flex-wrap:wrap;margin:12px 0 16px}
.badge{font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:#c8c0b0;
  border:1px solid rgba(232,213,169,.2);border-radius:20px;padding:4px 11px}
.badge.feu{background:var(--feu);border-color:var(--feu);color:#1a0f08;font-weight:800}
.ep-entete p.desc{color:#c8c0b0;margin-bottom:20px}
.bouton{display:inline-flex;align-items:center;gap:9px;background:var(--feu);color:#1a0f08;
  font-weight:800;padding:13px 24px;border-radius:9px;letter-spacing:.03em;transition:.18s}
.bouton:hover{background:var(--feu-clair);transform:translateY(-2px)}
.bouton small{font-weight:600;opacity:.72}
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:11px;margin-top:14px}
.galerie a{display:block;aspect-ratio:16/9;border-radius:8px;overflow:hidden;background:#000}
.galerie img{width:100%;height:100%;object-fit:cover;transition:.25s}
.galerie a:hover img{transform:scale(1.06)}

/* ---- pied ---- */
footer{margin-top:66px;padding:30px 0 42px;border-top:1px solid rgba(232,213,169,.12);
  text-align:center;color:#6e6a5e;font-size:.84rem}
footer a{color:var(--feu-clair)}

/* ---- avertissement adulte ---- */
#porte{position:fixed;inset:0;z-index:99;background:rgba(6,9,7,.97);display:flex;
  align-items:center;justify-content:center;padding:24px}
#porte .boite{max-width:520px;text-align:center;background:var(--nuit2);
  border:1px solid rgba(232,213,169,.18);border-radius:14px;padding:36px 30px}
#porte h2{color:var(--feu);font-size:1.16rem;letter-spacing:.14em;margin-bottom:14px}
#porte p{color:#c8c0b0;font-size:.94rem;margin-bottom:24px}
#porte .btns{display:flex;gap:11px;justify-content:center;flex-wrap:wrap}
#porte .non{background:transparent;border:1px solid rgba(232,213,169,.26);color:#c8c0b0;
  padding:13px 24px;border-radius:9px;font-weight:600}

@media(max-width:820px){
  .ep-entete{grid-template-columns:1fr;gap:20px}
  nav.menu{gap:13px;font-size:.85rem}
  .top .wrap{height:auto;padding-top:11px;padding-bottom:11px;flex-wrap:wrap;gap:12px}
  .chiffres{gap:30px}
}