/* ==========================================================================
   ODYSSÉE CLUB — Design System
   Inspiré de elephant-skin.com (structure, contraste, typographie display)
   Palette adaptée : noir profond + doré chic + blanc cassé
   ========================================================================== */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Inter:wght@300;400;500;600;700&display=swap');

/* ---------- Variables ---------- */
:root {
  /* Couleurs de base */
  --noir-profond: #0a0a0a;
  --noir-carte: #131110;
  --noir-doux: #17140f;
  --dore: #c9a227;
  --dore-clair: #e0c15c;
  --dore-vif: #d4af37;
  --blanc-casse: #f5f1e8;
  --blanc-pur: #ffffff;
  --gris-texte: #b8b2a3;
  --gris-fonce: #6b6558;
  --ligne: rgba(201, 162, 39, 0.18);
  --overlay-dore: rgba(201, 162, 39, 0.06);

  /* Typo */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Rythme */
  --container-max: 1200px;
  --radius-pill: 999px;
  --radius-md: 4px;

  /* Ombres */
  --shadow-gold: 0 0 40px rgba(201, 162, 39, 0.15);
}

/* ---------- Reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--noir-profond);
  color: var(--blanc-casse);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Typographie ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.1;
  color: var(--blanc-pur);
  letter-spacing: 0.01em;
}

h1 { font-size: clamp(2.6rem, 6vw, 5rem); }
h2 { font-size: clamp(2rem, 4.5vw, 3.4rem); }
h3 { font-size: clamp(1.4rem, 2.5vw, 1.9rem); }

em, .accent-italic {
  font-style: italic;
  color: var(--dore-clair);
  font-weight: 500;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--dore);
  margin-bottom: 18px;
}

.eyebrow::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--dore);
  margin-right: 10px;
  vertical-align: middle;
}

p { color: var(--gris-texte); font-size: 1.05rem; }

.lead {
  font-size: 1.2rem;
  color: var(--gris-texte);
  max-width: 620px;
}

/* ---------- Boutons (pill, façon elephant-skin) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 32px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.btn-primary {
  background: linear-gradient(135deg, var(--dore-clair), var(--dore));
  color: var(--noir-profond);
}

.btn-primary:hover {
  box-shadow: var(--shadow-gold);
  transform: translateY(-2px);
}

.btn-outline {
  background: transparent;
  color: var(--blanc-casse);
  border: 1px solid rgba(245, 241, 232, 0.3);
}

.btn-outline:hover {
  border-color: var(--dore);
  color: var(--dore-clair);
}

.btn-ghost {
  background: transparent;
  color: var(--dore-clair);
  padding: 8px 0;
  letter-spacing: 0.05em;
}

.btn-ghost:hover { color: var(--blanc-pur); }

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  padding: 12px 0;
  background: linear-gradient(to bottom, rgba(10,10,10,0.92), rgba(10,10,10,0));
  backdrop-filter: blur(6px);
}

.site-header.is-solid {
  background: rgba(10, 10, 10, 0.95);
  border-bottom: 1px solid var(--ligne);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.32em;
  color: var(--dore-clair);
  display: inline-flex;
  align-items: center;
}

.logo span { color: var(--blanc-pur); }

.logo-img {
  display: block;
  height: 64px;
  width: auto;
}

/* ==========================================================================
   Nav — burger signature + panneau plein écran
   ========================================================================== */
.header-cta { display: flex; align-items: center; gap: 24px; }

/* Le bouton "Rejoindre" est retiré du header à TOUTES les tailles d'écran
   (02/08/2026) : il est remplacé par un bouton flottant "toujours visible"
   qui reste ancré en bas à droite au scroll, sur desktop comme sur mobile
   (voir composant .floating-cta plus bas). Garde le header aéré : logo +
   burger uniquement. Le lien du markup existant reste en place (inutile de
   toucher au HTML) mais n'est plus affiché nulle part. */
.header-cta .btn-primary { display: none; }

.cta-label-short { display: none; }

/* ---------- Déclencheur burger ---------- */
.nav-toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 310;
  background: transparent;
  border: none;
  padding: 6px 2px;
  flex-shrink: 0;
}

.nav-toggle-label {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gris-texte);
  transition: color 0.3s ease;
}

.nav-toggle:hover .nav-toggle-label { color: var(--dore-clair); }

/* Burger repensé (02/08/2026) : cercle plus grand (meilleure zone de clic),
   fond doré très subtil en permanence (plus de "vide" transparent, signale
   discrètement que c'est un élément interactif), légère mise à l'échelle au
   survol pour un retour tactile. Les 3 traits gardent leur asymétrie
   signature (court/long) mais avec un poids et un espacement resserrés. */
.nav-toggle-bars {
  position: relative;
  width: 42px;
  height: 42px;
  border: 1px solid var(--ligne);
  border-radius: 50%;
  background: rgba(201, 162, 39, 0.04);
  transition: border-color 0.35s ease, background 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}

.nav-toggle:hover .nav-toggle-bars {
  border-color: var(--dore);
  background: rgba(201, 162, 39, 0.1);
  transform: scale(1.06);
  box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.15), 0 4px 16px rgba(201, 162, 39, 0.12);
}

.nav-toggle-bars span {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--blanc-casse);
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.25s ease, width 0.35s ease, left 0.35s ease, background 0.3s ease;
}

.nav-toggle-bars span:nth-child(1) { top: 16px; }
.nav-toggle-bars span:nth-child(2) { top: 20.25px; width: 12px; left: 12px; }
.nav-toggle-bars span:nth-child(3) { top: 24.5px; }

.nav-toggle:hover .nav-toggle-bars span { background: var(--dore-clair); }

.nav-toggle.is-active .nav-toggle-bars {
  border-color: var(--dore);
  background: rgba(201, 162, 39, 0.1);
}

.nav-toggle.is-active .nav-toggle-bars span:nth-child(1) {
  top: 20.25px;
  transform: rotate(45deg);
}

.nav-toggle.is-active .nav-toggle-bars span:nth-child(2) {
  opacity: 0;
  transform: translateX(-6px);
}

.nav-toggle.is-active .nav-toggle-bars span:nth-child(3) {
  top: 20.25px;
  width: calc(100% - 24px);
  left: 12px;
  transform: rotate(-45deg);
}

/* ---------- Backdrop ---------- */
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(6, 5, 4, 0.75);
  backdrop-filter: blur(3px);
  z-index: 290;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.nav-backdrop.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* ---------- Panneau menu plein écran ---------- */
.main-nav {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 560px;
  background:
    radial-gradient(ellipse 70% 60% at 100% 0%, rgba(201,162,39,0.10), transparent 65%),
    var(--noir-carte);
  border-left: 1px solid var(--ligne);
  padding: 40px clamp(32px, 6vw, 72px) 40px;
  z-index: 300;
  overflow: hidden;
  clip-path: inset(0 0 0 100%);
  transition: clip-path 0.55s cubic-bezier(0.76, 0, 0.24, 1);
}

.main-nav.is-open {
  clip-path: inset(0 0 0 0%);
}

/* Grand monogramme en filigrane, ancré au coin */
.main-nav::before {
  content: '';
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 420px;
  height: 420px;
  background-image: url('/images/logo-odyssee-club-carre.webp');
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0.05;
  filter: grayscale(1) brightness(3);
  pointer-events: none;
}

.nav-panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}

.nav-panel-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--dore);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.5s ease 0.15s, transform 0.5s ease 0.15s;
}

.main-nav.is-open .nav-panel-eyebrow { opacity: 1; transform: translateY(0); }

.nav-panel-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--ligne);
  border-radius: 50%;
  position: relative;
  opacity: 0;
  transition: opacity 0.4s ease 0.2s, border-color 0.3s ease;
}

.main-nav.is-open .nav-panel-close { opacity: 1; }
.nav-panel-close:hover { border-color: var(--dore); }

.nav-panel-close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1px;
  background: var(--blanc-casse);
}

.nav-panel-close span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.nav-panel-close span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }

.nav-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  z-index: 1;
}

.nav-links a {
  display: flex;
  align-items: baseline;
  gap: 20px;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5vw, 3.1rem);
  font-weight: 500;
  font-style: italic;
  color: var(--blanc-casse);
  transition: color 0.3s ease, transform 0.3s ease;
  position: relative;
  padding: 12px 0;
  border-bottom: 1px solid transparent;
  opacity: 0;
  transform: translateX(28px);
}

.main-nav.is-open .nav-links a {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.5s ease var(--nav-delay, 0.2s), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) var(--nav-delay, 0.2s);
}

.nav-links a:nth-child(1) { --nav-delay: 0.22s; }
.nav-links a:nth-child(2) { --nav-delay: 0.28s; }
.nav-links a:nth-child(3) { --nav-delay: 0.34s; }
.nav-links a:nth-child(4) { --nav-delay: 0.4s; }
.nav-links a:nth-child(5) { --nav-delay: 0.46s; }

.nav-links a .nav-link-num {
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--dore);
  opacity: 0.7;
  min-width: 28px;
}

.nav-links a:hover {
  color: var(--dore-clair);
  transform: translateX(10px);
}

.nav-links a:hover .nav-link-num { opacity: 1; }

.nav-panel-bottom {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: 32px;
  border-top: 1px solid var(--ligne);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease 0.5s, transform 0.5s ease 0.5s;
}

.main-nav.is-open .nav-panel-bottom { opacity: 1; transform: translateY(0); }

.nav-panel-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.nav-panel-cta .btn { width: auto; }

.nav-panel-legal {
  font-size: 0.76rem;
  color: var(--gris-fonce);
  max-width: 340px;
  line-height: 1.5;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: 100px;
  overflow: hidden;
  background-image:
    radial-gradient(ellipse 60% 50% at 50% 20%, var(--overlay-dore), transparent 70%),
    linear-gradient(100deg, rgba(6,5,4,0.94) 0%, rgba(6,5,4,0.8) 32%, rgba(6,5,4,0.35) 62%, rgba(6,5,4,0.6) 100%),
    url('/images/hero-accueil.webp');
  background-size: auto, auto, cover;
  background-position: center, center, center 30%;
  background-repeat: no-repeat, no-repeat, no-repeat;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, rgba(201,162,39,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 60% 70%, rgba(201,162,39,0.4) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 80% 20%, rgba(201,162,39,0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 85%, rgba(201,162,39,0.3) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 90% 60%, rgba(201,162,39,0.35) 0%, transparent 100%),
    radial-gradient(1px 1px at 10% 65%, rgba(201,162,39,0.3) 0%, transparent 100%);
  pointer-events: none;
}

.hero .container { position: relative; z-index: 2; }

.hero-content { max-width: 780px; }

.hero h1 { margin-bottom: 24px; }

.hero .lead { margin-bottom: 40px; font-size: 1.15rem; }

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 60px;
}

.hero-scroll {
  position: absolute;
  bottom: 40px;
  left: 24px;
  font-size: 0.68rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gris-fonce);
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero-scroll::after {
  content: '↓';
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* ---------- Sections génériques ---------- */
section { position: relative; padding: 120px 0; }

.section-dark { background: var(--noir-profond); }

.section-cream {
  background: var(--blanc-casse);
  color: var(--noir-profond);
}

.section-cream h2, .section-cream h3 { color: var(--noir-profond); }
.section-cream p { color: #57503f; }
.section-cream .eyebrow { color: var(--dore); }

/* Les cartes d'articles gardent leur propre fond sombre même dans une section claire */
.section-cream .article-card h3 { color: var(--blanc-pur); }
.section-cream .article-card p { color: var(--gris-texte); }
.section-cream .article-card .article-meta { color: var(--dore); }

/* .faq-item est conçu pour un fond sombre (résumé blanc cassé, texte gris
   clair, fond quasi transparent) : sur .section-cream (fond clair), ce même
   style devient illisible. Surcharge dédiée, sans toucher aux .faq-item
   utilisés sur fond sombre ailleurs sur le site. */
.section-cream .faq-item {
  background: rgba(10, 10, 10, 0.03);
  border-color: rgba(10, 10, 10, 0.12);
}
.section-cream .faq-item summary { color: var(--noir-profond); }
.section-cream .faq-item[open] summary { color: #57503f; }
.section-cream .faq-item p { color: #57503f; }
.section-cream .faq-item h3 { color: var(--noir-profond); }
.section-cream .faq-item .prose ul li { color: #57503f; }
.section-cream .faq-item .prose ul li strong { color: var(--noir-profond); }

/* Même souci de contraste que .faq-item ci-dessus, mais pour une simple
   liste .prose (sans accordéon) posée directement sur .section-cream, ex.
   "Les règles d'or" de la page /rencontres/ : .prose ul li est prévu pour
   fond sombre (--gris-texte), illisible sur fond clair. */
.section-cream .prose ul li { color: #57503f; }
.section-cream .prose ul li strong { color: var(--noir-profond); }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 64px;
  flex-wrap: wrap;
}

.section-head h2 { max-width: 640px; }

.divider-gold {
  width: 64px;
  height: 2px;
  background: var(--dore);
  margin: 0 auto 24px;
}

/* ---------- Héritage ---------- */
.heritage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.heritage-visual {
  aspect-ratio: 4/5;
  border-radius: var(--radius-md);
  background-image:
    linear-gradient(180deg, transparent 0%, transparent 65%, rgba(6,5,4,0.88) 100%),
    url('/images/accueil-histoire.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid var(--ligne);
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

.heritage-visual::after {
  content: 'COURS ANATOLE FRANCE';
  position: relative;
  margin-bottom: 32px;
  font-size: 0.68rem;
  letter-spacing: 0.25em;
  color: var(--blanc-casse);
}

.heritage-text p { margin-bottom: 28px; }

/* ---------- Cards articles ---------- */
.article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.article-card {
  background: var(--noir-carte);
  border: 1px solid var(--ligne);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.article-card:hover {
  transform: translateY(-6px);
  border-color: var(--dore);
}

.article-thumb {
  aspect-ratio: 16/10;
  background: linear-gradient(140deg, #1a1611, #0a0a0a);
  position: relative;
  border-bottom: 1px solid var(--ligne);
  overflow: hidden;
}

.article-thumb::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(201,162,39,0.35) 1px, transparent 1px);
  background-size: 100% 3px;
  opacity: 0.3;
}

.article-thumb-num {
  position: absolute;
  bottom: 14px;
  right: 18px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2.4rem;
  color: rgba(201, 162, 39, 0.35);
}

/* ---------- Vignette photo (quand l'article a une image) ---------- */
/* Même règle anti-liséré que le reste du site : le fond va sur un
   ::before en inset:-4%, jamais directement sur .article-thumb (l'élément
   qui porte la bordure visible). .article-thumb passe déjà en
   overflow:hidden ci-dessus pour contenir ce débordement. */
.article-thumb-photo::before {
  content: '';
  position: absolute;
  inset: -4%;
  background-image: var(--thumb-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 1;
}

.article-thumb-photo .article-thumb-num {
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}

.article-body { padding: 28px; }

.article-meta {
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dore);
  margin-bottom: 12px;
}

.article-body h3 { margin-bottom: 14px; font-size: 1.3rem; }

.article-link {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blanc-casse);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.article-card:hover .article-link { color: var(--dore-clair); }

/* ---------- Guide clubs ---------- */
.clubs-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}

.clubs-band .stat-row {
  display: flex;
  gap: 48px;
  margin-top: 40px;
}

.stat-item { }
.stat-num {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 600;
  color: var(--dore);
  display: block;
}
.stat-label {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris-fonce);
}

/* ---------- Panneau de chiffres animés (remplace les 4 vignettes vides, 04/08/2026) ---------- */
.clubs-stats-panel {
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, #171310, #0a0a0a);
  border: 1px solid var(--ligne);
  position: relative;
  overflow: hidden;
  padding: 48px 40px;
}

.clubs-stats-panel-glow {
  position: absolute;
  inset: -30%;
  background: radial-gradient(circle at 30% 20%, rgba(212, 175, 55, 0.16), transparent 60%);
  pointer-events: none;
}

.clubs-stats-panel-item {
  position: relative;
  padding: 28px 0;
  border-bottom: 1px solid var(--ligne);
}

.clubs-stats-panel-item:first-child {
  padding-top: 0;
}

.clubs-stats-panel-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.clubs-stats-panel-num {
  display: block;
  font-size: clamp(2.6rem, 5vw, 3.4rem);
  line-height: 1;
  margin-bottom: 10px;
}

.clubs-stats-panel .stat-label {
  display: block;
  font-size: 0.78rem;
}

/* ---------- Bandeau logos clubs, défilement continu (04/08/2026) ---------- */
/* v2 : logos détourés (fonds blanc/noir d'origine retirés au pixel, voir
   images retravaillées) pour s'intégrer directement sur le fond sombre de
   la section, sans cadre ni plaquette. Affichés en grand (hauteur 120px),
   piste dupliquée 4x (au lieu de 2x) pour garantir un défilé qui couvre
   large et déborde des deux côtés de l'écran à toutes les largeurs, y
   compris les très grands écrans. */
.clubs-marquee-section {
  padding: 64px 0 !important;
  overflow: hidden;
}

.clubs-marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.clubs-marquee-track {
  display: flex;
  align-items: center;
  gap: 120px;
  width: max-content;
  animation: clubsMarqueeScroll 40s linear infinite;
}

.clubs-marquee-logo {
  display: block;
  flex: 0 0 auto;
  height: 120px;
  width: 220px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.85;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.clubs-marquee-logo:hover {
  opacity: 1;
  transform: scale(1.06);
}

.clubs-marquee-logo-chaloupe { background-image: url('/images/logo-chaloupe.webp'); width: 260px; }
.clubs-marquee-logo-113avenue { background-image: url('/images/logo-113avenue.webp'); width: 150px; }
.clubs-marquee-logo-vips { background-image: url('/images/logo-vips.webp'); width: 220px; }
.clubs-marquee-logo-lola { background-image: url('/images/logo-lola.webp'); width: 150px; }

@keyframes clubsMarqueeScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-25%); }
}

@media (max-width: 768px) {
  .clubs-marquee-track { gap: 72px; }
  .clubs-marquee-logo { height: 84px; }
  .clubs-marquee-logo-chaloupe { width: 180px; }
  .clubs-marquee-logo-113avenue { width: 104px; }
  .clubs-marquee-logo-vips { width: 154px; }
  .clubs-marquee-logo-lola { width: 104px; }
}

/* ---------- Bandeau Wyylde (CTA fort) ---------- */
.cta-band {
  background-image:
    linear-gradient(180deg, rgba(10,8,6,0.72) 0%, rgba(10,8,6,0.6) 50%, rgba(10,8,6,0.72) 100%),
    url('/images/accueil-rencontres.webp');
  background-size: auto, cover;
  background-position: center, center 35%;
  background-repeat: no-repeat, no-repeat;
  text-align: center;
  border-top: none;
  border-bottom: none;
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.4), inset 0 -1px 0 rgba(0,0,0,0.4);
}

.cta-band .container { max-width: 760px; }
.cta-band h2 { margin-bottom: 22px; }
.cta-band p { margin: 0 auto 40px; }
.cta-band .btn { margin: 0 auto; }

/* ---------- 3 arguments ---------- */
.arguments-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}

.argument-item {
  padding-top: 28px;
  border-top: 1px solid var(--ligne);
}

.argument-num {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--dore);
  font-size: 1.1rem;
  margin-bottom: 16px;
  display: block;
}

.argument-item h3 { margin-bottom: 12px; font-size: 1.25rem; }

/* ---------- Modale 18+ ---------- */
.age-gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(6, 5, 4, 0.97);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.age-gate[hidden] { display: none; }

.age-gate-box {
  max-width: 460px;
  width: 100%;
  text-align: center;
  padding: 56px 40px;
  border: 1px solid var(--ligne);
  border-radius: var(--radius-md);
  background: var(--noir-carte);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}

.age-gate-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
}

.age-gate-logo-img {
  display: block;
  height: 32px;
  width: auto;
}

.age-gate-box h2 { font-size: 1.6rem; margin-bottom: 18px; }
.age-gate-box p { font-size: 0.95rem; margin-bottom: 36px; }

.age-gate-actions { display: flex; flex-direction: column; gap: 14px; }
.age-gate-actions .btn { width: 100%; justify-content: center; }

.age-gate-legal {
  margin-top: 28px;
  font-size: 0.72rem;
  color: var(--gris-fonce);
}

/* ---------- Footer ---------- */
.site-footer {
  background: #060504;
  border-top: 1px solid var(--ligne);
  padding: 72px 0 32px;
}

.footer-brand-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  padding-bottom: 56px;
}

.footer-logo-img {
  display: block;
  height: 84px;
  width: auto;
  max-width: 220px;
}

.footer-disclaimer {
  max-width: 460px;
  font-size: 0.86rem;
  color: var(--gris-texte);
  margin: 0 auto;
}

.footer-top {
  display: flex;
  justify-content: center;
  gap: 64px;
  padding: 40px 0;
  border-top: 1px solid var(--ligne);
  border-bottom: 1px solid var(--ligne);
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.footer-nav {
  display: flex;
  gap: 64px;
  flex-wrap: wrap;
}

.footer-col h4 {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dore);
  margin-bottom: 18px;
  font-weight: 600;
}

.footer-col ul li { margin-bottom: 12px; }
.footer-col a { font-size: 0.9rem; color: var(--gris-texte); transition: color 0.2s ease; }
.footer-col a:hover { color: var(--dore-clair); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.76rem;
  color: var(--gris-fonce);
  letter-spacing: 0.02em;
}

/* ---------- Pages internes (article, listing) ---------- */
.page-hero {
  padding: 170px 0 80px;
  background:
    radial-gradient(ellipse 60% 60% at 50% 0%, var(--overlay-dore), transparent 70%),
    var(--noir-profond);
  border-bottom: 1px solid var(--ligne);
}

.page-hero .eyebrow { }
.page-hero h1 { max-width: 820px; }
.page-hero .lead { margin-top: 20px; }

.breadcrumb {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--gris-fonce);
  margin-bottom: 24px;
}

.breadcrumb a { color: var(--gris-texte); }
.breadcrumb a:hover { color: var(--dore-clair); }

.prose {
  max-width: 760px;
  margin: 0 auto;
}

.prose h2 { margin: 48px 0 20px; font-size: 1.9rem; clear: both; }
.prose h3 { margin: 36px 0 16px; font-size: 1.4rem; clear: both; }
.prose p { margin-bottom: 20px; font-size: 1.05rem; }
.prose ul { margin: 0 0 24px 0; }
.prose ul li {
  color: var(--gris-texte);
  padding-left: 24px;
  position: relative;
  margin-bottom: 10px;
}
.prose ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  background: var(--dore);
}

.inline-cta {
  margin: 48px 0;
  padding: 40px;
  border: 1px solid var(--ligne);
  border-radius: var(--radius-md);
  background: var(--overlay-dore);
  text-align: center;
}

.inline-cta h3 { margin-bottom: 12px; }
.inline-cta p { margin-bottom: 24px; }

/* ---------- Fiches clubs ---------- */
.club-card {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  padding: 40px 0;
  border-bottom: 1px solid var(--ligne);
}

.club-card:last-child { border-bottom: none; }

.club-visual {
  aspect-ratio: 4/3;
  border-radius: var(--radius-md);
  background: linear-gradient(150deg, #1a1611, #0a0a0a);
  border: 1px solid var(--ligne);
}

/* Logos des clubs vedettes (page /clubs-libertins-bordeaux/, 04/08/2026).
   Chaque logo est déjà composé sur le même dégradé que .club-visual (fonds
   détourés en amont) : background-size:contain avec un peu de marge évite
   tout recadrage moche des logos fournis par les clubs eux-mêmes. */
.club-visual-chaloupe { background-image: url('/images/logo-chaloupe.webp'); background-size: cover; background-position: center; }
.club-visual-113avenue { background-image: url('/images/logo-113avenue.webp'); background-size: cover; background-position: center; }
.club-visual-vips { background-image: url('/images/logo-vips.webp'); background-size: cover; background-position: center; }
.club-visual-lola { background-image: url('/images/logo-lola.webp'); background-size: cover; background-position: center; }

.club-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  gap: 20px;
}

.club-rating {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--dore);
  font-size: 1.2rem;
  white-space: nowrap;
}

.club-tags { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 20px; }

.club-tag {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border: 1px solid var(--ligne);
  border-radius: var(--radius-pill);
  color: var(--gris-texte);
}

/* ---------- Blog listing ---------- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

/* ---------- Formulaire / contact simple ---------- */
.legal-block { margin-bottom: 40px; }
.legal-block h2 { margin-bottom: 16px; font-size: 1.5rem; }
.legal-block p, .legal-block li { color: var(--gris-texte); margin-bottom: 12px; }
.legal-block ul { padding-left: 4px; }
.legal-block ul li { padding-left: 20px; position: relative; }
.legal-block ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 5px;
  height: 5px;
  background: var(--dore);
}

/* ---------- FAQ ---------- */
.faq-list { max-width: 760px; margin: 40px auto 0; }

.faq-item {
  border: 1px solid var(--ligne);
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  padding: 20px 26px;
  background: rgba(255, 255, 255, 0.02);
}

.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--blanc-casse);
  font-size: 1.02rem;
  list-style: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: '+';
  float: right;
  color: var(--dore);
  font-size: 1.3rem;
  line-height: 1;
}

.faq-item[open] summary::after { content: '−'; }

.faq-item p {
  margin: 14px 0 0;
  color: var(--gris-texte);
  line-height: 1.6;
  font-size: 0.96rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .heritage, .clubs-band { grid-template-columns: 1fr; gap: 48px; }
  .article-grid, .blog-grid { grid-template-columns: 1fr; }
  .arguments-grid { grid-template-columns: 1fr; gap: 32px; }
  .footer-top { flex-direction: column; align-items: center; text-align: center; gap: 40px; }
  .footer-nav { justify-content: center; }
  .footer-bottom { justify-content: center; text-align: center; }
  .club-card { grid-template-columns: 1fr; }
  section { padding: 80px 0; }
  .hero { padding-top: 120px; }
}

@media (max-width: 480px) {
  .main-nav { max-width: 100%; padding: 28px 24px; }
  .main-nav::before { width: 280px; height: 280px; right: -40px; bottom: -40px; }
  .nav-links a { font-size: clamp(1.7rem, 9vw, 2.1rem); gap: 12px; }
  .nav-panel-legal { max-width: 100%; }
}

@media (max-width: 600px) {
  .logo-img { height: 44px; }
  .header-cta { gap: 10px; }
  .nav-toggle-label { display: none; }
}

@media (max-width: 560px) {
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .btn { justify-content: center; }
  .clubs-band .stat-row { gap: 28px; }
}

@media (max-width: 420px) {
  /* Boutons à texte long (ex : "Créer mon profil gratuit · Sans engagement")
     débordent sur très petit écran à cause de white-space: nowrap sur .btn.
     On autorise le retour à la ligne uniquement ici, en resserrant le padding. */
  .btn {
    white-space: normal;
    text-align: center;
    padding: 16px 20px;
  }
}

/* ==========================================================================
   CTA flottant "toujours visible" (02/08/2026, revu suite retour utilisateur)
   Le bouton "Rejoindre gratuitement" est retiré du header à toutes les
   tailles d'écran (voir .header-cta plus haut) et remplacé par ce CTA
   flottant, ancré et visible en permanence au scroll — desktop ET mobile :
   - Sous 600px : barre pleine largeur collée en bas (facile à toucher au
     pouce, cohérent avec les patterns mobile usuels).
   - Au-dessus de 600px : bouton pilule compact ancré en bas à droite, ne
     gêne jamais la lecture ni le reste de l'interface.
   Pas de dépendance à .anim-ready : ce CTA est critique, il doit fonctionner
   même si le JS d'animation ne charge pas (c'est un <a> HTML simple).
   ========================================================================== */
.floating-cta {
  position: fixed;
  z-index: 250;
}

/* ---------- Mobile (≤600px) : barre pleine largeur ---------- */
@media (max-width: 600px) {
  .floating-cta {
    display: flex;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgba(10, 10, 10, 0.97);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--ligne);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
  }

  .floating-cta .btn-primary {
    flex: 1;
    justify-content: center;
    white-space: normal;
    text-align: center;
    font-size: 0.92rem;
    padding: 15px 18px;
  }

  /* Espace réservé en bas de page pour que la barre collante ne recouvre
     jamais le footer ou le dernier bloc de contenu (ex: FAQ, formulaires). */
  body { padding-bottom: 76px; }
}

/* ---------- Desktop/tablette (≥601px) : pilule flottante bas-droite ---------- */
@media (min-width: 601px) {
  .floating-cta {
    right: clamp(20px, 3vw, 40px);
    bottom: clamp(20px, 3vw, 40px);
  }

  .floating-cta .btn-primary {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(201, 162, 39, 0.15);
  }

  .floating-cta .btn-primary:hover {
    box-shadow: var(--shadow-gold), 0 12px 32px rgba(0, 0, 0, 0.45);
  }
}

@media (prefers-reduced-motion: reduce) {
  .floating-cta .btn-primary { animation: none !important; }
}

/* ==========================================================================
   Animations — page d'accueil
   Esprit : caresses, pas des feux d'artifice. Uniquement transform/opacity.
   Toutes désactivées si prefers-reduced-motion, et si JS ne tourne pas
   (.reveal reste visible tant que <html> n'a pas .anim-ready).
   ========================================================================== */

/* ---------- 1. Modale 18+ ---------- */
.age-gate {
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.age-gate.is-visible { opacity: 1; }

.age-gate-box {
  transform: scale(0.96);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.8s ease;
}
.age-gate.is-visible .age-gate-box {
  transform: scale(1);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 60px rgba(201,162,39,0.12);
}

/* ---------- 2. Header : toujours visible (sticky), plus de retrait au scroll ---------- */
/* Le header (logo + menu) doit rester accessible à tout moment, sur toutes les
   pages — demande explicite du 02/08/2026. L'ancien comportement "se cache au
   scroll vers le bas" a été retiré : .site-header reste fixe en haut, seule sa
   transition de fond (transparent → solide) subsiste. La classe .is-hidden
   n'est plus ajoutée par le JS mais la règle est gardée neutre par sécurité. */
.site-header {
  transition: background 0.4s ease, border-color 0.4s ease;
}
.site-header.is-hidden { transform: none; }

/* Shimmer doré au survol du CTA flottant (desktop) — voir .floating-cta plus bas */
@media (min-width: 901px) {
  .floating-cta .btn-primary {
    background-size: 200% 100%;
    background-position: 0% 0%;
    transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, transform 0.25s ease;
  }
  .floating-cta .btn-primary:hover { background-position: 100% 0%; }
}

/* ---------- 3. Hero : Ken Burns + parallaxe + stagger ---------- */
/* Le zoom lent et la parallaxe s'appliquent à un calque ::before dédié qui
   reprend l'image de fond du hero — jamais sur .hero lui-même, pour ne
   jamais toucher au layout (uniquement transform, jamais background-size). */
.hero {
  isolation: isolate;
}

.hero::after {
  content: '';
  position: absolute;
  inset: -4%;
  z-index: -1;
  background-image:
    radial-gradient(ellipse 60% 50% at 50% 20%, var(--overlay-dore), transparent 70%),
    linear-gradient(100deg, rgba(6,5,4,0.94) 0%, rgba(6,5,4,0.8) 32%, rgba(6,5,4,0.35) 62%, rgba(6,5,4,0.6) 100%),
    url('/images/hero-accueil.webp');
  background-size: auto, auto, cover;
  background-position: center, center, center 30%;
  background-repeat: no-repeat, no-repeat, no-repeat;
  transform: scale(1) translateY(var(--hero-parallax, 0px));
  animation: heroKenBurns 20s ease-in-out infinite alternate;
  will-change: transform;
}

/* La couche de peinture d'origine sur .hero devient inutile une fois le
   calque ::after en place, mais reste en fallback si will-change/transform
   n'a pas d'effet (ex. impression) — on l'assombrit pour éviter le doublon visuel. */
.hero { background-image: none; }

@keyframes heroKenBurns {
  from { transform: scale(1) translateY(var(--hero-parallax, 0px)); }
  to { transform: scale(1.06) translateY(var(--hero-parallax, 0px)); }
}

.hero-content > * {
  opacity: 0;
  transform: translateY(24px);
}

html.anim-ready .hero-content.is-in > * {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--stagger, 0s),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--stagger, 0s);
}

html:not(.anim-ready) .hero-content > * { opacity: 1; transform: none; }

.hero-content > .eyebrow { --stagger: 0.05s; }
.hero-content > h1 { --stagger: 0.17s; }
.hero-content > .lead { --stagger: 0.29s; }
.hero-content > .hero-ctas { --stagger: 0.41s; }

/* ---------- 4. Reveal générique au scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(32px);
}

html.anim-ready .reveal {
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

html.anim-ready .reveal.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Si JS n'a jamais tourné (.anim-ready absent) : tout reste visible */
html:not(.anim-ready) .reveal { opacity: 1; transform: none; }

/* ---------- 6. Cartes d'articles ---------- */
.article-thumb { overflow: hidden; }

.article-thumb::before {
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.article-card:hover .article-thumb::before { transform: scale(1.08); }

.article-thumb-num {
  transition: color 0.4s ease;
}

.article-card:hover .article-thumb-num { color: var(--dore-clair); }

/* ---------- 7. Heritage / clubs visuals : rideau qui s'ouvre ---------- */
/* Le rideau est un calque ::after superposé (pas un clip-path sur l'élément
   observé lui-même) : un clip-path à 100% ramène la "clipped visible box" de
   l'élément à une hauteur nulle, ce qui empêche l'IntersectionObserver de
   jamais le voir entrer dans le viewport (deadlock : invisible tant que non
   révélé, jamais révélé car invisible). L'élément réel garde donc une
   géométrie normale ; seul le rideau décoratif se rétracte. */
.heritage-visual,
.clubs-visual {
  position: relative;
}

.heritage-visual::before,
.clubs-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--noir-profond);
  clip-path: inset(0 0 0 0);
  transition: clip-path 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

html.anim-ready .heritage-visual.reveal-visible::before,
html.anim-ready .clubs-visual.reveal-visible::before {
  clip-path: inset(0 0 100% 0);
}

html:not(.anim-ready) .heritage-visual::before,
html:not(.anim-ready) .clubs-visual::before {
  display: none;
}

/* ---------- 8. Bouton CTA du bandeau : respiration douce ---------- */
.cta-band .btn-primary {
  animation: ctaGlowBreathe 2.5s ease-in-out infinite;
}

@keyframes ctaGlowBreathe {
  0%, 100% { box-shadow: 0 0 0 rgba(212, 175, 55, 0); }
  50% { box-shadow: 0 0 28px rgba(212, 175, 55, 0.35); }
}

/* ---------- 9. Bandeau CTA : zoom lent du fond ---------- */
/* Même principe que le hero : calque ::before dédié, transform uniquement. */
.cta-band {
  isolation: isolate;
  background-image: none;
}

.cta-band::before {
  content: '';
  position: absolute;
  inset: -4%;
  z-index: -1;
  background-image:
    linear-gradient(180deg, rgba(10,8,6,0.72) 0%, rgba(10,8,6,0.6) 50%, rgba(10,8,6,0.72) 100%),
    url('/images/accueil-rencontres.webp');
  background-size: auto, cover;
  background-position: center, center 35%;
  background-repeat: no-repeat, no-repeat;
  transform: scale(1);
  animation: ctaBandKenBurns 25s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes ctaBandKenBurns {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

/* ---------- 10. FAQ : transition douce ---------- */
.faq-item summary {
  transition: color 0.3s ease;
}

.faq-item[open] summary { color: var(--dore-clair); }

.faq-item p {
  opacity: 0;
  transform: translateY(-6px);
}

.faq-item[open] p {
  animation: faqReveal 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes faqReveal {
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Grain de film (très léger, optionnel) ---------- */
.film-grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.025;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Mobile : pas de parallaxe / Ken Burns sous 768px ---------- */
@media (max-width: 768px) {
  .hero::after,
  .cta-band::before {
    animation: none !important;
    transform: none !important;
  }
  .film-grain { display: none; }
}

/* ---------- Accessibilité : prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .age-gate,
  .age-gate-box,
  .site-header,
  .hero-content > *,
  .reveal,
  .article-thumb::before,
  .article-thumb-num,
  .heritage-visual,
  .clubs-visual,
  .faq-item summary,
  .floating-cta .btn-primary {
    transition: none !important;
  }
  .hero::after,
  .cta-band::before,
  .cta-band .btn-primary,
  .hero-scroll::after,
  .clubs-marquee-track,
  .faq-item[open] p {
    animation: none !important;
  }
  .clubs-marquee { overflow-x: auto; }
  .clubs-marquee-track { width: max-content; }
  html.anim-ready .hero-content > *,
  html.anim-ready .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  html.anim-ready .heritage-visual,
  html.anim-ready .clubs-visual {
    clip-path: none !important;
  }
  .faq-item p { opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   Page Odyssée (/odyssee-club-bordeaux/) — intégration photos (02/08/2026)
   .page-hero et .inline-cta sont des classes PARTAGÉES par une douzaine de
   pages : on ne touche jamais leurs règles de base ici. Chaque nouveauté
   ci-dessous est un MODIFICATEUR (.page-hero-photo, .inline-cta-photo) que
   seule cette page applique en plus de la classe partagée — zéro effet de
   bord sur les autres pages du site.
   ========================================================================== */

/* ---------- Hero photographique (image en fond via style inline sur la page) ---------- */
/* ⚠️ RÈGLE ANTI-LISÉRÉ (à respecter sur TOUTE future section à fond photo,
   02/08/2026 — deux causes distinctes rencontrées, les DEUX à vérifier) :

   Cause n°1 — bordure d'accent héritée d'une classe partagée. `.page-hero`
   (utilisée par une douzaine de pages) pose un `border-bottom: 1px solid
   var(--ligne)` doré translucide : invisible sur le fond dégradé plat des
   pages qui n'ont pas de photo, mais devient un liséré lumineux bien visible
   dès qu'une photo claire est posée juste au-dessus, à la jonction avec la
   section suivante. C'était la cause du bug signalé ici — corrigée en
   annulant `border-bottom` sur le modificateur `.page-hero-photo`
   (`.hero` sur l'accueil n'a jamais eu cette bordure, d'où l'absence du
   problème là-bas). Sur toute nouvelle section à fond photo qui réutilise
   une classe partagée, vérifier ses bordures/box-shadow hérités.

   Cause n°2 — bonnes pratiques générales à garder même si la cause n°1 est
   la plus probable : ne jamais poser `background-image` directement sur
   l'élément qui délimite visuellement la section (celui dont la bordure =
   la limite). Le fond passe par un pseudo-élément séparé (`::before`) en
   `inset: -4%`, qui déborde donc toujours au-delà des bords réels — ceinture
   et bretelles contre un éventuel arrondi de sous-pixel de `background-size:
   cover`. La section elle-même n'a plus de `background-image` propre. */
.page-hero-photo {
  min-height: 56vh;
  position: relative;
  isolation: isolate;
  border-bottom: none;
}

.page-hero-photo::before {
  content: '';
  position: absolute;
  inset: -4%;
  z-index: -1;
  background-size: cover;
  background-position: center 38%;
  background-repeat: no-repeat;
}

/* L'URL de l'image est déclarée ici (CSS), pas en style inline sur la
   section HTML : `background-image: inherit` sur un ::before ne reprend pas
   toujours fidèlement un style inline multi-usage posé sur le parent (piège
   déjà rencontré sur le Ken Burns de l'accueil) — plus fiable de fixer
   l'image par page directement via une règle dédiée. */
.page-odyssee .page-hero-photo::before {
  background-image: url('/images/odyssee-hero.webp');
}

.page-guide-clubs .page-hero-photo::before {
  background-image: url('/images/guide-clubs-hero.webp');
}

.page-rencontres .page-hero-photo::before {
  background-image: url('/images/rencontre-hero.webp');
}

.page-blog .page-hero-photo::before {
  background-image: url('/images/blog-hero.webp');
}

.page-mentions-legales .page-hero-photo::before {
  background-image: url('/images/mentions-hero.webp');
}

.page-article01 .page-hero-photo::before {
  background-image: url('/images/article01-hero.webp');
}

.page-article02 .page-hero-photo::before {
  background-image: url('/images/article02-hero.webp');
}

.page-article03 .page-hero-photo::before {
  background-image: url('/images/article03-hero.webp');
}

.page-article04 .page-hero-photo::before {
  background-image: url('/images/article04-hero.webp');
}

.page-article05 .page-hero-photo::before {
  background-image: url('/images/article05-hero.webp');
}

.page-politique-confidentialite .page-hero-photo::before {
  background-image: url('/images/politique-hero.webp');
}

.page-hero-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,5,4,0.78) 0%, rgba(6,5,4,0.5) 55%, rgba(6,5,4,0.82) 100%);
  z-index: 1;
}

.page-hero-photo .container { position: relative; z-index: 2; }

/* ---------- Images flottantes dans le texte ---------- */
.article-img {
  border-radius: var(--radius-md, 8px);
  border: 1px solid rgba(212, 175, 55, 0.3);
  margin: 8px 0 24px;
  max-width: 100%;
  height: auto;
  display: block;
}

.article-img-left { float: left; margin-right: 32px; max-width: 42%; }
.article-img-right { float: right; margin-left: 32px; max-width: 42%; }

@media (max-width: 768px) {
  .article-img-left,
  .article-img-right {
    float: none;
    max-width: 100%;
    margin: 24px 0;
  }
}

/* ---------- Bandeau CTA final avec photo de fond ---------- */
/* Même règle anti-liséré que .page-hero-photo ci-dessus : le fond va sur un
   ::before en inset:-4%, jamais directement sur l'élément qui délimite le
   bandeau (celui avec la bordure visible). overflow:hidden sur l'élément
   réel pour que le débordement du ::before ne déborde pas au-delà du
   border-radius du bandeau. */
.inline-cta-photo {
  position: relative;
  border-color: rgba(212, 175, 55, 0.4);
  isolation: isolate;
  overflow: hidden;
}

.inline-cta-photo::before {
  content: '';
  position: absolute;
  inset: -4%;
  z-index: -1;
  background-image:
    linear-gradient(180deg, rgba(6,5,4,0.72) 0%, rgba(6,5,4,0.55) 45%, rgba(6,5,4,0.8) 100%),
    url('/images/odyssee-cta.webp');
  background-size: auto, cover;
  background-position: center, center 30%;
  background-repeat: no-repeat, no-repeat;
}

.inline-cta-photo h3,
.inline-cta-photo p { color: var(--blanc-casse); }

/* ==========================================================================
   Page Guide clubs libertins Nouvelle-Aquitaine (/clubs-libertins-bordeaux/)
   — intégration photos (03/08/2026). Même logique modificateur que ci-dessus :
   .page-guide-clubs surcharge juste l'image du ::before partagé, rien d'autre.
   ========================================================================== */
.page-guide-clubs .inline-cta-photo::before {
  background-image:
    linear-gradient(180deg, rgba(6,5,4,0.72) 0%, rgba(6,5,4,0.55) 45%, rgba(6,5,4,0.8) 100%),
    url('/images/guide-clubs-cta.webp');
}

/* ==========================================================================
   Page Rencontres (/rencontres/) — refonte totale + intégration photos
   (04/08/2026). Même logique modificateur : .page-rencontres surcharge
   uniquement les images des ::before partagés (page-hero-photo plus haut,
   inline-cta-photo ici), rien d'autre.
   ========================================================================== */
.page-rencontres .inline-cta-photo::before {
  background-image:
    linear-gradient(180deg, rgba(6,5,4,0.72) 0%, rgba(6,5,4,0.55) 45%, rgba(6,5,4,0.8) 100%),
    url('/images/rencontre-cta.webp');
}

/* ==========================================================================
   Article blog 01 : /blog/odyssee-club-bordeaux-souvenirs/ (04/08/2026).
   Même logique modificateur : .page-article01 surcharge uniquement les
   images des ::before partagés (page-hero-photo plus haut, inline-cta-photo
   ici), rien d'autre.
   ========================================================================== */
.page-article01 .inline-cta-photo::before {
  background-image:
    linear-gradient(180deg, rgba(6,5,4,0.72) 0%, rgba(6,5,4,0.55) 45%, rgba(6,5,4,0.8) 100%),
    url('/images/article01-cta.webp');
}

/* ==========================================================================
   Article blog 02 : /blog/les-5-meilleurs-clubs-libertins-de-bordeaux/
   (04/08/2026). Même logique modificateur : .page-article02 surcharge
   uniquement les images des ::before partagés (page-hero-photo plus haut,
   inline-cta-photo ici), rien d'autre.
   ========================================================================== */
.page-article02 .inline-cta-photo::before {
  background-image:
    linear-gradient(180deg, rgba(6,5,4,0.72) 0%, rgba(6,5,4,0.55) 45%, rgba(6,5,4,0.8) 100%),
    url('/images/article02-cta.webp');
}

/* ==========================================================================
   Article blog 03 : /blog/premiere-soiree-libertine-10-regles/ (04/08/2026).
   Même logique modificateur : .page-article03 surcharge uniquement les
   images des ::before partagés (page-hero-photo plus haut, inline-cta-photo
   ici), rien d'autre.
   ========================================================================== */
.page-article03 .inline-cta-photo::before {
  background-image:
    linear-gradient(180deg, rgba(6,5,4,0.72) 0%, rgba(6,5,4,0.55) 45%, rgba(6,5,4,0.8) 100%),
    url('/images/article03-cta.webp');
}

/* ==========================================================================
   Article blog 04 : /blog/wyylde-avis-guide-complet-debuter/ (04/08/2026).
   Même logique modificateur : .page-article04 surcharge uniquement les
   images des ::before partagés (page-hero-photo plus haut, inline-cta-photo
   ici), rien d'autre.
   ========================================================================== */
.page-article04 .inline-cta-photo::before {
  background-image:
    linear-gradient(180deg, rgba(6,5,4,0.72) 0%, rgba(6,5,4,0.55) 45%, rgba(6,5,4,0.8) 100%),
    url('/images/article04-cta.webp');
}

/* ==========================================================================
   Article blog 05 : /blog/echanger-en-couple-bordeaux/ (04/08/2026).
   Même logique modificateur : .page-article05 surcharge uniquement les
   images des ::before partagés (page-hero-photo plus haut, inline-cta-photo
   ici), rien d'autre.
   ========================================================================== */
.page-article05 .inline-cta-photo::before {
  background-image:
    linear-gradient(180deg, rgba(6,5,4,0.72) 0%, rgba(6,5,4,0.55) 45%, rgba(6,5,4,0.8) 100%),
    url('/images/article05-cta.webp');
}

/* ==========================================================================
   Page Blog (/blog/) : bandeau CTA de fin de liste (04/08/2026). Remplace
   l'ancienne ligne de texte seule ("Envie d'aller plus loin ?") posée sans
   habillage entre la grille d'articles et le disclaimer. Réutilise
   article05-cta.webp (déjà sur le serveur, ambiance chaleureuse cohérente).
   Le fond réel de .cta-band vit sur le pseudo-élément ::before (Ken Burns,
   voir règle .cta-band::before plus bas dans le fichier) : on surcharge donc
   ce même ::before pour cette page, pas .cta-band directement.
   ========================================================================== */
.page-blog-cta-band::before {
  background-image:
    linear-gradient(180deg, rgba(10,8,6,0.72) 0%, rgba(10,8,6,0.6) 50%, rgba(10,8,6,0.72) 100%),
    url('/images/article05-cta.webp');
  background-position: center, center 30%;
}

/* ---------- Bande disclaimer 18+ de fin de page blog (04/08/2026) ---------- */
/* Remplace l'ancien bloc .section-cream pleine hauteur (120px de padding,
   fond blanc) : juste une ligne discrète, fond noir profond, pour terminer
   la page dans les tons sombres du site plutôt que sur un bloc clair. */
.page-blog-disclaimer {
  padding: 28px 0;
  background: var(--noir-profond);
}

.page-blog-disclaimer p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--gris-fonce);
  text-align: center;
}