/* ========== PAGE SYSTEM ========== */
.page { display: none; padding-top: 72px; }
.page.active { display: block; animation: fadeIn 0.5s ease; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ========== HERO ========== */
.hero {
  min-height: 88vh;
  background: var(--navy-950);
  color: var(--cream);
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  z-index: 0;
  opacity: 0.65;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: 
    linear-gradient(180deg, rgba(1, 21, 45, 0.7) 0%, rgba(1, 21, 45, 0.5) 50%, rgba(1, 21, 45, 0.85) 100%),
    linear-gradient(90deg, rgba(1, 21, 45, 0.55) 0%, rgba(1, 21, 45, 0.15) 100%);
  pointer-events: none;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: 
    radial-gradient(ellipse at 20% 50%, rgba(183, 144, 68, 0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(183, 144, 68, 0.08) 0%, transparent 50%);
  pointer-events: none;
}

.hero-grain {
  position: absolute; inset: 0;
  z-index: 2;
  opacity: 0.3;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
  pointer-events: none;
}

.hero-arc {
  position: absolute;
  right: -15%;
  top: 50%;
  transform: translateY(-50%);
  width: 900px;
  height: 900px;
  border: 1px solid var(--gold-500);
  border-radius: 50%;
  opacity: 0.2;
  z-index: 2;
  pointer-events: none;
}

/* Sur mobile, le cercle décoratif est réduit pour éviter de déborder
   du viewport et de créer un scroll horizontal lorsque la modale d'adhésion
   est ouverte sur la page #adherer. Les !important sont nécessaires pour
   surcharger les styles inline (style="right: -10%") présents sur certaines
   instances de .hero-arc dans le HTML. */
@media (max-width: 720px) {
  .hero-arc {
    width: 400px !important;
    height: 400px !important;
    right: -50% !important;
  }
}

/* ========================================================================
   GARDE-FOU RESPONSIVE GLOBAL
   ========================================================================

   Plusieurs barres de filtres du site utilisent un pattern de "carrousel
   horizontal" sur mobile : overflow-x: auto + flex-wrap: nowrap +
   flex-shrink: 0 sur les boutons. Ce pattern génère un scrollWidth très
   large à l'intérieur du conteneur, qui est censé rester contenu par
   l'overflow-x: auto.

   Sur certains navigateurs mobiles (iOS Chrome notamment), l'isolation
   de ce scroll fuit si le conteneur n'a pas de max-width explicite : le
   scroll horizontal "déborde" sur la page entière, créant un décalage
   visuel quand l'utilisateur fait défiler verticalement.

   Conteneurs concernés (recensés via audit) :
     .events-filters, .gallery-filters, .directory-filters,
     .opp-categories, .opp-urgency-filter, .business-status-filter,
     .admin-status-filter, #relationsStatusFilter, .admin-tabs

   Solution en 3 niveaux : */

/* Niveau 1 : aucune page ne doit générer de scroll horizontal,
   quoi qu'il arrive à l'intérieur. */
.page {
  overflow-x: hidden;
}

/* Niveau 2 : sur mobile, contraindre tous les carrousels horizontaux
   à respecter strictement la largeur du viewport. Le max-width: 100%
   isole leur scrollWidth interne et empêche la fuite vers la page. */
@media (max-width: 768px) {
  .events-filters,
  .gallery-filters,
  .directory-filters,
  .opp-categories,
  .opp-urgency-filter,
  .business-status-filter,
  .admin-status-filter,
  #relationsStatusFilter,
  .admin-tabs {
    max-width: 100%;
    /* contain layout isole le calcul de layout du scrollable
       du reste de la page (limite la propagation du scrollWidth) */
    contain: layout;

    /* Autorise le scroll horizontal interne pour que les onglets/filtres
       qui débordent restent accessibles (la page elle-même reste en
       overflow-x: hidden, ce qui empêche les fuites globales). */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;

    /* Empêche tout retour à la ligne — les éléments doivent rester sur
       une seule ligne pour que le scroll horizontal ait du sens. */
    flex-wrap: nowrap !important;

    /* Masque la scrollbar disgracieuse sur mobile (Firefox + WebKit).
       Le défilement reste fonctionnel au touch. */
    scrollbar-width: none;
  }
  .events-filters::-webkit-scrollbar,
  .gallery-filters::-webkit-scrollbar,
  .directory-filters::-webkit-scrollbar,
  .opp-categories::-webkit-scrollbar,
  .opp-urgency-filter::-webkit-scrollbar,
  .business-status-filter::-webkit-scrollbar,
  .admin-status-filter::-webkit-scrollbar,
  #relationsStatusFilter::-webkit-scrollbar,
  .admin-tabs::-webkit-scrollbar {
    display: none;
  }

  /* Évite que les enfants directs ne se rétrécissent en mode flex,
     ce qui aurait empêché le débordement horizontal recherché. */
  .events-filters > *,
  .gallery-filters > *,
  .directory-filters > *,
  .opp-categories > *,
  .opp-urgency-filter > *,
  .business-status-filter > *,
  .admin-status-filter > *,
  #relationsStatusFilter > *,
  .admin-tabs > * {
    flex-shrink: 0;
  }
}

/* Niveau 3 : garde-fou ultime sur body + html, pour neutraliser tout
   scroll horizontal résiduel quel que soit l'élément qui déborde.
   Important : on ne le met que sur mobile pour ne pas affecter
   d'éventuelles animations desktop qui jouent sur le scroll horizontal. */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
    /* Empêche le rubber-band scroll sur iOS qui peut révéler
       brièvement un débordement même quand overflow-x: hidden */
    position: relative;
  }
}

.hero-arc::before {
  content: '';
  position: absolute;
  inset: 40px;
  border: 1px solid var(--gold-500);
  border-radius: 50%;
  opacity: 0.5;
}

.hero-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 4rem 2rem;
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4rem;
  align-items: center;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 2rem;
  color: var(--gold-400);
}

.hero-tag::before,
.hero-tag::after {
  content: '';
  width: 40px; height: 1px;
  background: var(--gold-500);
}

.hero-title {
  font-size: clamp(2.5rem, 5.5vw, 4.8rem);
  font-weight: 500;
  color: var(--cream);
  margin-bottom: 1.8rem;
}

.hero-title em {
  font-style: normal;
  color: var(--gold-400);
  font-weight: 400;
}

.hero-lead {
  font-size: 1.1rem;
  color: rgba(245, 239, 227, 0.75);
  max-width: 560px;
  margin-bottom: 2.5rem;
  font-weight: 300;
  line-height: 1.7;
}

.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

.btn {
  display: inline-flex;
  align-items: center;
  /* justify-content: center pour que le texte soit centré quand le bouton
     est étiré (typiquement en mobile avec width: 100% sur .profile-actions
     button). Sans cette règle, le texte reste collé à gauche du bouton
     en mobile, ce qui donne un effet désaligné. */
  justify-content: center;
  gap: 0.75rem;
  padding: 0.95rem 2rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border-radius: 2px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.25s ease;
  font-family: 'Manrope', sans-serif;
  background: none;
  /* Retire le soulignement quand .btn est appliqué à un <a> (les <button>
     n'ont pas de soulignement par défaut, mais les liens si). */
  text-decoration: none;
}

.btn-primary {
  background: var(--gold-500);
  color: var(--navy-950);
}
.btn-primary:hover { background: var(--gold-400); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(183, 144, 68, 0.25); }

.btn-ghost {
  background: transparent;
  color: var(--cream);
  border-color: rgba(245, 239, 227, 0.25);
}
.btn-ghost:hover { border-color: var(--gold-500); color: var(--gold-400); }

.btn-dark {
  background: var(--navy-900);
  color: var(--cream);
}
.btn-dark:hover { background: var(--navy-800); transform: translateY(-2px); }

.btn-outline {
  background: transparent;
  border-color: var(--navy-900);
  color: var(--navy-900);
}
.btn-outline:hover { background: var(--navy-900); color: var(--cream); }

/* Hero visual */
.hero-visual {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-emblem {
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--navy-700) 0%, var(--navy-950) 70%);
  border: 1px solid var(--line-strong);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), inset 0 0 60px rgba(183, 144, 68, 0.08);
}

.hero-emblem::before {
  content: '';
  position: absolute;
  inset: -20px;
  border: 1px dashed rgba(183, 144, 68, 0.25);
  border-radius: 50%;
  animation: spin 60s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.emblem-content { text-align: center; padding: 2rem; }
.emblem-cap {
  font-family: 'StraightHyphen', 'Cormorant Garamond', serif;
  font-size: 5rem;
  font-weight: 600;
  color: var(--cream);
  letter-spacing: 0.08em;
  line-height: 1;
  margin-bottom: 0.5rem;
}
.emblem-town {
  color: var(--gold-400);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 500;
}
.emblem-line {
  width: 60px; height: 1px;
  background: var(--gold-500);
  margin: 1rem auto;
}
.emblem-caption {
  font-family: 'Manrope', sans-serif;
  font-style: italic;
  color: rgba(245, 239, 227, 0.7);
  font-size: 0.95rem;
}

/* ========== SECTIONS ========== */
.section {
  padding: 7rem 2rem;
  position: relative;
}

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

.section-dark {
  background: var(--navy-950);
  color: var(--cream);
}

.section-cream {
  background: var(--cream);
}

.section-header {
  max-width: 720px;
  margin-bottom: 4rem;
}

.section-header.center { margin: 0 auto 4rem; text-align: center; }

.section-title {
  font-size: clamp(2rem, 4vw, 3.2rem);
  margin: 1rem 0 1.5rem;
  color: var(--ink);
}

.section-dark .section-title { color: var(--cream); }
.section-title em { font-style: normal; color: var(--gold-600); }
.section-dark .section-title em { color: var(--gold-400); }

.section-lead {
  font-size: 1.1rem;
  color: var(--muted);
  font-weight: 300;
  line-height: 1.7;
}

.section-dark .section-lead { color: rgba(245, 239, 227, 0.7); }