@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=Montserrat:wght@500;600&display=swap");

*{ box-sizing:border-box; }
html,body{
  height:100%;
  margin:0;
  background:#050506;
  color:#f2f2f2;
}

/* =========================================================
   PORTAL WRAPPER
   Works for BOTH: <main class="portal"> OR <main class="wrap">
   ========================================================= */
.portal,
.wrap{
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;

  /* ✅ remove big top gap */
  justify-content:flex-start;

  /* desktop spacing */
  padding:22px 18px 26px;

  background:
    radial-gradient(900px 420px at 50% 12%, rgba(255,255,255,.08), transparent 58%),
    linear-gradient(180deg, #040405 0%, #0a0a0d 55%, #050506 100%);
}

/* Header */
.portal-head{ text-align:center; margin-bottom:22px; }
.portal-head h1{
  margin:0;
  font-family:"Cinzel", serif;
  letter-spacing:.22em;
  font-size:clamp(28px, 4.2vw, 54px);
  text-shadow:0 0 35px rgba(255,255,255,.12);
}
.portal-head p{
  margin:10px 0 0;
  font-family:"Montserrat", sans-serif;
  color:rgba(255,255,255,.72);
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:13px;
}

/* Grid */
.portal-grid{
  width:min(1100px, 100%);
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
}

/* Cards */
.portal-card{
  position:relative;
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 80px rgba(0,0,0,.75);
  text-decoration:none;
  color:inherit;
}

.portal-card img{
  width:100%;
  height:520px;
  object-fit:cover;
  display:block;
  transform:scale(1.02);
  transition:transform .6s ease, filter .6s ease;
  filter:contrast(1.05) saturate(1.05);
}

.overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding:22px;
  background:linear-gradient(
    180deg,
    rgba(0,0,0,.05) 0%,
    rgba(0,0,0,.35) 55%,
    rgba(0,0,0,.88) 100%
  );
}

.overlay h2{
  margin:0;
  font-family:"Cinzel", serif;
  letter-spacing:.12em;
  font-size:clamp(20px, 2.2vw, 30px);
}

.overlay span{
  margin-top:10px;
  font-family:"Montserrat", sans-serif;
  color:rgba(255,255,255,.72);
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:13px;
}

.portal-card:hover img{
  transform:scale(1.08);
  filter:contrast(1.1) saturate(1.12);
}

/* Footer */
.portal-foot{
  margin-top:20px;
  color:rgba(255,255,255,.55);
  font-family:"Montserrat", sans-serif;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-size:12px;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 980px){
  .portal-grid{ grid-template-columns: 1fr; }
  .portal-card img{ height: 460px; }
}

/* ✅ mobile: tighter top gap */
@media (max-width: 520px){
  .portal,
  .wrap{
    padding-top:14px;
  }

  .portal-head{ margin-bottom:16px; }
  .portal-head p{ font-size:12px; }

  .portal-card img{ height: 360px; }
  .overlay{ padding:16px; }
  .overlay span{ font-size:12px; }
}

/* embers canvas */
#embers{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
}

/* =========================
   OVERRIDE – GAP CONTROL
   (wins over inline <style>)
   ========================= */
html body .wrap,
html body .portal{
  padding-top: 70px !important; /* <-- change ici pour descendre */
}

/* mobile */
@media (max-width: 520px){
  html body .wrap,
  html body .portal{
    padding-top: 50px !important; /* <-- change ici pour mobile */
  }
}

#portal-embers{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: .9;
}

/* Assure que ton contenu reste au-dessus */
.page-wrap, .portal-wrap, main, header, .cards, .container{
  position: relative;
  z-index: 1;
}

/* ================================
   PORTAL — FIX PARTICLES LAYERING
   (particles behind cards)
================================ */

/* 1) background tout en bas */
.bg, .vignette, .fog, .grain{
  z-index: 0 !important;
}

/* 2) particules au milieu */
#portal-embers, #embers{
  position: fixed !important;
  inset: 0 !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* 3) ton contenu (cartes) au-dessus */
.wrap{
  position: relative !important;
  z-index: 2 !important;
}

/* Intro reste au-dessus de tout */
.intro{
  z-index: 50 !important;
}