/* ═══════════════════════════════════════════
   ARTSCÈNE — style.css
   Version consolidée
═══════════════════════════════════════════ */

/* ── Variables ── */
:root {
  --bg:          #000000;
  --bg-header:   #000000;
  --white:       #ffffff;
  --white-dim:   rgba(255,255,255,0.55);
  --white-faint: rgba(255,255,255,0.12);
  --gold:        #c9a84c;
  --gold-dim:    rgba(201,168,76,0.35);
  --font-display:'Cormorant Garamond', Georgia, serif;
  --font-ui:     'Nunito', sans-serif;
  --font-body:   'Nunito', sans-serif;
  --header-h:    72px;
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; scrollbar-width: thin; scrollbar-color: var(--gold-dim) transparent; overflow-x: hidden; }
body { background: var(--bg); color: var(--white); font-family: var(--font-ui); font-weight: 300; overflow-x: hidden; }

/* ═══════════════════════════════════════════
   HEADER
═══════════════════════════════════════════ */
#header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  background: transparent;
  transition: background 0.6s var(--ease-out), backdrop-filter 0.6s var(--ease-out), border-bottom 0.6s;
}
#header.scrolled {
  background: var(--bg-header);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--white-faint);
}

/* Logo */
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--white); z-index: 110; }
.logo svg { flex-shrink: 0; transition: transform 0.4s var(--ease-out); }
.logo:hover svg { transform: rotate(45deg); }
.logo-text { font-family: var(--font-ui); font-weight: 700; font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; }

/* Burger */
/* Nav */
/* nav replaced */

/* ═══════════════════════════════════════════
   HERO
═══════════════════════════════════════════ */
.hero { position: relative; width: 100%; height: 100vh; min-height: 600px; overflow: hidden; }

.hero__video-wrap { position: absolute; inset: 0; }
.hero__video-wrap video { width: 100%; height: 100%; object-fit: cover; }
.hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0.75) 100%);
}

.hero__content {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: 1;
  transition: opacity 0.8s ease;
  pointer-events: none;
}

.hero__eyebrow {
  font-family: var(--font-ui); font-size: 12px; font-weight: 400;
  letter-spacing: 0.35em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 24px; opacity: 0; transform: translateY(16px);
  animation: fadeUp 0.9s var(--ease-out) 0.3s forwards;
}
.hero__eyebrow strong {
  font-weight: 700;
  font-size: 13px;
}

.hero__title {
  font-family: var(--font-ui); font-style: italic; font-weight: 300;
  font-size: clamp(26px, 3.5vw, 52px); line-height: 1.15;
  color: var(--white); margin-bottom: 28px;
  opacity: 0; transform: translateY(20px);
  animation: fadeUp 1s var(--ease-out) 0.5s forwards;
}
.hero__title em { font-style: italic; color: var(--white-dim); font-family: var(--font-ui); }

.hero__sub {
  font-family: var(--font-ui); font-size: 13px; font-weight: 300;
  letter-spacing: 0.18em; color: var(--white-dim);
  margin-bottom: 52px; opacity: 0; transform: translateY(16px);
  animation: fadeUp 0.9s var(--ease-out) 0.7s forwards;
}

.hero__cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 32px; border: 1px solid var(--gold-dim);
  color: var(--white); text-decoration: none;
  font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase;
  align-self: flex-start; position: relative; overflow: hidden;
  opacity: 1;
  transition: color 0.4s, border-color 0.4s;
}
.hero__cta::before {
  content: ''; position: absolute; inset: 0;
  background: var(--gold); transform: scaleX(0);
  transform-origin: left; transition: transform 0.4s var(--ease-out); z-index: -1;
}
.hero__cta:hover { color: var(--bg); border-color: var(--gold); }
.hero__cta:hover::before { transform: scaleX(1); }

.hero__credit {
  position: absolute; bottom: 16px; right: 20px; z-index: 2;
  font-family: var(--font-ui); font-size: 9px; font-weight: 300;
  letter-spacing: 0.12em; color: rgba(255,255,255,0.28);
  pointer-events: none; opacity: 0;
  animation: fadeIn 1s ease 1.6s forwards;
}

/* ── Scroll indicator ── */
.scroll-indicator {
  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
  z-index: 20; display: inline-flex; align-items: center; justify-content: center;
  opacity: 1;
  text-decoration: none; color: inherit; width: 52px; height: 52px;
}
.scroll-indicator__ring { position: absolute; inset: 0; width: 52px; height: 52px; pointer-events: none; }
.scroll-indicator__ring circle {
  fill: none; stroke: var(--gold); stroke-width: 1.2; stroke-linecap: round;
  r: 24; cx: 26; cy: 26; stroke-dasharray: 151; stroke-dashoffset: 151;
  transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset 0s;
}
.scroll-indicator:hover .scroll-indicator__ring circle {
  animation: ringLoop 1.4s var(--ease-out) infinite;
}
@keyframes ringLoop {
  0%   { stroke-dashoffset: 151; }
  60%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -151; }
}

@keyframes arrowBounce {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50%       { transform: translateY(6px); opacity: 1; }
}
.scroll-indicator__arrow {
  font-size: 28px; color: rgba(255,255,255,0.5); line-height: 1; display: inline-block;
  animation: arrowBounce 1.6s ease-in-out infinite;
  transition: color 0.4s var(--ease-out), text-shadow 0.4s var(--ease-out);
}
.scroll-indicator:hover .scroll-indicator__arrow {
  animation: none; transform: translateY(0);
  color: var(--gold); text-shadow: 0 0 14px rgba(201,168,76,0.7);
}

/* ═══════════════════════════════════════════
   AFFICHE
═══════════════════════════════════════════ */
.affiche { background: var(--bg); padding-bottom: 0; scroll-margin-top: var(--header-h); }

.affiche__header {
  padding: 32px 8vw 24px;
  text-align: center; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}

.affiche__label {
  display: block; font-family: var(--font-ui); font-size: 10px; font-weight: 700;
  letter-spacing: 0.45em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px;
}

.affiche__title {
  font-family: var(--font-ui); font-style: italic; font-weight: 300;
  font-size: clamp(26px, 3.5vw, 52px); color: var(--white); line-height: 1;
}

/* Spread magazine */
.affiche__spread { display: grid; grid-template-columns: 48% 1fr; align-items: stretch; }

.affiche__visual { position: relative; overflow: hidden; display: flex; }
.affiche__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  filter: grayscale(100%);
  border-radius: 0;
  transition: filter 0.7s var(--ease-out), border-radius 0.7s var(--ease-out), transform 0.8s var(--ease-out);
}
.affiche__visual:hover img { filter: grayscale(0%); border-radius: 50px 0 0 50px; transform: scale(1.02); }
.affiche__visual-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to right, transparent 70%, var(--bg) 100%);
  pointer-events: none;
}
.affiche__credit {
  position: absolute; bottom: 12px; right: 14px; z-index: 3;
  font-family: var(--font-ui); font-size: 9px; font-weight: 300;
  letter-spacing: 0.12em; color: rgba(255,255,255,0.32); pointer-events: none;
}

.affiche__content {
  padding: 40px 8vw 40px 6vw; display: flex; flex-direction: column;
  justify-content: center;
  /* border-left retiré ici — posé sur le slider (fixe) à la place */
}

/* Séparateur fixe — attaché au conteneur slider, pas au slide */
.affiche__slider {
  border-left: 1px solid var(--white-faint);
}

.affiche__meta { display: flex; flex-direction: column; gap: 10px; margin-bottom: 36px; }
.affiche__meta-item {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-ui); font-size: 12px; font-weight: 300;
  letter-spacing: 0.08em; color: var(--gold);
}

.affiche__date-arrow { margin-bottom: 12px; }

.affiche__show-title {
  font-family: var(--font-ui); font-style: italic; font-weight: 300;
  font-size: clamp(26px, 3.5vw, 52px); color: var(--white); line-height: 1.1; margin-bottom: 10px;
}
.affiche__sub {
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  letter-spacing: 0.25em; text-transform: uppercase; color: var(--white-dim); margin-bottom: 32px;
}
.affiche__divider { width: 48px; height: 1px; background: var(--gold-dim); margin-bottom: 32px; }
.affiche__pitch {
  font-family: var(--font-body); font-size: 15px; font-weight: 300;
  line-height: 1.9; letter-spacing: 0.02em; color: var(--white-dim);
  margin-bottom: 48px; max-width: 480px;
}
.affiche__cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 32px; border: 1px solid var(--gold-dim);
  color: var(--white); text-decoration: none;
  font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase;
  align-self: flex-start; position: relative; overflow: hidden;
  transition: color 0.4s, border-color 0.4s;
}
.affiche__cta::before {
  content: ''; position: absolute; inset: 0;
  background: var(--gold); transform: scaleX(0);
  transform-origin: left; transition: transform 0.4s var(--ease-out); z-index: 0;
}
.affiche__cta span, .affiche__cta svg { position: relative; z-index: 1; }
.affiche__cta:hover { background: transparent; color: #000; border-color: var(--gold); }
.affiche__cta:hover::before { transform: scaleX(1); }

/* ═══════════════════════════════════════════
   GALERIE
═══════════════════════════════════════════ */
.galerie { background: var(--bg); padding-bottom: 80px; }

.galerie__header { padding: 32px 0 24px; text-align: center; }
.galerie__label {
  display: block; font-family: var(--font-ui); font-size: 10px; font-weight: 700;
  letter-spacing: 0.45em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px;
}
.galerie__title {
  font-family: var(--font-ui); font-style: italic; font-weight: 300;
  font-size: clamp(26px, 3.5vw, 52px); color: var(--white); line-height: 1;
}

.galerie__row { display: flex; width: 100%; height: 280px; gap: 3px; margin-bottom: 3px; align-items: stretch; }

.galerie__item { position: relative; overflow: hidden; flex-shrink: 0; min-width: 0; height: 280px; }
.galerie__item img {
  width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
  filter: grayscale(100%); cursor: pointer;
  transition: filter 0.6s var(--ease-out), transform 0.7s var(--ease-out), border-radius 0.6s var(--ease-out);
}
.galerie__item:hover img { filter: grayscale(0%); transform: scale(1.04); border-radius: 12px; }

/* Bouton Voir plus */
.galerie__more {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; background: none; border: none; cursor: pointer;
  flex: 0.7; min-width: 100px; padding: 0;
}
.galerie__more-inner { position: relative; width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; }
.galerie__more-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.galerie__more-circle {
  stroke: rgba(255,255,255,0.25); stroke-width: 1;
  stroke-dasharray: 170; stroke-dashoffset: 170;
  transform: rotate(-90deg); transform-origin: center; transition: stroke-dashoffset 0s, stroke 0.3s;
}
.galerie__more:hover .galerie__more-circle {
  stroke: var(--gold); stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.6s var(--ease-out), stroke 0.3s;
}
.galerie__more-icon {
  font-family: var(--font-ui); font-size: 22px; font-weight: 300;
  color: rgba(255,255,255,0.5); position: relative; z-index: 1;
  transition: color 0.3s, transform 0.4s var(--ease-out);
}
.galerie__more:hover .galerie__more-icon { color: var(--gold); transform: rotate(45deg); }
.galerie__more-label {
  font-family: var(--font-ui); font-size: 10px; font-weight: 700;
  letter-spacing: 0.25em; text-transform: uppercase; color: rgba(255,255,255,0.4); transition: color 0.3s;
}
.galerie__more:hover .galerie__more-label { color: var(--gold); }

/* ═══════════════════════════════════════════
   BACK TO TOP
═══════════════════════════════════════════ */
.back-to-top {
  position: fixed; bottom: 32px; right: 32px; z-index: 200;
  opacity: 0; pointer-events: none; transform: translateY(12px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
  cursor: pointer; background: none; border: none; padding: 0;
}
.back-to-top.visible { opacity: 1; pointer-events: auto; transform: translateY(0); }

.back-to-top__svg { display: block; overflow: visible; }

/* Losange — fond + bordure dorée */
.back-to-top__diamond {
  fill: rgba(0,0,0,0.55);
  stroke: rgba(201,168,76,0.55);
  stroke-width: 1;
  transition: stroke 0.35s;
}
/* Remplissage doré au survol */
.back-to-top__fill {
  fill: #c9a84c;
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(45deg) scale(0);
  transition: transform 0.38s var(--ease-out);
}
.back-to-top:hover .back-to-top__fill {
  transform: rotate(45deg) scale(1);
}
.back-to-top:hover .back-to-top__diamond {
  stroke: #c9a84c;
}

/* Flèche — dorée au repos, noire au survol */
.back-to-top__arrow {
  transition: stroke 0.3s;
}
.back-to-top:hover .back-to-top__arrow { stroke: #000; }

/* Texte HAUT — doré au repos, noir au survol */
.back-to-top__text {
  fill: #c9a84c;
  transition: fill 0.3s;
}
.back-to-top:hover .back-to-top__text { fill: #000; }


/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */
@media (max-width: 900px) {
  .affiche__spread { grid-template-columns: 1fr; }
  .affiche__visual { height: 55vw; min-height: 300px; }
  .affiche__visual-overlay { background: linear-gradient(to bottom, transparent 70%, var(--bg) 100%); }
  .affiche__content { border-left: none; border-top: 1px solid var(--white-faint); padding: 48px 6vw; }
}
@media (max-width: 768px) {
  #header { padding: 0 24px; }
  .hero__content { padding: 0 6vw; padding-top: var(--header-h); }
  /* nav mobile — see typo nav */
}

/* Nouvelles lignes galerie ajoutées dynamiquement */
.galerie__row--dynamic {
  display: flex;
  width: 100%;
  height: 280px;
  gap: 3px;
  margin-bottom: 3px;
  align-items: stretch;
}





/* ═══════════════════════════════════════════
   BURGER — traits animés + MENU + croix
═══════════════════════════════════════════ */
.burger {
  position: relative;
  z-index: 110;
  background: none;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
  overflow: hidden;
}

/* Traits burger */
.burger__lines {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  flex-shrink: 0;
}

.burger__line {
  display: block;
  height: 1.2px;
  background: var(--white);
  border-radius: 2px;
  transition: width 0.4s var(--ease-out);
}

.burger__line--1 { width: 22px; }
.burger__line--2 { width: 16px; }
.burger__line--3 { width: 10px; }

/* Hover : rotation des tailles en boucle */
.burger:hover:not(.active) .burger__line--1 { animation: lineAnim1 1.2s var(--ease-out) infinite; }
.burger:hover:not(.active) .burger__line--2 { animation: lineAnim2 1.2s var(--ease-out) infinite; }
.burger:hover:not(.active) .burger__line--3 { animation: lineAnim3 1.2s var(--ease-out) infinite; }

@keyframes lineAnim1 {
  0%   { width: 22px; }
  33%  { width: 10px; }
  66%  { width: 16px; }
  100% { width: 22px; }
}
@keyframes lineAnim2 {
  0%   { width: 16px; }
  33%  { width: 22px; }
  66%  { width: 10px; }
  100% { width: 16px; }
}
@keyframes lineAnim3 {
  0%   { width: 10px; }
  33%  { width: 16px; }
  66%  { width: 22px; }
  100% { width: 10px; }
}

/* Label MENU */
.burger__label {
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.3em;
  line-height: 1.7;
  color: var(--white);
  transition: opacity 0.3s, transform 0.4s var(--ease-out);
}

/* Croix — cachée par défaut */
.burger__cross {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  color: var(--gold);
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  transition: opacity 0.35s, transform 0.4s var(--ease-out);
  pointer-events: none;
}

/* État actif — masque traits+label, montre croix */
.burger.active .burger__lines,
.burger.active .burger__label {
  opacity: 0;
  transform: scale(0.8);
}
.burger.active .burger__cross {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
  animation: crossTurn 4s ease-in-out infinite;
  animation-delay: 2s;
}

@keyframes crossTurn {
  0%   { transform: translate(-50%, -50%) scale(1) rotate(0deg);  }
  10%  { transform: translate(-50%, -50%) scale(1) rotate(90deg); }
  90%  { transform: translate(-50%, -50%) scale(1) rotate(90deg); }
  100% { transform: translate(-50%, -50%) scale(1) rotate(0deg);  }
}

/* ═══════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════ */
.footer {
  background: var(--bg);
}

/* ── Footer main : logo + citation + réseaux sur une ligne ── */
.footer__main {
  padding: 20px 8vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.footer__quote-wrap {
  flex: 1;
  text-align: center;
}

.footer__quote {
  font-family: var(--font-ui);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(10px, 0.8vw, 12px);
  line-height: 1.5;
  color: var(--gold);
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}

.footer__author {
  font-family: var(--font-ui);
  font-style: italic;
  font-weight: 300;
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--gold);
  opacity: 0.7;
}

.footer__social {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.footer__name {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}

.footer__social {
  display: flex;
  align-items: center;
  gap: 28px;
}

.footer__social-link {
  color: rgba(255,255,255,0.3);
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.footer__social-link:hover {
  color: var(--gold);
  transform: translateY(-2px);
}

/* ── Bottom : légal ── */
.footer__bottom {
  padding: 0 8vw 28px;
}

.footer__legal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.footer__copy {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.45);
}

.footer__dot {
  color: rgba(255,255,255,0.15);
  font-size: 11px;
}

.footer__link {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.3);
  text-decoration: none;
  position: relative;
  transition: color 0.3s;
}

.footer__link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0; right: 0;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-out);
}

.footer__link:hover { color: var(--white-dim); }
.footer__link:hover::after { transform: scaleX(1); }

/* ═══════════════════════════════════════════
   PAGES LÉGALES
═══════════════════════════════════════════ */
.legal-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  background: var(--bg-header);
  border-bottom: 1px solid var(--white-faint);
}

.legal-back {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--white-dim);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: color 0.3s;
}
.legal-back:hover { color: var(--gold); }

.legal-main {
  max-width: 760px;
  margin: 0 auto;
  padding: calc(var(--header-h) + 80px) 40px 80px;
}

.legal-intro {
  margin-bottom: 60px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--white-faint);
}

.legal-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}

.legal-title {
  font-family: var(--font-ui);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(28px, 4vw, 48px);
  color: var(--white);
  line-height: 1.1;
}

.legal-content { margin-bottom: 48px; }

.legal-section {
  margin-bottom: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--white-faint);
}
.legal-section:last-child { border-bottom: none; }

.legal-section h2 {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: 20px;
}

.legal-section h3 {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--gold);
  margin-bottom: 10px;
  margin-top: 24px;
  text-transform: uppercase;
}

.legal-section p {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--white-dim);
  margin-bottom: 12px;
}

.legal-section ul {
  list-style: none;
  padding: 0;
  margin-bottom: 12px;
}

.legal-section ul li {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--white-dim);
  padding-left: 16px;
  position: relative;
  margin-bottom: 6px;
}

.legal-section ul li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-size: 11px;
}

.legal-section strong {
  font-weight: 600;
  color: rgba(255,255,255,0.7);
}

.legal-section a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid var(--gold-dim);
  transition: border-color 0.3s;
}
.legal-section a:hover { border-color: var(--gold); }

/* Placeholder à remplacer */
.placeholder {
  color: var(--gold);
  font-style: italic;
  opacity: 0.7;
  font-size: 12px;
}

.legal-update {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 300;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.1em;
  text-align: right;
}

/* Footer légal */
.legal-footer {
  border-top: 1px solid var(--white-faint);
  padding: 24px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 300;
  color: rgba(255,255,255,0.45);
}

.legal-footer a {
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color 0.3s;
}
.legal-footer a:hover { color: var(--gold); }

/* ═══════════════════════════════════════════
   CONTACT
═══════════════════════════════════════════ */
.contact {
  background: var(--bg);
  padding-bottom: 0;
  }

.contact__header {
  padding: 32px 8vw 24px;
  text-align: center;
}

.contact__label {
  display: block;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}

.contact__title {
  font-family: var(--font-ui);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(26px, 3.5vw, 52px);
  color: var(--white);
  line-height: 1;
}

.contact__body {
  padding: 0 8vw;
}

.contact__intro {
  text-align: center;
  margin-bottom: 32px;
}

.contact__text {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--white-dim);
}

/* ── Formulaire 2 colonnes ── */
.contact__form--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 60px;
  align-items: end;
}

.contact__col--left {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 20px;
  padding-bottom: 0;
}

.contact__col--right {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 0;
}

.contact__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact__field--grow {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.contact__label-field {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  transition: color 0.3s;
}

.contact__field:focus-within .contact__label-field {
  color: var(--gold);
}

.contact__input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--white-faint);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  padding: 12px 0;
  outline: none;
  width: 100%;
  -webkit-appearance: none;
  transition: border-color 0.3s var(--ease-out);
}

.contact__input::placeholder {
  color: rgba(255,255,255,0.2);
  font-style: italic;
}

.contact__input:focus { border-bottom-color: var(--gold); }
.contact__input.error { border-bottom-color: #e05252; }

.contact__select {
  cursor: pointer;
  color: rgba(255,255,255,0.5);
  background: var(--bg);
}
.contact__select option { background: #111; color: var(--white); }
.contact__select.filled { color: var(--white); }

.contact__textarea {
  resize: none;
  line-height: 1.7;
  flex: 1;
  min-height: 80px;
}

/* Bouton + disclaimer centrés sous les 2 colonnes */
.contact__submit-wrap {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-top: 32px;
}

.contact__privacy {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 300;
  color: rgba(255,255,255,0.2);
  line-height: 1.6;
  text-align: center;
}

.contact__privacy a {
  color: rgba(255,255,255,0.35);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  transition: color 0.3s, border-color 0.3s;
}
.contact__privacy a:hover { color: var(--gold); border-color: var(--gold-dim); }

/* Bouton submit */
.contact__submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 36px;
  border: 1px solid var(--gold-dim);
  background: none;
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 0.4s, border-color 0.4s;
}

.contact__submit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
  z-index: 0;
}

.contact__submit:hover { background: transparent; color: #000; border-color: var(--gold); }
.contact__submit:hover::before { transform: scaleX(1); }
.contact__submit-text,
.contact__submit-arrow { position: relative; z-index: 1; }
.contact__submit-arrow { transition: transform 0.3s var(--ease-out); }
.contact__submit:hover .contact__submit-arrow { transform: translateX(4px); }

.contact__submit-loader {
  display: none;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(255,255,255,0.3);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  position: relative;
  z-index: 1;
}

.contact__submit.loading .contact__submit-text,
.contact__submit.loading .contact__submit-arrow { display: none; }
.contact__submit.loading .contact__submit-loader { display: block; }

/* Confirm / erreur */
.contact__confirm,
.contact__error { display: none; }
.contact__confirm.visible,
.contact__error.visible { display: block; }

.contact__confirm-inner {
  text-align: center;
  padding: 60px 40px;
  border: 1px solid var(--gold-dim);
}

.contact__confirm-icon {
  display: block;
  font-size: 32px;
  color: var(--gold);
  margin-bottom: 20px;
}

.contact__confirm h3 {
  font-family: var(--font-ui);
  font-style: italic;
  font-weight: 300;
  font-size: 24px;
  color: var(--white);
  margin-bottom: 12px;
}

.contact__confirm p {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  color: var(--white-dim);
}

.contact__error {
  padding: 20px;
  border-left: 2px solid #e05252;
  margin-top: 16px;
}

.contact__error p {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  color: rgba(224,82,82,0.8);
}

@media (max-width: 700px) {
  .contact__form--2col { grid-template-columns: 1fr; }
  .contact__body { padding: 0 6vw; }
}

/* ═══════════════════════════════════════════
   NOUS SOUTENIR
═══════════════════════════════════════════ */
.soutenir {
  background: var(--bg);
  padding-bottom: 0;
  overflow: hidden;
}

.soutenir__header {
  padding: 32px 8vw 24px;
  text-align: center;
}

.soutenir__label {
  display: block;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}

.soutenir__title {
  font-family: var(--font-ui);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(26px, 3.5vw, 52px);
  color: var(--white);
  line-height: 1;
}

.soutenir__intro {
  text-align: center;
  padding: 0 8vw 24px;
}

.soutenir__quote {
  font-family: var(--font-ui);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(14px, 1.6vw, 22px);
  line-height: 1.6;
  color: var(--white-dim);
}

/* ── Frise ── */
.soutenir__timeline {
  padding: 0 8vw 24px;
  position: relative;
}

.soutenir__timeline-steps {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.soutenir__timeline-steps::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: var(--white-faint);
  z-index: 1;
}

.soutenir__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
  cursor: default;
  position: relative;
  z-index: 2;
}

.soutenir__step-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  background: var(--bg);
  transition: border-color 0.4s, background 0.4s, transform 0.4s;
}

.soutenir__step.active .soutenir__step-dot,
.soutenir__step:hover .soutenir__step-dot {
  border-color: var(--gold);
  background: var(--gold);
  transform: scale(1.4);
  box-shadow: 0 0 12px rgba(201,168,76,0.4);
}

.soutenir__step-num {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.2);
  transition: color 0.3s;
}
.soutenir__step.active .soutenir__step-num,
.soutenir__step:hover .soutenir__step-num { color: var(--gold); }

.soutenir__step-title {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  text-align: center;
  transition: color 0.3s;
}
.soutenir__step.active .soutenir__step-title,
.soutenir__step:hover .soutenir__step-title { color: var(--white); }

.soutenir__step-sub {
  font-family: var(--font-body);
  font-size: 10px;
  font-style: italic;
  font-weight: 300;
  color: rgba(255,255,255,0.22);
  text-align: center;
  max-width: 90px;
  line-height: 1.4;
  transition: color 0.3s;
}
.soutenir__step.active .soutenir__step-sub,
.soutenir__step:hover .soutenir__step-sub { color: var(--white-dim); }

/* ── Photo bandeau ── */
.soutenir__band-photo {
  width: 100%;
  height: 250px;
  overflow: hidden;
  position: relative;
  margin-bottom: 0;
}

.soutenir__band-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  filter: grayscale(30%);
  transition: filter 0.6s var(--ease-out);
}

.soutenir__band-photo:hover img { filter: grayscale(0%); }

.soutenir__band-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    rgba(0,0,0,0.4) 0%, transparent 20%,
    transparent 80%, rgba(0,0,0,0.4) 100%);
  pointer-events: none;
}

/* ── 4 colonnes ── */
.soutenir__cols4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;
  border-top: 1px solid var(--white-faint);
  box-sizing: border-box;
  width: 100%;
}

.soutenir__col4 {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 52px 32px;
  position: relative;
  box-sizing: border-box;
}

/* Col 1 — aligné bord gauche */
.soutenir__col4:first-child {
  padding-left: 8vw;
}

/* Col 4 — aligné bord droit */
.soutenir__col4:last-child {
  padding-right: 8vw;
  align-items: center;
  text-align: center;
}

/* Séparateurs verticaux */
.soutenir__col4:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 40px;
  bottom: 40px;
  width: 1px;
  background: var(--white-faint);
}

/* Titres colonnes */
.soutenir__col4-title {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold);
  padding-left: 12px;
  border-left: 2px solid var(--gold-dim);
}

.soutenir__col4:last-child .soutenir__col4-title {
  border-left: none;
  padding-left: 0;
}

.soutenir__col4-text {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--white-dim);
}

/* Liste col 1 */
.soutenir__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.soutenir__list li {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--white-dim);
  padding: 7px 0 7px 20px;
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.soutenir__list li:last-child { border-bottom: none; }
.soutenir__list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-size: 10px;
  opacity: 0.7;
}

/* Logos col 2 */
.soutenir__logos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.soutenir__logo-item {
  height: 36px;
  display: flex;
  align-items: center;
  opacity: 0.65;
  transition: opacity 0.3s;
}
.soutenir__logo-item:hover { opacity: 1; }
.soutenir__logo-item svg { width: 100%; height: 36px; display: block; }

/* Cards col 3 */
.soutenir__aside-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
  opacity: 0.8;
}

.soutenir__partner { margin-bottom: 4px; }

.soutenir__partner-card {
  border: 1px solid var(--white-faint);
  padding: 16px;
  transition: border-color 0.3s;
}
.soutenir__partner-card:hover { border-color: var(--gold-dim); }

.soutenir__partner-name {
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--white);
  margin-bottom: 4px;
}

.soutenir__partner-desc {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 300;
  color: var(--white-dim);
  line-height: 1.5;
}

.soutenir__fiscal { margin-bottom: 4px; }

.soutenir__fiscal-card {
  border-left: 2px solid var(--gold-dim);
  padding: 12px 12px 12px 14px;
  background: rgba(201,168,76,0.04);
}

.soutenir__fiscal-text {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--white-dim);
  margin-bottom: 6px;
}
.soutenir__fiscal-text strong { color: var(--gold); font-weight: 600; }

.soutenir__fiscal-note {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.18);
}

.soutenir__vaud-card {
  border: 1px solid var(--white-faint);
  padding: 12px;
}
.soutenir__vaud-card p {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--white-dim);
}
.soutenir__vaud-card strong { color: rgba(255,255,255,0.6); font-weight: 600; }

/* Contacts col 4 */
.soutenir__contacts {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}

.soutenir__contact-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.soutenir__contact-role {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
}

.soutenir__contact-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-decoration: none;
  color: var(--white-dim);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  transition: color 0.3s;
}
.soutenir__contact-link:hover { color: var(--white); }

.soutenir__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  border: 1px solid var(--gold-dim);
  color: var(--white);
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  transition: color 0.4s, border-color 0.4s;
  margin-top: 8px;
}
.soutenir__cta-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
  z-index: 0;
}
.soutenir__cta-btn:hover { background: transparent; color: #000; border-color: var(--gold); }
.soutenir__cta-btn:hover::before { transform: scaleX(1); }
.soutenir__cta-btn span { position: relative; z-index: 1; }

/* ── Bandeau partenaires ── */
.soutenir__partners-band {
  padding: 60px 8vw;
  border-top: 1px solid var(--white-faint);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}

.soutenir__partners-quote {
  font-family: var(--font-ui);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(13px, 1.4vw, 18px);
  color: var(--white-dim);
  letter-spacing: 0.04em;
  text-align: center;
}

.soutenir__partners-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}

@media (max-width: 1100px) {
  .soutenir__cols4 { grid-template-columns: 1fr 1fr; }
  .soutenir__col4:nth-child(2)::after,
  .soutenir__col4:nth-child(4)::after { display: none; }
}
@media (max-width: 640px) {
  .soutenir__cols4 { grid-template-columns: 1fr; }
  .soutenir__timeline-steps { flex-wrap: wrap; gap: 16px; justify-content: center; }
}

/* ═══════════════════════════════════════════
   CONTACT
═══════════════════════════════════════════ */
.contact {
  background: var(--bg);
  padding-bottom: 0;
  }

.contact__header {
  padding: 32px 8vw 24px;
  text-align: center;
}

.contact__label {
  display: block;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}

.contact__title {
  font-family: var(--font-ui);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(26px, 3.5vw, 52px);
  color: var(--white);
  line-height: 1;
}

.contact__body {
  padding: 0 8vw;
}

.contact__intro {
  text-align: center;
  margin-bottom: 32px;
}

.contact__text {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--white-dim);
}

/* ── Formulaire 2 colonnes ── */
.contact__form--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 60px;
  align-items: end;
}

.contact__col--left {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 20px;
  padding-bottom: 0;
}

.contact__col--right {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 0;
}

.contact__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact__field--grow {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.contact__label-field {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  transition: color 0.3s;
}

.contact__field:focus-within .contact__label-field {
  color: var(--gold);
}

.contact__input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--white-faint);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  padding: 12px 0;
  outline: none;
  width: 100%;
  -webkit-appearance: none;
  transition: border-color 0.3s var(--ease-out);
}

.contact__input::placeholder {
  color: rgba(255,255,255,0.2);
  font-style: italic;
}

.contact__input:focus { border-bottom-color: var(--gold); }
.contact__input.error { border-bottom-color: #e05252; }

.contact__select {
  cursor: pointer;
  color: rgba(255,255,255,0.5);
  background: var(--bg);
}
.contact__select option { background: #111; color: var(--white); }
.contact__select.filled { color: var(--white); }

.contact__textarea {
  resize: none;
  line-height: 1.7;
  flex: 1;
  min-height: 80px;
}

/* Bouton + disclaimer centrés sous les 2 colonnes */
.contact__submit-wrap {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-top: 32px;
}

.contact__privacy {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 300;
  color: rgba(255,255,255,0.2);
  line-height: 1.6;
  text-align: center;
}

.contact__privacy a {
  color: rgba(255,255,255,0.35);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  transition: color 0.3s, border-color 0.3s;
}
.contact__privacy a:hover { color: var(--gold); border-color: var(--gold-dim); }

/* Bouton submit */
.contact__submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 36px;
  border: 1px solid var(--gold-dim);
  background: none;
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 0.4s, border-color 0.4s;
}

.contact__submit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
  z-index: 0;
}

.contact__submit:hover { background: transparent; color: #000; border-color: var(--gold); }
.contact__submit:hover::before { transform: scaleX(1); }
.contact__submit-text,
.contact__submit-arrow { position: relative; z-index: 1; }
.contact__submit-arrow { transition: transform 0.3s var(--ease-out); }
.contact__submit:hover .contact__submit-arrow { transform: translateX(4px); }

.contact__submit-loader {
  display: none;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(255,255,255,0.3);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  position: relative;
  z-index: 1;
}

.contact__submit.loading .contact__submit-text,
.contact__submit.loading .contact__submit-arrow { display: none; }
.contact__submit.loading .contact__submit-loader { display: block; }

/* Confirm / erreur */
.contact__confirm,
.contact__error { display: none; }
.contact__confirm.visible,
.contact__error.visible { display: block; }

.contact__confirm-inner {
  text-align: center;
  padding: 60px 40px;
  border: 1px solid var(--gold-dim);
}

.contact__confirm-icon {
  display: block;
  font-size: 32px;
  color: var(--gold);
  margin-bottom: 20px;
}

.contact__confirm h3 {
  font-family: var(--font-ui);
  font-style: italic;
  font-weight: 300;
  font-size: 24px;
  color: var(--white);
  margin-bottom: 12px;
}

.contact__confirm p {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  color: var(--white-dim);
}

.contact__error {
  padding: 20px;
  border-left: 2px solid #e05252;
  margin-top: 16px;
}

.contact__error p {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  color: rgba(224,82,82,0.8);
}

@media (max-width: 700px) {
  .contact__form--2col { grid-template-columns: 1fr; }
  .contact__body { padding: 0 6vw; }
}

/* ═══════════════════════════════════════════
   NOUS SOUTENIR
═══════════════════════════════════════════ */
.soutenir {
  background: var(--bg);
  
  padding-bottom: 0;
}

.soutenir__header {
  padding: 32px 8vw 24px;
  text-align: center;
}

.soutenir__label {
  display: block;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}

.soutenir__title {
  font-family: var(--font-ui);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(26px, 3.5vw, 52px);
  color: var(--white);
  line-height: 1;
}

/* Citation */
.soutenir__intro {
  text-align: center;
  padding: 0 8vw 24px;
}

.soutenir__quote {
  font-family: var(--font-ui);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(14px, 1.6vw, 22px);
  line-height: 1.6;
  color: var(--white-dim);
}

/* ── Frise sans ligne de jonction ── */
.soutenir__timeline {
  padding: 0 8vw 24px;
}

.soutenir__timeline-steps {
  display: flex;
  justify-content: space-between;
}

.soutenir__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: default;
  flex: 1;
}

.soutenir__step-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  background: var(--bg);
  transition: border-color 0.4s, background 0.4s, transform 0.4s;
}

.soutenir__step.active .soutenir__step-dot,
.soutenir__step:hover .soutenir__step-dot {
  border-color: var(--gold);
  background: var(--gold);
  transform: scale(1.4);
  box-shadow: 0 0 12px rgba(201,168,76,0.4);
}

.soutenir__step-num {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.2);
  transition: color 0.3s;
}
.soutenir__step.active .soutenir__step-num,
.soutenir__step:hover .soutenir__step-num { color: var(--gold); }

.soutenir__step-title {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  transition: color 0.3s;
  text-align: center;
}
.soutenir__step.active .soutenir__step-title,
.soutenir__step:hover .soutenir__step-title { color: var(--white); }

.soutenir__step-sub {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 300;
  font-style: italic;
  color: rgba(255,255,255,0.22);
  text-align: center;
  max-width: 90px;
  line-height: 1.4;
  transition: color 0.3s;
}
.soutenir__step.active .soutenir__step-sub,
.soutenir__step:hover .soutenir__step-sub { color: var(--white-dim); }

/* ── Photo bandeau équipe ── */
.soutenir__band-photo {
  position: relative;
  width: 100%;
  height: 100px;
  overflow: hidden;
  margin-bottom: 25px;
}

.soutenir__band-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  filter: grayscale(30%);
  transition: filter 0.6s var(--ease-out);
}

.soutenir__band-photo:hover img { filter: grayscale(0%); }

.soutenir__band-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    rgba(0,0,0,0.4) 0%,
    transparent 20%,
    transparent 80%,
    rgba(0,0,0,0.4) 100%);
  pointer-events: none;
}

/* ── 4 colonnes ── */
.soutenir__cols4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding: 0 8vw;
  align-items: start;
  border-top: 1px solid var(--white-faint);
  padding-top: 52px;
}

.soutenir__col4 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.soutenir__col4-title {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold);
  padding-left: 10px;
  border-left: 2px solid var(--gold-dim);
  margin-bottom: 4px;
}

.soutenir__col4-text {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--white-dim);
}

/* Logos grid dans col 2 */
.soutenir__logos-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.soutenir__logo-item {
  height: 36px;
  display: flex;
  align-items: center;
  opacity: 0.65;
  transition: opacity 0.3s;
}
.soutenir__logo-item:hover { opacity: 1; }
.soutenir__logo-item svg { width: 100%; height: 36px; display: block; }

/* Cards col 3 */
.soutenir__aside-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
  opacity: 0.8;
}

.soutenir__partner-card {
  border: 1px solid var(--white-faint);
  padding: 16px;
  transition: border-color 0.3s;
}
.soutenir__partner-card:hover { border-color: var(--gold-dim); }

.soutenir__partner-name {
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--white);
  margin-bottom: 4px;
}

.soutenir__partner-desc {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 300;
  color: var(--white-dim);
  line-height: 1.5;
}

.soutenir__fiscal-card {
  border-left: 2px solid var(--gold-dim);
  padding: 12px 12px 12px 14px;
  background: rgba(201,168,76,0.04);
}

.soutenir__fiscal-text {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--white-dim);
  margin-bottom: 6px;
}
.soutenir__fiscal-text strong { color: var(--gold); font-weight: 600; }

.soutenir__fiscal-note {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.18);
}

.soutenir__vaud-card {
  border: 1px solid var(--white-faint);
  padding: 12px;
}
.soutenir__vaud-card p {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--white-dim);
}
.soutenir__vaud-card strong { color: rgba(255,255,255,0.6); font-weight: 600; }

/* Col 4 contacts */
.soutenir__contacts {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.soutenir__contact-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.soutenir__contact-role {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
}

.soutenir__contact-link {
  display: flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  color: var(--white-dim);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 300;
  transition: color 0.3s;
}
.soutenir__contact-link:hover { color: var(--white); }

.soutenir__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.soutenir__list li {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--white-dim);
  padding: 6px 0 6px 18px;
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.soutenir__list li:last-child { border-bottom: none; }
.soutenir__list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-size: 10px;
  opacity: 0.7;
}
.soutenir__list strong { font-weight: 600; color: rgba(255,255,255,0.75); }

.soutenir__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  border: 1px solid var(--gold-dim);
  color: var(--white);
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  transition: color 0.4s, border-color 0.4s;
  align-self: flex-start;
  margin-top: 8px;
}
.soutenir__cta-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
  z-index: 0;
}
.soutenir__cta-btn:hover { background: transparent; color: #000; border-color: var(--gold); }
.soutenir__cta-btn:hover::before { transform: scaleX(1); }
.soutenir__cta-btn span { position: relative; z-index: 1; }

@media (max-width: 1100px) {
  .soutenir__cols4 { grid-template-columns: 1fr 1fr; gap: 40px; }
}
@media (max-width: 600px) {
  .soutenir__cols4 { grid-template-columns: 1fr; }
  .soutenir__timeline-steps { flex-wrap: wrap; gap: 16px; justify-content: center; }
}

/* ═══════════════════════════════════════════
   CONTACT
═══════════════════════════════════════════ */
.contact {
  background: var(--bg);
  padding-bottom: 0;
  }

.contact__header {
  padding: 32px 8vw 24px;
  text-align: center;
}

.contact__label {
  display: block;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}

.contact__title {
  font-family: var(--font-ui);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(26px, 3.5vw, 52px);
  color: var(--white);
  line-height: 1;
}

.contact__body {
  padding: 0 8vw;
}

.contact__intro {
  text-align: center;
  margin-bottom: 32px;
}

.contact__text {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--white-dim);
}

/* ── Formulaire 2 colonnes ── */
.contact__form--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 60px;
  align-items: end;
}

.contact__col--left {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 20px;
  padding-bottom: 0;
}

.contact__col--right {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 0;
}

.contact__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.contact__field--grow {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.contact__label-field {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  transition: color 0.3s;
}

.contact__field:focus-within .contact__label-field {
  color: var(--gold);
}

.contact__input {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--white-faint);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  padding: 12px 0;
  outline: none;
  width: 100%;
  -webkit-appearance: none;
  transition: border-color 0.3s var(--ease-out);
}

.contact__input::placeholder {
  color: rgba(255,255,255,0.2);
  font-style: italic;
}

.contact__input:focus { border-bottom-color: var(--gold); }
.contact__input.error { border-bottom-color: #e05252; }

.contact__select {
  cursor: pointer;
  color: rgba(255,255,255,0.5);
  background: var(--bg);
}
.contact__select option { background: #111; color: var(--white); }
.contact__select.filled { color: var(--white); }

.contact__textarea {
  resize: none;
  line-height: 1.7;
  flex: 1;
  min-height: 80px;
}

/* Bouton + disclaimer centrés sous les 2 colonnes */
.contact__submit-wrap {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-top: 32px;
}

.contact__privacy {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 300;
  color: rgba(255,255,255,0.2);
  line-height: 1.6;
  text-align: center;
}

.contact__privacy a {
  color: rgba(255,255,255,0.35);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  transition: color 0.3s, border-color 0.3s;
}
.contact__privacy a:hover { color: var(--gold); border-color: var(--gold-dim); }

/* Bouton submit */
.contact__submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 36px;
  border: 1px solid var(--gold-dim);
  background: none;
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 0.4s, border-color 0.4s;
}

.contact__submit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
  z-index: 0;
}

.contact__submit:hover { background: transparent; color: #000; border-color: var(--gold); }
.contact__submit:hover::before { transform: scaleX(1); }
.contact__submit-text,
.contact__submit-arrow { position: relative; z-index: 1; }
.contact__submit-arrow { transition: transform 0.3s var(--ease-out); }
.contact__submit:hover .contact__submit-arrow { transform: translateX(4px); }

.contact__submit-loader {
  display: none;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(255,255,255,0.3);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  position: relative;
  z-index: 1;
}

.contact__submit.loading .contact__submit-text,
.contact__submit.loading .contact__submit-arrow { display: none; }
.contact__submit.loading .contact__submit-loader { display: block; }

/* Confirm / erreur */
.contact__confirm,
.contact__error { display: none; }
.contact__confirm.visible,
.contact__error.visible { display: block; }

.contact__confirm-inner {
  text-align: center;
  padding: 60px 40px;
  border: 1px solid var(--gold-dim);
}

.contact__confirm-icon {
  display: block;
  font-size: 32px;
  color: var(--gold);
  margin-bottom: 20px;
}

.contact__confirm h3 {
  font-family: var(--font-ui);
  font-style: italic;
  font-weight: 300;
  font-size: 24px;
  color: var(--white);
  margin-bottom: 12px;
}

.contact__confirm p {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  color: var(--white-dim);
}

.contact__error {
  padding: 20px;
  border-left: 2px solid #e05252;
  margin-top: 16px;
}

.contact__error p {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  color: rgba(224,82,82,0.8);
}

@media (max-width: 700px) {
  .contact__form--2col { grid-template-columns: 1fr; }
  .contact__body { padding: 0 6vw; }
}

/* ═══════════════════════════════════════════
   NOUS SOUTENIR
═══════════════════════════════════════════ */
.soutenir {
  background: var(--bg);
  
  padding-bottom: 0;
}

.soutenir__header {
  padding: 32px 8vw 24px;
  text-align: center;
}

.soutenir__label {
  display: block;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}

.soutenir__title {
  font-family: var(--font-ui);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(26px, 3.5vw, 52px);
  color: var(--white);
  line-height: 1;
}

/* Accroche poétique */
.soutenir__intro {
  text-align: center;
  padding: 0 8vw 30px;
}

.soutenir__quote {
  font-family: var(--font-ui);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(16px, 2vw, 24px);
  line-height: 1.6;
  color: var(--white-dim);
  letter-spacing: 0.02em;
}

/* Corps — 2 colonnes */
.soutenir__body {
  display: grid;
  grid-template-columns: 1fr minmax(360px, 480px);
  gap: 60px;
  padding: 0 8vw 80px;
  align-items: start;
}

/* Colonne texte */
.soutenir__subtitle {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 36px 0 16px;
  padding-left: 12px;
  border-left: 2px solid var(--gold-dim);
}
.soutenir__col--text .soutenir__subtitle:first-child { margin-top: 0; }

.soutenir__col--text p {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--white-dim);
  margin-bottom: 16px;
}

.soutenir__list {
  list-style: none;
  padding: 0;
  margin-bottom: 8px;
}

.soutenir__list li {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--white-dim);
  padding: 8px 0 8px 22px;
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.soutenir__list li:last-child { border-bottom: none; }
.soutenir__list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-size: 11px;
  opacity: 0.7;
}
.soutenir__list strong { font-weight: 600; color: rgba(255,255,255,0.75); }

/* Colonne aside */
.soutenir__aside-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
  opacity: 0.8;
}

/* Partenaire */
.soutenir__partner { margin-bottom: 32px; }

.soutenir__partner-card {
  border: 1px solid var(--white-faint);
  padding: 24px;
  transition: border-color 0.3s;
}
.soutenir__partner-card:hover { border-color: var(--gold-dim); }

.soutenir__partner-name {
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--white);
  margin-bottom: 6px;
}

.soutenir__partner-desc {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 300;
  color: var(--white-dim);
  line-height: 1.6;
}

/* Fiscal */
.soutenir__fiscal { margin-bottom: 32px; }

.soutenir__fiscal-card {
  border-left: 2px solid var(--gold-dim);
  padding: 20px 20px 20px 22px;
  background: rgba(201,168,76,0.04);
}

.soutenir__fiscal-text {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--white-dim);
  margin-bottom: 10px;
}
.soutenir__fiscal-text strong { color: var(--gold); font-weight: 600; }

.soutenir__fiscal-note {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.2);
}

/* VaudCulture */
.soutenir__vaud-card {
  border: 1px solid var(--white-faint);
  padding: 20px;
}
.soutenir__vaud-card p {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.75;
  color: var(--white-dim);
}
.soutenir__vaud-card strong { color: rgba(255,255,255,0.6); font-weight: 600; }

/* CTA block */
.soutenir__cta-block {
  padding: 0 8vw;
  text-align: center;
}

.soutenir__cta-sep {
  width: 48px;
  height: 1px;
  background: var(--gold-dim);
  margin: 0 auto 48px;
}

.soutenir__cta-title {
  font-family: var(--font-ui);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(22px, 3vw, 40px);
  color: var(--white);
  margin-bottom: 12px;
}

.soutenir__cta-sub {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  color: var(--white-dim);
  margin-bottom: 48px;
}

/* Contacts */
.soutenir__contacts {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

.soutenir__contact-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.soutenir__contact-role {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
}

.soutenir__contact-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--white-dim);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  transition: color 0.3s;
}
.soutenir__contact-link:hover { color: var(--white); }
.soutenir__contact-link svg { flex-shrink: 0; }

/* Bouton CTA */
.soutenir__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 40px;
  border: 1px solid var(--gold-dim);
  color: var(--white);
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  transition: color 0.4s, border-color 0.4s;
}
.soutenir__cta-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
  z-index: 0;
}
.soutenir__cta-btn:hover { background: transparent; color: #000; border-color: var(--gold); }
.soutenir__cta-btn:hover::before { transform: scaleX(1); }
.soutenir__cta-btn span { position: relative; z-index: 1; }

/* Responsive */
@media (max-width: 900px) {
  .soutenir__body { grid-template-columns: 1fr; }
  .soutenir__contacts { gap: 40px; }
}

/* ── Mot monumental ── */
.soutenir__monumental {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-ui);
  font-size: clamp(80px, 18vw, 220px);
  font-weight: 700;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.025);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  margin-top: -20px;
}

.soutenir { position: relative; overflow: hidden; }

/* ── Photo flottante droite ── */
.soutenir__body {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 60px;
  padding: 0 8vw 60px;
  align-items: start;
  position: relative;
  z-index: 1;
}

.soutenir__visual {
  position: relative;
  overflow: hidden;
}

.soutenir__photo {
  width: 100%;
  height: 420px;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: grayscale(100%);
  border-radius: 0;
  transition: filter 0.7s var(--ease-out),
              border-radius 0.7s var(--ease-out),
              transform 0.8s var(--ease-out);
}

.soutenir__visual:hover .soutenir__photo {
  filter: grayscale(0%);
  border-radius: 50px 0 0 50px;
  transform: scale(1.02);
}

.soutenir__visual-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 60%, var(--bg) 100%);
  pointer-events: none;
}

.soutenir__aside-cards {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Ligne de temps ── */
.soutenir__timeline {
  position: relative;
  padding: 30px 8vw;
  z-index: 1;
}

.soutenir__timeline-line {
  position: absolute;
  top: 50%;
  left: 8vw;
  right: 8vw;
  height: 1px;
  background: var(--white-faint);
  transform: translateY(-50%);
}

.soutenir__timeline-steps {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}

.soutenir__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: default;
}

.soutenir__step-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  background: var(--bg);
  transition: border-color 0.4s, background 0.4s, transform 0.4s;
}

.soutenir__step.active .soutenir__step-dot,
.soutenir__step:hover .soutenir__step-dot {
  border-color: var(--gold);
  background: var(--gold);
  transform: scale(1.4);
  box-shadow: 0 0 12px rgba(201,168,76,0.4);
}

.soutenir__step-num {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.2);
  transition: color 0.3s;
}

.soutenir__step.active .soutenir__step-num,
.soutenir__step:hover .soutenir__step-num { color: var(--gold); }

.soutenir__step-title {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  transition: color 0.3s;
}

.soutenir__step.active .soutenir__step-title,
.soutenir__step:hover .soutenir__step-title { color: var(--white); }

.soutenir__step-sub {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 300;
  font-style: italic;
  color: rgba(255,255,255,0.25);
  text-align: center;
  max-width: 100px;
  line-height: 1.4;
  transition: color 0.3s;
}

.soutenir__step.active .soutenir__step-sub,
.soutenir__step:hover .soutenir__step-sub { color: var(--white-dim); }

/* ── Chiffres clés ── */
.soutenir__stats {
  display: flex;
  justify-content: center;
  gap: 80px;
  padding: 60px 8vw;
  border-top: 1px solid var(--white-faint);
  border-bottom: 1px solid var(--white-faint);
  position: relative;
  z-index: 1;
}

.soutenir__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.soutenir__stat-num {
  font-family: var(--font-ui);
  font-size: clamp(48px, 6vw, 80px);
  font-weight: 700;
  color: var(--white);
  line-height: 1;
  letter-spacing: -0.02em;
}

.soutenir__stat-label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ── Carte du monde ── */
.soutenir__map {
  padding: 60px 8vw 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  position: relative;
  z-index: 1;
}

.soutenir__map-svg {
  width: 100%;
  max-width: 700px;
  height: auto;
  opacity: 0.9;
}

.soutenir__map-legend {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.25em;
  color: rgba(255,255,255,0.2);
  text-align: center;
}

@media (max-width: 900px) {
  .soutenir__body { grid-template-columns: 1fr; }
  .soutenir__timeline-steps { gap: 8px; flex-wrap: wrap; justify-content: center; }
  .soutenir__stats { gap: 40px; flex-wrap: wrap; }
  .soutenir__timeline-line { display: none; }
}

/* ── Contact form 2 colonnes ── */
.contact__form--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: stretch;
}

.contact__col {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.contact__col--right {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact__field--grow {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.contact__field--grow .contact__textarea {
  flex: 1;
  min-height: 120px;
  resize: none;
}

.contact__col--right .contact__footer-form {
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding-top: 0;
  margin-top: auto;
}

@media (max-width: 700px) {
  .contact__form--2col {
    grid-template-columns: 1fr;
  }
}


/* Colonne droite CTA */
.soutenir__cta-col {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-left: 40px;
  border-left: 1px solid var(--white-faint);
}

.soutenir__cta-col .soutenir__cta-title {
  font-family: var(--font-ui);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 2.5vw, 32px);
  color: var(--white);
  line-height: 1.2;
  margin: 0;
  padding: 0;
}

.soutenir__cta-col .soutenir__cta-sub {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  color: var(--white-dim);
  line-height: 1.7;
  margin: 0;
}

.soutenir__cta-col .soutenir__contacts {
  flex-direction: column;
  gap: 24px;
  justify-content: flex-start;
}

.soutenir__cta-col .soutenir__contact-item {
  align-items: flex-start;
}

.soutenir__cta-col .soutenir__cta-btn {
  align-self: flex-start;
  margin-top: 8px;
}

@media (max-width: 900px) {
  .soutenir__map-cta-block {
    grid-template-columns: 1fr;
  }
  .soutenir__cta-col {
    padding-left: 0;
    border-left: none;
    border-top: 1px solid var(--white-faint);
    padding-top: 40px;
  }
}

/* ── Contact footer centré + séparateurs ── */
.contact__col--right .contact__footer-form {
  flex-direction: column !important;
  align-items: center !important;
  gap: 20px !important;
  text-align: center;
  padding-top: 0;
  margin-top: auto;
}

.contact__footer-sep {
  width: 100%;
  height: 1px;
  background: var(--white-faint);
}

.contact__col--right .contact__privacy {
  text-align: center;
  max-width: 100%;
}

.contact__col--right .contact__submit {
  align-self: center;
}

/* ── Bouton centré sous les 2 colonnes ── */
.contact__submit-wrap {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--white-faint);
}

/* Réinitialise le footer-form dans la colonne */
.contact__col--right .contact__footer-form {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0 !important;
  margin-top: auto;
}

.contact__col--right .contact__privacy {
  text-align: left;
}

/* ── Footer gold entry ── */
.footer__gold-entry {
  width: 100%;
}

.footer__gold-lines {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0 8vw;
}

.footer__gold-line {
  width: 100%;
  height: 1px;
  background: var(--gold-dim);
}

.footer__gold-band { display: none; }

/* ── Submit wrap — centrage propre ── */
.contact__submit-wrap {
  grid-column: 1 / -1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 16px !important;
  padding-top: 24px !important;
  border-top: 1px solid var(--white-faint) !important;
  margin-top: 0 !important;
}

.contact__submit-wrap .contact__privacy {
  text-align: center !important;
  font-size: 11px !important;
  margin: 0 !important;
}

/* Réduire les espaces globaux du formulaire */
.contact__form--2col {
  gap: 40px !important;
}

.contact__col {
  gap: 20px !important;
}

.contact__col--right {
  gap: 16px !important;
}

/* Réduire padding contact body */
.contact__body {
  padding-bottom: 0 !important;
}

.contact__header {
  padding-bottom: 32px !important;
}

.contact__intro {
  margin-bottom: 32px !important;
}

/* ── Submit wrap — sans séparateur, traits alignés sur colonnes ── */
.contact__submit-wrap {
  border-top: none !important;
  padding-top: 12px !important;
}

/* Traits des inputs alignés pleine largeur des colonnes */
.contact__col--left .contact__input {
  width: 100%;
}

.contact__col--right .contact__input {
  width: 100%;
}

/* Le formulaire prend toute la largeur disponible */
.contact__form--2col {
  width: 100%;
}

/* ── Alignement bas textarea Message avec Email ── */
.contact__col--left,
.contact__col--right {
  align-items: stretch;
}

.contact__col--right {
  display: flex;
  flex-direction: column;
}

.contact__field--grow {
  flex: 1;
  min-height: 0;
}

.contact__field--grow .contact__textarea {
  flex: 1;
  min-height: 0;
  height: 100%;
}

/* Force même hauteur totale aux deux colonnes */
.contact__form--2col {
  align-items: stretch !important;
}


/* ═══════════════════════════════════════════
   BANDEAU PARTENAIR

/* Tous les logos à la même hauteur */
.soutenir__logo-item {
  height: 40px;
  display: flex;
  align-items: center;
  opacity: 0.7;
  transition: opacity 0.3s var(--ease-out);
  flex-shrink: 0;
}

.soutenir__logo-item:hover { opacity: 1; }

.soutenir__logo-item svg {
  height: 40px;
  width: auto;
  display: block;
}


/* ── 4 colonnes — plus d'air + séparateurs verticaux ── */
.soutenir__cols4 {
  gap: 0 !important;
  padding-top: 64px !important;
}

.soutenir__col4 {
  gap: 20px !important;
  padding: 0 40px;
  position: relative;
}

/* Séparateurs verticaux entre colonnes */
.soutenir__col4:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--white-faint);
}

/* Col 4 — bouton + texte centrés */
.soutenir__col4:last-child {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px !important;
}

.soutenir__col4:last-child .soutenir__col4-title {
  border-left: none;
  padding-left: 0;
  text-align: center;
}

.soutenir__col4:last-child .soutenir__col4-text {
  text-align: center;
}

.soutenir__col4:last-child .soutenir__contacts {
  align-items: center;
  width: 100%;
}

.soutenir__col4:last-child .soutenir__contact-item {
  align-items: center;
}

.soutenir__col4:last-child .soutenir__cta-btn {
  align-self: center;
}

@media (max-width: 1100px) {
  .soutenir__col4 { padding: 0 24px; }
}

/* ── Corrections 4 colonnes ── */

/* Hauteur uniforme colonnes — séparateurs à la même hauteur */
.soutenir__cols4 {
  align-items: stretch !important;
}

.soutenir__col4 {
  justify-content: flex-start;
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}

/* Séparateurs calés sur la hauteur réelle des colonnes */
.soutenir__col4:not(:last-child)::after {
  top: 0 !important;
  bottom: 0 !important;
  height: auto !important;
}

/* Centrage horizontal du contenu dans chaque colonne */
.soutenir__col4:nth-child(1),
.soutenir__col4:nth-child(2),
.soutenir__col4:nth-child(3) {
  align-items: flex-start;
}

/* Logos col 2 — réduire espace vertical */
.soutenir__logos-grid {
  gap: 6px !important;
  margin-top: -4px;
}

.soutenir__logo-item {
  height: 32px !important;
}
.soutenir__logo-item svg {
  height: 32px !important;
}

/* Bandeau photo équipe — 250px */
.soutenir__band-photo {
  height: 250px !important;
}

/* ── Ligne de jonction frise étapes ── */
.soutenir__timeline {
  position: relative !important;
}

.soutenir__timeline-steps {
  position: relative;
  z-index: 2;
}

.soutenir__timeline-steps::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 10%;
  right: 10%;
  height: 1px;
  background: var(--white-faint);
  z-index: 1;
}

/* ── 4 colonnes — ajustements finaux ── */

/* Col 1 (gauche) — centré entre bord fenêtre et séparateur */
.soutenir__col4:first-child {
  padding-left: 8vw !important;
  padding-right: 32px !important;
  align-items: flex-start;
}

/* Col 4 (droite) — centré entre séparateur et bord fenêtre */
.soutenir__col4:last-child {
  padding-right: 8vw !important;
  padding-left: 32px !important;
}

/* Cols intérieures 2 et 3 — padding symétrique */
.soutenir__col4:nth-child(2),
.soutenir__col4:nth-child(3) {
  padding-left: 32px !important;
  padding-right: 32px !important;
}

/* Grossir les textes dans les colonnes */
.soutenir__col4-title {
  font-size: 11px !important;
  margin-bottom: 8px !important;
}

.soutenir__col4-text {
  font-size: 14px !important;
  line-height: 1.8 !important;
}

.soutenir__list li {
  font-size: 13px !important;
  padding: 8px 0 8px 20px !important;
}

.soutenir__partner-name {
  font-size: 22px !important;
}

.soutenir__partner-desc {
  font-size: 12px !important;
}

.soutenir__fiscal-text {
  font-size: 13px !important;
}

.soutenir__vaud-card p {
  font-size: 13px !important;
}

.soutenir__contact-link {
  font-size: 13px !important;
}

/* Logos col 2 — plus d'air */
.soutenir__logos-grid {
  gap: 12px !important;
  margin-top: 4px !important;
}

.soutenir__logo-item {
  height: 36px !important;
}
.soutenir__logo-item svg {
  height: 36px !important;
}




/* ── Cols extérieures — centrage simple ── */
.soutenir__col4:first-child {
  padding-left: 8vw;
  padding-right: 32px;
  align-items: flex-start;
  text-align: left;
}

.soutenir__col4:first-child .soutenir__col4-title {
  border-left: 2px solid var(--gold-dim);
  padding-left: 12px;
}

.soutenir__col4:last-child {
  padding-left: 32px;
  padding-right: 8vw;
  align-items: center;
  text-align: center;
}

/* ═══════════════════════════════════════════
   TABS — NOUS SOUTENIR
═══════════════════════════════════════════ */
.soutenir__tabs {
  border-top: 1px solid var(--white-faint);
}

/* Navigation tabs */
.soutenir__tabs-nav {
  display: flex;
  border-bottom: 1px solid var(--white-faint);
  padding: 0 8vw;
}

.soutenir__tab-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 28px 32px 24px;
  background: none;
  border: none;
  cursor: pointer;
  flex: 1;
  text-align: left;
  transition: background 0.3s;
}

.soutenir__tab-btn:hover {
  background: rgba(255,255,255,0.02);
}

.soutenir__tab-num {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: rgba(255,255,255,0.2);
  transition: color 0.3s;
}

.soutenir__tab-label {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  transition: color 0.3s;
  line-height: 1.3;
}

/* Trait animé sous le tab actif */
.soutenir__tab-line {
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
}

.soutenir__tab-btn.active .soutenir__tab-num { color: var(--gold); }
.soutenir__tab-btn.active .soutenir__tab-label { color: var(--white); }
.soutenir__tab-btn.active .soutenir__tab-line { transform: scaleX(1); }

.soutenir__tab-btn:hover .soutenir__tab-label { color: var(--white-dim); }
.soutenir__tab-btn:hover .soutenir__tab-line { transform: scaleX(0.4); }
.soutenir__tab-btn.active:hover .soutenir__tab-line { transform: scaleX(1); }

/* Contenu des tabs */
.soutenir__tab-content {
  display: none;
  padding: 60px 8vw;
}

.soutenir__tab-content.active { display: block; }

@keyframes tabFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Layout intérieur — 2 colonnes */
.soutenir__tab-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

.soutenir__tab-title {
  font-family: var(--font-ui);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(22px, 2.5vw, 36px);
  color: var(--white);
  margin-bottom: 24px;
  line-height: 1.2;
}

.soutenir__tab-text p {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--white-dim);
  margin-bottom: 16px;
}

.soutenir__tab-quote {
  font-style: italic !important;
  font-size: 18px !important;
  color: var(--white) !important;
  margin-bottom: 24px !important;
}

/* Logos tab 02 */
.soutenir__tab-logos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-content: start;
}

.soutenir__tab-logos .soutenir__logo-item {
  height: 52px;
}
.soutenir__tab-logos .soutenir__logo-item svg {
  height: 52px;
  width: 100%;
}

@media (max-width: 900px) {
  .soutenir__tab-inner { grid-template-columns: 1fr; gap: 40px; }
  .soutenir__tabs-nav { flex-wrap: wrap; }
  .soutenir__tab-btn { flex: 0 0 50%; }
}

/* ── Tab 04 — bouton en bas à droite ── */
.soutenir__tab-content[data-tab="contact"] .soutenir__tab-aside {
  justify-content: flex-end !important;
  align-items: flex-end !important;
  gap: 28px !important;
}

.soutenir__tab-content[data-tab="contact"] .soutenir__tab-aside p {
  text-align: right !important;
}

.soutenir__tab-content[data-tab="contact"] .soutenir__cta-btn {
  align-self: flex-end !important;
}

/* ── Tab 02 — logos plus grands, colonnes rapprochées ── */
.soutenir__tab-inner {
  gap: 40px !important;
}

.soutenir__tab-logos {
  gap: 12px !important;
}

.soutenir__tab-logos .soutenir__logo-item {
  height: 68px !important;
}

.soutenir__tab-logos .soutenir__logo-item svg {
  height: 68px !important;
}

/* ═══════════════════════════════════════════
   ASSOCIATION
═══════════════════════════════════════════ */
.asso {
  background: var(--bg);
  border-top: 1px solid var(--white-faint);
  padding-bottom: 100px;
}

.asso__header {
  padding: 32px 8vw 24px;
  text-align: center;
}

.asso__label {
  display: block;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}

.asso__title {
  font-family: var(--font-ui);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(26px, 3.5vw, 52px);
  color: var(--white);
  line-height: 1;
}

/* ── Philosophie + damier ── */
.asso__philosophie {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0 8vw;
  align-items: start;
}

/* Texte */
.asso__text {
  padding-right: 60px;
}

.asso__text-title {
  font-family: var(--font-ui);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 2.2vw, 32px);
  color: var(--white);
  margin-bottom: 32px;
  line-height: 1.3;
}

.asso__text p {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.9;
  color: var(--white-dim);
  margin-bottom: 20px;
}

.asso__text-signature {
  font-style: italic !important;
  font-size: 12px !important;
  color: var(--gold) !important;
  margin-top: 32px !important;
}

/* Damier 2×2 — proportionnel à la hauteur du texte */
.asso__damier {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 4px;
  height: 100%;
  min-height: 480px;
}

.asso__damier-item {
  position: relative;
  overflow: hidden;
}

.asso__damier-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%);
  cursor: pointer;
  transition: filter 0.6s var(--ease-out),
              transform 0.7s var(--ease-out),
              border-radius 0.5s var(--ease-out);
}

.asso__damier-item:hover .asso__damier-img {
  filter: grayscale(0%);
  transform: scale(1.04);
  border-radius: 8px;
}

.asso__damier-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.15);
  pointer-events: none;
  transition: background 0.4s;
}

.asso__damier-item:hover .asso__damier-overlay {
  background: rgba(0,0,0,0);
}

/* ── Bureau ── */
.asso__bureau {
  padding: 80px 8vw 0;
  border-top: 1px solid var(--white-faint);
  margin-top: 80px;
}

.asso__bureau-header {
  text-align: center;
  margin-bottom: 60px;
}

.asso__bureau-title {
  font-family: var(--font-ui);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 2vw, 28px);
  color: var(--white);
  margin-top: 12px;
}

/* Membres en ligne -->  */
.asso__bureau-membres {
  display: flex;
  justify-content: center;
  gap: 80px;
  align-items: flex-start;
}

.asso__membre {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  flex: 0 0 200px;
  position: relative;
}

/* Photo vignette */
.asso__membre-photo-wrap {
  position: relative;
  width: 180px;
  height: 180px;
  overflow: hidden;
  border-radius: 50%;
}

.asso__membre-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%);
  transition: filter 0.5s var(--ease-out),
              transform 0.5s var(--ease-out);
}

.asso__membre-photo-wrap:hover .asso__membre-photo {
  filter: grayscale(0%);
  transform: scale(1.06);
}

/* Overlay au hover */
.asso__membre-overlay {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(0,0,0,0.72);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
}

.asso__membre-photo-wrap:hover .asso__membre-overlay {
  opacity: 1;
}

.asso__membre-fonction {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
  padding: 0 12px;
}

.asso__membre-nom {
  font-family: var(--font-ui);
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  color: var(--white);
  text-align: center;
}

/* Info sous la photo */
.asso__membre-info {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.asso__membre-role {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
}

.asso__membre-name {
  font-family: var(--font-ui);
  font-style: italic;
  font-weight: 300;
  font-size: 15px;
  color: var(--white-dim);
}

@media (max-width: 900px) {
  .asso__philosophie { grid-template-columns: 1fr; }
  .asso__text { padding-right: 0; margin-bottom: 40px; }
  .asso__damier { min-height: 320px; }
  .asso__bureau-membres { gap: 40px; flex-wrap: wrap; justify-content: center; }
}

/* Association sous-titre */
.asso__subtitle {
  font-family: var(--font-ui);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(13px, 1.2vw, 17px);
  color: var(--white-dim);
  margin-top: 12px;
  letter-spacing: 0.04em;
}

/* Réduire hauteur damier */
.asso__damier {
  min-height: 340px !important;
}

/* Réduire hauteur affiche */
.affiche__spread {
  min-height: 50vh !important;
  display: grid !important;
  grid-template-columns: 48% 1fr !important;
  align-items: stretch !important;
}

/* Photo fixe — fondu en noir uniquement */
.affiche__visual {
  transition: opacity .3s ease !important;
}
.affiche__visual--fading {
  opacity: 0 !important;
}

/* Slider texte occupe toute la colonne droite */
.affiche__slider {
  position: relative !important;
  overflow: hidden !important;
  min-height: inherit !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Slides : uniquement le contenu texte slide */
.affiche__slide {
  position: absolute !important;
  top: 0; left: 0; width: 100% !important;
  opacity: 0 !important;
  transform: translateX(30px) !important;
  transition: opacity .42s cubic-bezier(.22,.61,.36,1),
              transform .42s cubic-bezier(.22,.61,.36,1) !important;
  pointer-events: none !important;
  visibility: hidden !important;
}
.affiche__slide--active {
  position: relative !important;
  opacity: 1 !important;
  transform: translateX(0) !important;
  pointer-events: auto !important;
  visibility: visible !important;
}
.affiche__slide--exit {
  position: absolute !important;
  opacity: 0 !important;
  transform: translateX(-30px) !important;
  pointer-events: none !important;
  visibility: visible !important;
}

/* Plus d'animation sur visual/content séparément — gérés au niveau supérieur */
.affiche__slide .affiche__visual,
.affiche__slide .affiche__content,
.affiche__slide--active .affiche__visual,
.affiche__slide--active .affiche__content,
.affiche__slide--exit .affiche__visual,
.affiche__slide--exit .affiche__content {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}



/* Damier carré — cellules parfaitement carrées */
.asso__damier {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: 1fr 1fr !important;
  gap: 4px !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
}

.asso__damier-item {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
}

.asso__damier-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Damier réduit de 20% */
.asso__philosophie {
  grid-template-columns: 1fr 0.64fr !important;
}


/* ═══════════════════════════════════════════
   THÈME CLAIR — sections alternées
═══════════════════════════════════════════ */
:root {
  --bg-light:        #f5f2ee;
  --text-light:      #0a0a0a;
  --text-light-dim:  rgba(10,10,10,0.55);
  --text-light-faint:rgba(10,10,10,0.12);
  --gold-light:      #a07828;
}

/* Galerie — fond clair */
.galerie {
  background: var(--bg-light) !important;
  border-top: none !important;
}

.galerie__label { color: var(--gold-light) !important; }
.galerie__title { color: var(--text-light) !important; }

.galerie__more-label { color: rgba(0,0,0,0.4) !important; }
.galerie__more-icon  { color: rgba(0,0,0,0.5) !important; }
.galerie__more-circle { stroke: rgba(0,0,0,0.2) !important; }
.galerie__more:hover .galerie__more-circle { stroke: var(--gold-light) !important; }
.galerie__more:hover .galerie__more-icon  { color: var(--gold-light) !important; }
.galerie__more:hover .galerie__more-label { color: var(--gold-light) !important; }

/* Nous Soutenir — fond clair */
.soutenir {
  background: var(--bg-light) !important;
  
}

.soutenir__label     { color: var(--gold-light) !important; }
.soutenir__title     { color: var(--text-light) !important; }
.soutenir__quote     { color: var(--text-light-dim) !important; }

/* Timeline */
.soutenir__step-title { color: rgba(0,0,0,0.4) !important; }
.soutenir__step-sub   { color: rgba(0,0,0,0.22) !important; }
.soutenir__step-num   { color: rgba(0,0,0,0.2) !important; }
.soutenir__step.active .soutenir__step-title,
.soutenir__step:hover .soutenir__step-title { color: var(--text-light) !important; }
.soutenir__step.active .soutenir__step-num,
.soutenir__step:hover .soutenir__step-num   { color: var(--gold-light) !important; }
.soutenir__step.active .soutenir__step-sub,
.soutenir__step:hover .soutenir__step-sub   { color: var(--text-light-dim) !important; }
.soutenir__timeline-steps::before { background: rgba(0,0,0,0.12) !important; }

/* Photo bandeau */
.soutenir__band-overlay {
  background: linear-gradient(to right,
    rgba(245,242,238,0.5) 0%, transparent 20%,
    transparent 80%, rgba(245,242,238,0.5) 100%) !important;
}

/* Tabs nav */
.soutenir__tabs { border-top: 1px solid rgba(0,0,0,0.1) !important; }
.soutenir__tabs-nav { border-bottom: 1px solid rgba(0,0,0,0.1) !important; }
.soutenir__tab-btn:hover { background: rgba(0,0,0,0.03) !important; }
.soutenir__tab-num   { color: rgba(0,0,0,0.2) !important; }
.soutenir__tab-label { color: rgba(0,0,0,0.4) !important; }
.soutenir__tab-btn.active .soutenir__tab-num   { color: var(--gold-light) !important; }
.soutenir__tab-btn.active .soutenir__tab-label { color: var(--text-light) !important; }
.soutenir__tab-line  { background: var(--gold-light) !important; }

/* Tab content */
.soutenir__tab-title { color: var(--text-light) !important; }
.soutenir__tab-text p { color: var(--text-light-dim) !important; }
.soutenir__tab-quote  { color: var(--text-light) !important; }
.soutenir__col4-text  { color: var(--text-light-dim) !important; }
.soutenir__list li    { color: var(--text-light-dim) !important; border-bottom-color: rgba(0,0,0,0.06) !important; }
.soutenir__list li::before { color: var(--gold-light) !important; }

/* Cards col 3 */
.soutenir__partner-card { border-color: rgba(0,0,0,0.15) !important; }
.soutenir__partner-name { color: var(--text-light) !important; }
.soutenir__partner-desc { color: var(--text-light-dim) !important; }
.soutenir__fiscal-card  { background: rgba(160,120,40,0.06) !important; border-left-color: rgba(160,120,40,0.4) !important; }
.soutenir__fiscal-text  { color: var(--text-light-dim) !important; }
.soutenir__fiscal-text strong { color: var(--gold-light) !important; }
.soutenir__fiscal-note  { color: rgba(0,0,0,0.2) !important; }
.soutenir__vaud-card    { border-color: rgba(0,0,0,0.15) !important; }
.soutenir__vaud-card p  { color: var(--text-light-dim) !important; }
.soutenir__vaud-card strong { color: rgba(0,0,0,0.6) !important; }

/* Contacts */
.soutenir__contact-role { color: var(--gold-light) !important; }
.soutenir__contact-link { color: var(--text-light-dim) !important; }
.soutenir__contact-link:hover { color: var(--text-light) !important; }

/* CTA button light */
.soutenir__cta-btn {
  border-color: rgba(160,120,40,0.4) !important;
  color: var(--text-light) !important;
}
.soutenir__cta-btn::before { background: var(--gold-light) !important; }
.soutenir__cta-btn:hover { background: transparent !important; color: #000 !important; border-color: var(--gold) !important; }

/* Aside labels */
.soutenir__aside-label { color: var(--gold-light) !important; }

/* Partners band */
.soutenir__partners-band { border-top-color: rgba(0,0,0,0.1) !important; }
.soutenir__partners-quote { color: var(--text-light-dim) !important; }
.soutenir__logo-item { opacity: 0.5 !important; }
.soutenir__logo-item:hover { opacity: 0.85 !important; }
.soutenir__logo-item rect { stroke: rgba(0,0,0,0.25) !important; }
.soutenir__logo-item text { fill: rgba(0,0,0,0.6) !important; }

/* Séparateurs internes */
.soutenir__tab-content { border-top: none !important; }

/* ── Séparateurs sections renforcés ── */
.affiche    { border-top: none !important; }
.galerie    { border-top: none !important; }
.asso       { border-top: none !important; }
.soutenir   { border-top: none !important; }
.contact    { border-top: none !important; }

/* ── Footer — bande blanche ── */
.footer__gold-band {
  background: rgba(255,255,255,0.15) !important;
}

/* ── Tabs — nav blanc, contenu noir ── */
.soutenir__tabs-nav {
  background: var(--bg-light) !important;
}

.soutenir__tab-content {
  background: #000000 !important;
}

/* Textes dans le contenu noir */
.soutenir__tab-content .soutenir__tab-title { color: var(--white) !important; }
.soutenir__tab-content .soutenir__tab-text p { color: var(--white-dim) !important; }
.soutenir__tab-content .soutenir__tab-quote  { color: var(--white) !important; }
.soutenir__tab-content .soutenir__list li    { color: var(--white-dim) !important; border-bottom-color: rgba(255,255,255,0.06) !important; }
.soutenir__tab-content .soutenir__list li::before { color: var(--gold) !important; }
.soutenir__tab-content .soutenir__aside-label { color: var(--gold) !important; }
.soutenir__tab-content .soutenir__partner-name { color: var(--white) !important; }
.soutenir__tab-content .soutenir__partner-desc { color: var(--white-dim) !important; }
.soutenir__tab-content .soutenir__partner-card { border-color: var(--white-faint) !important; }
.soutenir__tab-content .soutenir__fiscal-text  { color: var(--white-dim) !important; }
.soutenir__tab-content .soutenir__fiscal-text strong { color: var(--gold) !important; }
.soutenir__tab-content .soutenir__fiscal-note  { color: rgba(255,255,255,0.2) !important; }
.soutenir__tab-content .soutenir__fiscal-card  { background: rgba(201,168,76,0.04) !important; border-left-color: var(--gold-dim) !important; }
.soutenir__tab-content .soutenir__vaud-card    { border-color: var(--white-faint) !important; }
.soutenir__tab-content .soutenir__vaud-card p  { color: var(--white-dim) !important; }
.soutenir__tab-content .soutenir__vaud-card strong { color: rgba(255,255,255,0.6) !important; }
.soutenir__tab-content .soutenir__contact-role { color: var(--gold) !important; }
.soutenir__tab-content .soutenir__contact-link { color: var(--white-dim) !important; }
.soutenir__tab-content .soutenir__cta-btn { border-color: var(--gold-dim) !important; color: var(--white) !important; }
.soutenir__tab-content .soutenir__cta-btn:hover { background: transparent !important; color: #000 !important; border-color: var(--gold) !important; }
.soutenir__tab-content .soutenir__logo-item rect { stroke: rgba(255,255,255,0.2) !important; }
.soutenir__tab-content .soutenir__logo-item text { fill: rgba(255,255,255,0.55) !important; }
.soutenir__tab-content .soutenir__logo-item { opacity: 0.7 !important; }

/* ── Photo bandeau équipe — fond noir avec marges ── */
.soutenir__band-photo {
  background: #000 !important;
  padding: 32px 0 !important;
  height: auto !important;
}

.soutenir__band-photo img {
  height: 250px !important;
  filter: grayscale(100%) !important;
  transition: filter 0.6s var(--ease-out) !important;
}

.soutenir__band-photo:hover img {
  filter: grayscale(0%) !important;
}

.soutenir__band-overlay {
  display: none !important;
}

/* ── Voir plus — plus grand ── */
.galerie__more-icon {
  font-size: 32px !important;
}

.galerie__more-label {
  font-size: 12px !important;
  letter-spacing: 0.3em !important;
}

.galerie__more-inner {
  width: 66px !important;
  height: 66px !important;
}


/* ── Bandeau photo soutenir — sans marges noires ── */
.soutenir__band-photo {
  background: transparent !important;
  padding: 0 !important;
}

.soutenir__band-photo img {
  height: 250px !important;
}

/* ── Tabs nav — fond noir ── */
.soutenir__tabs-nav {
  background: #000000 !important;
  border-bottom: 1px solid var(--white-faint) !important;
}

.soutenir__tab-num   { color: rgba(255,255,255,0.2) !important; }
.soutenir__tab-label { color: rgba(255,255,255,0.4) !important; }
.soutenir__tab-btn.active .soutenir__tab-num   { color: var(--gold) !important; }
.soutenir__tab-btn.active .soutenir__tab-label { color: var(--white) !important; }
.soutenir__tab-btn:hover { background: rgba(255,255,255,0.03) !important; }


/* ── Association — mobile : damier sous le texte ── */
@media (max-width: 768px) {
  .asso__philosophie {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto;
  }

  .asso__text {
    padding-right: 0 !important;
    grid-row: 1;
  }

  .asso__damier {
    grid-row: 2;
    width: 100%;
    aspect-ratio: 1 / 1;
    margin-top: 32px;
  }
}

/* ── Galerie — mobile ── */
@media (max-width: 768px) {
  .galerie__row {
    flex-direction: column !important;
    height: auto !important;
    gap: 3px !important;
  }

  .galerie__item {
    height: 260px !important;
    flex: none !important;
    width: 100% !important;
  }

  .galerie__more {
    flex: none !important;
    width: 100% !important;
    height: 80px !important;
    flex-direction: row !important;
    gap: 16px !important;
  }
}

/* ═══════════════════════════════════════════
   ADHÉSION MEMBRE
═══════════════════════════════════════════ */
.adhesion {
  background: var(--bg);
  padding-bottom: 32px;
}

.adhesion__header {
  padding: 32px 8vw 24px;
  text-align: center;
}

.adhesion__label {
  display: block;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 16px;
}

.adhesion__title {
  font-family: var(--font-ui);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(26px, 3.5vw, 52px);
  color: var(--text-light);
  line-height: 1;
}

/* ── Bloc intro photo + texte ── */
.adhesion__intro-block {
  display: grid;
  grid-template-columns: 1fr 48%;
  align-items: stretch;
  padding: 0 8vw 80px;
  gap: 60px;
}

/* Texte gauche */
.adhesion__text { display: flex; flex-direction: column; justify-content: center; gap: 0; }

.adhesion__text-title {
  font-family: var(--font-ui);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(24px, 2.6vw, 38px);
  color: var(--text-light);
  margin-bottom: 28px;
  line-height: 1.3;
}

.adhesion__text p {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.9;
  color: var(--text-light-dim);
  margin-bottom: 18px;
}

.adhesion__text em {
  font-style: italic;
  color: var(--text-light);
}

.adhesion__text-cta {
  display: flex;
  align-items: stretch;
  gap: 20px;
  margin-top: 24px;
  padding: 12px 20px;
  border: 1px solid rgba(201,168,76,0.35);
  border-left: 4px solid var(--gold);
  border-radius: 0 10px 10px 0;
}
.adhesion__text-cta-sep {
  width: 1px;
  align-self: stretch;
  flex-shrink: 0;
  background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.45), transparent);
}
.adhesion__text-cta-tiers { flex: 1; }
.adhesion__tier { display: flex; justify-content: space-between; align-items: baseline; padding: 3px 0; }
.adhesion__tier-name { font-family: var(--font-ui); font-size: 14px; color: rgba(255,255,255,0.85); }
.adhesion__tier-price { font-family: var(--font-ui); font-size: 16px; font-weight: 700; color: var(--white); }
.adhesion__tier-sep { height: 1px; background: rgba(255,255,255,0.1); margin: 1px 0; }

.adhesion__text-cta-label {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--gold);
}

.adhesion__text-cta-amount {
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-light);
}

/* Photo droite */
.adhesion__visual {
  position: relative;
  overflow: hidden;
}

.adhesion__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%);
  transition: filter 0.7s var(--ease-out),
              border-radius 0.7s var(--ease-out),
              transform 0.8s var(--ease-out);
}

.adhesion__visual:hover .adhesion__photo {
  filter: grayscale(0%);
  border-radius: 50px 0 0 50px;
  transform: scale(1.02);
}

.adhesion__visual-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, transparent 70%, var(--bg-light) 100%);
  pointer-events: none;
}

.adhesion__credit {
  position: absolute;
  bottom: 12px;
  left: 14px;
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.12em;
  color: rgba(0,0,0,0.3);
  pointer-events: none;
}

/* ── Formulaire ── */
.adhesion__form-wrap {
  padding: 0 8vw;
}

.adhesion__form-header,
.adhesion__form-cols {
  width: 90%;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

.adhesion__form-header {
  text-align: center;
  margin-bottom: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

.adhesion__form-title {
  font-family: var(--font-ui);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 2.5vw, 36px);
  color: var(--text-light);
  margin: 12px 0;
}

.adhesion__form-sub {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  color: var(--text-light-dim);
  line-height: 1.7;
}

.adhesion__form-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 60px;
  align-items: end;
}

.adhesion__col {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.adhesion__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.adhesion__field--grow {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.adhesion__label-field {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(0,0,0,0.35);
  transition: color 0.3s;
}

.adhesion__field:focus-within .adhesion__label-field {
  color: var(--gold-light);
}

.adhesion__input {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(0,0,0,0.15);
  color: var(--text-light);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  padding: 12px 0;
  outline: none;
  width: 100%;
  -webkit-appearance: none;
  transition: border-color 0.3s;
}

.adhesion__input::placeholder {
  color: rgba(0,0,0,0.25);
  font-style: italic;
}

.adhesion__input:focus { border-bottom-color: var(--gold-light); }
.adhesion__input.error { border-bottom-color: #c0392b; }

.adhesion__select {
  cursor: pointer;
  color: rgba(0,0,0,0.4);
  background: transparent;
}
.adhesion__select option { background: #fff; color: var(--text-light); }
.adhesion__select.filled { color: var(--text-light); }

.adhesion__textarea {
  resize: none;
  line-height: 1.7;
  flex: 1;
  min-height: 100px;
}

/* Bouton + disclaimer */
.adhesion__submit-wrap {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-top: 32px;
}

.adhesion__submit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 40px;
  border: 1px solid rgba(160,120,40,0.4);
  background: none;
  color: var(--text-light);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 0.4s, border-color 0.4s;
}

.adhesion__submit::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold-light);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
  z-index: 0;
}

.adhesion__submit:hover { background: transparent; color: #000; border-color: var(--gold); }
.adhesion__submit:hover::before { transform: scaleX(1); }
.adhesion__submit-text,
.adhesion__submit-arrow { position: relative; z-index: 1; }
.adhesion__submit-arrow { transition: transform 0.3s var(--ease-out); }
.adhesion__submit:hover .adhesion__submit-arrow { transform: translateX(4px); }

.adhesion__submit-loader {
  display: none;
  width: 14px;
  height: 14px;
  border: 1px solid rgba(0,0,0,0.2);
  border-top-color: var(--text-light);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  position: relative;
  z-index: 1;
}

.adhesion__submit.loading .adhesion__submit-text,
.adhesion__submit.loading .adhesion__submit-arrow { display: none; }
.adhesion__submit.loading .adhesion__submit-loader { display: block; }

.adhesion__privacy {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 300;
  color: rgba(0,0,0,0.25);
  text-align: center;
}

.adhesion__privacy a {
  color: rgba(0,0,0,0.35);
  text-decoration: none;
  border-bottom: 1px solid rgba(0,0,0,0.15);
  transition: color 0.3s;
}
.adhesion__privacy a:hover { color: var(--gold-light); }

/* ── Bloc cotisation ── */
.adhesion__cotisation {
  margin: 28px auto 0;
  padding: 24px 28px;
  border: 1px solid rgba(201,168,76,0.2);
  border-radius: 8px;
  background: rgba(201,168,76,0.03);
  width: 90%;
  max-width: 860px;
}
.adhesion__cotisation-lbl {
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(201,168,76,0.6);
  margin-bottom: 16px;
}
.adhesion__required {
  color: var(--gold);
  font-style: normal;
}
.adhesion__required-note {
  font-size: 10px;
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.05em;
  margin-top: 10px;
  margin-bottom: 0;
}
.adhesion__cotisation-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.adhesion__cotisation-opt {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.adhesion__cotisation-opt:hover {
  border-color: rgba(201,168,76,0.3);
  background: rgba(201,168,76,0.04);
}
.adhesion__cotisation-opt.selected {
  border-color: rgba(201,168,76,0.5);
  background: rgba(201,168,76,0.06);
}
.adhesion__cotisation-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.2s, background 0.2s;
}
.adhesion__cotisation-opt.selected .adhesion__cotisation-check {
  background: var(--gold);
  border-color: var(--gold);
}
.adhesion__cotisation-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #000;
  display: none;
}
.adhesion__cotisation-opt.selected .adhesion__cotisation-dot {
  display: block;
}
.adhesion__cotisation-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}
.adhesion__cotisation-titre {
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  font-weight: 400;
}
.adhesion__cotisation-prix {
  font-size: 16px;
  color: var(--gold);
  font-weight: 300;
  letter-spacing: 0.02em;
}
.adhesion__cotisation-input-wrap {
  display: none;
  align-items: center;
  gap: 0;
  margin-top: 10px;
  margin-left: 36px;
  border: 1px solid rgba(201,168,76,0.35);
  border-radius: 6px;
  width: fit-content;
}
.adhesion__cotisation-input {
  background: rgba(255,255,255,0.06);
  border: none;
  border-right: 1px solid rgba(201,168,76,0.25);
  border-radius: 6px 0 0 6px;
  color: var(--gold);
  font-size: 16px;
  font-weight: 300;
  min-width: 80px;
  max-width: 130px;
  width: 7ch;
  padding: 8px 10px;
  text-align: right;
  outline: none;
  transition: width 0.15s ease;
}
.adhesion__cotisation-input:focus {
  background: rgba(201,168,76,0.06);
}
/* Flèches NATIVES masquées partout (Chrome, Safari, Firefox) —
   on utilise nos propres boutons dorés à la place. */
.adhesion__cotisation-input::-webkit-inner-spin-button,
.adhesion__cotisation-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
.adhesion__cotisation-input {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Nos flèches dorées empilées, sans fond, identiques sur tous les navigateurs */
.adhesion__cotisation-spin {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  margin-left: 2px;
}
.adhesion__spin-btn {
  background: none;
  border: none;
  color: var(--gold);
  font-size: 9px;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.15s, transform 0.1s;
}
.adhesion__spin-btn:hover { opacity: 1; }
.adhesion__spin-btn:active { transform: scale(0.85); }
/* Masquer spinners sur mobile — trop instables */
@media (max-width: 768px) {
  .adhesion__cotisation-input::-webkit-inner-spin-button,
  .adhesion__cotisation-input::-webkit-outer-spin-button {
    display: none;
  }
  .adhesion__cotisation-input {
    border-radius: 6px;
    border-right: none;
  }
}
.adhesion__cotisation-chf {
  font-size: 11px;
  color: rgba(201,168,76,0.6);
  letter-spacing: 0.12em;
  font-weight: 700;
  padding: 0 12px;
  background: rgba(201,168,76,0.06);
  border-radius: 0 6px 6px 0;
  align-self: stretch;
  display: flex;
  align-items: center;
}

/* Confirmation / erreur */
.adhesion__confirm,
.adhesion__error { display: none; }
.adhesion__confirm.visible,
.adhesion__error.visible { display: block; }

.adhesion__confirm-inner {
  text-align: center;
  padding: 60px 40px;
  border: 1px solid rgba(160,120,40,0.3);
  margin-top: 32px;
}

.adhesion__confirm-icon {
  display: block;
  font-size: 32px;
  color: var(--gold-light);
  margin-bottom: 20px;
}

.adhesion__confirm h3 {
  font-family: var(--font-ui);
  font-style: italic;
  font-weight: 300;
  font-size: 24px;
  color: var(--text-light);
  margin-bottom: 12px;
}

.adhesion__confirm p {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  color: var(--text-light-dim);
}

.adhesion__error {
  padding: 20px;
  border-left: 2px solid #c0392b;
  margin-top: 16px;
}

.adhesion__error p {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(192,57,43,0.8);
}

@media (max-width: 900px) {
  .adhesion__intro-block { grid-template-columns: 1fr; }
  .adhesion__visual { height: 320px; }
  .adhesion__form-cols { grid-template-columns: 1fr; }
}

/* ── Adhésion — fond noir ── */
.adhesion {
  background: var(--bg) !important;
}

.adhesion__label       { color: var(--gold); }
.adhesion__title       { color: var(--white) !important; }
.adhesion__text-title  { color: var(--white) !important; }
.adhesion__text p      { color: var(--white-dim) !important; }
.adhesion__text em     { color: var(--white) !important; }
.adhesion__text-cta    { border-color: rgba(201,168,76,0.35) !important; border-left-color: var(--gold) !important; }
.adhesion__text-cta-label  { color: var(--gold) !important; }
.adhesion__text-cta-amount { color: var(--white) !important; }
.adhesion__visual-overlay  { background: linear-gradient(to left, transparent 70%, var(--bg) 100%) !important; }
.adhesion__credit          { color: rgba(255,255,255,0.28) !important; }

.adhesion__form-header     { border-bottom-color: var(--white-faint) !important; }
.adhesion__form-title      { color: var(--white) !important; }
.adhesion__form-sub        { color: var(--white-dim) !important; }
.adhesion__label-field     { color: rgba(255,255,255,0.35) !important; }
.adhesion__field:focus-within .adhesion__label-field { color: var(--gold) !important; }
.adhesion__input           { color: var(--white) !important; border-bottom-color: var(--white-faint) !important; }
.adhesion__input::placeholder { color: rgba(255,255,255,0.2) !important; }
.adhesion__input:focus     { border-bottom-color: var(--gold) !important; }
.adhesion__select          { color: rgba(255,255,255,0.4) !important; background: var(--bg) !important; }
.adhesion__select option   { background: #111 !important; color: var(--white) !important; }
.adhesion__select.filled   { color: var(--white) !important; }

.adhesion__submit          { border-color: var(--gold-dim) !important; color: var(--white) !important; }
.adhesion__submit::before  { background: var(--gold) !important; }
.adhesion__submit:hover    { background: transparent !important; color: #000 !important; border-color: var(--gold) !important; }
.adhesion__submit-loader   { border-color: rgba(255,255,255,0.2) !important; border-top-color: var(--white) !important; }
.adhesion__privacy         { color: rgba(255,255,255,0.2) !important; }
.adhesion__privacy a       { color: rgba(255,255,255,0.3) !important; border-bottom-color: rgba(255,255,255,0.15) !important; }
.adhesion__privacy a:hover { color: var(--gold) !important; }

.adhesion__confirm-inner   { border-color: var(--gold-dim) !important; }
.adhesion__confirm h3      { color: var(--white) !important; }
.adhesion__confirm p       { color: var(--white-dim) !important; }
.adhesion__confirm-icon    { color: var(--gold) !important; }
.adhesion__error           { border-left-color: #e05252 !important; }
.adhesion__error p         { color: rgba(224,82,82,0.8) !important; }

/* ── Séparateur blanc pleine largeur 100px ── */
.section-sep-white {
  width: 100%;
  height: 100px;
  background: var(--bg-light);
}

/* ── Adhésion — photo droite même ergo qu'affiche ── */
.adhesion__intro-block {
  grid-template-columns: 1fr 48% !important;
  gap: 0 !important;
  padding: 0 !important;
}

.adhesion__text {
  padding: 64px 6vw 64px 8vw !important;
  border-right: 1px solid var(--white-faint) !important;
}

.adhesion__visual {
  position: relative !important;
  overflow: hidden !important;
}

.adhesion__photo {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  filter: grayscale(100%) !important;
  transition: filter 0.7s var(--ease-out),
              border-radius 0.7s var(--ease-out),
              transform 0.8s var(--ease-out) !important;
}

.adhesion__visual:hover .adhesion__photo {
  filter: grayscale(0%) !important;
  border-radius: 50px 0 0 50px !important;
  transform: scale(1.02) !important;
}

.adhesion__visual-overlay {
  background: linear-gradient(to right, var(--bg) 0%, transparent 30%) !important;
}

/* ── Adhésion form-wrap — padding top pour respiration titre ── */
.adhesion__form-wrap {
  padding-top: 80px !important;
}

.adhesion__form-header {
  padding: 0 8vw 48px !important;
  margin-bottom: 0 !important;
}

/* ── Disciplines — boutons multi-sélection ── */
.adhesion__disciplines {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 8px;
}

.adhesion__disc-btn {
  background: transparent;
  border: 1px solid var(--white-faint);
  color: var(--white-dim);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 7px 16px;
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s, background-color 0.3s;
  -webkit-appearance: none;
  appearance: none;
}

.adhesion__disc-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.adhesion__disc-btn.selected {
  border-color: var(--gold);
  color: var(--bg);
  background: var(--gold);
}

/* ── Col droite adhésion — padding top sur premier champ ── */
.adhesion__col:last-child .adhesion__field:first-child {
  padding-top: 20px;
}

/* ── Disciplines boutons — activation corrigée ── */
.adhesion__disc-btn.selected {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: #000 !important;
}

.adhesion__disc-btn:hover:not(.selected) {
  border-color: var(--gold-dim) !important;
  color: var(--gold) !important;
}

/* ── Disciplines — boutons actifs persistent en or ── */
.adhesion__disc-btn.selected,
.adhesion__disc-btn.selected:hover,
.adhesion__disc-btn.selected:focus,
.adhesion__disc-btn.selected:active {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
  color: #000 !important;
  outline: none !important;
}

/* ── Force boutons discipline — sélection persistante ── */
button.adhesion__disc-btn {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

button.adhesion__disc-btn.selected {
  background-color: #c9a84c !important;
  border-color: #c9a84c !important;
  color: #000000 !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

button.adhesion__disc-btn.selected:hover,
button.adhesion__disc-btn.selected:focus,
button.adhesion__disc-btn.selected:active,
button.adhesion__disc-btn.selected:focus-visible {
  background-color: #c9a84c !important;
  border-color: #c9a84c !important;
  color: #000000 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ── Boutons discipline — or persistant au clic ── */
button.adhesion__disc-btn { -webkit-appearance: none; appearance: none; }
button.adhesion__disc-btn.selected { background: #c9a84c !important; border-color: #c9a84c !important; color: #000 !important; }
button.adhesion__disc-btn.selected:hover,
button.adhesion__disc-btn.selected:focus,
button.adhesion__disc-btn.selected:active { background: #c9a84c !important; border-color: #c9a84c !important; color: #000 !important; outline: none !important; }

/* ── Espace blanc adhésion → formulaire réduit ── */
.adhesion .section-sep-white { height: 0 !important; }

/* ── Flèche back-to-top — masquée sur galerie ── */
.back-to-top.on-galerie { opacity: 0 !important; pointer-events: none !important; transform: translateY(12px) !important; }

/* ── Divider élégant entre laïus et formulaire adhésion ── */
.adhesion__form-divider {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 48px 8vw 0;
}

.adhesion__form-divider::before,
.adhesion__form-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--white-faint);
}

.adhesion__form-divider::before {
  background: linear-gradient(to right, transparent, var(--gold-dim));
}

.adhesion__form-divider::after {
  background: linear-gradient(to left, transparent, var(--gold-dim));
}

/* ── Discipline boutons — sélection visible ── */
.adhesion__disc-btn::before {
  transform: scaleX(0) !important;
}

.adhesion__disc-btn.selected::before {
  transform: scaleX(1) !important;
  background: #c9a84c !important;
}

.adhesion__disc-btn.selected {
  color: #000 !important;
  border-color: #c9a84c !important;
}

.adhesion__disc-btn.selected:hover,
.adhesion__disc-btn.selected:focus,
.adhesion__disc-btn.selected:active {
  color: #000 !important;
  border-color: #c9a84c !important;
}

/* ── Boutons années — cercle SVG animé ── */
.galerie__years {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 24px 0 8px;
}

.galerie__year-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px 20px;
  -webkit-appearance: none;
  appearance: none;
}

.galerie__year-btn span {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: rgba(0,0,0,0.3);
  transition: color 0.3s var(--ease-out);
  position: relative;
  z-index: 1;
}

/* SVG ring */
.galerie__year-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.galerie__year-rect {
  fill: none;
  stroke: var(--gold-light);
  stroke-width: 1.2;
  stroke-linecap: round;
  /* Périmètre approx rect 76x36 rx4 ≈ 216 */
  stroke-dasharray: 216;
  stroke-dashoffset: 216;
  transition: stroke-dashoffset 0s;
}

/* Hover — le contour se trace */
.galerie__year-btn:hover .galerie__year-rect {
  animation: yearRingDraw 0.6s var(--ease-out) forwards;
}

.galerie__year-btn:hover span {
  color: var(--gold-light);
}

/* Actif — contour plein permanent */
.galerie__year-btn.active .galerie__year-rect {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s var(--ease-out);
}

.galerie__year-btn.active span {
  color: var(--gold-light);
  font-weight: 700;
}

@keyframes yearRingDraw {
  from { stroke-dashoffset: 216; }
  to   { stroke-dashoffset: 0;   }
}

/* ── Galerie vide — message poétique ── */
.galerie__empty {
  padding: 80px 8vw;
  animation: fadeUp 0.6s var(--ease-out) forwards;
}

.galerie__empty-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}

.galerie__empty-icon {
  margin-bottom: 8px;
  opacity: 0.8;
}

.galerie__empty-label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--gold-light);
}

.galerie__empty-title {
  font-family: var(--font-ui);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 2vw, 26px);
  color: var(--text-light);
  line-height: 1.3;
}

.galerie__empty-text {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.8;
  color: var(--text-light-dim);
}

.galerie__empty-line {
  width: 40px;
  height: 1px;
  background: var(--gold-light);
  opacity: 0.4;
  margin: 8px 0;
}

.galerie__empty-credit {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.15em;
  color: rgba(0,0,0,0.2);
  font-style: italic;
}

/* ── Adhésion — mobile : photo sous le texte ── */
@media (max-width: 768px) {
  .adhesion__intro-block {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto;
  }

  .adhesion__text {
    grid-row: 1;
    padding: 40px 6vw !important;
    border-right: none !important;
    border-bottom: 1px solid var(--white-faint);
  }

  .adhesion__visual {
    grid-row: 2;
    height: 280px;
  }

  .adhesion__visual:hover .adhesion__photo {
    border-radius: 0 !important;
  }
}

/* ── Adhésion mobile — fix photo visible ── */
@media (max-width: 768px) {
  .adhesion__visual {
    width: 100% !important;
    height: 260px !important;
    display: block !important;
  }

  .adhesion__photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

.galerie__empty {
  padding: 48px 8vw 60px !important;
}

/* ── Bureau — citation dans overlay ── */
.asso__membre-citation {
  font-family: var(--font-ui);
  font-style: italic;
  font-weight: 300;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255,255,255,0.85);
  text-align: center;
  padding: 0 14px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(201,168,76,0.3);
  padding-bottom: 12px;
}

/* Overlay redessiné avec citation */
.asso__membre-overlay {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(0,0,0,0.82);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.4s var(--ease-out);
  padding: 16px;
}

.asso__membre-photo-wrap:hover .asso__membre-overlay {
  opacity: 1;
}

.asso__membre-fonction {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
}

.asso__membre-nom {
  font-family: var(--font-ui);
  font-style: italic;
  font-weight: 300;
  font-size: 13px;
  color: var(--white);
  text-align: center;
}

/* ── Bureau citation — bulle externe desktop ── */
.asso__bureau-membres {
  position: relative;
}

.asso__citation-bubble {
  position: absolute;
  bottom: calc(100% + 24px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: rgba(0,0,0,0.92);
  border: 1px solid var(--gold-dim);
  padding: 24px 28px;
  max-width: 480px;
  width: max-content;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease-out), transform 0.4s var(--ease-out);
  backdrop-filter: blur(8px);
  z-index: 10;
}

.asso__citation-bubble.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* Flèche vers le bas */
.asso__citation-bubble::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 8px;
  background: rgba(0,0,0,0.92);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  border-top: none;
}

.asso__citation-guillemet {
  font-family: Georgia, serif;
  font-size: 52px;
  line-height: 0.6;
  color: var(--gold);
  opacity: 0.6;
  display: block;
  margin-bottom: 8px;
}

.asso__citation-guillemet--close {
  margin-top: 4px;
  margin-bottom: 0;
}

.asso__citation-text {
  font-family: var(--font-ui);
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.7;
  color: var(--white-dim);
  padding: 0 8px;
}

.asso__citation-source {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 14px;
}

/* Mobile — bulle centrée sous les membres */
@media (max-width: 768px) {
  .asso__citation-bubble {
    position: static;
    transform: none;
    max-width: 100%;
    width: 100%;
    margin-top: 24px;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.4s var(--ease-out), max-height 0.4s var(--ease-out);
    border: 1px solid var(--gold-dim);
  }
  .asso__citation-bubble.visible {
    opacity: 1;
    max-height: 300px;
    transform: none;
  }
  .asso__citation-bubble::after { display: none; }
}

/* ── Adhésion — séparateur or avec flèche ── */
.adhesion__form-divider {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 8vw 0;
}

.adhesion__form-divider-line {
  position: absolute;
  left: 8vw;
  right: 8vw;
  top: calc(50% + 28px);
  height: 1px;
  background: var(--gold-dim);
}

/* Masque le trait derrière le SVG avec deux pseudo-éléments */
.adhesion__form-divider::before,
.adhesion__form-divider::after {
  content: '';
  position: absolute;
  top: calc(50% + 28px);
  height: 1px;
  background: var(--gold-dim);
  transform: translateY(-50%);
}

.adhesion__form-divider::before {
  left: 8vw;
  right: calc(50% + 24px);
}

.adhesion__form-divider::after {
  left: calc(50% + 24px);
  right: 8vw;
}

.adhesion__form-divider-line {
  display: none;
}

.adhesion__form-divider-arrow {
  position: relative;
  z-index: 2;
  padding: 0;
  width: 32px;
  margin-top: 56px;
  animation: arrowBounce 2s ease-in-out infinite;
  line-height: 0;
}

/* ── Adhésion — intro cotisation ── */
.adhesion__type-intro {
  padding: 40px 8vw 0;
  text-align: center;
}

.adhesion__type-intro p {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.85;
  color: var(--white-dim);
  max-width: 640px;
  margin: 0 auto;
}

/* ── Sélecteur type membre ── */
.adhesion__type-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 40px 8vw 0;
}

.adhesion__type-card {
  border: 1px solid var(--white-faint);
  padding: 32px;
  cursor: pointer;
  position: relative;
  transition: border-color 0.4s var(--ease-out), background 0.4s;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.adhesion__type-card:hover {
  border-color: var(--gold-dim);
  background: rgba(201,168,76,0.03);
}

.adhesion__type-card.selected {
  border-color: var(--gold);
  background: rgba(201,168,76,0.06);
}

.adhesion__type-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.adhesion__type-num {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--gold);
  opacity: 0.6;
}

.adhesion__type-badge {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white);
}

.adhesion__type-price {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  color: var(--white-dim);
}

.adhesion__type-price strong {
  color: var(--gold);
  font-weight: 700;
  font-size: 16px;
}

.adhesion__type-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.adhesion__type-list li {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  color: var(--white-dim);
  padding-left: 18px;
  position: relative;
  line-height: 1.5;
}

.adhesion__type-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--gold);
  font-size: 10px;
  opacity: 0.6;
}

.adhesion__type-select-btn {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 8px;
  transition: letter-spacing 0.3s;
}

.adhesion__type-card:hover .adhesion__type-select-btn,
.adhesion__type-card.selected .adhesion__type-select-btn {
  letter-spacing: 0.3em;
}

/* Formulaire verrouillé avant choix */
.adhesion__form--locked {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: max-height 0.6s var(--ease-out), opacity 0.4s ease;
}

.adhesion__form--unlocked {
  max-height: 2000px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  overflow: visible !important;
}

/* Champs actif seulement */
.adhesion__field--actif-only {
  display: none;
  transition: opacity 0.4s;
}

.adhesion__field--actif-only.visible {
  display: flex;
}

@media (max-width: 700px) {
  .adhesion__type-selector { grid-template-columns: 1fr; }
}

/* ── Adhésion — plus d'air entre sélecteur et titre formulaire ── */
.adhesion__type-selector {
  margin-bottom: 20px !important;
}

.adhesion__form-wrap {
  padding-top: 60px !important;
}

.adhesion__form-header {
  padding-top: 0 !important;
  margin-bottom: 52px !important;
}

.adhesion__type-intro {
  padding-bottom: 8px !important;
}

/* ── Séparateur adhésion — sans espace avant ── */
.adhesion__form-divider {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ── Séparateur — flèche sans espace résiduel ── */
.adhesion__form-divider-arrow {
  padding: 0 !important;
  width: 32px !important;
  background: var(--bg) !important;
}

/* ── Hero — nouvelle hiérarchie typographique ── */
.hero__asso {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
  opacity: 0;
  transform: translateY(16px);
  animation: fadeUp 0.9s var(--ease-out) 0.65s forwards;
}

.hero__asso strong {
  font-weight: 700;
  font-size: 16px;
}

.hero__citation {
  font-family: var(--font-ui);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(12px, 1.1vw, 15px);
  color: var(--white-dim);
  letter-spacing: 0.04em;
  line-height: 1.6;
  margin-bottom: 40px;
  max-width: 480px;
  opacity: 0;
  transform: translateY(14px);
  animation: fadeUp 0.9s var(--ease-out) 0.85s forwards;
}

/* Hero sub — enlève margin-bottom car citation prend le relais */
.hero__sub {
  margin-bottom: 12px !important;
}

/* ── Hero — nouvelle hiérarchie finale ── */

/* Bloc headline groupé */
.hero__headline {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 36px;
  opacity: 0;
  transform: translateY(16px);
  animation: fadeUp 0.9s var(--ease-out) 0.3s forwards;
}

/* Label principal — plus grand */
.hero__eyebrow {
  font-family: var(--font-ui);
  font-size: clamp(14px, 1.6vw, 20px) !important;
  font-weight: 400 !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
  margin-bottom: 0 !important;
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* L'Art-Scène — extra bold +1 taille */
.hero__name {
  font-weight: 900 !important;
  font-size: clamp(15px, 1.8vw, 22px) !important;
  letter-spacing: 0.25em;
}

/* Baseline sous le label — même largeur */
.hero__sub {
  font-family: var(--font-ui) !important;
  font-size: clamp(10px, 1vw, 13px) !important;
  font-weight: 300 !important;
  letter-spacing: 0.25em !important;
  color: var(--white-dim) !important;
  text-transform: uppercase !important;
  margin-bottom: 0 !important;
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Slogan — citation 50% plus petit que le label, italique */
.hero__title {
  font-family: var(--font-ui) !important;
  font-style: italic !important;
  font-weight: 300 !important;
  font-size: clamp(13px, 1.2vw, 16px) !important;
  color: var(--white-dim) !important;
  line-height: 1.6 !important;
  margin-bottom: 40px !important;
  opacity: 0;
  transform: translateY(14px);
  animation: fadeUp 0.9s var(--ease-out) 0.6s forwards !important;
}

.hero__title em {
  font-style: italic;
  color: var(--white-dim);
  font-family: var(--font-ui);
}

/* ── Hero slogan — plus grand + couleurs gris/blanc ── */
.hero__title {
  font-size: clamp(16px, 1.8vw, 22px) !important;
  color: var(--white) !important;
}

.hero__title em {
  color: rgba(255,255,255,0.5) !important;
}

/* ── Hero slogan — plus grand, gris/blanc inversé ── */
.hero__title {
  font-size: clamp(22px, 2.8vw, 38px) !important;
}

.hero__title em {
  color: rgba(255,255,255,0.45) !important;
}

/* "en toute liberté !" — blanc pur (texte hors em) */
.hero__title {
  color: var(--white) !important;
}

/* ── Hero headline — bg transparent + rollover ── */
.hero__headline {
  display: inline-block;
  margin-bottom: 36px;
  opacity: 0;
  transform: translateY(16px);
  animation: fadeUp 0.9s var(--ease-out) 0.3s forwards;
}

.hero__headline-link {
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  text-decoration: none;
  /* BG démarre du bord gauche — extension via margin négatif + padding */
  padding: 12px 18px 12px 8vw;
  margin-left: -8vw;
  background: rgba(0,0,0,0.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  position: relative;
  transition: background 0.5s var(--ease-out);
}

/* Rollover Option C — fond disparaît, L'Art-Scène en or */
.hero__headline-link:hover {
  background: transparent;
}

.hero__headline-link:hover .hero__eyebrow {
  color: rgba(255,255,255,0.6) !important;
}

.hero__headline-link:hover .hero__name {
  color: var(--gold) !important;
  text-shadow: 0 0 20px rgba(201,168,76,0.4);
}

.hero__headline-link:hover .hero__sub {
  color: rgba(255,255,255,0.4) !important;
}

.hero__eyebrow,
.hero__sub,
.hero__name {
  transition: color 0.5s var(--ease-out), text-shadow 0.5s var(--ease-out) !important;
}

/* L'Art-Scène — Oswald extra bold */
.hero__name {
  font-family: 'Oswald', sans-serif !important;
  font-weight: 700 !important;
  font-size: clamp(17px, 2vw, 25px) !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase;
}

/* Mobile — lisibilité préservée */
@media (max-width: 768px) {
  .hero__headline-link {
    padding: 8px 12px 8px 0;
    background: rgba(0,0,0,0.55);
  }

  .hero__eyebrow {
    font-size: 11px !important;
  }

  .hero__name {
    font-size: 14px !important;
  }

  .hero__sub {
    font-size: 9px !important;
    letter-spacing: 0.18em !important;
  }

  .hero__headline-link:hover {
    padding-left: 4px;
  }
}

/* ── Hero headline — interligne slogan réduit ── */
.hero__title {
  line-height: 1.2 !important;
  margin-bottom: 36px !important;
}

/* Mobile — bg bord gauche adapté */
@media (max-width: 768px) {
  .hero__headline-link {
    padding: 10px 14px 10px 6vw !important;
    margin-left: -6vw !important;
  }
}

/* ── Hero headline bg — moins transparent ── */
.hero__headline-link {
  background: rgba(0,0,0,0.65) !important;
}







/* ── Hero — écart entre headline et slogan ── */
.hero__headline {
  margin-bottom: 180px !important;
}

/* ── Hero headline — écart 250px ── */
.hero__headline {
  margin-bottom: 250px !important;
}



/* ── Hero — pas d'écart entre headline et slogan ── */
.hero__headline {
  margin-bottom: 8px !important;
}

/* ── Back to top — masqué sur galerie ── */
.back-to-top.on-galerie {
  opacity: 0 !important;
  pointer-events: none !important;
}





/* ═══════════════════════════════════════════
   PRODUCTIONS
═══════════════════════════════════════════ */
.productions {
  background: var(--bg);
  padding-bottom: 0;
  overflow: hidden;
}

.productions__header {
  padding: 32px 8vw 24px;
  text-align: center;
}

.productions__label {
  display: block;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}

.productions__title {
  font-family: var(--font-ui);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(28px, 4vw, 60px);
  color: var(--white);
  line-height: 1.1;
  margin-bottom: 20px;
}

.productions__tagline {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  color: var(--white-dim);
  font-style: italic;
}

/* ── Spread photo + contenu ── */
.productions__spread {
  display: grid;
  grid-template-columns: 48% 1fr;
  align-items: stretch;
  min-height: 70vh;
}

.productions__visual {
  position: relative;
  overflow: hidden;
}

.productions__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%);
  transition: filter 0.7s var(--ease-out), transform 0.8s var(--ease-out);
}

.productions__visual:hover .productions__photo {
  filter: grayscale(0%);
  transform: scale(1.02);
}

.productions__visual-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, transparent 70%, var(--bg) 100%);
  pointer-events: none;
}

.productions__credit {
  position: absolute;
  bottom: 12px;
  left: 14px;
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.28);
}

/* ── Contenu ── */
.productions__content {
  padding: 60px 6vw 60px 48px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  justify-content: center;
  border-left: 1px solid var(--white-faint);
}

.productions__block-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}

.productions__block p {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.9;
  color: var(--white-dim);
  margin-bottom: 12px;
}

/* ── Specs ── */
.productions__specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding-top: 8px;
  border-top: 1px solid var(--white-faint);
}

.productions__spec {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.productions__spec-label {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
}

.productions__spec-value {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  color: var(--white);
}

/* ── CTA ── */
.productions__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 36px;
  border: 1px solid var(--gold-dim);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: color 0.4s, border-color 0.4s;
  align-self: flex-start;
}

.productions__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
  z-index: 0;
}

.productions__cta:hover { background: transparent; color: #000; border-color: var(--gold); }
.productions__cta:hover::before { transform: scaleX(1); }
.productions__cta span, .productions__cta svg { position: relative; z-index: 1; }

@media (max-width: 900px) {
  .productions__spread { grid-template-columns: 1fr; }
  .productions__visual { height: 300px; }
  .productions__content { padding: 40px 6vw; border-left: none; border-top: 1px solid var(--white-faint); }
}


/* ═══════════════════════════════════════════
   PRODUCTIONS — Vitrine immersive
═══════════════════════════════════════════ */
.productions {
  background: #000;
  position: relative;
  overflow: hidden;
}

/* Grain texture subtil */
.productions::before {
  content: '';
  position: absolute;
  inset: 0;
  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='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}

/* ── Header ── */
.productions__header {
  position: relative;
  z-index: 1;
  padding: 32px 8vw 24px;
  text-align: center;
}

.productions__label {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
}

.productions__title {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(32px, 5vw, 72px);
  color: #fff;
  line-height: 1;
  margin-bottom: 20px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.productions__title em {
  font-style: italic;
  font-weight: 300;
  color: var(--gold);
}

.productions__tagline {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  color: rgba(255,255,255,0.5);
  font-style: italic;
  letter-spacing: 0.05em;
}

/* ── Corps 3 colonnes ── */
.productions__body {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  min-height: 65vh;
  position: relative;
  z-index: 1;
}

/* Col 1 — Vidéo */
.productions__col-video {
  position: relative;
  overflow: hidden;
  border-right: 1px solid rgba(201,168,76,0.1);
}

.productions__video-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 400px;
}

.productions__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.7) contrast(1.1);
}

.productions__video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10,13,26,0.3) 0%, transparent 30%, rgba(10,13,26,0.5) 100%);
}

.productions__credit {
  position: absolute;
  bottom: 12px;
  left: 14px;
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.25);
  z-index: 2;
}

/* Col 2 — Texte */
.productions__col-text {
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  gap: 36px;
  border-right: 1px solid rgba(201,168,76,0.1);
}

.productions__block-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
  opacity: 0.8;
}

.productions__block p {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.9;
  color: rgba(255,255,255,0.6);
  margin-bottom: 10px;
}

/* Col 3 — Galerie */
.productions__col-gallery {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  background: rgba(255,255,255,0.02);
  overflow: hidden;
  position: relative;
}

.productions__gallery {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.productions__gallery-track {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;
  width: 100%;
}

.productions__gallery-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease;
  filter: saturate(0.8);
}

.productions__gallery-img.active {
  opacity: 1;
}

.productions__gallery-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.productions__gallery-btn {
  background: none;
  border: 1px solid rgba(201,168,76,0.3);
  color: var(--gold);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s;
}

.productions__gallery-btn:hover {
  background: rgba(201,168,76,0.1);
  border-color: var(--gold);
}

.productions__gallery-count {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.4);
}

/* ── Footer bar specs + CTA ── */
.productions__footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 28px 8vw;
  border-top: 1px solid rgba(201,168,76,0.15);
  background: transparent;
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
  gap: 24px;
}

.productions__specs {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

.productions__spec {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.productions__spec-label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}

.productions__spec-value {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: rgba(255,255,255,0.9);
}

/* CTA */
.productions__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 32px;
  border: 1px solid var(--gold);
  background: rgba(201,168,76,0.08);
  color: var(--gold);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
  white-space: nowrap;
}

.productions__cta:hover {
  background: transparent;
  color: #000;
  border-color: var(--gold);
}

/* Mobile */
@media (max-width: 900px) {
  .productions__body { grid-template-columns: 1fr; }
  .productions__col-video { height: 280px; }
  .productions__col-text { padding: 36px 6vw; }
  .productions__col-gallery { padding: 24px 6vw; }
  .productions__gallery-track { aspect-ratio: 16/9; }
  .productions__footer-bar { flex-direction: column; align-items: flex-start; }
}

/* ── Productions — espace après section ── */
.productions {
  margin-bottom: 0;
  padding-bottom: 0;
}

.productions + section,
.productions + .section-sep-white {
  margin-top: 0;
}

/* Séparateur après productions */
.productions::after {
  content: '';
  display: block;
  height: 80px;
  background: linear-gradient(to bottom, #000, #000);
}

/* ── Galerie wrap avec steps verticaux ── */
.productions__gallery-wrap {
  display: flex;
  gap: 0;
  width: 100%;
  position: relative;
}

.productions__gallery-track {
  flex: 1;
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;
}

/* ── Steps verticaux ── */
.productions__steps {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px 0 8px 12px;
  /* border-left supprimé — remplacé par le drawer */
  gap: 0;
}

.productions__step {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 8px 6px;
  position: relative;
  transition: opacity 0.3s;
  opacity: 0.35;
}

.productions__step.active,
.productions__step:hover {
  opacity: 1;
}

.productions__step-num {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--gold);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
}

.productions__step-label {
  font-family: var(--font-ui);
  font-size: 8px;
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
}

.productions__step.active .productions__step-label {
  color: var(--white);
}

/* trait actif step supprimé */

/* ── Productions redesign ── */

/* Bandeau titre Impact */
.productions__banner {
  background: #000;
  padding: 12px 0;
  overflow: hidden;
  text-align: center;
  border-bottom: 1px solid rgba(201,168,76,0.2);
}

.productions__banner-title {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: clamp(28px, 6.5vw, 96px);
  font-weight: 900;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  display: block;
  line-height: 1;
  /* Étire pour toucher les bords */
  transform: scaleX(1);
  width: 100%;
  text-align: center;
}

/* Header réduit sans titre */
.productions__header {
  padding: 32px 8vw 32px;
  text-align: center;
  border-bottom: 1px solid rgba(201,168,76,0.1);
}

/* Corps 2 colonnes */
.productions__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 80vh;
}

/* Col vidéo + texte en dessous */
.productions__col-video {
  display: flex;
  flex-direction: column;
  border-right: 1px solid rgba(201,168,76,0.1);
}

.productions__video-wrap {
  flex: 1;
  min-height: 300px;
}

.productions__col-text {
  padding: 32px 40px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  border-top: 1px solid rgba(201,168,76,0.1);
}

/* Col galerie immersive */
.productions__col-gallery {
  position: relative;
  overflow: hidden;
  padding: 0;
}

.productions__gallery-track {
  position: absolute;
  inset: 0;
}

/* Ken Burns animation */
@keyframes kenBurns1 { 0% { transform: scale(1) translate(0,0); } 100% { transform: scale(1.12) translate(-2%,-1%); } }
@keyframes kenBurns2 { 0% { transform: scale(1.05) translate(1%,0); } 100% { transform: scale(1) translate(-1%,2%); } }
@keyframes kenBurns3 { 0% { transform: scale(1) translate(-1%,1%); } 100% { transform: scale(1.1) translate(2%,-1%); } }
@keyframes kenBurns4 { 0% { transform: scale(1.08) translate(0,-1%); } 100% { transform: scale(1) translate(1%,2%); } }

.productions__gallery-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.9s ease;
  transform-origin: center;
}

.productions__gallery-img.active {
  opacity: 1;
}

.productions__gallery-img:nth-child(1).active { animation: kenBurns1 8s ease-in-out forwards; }
.productions__gallery-img:nth-child(2).active { animation: kenBurns2 8s ease-in-out forwards; }
.productions__gallery-img:nth-child(3).active { animation: kenBurns3 8s ease-in-out forwards; }
.productions__gallery-img:nth-child(4).active { animation: kenBurns4 8s ease-in-out forwards; }

/* Ancien panneau steps — remplacé par le drawer, neutralisé */
.productions__steps {
  display: none !important;
}

/* .productions__step ancien système supprimé */

/* border-bottom steps supprimé */

.productions__step:hover,
.productions__step.active {
  background: rgba(201,168,76,0.08);
}



.productions__step-num {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--gold);
  writing-mode: horizontal-tb;
}

.productions__step-title {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #fff;
  writing-mode: horizontal-tb;
}

.productions__step-text {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255,255,255,0.5);
  writing-mode: horizontal-tb;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.4s, max-height 0.4s;
}

.productions__step.active .productions__step-text {
  opacity: 1;
  max-height: 100px;
}

/* Mobile */
@media (max-width: 900px) {
  .productions__body { grid-template-columns: 1fr; }
  .productions__col-gallery { height: 70vh; }
  .productions__steps { width: 160px; }
  .productions__step-text { display: none; }
  .productions__banner-title { font-size: clamp(22px, 8vw, 48px); }
}

/* ── Productions steps — chiffres sens de lecture correct ── */
.productions__step-num {
  writing-mode: horizontal-tb !important;
  transform: none !important;
}

.productions__step-title {
  writing-mode: horizontal-tb !important;
  transform: none !important;
}

/* ── Productions — hauteur max ── */
.productions__body {
  min-height: 0 !important;
  height: 80vh !important;
  max-height: 800px !important;
}

.productions__col-gallery {
  height: 100% !important;
}

/* ── Productions galerie — photos adaptées à la hauteur ── */
.productions__gallery-track {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.productions__gallery-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
}

/* ── Productions bandeau — Anton 4 mots en blanc sur fond noir ── */
.productions__banner {
  background: #000 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.productions__banner-title {
  font-family: 'Anton', Impact, sans-serif !important;
  font-weight: 400 !important;
  font-size: clamp(40px, 9vw, 130px) !important;
  line-height: 0.92 !important;
  letter-spacing: 0.01em !important;
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 8px 2vw !important;
}

/* Tous les mots en blanc — la couleur détonnait trop */
.prod-w1, .prod-w2, .prod-w3, .prod-w4 { color: #ffffff; }

/* Hover interactif conservé pour usage futur (bandes Orchestra) */
.prod-w1:hover { color: #00c8d4; transition: color 0.3s; }
.prod-w2:hover { color: #e8006e; transition: color 0.3s; }
.prod-w3:hover { color: #f5d000; transition: color 0.3s; }
.prod-w4:hover { color: #00FF88; transition: color 0.3s; }

/* ── Productions — bandes séparatrices noires ── */
.productions__sep {
  height: 10px !important;
  background: #000 !important;
  width: 100%;
}

/* Header sur fond noir */
.productions__header {
  background: #000 !important;
  border-bottom: none !important;
}

/* ── Productions — bandes blanches ── */
.productions__sep {
  background: #ffffff !important;
}

/* ── Productions — bandes 10px ── */
.productions__sep {
  height: 10px !important;
}

/* ── Productions galerie — parade fond blanc des photos ── */
.productions__col-gallery::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10,13,26,0.35);
  pointer-events: none;
  z-index: 1;
}

.productions__gallery-img {
  filter: contrast(1.05) brightness(0.95) !important;
}

.productions__gallery-img.active {
  opacity: 1 !important;
}

/* Steps restent lisibles au-dessus */
.productions__steps {
  z-index: 3 !important;
}

































.nav.open ul li a::before {
  content: attr(data-index) !important;
  display: block !important;
  font-size: 10px !important;
  letter-spacing: 0.2em !important;
  color: var(--gold) !important;
  opacity: 0.6 !important;
  margin-bottom: 8px !important;
}



/* ── Header reste au-dessus du menu ouvert ── */
.header {
  z-index: 99999 !important;
}

/* Burger actif — la croix reste visible sur fond noir ── */
.nav.open ~ .header,
.header {
  background: transparent !important;
}

/* Quand menu ouvert — header bg noir pour lire la croix ── */
body.menu-open .header,
.nav.open + .header {
  background: #000 !important;
}


/* ══ MENU BURGER HORIZONTAL — VERSION FINALE ══ */
.nav.open {
  position: fixed !important;
  top: 0 !important; left: 0 !important;
  width: 100% !important; height: 100vh !important;
  background: #000000 !important;
  z-index: 99997 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 4vw !important;
  overflow: hidden !important;
}

.nav.open ul {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  list-style: none !important;
  margin: 0 !important; padding: 0 !important;
  gap: 0 !important;
}

.nav.open ul li {
  flex: 1 !important;
  text-align: center !important;
  border-right: 1px solid rgba(255,255,255,0.06) !important;
  border-bottom: none !important;
  border-top: none !important;
}

.nav.open ul li:last-child { border-right: none !important; }
.nav.open ul li:first-child { border-top: none !important; }

.nav.open ul li a {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 0 8px !important;
  height: 120px !important;
  font-family: var(--font-ui) !important;
  font-size: clamp(9px, 1vw, 12px) !important;
  font-weight: 700 !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  color: rgba(255,255,255,0.45) !important;
  transition: color 0.3s, background 0.3s !important;
}

.nav.open ul li a:hover {
  color: var(--gold) !important;
  background: rgba(255,255,255,0.02) !important;
}

/* ══ NAV OPEN HORIZONTAL — OVERRIDE MEDIA QUERY ══ */
@media (max-width: 9999px) {
  .nav.open {
    transform: translateX(0) !important;
    flex-direction: row !important;
    height: 100vh !important;
    background: #000 !important;
  }
  .nav.open ul {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
  }
  .nav.open ul li {
    opacity: 1 !important;
    transform: none !important;
    flex: 1 !important;
    text-align: center !important;
    border-right: 1px solid rgba(255,255,255,0.06) !important;
    border-bottom: none !important;
  }
  .nav.open ul li:last-child { border-right: none !important; }
  .nav.open ul li a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    height: 120px !important;
    font-size: clamp(9px, 1vw, 12px) !important;
    letter-spacing: 0.3em !important;
    color: rgba(255,255,255,0.45) !important;
    padding: 0 8px !important;
  }
  .nav.open ul li a:hover { color: var(--gold) !important; }
}


/* ═══ NAVIGATION TYPOGRAPHIQUE ═══ */
.nav {
  position: fixed; inset: 0;
  background: #000;
  z-index: 99997;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 80px 10vw;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

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

/* Bouton retour — morphing croix → flèche */
.nav-close {
  position: absolute; top: 24px; right: 40px;
  background: none; border: 1px solid rgba(255,255,255,0.15);
  cursor: pointer; width: 52px; height: 52px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.4s ease, background 0.4s ease;
}
.nav-close:hover {
  border-color: #c9a84c;
  background: rgba(201,168,76,0.06);
}

.nav-close__svg {
  width: 28px; height: 28px; overflow: visible;
}

/* Traits SVG */
.nc-line {
  stroke: rgba(255,255,255,0.7);
  stroke-width: 1.5;
  stroke-linecap: round;
  transition: all 0.45s ease;
}

/* Au repos : croix (trait 1 = vertical, trait 2 = horizontal) */
.nc-line--1 { transform-origin: 24px 24px; }
.nc-line--2 { transform-origin: 24px 24px; }

/* Pointe flèche — cachée au repos */
.nc-arrow {
  stroke: #c9a84c;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  opacity: 0;
  transform: translateX(-4px);
  transform-origin: 24px 24px;
  transition: opacity 0.3s ease 0.15s, transform 0.4s ease 0.1s;
}

/* Hover : morphing vers flèche droite → */
.nav-close:hover .nc-line--1 {
  /* Trait vertical devient tige horizontale */
  x1: 10; y1: 24; x2: 34; y2: 24;
  stroke: #c9a84c;
}
.nav-close:hover .nc-line--2 {
  opacity: 0;
}
.nav-close:hover .nc-arrow {
  opacity: 1;
  transform: translateX(0);
  stroke: #c9a84c;
}
.nav-close:hover .nc-line { stroke: #c9a84c; }

/* Label retour */
.nav-close em {
  position: absolute; bottom: -22px;
  font-style: normal; font-family: var(--font-ui); font-size: 9px;
  letter-spacing: 0.25em; text-transform: uppercase;
  color: rgba(255,255,255,0.25); transition: color 0.3s; white-space: nowrap;
}
.nav-close:hover em { color: #c9a84c; }

/* Items */
.nav-typo { display: flex; flex-direction: column; width: 100%; }

.nav-typo__item {
  display: flex; align-items: center; gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  text-decoration: none;
  transition: padding-left 0.4s ease;
}
.nav-typo__item:first-child { border-top: 1px solid rgba(255,255,255,0.06); }
.nav-typo__item:hover { padding-left: 16px; }

.nav-typo__item b {
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  letter-spacing: 0.3em; color: #c9a84c; opacity: 0.5;
  width: 32px; flex-shrink: 0; transition: opacity 0.3s;
}
.nav-typo__item:hover b { opacity: 1; }

.nav-typo__item strong {
  font-family: var(--font-ui); font-size: clamp(22px, 4vw, 52px);
  font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase;
  color: rgba(255,255,255,0.2); line-height: 1;
  transition: color 0.3s, letter-spacing 0.4s;
}
.nav-typo__item:hover strong { color: #fff; letter-spacing: 0.02em; }

.nav-typo__item i {
  font-style: normal; font-family: var(--font-body); font-size: 12px;
  font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  background: #c9a84c; color: #000; padding: 3px 10px;
  opacity: 0; transition: opacity 0.3s 0.1s;
  position: absolute; right: 60px; pointer-events: none;
}
.nav-typo__item { position: relative; }
.nav-typo__item:hover i { opacity: 1; }

/* Item 08 — Espace connecté : discret, différencié */
.nav-typo__item--access b { color: rgba(201,168,76,0.35); }
.nav-typo__item--access strong { color: rgba(255,255,255,0.1); }
.nav-typo__item--access:hover b { opacity: 1; }
.nav-typo__item--access:hover strong { color: rgba(255,255,255,0.65); }
.burger.active .burger__cross {
  display: none !important;
}

.burger.active .burger__lines,
.burger.active .burger__label {
  opacity: 0 !important;
}

/* ── Hero — bloc contenu bas gauche ── */
.hero__content--bottom-left {
  justify-content: flex-end !important;
  align-items: flex-start !important;
  padding-bottom: 80px !important;
}

/* ── Hero — masque typographique ── */
.hero__typo-mask {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
  display: flex;
  flex-direction: column;
}

.hero__typo-mask.visible {
  opacity: 1;
  pointer-events: auto;
}



/* SVG masque */
.hero__typo-svg {
  position: relative;
  z-index: 1;
  width: 100%;
  flex: 1;
}

/* Tagline + bouton en bas */
.hero__typo-footer {
  position: absolute;
  bottom: 40px;
  left: 0; right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 60px;
}

.hero__typo-tagline {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.5);
}

.hero__typo-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  border: 1px solid rgba(201,168,76,0.5);
  color: var(--gold);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: color 0.3s, border-color 0.3s;
}

.hero__typo-btn::before {
  content: ''; position: absolute; inset: 0;
  background: var(--gold); transform: scaleX(0);
  transform-origin: left; transition: transform 0.4s var(--ease-out); z-index: 0;
}
.hero__typo-btn span, .hero__typo-btn svg { position: relative; z-index: 1; }
.hero__typo-btn:hover { background: transparent; color: #000; border-color: var(--gold); }
.hero__typo-btn:hover::before { transform: scaleX(1); }

.hero__typo-mask.visible {
  opacity: 1;
}

.hero__typo-svg {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}



/* ── Vidéo — filtre pendant le masque typo ── */
#heroVideo {
  transition: filter 1s ease;
}

body.typo-mask-active #heroVideo {
  /* N&B + surexposition + isohélie simulée */
  filter: grayscale(100%) brightness(2.2) contrast(0.65) saturate(0) !important;
}

/* ── Scroll indicator — masqué pendant le masque typo ── */
/* scroll-indicator toujours visible et interactif */


/* ═══ HERO CONTENT — styles complets ═══ */
.hero__headline {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  padding: 10px 16px 10px 0;
  background: rgba(0,0,0,0.42);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.hero__headline-label {
  font-family: var(--font-ui);
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--gold);
  transition: color 0.4s ease;
}

.hero__headline-name {
  font-family: 'Oswald', var(--font-ui);
  font-weight: 700; font-size: clamp(22px, 3vw, 36px);
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gold);
  transition: color 0.4s ease, text-shadow 0.4s ease;
}

.hero__headline-sub {
  font-family: var(--font-ui);
  font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold); opacity: 0.6;
  transition: color 0.4s ease;
}

.hero__headline:hover .hero__headline-label { color: rgba(255,255,255,0.35); }
.hero__headline:hover .hero__headline-sub   { color: rgba(255,255,255,0.25); opacity: 1; }
.hero__headline:hover .hero__headline-name  { color: var(--gold); text-shadow: 0 0 24px rgba(201,168,76,0.6); }

.hero__slogan {
  font-family: var(--font-body);
  font-style: italic; font-weight: 300;
  font-size: clamp(18px, 2.2vw, 28px);
  color: rgba(255,255,255,0.55);
  line-height: 1.3;
  margin-top: 4px;
}

.hero__slogan strong {
  color: #fff; font-weight: 400;
  font-style: italic;
  display: block;
}

.hero__cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 22px; margin-top: 4px;
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff; font-family: var(--font-ui);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  text-decoration: none; align-self: flex-start;
  transition: border-color 0.3s, background 0.3s, color 0.3s, gap 0.3s;
}

.hero__cta:hover {
  border-color: var(--gold);
  background: var(--gold);
  color: #000; gap: 16px;
}

/* heroScrollIndicator toujours visible */
@keyframes scrollPulse {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(5px); }
}



/* ═══ ESPACEMENTS INTER-SECTIONS ═══ */

/* Productions → Hero : 20px */
.sep-15 { height: 20px !important; }

/* Hero → Productions : 20px */
.hero + .sep-15,
.sep-15:first-of-type { height: 20px !important; }

/* Productions padding-bottom : 0 */
.productions { padding-bottom: 0 !important; margin-bottom: 0 !important; }
.productions::after { display: none !important; }

/* Galerie → À l'affiche : 20px via sep-15 */
/* À l'affiche → Adhésion : 20px via sep-15 */

/* Adhésion → Nous Soutenir : 20px */
.adhesion { padding-bottom: 20px !important; }

/* Nous Soutenir interne */
/* Tagline → Frise : 30px */
.soutenir__tagline { margin-bottom: 30px !important; }

/* Frise → Photo bandeau : 30px */
.soutenir__frise { margin-bottom: 30px !important; }

/* Photo bandeau → Tabs : 20px */
.soutenir__bandeau { margin-bottom: 20px !important; }

/* Tabs → Contact : 20px */
.soutenir { padding-bottom: 0 !important; }

/* Contact → Footer : 20px */
.contact { padding-bottom: 20px !important; }

/* Footer spacing */
.footer { padding-top: 20px !important; }

/* ── Adhésion — phrase d'invite mise en valeur ── */
.adhesion__text-cta-invite {
  font-family: var(--font-ui);
  font-size: clamp(16px, 2vw, 22px);
  font-weight: 700;
  font-style: italic;
  color: var(--gold);
  letter-spacing: 0.02em;
  margin-top: 24px !important;
  margin-bottom: 8px !important;
  line-height: 1.3;
}

/* ── Adhésion — cartes type : call to click renforcé ── */
.adhesion__type-card {
  cursor: pointer;
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

.adhesion__type-card:hover {
  border-color: var(--gold) !important;
  box-shadow: 0 4px 20px rgba(201,168,76,0.15);
}

.adhesion__type-select-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  padding: 12px 20px;
  background: rgba(201,168,76,0.08);
  border: 1px solid rgba(201,168,76,0.3);
  color: var(--gold);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  position: relative;
  overflow: hidden;
  transition: color 0.4s, border-color 0.4s;
}

.adhesion__type-select-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
  z-index: 0;
}

.adhesion__type-card:hover .adhesion__type-select-btn::before,
.adhesion__type-card.selected .adhesion__type-select-btn::before {
  transform: scaleX(1);
}

.adhesion__type-card:hover .adhesion__type-select-btn,
.adhesion__type-card.selected .adhesion__type-select-btn {
  color: #000;
  border-color: var(--gold);
}

.adhesion__type-select-btn span {
  position: relative;
  z-index: 1;
}

.adhesion__type-arrow {
  transition: transform 0.3s;
}

.adhesion__type-card:hover .adhesion__type-arrow {
  transform: translateX(4px);
}


/* ── Adhésion form — déploiement hover/clic ── */
.adhesion__form--preview {
  max-height: 120px !important;
  opacity: 0.5 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  transition: max-height 0.4s ease, opacity 0.4s ease !important;
}

/* Bouton changer de formule */
.adhesion__reset-btn {
  display: none;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: rgba(255,255,255,0.35);
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 8px 0;
  margin-bottom: 20px;
  transition: color 0.3s;
}

.adhesion__reset-btn:hover { color: var(--gold); }

.adhesion__form--unlocked .adhesion__reset-btn {
  display: inline-flex;
}

/* ═══ SEP-20 — séparateur blanc cassé 20px ═══ */
.sep-20 {
  height: 20px;
  background: var(--bg-light);
  width: 100%;
  display: block;
}

/* ═══════════════════════════════════════════
   CORRECTIONS CONTRASTE — ajouts ciblés
═══════════════════════════════════════════ */








/* ═══════════════════════════════════════════
   SCROLL-MARGIN-TOP — toutes les sections
═══════════════════════════════════════════ */
.productions,
.galerie,
.affiche,
.adhesion,
.soutenir,
.contact {
  scroll-margin-top: var(--header-h, 64px);
}

/* ═══════════════════════════════════════════
   HERO — Signature verticale (bloc bas droite)
═══════════════════════════════════════════ */
.hero__signature {
  position: absolute;
  bottom: 70px;
  right: 57px;
  display: flex;
  flex-direction: row-reverse;
  align-items: stretch;
  gap: 0;
  padding: 24px 0 24px 40px;
  background: linear-gradient(to left, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.0) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  max-width: 520px;
  pointer-events: auto;
}

.hero__signature-bar {
  width: 3px;
  min-height: 100%;
  background: linear-gradient(to bottom, var(--gold) 0%, rgba(201,168,76,0.2) 100%);
  margin-left: 24px;
  margin-right: 0;
  flex-shrink: 0;
  border-radius: 2px;
}

.hero__signature-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-end;
  text-align: right;
}

.hero__signature-label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.8;
}

.hero__signature-name {
  font-family: 'Oswald', var(--font-ui);
  font-weight: 700;
  font-size: clamp(42px, 5.5vw, 72px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--white);
  line-height: 1;
  text-shadow: 0 2px 24px rgba(0,0,0,0.6);
}

.hero__signature-sub {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.65;
  line-height: 1.7;
}

.hero__signature-body .hero__slogan {
  margin-top: 4px;
  font-size: clamp(15px, 1.8vw, 22px);
  opacity: 0.85;
  text-align: right;
}

.hero__signature-body .hero__cta {
  align-self: flex-end;
  margin-top: 12px;
  border-color: var(--gold);
  color: var(--gold);
}

/* ═══════════════════════════════════════════
   NAV — Steps productions
═══════════════════════════════════════════ */
.productions__step-num {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--gold);
}

.productions__step-title {
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

.productions__step-text {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(255,255,255,0.6);
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.4s, max-height 0.4s;
}

.productions__step.active .productions__step-text {
  opacity: 1;
  max-height: 160px;
}

/* ═══════════════════════════════════════════
   GALERIE — object-position + filtre offset
═══════════════════════════════════════════ */
.productions__col-gallery {
  position: relative;
}

.productions__gallery-img {
  object-position: center top;
}


/* ═══════════════════════════════════════════
   CRÉDITS VIDÉO + PHOTO
═══════════════════════════════════════════ */
.video-credit {
  position: absolute;
  bottom: 12px; left: 16px;
  right: auto;
  z-index: 5;
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.45);
  pointer-events: none;
  user-select: none;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.photo-credit {
  position: absolute;
  bottom: 12px; left: 16px;
  z-index: 5;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.50);
  pointer-events: none;
  user-select: none;
}

/* ═══════════════════════════════════════════
   NAV MENU — tailles augmentées
═══════════════════════════════════════════ */
.nav-typo__item b {
  font-family: var(--font-ui); font-size: 14px; font-weight: 700;
  letter-spacing: 0.3em; color: #c9a84c; opacity: 0.5;
  width: 36px; flex-shrink: 0; transition: opacity 0.3s;
}
.nav-typo__item:hover b { opacity: 1; }

.nav-typo__item strong {
  font-family: var(--font-ui); font-size: clamp(28px, 4.5vw, 72px);
  font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase;
  color: rgba(255,255,255,0.2); line-height: 1;
  transition: color 0.3s, letter-spacing 0.4s;
}
.nav-typo__item:hover strong { color: #fff; letter-spacing: 0.02em; }

.nav-typo__item i {
  font-style: normal; font-family: var(--font-body); font-size: 16px;
  font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  background: #c9a84c; color: #000; padding: 5px 14px;
  opacity: 0; transition: opacity 0.3s 0.1s;
}
.nav-typo__item:hover i { opacity: 1; }


/* ═══════════════════════════════════════════
   BULLE CITATION — membres bureau
═══════════════════════════════════════════ */

.asso__membre-bubble {
  position: absolute;
  top: calc(50% + 4px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: 220px;
  background: #000000;
  border: 1px solid var(--gold);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
  z-index: 10;
}

.asso__membre-bubble::after {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid var(--gold);
}
.asso__membre-bubble::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 9px solid var(--black);
  z-index: 1;
}

.asso__membre:hover .asso__membre-bubble {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.asso__membre-bubble-name {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}

.asso__membre-bubble-quote {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 300;
  font-style: italic;
  line-height: 1.6;
  color: rgba(255,255,255,0.8);
}

.asso__membre-bubble-author {
  font-family: var(--font-mono, 'Courier New', monospace);
  font-size: 9px;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.4);
  text-align: right;
}


/* ═══════════════════════════
   BARRE NAV MOBILE
═══════════════════════════ */

/* Barre nav mobile — cachée sur desktop */
.mobile-nav { display: none; }

/* Bandeau TQMO hero — caché sur desktop */
.hero__tqmo-tag { display: none; }

/* Galerie mobile — caché sur desktop */
.galerie__mobile-mosaic { display: none; }
.galerie__mobile-next { display: none; }

/* Soutenir timeline — dots dorés restaurés sur fond clair */
.soutenir .soutenir__step-dot {
  background: var(--gold-dim) !important;
  border-color: var(--gold) !important;
}
.soutenir .soutenir__step.active .soutenir__step-dot,
.soutenir .soutenir__step:hover .soutenir__step-dot {
  background: var(--gold) !important;
  border-color: var(--gold) !important;
}
.soutenir .soutenir__timeline-steps::before {
  background: var(--gold-dim) !important;
}

/* Dots nav mobile — cachés sur desktop */
.productions__dots-nav { display: none; }

/* Mobile nav productions — caché sur desktop */
.productions__mobile-nav { display: none; }
.mobile-hidden { display: none !important; height: 0 !important; overflow: hidden !important; }

/* ═══════════════════════════════════════════
   BOUTONS RESET — Formulaires Contact & Adhésion
═══════════════════════════════════════════ */

/* Contact — bouton réinitialiser */
.contact__confirm-reset {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  padding: 11px 24px;
  background: transparent;
  border: 1px solid var(--gold-dim);
  color: var(--gold);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.contact__confirm-reset:hover {
  background: rgba(201,168,76,0.08);
  border-color: var(--gold);
}
.contact__confirm-reset svg {
  flex-shrink: 0;
  opacity: 0.7;
}

/* Adhésion — actions après confirm */
.adhesion__confirm-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 24px;
}

.adhesion__confirm-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
  background: var(--gold);
  border: 1px solid var(--gold);
  color: #000;
}
.adhesion__confirm-btn:hover {
  background: rgba(201,168,76,0.85);
}
.adhesion__confirm-btn svg {
  flex-shrink: 0;
}

/* Version secondaire — transparent */
.adhesion__confirm-btn--sec {
  background: transparent;
  border-color: var(--gold-dim);
  color: var(--gold);
}
.adhesion__confirm-btn--sec:hover {
  background: rgba(201,168,76,0.08);
  border-color: var(--gold);
}

@media (max-width: 480px) {
  .adhesion__confirm-actions { flex-direction: column; align-items: center; }
  .adhesion__confirm-btn { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════
   CONFIRMATION ADHÉSION — Nouveau design
═══════════════════════════════════════════ */
.adhesion__confirm-inner { padding: 0; border: none; margin-top: 0; text-align: left; }

.aconf-top { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: start; margin-bottom: 36px; }
.aconf-star { display: block; font-size: 20px; color: var(--gold); letter-spacing: 0.15em; margin-bottom: 16px; }
.aconf-overline { font-family: var(--font-ui); font-size: 9px; letter-spacing: 0.35em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.aconf-title { font-family: var(--font-display); font-size: 32px; font-weight: 300; font-style: italic; color: #fff; line-height: 1.2; margin-bottom: 14px; }
.aconf-sub { font-family: var(--font-ui); font-size: 13px; font-weight: 300; color: rgba(255,255,255,0.45); line-height: 1.75; max-width: 420px; }
.aconf-recap { border: 1px solid rgba(255,255,255,0.07); padding: 20px 22px; min-width: 200px; flex-shrink: 0; }
.aconf-recap-lbl { font-size: 8px; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(255,255,255,0.25); margin-bottom: 14px; }
.aconf-recap-row { display: flex; flex-direction: column; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.aconf-recap-row:last-child { border-bottom: none; }
.aconf-rk { font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.28); margin-bottom: 3px; }
.aconf-rv { font-size: 13px; color: rgba(255,255,255,0.7); }
.aconf-rv.gold { color: var(--gold); }

.aconf-divider { width: 32px; height: 1px; background: var(--gold); margin-bottom: 32px; }

.aconf-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 0; border: 1px solid rgba(255,255,255,0.06); margin-bottom: 36px; }
.aconf-step { padding: 20px 18px; border-right: 1px solid rgba(255,255,255,0.06); }
.aconf-step:last-child { border-right: none; }
.aconf-sn { width: 26px; height: 26px; border: 1px solid rgba(201,168,76,0.25); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; color: rgba(201,168,76,0.5); margin-bottom: 12px; font-family: var(--font-ui); flex-shrink: 0; }
.aconf-sn.done { background: rgba(201,168,76,0.15); border-color: var(--gold); color: var(--gold); }
/* Étapes passées — fond doré discret */
.aconf-step.done { background: rgba(201,168,76,0.06); border-left: 2px solid rgba(201,168,76,0.35); padding-left: 16px; }
.aconf-step.done .aconf-st { color: rgba(255,255,255,0.9); }
.aconf-step.done .aconf-ss { color: rgba(201,168,76,0.5); }
.aconf-st { font-family: var(--font-ui); font-size: 12px; font-weight: 400; color: rgba(255,255,255,0.75); margin-bottom: 5px; line-height: 1.4; }
.aconf-ss { font-family: var(--font-ui); font-size: 11px; font-weight: 300; color: rgba(255,255,255,0.3); line-height: 1.5; }
.aconf-step--final { grid-column: span 2; border-left: 3px solid #4caf7d; background: rgba(76,175,125,0.06); }
.aconf-step--final .aconf-sn { border-color: #4caf7d; color: #4caf7d; }
.aconf-step--final .aconf-st { color: #4caf7d; }
.aconf-step--final .aconf-ss { color: #b9d8c8; }

.aconf-btns { display: flex; gap: 12px; justify-content: center; }
.aconf-btn-sec { font-family: var(--font-ui); font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; padding: 13px 28px; border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.5); background: transparent; cursor: pointer; }
.aconf-btn-sec:hover { border-color: rgba(255,255,255,0.4); color: rgba(255,255,255,0.8); }
.aconf-btn-gold { font-family: var(--font-ui); font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; padding: 13px 28px; border: 1px solid var(--gold); color: var(--gold); background: transparent; cursor: pointer; text-decoration: none; display: inline-block; }
.aconf-btn-gold:hover { background: rgba(201,168,76,0.08); }

@media (max-width: 768px) {
  .aconf-top { grid-template-columns: 1fr; }
  .aconf-recap { min-width: unset; }
  .aconf-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .aconf-steps { grid-template-columns: 1fr; }
  .aconf-title { font-size: 24px; }
}

/* ═══════════════════════════════════════════
   SOUTENIR — Tabs 02 & 03 — Logos & Partenaires
═══════════════════════════════════════════ */

/* Colonne droite scrollable */
.soutenir__logos-scroll {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  max-height: none;
  overflow: visible;
  width: 100%;
  box-sizing: border-box;
}
.soutenir__logos-scroll > * { min-width: 0; }

.soutenir__logo-card {
  border: 1px solid rgba(255,255,255,0.08);
  padding: 18px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  text-decoration: none;
  transition: border-color 0.2s;
}
.soutenir__logo-card:hover { border-color: rgba(201,168,76,0.35); }
.soutenir__logo-placeholder {
  font-size: 8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.15);
}
.soutenir__logos-note {
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  font-style: italic;
  margin-top: 10px;
  line-height: 1.6;
}

/* Partenaires scrollables */
.soutenir__partners-scroll {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
  padding-right: 6px;
}
.soutenir__partners-scroll::-webkit-scrollbar { width: 2px; }
.soutenir__partners-scroll::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.3); border-radius: 2px; }

.soutenir__partner-card {
  border: 1px solid rgba(201,168,76,0.2);
  padding: 16px 20px;
}
.soutenir__partner-card--placeholder {
  border-color: rgba(255,255,255,0.06);
}
.soutenir__partner-badge {
  font-size: 8px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #c9a84c;
  display: block;
  margin-bottom: 7px;
}
.soutenir__partner-name {
  font-size: 14px;
  font-weight: 400;
  color: #fff;
  margin-bottom: 4px;
}
.soutenir__partner-desc {
  font-size: 11px;
  color: rgba(255,255,255,0.35);
}

/* Contact quote & mail */
.soutenir__contact-quote {
  font-family: var(--font-display);
  font-size: 18px;
  font-style: italic;
  font-weight: 300;
  color: rgba(255,255,255,0.5);
  line-height: 1.6;
}
.soutenir__contact-mail {
  display: block;
  font-size: 10px;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.25);
  margin-top: 10px;
}

/* ═══════════════════════════════════════════
   HERO — Alignement Voyageons Ensemble / Voir le projet
═══════════════════════════════════════════ */
/* hero__typo-footer ancré à bottom:40px */
.hero__typo-footer {
  bottom: 40px !important;
  align-items: flex-end;
}
/* hero__content descend pour aligner le CTA avec Voir le projet */
.hero__content {
  bottom: 40px !important;
}
/* CTA — espace respiratoire en bas */
.hero__signature-body .hero__cta {
  margin-top: 8px;
}

/* ═══════════════════════════════════════════
   SOUTENIR — Logos mécènes mise en valeur
═══════════════════════════════════════════ */
.soutenir__logo-card {
  border: 1px solid rgba(201,168,76,0.15);
  padding: 16px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  text-decoration: none;
  transition: border-color 0.25s, background 0.25s;
  background: rgba(201,168,76,0.02);
  position: relative;
  overflow: hidden;
}
.soutenir__logo-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(201,168,76,0.04) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.25s;
}
.soutenir__logo-card:hover {
  border-color: rgba(201,168,76,0.5);
  background: rgba(201,168,76,0.05);
}
.soutenir__logo-card:hover::after { opacity: 1; }

.soutenir__logo-placeholder {
  font-size: 8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(201,168,76,0.35);
  text-align: center;
  line-height: 1.6;
}


/* ── Liens Wikipedia ── */
.wiki-link {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  text-decoration-color: rgba(201,168,76,0.5);
  transition: text-decoration-color 0.2s, opacity 0.2s;
  opacity: 0.9;
}
.wiki-link:hover {
  text-decoration-color: var(--gold);
  opacity: 1;
}

/* ── Productions bloc — corrections espacement ── */
.productions__col-text {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(201,168,76,0.2) transparent;
  gap: 8px;
  padding-top: 24px;
  padding-bottom: 24px;
}
.productions__col-text::-webkit-scrollbar { width: 3px; }
.productions__col-text::-webkit-scrollbar-track { background: transparent; }
.productions__col-text::-webkit-scrollbar-thumb { background: rgba(201,168,76,0.2); border-radius: 2px; }

.productions__block {
  margin-bottom: 0;
}
.productions__block + .productions__block {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid rgba(201,168,76,0.08);
}
.productions__block-label {
  margin-bottom: 8px !important;
}
.productions__block p {
  line-height: 1.9 !important;
  margin-bottom: 12px !important;
  font-size: 15px !important;
}


/* ── Lightbox mobile — cachée par défaut ── */
.lightbox { display: none; }
.lightbox.active { display: flex !important; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.92); align-items: center; justify-content: center; }
.mobile-lightbox { display: none; }
.mobile-lightbox.open { display: flex !important; }


/* ── Lien partenaire placeholder ── */
.partner-cta-link {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  text-decoration-color: rgba(201,168,76,0.5);
  transition: text-decoration-color 0.2s;
}
.partner-cta-link:hover {
  text-decoration-color: var(--gold);
}


/* ── Lien partenaire "c'est ici" ── */
.partner-cta-link {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  text-decoration-color: rgba(201,168,76,0.5);
  transition: text-decoration-color 0.2s, opacity 0.2s;
  opacity: 0.9;
}
.partner-cta-link:hover {
  text-decoration-color: var(--gold);
  opacity: 1;
}


/* ── Lien contactez-nous logos partenaires ── */
.soutenir__logos-link {
  color: var(--gold);
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  text-decoration-color: rgba(201,168,76,0.5);
  transition: text-decoration-color 0.2s, opacity 0.2s;
  opacity: 0.9;
}
.soutenir__logos-link:hover {
  text-decoration-color: var(--gold);
  opacity: 1;
}


/* ── Silhouette membre sans photo ── */
.asso__membre-silhouette {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  border: none;
  outline: none;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════
   TOOLTIPS MEMBRES TQMO
   ═══════════════════════════════════════════════════════════ */
.membre-link {
  color: #C9A84C;
  border-bottom: 1px solid rgba(201,168,76,0.5);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s, color 0.2s;
  line-height: 1.9;
}
.membre-link:hover {
  color: #E8C96A;
  border-color: #E8C96A;
}
.membre-tooltip {
  position: absolute;
  z-index: 900;
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.membre-tooltip.visible {
  opacity: 1;
  transform: translateY(0);
}
.membre-tooltip__bubble {
  position: relative;
  background: #0a0a0a;
  border: 1px solid rgba(255,255,255,0.15);
  padding: 14px 16px 12px;
  width: 280px;
  border-radius: 4px;
}
.membre-tooltip__nom {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #ffffff;
  margin: 0 0 2px;
}
.membre-tooltip__role {
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  margin: 0 0 8px;
}
.membre-tooltip__bio {
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255,255,255,0.72);
  margin: 0;
}
.membre-tooltip__arrow {
  position: absolute;
  bottom: -9px;
  left: 28px;
  width: 0; height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 9px solid rgba(255,255,255,0.15);
}
.membre-tooltip__arrow::after {
  content: '';
  position: absolute;
  top: -10px; left: -8px;
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #0a0a0a;
}
.membre-tooltip__photo {
  width: 60px; height: 60px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.2);
  margin-left: 20px;
  margin-top: 2px;
  flex-shrink: 0;
}
.membre-tooltip__img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* ═══════════════════════════════════════════
   PRODUCTIONS — Navigation entre projets
═══════════════════════════════════════════ */
.productions__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 16px;
}

.productions__nav-btn {
  background: none;
  border: 1px solid rgba(201,168,76,0.3);
  color: var(--gold);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s;
  border-radius: 0;
}

.productions__nav-btn:hover {
  background: rgba(201,168,76,0.12);
  border-color: var(--gold);
}

.productions__nav-counter {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.4);
}

/* Slide wrapper */
.productions__slider { position: relative; overflow: hidden; }


/* Slide teaser (projet 2 factice) */
.productions__teaser {
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 8vw;
  position: relative;
  z-index: 1;
}

.productions__teaser-inner {
  max-width: 640px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.productions__teaser-title {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(24px, 3vw, 48px);
  color: #fff;
  letter-spacing: 0.02em;
}

.productions__teaser-text {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
  color: rgba(255,255,255,0.5);
  font-style: italic;
}

/* ═══════════════════════════════════════════
   AFFICHE — Slider spectacles
═══════════════════════════════════════════ */
.affiche__slider { position: relative; overflow: hidden; }


.affiche__slider-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 20px 0 32px;
}

.affiche__slider-btn {
  background: none;
  border: 1px solid rgba(201,168,76,0.3);
  color: var(--gold);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.3s, border-color 0.3s;
}

.affiche__slider-btn:hover {
  background: rgba(201,168,76,0.1);
  border-color: var(--gold);
}

.affiche__slider-counter {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 300;
  letter-spacing: 0.25em;
  color: rgba(255,255,255,0.35);
}


/* ═══════════════════════════════════════════
   DESKTOP RÉDUIT — breakpoint 900px
   Même rendu que mobile.css (vrai mobile)
   SAUF : menu burger conservé (pas d'icônes en bas)
   et masque vectoriel WebGL supprimé sur le hero.
   Ne pas confondre avec mobile.css qui reste inchangé
   et sert uniquement aux vrais appareils mobiles.
═══════════════════════════════════════════ */
@media (max-width: 900px) {

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; -webkit-tap-highlight-color: transparent; }
.hero__typo-mask { display: none !important; }
.scroll-indicator { display: none !important; }
.back-to-top { display: none !important; }
.asso__damier { display: none !important; }
.adhesion__visual { display: none !important; }
.sep-20 { height: 3px !important; }

/* ── Masque vectoriel WebGL supprimé ── */
#heroCanvas { display: none !important; }
.hero__typo-mask { display: none !important; }
#heroVideo { filter: none !important; -webkit-filter: none !important; }
body.typo-mask-active #heroVideo { filter: none !important; -webkit-filter: none !important; }
body.typo-mask-active .hero__content,
body.typo-mask-active #heroContent { opacity: 0 !important; pointer-events: none !important; }

/* ── Menu burger conservé (différence vs vrai mobile) ── */
/* La nav desktop reste active — pas de nav icônes en bas */
.mobile-nav { display: none !important; }
#header { display: flex !important; }

/* ── Hero ── */
.hero { height: 100svh !important; min-height: 100svh !important; }
.hero__content {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  bottom: auto !important;
  right: auto !important;
  transform: translate(-50%, -50%) !important;
  max-width: 88vw !important;
  width: 88vw !important;
  z-index: 5 !important;
}
.hero__signature {
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 18px 16px !important;
  background: rgba(0,0,0,0.6) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(201,168,76,0.18) !important;
  gap: 8px !important;
}
.hero__signature-bar { width: 32px !important; height: 2px !important; min-height: unset !important; margin: 0 auto !important; }
.hero__signature-body { align-items: center !important; text-align: center !important; }
.hero__signature-label { font-size: 9px !important; letter-spacing: 0.3em !important; white-space: nowrap !important; }
.hero__signature-name { font-size: clamp(26px, 7vw, 40px) !important; line-height: 1 !important; white-space: nowrap !important; }
.hero__signature-sub { font-size: 8px !important; letter-spacing: 0.05em !important; white-space: nowrap !important; }
.hero__slogan { font-size: 12px !important; text-align: center !important; }
.hero__cta { align-self: center !important; font-size: 9px !important; padding: 10px 16px !important; white-space: nowrap !important; margin-top: 4px !important; }
.hero__tqmo-tag { display: block !important; width: 100% !important; text-align: center !important; margin-top: 10px !important; }
.hero__tqmo-tag-text {
  display: block !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,0.6) !important;
  text-align: center !important;
}

/* ── Association ── */
.asso { padding: 28px 20px 20px !important; }
.asso__layout { grid-template-columns: 1fr !important; gap: 24px !important; }
.asso__bureau { padding: 20px !important; }
.asso__bureau-title { font-size: clamp(14px, 3.5vw, 18px) !important; white-space: nowrap !important; }
.asso__bureau-membres { flex-wrap: wrap !important; justify-content: center !important; gap: 28px !important; }

/* ── Productions ── */
.productions__header { padding: 20px 20px 10px !important; text-align: center !important; }
.productions__tagline { font-size: 13px !important; }
.productions__sep { height: 3px !important; }
.productions__banner { padding: 8px 16px !important; overflow: hidden !important; background: #000 !important; }
.productions__banner-title {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-size: clamp(13px, 4vw, 22px) !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
}
.prod-w1,.prod-w2,.prod-w3,.prod-w4 { font-size: clamp(13px, 4vw, 22px) !important; letter-spacing: 0 !important; }
.productions__body { display: flex !important; flex-direction: column !important; gap: 0 !important; min-height: unset !important; height: auto !important; }
.productions__col-video { display: none !important; height: 0 !important; min-height: 0 !important; }
.productions__col-text { display: none !important; height: 0 !important; overflow: hidden !important; }
.productions__block { display: none !important; }
.productions__col-gallery { display: none !important; height: 0 !important; overflow: hidden !important; margin: 0 !important; padding: 0 !important; }
.productions__mobile-nav { display: block !important; background: #000 !important; width: 100% !important; }
.productions__mobile-slides { position: relative !important; width: 100% !important; height: 220px !important; overflow: hidden !important; }
.productions__mobile-slide { position: absolute !important; inset: 0 !important; opacity: 0 !important; transition: opacity 0.4s ease !important; }
.productions__mobile-slide.active { opacity: 1 !important; }
.productions__mobile-slide img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
.productions__mobile-dots { display: flex !important; justify-content: center !important; gap: 0 !important; background: #0a0a0a !important; padding: 0 !important; width: 100% !important; }
.productions__mobile-dot { flex: 1 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 6px !important; padding: 12px 4px !important; background: #0a0a0a !important; border: none !important; border-top: 2px solid transparent !important; cursor: pointer !important; }
.productions__mobile-dot.active { border-top-color: #c9a84c !important; background: rgba(201,168,76,0.06) !important; }
.dot-pip { width: 6px !important; height: 6px !important; border-radius: 50% !important; background: rgba(255,255,255,0.2) !important; display: block !important; }
.productions__mobile-dot.active .dot-pip { background: #c9a84c !important; transform: scale(1.3) !important; }
.dot-title { font-family: var(--font-ui) !important; font-size: 7px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; color: rgba(255,255,255,0.35) !important; white-space: nowrap !important; display: block !important; }
.productions__mobile-dot.active .dot-title { color: #c9a84c !important; }
.productions__steps { display: none !important; }
.productions__footer-bar { flex-direction: column !important; padding: 20px !important; gap: 14px !important; }
.productions__cta { width: 100% !important; text-align: center !important; justify-content: center !important; }

/* ── Galerie ── */
.galerie { padding: 20px 0 24px !important; }
.galerie__row { display: none !important; }
.galerie__more { display: none !important; }
.galerie__mobile-mosaic { display: block !important; width: 100% !important; }
.galerie__mosaic-row { display: grid !important; gap: 3px !important; margin-bottom: 3px !important; }
.galerie__mosaic-row.pattern-a { grid-template-columns: 3fr 2fr !important; }
.galerie__mosaic-row.pattern-b { grid-template-columns: 2fr 3fr !important; }
.galerie__mosaic-row.pattern-c { grid-template-columns: 1fr !important; }
.galerie__mosaic-cell { overflow: hidden !important; cursor: pointer !important; background: #111 !important; }
.galerie__mosaic-cell img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
.galerie__mosaic-row.pattern-a .galerie__mosaic-cell,
.galerie__mosaic-row.pattern-b .galerie__mosaic-cell { height: 44vw !important; }
.galerie__mosaic-row.pattern-c .galerie__mosaic-cell { height: 56vw !important; }

/* ── Affiche ── */
.affiche__spread { grid-template-columns: 1fr !important; }
.affiche__visual { height: 52vw !important; min-height: 160px !important; }
.affiche__content { border-left: none !important; border-top: 1px solid var(--white-faint) !important; padding: 20px !important; }
.affiche__cta { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; padding: 16px !important; margin-top: 16px !important; }

/* ── Adhésion ── */
.adhesion { padding: 24px 20px !important; }
.adhesion__layout { grid-template-columns: 1fr !important; gap: 20px !important; }
.adhesion__type-selector { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
.adhesion__type-card { width: 100% !important; min-width: 0 !important; padding: 14px 10px !important; }
.adhesion__type-list { display: none !important; }
.adhesion__form-wrap { display: block !important; overflow: visible !important; max-height: none !important; height: auto !important; }

/* ── Soutenir ── */
.soutenir { background: #000 !important; padding: 0 !important;  }
.soutenir__header { display: block !important; padding: 28px 20px 12px !important; text-align: center !important; }
.soutenir__title { color: #fff !important; }
.soutenir__label { color: #c9a84c !important; }
.soutenir__quote { color: rgba(255,255,255,0.55) !important; }
.soutenir__intro { color: rgba(255,255,255,0.55) !important; }
.soutenir__body { display: none !important; }
.soutenir__tabs { display: block !important; width: 100% !important; }
.soutenir__tabs-nav { display: flex !important; flex-direction: row !important; width: 100% !important; gap: 1px !important; overflow-x: auto !important; scrollbar-width: none !important; }
.soutenir__tab-btn { flex: 1 !important; min-width: 70px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 12px 4px !important; min-height: 60px !important; background: #000 !important; border: none !important; gap: 4px !important; cursor: pointer !important; }
.soutenir__tab-btn.active { background: rgba(201,168,76,0.08) !important; border-bottom: 2px solid var(--gold) !important; }
.soutenir__panel { padding: 20px !important; }

/* ── Contact ── */
.contact { padding: 24px 20px !important; }
.contact__layout { grid-template-columns: 1fr !important; gap: 20px !important; }

/* ── Footer ── */
footer { padding: 0 0 24px 0 !important; }
.footer__top { padding: 10px 20px 6px !important; }
.footer__bottom { padding: 6px 20px !important; }

/* ── Slider productions réduit ── */
.productions__nav { gap: 12px !important; }
.productions__teaser { min-height: 30vh !important; padding: 40px 20px !important; }

/* ── Slider affiche réduit ── */
.affiche__slider-nav { padding: 12px 0 20px !important; }

} /* fin @media (max-width: 900px) */

/* ═══════════════════════════════════════════
   NAVIGATION PRODUCTIONS — Mix A+D
   Centrée, visible, contrastée
═══════════════════════════════════════════ */
.productions__nav-ad {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 32px;
  padding: 12px 40px 16px;
  border-top: 1px solid rgba(201,168,76,0.12);
  background: rgba(255,255,255,0.03);
}

.productions__nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  cursor: pointer;
  min-width: 80px;
}

.productions__nav-num {
  font-family: 'Anton', Impact, sans-serif;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.25);
  transition: color .4s cubic-bezier(.22,.61,.36,1),
              font-size .4s cubic-bezier(.22,.61,.36,1);
  user-select: none;
}

.productions__nav-item--active .productions__nav-num {
  color: var(--gold);
  font-size: 42px;
}

.productions__nav-track {
  height: 2px;
  background: rgba(255,255,255,0.15);
  border-radius: 1px;
  width: 40px;
  transition: width .45s cubic-bezier(.22,.61,.36,1), background .4s;
}

.productions__nav-item--active .productions__nav-track {
  background: var(--gold);
  width: 80px;
}

.productions__nav-label {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(201,168,76,0);
  transition: color .35s;
  white-space: nowrap;
  text-align: center;
}

.productions__nav-item--active .productions__nav-label {
  color: rgba(201,168,76,0.7);
}

.productions__banner { transition: opacity .25s ease; }

/* ── Slides Productions — slide horizontal smooth ── */
.productions__slider {
  position: relative;
  overflow: hidden;
  /* Hauteur minimale = hauteur du slide 01 pour éviter le saut
     quand le slide 02 (teaser) est plus court */
  min-height: var(--prod-slider-h, 60vh);
}
.productions__slide {
  position: absolute;
  top: 0; left: 0; width: 100%;
  opacity: 0;
  transform: translateX(50px);
  transition: opacity .42s cubic-bezier(.22,.61,.36,1),
              transform .42s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
  visibility: hidden;
}
.productions__slide--active {
  position: relative;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  visibility: visible;
}
.productions__slide--exit {
  position: absolute;
  opacity: 0;
  transform: translateX(-50px);
  pointer-events: none;
  visibility: visible;
}

/* Hover sur les numéros — annonce l'action avant le clic */
.productions__nav-item:hover .productions__nav-num {
  color: rgba(201,168,76,0.55);
}
.productions__nav-item--active:hover .productions__nav-num {
  color: var(--gold);
}
.productions__nav-item:hover .productions__nav-track {
  background: rgba(201,168,76,0.35);
  width: 60px;
}
.productions__nav-item--active:hover .productions__nav-track {
  background: var(--gold);
  width: 80px;
}

/* Ligne fine au-dessus de la barre nav */
.productions__nav-ad {
  position: relative;
}
.productions__nav-ad::before {
  content: '';
  position: absolute;
  top: -5px; left: 0; right: 0;
  height: 5px;
  background: #000;
  z-index: 1;
}


.productions__teaser {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 40vh;
  padding: 48px 40px;
  text-align: center;
}

.productions__teaser-status {
  font-size: 9px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  margin-bottom: 20px;
}

.productions__teaser-title {
  font-family: var(--font-body);
  font-size: clamp(28px, 3.5vw, 52px);
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
}

.productions__teaser-text {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.8;
  color: rgba(255,255,255,0.45);
  font-style: italic;
  max-width: 520px;
  margin-bottom: 28px;
}

.productions__cta--centered {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

/* ═══════════════════════════════════════════
   NAVIGATION AFFICHE — Mix A+D
   Même système, centrée
═══════════════════════════════════════════ */
.affiche__nav-ad {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 48px;
  padding: 14px 40px 20px;
  border-top: 1px solid rgba(201,168,76,0.12);
  background: rgba(255,255,255,0.03);
}

.affiche__nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  cursor: pointer;
  min-width: 80px;
}

.affiche__nav-num {
  font-family: 'Anton', Impact, sans-serif;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.25);
  transition: color .4s cubic-bezier(.22,.61,.36,1),
              font-size .4s cubic-bezier(.22,.61,.36,1);
  user-select: none;
}

.affiche__nav-item--active .affiche__nav-num {
  color: var(--gold);
  font-size: 42px;
}

.affiche__nav-track {
  height: 2px;
  background: rgba(255,255,255,0.15);
  border-radius: 1px;
  width: 40px;
  transition: width .45s cubic-bezier(.22,.61,.36,1), background .4s;
}

.affiche__nav-item--active .affiche__nav-track {
  background: var(--gold);
  width: 80px;
}

.affiche__nav-label {
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(201,168,76,0);
  transition: color .35s;
  white-space: nowrap;
  text-align: center;
}

.affiche__nav-item--active .affiche__nav-label {
  color: rgba(201,168,76,0.7);
}

/* ── Slides Affiche — slide horizontal smooth ── */
.affiche__slider {
  position: relative;
  overflow: hidden;
}
.affiche__slide {
  position: absolute;
  top: 0; left: 0; width: 100%;
  opacity: 0;
  transform: translateX(50px);
  transition: opacity .42s cubic-bezier(.22,.61,.36,1),
              transform .42s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
  visibility: hidden;
}
.affiche__slide--active {
  position: relative;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  visibility: visible;
}
.affiche__slide--exit {
  position: absolute;
  opacity: 0;
  transform: translateX(-50px);
  pointer-events: none;
  visibility: visible;
}

/* Animations décalées : photo depuis gauche, texte depuis droite */
.affiche__slide .affiche__visual {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity .5s .05s cubic-bezier(.22,.61,.36,1),
              transform .5s .05s cubic-bezier(.22,.61,.36,1);
}
.affiche__slide .affiche__content {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity .5s .12s cubic-bezier(.22,.61,.36,1),
              transform .5s .12s cubic-bezier(.22,.61,.36,1);
}
.affiche__slide--active .affiche__visual,
.affiche__slide--active .affiche__content {
  opacity: 1;
  transform: translateX(0);
}
.affiche__slide--exit .affiche__visual {
  opacity: 0;
  transform: translateX(30px);
}
.affiche__slide--exit .affiche__content {
  opacity: 0;
  transform: translateX(-30px);
}

/* Hover sur les numéros Affiche */
.affiche__nav-item:hover .affiche__nav-num {
  color: rgba(201,168,76,0.55);
}
.affiche__nav-item--active:hover .affiche__nav-num {
  color: var(--gold);
}
.affiche__nav-item:hover .affiche__nav-track {
  background: rgba(201,168,76,0.35);
  width: 60px;
}
.affiche__nav-item--active:hover .affiche__nav-track {
  background: var(--gold);
  width: 80px;
}

/* Ligne fine au-dessus de la barre nav Affiche */
.affiche__nav-ad {
  position: relative;
}
.affiche__nav-ad::before {
  content: '';
  position: absolute;
  top: -5px; left: 0; right: 0;
  height: 5px;
  background: #000;
  z-index: 1;
}


.productions__specs-inline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 24px;
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,0.12);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  margin-top: auto;
}
.productions__specs-inline .productions__spec {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.productions__cta--sm {
  align-self: center;
  margin-top: 14px;
  font-size: 11px !important;
  padding: 12px 28px !important;
}

/* ── Productions col-text — flex pour pousser specs en bas ── */
.productions__col-text {
  display: flex;
  flex-direction: column;
}

/* ── Citation dans le bloc contact ── */
.contact__tagline {
  margin-top: 28px;
  text-align: center;
  font-family: var(--font-ui);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(13px, 1.1vw, 16px);
  line-height: 1.5;
  color: var(--gold);
  letter-spacing: 0.02em;
}
.contact__tagline span {
  display: block;
  font-size: 11px;
  letter-spacing: 0.15em;
  opacity: 0.7;
  margin-top: 6px;
}


/* ── Crédit damier asso ── */
.asso__damier-credit {
  position: absolute;
  bottom: 8px;
  right: 10px;
  font-size: 9px;
  color: rgba(255,255,255,0.45);
  font-family: var(--font-ui);
  letter-spacing: 0.1em;
  pointer-events: none;
  user-select: none;
}
.asso__damier-item { position: relative; }

/* ── Lightbox ── */
.lightbox__img-wrap {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox__img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  display: block;
}
.lightbox__close {
  position: fixed;
  top: 20px; right: 24px;
  background: none;
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  padding: 6px 14px;
  font-size: 13px;
  cursor: pointer;
  z-index: 10000;
  letter-spacing: .1em;
}
.lightbox__close:hover { background: rgba(255,255,255,0.1); }
.lightbox__nav {
  position: fixed;
  top: 50%; transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255,255,255,0.6);
  font-size: 40px;
  cursor: pointer;
  z-index: 10000;
  padding: 16px;
  line-height: 1;
}
.lightbox__nav:hover { color: #fff; }
.lightbox__prev { left: 16px; }
.lightbox__next { right: 16px; }
.lightbox__loader {
  display: none;
  width: 32px; height: 32px;
  border: 2px solid rgba(255,255,255,0.2);
  border-top-color: #c9a84c;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
.lightbox__loader.visible { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }
.lightbox__credit {
  position: fixed;
  bottom: 16px; right: 20px;
  font-size: 10px;
  color: rgba(255,255,255,0.35);
  letter-spacing: .1em;
}


/* ═══════════════════════════════════════════
   PRODUCTIONS — Drawer deux niveaux
   Niveau 1 : survol photo → panneau steps
   Niveau 2 : survol step → extrusion texte
═══════════════════════════════════════════ */

/* Conteneur drawer — positionné sur la droite de la photo */
.prod-drawer {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  display: flex;
  z-index: 10;
}

/* Bande dorée + flèche — disparaît au survol photo */
.prod-drawer__tab {
  width: 8px;
  background: #c9a84c;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: visible;
  z-index: 6;
  transition: opacity .3s;
}
.productions__col-gallery:hover .prod-drawer__tab {
  opacity: 0;
  pointer-events: none;
}
.prod-drawer__tab svg {
  position: absolute;
  left: -9px;
  pointer-events: none;
}

/* Animation pulse sur la flèche */
@keyframes prodTabPulse {
  0%   { width: 8px; }
  40%  { width: 14px; }
  100% { width: 8px; }
}
.prod-drawer__tab.pulsing {
  animation: prodTabPulse .4s cubic-bezier(.22,.61,.36,1) forwards;
}

/* Panneau compact — width 0 → 110px au survol photo */
.prod-drawer__panel {
  width: 0;
  overflow: visible;
  background: transparent;
  display: flex;
  flex-direction: column;
  transition: width .38s cubic-bezier(.22,.61,.36,1);
  z-index: 9999;
}
.productions__col-gallery:hover .prod-drawer__panel {
  width: 110px;
}

/* Step individuel */
.prod-step {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 14px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,.05);
  overflow: visible;
  transition: background .2s;
  background: rgba(0,0,0,.78);
}
.prod-step:hover {
  background: rgba(201,168,76,.85);
}
.prod-step:hover .prod-step__num {
  color: #000;
}
.prod-step:hover .prod-step__title {
  color: #000;
}
.prod-step:last-child { border-bottom: none; }

/* Num + titre au repos */
.prod-step__base {
  display: flex;
  flex-direction: column;
  gap: 2px;
  white-space: nowrap;
  position: relative;
  z-index: 2;
  transition: opacity .15s;
  pointer-events: none;
}
.prod-step:hover .prod-step__base { opacity: 0; }

.prod-step__num {
  font-family: 'Anton', Impact, sans-serif;
  font-size: 26px;
  color: rgba(255,255,255,.28);
  line-height: 1;
  transition: color .2s;
}
.prod-step__title {
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  transition: color .2s;
}

/* Extrusion au survol step — glisse depuis la droite, reste dans le step */
.prod-step__ext {
  position: fixed;
  top: auto;
  bottom: auto;
  right: auto;
  /* Positionnement via JS — fallback CSS */
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}
.prod-step:hover .prod-step__ext {
  transform: translateX(0);
}

.prod-step__ext-num {
  font-family: 'Anton', Impact, sans-serif;
  font-size: 26px;
  color: #c9a84c;
  flex-shrink: 0;
  line-height: 1;
}
.prod-step__ext-sep {
  width: 1px;
  height: 24px;
  background: rgba(201,168,76,.3);
  flex-shrink: 0;
}
.prod-step__ext-text {
  font-size: 10px;
  line-height: 1.45;
  color: rgba(255,255,255,.7);
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* ── Overlay extrusion step — couvre toute la col-gallery ── */
.prod-step-overlay {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  right: 8px;
  background: rgba(0,0,0,.82);
  display: flex;
  align-items: center;
  padding: 0 32px;
  gap: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, right .38s cubic-bezier(.22,.61,.36,1);
  z-index: 3;
}
.prod-step-overlay.visible {
  opacity: 1;
}
/* Quand le panneau est déployé, l'overlay recule */
.productions__col-gallery:hover .prod-step-overlay {
  right: 118px;
}
.prod-step-overlay__num {
  font-family: 'Anton', Impact, sans-serif;
  font-size: clamp(80px, 12vw, 140px);
  color: #c9a84c;
  line-height: 1;
  flex-shrink: 0;
  opacity: 0.9;
}
.prod-step-overlay__sep {
  width: 1px;
  height: 60px;
  background: rgba(201,168,76,.4);
  flex-shrink: 0;
}
.prod-step-overlay__wrap {
  flex: 1;
  min-width: 0;
}
.prod-step-overlay__title {
  font-size: 14px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 8px;
}
.prod-step-overlay__text {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,.65);
}

/* ── Hero footer bar — barre bas mode normal ── */
.hero__footer-bar {
  position: absolute;
  bottom: 40px;
  left: 0; right: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 60px;
  transition: opacity .4s;
  pointer-events: none; /* ne bloque pas le scroll indicator */
}
.hero__footer-bar .hero__typo-btn--voyage {
  pointer-events: auto;
}
/* Masqué quand le masque typo est actif */
body.typo-mask-active .hero__footer-bar {
  opacity: 0;
  pointer-events: none;
}

.hero__footer-tagline {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.5);
}

/* Voir le projet — visible uniquement avec masque typo */
.hero__typo-btn--projet {
  display: none;
}
body.typo-mask-active .hero__typo-btn--projet {
  display: inline-flex;
}





/* CTA Voyageons Ensemble — ancré bas droite, aligné avec Voir le projet */
.hero__content .hero__cta {
  position: absolute;
  bottom: 40px;
  right: 60px;
  pointer-events: auto;
  display: inline-flex;
  border-color: var(--gold);
  color: var(--gold);
}

/* Voyageons Ensemble — ancré bas droite, même origine que Voir le projet */
.hero__cta--standalone {
  position: absolute;
  bottom: 40px;
  right: 60px;
  z-index: 5;
  pointer-events: auto;
  border-color: var(--gold);
  color: var(--gold);
}
body.typo-mask-active .hero__cta--standalone {
  opacity: 0;
  pointer-events: none;
}

/* Voyageons Ensemble — ancré bas droite dans le hero, hors hero__content */
.hero__typo-btn--voyage {
  position: absolute;
  bottom: 40px;
  right: 60px;
  z-index: 15;
  display: inline-flex;
}
body.typo-mask-active .hero__typo-btn--voyage {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ═══════════════════════════════════════════════════════
   AFFICHE — Slide passé
═══════════════════════════════════════════════════════ */
.affiche__badge-past {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 10px;
}
.affiche__badge-past::before {
  content: '';
  display: block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
}

.affiche__label-past {
  display: block;
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(201,168,76,0.6);
  margin-bottom: 6px;
}

.affiche__date-past {
  display: block;
  font-size: 12px;
  color: rgba(255,255,255,0.25);
  font-style: italic;
  text-decoration: line-through;
  margin-bottom: 10px;
}

.affiche__band {
  background: rgba(201,168,76,0.07);
  border: 1px solid rgba(201,168,76,0.18);
  border-radius: 4px;
  padding: 12px 16px;
  margin-bottom: 20px;
}
.affiche__band p {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(201,168,76,0.8);
  font-style: italic;
}

.affiche__cta-group {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: auto;
}

/* Bouton secondaire — slide spectacle passé */
.affiche__cta--link {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid rgba(201,168,76,0.4);
  border-radius: 8px;
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: border-color 0.3s var(--ease-out);
}
.affiche__cta--link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, var(--gold) 0%, rgba(201,168,76,0.15) 100%);
  opacity: 0.7;
  transition: opacity 0.3s var(--ease-out);
  pointer-events: none;
}
.affiche__cta--link:hover {
  border-color: var(--gold);
}
.affiche__cta--link:hover::after {
  opacity: 1;
}
.affiche__cta--link__text {
  display: flex;
  align-items: center;
  padding: 14px 20px 14px 24px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(201,168,76,0.85);
  transition: color 0.3s var(--ease-out);
  line-height: 1;
}
.affiche__cta--link:hover .affiche__cta--link__text {
  color: var(--gold);
}
.affiche__cta--link__sep {
  width: 1px;
  background: rgba(201,168,76,0.25);
  flex-shrink: 0;
  transition: background 0.3s var(--ease-out);
}
.affiche__cta--link:hover .affiche__cta--link__sep {
  background: rgba(201,168,76,0.5);
}
.affiche__cta--link__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  font-size: 18px;
  color: var(--gold);
  background: transparent;
  transition: background 0.3s var(--ease-out), color 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.affiche__cta--link:hover .affiche__cta--link__arrow {
  background: var(--gold);
  color: #000;
  transform: translateX(2px);
}

/* ═══════════════════════════════════════════
   Spectacles passés — voile doré hachuré
   ═══════════════════════════════════════════ */
.affiche__slide--past {
  position: relative;
}
.affiche__slide--past::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      45deg,
      rgba(201,168,76,0.04) 0px,
      rgba(201,168,76,0.04) 1px,
      transparent 1px,
      transparent 10px
    ),
    rgba(201,168,76,0.10);
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;
}
.affiche__slide--past .affiche__title,
.affiche__slide--past .affiche__sub,
.affiche__slide--past .affiche__desc,
.affiche__slide--past .affiche__sep {
  position: relative;
  z-index: 1;
  opacity: 0.35;
}
.affiche__slide--past .affiche__badge-past,
.affiche__slide--past .affiche__label-past,
.affiche__slide--past .affiche__date-past,
.affiche__slide--past .affiche__quote,
.affiche__slide--past .affiche__band,
.affiche__slide--past .affiche__cta,
.affiche__slide--past .affiche__meta {
  position: relative;
  z-index: 3;
}
.affiche__label-past {
  font-weight: 700;
}
.affiche__slide--past .affiche__band {
  transition: box-shadow 0.25s, border-color 0.25s;
  cursor: default;
}
.affiche__slide--past .affiche__band:hover {
  box-shadow: 0 0 0 1px rgba(201,168,76,0.6), 0 0 18px rgba(201,168,76,0.15);
  border-color: rgba(201,168,76,0.5);
}

/* ═══════════════════════════════════════════
   Formulaires — états d'erreur
   ═══════════════════════════════════════════ */
.adhesion__error--top {
  display: none;
  text-align: center;
  background: rgba(220,50,50,0.08);
  border: 1px solid rgba(220,50,50,0.35) !important;
  border-radius: 6px;
  padding: 14px 20px;
  margin: 0 auto 24px;
  width: 90%;
  max-width: 860px;
  font-size: 13px;
  color: #c0392b;
  font-weight: 500;
  box-sizing: border-box;
}
.adhesion__error--top.visible { display: block; }
.adhesion__input.error,
.contact__input.error {
  border-color: #c0392b !important;
  background: rgba(220,50,50,0.04) !important;
  box-shadow: 0 0 0 2px rgba(220,50,50,0.15);
}
.adhesion__label-field.error-label,
.contact__label-field.error-label { color: #c0392b !important; }
.contact__form {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.contact__error {
  display: none;
  grid-column: 1 / -1;
  width: 100%;
  text-align: center;
  background: rgba(220,50,50,0.08) !important;
  border: 1px solid rgba(220,50,50,0.35) !important;
  border-left: 1px solid rgba(220,50,50,0.35) !important;
  border-radius: 6px;
  padding: 14px 20px !important;
  margin-bottom: 20px;
  font-size: 13px;
  color: #c0392b !important;
  font-weight: 500;
  box-sizing: border-box;
}
.contact__error.visible { display: block; }
.contact__error p { margin: 0; color: #c0392b !important; }

/* ═══════════════════════════════════════════
   ADHÉSION — Mention don libre + bouton d'appel
═══════════════════════════════════════════ */
.adhesion__text p.adhesion__text-cta-presid {
  color: var(--gold) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  font-style: italic !important;
  line-height: 1.5;
  margin: 22px 0 0;
}
.adhesion__text p.adhesion__text-cta-presid::before {
  content: "“"; font-style: normal; font-size: 2.6em; line-height: 0; vertical-align: -0.3em; margin-right: 2px;
}
.adhesion__text p.adhesion__text-cta-presid::after {
  content: "”"; font-style: normal; font-size: 2.6em; line-height: 0; vertical-align: -0.3em; margin-left: 2px;
}
.adhesion__text p.adhesion__text-cta-libre {
  color: var(--gold) !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  line-height: 1.5;
  margin: 16px 0 28px;
}
.adhesion__text-cta-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 32px; border: 1px solid var(--gold-dim);
  color: var(--white); text-decoration: none;
  font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  position: relative; overflow: hidden; isolation: isolate;
  transition: color 0.4s, border-color 0.4s;
}
.adhesion__text-cta-btn::before {
  content: ''; position: absolute; inset: 0;
  background: var(--gold); transform: scaleX(0);
  transform-origin: left; transition: transform 0.4s var(--ease-out); z-index: -1;
}
.adhesion__text-cta-btn:hover { color: var(--bg); border-color: var(--gold); }
.adhesion__text-cta-btn:hover::before { transform: scaleX(1); }
.adhesion__text-cta-btn-arrow { font-size: 15px; }

/* ═══════════════════════════════════════════
   PARTENAIRE TKM — carte cliquable
   Survol : déploiement doré (comme les boutons classiques),
   le texte passe en noir sur le fond doré.
═══════════════════════════════════════════ */
.soutenir__partner-card--link {
  display: block;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: border-color 0.4s;
}
.soutenir__partner-card--link::before {
  content: '';
  position: absolute; inset: 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
  z-index: -1;
}
.soutenir__partner-card--link:hover { border-color: var(--gold) !important; }
.soutenir__partner-card--link:hover::before { transform: scaleX(1); }
/* Le texte passe en noir sur le fond doré */
.soutenir__partner-card--link:hover .soutenir__partner-badge,
.soutenir__partner-card--link:hover .soutenir__partner-name,
.soutenir__partner-card--link:hover .soutenir__partner-desc {
  color: #000 !important;
}
.soutenir__partner-card--link .soutenir__partner-badge,
.soutenir__partner-card--link .soutenir__partner-name,
.soutenir__partner-card--link .soutenir__partner-desc {
  transition: color 0.4s;
}

/* ═══════════════════════════════════════════
   BOUTON TQMO — version mobile (nav mobile productions)
   Caché sur desktop, affiché et centré en mobile avec de l'air
   sur les côtés. Double classe pour battre .productions__cta width:100%!important.
═══════════════════════════════════════════ */
.productions__cta--mobile { display: none; }
@media (max-width: 768px) {
  .productions__cta.productions__cta--mobile {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    margin: 18px 20px 4px !important;
    padding: 16px !important;
    box-sizing: border-box !important;
  }
}

/* ═══════════════════════════════════════════
   MENU BURGER — dimensionnement adaptatif (100% CSS, aucun JS)
   Formule 1 (règle principale .nav-typo__item strong) : sur GRAND
   écran, taille indexée sur la largeur (4.5vw, max 72px) → menu
   large et généreux, quel que soit l'OS.
   Formule 2 (ci-dessous, @media max-height) : sur écran COURT
   (laptops), on bascule sur une taille indexée hauteur pour éviter
   le débordement, tout en restant lisible.
═══════════════════════════════════════════ */
.nav-typo__item {
  padding: clamp(6px, 1.4vh, 18px) 0 !important;
}
.nav-typo__item i {
  font-size: clamp(10px, 1.3vh, 13px) !important;
}

/* Écran court (laptops type EliteBook, ex : 1080p à 125% = 864px CSS) :
   taille indexée sur la hauteur, plus généreuse. Seuil 900px pour
   bien attraper les laptops, sans toucher aux vrais grands écrans. */
@media (max-height: 900px) {
  .nav-typo__item strong {
    font-size: clamp(32px, 6.6vh, 66px) !important;
  }
  .nav {
    justify-content: flex-start !important;
    padding: clamp(48px, 8vh, 88px) 10vw clamp(18px, 3vh, 32px) !important;
    overflow-y: auto !important;
  }
  /* Colonne texte productions — compactée pour éviter le scroll interne
     et laisser le bouton "Découvrir le projet complet" visible. */
  .productions__col-text {
    gap: 4px !important;
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }
  .productions__block-label {
    margin-bottom: 6px !important;
  }
}

/* ═══════════════════════════════════════════
   AFFICHE — boutons de même largeur (symétrie ergonomique)
   "Voir toutes les dates" et "Programme complet" ont la même
   largeur, qu'ils soient côte à côte ou empilés.
═══════════════════════════════════════════ */
.affiche__cta-group .affiche__cta {
  flex: 1 1 0 !important;
  min-width: 220px !important;
  justify-content: center !important;
  text-align: center !important;
}
/* Sur laptop, on les garde côte à côte sans les empiler */
@media (min-width: 769px) and (max-width: 1500px) {
  .affiche__cta-group {
    flex-wrap: nowrap !important;
    gap: 12px !important;
  }
  .affiche__cta-group .affiche__cta {
    padding: 12px 18px !important;
    font-size: 11px !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }
}

/* ═══════════════════════════════════════════
   AFFICHE — mention dynamique (coproduction, festival, etc.)
   Champ générique rempli côté back-office. Contient un backlink.
═══════════════════════════════════════════ */
.affiche__coprod {
  font-size: 13px;
  font-style: italic;
  color: rgba(255,255,255,0.55);
  line-height: 1.6;
  margin: 4px 0 18px;
}
.affiche__coprod a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(201,168,76,0.4);
  transition: border-color 0.25s;
}
.affiche__coprod a:hover {
  border-bottom-color: var(--gold);
}

/* Bouton affiche : bordure nette et uniforme (supprime le liseré/biseau bas) */
.affiche__cta {
  border: 1px solid var(--gold-dim) !important;
  box-sizing: border-box !important;
}