/* =========================================================
   SUPRADRAMA — PAGE INTRO (Thèmes dynamiques + lien PODCAST)
   Base : même système que 4h12 — thème par défaut AMBER
   ========================================================= */

/* ---------------- RESET & TYPO ---------------- */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------------- TOKENS DE THÈME ---------------- */
:root {
  --container: 1100px;
  --pad-x: 22px;
  --glass-bg: rgba(255,255,255,.08);
  --glass-brd: rgba(255,255,255,.20);
  --glass-blur: 8px;

  --radius-s: 10px; --radius-m: 14px; --radius-l: 18px;
  --space-1: 8px; --space-2: 12px; --space-3: 16px;
  --space-4: 22px; --space-5: 32px; --space-6: 56px; --space-7: 72px;

  /* Thème par défaut */
  --g1:#ff7a59; --g2:#b14cff; --g3:#220e1f; --text:#fff; --cta-shadow:rgba(177,76,255,.28);
}

/* Thème AMBER */
.theme--amber {
  --g1:#ffcf91; --g2:#ff9d57; --g3:#2a1510; --text:#fff9f0; --cta-shadow:rgba(255,207,145,.22);
}

/* Thème CRIMSON ROSE */
.theme--crimson-rose {
  --g1:#ff7a9e; --g2:#ff4d6d; --g3:#1a0b0f; --text:#fff6f8; --cta-shadow:rgba(255,77,109,.28);
}

/* ---------------- FOND ---------------- */
body {
  color: var(--text);
  background:
    radial-gradient(1200px 800px at 20% 15%, color-mix(in srgb,var(--g1) 32%, transparent), transparent 60%),
    radial-gradient(900px 700px at 80% 30%, color-mix(in srgb,var(--g2) 26%, transparent), transparent 65%),
    radial-gradient(700px 600px at 50% 80%, rgba(255,255,255,.10), transparent 70%),
    linear-gradient(160deg, var(--g3) 10%, color-mix(in srgb,var(--g2) 22%, black) 40%, #101623 100%);
  background-attachment: fixed;
}

main { flex: 1; }

/* Grain + Halo */
:root { --grain-size:160px; --grain-opacity:.08; --halo-opacity:.05; }
body::before {
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:var(--grain-opacity); mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYwIiBoZWlnaHQ9IjE2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZmlsdGVyIGlkPSdnJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC4wOScgbnVtT2N0YXZlcz0nMicgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbHRlcj0idXJsKCNnKSIvPjwvc3ZnPg==");
  background-size:var(--grain-size) var(--grain-size);
}
body::after {
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  mix-blend-mode:soft-light; opacity:.9;
  background: radial-gradient(800px 520px at 50% 45%, rgba(255,255,255,var(--halo-opacity)), transparent 80%);
}

/* ---------------- LAYOUT ---------------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--pad-x);
  position: relative;
  z-index: 1;
  text-align: center;
}

.logo img {
  width: 240px;
  height: auto;
  margin: 160px auto 120px;
  filter: drop-shadow(0 0 15px rgba(255,255,255,.8));
}

/* --- Logo animé vs statique --- */
.video-logo { display: block; }
.static-logo { display: none; }
@media (max-width: 768px) {
  .video-logo { display: none; }
  .static-logo { display: block; }
}

/* ---------------- LINKS ---------------- */
.links {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.link {
  position: relative;
  display: inline-block;
  font-weight: 800;
  letter-spacing: .12em;
  font-size: 1.35rem;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  padding: 6px 2px;
  border: none;
  background: transparent;
  box-shadow: none;
}
.link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px; height: 1px;
  background: linear-gradient(90deg,
    color-mix(in srgb,var(--g1) 60%,transparent),
    color-mix(in srgb,var(--g2) 60%,transparent)
  );
  transform: scaleX(.3);
  transform-origin: left;
  transition: transform .25s ease;
  opacity: .9;
}
.link:hover::after { transform: scaleX(1); }

/* ---------------- FOOTER ---------------- */
footer {
  width: 100%;
  background: #000;
  color: rgba(255,255,255,.6);
  text-align: center;
  font-size: 12px;
  padding: 15px 0;
}
footer .follow-us { margin-top: 10px; font-size: 14px; }
footer .follow-us a {
  color: #fff;
  margin-left: 8px;
  font-weight: bold;
  text-decoration: none;
}
footer .follow-us a:hover { color: rgba(255,255,255,.9); }

/* ---------------- RESPONSIVE ---------------- */
/* ===== Mobile polish (<=768px) ===== */
@media (max-width: 768px) {
  /* 1) Plus d'espace utile pour les boutons */
  .logo img{
    width: 180px;
    margin: 70px auto 24px;        /* ↓ rapproche le bloc des liens */
  }

  /* 2) Liens empilés, centrés, plus compacts */
  .links{
    flex-direction: column;
    align-items: center;
    gap: 10px;                      /* ↓ moins d’écart entre boutons */
    max-width: 420px;               /* colonne pas trop large */
    padding: 0 16px;
    margin: 0 auto 28px;            /* petit coussin avant le footer */
  }

  /* 3) Style “haute couture” optimisé mobile (texte + souligné) */
  .link{
    display: block;
    font-size: 1rem;                /* ↓ taille plus fine */
    letter-spacing: .08em;          /* ↓ tracking moins agressif */
    line-height: 1.3;
    padding: 10px 4px;              /* ↑ zone de touche confortable */
    text-align: center;
  }
  .link::after{
    height: 2px;                    /* trait un peu plus visible */
    bottom: -6px;
    width: 64%;                     /* trait plus court que le texte */
    left: 18%;                      /* centré sans calcul complexe */
    right: auto;
    transform: scaleX(1);           /* déjà “déployé” sur mobile */
    opacity: .85;
  }

  /* 4) Halo un peu atténué pour éviter le “flou sale” */
  body::after{ opacity: .75; }
}

/* ===== Option capsule élégante UNIQUEMENT en mobile (facultatif) =====
   - Ajoute la classe "links--caps" sur le <nav class="links ..."> pour activer.
*/
@media (max-width: 480px){
  .links.links--caps .link{
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 14px;
    padding: 12px 16px;            /* capsule tactile */
  }
  .links.links--caps .link::after{ display: none; } /* pas de souligné avec capsule */
}

/* iPhone safe area : évite que le contenu colle au bord */
@supports(padding: max(0px)){
  footer{ padding-bottom: max(15px, env(safe-area-inset-bottom)); }
}