/* ==========================================================================
   Les Mâles Entourés — Club Five
   Feuille de style globale
   ========================================================================== */

:root{
  --noir:#0d0d0d;
  --noir2:#161616;
  --noir3:#1f1f1f;
  --bordure:#262626;
  --jaune:#f5e003;
  --blanc:#f5f5f0;
  --gris:#a3a39b;
  --gris2:#6e6e68;
  --radius:14px;
  --max:1080px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--noir);
  color:var(--blanc);
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  line-height:1.65;
  font-size:16px;
}
img{max-width:100%;display:block}
a{color:var(--jaune)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* --------------------------------------------------------------- NAV --- */
nav.site{
  position:sticky;top:0;z-index:50;
  background:rgba(13,13,13,.95);
  backdrop-filter:blur(8px);
  border-bottom:1px solid #2a2a2a;
}
nav.site .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{
  display:flex;align-items:center;gap:10px;
  font-weight:900;letter-spacing:.5px;font-size:1.1rem;
  color:var(--jaune);text-decoration:none;text-transform:uppercase;
}
.logo-mark{display:block;width:40px;height:40px;border-radius:6px;flex:0 0 auto}
.logo .logo-txt{color:var(--jaune);font-weight:900}
.logo span{color:var(--blanc);font-weight:300}
nav.site ul{display:flex;gap:24px;list-style:none;align-items:center}
nav.site ul a{
  color:var(--blanc);text-decoration:none;font-size:.85rem;
  text-transform:uppercase;letter-spacing:.8px;padding:6px 0;
  border-bottom:2px solid transparent;
}
nav.site ul a:hover{color:var(--jaune)}
nav.site ul a[aria-current="page"]{color:var(--jaune);border-bottom-color:var(--jaune)}

/* Menu mobile — sans JS, via checkbox */
.burger{display:none}
.burger-label{display:none;cursor:pointer;font-size:1.5rem;color:var(--blanc);line-height:1}
@media(max-width:820px){
  .burger-label{display:block}
  nav.site ul{
    display:none;position:absolute;top:64px;left:0;right:0;
    flex-direction:column;gap:0;align-items:stretch;
    background:var(--noir2);border-bottom:1px solid var(--bordure);
  }
  .burger:checked ~ ul{display:flex}
  nav.site ul li{border-top:1px solid var(--bordure)}
  nav.site ul a{display:block;padding:16px 24px;border-bottom:none}
}

/* -------------------------------------------------------------- HERO --- */
header.hero{
  padding:100px 0 80px;
  background:radial-gradient(ellipse at 80% 10%,rgba(245,224,3,.07),transparent 55%),var(--noir);
}
header.hero.compact{padding:64px 0 48px}
.kicker{color:var(--jaune);text-transform:uppercase;letter-spacing:3px;font-size:.78rem;font-weight:700}
h1{font-size:clamp(2.3rem,6.5vw,4.4rem);font-weight:900;line-height:1.05;margin:18px 0;text-transform:uppercase}
h1 em{font-style:normal;color:var(--jaune)}
.lead{font-size:1.15rem;color:var(--gris);max-width:660px}

/* ------------------------------------------------------------ BOUTONS -- */
.cta-row{margin-top:34px;display:flex;gap:14px;flex-wrap:wrap}
.btn{
  display:inline-block;padding:14px 28px;border-radius:999px;
  text-decoration:none;font-weight:700;font-size:.93rem;letter-spacing:.5px;
  transition:opacity .15s ease;
}
.btn-y{background:var(--jaune);color:var(--noir)}
.btn-o{border:1.5px solid var(--blanc);color:var(--blanc)}
.btn:hover{opacity:.82}

/* ----------------------------------------------------------- SECTIONS -- */
section{padding:72px 0;border-top:1px solid #222}
section:first-of-type{border-top:none}
h2{font-size:clamp(1.6rem,4vw,2.3rem);font-weight:900;text-transform:uppercase;margin-bottom:14px}
h2::after{content:"";display:block;width:56px;height:5px;background:var(--jaune);margin-top:12px}
h3{font-size:1.15rem;margin-bottom:10px}
.sub{color:var(--gris);max-width:680px;margin-bottom:38px}

.grid{display:grid;gap:22px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

.card{background:var(--noir2);border:1px solid var(--bordure);border-radius:var(--radius);padding:28px}
.card h3{font-size:1.05rem;text-transform:uppercase;letter-spacing:.5px}
.card p{color:var(--gris);font-size:.95rem}
.num{color:var(--jaune);font-weight:900;font-size:1.6rem;display:block;margin-bottom:12px}

/* ----------------------------------------------------------- EPISODES -- */
.ep{
  display:flex;gap:20px;align-items:flex-start;
  background:var(--noir2);border:1px solid var(--bordure);
  border-radius:var(--radius);padding:24px;margin-bottom:16px;
  text-decoration:none;color:inherit;
  transition:border-color .15s ease;
}
a.ep:hover{border-color:var(--jaune)}
.ep-n{
  flex:0 0 auto;width:56px;height:56px;border-radius:12px;
  background:var(--jaune);color:var(--noir);
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:1.15rem;
}
.ep h3{font-size:1.05rem;margin-bottom:6px}
.ep p{color:var(--gris);font-size:.92rem}
.ep-meta{color:var(--gris2);font-size:.8rem;margin-top:8px;letter-spacing:.4px}
.tag{
  display:inline-block;margin-top:10px;font-size:.72rem;color:var(--jaune);
  text-transform:uppercase;letter-spacing:1px;
}
@media(max-width:560px){.ep{flex-direction:column}}

/* ------------------------------------------------------- PLAYER EMBED -- */
.player{margin:28px 0;border-radius:var(--radius);overflow:hidden;background:var(--noir2)}
.player iframe{width:100%;border:0;display:block}
.ratio-16x9{position:relative;padding-top:56.25%}
.ratio-16x9 iframe{position:absolute;inset:0;width:100%;height:100%}

/* ---------------------------------------------------------- PLATEFORMES */
.plats{display:flex;flex-wrap:wrap;gap:14px}
.plat{
  display:flex;align-items:center;gap:10px;
  background:var(--noir2);border:1px solid #2e2e2e;border-radius:999px;
  padding:12px 24px;color:var(--blanc);text-decoration:none;font-weight:600;font-size:.93rem;
}
.plat:hover{border-color:var(--jaune);color:var(--jaune)}

/* ---------------------------------------------------------------- FAQ -- */
details{background:var(--noir2);border:1px solid var(--bordure);border-radius:12px;padding:18px 22px;margin-bottom:12px}
summary{cursor:pointer;font-weight:700;list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";float:right;color:var(--jaune);font-weight:900}
details[open] summary::after{content:"–"}
details p{margin-top:10px;color:var(--gris);font-size:.95rem}

/* ------------------------------------------------------------ ÉQUIPE --- */
.team{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.member{background:var(--noir2);border:1px solid var(--bordure);border-radius:var(--radius);padding:26px;text-align:center}
.avatar{
  width:84px;height:84px;border-radius:50%;margin:0 auto 16px;
  background:var(--jaune);color:var(--noir);
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:1.7rem;
}
.member h3{font-size:1.05rem;margin-bottom:4px}
.role{color:var(--jaune);font-size:.75rem;text-transform:uppercase;letter-spacing:1.2px;margin-bottom:12px}
.member p{color:var(--gris);font-size:.9rem}

/* ------------------------------------------------------- LES MEMBRES --- */
.membres{display:flex;flex-direction:column;gap:20px}
.membre{
  display:grid;grid-template-columns:260px 1fr;gap:0;
  background:var(--noir2);border:1px solid var(--bordure);
  border-radius:var(--radius);overflow:hidden;
}
.membre img{width:100%;height:100%;object-fit:cover;aspect-ratio:1/1}
.membre-txt{padding:28px 32px}
.membre-txt h3{
  font-size:1.5rem;font-weight:900;text-transform:uppercase;
  letter-spacing:.5px;margin-bottom:4px;
}
.membre-txt .punch{
  color:var(--jaune);font-weight:700;font-size:.82rem;
  text-transform:uppercase;letter-spacing:2px;margin-bottom:16px;
}
.membre-txt .accroche{color:var(--blanc);font-size:1.02rem;margin-bottom:14px}
.membre-txt ul{list-style:none;margin:0 0 14px}
.membre-txt li{
  color:var(--gris);font-size:.94rem;padding-left:20px;position:relative;margin-bottom:5px;
}
.membre-txt li::before{content:"›";position:absolute;left:0;color:var(--jaune);font-weight:900}
.membre-txt p{color:var(--gris);font-size:.94rem}
.membre-txt .chute{
  color:var(--blanc);font-style:italic;margin-top:14px;
  padding-top:14px;border-top:1px solid var(--bordure);
}
@media(max-width:720px){
  .membre{grid-template-columns:1fr}
  .membre img{aspect-ratio:16/10}
  .membre-txt{padding:24px}
}

/* ------------------------------------------------------------- FORMS --- */
form.contact{max-width:620px}
.field{margin-bottom:20px}
.field label{display:block;font-size:.82rem;text-transform:uppercase;letter-spacing:1px;margin-bottom:8px;color:var(--blanc)}
.field input,.field textarea,.field select{
  width:100%;padding:14px 16px;border-radius:10px;
  background:var(--noir2);border:1px solid #303030;color:var(--blanc);
  font-family:inherit;font-size:.98rem;
}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--jaune)}
.hint{color:var(--gris2);font-size:.8rem;margin-top:6px}
button.btn{border:none;cursor:pointer;font-family:inherit}

/* ------------------------------------------------------------ ARTICLE -- */
article.post{max-width:760px}
article.post h2{margin-top:44px}
article.post h3{margin-top:30px;color:var(--jaune)}
article.post p{color:var(--gris);margin-bottom:18px}
article.post ul,article.post ol{color:var(--gris);margin:0 0 18px 22px}
article.post li{margin-bottom:8px}
article.post blockquote{
  border-left:4px solid var(--jaune);padding:6px 0 6px 20px;margin:24px 0;
  color:var(--blanc);font-style:italic;
}
.post-meta{color:var(--gris2);font-size:.82rem;letter-spacing:.5px;margin-bottom:8px}

/* ----------------------------------------------------------- FIL ARIANE */
.breadcrumb{font-size:.8rem;color:var(--gris2);margin-bottom:14px}
.breadcrumb a{color:var(--gris);text-decoration:none}
.breadcrumb a:hover{color:var(--jaune)}

/* ------------------------------------------------------------- FOOTER -- */
footer.site{border-top:1px solid #222;padding:52px 0 40px;color:var(--gris);font-size:.86rem}
.foot-grid{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-bottom:36px}
.foot-grid h4{
  color:var(--blanc);font-size:.78rem;text-transform:uppercase;
  letter-spacing:1.4px;margin-bottom:14px;
}
.foot-grid ul{list-style:none}
.foot-grid li{margin-bottom:9px}
.foot-grid a{color:var(--gris);text-decoration:none}
.foot-grid a:hover{color:var(--jaune)}
.foot-bottom{border-top:1px solid #222;padding-top:24px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between}
.foot-bottom a{color:var(--gris);text-decoration:none}
.foot-bottom a:hover{color:var(--jaune)}

/* --------------------------------------------------------------- 404 --- */
.center-page{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 24px}