/* ==========================================================================
   AWCKF — Autour du Wing Chun Kung Fu
   Feuille de style principale
   Sommaire :
     1. Reset & variables
     2. Typographie de base
     3. Utilitaires / animations au scroll
     4. Header & navigation
     5. Boutons
     6. Hero
     7. Sections communes (bandeaux, séparateurs, watermark)
     8. Association (cards)
     9. Wing Chun
     10. Enseignant
     11. Footer
     12. Pages secondaires (FAQ, clubs amis, mentions légales)
     13. Responsive
   ========================================================================== */

/* ---------- 1. Reset & variables ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Ancrage de la section #association (seule ancre restante de l'accueil) : son
   bandeau titre reprend le format `.page-hero` des pages secondaires, dont le
   `padding-top` est FIXE (8.5rem). Une seule valeur de `scroll-margin-top`
   suffit donc à tous les breakpoints pour que l'eyebrow « L'ASSOCIATION »
   atterrisse juste sous le header (compact, ~63 px) au clic sur le lien de nav,
   quel que soit le point de scroll de départ. */
#association {
  scroll-margin-top: -2.75rem;
}

/* Carte Inscription : cible directe des liens « Nous rejoindre » sur
   mobile/tablette (cf. js/main.js). Le `scroll-margin-top` ne sert que de
   filet quand la carte est plus haute que l'écran et que le navigateur
   retombe sur un alignement haut plutôt que centré — il évite alors que le
   header fixe (~63 px) recouvre l'icône et le titre. */
#inscription {
  scroll-margin-top: 5rem;
}
@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;
    scroll-behavior: auto !important;
  }
}

:root {
  /* Palette : noir profond dominant, rouge accent/action, or en détail */
  --black: #0a0908;
  --black-soft: #14100e;
  --black-elevated: #1c1613;
  --red: #a8171e;
  --red-bright: #d1262c;
  --gold: #c6a253;
  --gold-light: #e8caa0;
  --ivory: #f3ede1;
  --ivory-dim: #cfc7b8;
  --grey: #8d857a;
  --border-soft: rgba(198, 162, 83, 0.18);

  --font-display: "Bebas Neue", "Oswald", "Arial Narrow", sans-serif;
  --font-body: "Work Sans", "Segoe UI", Helvetica, Arial, sans-serif;

  --container: 1160px;
  --radius: 6px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html, body { margin: 0; padding: 0; }
body {
  background: var(--black);
  color: var(--ivory-dim);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--gold-light); text-decoration: none; }
a:hover { color: var(--gold); }

::selection { background: var(--red); color: var(--ivory); }

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ---------- 2. Typographie de base ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ivory);
  letter-spacing: 0.02em;
  line-height: 1.05;
  margin: 0 0 0.5em;
  text-transform: uppercase;
}
h1 { font-size: clamp(2.6rem, 6vw + 1rem, 5.5rem); }
h2 { font-size: clamp(2rem, 4vw + 0.5rem, 3.4rem); }
h3 { font-size: clamp(1.3rem, 1.4vw + 0.9rem, 1.7rem); }

p { margin: 0 0 1.1em; color: var(--ivory-dim); }
p:last-child { margin-bottom: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1em;
}
.eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--red-bright);
  display: inline-block;
}

.section-head {
  max-width: 720px;
  margin: 0 0 3rem;
}
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .eyebrow { justify-content: center; }
.section-head--center .eyebrow::before { display: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.text-lede {
  font-size: 1.1rem;
  color: var(--ivory-dim);
  max-width: 62ch;
}

/* ---------- 3. Utilitaires / animations au scroll ---------- */
/* Le filet de sécurité « ne jamais rester masqué » est assuré côté JS
   (js/main.js) : IntersectionObserver + sweepInView() rejoué sur scroll/resize,
   au 1er rendu, à `load`, à `document.fonts.ready`, sur minuteurs, et un
   `setTimeout(revealAll, 2000)` en dernier recours. Pas de parachute CSS :
   une `@keyframes` sans keyframe `from` + `animation-delay` provoquait sur
   Firefox un maintien de l'état masqué pendant tout le délai (scintillement au
   chargement) — cf. DIAGNOSTIC-firefox-reveal.md. */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.divider {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-soft) 20%, var(--border-soft) 80%, transparent);
  margin: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem; top: -3rem;
  background: var(--red);
  color: var(--ivory);
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  z-index: 200;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* ---------- 4. Header & navigation ---------- */
.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  padding-block: 1.4rem;
  background: linear-gradient(180deg, rgba(10,9,8,0.85), rgba(10,9,8,0));
  transition: padding 0.35s var(--ease), background-color 0.35s var(--ease), box-shadow 0.35s var(--ease), backdrop-filter 0.35s var(--ease);
}
.site-header.is-scrolled {
  padding-block: 0.7rem;
  background: rgba(10, 9, 8, 0.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.45);
  border-bottom: 1px solid var(--border-soft);
}

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

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--ivory);
}
.brand img {
  height: 44px;
  width: 44px;
  transition: height 0.35s var(--ease), width 0.35s var(--ease);
}
.is-scrolled .brand img { height: 36px; width: 36px; }
.brand-text {
  font-family: var(--font-display);
  letter-spacing: 0.08em;
  font-size: 1.05rem;
  line-height: 1.1;
  color: var(--ivory);
}
.brand-text span {
  display: block;
  font-family: var(--font-body);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  color: var(--gold);
  font-weight: 600;
  white-space: nowrap;
}
/* Très petits écrans (≤ ~355 px : Galaxy S9+ 320, Pixel 4 353…) : la baseline
   « Autour du Wing Chun Kung Fu » (nowrap) débordait et passait sous le bouton
   burger. On ne garde que le sigle. */
@media (max-width: 359px) {
  .brand-text span { display: none; }
}
.brand:hover { color: var(--ivory); }
.brand:hover .brand-text { color: var(--ivory); }

.main-nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}
.main-nav ul {
  display: flex;
  gap: 1.6rem;
  list-style: none;
  margin: 0; padding: 0;
}
.main-nav ul a {
  color: var(--ivory-dim);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 4px;
  white-space: nowrap;
}
.main-nav ul a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 2px; width: 0;
  background: var(--red-bright);
  transition: width 0.3s var(--ease);
}
.main-nav ul a:hover { color: var(--ivory); }
.main-nav ul a:hover::after { width: 100%; }

/* « Nous rejoindre » du header : simple lien texte dans le flux de la nav
   (dernier <li>), pas d'objet bouton — juste la couleur accent rouge + gras
   pour rester identifiable comme action. Soulignement au survol via le ::after
   commun aux liens de nav. Pas de flèche (contrairement au footer). */
.main-nav ul a.header-cta {
  color: var(--red-bright);
  font-weight: 700;
}
.main-nav ul a.header-cta:hover { color: var(--red-bright); }

.social-links {
  display: flex;
  gap: 0.9rem;
  align-items: center;
}
.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid var(--border-soft);
  border-radius: 50%;
  color: var(--ivory-dim);
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease), transform 0.25s var(--ease);
}
.social-links a:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-2px);
}
.social-links svg { width: 16px; height: 16px; fill: currentColor; }

.burger {
  display: none;
  background: none;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  width: 40px; height: 40px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  z-index: 110;
}
.burger span, .burger span::before, .burger span::after {
  content: "";
  display: block;
  width: 17px; height: 2px;
  background: var(--ivory);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.burger span::before { position: absolute; transform: translateY(-5px); }
.burger span::after { position: absolute; transform: translateY(5px); }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: rotate(-45deg); }

/* ---------- 5. Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.95rem 1.8rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: linear-gradient(120deg, var(--red) 0%, var(--red-bright) 100%);
  color: var(--ivory);
  box-shadow: 0 10px 30px -10px rgba(168, 23, 30, 0.7);
}
.btn--primary:hover {
  color: var(--ivory);
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -10px rgba(168, 23, 30, 0.85);
}

.btn--ghost {
  background: transparent;
  color: var(--ivory);
  border-color: var(--border-soft);
}
.btn--ghost:hover {
  color: var(--gold);
  border-color: var(--gold);
  transform: translateY(-3px);
}

.btn--gold {
  background: linear-gradient(120deg, var(--gold) 0%, var(--gold-light) 100%);
  color: var(--black);
  box-shadow: 0 10px 30px -12px rgba(198, 162, 83, 0.7);
}
.btn--gold:hover {
  color: var(--black);
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -10px rgba(198, 162, 83, 0.85);
}

.btn svg { width: 16px; height: 16px; fill: currentColor; }

/* ---------- 6. Hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding-top: 6rem;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 60% 50% at 78% 18%, rgba(168, 23, 30, 0.35), transparent 60%),
    radial-gradient(ellipse 50% 40% at 15% 85%, rgba(198, 162, 83, 0.16), transparent 65%),
    linear-gradient(160deg, var(--black-soft) 0%, var(--black) 55%, var(--black-soft) 100%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(115deg, rgba(198,162,83,0.05) 0 1px, transparent 1px 90px);
  pointer-events: none;
}

.hero-watermark {
  position: absolute;
  top: 50%;
  right: -8%;
  width: min(70vw, 900px);
  height: auto;
  filter: grayscale(1) brightness(1.6);
  z-index: -1;
  pointer-events: none;
  animation: hero-drift 20s ease-in-out infinite, hero-fade 20s ease-in-out infinite;
}
.hero-watermark--b {
  animation-delay: 0s, -10s;
}
@keyframes hero-drift {
  0%, 100% { transform: translateY(-50%) rotate(0deg) scale(1); }
  50% { transform: translateY(-54%) rotate(3deg) scale(1.04); }
}
@keyframes hero-fade {
  0%, 100% { opacity: 0.09; }
  50% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-watermark { animation: none; opacity: 0; }
  .hero-watermark--a { opacity: 0.09; }
}

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

.hero-copy { max-width: 700px; }
.hero-copy h1 { margin-bottom: 1.6rem; }
.hero-copy .eyebrow::before { display: none; }

.text-accent { color: var(--red-bright); }

.hero-title-line--bottom {
  letter-spacing: 0.08em;
}

.hero-subtitle {
  font-family: var(--font-body);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--gold-light);
  letter-spacing: 0.04em;
  margin-bottom: 1.8rem;
}
.hero-subtitle .sep { color: var(--red-bright); margin-inline: 0.5em; }

.hero-lede {
  max-width: 46ch;
  margin-bottom: 2.2rem;
  color: var(--ivory-dim);
}

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

.scroll-cue {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--grey);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.scroll-cue__chevron {
  width: 14px; height: 14px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
  animation: bob 1.8s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: rotate(45deg) translate(0,0); opacity: 0.5; }
  50% { transform: rotate(45deg) translate(6px, 6px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue__chevron { animation: none; }
}

/* ---------- 7. Sections communes ---------- */
section { position: relative; }
.section-pad { padding-block: clamp(4.5rem, 8vw, 7.5rem); }

/* Le <main> occupe au minimum la hauteur du viewport : sur les pages courtes
   (Wing Chun, Enseignant, Clubs amis, FAQ, Mentions légales) le footer ne peut
   plus apparaître dans le premier écran, y compris sur les grands écrans hauts.
   Aucun effet sur les pages déjà plus longues que le viewport (accueil, FAQ
   remplie…) → pas d'espace vide artificiel. */
main { min-height: 100dvh; }

/* Le bandeau séparateur .band-divider gère l'espace de part et d'autre :
   la section Association finit net (aucun padding-bas) et la section Wing Chun
   ne garde qu'une respiration interne minimale en haut. */
#association > .section-pad { padding-bottom: 0; }
.section-pad.alt-bg { padding-top: clamp(1.25rem, 2vw, 2rem); }

.watermark {
  position: absolute;
  top: 50%; right: -6%;
  transform: translateY(-50%);
  width: min(46vw, 620px);
  opacity: 0.045;
  filter: grayscale(1);
  pointer-events: none;
  z-index: 0;
}
[dir], .watermark--left { right: auto; left: -8%; }

.band {
  position: relative;
  height: clamp(220px, 32vw, 420px);
  overflow: hidden;
}

/* Bandeau séparateur autonome (« Entraînement collectif du samedi ») : bloc
   indépendant entre la section Association et la section Wing Chun, hors des
   deux containers. Il gère lui-même ses marges haut/bas ; les deux sections
   annulent le padding qui lui fait face (voir plus bas / §13). */
.band-divider {
  height: clamp(200px, 26vw, 340px);
  /* min 4.5rem = valeur tablette/mobile inchangée ; en desktop le 6vw ouvre à
     ~86–88 px pour bien cloisonner d'avec la section Association. */
  margin-top: clamp(4.5rem, 6vw, 5.5rem);    /* fin nette de la section Association */
  margin-bottom: clamp(3rem, 4.5vw, 4rem);   /* démarrage propre de la section Wing Chun */
}
.band img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
}
.band:not(.band--paired)::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,9,8,0.05), rgba(10,9,8,0.55)),
    linear-gradient(100deg, rgba(168,23,30,0.3), rgba(198,162,83,0.12));
  mix-blend-mode: multiply;
}
.band:not(.band--paired)::before {
  content: "";
  position: absolute; inset: 0;
  /* Scrim bas renforcé : la rampe sombre démarre plus haut (55 %) et finit plus
     dense (0.78) — la légende overlay reste lisible même si le scroll s'arrête
     pile à cette hauteur. */
  background: linear-gradient(180deg, rgba(10,9,8,0.3) 0%, transparent 25%, transparent 55%, rgba(10,9,8,0.78) 100%);
  z-index: 1;
}
.band-caption {
  position: absolute;
  /* Marge de sécurité interne : la légende n'est jamais collée au bord bas
     physique du bandeau (≈36 px), ce qui évite qu'elle soit coupée net quand
     le scroll s'arrête juste sous le bandeau. */
  bottom: 2.25rem; left: 1.5rem;
  z-index: 2;
  font-family: var(--font-display);
  letter-spacing: 0.08em;
  font-size: 1rem;
  color: var(--ivory);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.6em;
}
/* Légende en overlay (bandeau non-paired) : ombre portée légère pour garantir
   la lisibilité par-dessus l'image quel que soit le contraste local. */
.band:not(.band--paired) .band-caption {
  text-shadow: 0 1px 10px rgba(10, 9, 8, 0.75);
}

/* Bandeaux "paired" (photo + texte) : photo au-dessus, barre noire de légende en dessous */
.band--paired {
  height: auto;
  display: flex;
  flex-direction: column;
}
.band--paired .band-photo {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.band--paired .band-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
}
.band--paired .band-photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(168,23,30,0.3), rgba(198,162,83,0.1));
  mix-blend-mode: multiply;
}
.band--paired .band-caption-bar {
  background: linear-gradient(100deg, rgba(168,23,30,0.22), var(--black-elevated) 60%);
  padding: 1.1rem 1.5rem;
}
.band--paired .band-caption {
  position: static;
}
.band-caption::before {
  content: "";
  width: 22px; height: 2px;
  background: var(--gold);
}

.alt-bg { background: var(--black-soft); }

/* ---------- 8. Association (cards) ---------- */
.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}

.card {
  position: relative;
  background: linear-gradient(165deg, var(--black-elevated), var(--black-soft));
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 2.2rem 1.9rem;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.card:hover {
  transform: translateY(-8px);
  border-color: var(--gold);
  box-shadow: 0 24px 45px -20px rgba(0,0,0,0.65);
}
.card__icon {
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  color: var(--gold);
  margin-bottom: 1.4rem;
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease);
}
.card:hover .card__icon {
  border-color: var(--red-bright);
  background: rgba(168, 23, 30, 0.12);
}
.card__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.card h3 { margin-bottom: 0.8rem; }
.card__list {
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.card__list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.95rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px dashed var(--border-soft);
  color: var(--ivory-dim);
}
.card__list li:last-child { border-bottom: none; padding-bottom: 0; }
.card__list strong { color: var(--ivory); font-weight: 600; }
.card__note {
  font-size: 0.85rem;
  color: var(--grey);
}
.card__perks {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.card__perks li {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--gold-light);
}
.card__perks svg {
  flex: none;
  width: 15px; height: 15px;
  stroke: var(--gold);
}
.card__price {
  font-family: var(--font-display);
  color: var(--gold-light);
  font-size: 1.1rem;
  letter-spacing: 0.03em;
}
.card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  margin-top: 1rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold);
}
.card__link svg { width: 13px; height: 13px; fill: currentColor; transition: transform 0.25s var(--ease); }
.card__link:hover svg { transform: translateX(4px); }

/* Horaires avec niveau (carte Entraînements).
   Colonnes calées sur le contenu (jour | horaires jamais coupés | badge) :
   le bloc reste compact et aligné à gauche quelle que soit la largeur de carte
   — un `1fr` sur les horaires étirait la ligne et repoussait le badge au bord
   sur les cartes larges (grille 2 colonnes en tablette). */
.schedule-list {
  list-style: none;
  margin: 0 0 1.2rem;
  padding: 0;
  display: grid;
  grid-template-columns: auto max-content auto;
  justify-content: start; /* pas d'étirement des colonnes : bloc compact groupé à gauche */
  align-items: center;
  column-gap: 0.9rem;
  row-gap: 0.55rem;
}
.schedule-item { display: contents; }
.schedule-item__day,
.schedule-item__hours {
  padding-bottom: 0.6rem;
  border-bottom: 1px dashed var(--border-soft);
}
.schedule-item:last-child .schedule-item__day,
.schedule-item:last-child .schedule-item__hours {
  border-bottom: none;
  padding-bottom: 0;
}
.schedule-item__day {
  align-self: center;
  font-size: 0.95rem;
  color: var(--ivory-dim);
}
.schedule-item__hours {
  align-self: center;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ivory);
  text-align: left;
}
.schedule-item__level {
  align-self: center;
  justify-self: end;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3em 0.7em;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  color: var(--ivory);
  white-space: nowrap;
}
.schedule-item__level--confirmed {
  color: var(--gold);
  border-color: rgba(198, 162, 83, 0.4);
  background: rgba(198, 162, 83, 0.08);
}

/* ---------- 9. Wing Chun section ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.2rem;
  align-items: start;
}
.split--reverse .split__media { order: 2; }

/* Bloc "apprentissage" + puces, placé sous la photo dans la colonne média.
   Marge généreuse pour détacher le bloc de la légende de la photo au-dessus. */
.learn-block { margin-top: 2.6rem; }

.feature-list {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.15rem;
}
.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  font-size: 0.95rem;
  color: var(--ivory-dim);
}
.feature-list li::before {
  content: "";
  flex: none;
  width: 8px; height: 8px;
  margin-top: 0.45em;
  background: var(--red-bright);
  transform: rotate(45deg);
}

/* ---------- 10. Enseignant ---------- */
.teacher-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.2rem;
  align-items: center;
}
.teacher-name { margin-bottom: 0.2rem; }
.teacher-title {
  color: var(--gold);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.05em;
  margin-bottom: 1.4rem;
}
.teacher-bio p { color: var(--ivory-dim); }

/* ---------- 11. Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border-soft);
  background: var(--black-soft);
  padding-block: 2.6rem 1.8rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 0.85fr 1.3fr;
  gap: 2rem 2.4rem;
  margin-bottom: 2rem;
}
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.9rem;
  width: fit-content;
}
.footer-brand img { height: 42px; width: 42px; }
.footer-brand span {
  font-family: var(--font-display);
  letter-spacing: 0.06em;
  color: var(--ivory);
  font-size: 1rem;
}
.footer-brand:hover span { color: var(--gold); }
.footer-col h4 {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78rem;
  color: var(--gold);
  margin-bottom: 1rem;
}
/* Interlignage aligné sur celui des horaires de la colonne Contact
   (.footer-info : font-size 0.92rem, line-height 1.6, aucun espace additionnel
   entre les lignes) — même rythme vertical ligne par ligne. */
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  font-size: 0.92rem;
  line-height: 1.6;
}
.footer-col a { color: var(--ivory-dim); font-size: 0.92rem; }
.footer-col a:hover { color: var(--gold); }

/* Navigation en 2 groupes (pages principales / secondaires), séparés par le
   même filet que celui de la colonne Contact — marge symétrique 1.25rem
   au-dessus (margin) et en dessous (padding) du trait.
   Sélecteur `ul.` requis pour l'emporter sur `.footer-col ul { margin/padding: 0 }`. */
.footer-col ul.footer-nav-secondary {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-soft);
  /* les 2 liens secondaires côte à côte, séparés par un point médian
     (même séparateur que « Esvres-sur-Indre (37) · Tours » du bandeau) */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: 0.25rem;
}
.footer-nav-secondary li:not(:last-child)::after {
  content: "·";
  color: var(--grey);
  margin: 0 0.6rem;
}

/* Colonne « Association » */
.footer-col--about p { font-size: 0.92rem; margin-bottom: 0; }
.footer-col--about .footer-desc {
  line-height: 1.5;
  /* le domaine (long mot unique) est forcé à la ligne via <br> ; ceci reste
     un garde-fou si la colonne devient très étroite */
  overflow-wrap: break-word;
}
/* nom de domaine : même couleur neutre que le reste du texte informatif du
   footer (adresse, horaires) — l'or reste réservé aux titres/eyebrows. Le
   soulignement au survol (comme les autres liens du footer) suffit à signaler
   qu'il est cliquable. */
.footer-col--about .footer-site {
  color: var(--ivory-dim);
  font-weight: 600;
}
.footer-col--about .footer-site:hover { color: var(--gold); }
.footer-col--about .footer-legal-id {
  font-size: 0.8rem;
  color: var(--grey);
  margin-top: 0.65rem;
  margin-bottom: 0;
}

/* Colonne « Contact » : horaires + adresse en un seul bloc (sans sous-titres),
   puis les icônes de présence en ligne alignées en bas pour fermer le bloc. */
.footer-info {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ivory-dim);
}
.footer-info p { margin: 0 0 0.55rem; }
.footer-info p:last-child { margin-bottom: 0; }
.footer-info a { color: var(--ivory-dim); }
.footer-info a:hover { color: var(--gold); }

.footer-col--contact .footer-social {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-soft);
  flex-wrap: wrap;
}
.footer-bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 1.8rem;
  border-top: 1px solid var(--border-soft);
  font-size: 0.78rem;
  color: var(--grey);
  letter-spacing: 0.04em;
  text-align: center;
}
.footer-bottom__legal {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem 1rem;
  color: var(--grey);
}
.footer-bottom__legal a { color: var(--grey); }
.footer-bottom__legal a:hover { color: var(--gold); }
.footer-bottom__legal a:not(:first-child) {
  padding-left: 1rem;
  border-left: 1px solid var(--border-soft);
}

/* ---------- 12. Pages secondaires ---------- */
.page-hero {
  /* Bas responsive : le trait doré sépare déjà le bandeau de la section
     suivante ; sur téléphone / tablette, pas besoin d'un gros padding de
     part et d'autre. Au-dessus de ~1240 px : 3.5rem, comme avant. */
  padding-block: 8.5rem clamp(1.75rem, 4.5vw, 3.5rem);
  background:
    radial-gradient(ellipse 60% 60% at 85% 0%, rgba(168,23,30,0.28), transparent 60%),
    linear-gradient(160deg, var(--black-soft), var(--black));
  border-bottom: 1px solid var(--border-soft);
}
.page-hero h1 { margin-bottom: 0.6rem; }

/* Section collée sous un bandeau de titre (`.page-hero`) : même padding haut
   que `.section-pad`, mais autorisé à descendre sous le plancher de 4.5rem en
   dessous de ~900 px de large. Ça resserre l'écart bandeau ↔ contenu sur
   mobile et tablette ; au-dessus de ~900 px, `8vw` reprend la main et la
   valeur est identique à `.section-pad` (desktop inchangé). Concerne toutes
   les pages : la structure `.page-hero` + `.section-pad` adjacents est
   commune à l'accueil (#association) et aux 5 pages secondaires. */
.page-hero + .section-pad {
  padding-top: clamp(2.25rem, 8vw, 7.5rem);
}

/* Bandeau titre de la section #association (accueil) : même format que les pages
   secondaires — fond, trait de séparation, filigrane, gabarit de titre — mais
   le titre reste un <h2> (un seul <h1> par page = le hero), remis au gabarit des
   <h1> de bandeau pour un alignement visuel identique. Pas de fil d'Ariane. */
#association .page-hero h2 {
  font-size: clamp(2.6rem, 6vw + 1rem, 5.5rem);   /* = gabarit `h1` des bandeaux de page */
  margin-bottom: 0.6rem;
}

/* Bandeau titre des pages secondaires : logo du club en filigrane, dans le même
   esprit visuel que le médaillon du hero de l'accueil (nuance de gris, très
   basse opacité, débordant légèrement à droite du viewport). Statique — pas
   d'animation, contrairement au hero. `overflow: hidden` sur le bandeau pour
   que le débordement droit ne crée jamais de scroll horizontal. */
.page-hero { position: relative; overflow: hidden; }
.page-hero__watermark {
  position: absolute;
  top: 50%;
  right: -4%;
  transform: translateY(-50%);
  width: min(52vw, 420px);
  height: auto;
  filter: grayscale(1) brightness(1.7);
  opacity: 0.06;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.page-hero > .container { position: relative; z-index: 1; }
@media (max-width: 600px) {
  .page-hero__watermark { width: 78vw; right: -18%; opacity: 0.05; }
}
.breadcrumb {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 1.2rem;
}
.breadcrumb a { color: var(--grey); }
.breadcrumb a:hover { color: var(--gold); }

/* FAQ accordion */
.faq-list { max-width: 820px; margin-inline: auto; display: grid; gap: 1rem; }
.faq-item {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  background: var(--black-elevated);
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 1.5rem;
  font-weight: 600;
  color: var(--ivory);
  font-size: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .plus {
  flex: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  position: relative;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}
.faq-item summary .plus::before, .faq-item summary .plus::after {
  content: "";
  position: absolute;
  background: currentColor;
}
.faq-item summary .plus::before { width: 10px; height: 1.5px; }
.faq-item summary .plus::after { width: 1.5px; height: 10px; transition: opacity 0.25s var(--ease); }
.faq-item[open] summary .plus { transform: rotate(135deg); background: var(--red-bright); border-color: var(--red-bright); color: var(--ivory); }
.faq-item .faq-answer {
  padding: 0 1.5rem 1.3rem;
  color: var(--ivory-dim);
  font-size: 0.95rem;
}
.faq-item summary:hover { color: var(--gold-light); }

/* Clubs amis / partenaires — entrées "annuaire" : nom (+ tag discipline pour
   les clubs) + enseignant/description + lien de sortie.
   ≤767 px (mobile)   : empilé sur 4 lignes.
   768–1024 (tablette) : 2 lignes par entrée (nom + tag / enseignant + lien).
   ≥1025 px (desktop) : une seule ligne horizontale, colonnes alignées. */
.partner-grid {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.partner-card {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "name"
    "tag"
    "meta"
    "link";
  row-gap: 0.25rem;
  align-items: start;
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius);
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.partner-card:hover {
  background-color: rgba(243, 237, 225, 0.045);
  transform: translateX(3px);
}

.partner-card__name {
  grid-area: name;
  font-family: var(--font-display);
  font-size: 1.2rem;
  letter-spacing: 0.03em;
  color: var(--ivory);
}
/* Tag discipline (clubs uniquement) — pastille dorée pleine, texte sombre :
   contraste net (~8:1, > WCAG AA). Aligné à gauche dans une colonne de largeur
   fixe (≥961 px) pour que la colonne enseignant démarre au même point partout. */
.partner-card__tag {
  grid-area: tag;
  justify-self: start;
  margin: 0.1rem 0 0.15rem;
  font-family: var(--font-body);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.25em 0.7em;
  border-radius: 999px;
  border: 1px solid var(--gold);
  background: var(--gold);
  color: var(--black);
  white-space: nowrap;
}
.partner-card__teacher,
.partner-card__desc {
  grid-area: meta;
  font-size: 0.85rem;
  color: var(--ivory-dim);
}
/* Lien de sortie : neutre par défaut (le doré reste réservé aux titres de
   section), affordance au survol du bloc = ivoire + soulignement + flèche. */
.partner-card__link {
  grid-area: link;
  margin-top: 0.35rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ivory-dim);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  transition: color 0.25s var(--ease);
}
.partner-card:hover .partner-card__link {
  color: var(--ivory);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.partner-card__link svg { width: 12px; height: 12px; fill: currentColor; transition: transform 0.25s var(--ease); }
.partner-card:hover .partner-card__link svg { transform: translateX(4px); }

@media (min-width: 1025px) {
  /* La grille porte les colonnes partagées ; chaque entrée est un sous-grid
     → colonnes alignées d'une ligne à l'autre. */
  .partner-grid {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content; /* nom | méta | lien (Partenaires) */
    column-gap: 1.5rem;
    row-gap: 0.55rem;
  }
  /* Clubs : colonne "tag" de largeur FIXE (le plus large — "Jeet Kune Do" —
     fait ~100 px) → la colonne enseignant démarre au même x sur toutes les
     lignes. (max-content ne se propage pas de façon fiable depuis le subgrid
     des entrées, d'où une largeur explicite.) */
  .partner-grid--tagged {
    grid-template-columns: max-content 7.5rem minmax(0, 1fr) max-content;
  }
  .partner-card {
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    grid-template-areas: "name meta link";
    align-items: center;
    padding-block: 0.55rem;
  }
  .partner-grid--tagged .partner-card {
    grid-template-areas: "name tag meta link";
  }
  .partner-card__name { white-space: nowrap; }
  .partner-card__tag { margin: 0; }
  .partner-card__link { margin-top: 0; justify-self: end; }

  /* Section « Art martial / Wing Chun » (.alt-bg) : suivie d'une section texte
     sur fond sombre identique — on réduit le padding-bas (le 8vw ≈ 115 px
     laissait une bande noire vide visible sous le contenu Chi Sao). */
  .section-pad.alt-bg { padding-bottom: clamp(3rem, 4vw, 4rem); }

  /* Légende en overlay (bandeau non-paired) : plus lisible en desktop —
     scrim bas plus dense/plus haut + double ombre + libellé un cran plus grand. */
  .band:not(.band--paired)::before {
    background: linear-gradient(180deg, rgba(10,9,8,0.3) 0%, transparent 20%, transparent 42%, rgba(10,9,8,0.9) 100%);
  }
  .band:not(.band--paired) .band-caption {
    font-size: 1.1rem;
    text-shadow: 0 1px 3px rgba(10, 9, 8, 0.95), 0 2px 16px rgba(10, 9, 8, 0.7);
  }
}

/* Mentions légales */
.legal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
  max-width: 900px;
}
.legal-card {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 1.5rem 1.7rem;
  background: var(--black-elevated);
}
.legal-card dt {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.35rem;
}
.legal-card dd {
  margin: 0 0 1rem;
  color: var(--ivory);
  font-size: 0.95rem;
}
.legal-card dd:last-child { margin-bottom: 0; }
.legal-note {
  max-width: 900px;
  font-size: 0.88rem;
  color: var(--grey);
  margin-top: 2rem;
}

/* ---------- 13. Responsive ---------- */
@media (max-width: 960px) {
  .teacher-card { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .legal-grid { grid-template-columns: 1fr; }

  /* Photos illustratives (Chi Sao, Mook Jong…) : en pleine largeur de colonne
     sur mobile/tablette, le ratio 16/9 les rendait trop hautes (~40 % de
     l'écran). On plafonne la hauteur ; `object-fit: cover` gère le recadrage,
     donc aucune déformation. */
  .band--paired .band-photo { max-height: min(44vh, 320px); }
}

/* Header : 6 liens + CTA + logo ne tiennent pas confortablement en dessous de
   ~1180 px — on bascule sur le menu burger plus tôt. */
@media (max-width: 1180px) {
  .main-nav { display: none; }
  .burger { display: flex; }

  .main-nav.is-open {
    display: flex;
    position: fixed;
    /* Pas d'`inset: 0` : quand le header est `.is-scrolled`, son
       `backdrop-filter` en fait le bloc conteneur de ce menu `position: fixed`.
       `inset: 0` se calait alors sur la hauteur du header (~62 px), pas sur le
       viewport, laissant le fond opaque trop court et la page visible derrière
       les liens. On force donc des dimensions viewport explicites (le header
       étant collé en haut et pleine largeur, top/left/right = 0 restent bons). */
    top: 0;
    left: 0;
    right: 0;
    height: 100vh;
    height: 100dvh;
    z-index: 105;
    background: var(--black); /* opaque : la page ne transparaît jamais derrière le menu */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2.4rem;
    overflow-y: auto;
  }
  .main-nav.is-open ul {
    flex-direction: column;
    align-items: center;
    gap: 1.8rem;
  }
  .main-nav.is-open a { font-size: 1.3rem; }
  /* « Nous rejoindre » reste un simple lien de la liste, juste en rouge/gras
     comme sur desktop — plus de bouton dans l'overlay. */
}

@media (max-width: 1024px) {
  h1,
  #association .page-hero h2 { font-size: clamp(2.4rem, 11vw, 3.4rem); }

  /* Footer : sous 1024 px, « Association » en tête pleine largeur,
     Navigation + Contact se partagent la rangée suivante en 2 colonnes. */
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-col--about { grid-column: 1 / -1; }

  /* Le padding bas des sections (calé sur 8vw) est plus court qu'en desktop :
     on redonne un peu d'air avant le footer sur tablette/mobile. */
  .site-footer { margin-top: clamp(2rem, 5vw, 3rem); }
}

/* Association — grille des 3 cartes.
   3 colonnes UNIQUEMENT quand elles tiennent à l'aise côte à côte : la carte
   « Entraînements » impose ~347 px (jour + horaire insécable + badge), donc
   3 colonnes égales demandent ~1140 px de viewport. En dessous → 1 seule
   colonne, carte plafonnée à 460 px et centrée (jamais de « 2 + 1 » avec la
   3e carte orpheline / étirée). Sous ~500 px la carte occupe toute la largeur. */
@media (max-width: 1139px) {
  .info-grid { grid-template-columns: 1fr; justify-items: center; }
  .info-grid .card { width: 100%; max-width: 460px; }
}

/* Tablette : bandeau « Entraînement collectif » à hauteur fixe et contenue —
   garantit que la photo ET sa légende tiennent entièrement à l'écran. */
@media (min-width: 768px) and (max-width: 1024px) {
  .band-divider { height: 300px; }
}

/* Tablette : entrées "Clubs amis" sur 2 lignes au lieu de 4 —
   nom + tag sur la 1re, enseignant + lien (aligné à droite) sur la 2e. */
@media (min-width: 768px) and (max-width: 1024px) {
  .partner-card {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name tag"
      "meta link";
    column-gap: 0.9rem;
    row-gap: 0.35rem;
    align-items: center;
    padding: 0.75rem 0.85rem;
  }
  /* Partenaires (sans tag) : le nom occupe toute la 1re ligne. */
  .partner-grid:not(.partner-grid--tagged) .partner-card {
    grid-template-areas:
      "name name"
      "meta link";
  }
  .partner-card__name { white-space: normal; }
  .partner-card__tag { justify-self: end; align-self: center; margin: 0; }
  .partner-card__teacher,
  .partner-card__desc { margin: 0; }
  .partner-card__link { margin-top: 0; justify-self: end; white-space: nowrap; }
}

/* Note : sous 768 px, la section Association reste en 1 colonne centrée (règle
   ≤1024 px) ; la carte plafonnée à 460 px occupe de toute façon toute la
   largeur disponible. Plus de règle `.info-grid` dédiée au mobile. */

/* Planning (carte Entraînements) — mobile < 600 px.
   La grille 3-colonnes écrasait la colonne horaires (coupure de « 20h – 22h »).
   On passe en flex-wrap : jour (colonne régulière) + horaires + badge sur une
   même ligne, alignés à gauche au même niveau que le titre de la carte ; si la
   ligne ne tient pas (≈360 px), seul le badge passe dessous, toujours flush à
   gauche — jamais de décalage ni de centrage. */
@media (max-width: 600px) {
  .schedule-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;   /* annule le `align-items: center` de base (centrait les lignes) */
    gap: 0.5rem;
  }
  .schedule-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 0.7rem;
    row-gap: 0.15rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px dashed var(--border-soft);
  }
  .schedule-item:last-child { padding-bottom: 0; border-bottom: none; }
  .schedule-item__day,
  .schedule-item__hours {
    padding-bottom: 0;
    border-bottom: none;
  }
  .schedule-item__day { flex: 0 0 auto; min-width: 4.5rem; }  /* colonne jour régulière → horaires alignés d'une ligne à l'autre */
  .schedule-item__hours { flex: 0 0 auto; white-space: nowrap; }
  .schedule-item__level {
    flex: 0 0 auto;
    justify-self: start;
    /* badge un cran plus petit pour tenir sur la ligne au maximum de largeurs */
    font-size: 0.62rem;
    padding: 0.28em 0.6em;
    letter-spacing: 0.04em;
  }
}

@media (max-width: 480px) {
  .container { padding-inline: 1.15rem; }
  .btn { padding: 0.85rem 1.4rem; font-size: 0.8rem; }

  /* Sous-titre hero : empilé proprement sur 2 lignes plutôt qu'une coupure
     hasardeuse laissant le « | » en fin de ligne. Le séparateur devient une
     rupture de ligne invisible (bloc de hauteur nulle). */
  .hero-subtitle { line-height: 1.3; }
  .hero-subtitle .sep {
    display: block;
    height: 0;
    margin: 0;
    overflow: hidden;
    color: transparent;
  }

  /* Le repère de défilement chevauchait le 2e bouton sur petit écran ;
     il n'apporte rien sur mobile où le scroll est évident. */
  .scroll-cue { display: none; }

  /* Footer : une seule colonne, bandeau du bas centré et empilé */
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; }
  .footer-bottom__legal { flex-direction: column; gap: 0.5rem; }
  .footer-bottom__legal a:not(:first-child) { padding-left: 0; border-left: 0; }
}