/* ==========================================================================
   Club Africain — Coming Soon
   Direction artistique : rouge officiel #E40615 (extrait du logo), noir
   anthracite, lumière de stade, grain photographique, pulsation.
   ========================================================================== */

:root {
  /* Couleurs officielles — le rouge est extrait du SVG officiel du logo */
  --ca-red-primary: #E40615;
  --ca-red-dark: #A50410;
  --ca-red-deep: #47040D;
  --ca-red-light: #FF4B57;
  /* Rouge pour petits textes informatifs : ≥4,5:1 (WCAG AA) sur noir et anthracite */
  --ca-red-text: #F80717;
  --ca-white: #FFFFFF;
  --ca-black: #0B0507;
  --ca-anthracite: #16090C;
  --ca-background: var(--ca-black);
  --ca-text: #F7F3F2;
  --ca-muted: #B9A6A9;
  --ca-line: rgba(255, 255, 255, 0.14);

  /* Typographie */
  --font-latin: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", "Archivo", Tahoma, sans-serif;
  --font-display: var(--font-latin);
  --font-body: var(--font-latin);

  /* Rythme */
  --space-section: clamp(5rem, 12vh, 9rem);
  --radius: 2px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- Polices auto-hébergées ------------------------------------------- */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-variable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/ibm-plex-sans-arabic-400-arabic.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC, U+200C-200E;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/ibm-plex-sans-arabic-600-arabic.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC, U+200C-200E;
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/ibm-plex-sans-arabic-700-arabic.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFC, U+200C-200E;
}

/* --- Base --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

/* L'attribut hidden doit toujours gagner, même sur les éléments display:flex */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ca-background);
  color: var(--ca-text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Grain photographique global, très discret */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; height: auto; }

/* Version arabe : typographie native, pas une simple inversion */
[dir="rtl"] body,
[dir="rtl"] {
  --font-display: var(--font-arabic);
  --font-body: var(--font-arabic);
}
[dir="rtl"] .hero__title,
[dir="rtl"] .section-title,
[dir="rtl"] .kicker,
[dir="rtl"] .intro__line {
  letter-spacing: 0;
}

::selection { background: var(--ca-red-primary); color: var(--ca-white); }

/* Accessibilité clavier */
:focus-visible {
  outline: 2px solid var(--ca-red-light);
  outline-offset: 3px;
  border-radius: var(--radius);
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--ca-red-primary);
  color: var(--ca-white);
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* ==========================================================================
   INTRO — courte (≈2,5 s), ignorable, désactivée si reduced-motion
   ========================================================================== */
.intro {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ca-black);
  transition: opacity 0.7s var(--ease-out), visibility 0.7s;
}
.intro.is-done { opacity: 0; visibility: hidden; }
.intro.is-off { display: none; }

.intro__inner { text-align: center; padding: 1rem; }

.intro__line {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.1;
  opacity: 0;
  transform: translateY(14px);
  animation: intro-line 0.9s var(--ease-out) forwards;
}
.intro__line--1 {
  font-size: clamp(2.2rem, 9vw, 5.5rem);
  color: var(--ca-white);
  animation-delay: 0.15s;
}
.intro__line--2 {
  font-size: clamp(1.1rem, 4vw, 2rem);
  color: var(--ca-red-primary);
  margin-top: 0.6em;
  animation-delay: 0.95s;
}
.intro__pulse {
  display: block;
  width: 10px;
  height: 10px;
  margin: 2rem auto 0;
  border-radius: 50%;
  background: var(--ca-red-primary);
  animation: heartbeat 1.3s ease-in-out 2;
}
@keyframes intro-line {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes heartbeat {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(228, 6, 21, 0.6); }
  14% { transform: scale(1.5); }
  28% { transform: scale(1); box-shadow: 0 0 0 14px rgba(228, 6, 21, 0); }
  42% { transform: scale(1.35); }
  56% { transform: scale(1); }
}

.intro__skip {
  position: absolute;
  bottom: max(1.5rem, env(safe-area-inset-bottom));
  inset-inline-end: 1.5rem;
  padding: 0.6rem 1.1rem;
  background: transparent;
  border: 1px solid var(--ca-line);
  border-radius: 99px;
  color: var(--ca-muted);
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.intro__skip:hover { color: var(--ca-white); border-color: var(--ca-white); }

/* Pendant l'intro : pas de défilement */
body.preload { overflow: hidden; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem clamp(1.25rem, 4vw, 3rem);
}
.header__crest { width: 44px; height: auto; }

.lang { display: flex; gap: 0.25rem; }
.lang__item {
  padding: 0.45rem 0.8rem;
  border: 1px solid transparent;
  border-radius: 99px;
  color: var(--ca-muted);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s;
}
.lang__item:hover { color: var(--ca-white); }
.lang__item.is-active {
  color: var(--ca-white);
  border-color: var(--ca-line);
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4.25rem 1.25rem 3.5rem;
  overflow: hidden;
  isolation: isolate;
}

/* Fond photographique — lion rouge, regard gardien (fond noir fumé) */
.hero__bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  /* Hauteur calée sur le viewport (pas sur le contenu) : la ligne des yeux
     du lion reste à ~40 % de l'écran, quel que soit l'espacement du texte. */
  height: 100vh;
  height: 100svh;
  z-index: -3;
  background: url("../img/lion-bg-800.webp") center 30% / cover no-repeat;
  opacity: 1;
}
@media (min-width: 640px) {
  .hero__bg { background-image: url("../img/lion-bg-1600.webp"); }
}
/* Voile de lisibilité : assombrit le haut (header) et fond le bas dans le noir */
.hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(11, 5, 7, 0.45) 0%,
    rgba(11, 5, 7, 0) 26%,
    rgba(11, 5, 7, 0.15) 62%,
    var(--ca-black) 97%);
}

/* Lumière de stade */
.hero__glow {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 62% 46% at 50% 30%, rgba(228, 6, 21, 0.32), transparent 70%),
    radial-gradient(ellipse 40% 30% at 50% 24%, rgba(255, 255, 255, 0.07), transparent 70%),
    linear-gradient(180deg, #1A070B 0%, var(--ca-black) 78%);
  animation: glow-breathe 7s ease-in-out infinite;
}
@keyframes glow-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.82; }
}

.hero__content {
  max-width: 60rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__crest {
  width: auto;
  height: clamp(120px, 24svh, 240px);
  filter: drop-shadow(0 18px 50px rgba(228, 6, 21, 0.35));
  animation: crest-pulse 5.2s ease-in-out infinite;
}
@keyframes crest-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 18px 50px rgba(228, 6, 21, 0.35)); }
  4% { transform: scale(1.025); }
  8% { transform: scale(1); }
  12% { transform: scale(1.02); filter: drop-shadow(0 18px 60px rgba(228, 6, 21, 0.5)); }
  20% { transform: scale(1); filter: drop-shadow(0 18px 50px rgba(228, 6, 21, 0.35)); }
}


.hero__title {
  /* Dégagement des yeux du lion : le titre commence à 41 svh,
     sous la ligne des yeux (36-40 svh dans l'œuvre). */
  margin: max(2rem, calc(17svh - 4.25rem)) 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: min(clamp(2.1rem, 7.2vw, 5.6rem), 7.5svh);
  line-height: 1.02;
  text-transform: uppercase;
  letter-spacing: -0.015em;
}
[dir="rtl"] .hero__title { line-height: 1.25; font-weight: 700; }
.hero__title-line { display: block; }
.hero__title-line--accent {
  color: var(--ca-red-primary);
  text-shadow: 0 0 60px rgba(228, 6, 21, 0.45);
}

.hero__subtitle {
  max-width: 34rem;
  margin: 1.1rem auto 0;
  color: var(--ca-muted);
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  line-height: 1.5;
}

.hero__actions { margin-top: clamp(1.2rem, 2.8svh, 2.4rem); }

.hero__scroll {
  position: absolute;
  bottom: max(1.4rem, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--ca-muted);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
}
[dir="rtl"] .hero__scroll { letter-spacing: 0.05em; }
.hero__scroll-line {
  width: 1px;
  height: 34px;
  background: linear-gradient(180deg, var(--ca-red-primary), transparent);
  animation: scroll-hint 2.2s ease-in-out infinite;
}
@keyframes scroll-hint {
  0%, 100% { transform: scaleY(1); opacity: 1; }
  50% { transform: scaleY(0.55); opacity: 0.45; }
}

/* Laptops courts (écran large mais peu haut) : compression supplémentaire
   pour que le hero tienne intégralement, indicateur de défilement compris. */
@media (min-width: 640px) and (max-height: 760px) {
  .hero { padding-bottom: 3rem; }
  .hero__crest { height: clamp(110px, 20svh, 200px); }
  .hero__title { margin-top: max(1.5rem, calc(21svh - 4.25rem)); }
}

/* FR uniquement : la phrase rouge (23,5 em) tient sur UNE ligne dès 900 px,
   comme en anglais et en arabe — conteneur élargi + taille calibrée. */
@media (min-width: 900px) {
  html[lang="fr"] .hero__content { max-width: 78rem; }
  html[lang="fr"] .hero__title {
    font-size: min(clamp(2.1rem, 7.2vw, 5.6rem), 7.5svh,
                   calc((min(78rem, 100vw) - 2.5rem) / 23.6));
  }
}

/* ==========================================================================
   BOUTONS
   ========================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0.9rem 2.2rem;
  border: none;
  border-radius: var(--radius);
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s;
}
.btn--primary {
  background: var(--ca-red-primary);
  color: var(--ca-white);
  box-shadow: 0 10px 30px rgba(228, 6, 21, 0.3);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 38px rgba(228, 6, 21, 0.45);
}
.btn--primary:active { transform: translateY(0); }
/* Balayage de lumière au survol */
.btn--primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.6s var(--ease-out);
}
.btn--primary:hover::before { transform: translateX(120%); }
[dir="rtl"] .btn--primary::before { transform: translateX(120%); }
[dir="rtl"] .btn--primary:hover::before { transform: translateX(-120%); }

/* ==========================================================================
   SECTIONS COMMUNES
   ========================================================================== */
.section-head {
  max-width: 44rem;
  margin: 0 auto;
  text-align: center;
  padding: 0 1.25rem;
}
.kicker {
  margin: 0 0 1rem;
  color: var(--ca-red-text);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
[dir="rtl"] .kicker { letter-spacing: 0.02em; }
.section-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.8rem, 4.6vw, 3.2rem);
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
[dir="rtl"] .section-title { font-weight: 700; line-height: 1.3; }
.section-text {
  margin: 1.1rem auto 0;
  color: var(--ca-muted);
  max-width: 38rem;
}

/* ==========================================================================
   HISTOIRE
   ========================================================================== */
.history {
  position: relative;
  padding: var(--space-section) 0;
  background:
    linear-gradient(180deg, var(--ca-black) 0%, var(--ca-anthracite) 50%, var(--ca-black) 100%);
}

/* Mots — fierté / transmission / ferveur / appartenance */
.history__words {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 2.6rem;
  margin: 4.5rem auto 0;
  padding: 0 1.25rem;
  user-select: none;
}
.history__word {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.6rem, 4.4vw, 3.4rem);
  line-height: 1.3;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px rgba(228, 6, 21, 0.55);
  /* Vague autonome : chaque mot se remplit de rouge tour à tour, en boucle */
  animation: word-wave 6s ease-in-out infinite;
}
.history__word:nth-child(2) { animation-delay: 1.5s; }
.history__word:nth-child(3) { animation-delay: 3s; }
.history__word:nth-child(4) { animation-delay: 4.5s; }
@keyframes word-wave {
  0%, 45%, 100% { color: transparent; }
  12%, 30% { color: var(--ca-red-primary); }
}
[dir="rtl"] .history__word {
  -webkit-text-stroke: 0;
  color: rgba(228, 6, 21, 0.4);
  animation-name: word-wave-rtl;
  font-weight: 700;
}
@keyframes word-wave-rtl {
  0%, 45%, 100% { color: rgba(228, 6, 21, 0.4); }
  12%, 30% { color: var(--ca-red-primary); }
}
/* Reduced-motion : l'animation globale est neutralisée ; on garde alors
   les mots pleins (plus lisibles qu'un simple contour). */
@media (prefers-reduced-motion: reduce) {
  .history__word { color: rgba(228, 6, 21, 0.75); }
}

/* ==========================================================================
   NOUVELLE ÈRE
   ========================================================================== */
.era {
  position: relative;
  padding: var(--space-section) 0;
  overflow: hidden;
  background: linear-gradient(160deg, var(--ca-red-deep) 0%, var(--ca-black) 62%);
}
.era__lion {
  position: absolute;
  inset-inline-end: -12%;
  bottom: -14%;
  width: min(58vw, 620px);
  opacity: 0.1;
  pointer-events: none;
  filter: grayscale(20%);
  mask-image: linear-gradient(200deg, #000 40%, transparent 85%);
  -webkit-mask-image: linear-gradient(200deg, #000 40%, transparent 85%);
}
[dir="rtl"] .era__lion { transform: scaleX(-1); }

/* Index éditorial : pas de boîtes — filets, numéro, grand titre, texte.
   La hiérarchie vient de la typographie et de l'espace. */
.era__list {
  max-width: 56rem;
  margin: 3.8rem auto 0;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
  list-style: none;
  position: relative;
  z-index: 1;
}

.era__row {
  position: relative;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 0.4rem 2rem;
  align-items: baseline;
  padding: 2rem 0.2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  transition: background 0.3s, border-color 0.3s;
}
.era__row:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.era__row:hover { border-top-color: rgba(228, 6, 21, 0.65); }

.era__row-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.45rem, 3.2vw, 2.2rem);
  line-height: 1.05;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--ca-white);
  transition: color 0.3s;
}
[dir="rtl"] .era__row-title { font-weight: 700; letter-spacing: 0; line-height: 1.3; }
.era__row:hover .era__row-title { color: var(--ca-red-light); }

.era__row-text {
  margin: 0;
  color: var(--ca-muted);
  font-size: 0.98rem;
  line-height: 1.55;
}

@media (max-width: 720px) {
  .era__row {
    grid-template-columns: 1fr;
    gap: 0.55rem;
    padding: 1.6rem 0.1rem;
  }
}


/* ==========================================================================
   FORMULAIRE
   ========================================================================== */
.notify {
  padding: var(--space-section) 1.25rem;
  background: var(--ca-black);
}
.notify__box {
  position: relative;
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(2.2rem, 5vw, 3.5rem);
  text-align: center;
  border: 1px solid var(--ca-line);
  background:
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(228, 6, 21, 0.12), transparent 70%),
    var(--ca-anthracite);
}
/* Titre du bloc inscription : échelle propre au bloc (texte plus long). */
.notify__box .section-title { font-size: clamp(1.5rem, 3.2vw, 2.3rem); }

.form { margin-top: 2rem; text-align: start; }
.form__label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ca-muted);
}
[dir="rtl"] .form__label { letter-spacing: 0; }
.form__control {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.form__input {
  flex: 1 1 240px;
  min-height: 52px;
  padding: 0.85rem 1.1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--ca-line);
  border-radius: var(--radius);
  color: var(--ca-white);
  font: inherit;
  transition: border-color 0.2s, background 0.2s;
}
.form__input::placeholder { color: rgba(185, 166, 169, 0.55); }
.form__input:focus {
  outline: none;
  border-color: var(--ca-red-primary);
  background: rgba(255, 255, 255, 0.08);
}
.form__input[aria-invalid="true"] { border-color: var(--ca-red-light); }
.form__submit { flex: 0 0 auto; }
.form__submit[disabled] { opacity: 0.65; cursor: wait; }

.form__hp {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.form__consent {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  margin-top: 1.2rem;
  font-size: 0.87rem;
  color: var(--ca-muted);
}
.form__checkbox {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin-top: 0.15rem;
  accent-color: var(--ca-red-primary);
}
.form__error {
  margin: 0.9rem 0 0;
  color: var(--ca-red-light);
  font-size: 0.92rem;
  font-weight: 600;
}
.form__note {
  margin: 1.1rem 0 0;
  font-size: 0.8rem;
  color: rgba(185, 166, 169, 0.7);
}

.form__success { padding: 1.5rem 0 0.5rem; }
.form__success-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--ca-red-primary);
  color: var(--ca-white);
  font-size: 1.6rem;
  font-weight: 900;
  box-shadow: 0 0 0 10px rgba(228, 6, 21, 0.15);
}
.form__success-title {
  margin: 1.3rem 0 0.4rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.5rem;
  text-transform: uppercase;
}
[dir="rtl"] .form__success-title { font-weight: 700; }
.form__success-text { margin: 0; color: var(--ca-muted); }

/* ==========================================================================
   COMPTE À REBOURS (optionnel — activé via config.js)
   ========================================================================== */
.countdown {
  display: flex;
  gap: clamp(0.8rem, 3vw, 2rem);
  margin-top: 2.2rem;
}
.countdown__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 64px;
}
.countdown__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.8rem, 5vw, 3rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.countdown__lbl {
  margin-top: 0.4rem;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ca-muted);
}
[dir="rtl"] .countdown__lbl { letter-spacing: 0; }

/* ==========================================================================
   PARTENAIRES OFFICIELS
   ========================================================================== */
.sponsors {
  padding: 3.4rem 1.25rem 4.2rem;
  background: var(--ca-black);
  text-align: center;
}
.sponsors__title {
  margin: 0 0 2.2rem;
  color: var(--ca-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
[dir="rtl"] .sponsors__title { letter-spacing: 0.02em; }
.sponsors__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem clamp(1.6rem, 4vw, 3rem);
  max-width: 72rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.sponsors__item { display: flex; align-items: center; }
.sponsors__item img {
  width: auto;
  height: 30px;
  max-width: 130px;
  object-fit: contain;
  opacity: 0.55;
  transition: opacity 0.3s, transform 0.3s var(--ease-out);
}
.sponsors__item img:hover { opacity: 1; transform: translateY(-2px); }
/* Logos aux proportions hautes (écussons) : un peu plus grands */
.sponsors__item img[src*="boga"],
.sponsors__item img[src*="boutique-lefri9i"] { height: 40px; }

/* Second groupe : marques du club */
.sponsors__title--second { margin-top: 3.2rem; }

@media (max-width: 560px) {
  .sponsors__row { gap: 1.4rem 1.8rem; }
  .sponsors__item img { height: 24px; max-width: 104px; }
  .sponsors__item img[src*="boga"],
  .sponsors__item img[src*="boutique-lefri9i"] { height: 32px; }
  .sponsors__title--second { margin-top: 2.4rem; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  border-top: 1px solid var(--ca-line);
  background: var(--ca-black);
}
.footer__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  padding: 3.2rem 1.25rem 2.4rem;
  text-align: center;
}
.footer__crest { width: 38px; }
.footer__tagline {
  margin: 0;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.9rem;
}
[dir="rtl"] .footer__tagline { letter-spacing: 0; }

.social { display: flex; gap: 0.6rem; flex-wrap: wrap; justify-content: center; }
.social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--ca-line);
  border-radius: 50%;
  color: var(--ca-muted);
  transition: color 0.25s, border-color 0.25s, transform 0.25s var(--ease-out), background 0.25s;
}
.social__link:hover {
  color: var(--ca-white);
  border-color: var(--ca-red-primary);
  background: rgba(228, 6, 21, 0.15);
  transform: translateY(-3px);
}
.social__link svg { width: 19px; height: 19px; fill: currentColor; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2rem;
  align-items: center;
  justify-content: space-between;
  padding: 1.3rem clamp(1.25rem, 4vw, 3rem) calc(1.3rem + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  font-size: 0.82rem;
  color: rgba(185, 166, 169, 0.75);
}
.footer__copy { margin: 0; }
.footer__links { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.footer__links a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}
.footer__links a:hover { color: var(--ca-white); }

.footer__link-btn {
  padding: 0;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: color 0.2s;
}
.footer__link-btn:hover { color: var(--ca-white); }

/* ==========================================================================
   DIALOG MENTIONS & CONFIDENTIALITÉ
   ========================================================================== */
.legal {
  max-width: 34rem;
  padding: 2.2rem;
  background: var(--ca-anthracite);
  border: 1px solid var(--ca-line);
  color: var(--ca-text);
  font-family: var(--font-body);
}
.legal::backdrop { background: rgba(11, 5, 7, 0.85); }
.legal__title {
  margin: 0 0 1.2rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.35rem;
  text-transform: uppercase;
}
[dir="rtl"] .legal__title { font-weight: 700; }
.legal__sub {
  margin: 1.2rem 0 0.3rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ca-red-text);
}
[dir="rtl"] .legal__sub { letter-spacing: 0; }
.legal__text { margin: 0; color: var(--ca-muted); font-size: 0.95rem; }
.legal__close { margin-top: 1.6rem; min-height: 44px; padding: 0.6rem 1.6rem; }

/* ==========================================================================
   RÉVÉLATIONS AU SCROLL
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}
/* Léger décalage en cascade dans les grilles */
.era__row.reveal.is-in:nth-child(2) { transition-delay: 0.12s; }
.era__row.reveal.is-in:nth-child(3) { transition-delay: 0.24s; }


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  .era__lion { opacity: 0.07; width: 78vw; bottom: -8%; }
}
@media (max-width: 560px) {
  .hero { padding-top: 4rem; }
  /* Titres de section un peu plus compacts : les phrases longues
     (formulaire) restent élégantes sans empiler trop de lignes. */
  .section-title { font-size: clamp(1.5rem, 6.4vw, 2rem); }
  .form__control { flex-direction: column; }
  /* En colonne, la base flex (240px) deviendrait une HAUTEUR : on la neutralise
     pour que le champ garde sa hauteur normale et son texte aligné en haut. */
  .form__input { flex: 0 0 auto; width: 100%; }
  .form__submit { width: 100%; }
  .hero__scroll { display: none; }
}

/* ==========================================================================
   REDUCED MOTION — tout devient instantané
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .intro { display: none; }
  body.preload { overflow: auto; }
}