/* ============================================================
   MONT NOIR — SOCLE COMMUN DU SITE
   Règles partagées par toutes les pages :
   reset/base · navigation (hero-nav) · curseur custom · footer
   ------------------------------------------------------------
   Chargé APRÈS tokens.css et AVANT le <style> propre à chaque
   page. Une page peut surcharger une règle du socle dans son
   propre <style> (le sien gagne, il est déclaré plus tard).
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

html, body { min-height: 100%; }

body {
      background: var(--mn-black);
      color: var(--mn-paper);
      font-family: var(--font-body);
      cursor: none;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

a { color: inherit; text-decoration: none; }

button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

img { display: block; max-width: 100%; }

.hero-cursor {
      position: fixed;
      top: 0;
      left: 0;
      width: 16px;
      height: 16px;
      border: 1px solid var(--mn-copper);
      border-radius: 50%;
      pointer-events: none;
      z-index: 200;
      transform: translate(-50%, -50%);
      transition: transform 0.15s ease-out, width 0.2s ease, height 0.2s ease, background 0.2s ease;
      mix-blend-mode: difference;
    }

.hero-cursor.is-hover {
      width: 48px;
      height: 48px;
      background: var(--mn-copper);
      border-color: transparent;
    }

.hero-nav-home { margin-right: auto; display: inline-flex; align-items: center; opacity: 0.95; transition: opacity 0.3s ease; }

.hero-nav-home:hover { opacity: 1; }

.hero-nav-home img { height: clamp(18px, 1.7vw, 24px); width: auto; display: block; }

.hero-nav-links {
      display: none;
      align-items: center;
      gap: clamp(28px, 2.4vw, 44px);
    }

@media (min-width: 960px) { .hero-nav-links { display: flex; } }

.hero-nav-links a {
      font-family: var(--font-body);
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--mn-paper);
      padding: 6px 0;
      position: relative;
      transition: color 0.3s ease;
    }

.hero-nav-links a::after {
      content: '';
      position: absolute;
      left: 0; right: 0; bottom: 0;
      height: 1px;
      background: var(--mn-copper);
      transform: scaleX(0);
      transform-origin: center;
      transition: transform 0.3s ease;
    }

.hero-nav-links a:hover { color: var(--mn-copper-light); }

/* Item de la page courante en cuivre (state aria-current="page") */
.hero-nav-links a[aria-current="page"] { color: var(--mn-copper-light); }
.hero-nav-links a[aria-current="page"]::after { transform: scaleX(1); }

.hero-nav-cta {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: var(--space-sm);
      padding: 10px 22px;
      font-family: var(--font-body);
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--mn-paper);
      border: 1px solid var(--mn-paper);
      background: transparent;
      transition: color 0.4s ease, letter-spacing 0.4s ease, border-color 0.4s ease;
      overflow: hidden;
      z-index: 1;
      margin-left: clamp(20px, 2vw, 32px);
      white-space: nowrap;
    }

.hero-nav-cta::before {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--mn-copper-gradient);
      transform: translateX(-101%);
      transition: transform 0.5s cubic-bezier(0.7, 0, 0.3, 1);
      z-index: -1;
    }

.hero-nav-cta:hover {
      border-color: transparent;
      letter-spacing: 0.26em;
    }

.hero-nav-cta:hover::before { transform: translateX(0); }

.hero-nav-cta-arrow {
      font-family: var(--font-body);
      font-weight: 300;
      font-size: 1.15em;
      transition: transform 0.4s ease;
    }

.hero-nav-cta:hover .hero-nav-cta-arrow { transform: translateX(3px); }

.hero-nav-toggle {
      display: inline-flex;
      flex-direction: column;
      justify-content: center;
      gap: 5px;
      width: 36px;
      height: 36px;
      padding: 8px;
      margin-left: var(--space-md);
    }

@media (min-width: 960px) { .hero-nav-toggle { display: none; } }

.hero-nav-toggle span {
      display: block;
      width: 100%;
      height: 1.5px;
      background: var(--mn-paper);
      transition: transform 0.3s ease, opacity 0.3s ease;
    }

.hero-nav-toggle.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }

.hero-nav-toggle.is-open span:nth-child(2) { opacity: 0; }

.hero-nav-toggle.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.hero-nav-drawer {
      position: fixed;
      inset: 0;
      background: var(--mn-black);
      z-index: 40;
      transform: translateX(100%);
      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      padding: 88px var(--space-lg) var(--space-lg);
      display: flex;
      flex-direction: column;
      gap: 4px;
      overflow-y: auto;
    }

.hero-nav-drawer.is-open { transform: translateX(0); }

@media (min-width: 960px) { .hero-nav-drawer { display: none; } }

.hero-nav-drawer a {
      font-family: var(--font-editorial);
      font-weight: 900;
      font-size: 20px;
      color: var(--mn-paper);
      padding: 13px 0;
      border-bottom: 1px solid var(--mn-smoke);
      text-transform: uppercase;
      letter-spacing: 0.02em;
    }

/* Item de la page courante en cuivre dans le menu déroulant mobile */
.hero-nav-drawer a[aria-current="page"] { color: var(--mn-copper-light); }

.mn-footer-inner {
      max-width: 1400px;
      margin: 0 auto;
    }

.mn-footer-club-info a:hover { color: var(--mn-copper-light); }

.mn-footer-social a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      color: var(--mn-mist);
      transition: color 0.3s ease, transform 0.3s ease;
    }

.mn-footer-social a:hover {
      color: var(--mn-copper-light);
      transform: translateY(-2px);
    }

.mn-footer-social svg {
      width: 18px;
      height: 18px;
    }

/* ============================================================
   NAV — conteneur (centralisé ici pour être identique sur
   TOUTES les pages : même position, même animation d'entrée).
   Les liens, le CTA, le burger et le drawer sont définis plus
   haut dans ce même fichier.
   ============================================================ */
@keyframes hero-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.hero-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: clamp(20px, 2vw, 32px) clamp(24px, 4vw, 56px);
  display: flex; align-items: center; justify-content: flex-end; gap: var(--space-lg);
  animation: hero-fade-in 0.45s ease 0.16s both;
  border-bottom: 1px solid transparent;
  transition: background-color 0.35s ease, backdrop-filter 0.35s ease,
              padding 0.35s ease, border-color 0.35s ease;
}
/* Au scroll : fond noir translucide + flou, pour ne plus se superposer au contenu */
.hero-nav.is-scrolled {
  background-color: rgba(8, 8, 9, 0.82);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  border-bottom-color: rgba(244, 242, 237, 0.10);
  padding-top: clamp(12px, 1.3vw, 18px);
  padding-bottom: clamp(12px, 1.3vw, 18px);
}
@media (max-width: 767px) {
  .hero-nav { padding: 16px 20px; gap: var(--space-sm); }
  .hero-nav.is-scrolled { padding-top: 11px; padding-bottom: 11px; }
}

/* ============================================================
   LIENS DE CONTACT DU FOOTER — soulignement animé au survol
   Cuivre pour Savanna (1er bloc) · arches pour La Kanopée (dernier).
   Tout est piloté ici : aucun marquage spécifique dans le HTML.
   ============================================================ */
/* Soulignement PERMANENT (largeur du texte), à la couleur de l'univers —
   visible aussi sur mobile (pas besoin de survol). */
.mn-footer-clubs .mn-footer-club-info a {
  align-self: flex-start;
  border-bottom: 1px solid rgba(184, 115, 51, 0.5);   /* cuivre — Savanna */
  transition: color 0.3s ease, border-color 0.3s ease;
}
.mn-footer-clubs .mn-footer-club-info a:hover {
  color: var(--mn-copper-light);
  border-bottom-color: var(--mn-copper);
}
/* La Kanopée (dernier bloc) : accent arches (bleu/violet) */
.mn-footer-clubs .mn-footer-club:last-child .mn-footer-club-info a {
  border-bottom-color: rgba(150, 95, 230, 0.6);
}
.mn-footer-clubs .mn-footer-club:last-child .mn-footer-club-info a:hover {
  color: #b48bff;
  border-bottom-color: #9b6fe6;
}

/* ============================================================
   NAV MOBILE (< 960px) — le bouton diagnostic passe du header
   (où il était à l'étroit / coupé) vers le bas du menu burger.
   ============================================================ */
@media (max-width: 959px) {
  .hero-nav-cta { display: none; }   /* caché dans l'en-tête sur mobile/tablette */
}

/* Bouton diagnostic plein-largeur, ancré en bas du menu burger */
.hero-nav-drawer a.hero-nav-drawer-cta {
  margin-top: auto;
  align-self: stretch;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 18px 24px;
  font-family: var(--font-body); font-style: normal; font-weight: 600;
  font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--mn-paper);
  background: var(--mn-copper-gradient);
  border: 0;
}
.hero-nav-drawer a.hero-nav-drawer-cta .hero-nav-drawer-cta-arrow {
  font-weight: 300; font-size: 1.15em;
}

/* ============================================================
   WORDMARK MONT NOIR dans un texte — toujours droit (jamais
   italique), conforme à la charte. À utiliser quand « MONT NOIR »
   apparaît dans une accroche/citation en Playfair italique.
   ============================================================ */
.mn-wordmark { font-family: var(--font-editorial); font-style: normal; }