/* ===========================
   La Chambre Rouge — Styles
   =========================== */

:root{
  /* Couleurs */
  --rouge:#8B0000; --rouge-2:#B22222;
  --noir:#0b0b0b; --noir-2:#131313; --noir-3:#0d0d0d;
  --blanc:#f7f7f7; --gris:#cfcfd2; --accent:#f0d6d6;

  /* Dimensions */
  --utility-h:22px; /* barre Connexion réduite */
}

html{scroll-behavior:smooth}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0; background:var(--noir); color:var(--blanc);
  font-family:"Cormorant Garamond", Georgia, serif; line-height:1.45;
}
a{color:inherit;text-decoration:none}

/* -------- Barre utilitaire (Connexion) -------- */
.utility-bar{
  position:sticky; top:0; z-index:10000;
  display:flex; justify-content:flex-end; align-items:center; gap:.5rem;
  min-height:var(--utility-h);
  padding:.2rem .5rem;
  background:rgba(11,11,11,.85);
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(6px) saturate(1.1);
}
.btn-login{
  display:inline-block; padding:.35rem .8rem; font-size:.85rem; font-weight:700;
  border-radius:999px; border:1px solid rgba(255,255,255,.22);
  color:#fff; background:transparent; transition:background .18s ease, box-shadow .18s ease, transform .12s ease;
}
.btn-login:hover,.btn-login:focus-visible{ background:rgba(255,255,255,.10); outline:none }

/* -------- Titre & Navigation -------- */
.site-title{
  padding:.9rem 1rem .35rem; text-align:center;
  font-size:clamp(1.3rem,3.2vw,1.75rem); font-weight:700; letter-spacing:.02em;
}
.site-title .em{
  font-family:"Great Vibes","Cormorant Garamond",serif;
  color:#ffe9e9; font-weight:400; font-size:1.2em; text-shadow:0 6px 24px rgba(139,0,0,.5);
}
.nav{
  display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap;
  padding:.5rem .75rem .8rem; background:rgba(11,11,11,.7);
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(6px) saturate(1.1);
  position:sticky; top:var(--utility-h); z-index:999;
}
.nav a{
  padding:.55rem 1.1rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.18); font-weight:700; transition:.18s;
}
.nav a:hover,.nav a:focus-visible{ background:rgba(255,255,255,.08); outline:none }
.nav a.active{ background:rgba(255,255,255,.12) }

/* -------- HERO (landing) -------- */
.hero{ position:relative; min-height:88vh; display:grid; place-items:center; isolation:isolate; overflow:hidden }
.hero__media{ position:absolute; inset:0 }
.hero__img{ width:100%; height:100%; object-fit:cover; object-position:center;
  filter:saturate(1.05) contrast(1.05) brightness(.9) }
.hero__overlay{ position:absolute; inset:0; background:
  linear-gradient(180deg, rgba(0,0,0,.25) 0, rgba(0,0,0,.65) 70%, rgba(0,0,0,.75) 100%),
  radial-gradient(55% 55% at 70% 55%, rgba(139,0,0,.35) 0, rgba(0,0,0,0) 70%); mix-blend-mode:multiply }
.slogan{ position:relative; z-index:2; text-align:center; width:min(1100px,92%);
  margin:0 auto; color:var(--accent); font-size:clamp(1.05rem,2.2vw,1.35rem); text-shadow:0 2px 18px rgba(0,0,0,.6) }

/* Flou si âge non confirmé */
.gate-active .hero__img{ filter:blur(10px) brightness(.55) saturate(.9) }
.gate-active .hero__overlay{ background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.85)) }

/* -------- Sections & cartes -------- */
main{ background:var(--noir-2) }
.section{ width:min(1100px,92%); margin:0 auto; padding:2rem 0 }
.card{ background:#121212; border:1px solid rgba(255,255,255,.08);
  border-radius:18px; padding:1.25rem; box-shadow:0 12px 30px rgba(0,0,0,.35) }
h1,h2{ margin:.25rem 0 1rem }
h2{ font-size:clamp(1.4rem,3vw,1.85rem) }
.muted{ color:#e7e7ea }

/* Boutons génériques */
.btn{ display:inline-block; padding:.8rem 1.1rem; border-radius:999px; font-weight:700 }
.btn-primary{ background:linear-gradient(135deg,var(--rouge),var(--rouge-2)); color:#fff; box-shadow:0 8px 22px rgba(139,0,0,.35);
  transition:transform .12s ease, box-shadow .18s ease }
.btn-primary:hover{ transform:translateY(-1px); box-shadow:0 10px 30px rgba(139,0,0,.45) }

/* -------- Footer -------- */
footer{ padding:1.2rem 1rem; text-align:center; color:var(--gris);
  border-top:1px solid rgba(255,255,255,.1); background:var(--noir-3) }

/* -------- Modale 18+ -------- */
.modal{ position:fixed; inset:0; background:rgba(0,0,0,.7); display:none; align-items:center; justify-content:center; z-index:9999 }
.modal.open{ display:flex }
.modal__dialog{ width:min(560px,92%); background:#141214; border:1px solid rgba(255,255,255,.12);
  border-radius:18px; padding:1.25rem 1.25rem 1rem; box-shadow:0 30px 80px rgba(0,0,0,.6) }
.modal h3{ margin:.2rem 0 .4rem; font-size:1.4rem }
.modal p{ margin:.3rem 0 .9rem; color:#e9e3e3 }
.actions{ display:flex; gap:.6rem; flex-wrap:wrap; justify-content:flex-end; margin-top:.5rem }
.btn-ghost{ background:rgba(255,255,255,.06); color:#fff; border:1px solid rgba(255,255,255,.22);
  border-radius:999px; padding:.8rem 1.1rem; font-weight:700; transition:background .18s ease, box-shadow .18s ease, transform .12s ease }
.btn-ghost:hover{ background:rgba(255,255,255,.12) }
.btn-primary:focus-visible,.btn-ghost:focus-visible,.btn-login:focus-visible{ outline:2px solid #fff; outline-offset:2px }

/* -------- Pages internes : Forum & Boutique (fond full-bleed) -------- */
.page-forum,
.page-boutique{
  position:relative; z-index:0; padding:4rem 0; color:var(--blanc);
  min-height:88vh; /* uniformisé avec le HERO */
}

/* Pseudo-éléments centrés qui débordent sur toute la largeur de l’écran */
.page-forum::before,
.page-forum::after,
.page-boutique::before,
.page-boutique::after{
  content:"";
  position:absolute; top:0; left:50%;
  width:100vw; height:100%;
  transform:translateX(-50%);  /* centre sur la fenêtre, pas sur .section */
}

/* Images de fond */
.page-forum::before{
  background:url("../../images/BGForum.png") center/cover no-repeat;
  z-index:-2;
}
.page-boutique::before{
  background:url("../../images/BGBoutique.png") center/cover no-repeat;
  z-index:-2;
}

/* Voile sombre de lisibilité */
.page-forum::after,
.page-boutique::after{
  background:rgba(0,0,0,.55);
  z-index:-1;
}

/* -------- Responsive -------- */
@media (max-width:680px){
  .utility-bar{ padding:.25rem .5rem }
  .btn-login{ padding:.4rem .85rem; font-size:.9rem }
  .actions{ justify-content:stretch }
  .actions .btn-ghost, .actions .btn-primary{ flex:1; text-align:center }
}