/* ==========================================================================
   La Connexion : feuille de style commune de la refonte « épurée »
   Fichier : assets/site.css (une seule feuille pour toutes les pages refaites)
   Source : maquette validée prototypes/d-cinema/ (index.html et cours.html)
   Mode d'emploi complet : prototypes/kit-epure/LISEZMOI.md
   --------------------------------------------------------------------------
   Les règles de la direction (validées par le président) :
   - Fond sombre, texte blanc cassé, beaucoup d'espace, filets fins.
   - Une seule police : Switzer, auto-hébergée (assets/fonts/, licence dans
     assets/fonts/LICENCE.txt). Titres en Switzer 300, serrés.
   - AUCUN italique, nulle part (« ça fait trop IA ») : em, i, cite,
     address... sont remis droits ci-dessous, et le faux italique est coupé.
   - Couleurs de l'identité et repères par catégorie de cours :
       jaune #FFCC00 = le bouton principal (et le focus clavier) ;
       vert  #0E8F3C = le halo discret des appels finaux.
     Les horaires et tarifs utilisent les mêmes couleurs par catégorie.
   - Photos de banque d'images : noir et blanc + légende « Photo
     d'illustration ». La vraie photo du club est la seule en couleur, et
     jamais agrandie au-delà de sa taille réelle (882 px).
   - Aucun caractère décoratif Unicode : flèches et icônes viennent de
     Font Awesome 6.4.0, plus, moins et croix sont dessinés en CSS.

   Chargement (voir le LISEZMOI) : dans le <head>, le petit script qui pose
   la classe "js", puis assets/site.css, puis Font Awesome ; en bas du
   <body>, assets/site.js puis script.js. Les pages refaites ne chargent PLUS
   style.css ni mobile_responsive.css.

   Sommaire
   01 Polices
   02 Jetons
   03 Base et typographie (aucun italique)
   04 Accessibilité
   05 Mise en page : conteneur, sections, titres de section, texte long
   06 Boutons et liens
   07 Barre de navigation à plat
   08 Menu mobile plein écran
   09 Ouvertures : accueil, pages du récit, pages secondaires
   11 Photos
   12 Accueil : les quatre temps, l'ambition, la FAQ courte
   13 Colonnes et listes entre filets, dates
   14 Pour qui (publics) et en famille
   15 Chiffres fins
   16 Citation
   17 Horaires
   18 Tarifs
   19 Encadrés sobres
   20 Questions fréquentes (accordéons)
   21 Formulaires
   22 Appel final (halo) et cours d'essai
   24 Pied de page
   25 Galerie et visionneuse (classes produites par tools/galerie.py)
   26 Fenêtre newsletter et chatbot (balisage de la page et de script.js)
   27 Apparitions, mouvement réduit, impression
   28 Utilitaires
   29 Blog : articles et liste des articles
   ========================================================================== */


/* ==========================================================================
   01 Polices : Switzer, quatre graisses, sans italique
   (chemins relatifs à cette feuille : assets/fonts/)
   ========================================================================== */
@font-face { font-family: "Switzer"; src: url("fonts/switzer-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("fonts/switzer-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("fonts/switzer-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Switzer"; src: url("fonts/switzer-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }


/* ==========================================================================
   02 Jetons
   ========================================================================== */
:root {
  color-scheme: dark;              /* listes déroulantes, cases et barres de défilement sombres */

  /* Fonds */
  --bg: #0A0D0B;                   /* noir légèrement teinté de vert */
  --bg-raised: #111612;            /* panneaux, fenêtres */
  --bg-field: #0F1411;             /* champs de formulaire */

  /* Texte */
  --text: #EDEFEA;                 /* blanc cassé */
  --text-soft: #B7BCB5;            /* texte courant secondaire (10:1) */
  --text-mute: #8F958E;            /* petits titres, notes (6,5:1) */

  /* Filets */
  --line: rgba(237, 239, 234, .12);
  --line-strong: rgba(237, 239, 234, .28);
  --line-field: rgba(237, 239, 234, .42);   /* bord des champs : 3:1 minimum */

  /* Identité, en touches seulement */
  --green: #0E8F3C;                /* halo des appels finaux */
  --yellow: #FFCC00;               /* bouton principal, focus clavier */
  --yellow-hover: #FFD83D;
  --yellow-ink: #0A5A28;           /* texte sur jaune */

  /* États de formulaire (lisibles sur fond sombre) */
  --danger: #FF8F86;
  --success: #7FD79B;

  /* Police unique */
  --font: "Switzer", "Helvetica Neue", Arial, sans-serif;

  /* Mesures */
  --max: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --section: clamp(56px, 6vw, 88px);   /* espace vertical d'une section */
  --header-h: 76px;
  --radius: 6px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* Échelle des titres : le h1 de la page reste toujours le plus grand.
     Tailles en 1440 : h2 68, h2 des pages secondaires et pratiques 56, h3 40,
     h4 33,6, h5 25,6. En 375 : h2 34, h2 des pages secondaires 32. */
  --fs-h2: clamp(2.125rem, 1.35rem + 3.3vw, 4.25rem);
  --fs-h2-s: clamp(2rem, 1.3rem + 2.5vw, 3.5rem);
  --fs-h3: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem);
  --fs-h4: clamp(1.4rem, 1.2rem + 1vw, 2.1rem);
  --fs-h5: clamp(1.3rem, 1.15rem + .55vw, 1.6rem);
  /* Écart entre deux blocs d'une même section */
  --gap-block: clamp(40px, 4.5vw, 64px);
}


/* ==========================================================================
   03 Base et typographie
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 12px);   /* les ancres ne passent pas sous la barre */
  font-synthesis: none;            /* jamais de faux italique ni de faux gras */
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { margin: 0 0 1em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

h1, h2, h3 {
  font-family: var(--font); font-weight: 300;
  line-height: 1.04; letter-spacing: -.035em;
  margin: 0; text-wrap: balance;
  overflow-wrap: break-word;   /* un mot trop long pour l'écran passe à la ligne (espacement agrandi, 320 px) */
}
/* Interlettrage dégressif : plus le titre est petit, moins il est serré */
h3 { letter-spacing: -.025em; }
h4, h5, h6 { font-family: var(--font); font-weight: 500; line-height: 1.3; margin: 0; }

/* Aucun italique : demande du président. Les icônes <i> de Font Awesome
   restent droites de toute façon. */
em, i, cite, address, dfn, var, blockquote { font-style: normal; }
strong, b { font-weight: 600; }

hr { height: 1px; margin: 0; border: 0; background: var(--line); }
::selection { background: var(--yellow); color: #0A0D0B; }
/* Au toucher : pas de rectangle gris du navigateur (chaque élément a son propre retour, voir :active) */
a, button, summary, label { -webkit-tap-highlight-color: transparent; }

/* Place réservée aux icônes Font Awesome (feuille chargée en différé) */
i[class*="fa-"] { display: inline-block; min-width: 1em; text-align: center; }


/* ==========================================================================
   04 Accessibilité
   ========================================================================== */
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
:where(a, summary):focus-visible { border-radius: 4px; }
main:focus { outline: none; }

/* .sr-only : ancien nom, encore utilisé par les formulaires newsletter */
.visually-hidden, .sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 200; padding: 12px 18px; border-radius: 999px;
  background: var(--text); color: var(--bg); font-weight: 500; text-decoration: none;
  transform: translateY(-160%); transition: transform .2s;
}
.skip-link:focus { transform: none; }


/* ==========================================================================
   05 Mise en page
   ========================================================================== */
.container { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.container.is-narrow { max-width: 820px; }

/* Sections : 3 à 5 par page, une idée par section */
.section { padding: var(--section) 0; }
.section.has-line { border-top: 1px solid var(--line); }
.section.is-tight { padding: clamp(40px, 4.4vw, 64px) 0; }
.section + .section.no-top { padding-top: 0; }
/* Deux blocs dans la même section (par exemple une citation sous un texte et sa photo) */
.section > .container + .container { margin-top: var(--gap-block); }

/* Petit titre au-dessus d'un titre (surtitre) */
.eyebrow {
  display: inline-flex; align-items: center; gap: 14px; margin: 0;
  font-size: 1rem; font-weight: 500; line-height: 1.4; letter-spacing: 0;
  color: var(--text-mute);
}

/* Chapeau */
.lead {
  max-width: 34em; margin: 0;
  font-size: clamp(1.0625rem, .95rem + .45vw, 1.3125rem); font-weight: 300; line-height: 1.55;
  color: var(--text-soft);
}

/* Titre de section : surtitre, titre, une ou deux phrases */
.section-head { max-width: 760px; margin: 0 0 clamp(36px, 4vw, 56px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: var(--fs-h2); margin: 20px 0; }
.section-head p { max-width: 34em; margin: 0; font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); font-weight: 300; color: var(--text-soft); }
.section-head p + p { margin-top: 12px; }
/* Même surtitre partout (taille, graisse et couleur de .eyebrow) */
/* font-size explicite : sans elle, un surtitre <p> prendrait la taille de .section-head p (19 px) */
.section-head .eyebrow { font-size: 1rem; font-weight: 500; color: var(--text-mute); }
.section-head .cite { font-size: .8125rem; font-weight: 400; color: var(--text-mute); }
.section-head.center p { max-width: 34em; margin-inline: auto; }
.section-head.center .eyebrow { flex-direction: column; gap: 16px; }
.section-head.is-small h2 { font-size: var(--fs-h2-s); }
.section-head .link-arrow { margin-top: 20px; }
/* Pages secondaires (le <main> commence par .page-head) et pages pratiques
   (ouverture .practical-hero) : leur h1 fait 72 à 80 px, les titres de section
   restent nettement en dessous. :where() garde une spécificité basse : les
   tailles propres à une section (.week, .registration-steps...) passent devant. */
:where(main:has(> .page-head, > .practical-hero)) .section-head h2 { font-size: var(--fs-h2-s); }
/* Pages pratiques : leur h1 descend à 40 px entre 600 et 800 px (clamp(2.5rem, 5vw, 4.5rem)).
   Les titres de section suivent la même pente (4,4vw) et restent sous le h1 à toutes les
   largeurs : 32 px en 375, 34 en 768, 45 en 1024, 56 en 1440. */
:where(main:has(> .practical-hero)) :is(.section-head h2, .section-head.is-small h2) { font-size: clamp(2rem, 4.4vw, 3.5rem); }

/* Titre à gauche, contenu à droite (FAQ, listes) ; empilé sur mobile */
.aside-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); align-items: start; }
.aside-head { grid-column: 1 / span 4; }
.aside-head.section-head { margin-bottom: 0; }
.aside-head h2 { font-size: var(--fs-h2-s); }
.aside-body { grid-column: 6 / span 7; }
@media (min-width: 900px) {
  .aside-head { position: sticky; top: calc(var(--header-h) + 28px); }
}
@media (max-width: 899px) {
  .aside-grid { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .aside-head, .aside-body { grid-column: 1; }
}

/* Texte + photo côte à côte (pages intérieures) */
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); align-items: center; }
.split > .shot { grid-column: 1 / span 5; grid-row: 1; }
.split > .split-text { grid-column: 7 / span 6; grid-row: 1; }
.split.is-reverse > .shot { grid-column: 8 / span 5; }
.split.is-reverse > .split-text { grid-column: 1 / span 6; }
.split-text .section-head { margin-bottom: 28px; }
.split-text > p { color: var(--text-soft); max-width: 34em; }
@media (max-width: 899px) {
  .split { grid-template-columns: 1fr; row-gap: 32px; }
  .split > .shot, .split > .split-text,
  .split.is-reverse > .shot, .split.is-reverse > .split-text { grid-column: 1; grid-row: auto; }
  /* une photo portrait devient un bandeau : la page reste courte */
  .split > .shot.ratio-4-5 { aspect-ratio: 3 / 2; }
}
/* .split.is-top : texte plus long que la photo, la photo reste en vue */
@media (min-width: 900px) {
  .split.is-top { align-items: start; }
  .split.is-top > .shot { position: sticky; top: calc(var(--header-h) + 28px); }
}

/* Sous-titre à l'intérieur d'une section (un seul h2 par section) */
.sub { margin: var(--gap-block) 0 24px; font-size: var(--fs-h4); line-height: 1.1; }
/* Dans une demi-colonne (ordinateur), le sous-titre plafonne à 30 px : « S'entraîner aussi
   à Boulogne avec la Z Team » (JJB dans le 92) tient sur une ligne */
.split-text .sub { margin: 40px 0 18px; font-size: min(var(--fs-h4), 1.875rem); }

/* Liens dans la phrase d'un titre de section ou d'un appel final
   (soulignement à 50 % : environ 3:1 contre le fond) */
.section-head p a, .halo-section p a { color: var(--text); text-decoration-color: rgba(237, 239, 234, .5); text-underline-offset: 4px; }
.section-head p a:hover, .halo-section p a:hover { text-decoration-color: var(--text); }

/* Texte long (pages secondaires) : 34em, soit 60 à 75 caractères par ligne */
.prose { max-width: 34em; }
.prose > :first-child { margin-top: 0; }
.prose p, .prose li { color: var(--text-soft); }
.prose strong { color: var(--text); font-weight: 500; }
.prose h2 { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.75rem); margin: 1.6em 0 .55em; }
.prose h3 { font-size: var(--fs-h5); font-weight: 400; margin: 1.5em 0 .45em; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: .4em; }
.prose li::marker { color: var(--text-mute); }
/* :not(.btn) : un bouton placé dans un texte long garde son style de bouton */
.prose a:not(.btn), .text-link {
  color: var(--text); text-decoration: underline; text-decoration-thickness: 1px;
  text-decoration-color: rgba(237, 239, 234, .5); text-underline-offset: 4px; transition: text-decoration-color .2s;
}
.prose a:not(.btn):hover, .text-link:hover { text-decoration-color: var(--text); }
.prose .note { margin-top: 0; }
.prose + .actions { margin-top: 32px; }


/* ==========================================================================
   06 Boutons et liens
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px; border-radius: 999px; border: 1px solid transparent;
  font: 500 .9375rem/1.1 var(--font); letter-spacing: .01em; text-decoration: none; white-space: nowrap;
  transition: background-color .25s, color .25s, border-color .25s, transform .2s var(--ease);
}
.btn i { font-size: .8em; transition: transform .25s var(--ease); }
/* Survol réservé à la souris : au doigt, l'effet resterait collé après le toucher */
@media (hover: hover) and (pointer: fine) {
  .btn:hover i { transform: translateX(3px); }
  .btn:hover i.fa-arrow-down { transform: translateY(2px); }
}
/* Jaune : l'action principale de l'écran (une seule par écran si possible) */
.btn-yellow { background: var(--yellow); color: var(--yellow-ink); }
.btn-yellow:hover { background: var(--yellow-hover); }
/* Blanc cassé : action forte mais secondaire (bouton de la barre) */
.btn-light { background: var(--text); color: #0A0D0B; }
.btn-light:hover { background: #FFFFFF; }
/* Contour : action d'accompagnement */
.btn-ghost {
  border-color: var(--line-strong); color: var(--text); background: rgba(10, 13, 11, .25);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn-ghost:hover { border-color: rgba(237, 239, 234, .6); background: rgba(237, 239, 234, .06); }
.btn-block { width: 100%; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.actions.center { justify-content: center; }
@media (max-width: 479px) {
  .actions.stack-mobile .btn { flex: 1 1 100%; }
  /* Appel final sur téléphone : les boutons prennent toute la largeur, comme
     ceux de l'ouverture et des autres appels finaux (même largeur pour les deux) */
  .halo-section .actions:not(.stack-mobile) .btn { flex: 1 1 100%; }
}

/* Lien souligné d'un filet, avec flèche */
.link-arrow {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px;
  color: var(--text); text-decoration: none; font-weight: 500;
  border-bottom: 1px solid var(--line-strong); transition: border-color .25s, background-color .25s;
}
.link-arrow i { font-size: .8em; transition: transform .25s var(--ease); }
.link-arrow:hover { border-color: var(--text); }
@media (hover: hover) and (pointer: fine) {
  .link-arrow:hover i { transform: translateX(4px); }
}
.links { display: flex; flex-wrap: wrap; gap: 8px 28px; }


/* ==========================================================================
   07 Barre de navigation : à plat, sans aucun sous-menu
   Logo, accès pratiques et cours d’essai, puis paiement direct de la cotisation.
   Transparente en haut de page, sombre et floutée au défilement (site.js
   pose .is-solid). Page en cours : aria-current="page" sur le lien.
   ========================================================================== */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color .35s, border-color .35s;
}
.site-header.is-solid {
  background: rgba(10, 13, 11, .78);
  -webkit-backdrop-filter: saturate(140%) blur(16px); backdrop-filter: saturate(140%) blur(16px);
  border-bottom-color: var(--line);
}
/* Accessibilité (contraste 4,5:1, WCAG 1.4.3) : sur une photo claire, les liens de la barre
   transparente manquaient de contraste. Un voile très léger, sous la barre seulement, sur les
   pages à photo d'ouverture ; il s'efface quand la barre devient sombre. Couleurs inchangées. */
html:has(.hero) .site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 13, 11, .55), rgba(10, 13, 11, 0));
  transition: opacity .35s;
}
html:has(.hero) .site-header.is-solid::before { opacity: 0; }
/* minmax(0, 1fr), hauteur minimale et retour à la ligne de la liste : avec un espacement de texte
   agrandi (WCAG 1.4.12), la barre passe sur deux lignes au lieu de pousser le bouton hors de l'écran.
   Rendu normal identique (une ligne, même hauteur). */
.header-inner {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 18px;
  /* même largeur que .container : le logo est aligné sur le texte de la page */
  min-height: var(--header-h); width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto;
}
.brand { justify-self: start; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--text); text-decoration: none; }
/* Image SVG autonome : la conversion du logo est contenue dans le fichier,
   sans filtre à initialiser dans chaque nouvelle page. */
.brand-logo { display: block; flex: none; width: 42px; height: 42px; }
.brand-name { font-weight: 500; font-size: 1.08rem; line-height: 1; letter-spacing: -.01em; white-space: nowrap; }

.main-nav { min-width: 0; }
.main-nav ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 clamp(12px, 1vw, 16px); list-style: none; margin: 0; padding: 0; }
.main-nav a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  color: var(--text-soft); text-decoration: none; font-size: .9375rem; white-space: nowrap; transition: color .2s;
}
.main-nav a:hover, .main-nav a[aria-current="page"], .main-nav a[aria-current="true"] { color: var(--text); }
/* Page en cours (ou rubrique en cours, aria-current="true" dans un article du blog) : un point discret sous le lien. */
.main-nav a[aria-current="page"]::after, .main-nav a[aria-current="true"]::after {
  content: ""; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: var(--text-soft);
}
.main-nav .nav-trial, .mo-foot .nav-trial { background: rgba(237, 239, 234, .08); border: 1px solid var(--line-strong); color: var(--text); }
.main-nav .nav-trial { min-height: 42px; padding: 0 12px; border-radius: 999px; font-size: .875rem; }
.main-nav .nav-trial:hover, .mo-foot .nav-trial:hover { background: rgba(237, 239, 234, .14); border-color: var(--text-soft); }
.header-end { justify-self: end; display: flex; align-items: center; gap: 12px; }
.btn.nav-cta { min-height: 42px; padding: 0 16px; font-size: .875rem; gap: 8px; }
/* Sur la page Nous rejoindre, le bouton porte aria-current="page" */
.nav-cta[aria-current="page"] { background: transparent; color: var(--text); border-color: var(--line-strong); }
.nav-cta[aria-current="page"]::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--text-soft);
}

.menu-btn, .mo-close {
  display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(10, 13, 11, .3);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--text); font: 500 .9375rem/1 var(--font);
  transition: transform .2s var(--ease);
}
.menu-lines { position: relative; width: 16px; height: 8px; }
.menu-lines::before, .menu-lines::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 2px; background: currentColor; }
.menu-lines::before { top: 0; }
.menu-lines::after { bottom: 0; }
.mo-close { display: inline-flex; }

@media (max-width: 1279px) {
  .main-nav, .nav-cta { display: none; }
  .menu-btn { display: inline-flex; }
  .header-inner { grid-template-columns: 1fr auto; }
}
/* Très petits écrans (320 px) : « La Connexion » tient sur une ligne */
@media (max-width: 359px) {
  .brand { gap: 10px; }
  .brand-logo { width: 36px; height: 36px; }
  .header-inner { gap: 12px; }
  .menu-btn, .mo-close { padding: 0 14px; }
}


/* ==========================================================================
   08 Menu mobile : démarches en premier, découverte du club ensuite
   <div class="menu-overlay" id="menu-mobile" role="dialog" aria-modal="true" hidden>
   site.js l'ouvre (bouton .menu-btn), piège le focus, ferme avec Échap et
   rend le reste de la page inactif (inert) tant qu'il est ouvert.
   ========================================================================== */
.menu-overlay {
  position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column;
  padding: 0 var(--gutter) max(28px, env(safe-area-inset-bottom));
  background: var(--bg);
  overflow-y: auto; overscroll-behavior: contain;
  transition: opacity .25s var(--ease);
}
/* Ouverture en fondu (le menu passe de hidden à affiché) */
@starting-style { .menu-overlay.is-open { opacity: 0; } }
.mo-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: var(--header-h); }
.mo-nav { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 24px 0; }
.mo-links { list-style: none; margin: 0; padding: 0; }
.mo-links a {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0;
  font-weight: 300; font-size: clamp(1.65rem, 7vw, 3rem); line-height: 1.15; letter-spacing: -.03em;
  color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line);
}
.mo-links a i { font-size: 1rem; color: var(--text-mute); transition: transform .25s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .mo-links a:hover i { transform: translateX(4px); color: var(--text); }
}
.mo-links a[aria-current="page"] i { color: var(--text); }
.mo-foot { display: grid; gap: 16px; padding-top: 8px; }
.mo-foot .btn { width: 100%; min-height: 44px; padding: 10px 16px; font-size: .9375rem; gap: 8px; }
.mo-foot p { margin: 0; font-size: .9375rem; color: var(--text-mute); text-align: center; }
/* Sur la page Nous rejoindre, le bouton du menu porte aria-current="page" :
   même signe que dans la barre (contour et point discret) */
.mo-foot .btn[aria-current="page"] { background: transparent; color: var(--text); border-color: var(--line-strong); }
.mo-foot .btn[aria-current="page"]::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--text-soft);
}
.menu-overlay.is-open .mo-links li { animation: moIn .6s var(--ease) both; }
.menu-overlay.is-open .mo-links li:nth-child(2) { animation-delay: .05s; }
.menu-overlay.is-open .mo-links li:nth-child(3) { animation-delay: .1s; }
.menu-overlay.is-open .mo-links li:nth-child(4) { animation-delay: .15s; }
@keyframes moIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* Menu ouvert : la page ne défile plus, le bouton du chatbot s'efface */
html.menu-open { overflow: hidden; }
html.menu-open #lc-chatbot { display: none; }


/* ==========================================================================
   09 Ouvertures
   - .hero              : accueil, plein écran (100svh)
   - .hero.page-hero    : pages du récit (Notre histoire, Les cours,
                          Galerie, Nous rejoindre), plus courte
   - .page-head         : pages secondaires, sans photo
   ========================================================================== */
.hero { position: relative; display: grid; align-items: end; justify-items: center; min-height: 100vh; min-height: 100svh; isolation: isolate; overflow: hidden; }
.hero-media { position: absolute; inset: 0; z-index: -3; margin: 0; }
/* <picture> autour de l'image (recadrage portrait sur téléphone) : l'image garde son cadre */
.hero-media picture { display: contents; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; filter: grayscale(1) contrast(1.1) brightness(.78); transform: scale(1.06); animation: heroIn 2.6s var(--ease) forwards; }
@keyframes heroIn { to { transform: scale(1); } }
/* voile : haut assombri pour la barre, centre pour le texte, bas fondu dans la page */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(180deg, rgba(10, 13, 11, .72) 0%, rgba(10, 13, 11, 0) 24%),
    radial-gradient(120% 72% at 50% 72%, rgba(10, 13, 11, .8) 0%, rgba(10, 13, 11, .4) 58%, rgba(10, 13, 11, 0) 100%),
    linear-gradient(180deg, rgba(10, 13, 11, 0) 60%, var(--bg) 100%);
}
/* grain léger, façon pellicule, sur l'ouverture seulement */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-content { width: min(100% - 2 * var(--gutter), 1100px); padding: calc(var(--header-h) + 40px) 0 clamp(72px, 13vh, 150px); text-align: center; }
.hero h1 { font-size: clamp(2.7rem, 1rem + 5.6vw, 6rem); line-height: 1; letter-spacing: -.045em; margin: 26px 0 28px; }
.hero .lead { max-width: 33em; margin: 0 auto 40px; }
/* Chapeau centré équilibré (sauf un chapeau justifié, qui garde sa justification) */
.hero .lead:not(.is-justified) { text-wrap: balance; }
.hero .eyebrow { color: var(--text); text-shadow: 0 1px 14px rgba(0, 0, 0, .8); }
/* Surtitre placé DANS le h1 (mots-clés pour le référencement), même rendu */
.hero h1 .eyebrow { display: flex; justify-content: center; margin: 0 0 26px; line-height: 1.4; }
.hero h1:has(.eyebrow) { margin-top: 0; }
.hero .actions { justify-content: center; }
/* Légende à gauche, alignée sur la grille : le bouton du chatbot occupe le coin bas droit */
.hero > .photo-note { position: absolute; left: max(var(--gutter), calc((100% - var(--max)) / 2)); bottom: 22px; }

/* Pages du récit : même voile, image plus sombre, hauteur réduite */
.page-hero { min-height: clamp(520px, 78vh, 820px); min-height: clamp(520px, 78svh, 820px); }
.page-hero .hero-media img { object-position: 50% 50%; filter: grayscale(1) contrast(1.2) brightness(.5); }
.page-hero .hero-content { padding-bottom: clamp(56px, 9vh, 104px); }
/* même taille que l'accueil en grand écran (96 px) */
.page-hero h1 { font-size: clamp(2.75rem, 1rem + 5.6vw, 6rem); }
.page-hero .lead { margin-bottom: 32px; }
.page-hero .lead:last-child { margin-bottom: 0; }
/* Page formulaire (Nous rejoindre) : une ouverture plus courte, pour arriver vite au formulaire */
.page-hero.is-short { min-height: clamp(460px, 62vh, 640px); min-height: clamp(460px, 62svh, 640px); }

/* « Sur cette page » : ancres sous le chapeau */
.jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 28px; margin: 0; padding: 0; list-style: none; }
.jump a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-soft); text-decoration: none; font-size: .9375rem; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.jump a:hover { color: var(--text); border-color: var(--line-strong); }
/* Sur téléphone, les ancres sont masquées et l'ouverture raccourcie,
   pour arriver plus vite au contenu */
@media (max-width: 599px) {
  .page-hero .jump, .page-hero nav:has(> .jump) { display: none; }
  .page-hero { min-height: clamp(460px, 64vh, 640px); min-height: clamp(460px, 64svh, 640px); }
  .page-hero .lead { margin-bottom: 0; }
}

/* Pages secondaires : une ouverture sobre, sans photo, alignée à gauche */
.page-head {
  padding: calc(var(--header-h) + clamp(48px, 7vw, 104px)) 0 clamp(40px, 5vw, 72px);
  border-bottom: 1px solid var(--line);
  background: radial-gradient(70% 120% at 50% -20%, rgba(237, 239, 234, .06), rgba(237, 239, 234, 0) 70%);
}
.page-head h1 { max-width: 14em; margin: 18px 0 22px; font-size: clamp(2.6rem, 1.4rem + 4.2vw, 5rem); line-height: 1.02; letter-spacing: -.04em; }
.page-head .lead + .actions, .page-head .lead + .links { margin-top: 28px; }
.page-head.center { text-align: center; }
.page-head.center h1, .page-head.center .lead { margin-inline: auto; }
.page-head.center .crumbs ol { justify-content: center; }
/* Infos rapides (liste .where) sous le chapeau, alignées à gauche */
.page-head .where { margin-top: 32px; }
/* sous 360 px, elles arrivent en bas du premier écran : place laissée au bouton flottant du chatbot */
@media (max-width: 359px) { .page-head .where { padding-right: 52px; } }
/* Sur téléphone, une ouverture plus ramassée : le contenu arrive dans le premier écran */
@media (max-width: 599px) {
  .page-head { padding-top: calc(var(--header-h) + 20px); padding-bottom: 36px; }
  .page-head .crumbs ol { margin-bottom: 20px; }
  .page-head h1 { margin: 14px 0 18px; }
  .page-head .where { gap: 6px 20px; margin-top: 24px; font-size: .875rem; }
  .page-head .where i { margin-right: 8px; }
}
/* .is-full : une seule ouverture qui occupe l'écran (page 404) */
.page-head.is-full { display: grid; align-items: center; min-height: 82vh; min-height: 82svh; border-bottom: 0; }
.page-head .fine-print { margin-top: 36px; font-size: .9375rem; }

/* Fil d'Ariane (pages secondaires) : séparateur en barre oblique ASCII */
.crumbs ol { display: flex; flex-wrap: wrap; margin: 0 0 28px; padding: 0; list-style: none; font-size: .875rem; color: var(--text-mute); }
.crumbs li + li::before { content: "/"; margin: 0 10px; color: var(--line-strong); }
/* zone de toucher de 44 px sans changer la hauteur de la ligne */
.crumbs a { display: inline-block; padding-block: 13px; margin-block: -13px; color: var(--text-soft); text-decoration: none; }
.crumbs a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { color: var(--text-mute); }


/* ==========================================================================
   11 Photos
   <figure class="shot"> : noir et blanc, voile doux en bas, légende
   <figcaption class="photo-note">Photo d'illustration</figcaption>.
   .is-bright : photo claire, assombrie davantage.
   .is-club   : LA vraie photo du club, en couleurs adoucies ; jamais plus
                large que 882 px (sa taille réelle).
   ========================================================================== */
.shot { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius); background: var(--bg-raised); }
.shot img, .shot video { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08) brightness(.74); }
.shot.is-bright img { filter: grayscale(1) contrast(1.15) brightness(.6); }
.shot.is-club { max-width: 882px; }
.shot.is-club img, .shot.is-club video { object-position: 50% 22%; filter: saturate(.62) contrast(1.03) brightness(.86); }
/* voile du bas assez dense pour que la légende reste lisible (4,5:1) même sur une photo claire */
.shot::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10, 13, 11, 0) 55%, rgba(10, 13, 11, .82) 100%); }
.shot figcaption { position: absolute; left: 16px; bottom: 12px; z-index: 1; }
.photo-note { margin: 0; font-size: .75rem; letter-spacing: .04em; color: rgba(237, 239, 234, .7); }
.shot figcaption.photo-note { color: rgba(237, 239, 234, .86); }
/* proportions usuelles */
.ratio-3-2 { aspect-ratio: 3 / 2; }
.ratio-4-3 { aspect-ratio: 4 / 3; }
.ratio-4-5 { aspect-ratio: 4 / 5; }
.ratio-16-9 { aspect-ratio: 16 / 9; }
/* Plan Google Maps dans le cadre d'une photo, assombri pour le fond sombre
   (<div class="shot map-shot"><iframe ...></iframe></div>, dans un .split) */
.split > .map-shot { grid-column: 8 / span 5; grid-row: 1; aspect-ratio: 4 / 5; }
.map-shot::after { display: none; }
.map-shot iframe { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(.92) contrast(.83); }
@media (max-width: 899px) { .split > .map-shot { grid-column: 1; grid-row: auto; aspect-ratio: 4 / 3; } }
/* Adresse en deux lignes à côté d'un plan */
.addr { margin: 28px 0 8px; color: var(--text-soft); }
.addr strong { color: var(--text); font-weight: 500; }


/* ==========================================================================
   12 Accueil
   ========================================================================== */
/* Le fil : titre, puis les quatre temps, dans une seule section */
.intro { padding: var(--section) 0 clamp(16px, 2vw, 24px); }
.intro .section-head { max-width: 1000px; }
.intro .section-head h2 { font-size: clamp(2.5rem, 1.5rem + 3.2vw, 4.5rem); }

/* Un temps de l'histoire : une photo, un titre, deux phrases, un lien */
.temps { padding: clamp(20px, 2.4vw, 34px) 0; }
.temps-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); align-items: center; }
.temps .shot { grid-column: 1 / span 6; grid-row: 1; aspect-ratio: 16 / 10; }
.temps .shot.is-club { aspect-ratio: 4 / 3; }
.temps-text { grid-column: 8 / span 5; grid-row: 1; }
.temps.is-reverse .shot { grid-column: 7 / span 6; }
.temps.is-reverse .temps-text { grid-column: 1 / span 5; }
.temps-text .eyebrow { margin: 0 0 20px; color: var(--text-mute); }
.temps-text h3 { font-size: var(--fs-h2-s); letter-spacing: -.035em; margin: 0 0 20px; }
.temps-text p { color: var(--text-soft); margin: 0 0 24px; max-width: 30em; }
@media (max-width: 899px) {
  .temps-grid { grid-template-columns: 1fr; }
  .temps .shot, .temps.is-reverse .shot { grid-column: 1; grid-row: 1; aspect-ratio: 16 / 11; }
  .temps .shot.is-club { aspect-ratio: 6 / 5; }
  .temps-text, .temps.is-reverse .temps-text { grid-column: 1; grid-row: 2; padding-top: 24px; }
}
/* Tablette : photo et texte côte à côte, photo en portrait (la page reste courte).
   Photo sur 5 colonnes, texte sur 7 : le paragraphe justifié garde des espaces réguliers
   (sur 6 colonnes, 334 px en 768, ses mots s'écartaient). */
@media (min-width: 600px) and (max-width: 899px) {
  .temps-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .temps .shot, .temps.is-reverse .shot { grid-row: 1; aspect-ratio: 4 / 5; }
  .temps .shot { grid-column: 1 / span 5; }
  .temps .shot.is-club { aspect-ratio: 882 / 766; }   /* la photo du club entière, sans recadrage */
  .temps-text { grid-column: 6 / span 7; grid-row: 1; padding-top: 0; }
  .temps.is-reverse .shot { grid-column: 8 / span 5; }
  .temps.is-reverse .temps-text { grid-column: 1 / span 7; grid-row: 1; padding-top: 0; }
}
/* Téléphone : photo en bandeau */
@media (max-width: 599px) {
  .temps { padding: 16px 0; }
  .temps .shot, .temps.is-reverse .shot { aspect-ratio: 16 / 9; }
  .temps .shot.is-club { aspect-ratio: 4 / 3; }
  .temps-text, .temps.is-reverse .temps-text { padding-top: 20px; }
}

/* Ambition et chiffres */
.ambition { padding: var(--section) 0; border-top: 1px solid var(--line); }

/* FAQ courte de l'accueil */
.faq-home { padding: var(--section) 0; border-top: 1px solid var(--line); }


/* ==========================================================================
   13 Colonnes et listes entre filets, dates
   ========================================================================== */
/* Colonnes séparées par des filets : <ul class="cols cols-3"><li>...</li></ul> */
.cols { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.cols-2 { --cols: 2; }
.cols-3 { --cols: 3; }
.cols-4 { --cols: 4; }
.cols > * { display: flex; flex-direction: column; padding: 28px 24px 8px 0; }
.cols > * + * { padding-left: 24px; border-left: 1px solid var(--line); }
.cols h3 { font-size: var(--fs-h4); margin: 0 0 10px; }
.cols p { margin: 0 0 14px; color: var(--text-soft); }
.cols .link-arrow { margin-top: auto; align-self: flex-start; font-size: .9375rem; }
/* Un mot de liaison (surtitre) au-dessus du titre d'une colonne : rôle, étape */
.cols .eyebrow { margin-bottom: 14px; color: var(--text-mute); }
/* .is-small : colonnes d'appoint (aides, lieu...) sous un bloc principal */
.cols.is-small h3 { font-size: var(--fs-h5); }
.tarifs + .cols, .prices-note + .cols, .days + .cols, .note + .cols { margin-top: var(--gap-block); }
.cols + .note { margin-top: clamp(32px, 4vw, 48px); }
@media (min-width: 768px) and (max-width: 1023px) {
  .cols-4 { --cols: 2; }
  .cols-4 > :nth-child(odd) { padding-left: 0; border-left: 0; }
  .cols-4 > :nth-child(n + 3) { border-top: 1px solid var(--line); margin-top: 20px; }
}
@media (max-width: 767px) {
  .cols { grid-template-columns: 1fr; }
  .cols > *, .cols > * + * { padding: 20px 0 6px; border-left: 0; }
  .cols > * + * { border-top: 1px solid var(--line); }
}

/* Petits titres (h4, h5) : moins serrés que les grands */
.cols h3, .sub, .cols.is-small h3, .prose h3, .rule-list strong, .famille-list strong { letter-spacing: -.015em; line-height: 1.12; }

/* Liste entre filets : un intitulé, une phrase */
.rule-list, .famille-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
.rule-list > li, .famille-list li { padding: 20px 0; border-top: 1px solid var(--line); color: var(--text-soft); }
/* graisse 400 (comme sur main) : en 300, ces intitulés de 21 à 26 px lisaient moins bien */
.rule-list strong, .famille-list strong { display: block; margin-bottom: 4px; font-weight: 400; font-size: var(--fs-h5); line-height: 1.12; letter-spacing: -.015em; color: var(--text); }
.rule-list.is-small strong { font-size: 1.25rem; font-weight: 500; letter-spacing: -.01em; }
@media (max-width: 599px) { .rule-list > li, .famille-list li { padding: 16px 0; } }

/* Dates (Notre histoire) : la date à gauche, le fait à droite */
.dates { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.dates > li { display: grid; grid-template-columns: minmax(150px, 3fr) 9fr; gap: 4px 32px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--line); }
.dates .date { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.dates p { margin: 0; color: var(--text-soft); }
.dates p strong { color: var(--text); font-weight: 500; }
@media (max-width: 599px) { .dates > li { grid-template-columns: 1fr; padding: 18px 0; } }

/* Canaux (Nos réseaux) : une ligne par canal entre filets, le nom à gauche,
   l'adresse en grand. <ul class="channels"><li><a class="channel" href="...">
   <span class="channel-name">...</span><span class="channel-handle">...</span>
   <i class="fa-solid fa-arrow-right channel-go" aria-hidden="true"></i></a></li></ul> */
.channels { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.channels > li { border-bottom: 1px solid var(--line); }
.channel {
  display: grid; grid-template-columns: minmax(150px, 3fr) 9fr auto; align-items: center; gap: 8px 32px;
  padding: clamp(22px, 2.6vw, 34px) 0; color: var(--text); text-decoration: none;
}
.channel-name { font-size: .8125rem; font-weight: 500; letter-spacing: .16em; line-height: 1.4; text-transform: uppercase; color: var(--text-mute); }
.channel-handle {
  font-weight: 300; font-size: var(--fs-h2-s); line-height: 1.08; letter-spacing: -.035em;
  color: var(--text-soft); overflow-wrap: anywhere; transition: color .2s;
}
.channel-go { font-size: 1rem; color: var(--text-mute); transition: transform .25s var(--ease), color .2s; }
.channel:hover .channel-handle, .channel:focus-visible .channel-handle { color: var(--text); }
@media (hover: hover) and (pointer: fine) {
  .channel:hover .channel-go { transform: translateX(4px); color: var(--text); }
}
@media (max-width: 599px) {
  .channel { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name go" "handle handle"; padding: 20px 0; }
  .channel-name { grid-area: name; }
  .channel-handle { grid-area: handle; font-size: 1.5rem; }
  .channel-go { grid-area: go; }
}


/* ==========================================================================
   14 Pour qui (publics) et en famille (page Les cours)
   ========================================================================== */
.publics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.public { display: flex; flex-direction: column; padding: 32px 24px 8px 0; }
.public + .public { padding-left: 24px; border-left: 1px solid var(--line); }
.public h3 { font-size: var(--fs-h3); margin: 0 0 14px; }
.public .age { margin: 0 0 6px; color: var(--text); font-weight: 500; }
.public .when { margin: 0 0 22px; color: var(--text-soft); }
.public .link-arrow { margin-top: auto; align-self: flex-start; font-size: .9375rem; }
/* 2 x 2 jusqu'à 1365 px : sur quatre colonnes, en dessous de 1366 px (1920 x 1080 zoomé à 150 %
   donne 1280 px), « 100 % Femmes » et certains boutons des cours passaient sur deux lignes */
@media (max-width: 1365px) {
  .publics { grid-template-columns: 1fr 1fr; }
  .public:nth-child(3) { padding-left: 0; border-left: 0; }
  .public:nth-child(n + 3) { border-top: 1px solid var(--line); margin-top: 24px; }
}
@media (max-width: 599px) {
  .publics { grid-template-columns: 1fr; }
  .public, .public + .public { padding: 20px 0 4px; border-left: 0; }
  .public + .public { border-top: 1px solid var(--line); margin-top: 14px; }
  .public h3 { font-size: 2rem; margin-bottom: 8px; }
  .public .when { margin-bottom: 12px; }
}

.famille-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 48px); align-items: center; }
.famille-grid .shot { grid-column: 1 / span 5; aspect-ratio: 4 / 5; }
.famille-grid .shot img { object-position: 50% 60%; filter: grayscale(1) contrast(1.35) brightness(.56); }
.famille-text { grid-column: 7 / span 6; }
.famille-text .section-head { margin-bottom: 32px; }
/* « En famille » placé sous les publics, dans la même section : un h3 à la taille d'un titre */
.publics + .famille-grid { margin-top: var(--gap-block); }
/* Le T initial a une marge optique plus faible que le l de la ligne suivante. */
.famille-text .section-head h3 { text-indent: .035em; font-size: var(--fs-h2-s); letter-spacing: -.035em; margin: 20px 0; }
/* Pages pratiques (planning) : même taille que le titre de sa section, « Une place pour chacun » */
:where(main:has(> .practical-hero)) .famille-text .section-head h3 { font-size: clamp(2rem, 4.4vw, 3.5rem); }
@media (max-width: 899px) {
  .famille-grid { grid-template-columns: 1fr; }
  .famille-grid .shot { grid-column: 1; aspect-ratio: 4 / 3; }
  .famille-grid .shot img { object-position: 40% 55%; }
  .famille-text { grid-column: 1; padding-top: 36px; }
}
@media (max-width: 599px) {
  .famille-grid .shot { aspect-ratio: 16 / 11; }
  .famille-text { padding-top: 28px; }
}

/* Colonnes alignées (pages cours, JJB 92, Impact, Paiement, Planning...) :
   dans une même rangée, titres, paragraphes et liens commencent à la même
   hauteur grâce à une sous-grille ; le lien reste en bas de sa colonne.
   4 = nombre maximal d'enfants directs d'une colonne (titre, deux textes, lien). */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 768px) {
    .cols > *, .publics > .public { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
    .cols > * > .link-arrow, .public > .link-arrow { align-self: end; justify-self: start; }
  }
}


/* ==========================================================================
   15 Chiffres fins : <dl class="stats"><div><dt>Libellé</dt><dd>100+</dd></div>...
   (le chiffre s'affiche au-dessus du libellé). Uniquement des chiffres vérifiés,
   avec leur source en dessous (<p class="source">).
   ========================================================================== */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats > div { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; padding: clamp(28px, 3.4vw, 44px) 16px; text-align: center; }
.stats > div + div { border-left: 1px solid var(--line); }
/* font-variant-numeric gardé pour mémoire : sans effet, la police sous-ensemblée
   n'a ni tnum ni lnum. word-spacing ramène l'espace insécable de « 1 000+ » à une
   espace fine (environ 7 px à 76 px) : resserrée, mais toujours visible. */
.stats dd { order: -1; margin: 0; font-weight: 300; font-size: clamp(2.75rem, 1.5rem + 3.6vw, 4.75rem); line-height: 1; letter-spacing: -.03em; word-spacing: -.08em; color: var(--text); font-variant-numeric: lining-nums; }
.stats dt { max-width: 14em; font-size: .9375rem; line-height: 1.45; color: var(--text-mute); overflow-wrap: anywhere; }
.source { margin: 20px 0 0; text-align: center; font-size: .8125rem; color: var(--text-mute); }
.source.is-left { max-width: 38em; text-align: left; }   /* 38em : 85 caractères au plus */
@media (max-width: 767px) {
  /* minmax(0, 1fr) : avec un espacement de texte agrandi, un libellé ne déborde pas de sa colonne */
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats > div + div { border-left: 0; }
  .stats > div:nth-child(even) { border-left: 1px solid var(--line); }
  .stats > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
}


/* ==========================================================================
   16 Citation : <blockquote class="quote"><p>« ... »</p>
   <footer class="eyebrow has-line">Source</footer></blockquote>
   ========================================================================== */
.quote { max-width: 1000px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }
.quote p { margin: 0; font-weight: 300; font-size: clamp(1.375rem, 1rem + 1.9vw, 2.6rem); line-height: 1.18; letter-spacing: -.03em; color: var(--text); text-wrap: balance; }
.quote footer { margin-top: 26px; flex-direction: column; gap: 16px; }
.quote.is-left { margin-inline: 0; text-align: left; }
.quote.is-left footer { flex-direction: row; }
/* Une phrase centrée sous la citation (valeurs du règlement) */
.quote:has(+ .values) { margin-bottom: clamp(28px, 3.4vw, 44px); }
.values { max-width: 34em; margin: 0 auto; text-align: center; color: var(--text-soft); }
.values strong { color: var(--text); font-weight: 400; }


/* ==========================================================================
   17 Horaires : une ligne par jour, un créneau par ligne
   ========================================================================== */
.days { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.day { display: grid; grid-template-columns: minmax(150px, 3fr) 9fr; gap: 10px 32px; align-items: start; padding: 24px 0; border-bottom: 1px solid var(--line); }
.day-head h3 { font-size: var(--fs-h3); line-height: 1.1; }
.day-note { margin: 4px 0 0; font-size: .9375rem; color: var(--text-soft); }
.slots { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.slot { display: grid; grid-template-columns: minmax(9.5em, 3fr) 4fr 3fr; gap: 4px 24px; align-items: baseline; padding: 8px 0; }
.slot + .slot { border-top: 1px solid var(--line); }
.slot-time { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.slot-name { color: var(--text); }
.slot-age { color: var(--text-mute); font-size: .9375rem; }
.week .where { justify-content: flex-start; margin-top: 28px; }
@media (max-width: 899px) {
  .day { grid-template-columns: minmax(0, 1fr); padding: 22px 0; }
  .day-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; }
  .day-note { margin: 0; }
}
@media (max-width: 599px) {
  .day { padding: 18px 0; }
  .day-head h3 { font-size: 1.75rem; }
}


/* ==========================================================================
   18 Tarifs : <dl class="prices"><div><dt>Kids <small>5 à 9 ans</small></dt>
   <dd>150<span>€</span></dd></div>...</dl>
   ========================================================================== */
.prices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.prices > div { display: flex; flex-direction: column; gap: 12px; padding: clamp(28px, 3.4vw, 44px) 24px; }
.prices > div:first-child { padding-left: 0; }
.prices > div + div { border-left: 1px solid var(--line); }
/* margin-left négatif : le chiffre s'aligne optiquement sur son libellé */
.prices dd { order: -1; margin: 0 0 0 -.06em; font-weight: 300; font-size: clamp(2.75rem, 1.5rem + 3.6vw, 4.75rem); line-height: 1; letter-spacing: -.03em; word-spacing: -.14em; }
.prices dd span { font-size: .5em; letter-spacing: 0; margin-left: .12em; color: var(--text-soft); }
.prices dt { color: var(--text); font-weight: 500; }
.prices dt small { display: block; font-size: .9375rem; font-weight: 400; color: var(--text-mute); }
.prices-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 40px; margin-top: 24px; }
.prices-note p { margin: 0; color: var(--text-soft); max-width: 34em; }
.prices-note p + p { margin-top: 8px; }
.prices-note .links { display: flex; flex-wrap: wrap; gap: 8px 28px; }
/* Deux tarifs (enfants et ados) ou un seul (100 % Femmes), au lieu de quatre */
.prices.is-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.prices.is-solo { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 767px) {
  .prices { grid-template-columns: 1fr 1fr; }
  .prices > div { padding: 26px 16px 26px 0; }
  .prices > div + div { border-left: 0; }
  .prices > div:nth-child(even) { border-left: 1px solid var(--line); padding-left: 20px; }
  .prices > div:nth-child(n + 3) { border-top: 1px solid var(--line); }
}


/* ==========================================================================
   19 Encadrés sobres : un filet à gauche, jamais de fond coloré
   .note            : information (confidentialité, consentement photo...)
   .note.is-key     : point à ne pas manquer (filet jaune)
   Anciens noms repris : .privacy-note, .gal-consent, .aide-important.
   ========================================================================== */
.note, .privacy-note, .gal-consent, .aide-important {
  margin: 24px 0 0; padding: 2px 0 2px 18px;
  border-left: 2px solid var(--line-strong);
  font-size: .9375rem; line-height: 1.6; color: var(--text-soft);
}
.note.is-key, .aide-important { border-left-color: var(--yellow); }
.note > :last-child { margin-bottom: 0; }
.note i, .privacy-note i, .aide-important i { margin-right: 8px; color: var(--text-mute); }
.note strong, .privacy-note strong, .gal-consent strong, .aide-important strong { color: var(--text); font-weight: 500; }
.note a, .privacy-note a, .gal-consent a, .aide-important a { color: var(--text); text-underline-offset: 3px; }
.aide-important { display: flex; gap: 4px; align-items: baseline; }
/* Encadré en pleine largeur : une ligne de lecture raisonnable */
.container > .note, .aside-body > .note { max-width: 36em; }
.prices-note + .note { margin-top: 36px; }

/* Mentions longues sous un formulaire (RGPD, assurance) */
.legal-note { max-width: 760px; margin: 28px auto 0; font-size: .875rem; line-height: 1.6; color: var(--text-mute); }
.legal-note p { margin: 0 0 .8em; }
/* Dès 600 px, les mentions s'alignent sur les champs du formulaire au-dessus
   (même retrait que .form-container) : environ 90 caractères par ligne en 1440 */
@media (min-width: 600px) { .legal-note { padding-inline: calc(clamp(24px, 4vw, 44px) + 1px); } }
.legal-note strong { color: var(--text-soft); font-weight: 500; }
.legal-note a { color: var(--text-soft); }


/* ==========================================================================
   20 Questions fréquentes : accordéons sobres, repliés par défaut
   <div class="faq-list"><details class="faq-item"><summary>Question</summary>
   <div class="faq-body">Réponse</div></details>...</div>
   Si la question figure dans un JSON-LD FAQPage, le texte visible doit être
   IDENTIQUE à celui du JSON-LD. Plus et moins dessinés en CSS.
   ========================================================================== */
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
/* Bloc (et non flex) : un <span class="nowrap"> dans la question reste dans la ligne */
.faq-item summary {
  /* padding et marge négative de 8 px : l'anneau de focus a de l'air, le texte ne bouge pas */
  position: relative; display: block;
  min-height: 58px; padding: 16px 48px 16px 8px; margin-inline: -8px; cursor: pointer; list-style: none;
  font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); font-weight: 400; line-height: 1.35; color: var(--text);
  transition: color .2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
.faq-item summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 14px; margin-top: -7px; opacity: .7;
  background:
    linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat;
  transition: transform .3s var(--ease), opacity .2s;
}
.faq-item[open] summary::after { transform: rotate(45deg); opacity: 1; }
.faq-item summary:hover::after { opacity: 1; }
.faq-item summary:focus-visible { outline-offset: 2px; }
.faq-item[open] summary { padding-bottom: 8px; }
.faq-body { max-width: 36em; padding: 0 40px 24px 0; color: var(--text-soft); }
/* Questions regroupées dans une question dépliable (accueil) : la liste garde toute sa largeur */
.faq-body.faq-list { max-width: none; }
@media (max-width: 599px) { .faq-body { padding-right: 0; } }
.faq-body a { color: var(--text); text-decoration: underline; text-decoration-color: rgba(237, 239, 234, .5); text-underline-offset: 4px; }
.faq-body a:hover { text-decoration-color: var(--text); }
.faq-body strong { color: var(--text); font-weight: 500; }
/* Réponses en plusieurs paragraphes ou avec une liste (aides financières) */
.faq-body p { margin: 0 0 .8em; }
.faq-body ul { margin: 0 0 .8em; padding-left: 1.2em; }
.faq-body li + li { margin-top: .3em; }
.faq-body > :last-child { margin-bottom: 0; }
.faq-group + .faq-group { margin-top: clamp(40px, 5vw, 64px); }
.faq-group h2 { font-size: clamp(1.6rem, 1.3rem + .9vw, 2.1rem); margin: 0 0 18px; }
/* Ouverture douce, seulement si le navigateur sait animer le contenu d'un <details> */
@supports selector(::details-content) {
  .faq-item { interpolate-size: allow-keywords; }
  .faq-item::details-content {
    block-size: 0; overflow: hidden;
    transition: block-size .3s var(--ease), content-visibility .3s allow-discrete;
  }
  .faq-item[open]::details-content { block-size: auto; }
}


/* ==========================================================================
   21 Formulaires sombres et lisibles
   Classes des pages existantes, à garder : .form-container, .form-group,
   .req (astérisque visible), .hint (aide), .form-required-note, .form-check,
   .submit-btn, .privacy-note, .reglement-row, .reglement-link, .legal-note,
   #form-msg et #stage-form-msg. Ne jamais changer name, form_type,
   event_name, l'URL Apps Script ni la logique fetch.
   ========================================================================== */
.form-container, .form-card {
  max-width: 760px; margin-inline: auto;
  padding: clamp(24px, 4vw, 44px);
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: 12px;
}
.form-required-note { margin: 0 0 24px; font-size: .9375rem; color: var(--text-soft); }
/* Titre au-dessus d'un formulaire, formulaire placé sous un bloc de texte */
.section-head:has(+ .form-container) { margin-bottom: clamp(28px, 3vw, 40px); }
.aside-grid + .form-container { margin-top: var(--gap-block); }
/* Formulaire placé juste sous l'ouverture d'une page secondaire (certificat,
   aides, événements) : aligné à gauche, sur le titre de la page */
@media (min-width: 900px) { main > .page-head + .section .form-container { margin-inline: 0; } }
.form-container > .section-head { margin-bottom: 28px; }
.form-container > .section-head h2 { margin-top: 0; }
/* Encadrés dans un formulaire : en tête (.note), ou entre deux champs */
.form-container > .note:first-child { margin: 0 0 28px; }
form .privacy-note { margin: 0 0 24px; }
form .aide-important { margin: -4px 0 24px; }
.form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
/* Champ affiché par un script en display: block (« Précisez votre aide ») : l'écart reste le même */
#autre-group > label { display: block; margin-bottom: 8px; }
.form-group label, .form-label { font-weight: 500; font-size: 1rem; line-height: 1.35; color: var(--text); }
/* Astérisque des champs obligatoires : toujours visible, en jaune */
.req { margin-left: 2px; color: var(--yellow); font-weight: 600; }
/* Pas de largeur maximale : l'aide prend la largeur du champ qu'elle décrit (sinon un ou deux mots restaient seuls) */
.hint { display: block; font-size: .875rem; line-height: 1.5; color: var(--text-soft); }
.hint strong { color: var(--text); font-weight: 500; }

/* :where() garde une spécificité basse : les états (survol, focus, erreur) passent devant */
.form-group input:where(:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"])),
.form-group select,
.form-group textarea,
.form-input,
.input-group input {
  width: 100%; min-height: 52px; padding: 12px 16px;
  background: var(--bg-field); color: var(--text);
  border: 1px solid var(--line-field); border-radius: 10px;
  font-size: 1rem; line-height: 1.4;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.form-group textarea { min-height: 128px; resize: vertical; }
.form-group select {
  appearance: none; -webkit-appearance: none; padding-right: 48px; cursor: pointer;
  /* chevron dessiné en dégradés */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-soft) 50%),
    linear-gradient(135deg, var(--text-soft) 50%, transparent 50%);
  background-position: calc(100% - 24px) 50%, calc(100% - 18px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.form-group select option { background: var(--bg-raised); color: var(--text); }
.form-group input::placeholder, .form-group textarea::placeholder, .input-group input::placeholder { color: var(--text-mute); opacity: 1; }
.form-group input:hover, .form-group select:hover, .form-group textarea:hover, .input-group input:hover { border-color: rgba(237, 239, 234, .6); }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus, .form-input:focus, .input-group input:focus {
  outline: none; border-color: var(--text); box-shadow: 0 0 0 3px rgba(255, 204, 0, .5);
}
/* Saisie automatique du navigateur : garder le fond sombre */
.form-group input:-webkit-autofill, .input-group input:-webkit-autofill {
  -webkit-text-fill-color: var(--text); caret-color: var(--text);
  box-shadow: 0 0 0 100px var(--bg-field) inset; transition: background-color 9999s;
}
/* ... sans perdre le halo de focus ni celui d'erreur (l'ombre intérieure les remplaçait) */
.form-group input:-webkit-autofill:focus, .input-group input:-webkit-autofill:focus {
  box-shadow: 0 0 0 100px var(--bg-field) inset, 0 0 0 3px rgba(255, 204, 0, .5);
}
.form-group input:-webkit-autofill:user-invalid, .input-group input:-webkit-autofill:user-invalid {
  box-shadow: 0 0 0 100px var(--bg-field) inset, 0 0 0 3px rgba(255, 143, 134, .18);
}

/* Champ fichier (certificat médical) */
.form-group input[type="file"] {
  width: 100%; padding: 16px; cursor: pointer;
  background: var(--bg-field); color: var(--text-soft);
  border: 1px dashed var(--line-field); border-radius: 10px; font-size: .9375rem;
}
.form-group input[type="file"]:hover { border-color: rgba(237, 239, 234, .6); }
.form-group input[type="file"]::file-selector-button {
  margin-right: 14px; padding: 9px 18px; border: 0; border-radius: 999px;
  background: var(--text); color: #0A0D0B; font: 500 .9375rem var(--font); cursor: pointer;
}

/* Erreurs : après saisie (:user-invalid) ou posées par un script (aria-invalid) */
.form-group input:user-invalid, .form-group select:user-invalid, .form-group textarea:user-invalid,
.form-group [aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(255, 143, 134, .18); }
.field-error { display: block; font-size: .875rem; font-weight: 500; color: var(--danger); }

/* Cases à cocher (règlement, consentement) */
.form-check { margin-bottom: 18px; }
.form-check label { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 14px; align-items: start; font-size: .9375rem; line-height: 1.55; color: var(--text-soft); cursor: pointer; }
.form-check label strong { color: var(--text); font-weight: 500; }
.form-check input[type="checkbox"], .form-check input[type="radio"] { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--text); cursor: pointer; }
/* Case obligatoire non cochée après un envoi refusé : entourée de rouge */
.form-check input:user-invalid { outline: 2px solid var(--danger); outline-offset: 2px; }
.reglement-row { margin: 6px 0 18px; }
.reglement-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--text); font-weight: 500; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.reglement-link:hover { text-decoration-color: var(--text); }

/* Bouton d'envoi : jaune, pleine largeur (l'action principale de la page) */
.submit-btn {
  display: flex; align-items: center; justify-content: center; gap: .6em; width: 100%;
  min-height: 56px; margin-top: 10px; padding: .9em 1.4em;
  background: var(--yellow); color: var(--yellow-ink);
  border: 0; border-radius: 999px;
  font: 600 1.0625rem/1.2 var(--font); cursor: pointer;
  transition: background-color .2s, transform .2s var(--ease);
}
.submit-btn:hover { background: var(--yellow-hover); }
.submit-btn:disabled { opacity: .7; cursor: progress; }

/* Message après envoi. Le script de chaque page pose display et une couleur
   en ligne (vert foncé #0A6E2E ou rouge #B3261E, pensées pour un fond clair) :
   le message s'affiche donc sur un cartouche clair, où ces couleurs sont
   lisibles (contraste supérieur à 5:1). */
#form-msg, #stage-form-msg, .form-msg {
  --text: #1B211D;                 /* un message écrit en var(--text) reste lisible sur le cartouche clair */
  padding: 14px 18px; border-radius: 10px;
  background: #F2F4EF; border-left: 4px solid currentColor;
  line-height: 1.5; text-align: left !important;
}
#form-msg a, #stage-form-msg a, .form-msg a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
/* Pour du neuf : messages sombres par classe (sans couleur en ligne) */
.form-msg.is-success { color: #0A5A28; }
.form-msg.is-error { color: #9E2219; }


/* ==========================================================================
   22 Appel final (halo vert discret) et cours d'essai
   ========================================================================== */
.halo-section { position: relative; isolation: isolate; overflow: hidden; text-align: center; }
.halo-section::before {
  content: ""; position: absolute; left: 50%; top: 52%; z-index: -1; width: min(1100px, 150vw); aspect-ratio: 2 / 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(14, 143, 60, .2), rgba(14, 143, 60, .06) 55%, rgba(14, 143, 60, 0) 100%);
}
.halo-section h2, .halo-section .halo-title { font-size: var(--fs-h2); line-height: 1; margin: 0 auto 26px; max-width: 12em; }
/* Pages secondaires et pratiques : l'appel final reste sous le h1 (64 px en 1440) */
:where(main:has(> .page-head, > .practical-hero)) .halo-section :is(h2, .halo-title) { font-size: clamp(2.3rem, 1.5rem + 2.8vw, 4rem); }
/* Pages pratiques : même pente que le h1 (voir plus haut), 34 px en 768, 63 en 1440 */
:where(main:has(> .practical-hero)) .halo-section :is(h2, .halo-title) { font-size: clamp(2.125rem, 4.4vw, 4rem); }
.halo-section p { max-width: 32em; margin: 0 auto 36px; font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); font-weight: 300; color: var(--text-soft); }
.halo-section p:not(.is-justified) { text-wrap: balance; }
.halo-section .actions { justify-content: center; }
.final { padding: var(--section) 0; }

/* Adresse et accès, en ligne */
.where { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin: 36px 0 0; padding: 0; list-style: none; font-size: .9375rem; color: var(--text-mute); }
.where li { display: block; }
.where i { margin-right: 10px; color: var(--text-soft); font-size: .9em; }
.where.is-left { justify-content: flex-start; }
/* zone de toucher de 44 px sans changer la hauteur de la ligne */
.where a { display: inline-block; padding-block: 13px; margin-block: -13px; color: var(--text-soft); text-decoration: underline; text-decoration-color: rgba(237, 239, 234, .5); text-underline-offset: 4px; }
.where a:hover { color: var(--text); text-decoration-color: var(--text); }

/* Des boutons sous un chapeau ou une liste, dans la colonne de droite */
.aside-body > * + .actions { margin-top: 28px; align-items: center; }

/* Petite mention sous une action (paiement sécurisé, contact) */
.fine-print { margin: 14px 0 0; font-size: .875rem; color: var(--text-mute); }
.fine-print i { margin-right: 8px; }

.essai { padding: var(--section) 0; border-top: 1px solid var(--line); }
/* .is-inline : le cours d'essai placé à la fin d'une section (page Les cours) */
.essai.is-inline { margin-top: var(--section); padding-bottom: 0; }
.essai .more { margin: 26px auto 0; font-size: .9375rem; font-weight: 400; color: var(--text-mute); }
.essai .more a { color: var(--text-soft); text-underline-offset: 4px; }
.essai .more a:hover { color: var(--text); }
/* Petit titre (« Pour votre premier cours ») : se lit comme un titre, sans couleur d'accent,
   et reste près de sa liste */
.essai h4.more { color: var(--text-soft); font-weight: 500; }
.essai h4.more + .where { margin-top: 12px; }
/* Sur téléphone, le texte fin (300) passe en 400 : plus lisible en petit */
@media (max-width: 599px) {
  .lead, .section-head p, .halo-section p { font-weight: 400; }
  /* Paragraphe justifié : un interlettrage à peine resserré compense la graisse 400. Les
     lignes se coupent comme en 300 (sur main), les espaces entre les mots restent réguliers. */
  :is(.lead, .section-head p, .halo-section p).is-justified { letter-spacing: -.01em; }
}


/* ==========================================================================
   24 Pied de page sobre : les pages secondaires vivent ici
   ========================================================================== */
.site-footer { border-top: 1px solid var(--line); padding: clamp(56px, 6vw, 88px) 0 32px; font-size: .9375rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr) 1.4fr; gap: 40px 32px; }
.f-brand .brand { margin-bottom: 18px; }
.f-brand p { color: var(--text-mute); max-width: 22em; margin: 0 0 10px; }
.f-brand address { color: var(--text-soft); }
.f-title { margin: 0 0 14px; font-size: .75rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--text-mute); line-height: 1.4; }
/* minmax(0, 1fr) et overflow-wrap : avec un espacement de texte agrandi (WCAG 1.4.12),
   l'adresse e-mail et le compte Instagram passent à la ligne au lieu de déborder */
.f-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.f-list a { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; max-width: 100%; overflow-wrap: anywhere; color: var(--text-soft); text-decoration: none; transition: color .2s; }
.f-list a:hover { color: var(--text); }
.f-list i { width: 1em; font-size: .9em; color: var(--text-mute); }
/* Pages secondaires : leur lien du pied de page est marqué aria-current="page" */
.f-list a[aria-current="page"] { color: var(--text); }
/* Lettre d'information (uniquement sur les pages qui avaient déjà ce formulaire) */
.f-newsletter {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; row-gap: 16px; align-items: end;
  margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line);
}
.f-newsletter-text { grid-column: 1 / span 5; }
.f-newsletter-text .f-title { margin-bottom: 8px; }
.f-newsletter-text p { margin: 0; color: var(--text-mute); }
.f-newsletter form { grid-column: 7 / span 6; }
.f-newsletter label { display: block; margin-bottom: 8px; font-size: .875rem; font-weight: 500; color: var(--text-soft); }
/* Message après inscription (p.hint dans role="status") : détaché du champ, sans marge basse */
.f-newsletter form .hint, .popup-content form .hint { margin: 10px 0 0; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 32px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); font-size: .8125rem; color: var(--text-mute); }
.footer-bottom p { margin: 0; }
.f-newsletter + .footer-bottom { margin-top: 32px; }
@media (max-width: 1099px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr) 1.4fr; }
  .f-brand { grid-column: 1 / -1; }
}
@media (max-width: 899px) {
  .f-newsletter { grid-template-columns: minmax(0, 1fr); }
  .f-newsletter-text, .f-newsletter form { grid-column: 1; }
}
@media (max-width: 699px) {
  .site-footer { padding-top: 48px; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .footer-grid > :last-child { grid-column: 1 / -1; }
  .f-brand .brand { margin-bottom: 12px; }
  .f-newsletter { margin-top: 32px; padding-top: 24px; }
  .footer-bottom { margin-top: 32px; }
  .section-head h2 { margin: 16px 0; }
  /* Le surtitre (en minuscules, sans interlettrage) garde le même rendu que sur ordinateur */
}
/* Sous 360 px, la marge droite laisse la place au bouton flottant du chatbot, en bas à droite */
@media (max-width: 359px) { .footer-bottom { padding-right: 60px; } }
/* Dès 375 px, le contact tient dans la grille à deux colonnes (l'e-mail se coupe après le @) */
@media (min-width: 375px) and (max-width: 699px) {
  .footer-grid > :last-child { grid-column: auto; }
}


/* ==========================================================================
   25 Galerie et visionneuse
   Classes produites par tools/galerie.py (ne pas les renommer) : .gal-filters,
   .gal-chip, .gal-grid, .gal-item, .gal-open, .gal-empty ; visionneuse
   <dialog class="gal-lightbox"> : .gal-lb-inner, .gal-lb-figure, .gal-lb-btn,
   .gal-lb-close, .gal-lb-prev, .gal-lb-next, .gal-lb-count.
   Ce sont de vraies photos du club : couleurs adoucies, pas de noir et blanc.
   ========================================================================== */
.gal-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.gal-filters:empty { display: none; }
.gal-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px;
  border-radius: 999px; border: 1px solid var(--line-strong); background: transparent;
  color: var(--text-soft); font-size: .9375rem; font-weight: 500; transition: color .2s, border-color .2s, background-color .2s, transform .2s var(--ease);
}
.gal-chip span { font-weight: 400; color: var(--text-mute); }
.gal-chip:hover { color: var(--text); border-color: rgba(237, 239, 234, .6); }
.gal-chip[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: #0A0D0B; }
.gal-chip[aria-pressed="true"] span { color: #3B403C; }
.gal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); }
@media (max-width: 899px) { .gal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .gal-grid { grid-template-columns: 1fr; } }
.gal-item { margin: 0; }
.gal-open { display: block; width: 100%; padding: 0; border: 0; border-radius: var(--radius); overflow: hidden; background: var(--bg-raised); cursor: zoom-in; }
.gal-open img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(.7) brightness(.9); transition: filter .4s, transform .6s var(--ease); }
.gal-open:focus-visible img { filter: none; transform: scale(1.02); }
@media (hover: hover) and (pointer: fine) {
  .gal-open:hover img { filter: none; transform: scale(1.02); }
}
.gal-item figcaption { padding: 12px 0 0; font-size: .9375rem; line-height: 1.4; color: var(--text-soft); }
.gal-empty { margin: 28px 0 0; color: var(--text-mute); }
/* Page Galerie : la grille occupe la colonne de droite (.photos-body), deux
   photos par ligne ; une seule en grand tant que la galerie n'a qu'une photo
   (jamais plus large que la vignette de 800 px) */
@media (min-width: 900px) {
  .photos-body .gal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.photos-body .gal-grid:has(> .gal-item:only-child) { grid-template-columns: minmax(0, 800px); }
.photos-body .gal-empty { margin-top: 20px; }
.photos-body .gal-consent { margin-top: 28px; max-width: 36em; }

/* Les moments partagés : la vidéo du club (portrait) à gauche, le titre puis
   les dates à droite ; sur mobile, titre, vidéo, dates */
.moments-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr;
  column-gap: clamp(24px, 3vw, 48px); align-items: start;
}
.moments-head { grid-column: 7 / span 6; grid-row: 1; margin-bottom: 32px; }
.moments-dates { grid-column: 7 / span 6; grid-row: 2; }
/* .clip : une vidéo portrait, sa légende dessous */
.clip { position: relative; grid-column: 1 / span 5; grid-row: 1 / span 2; justify-self: center; width: 100%; max-width: 380px; margin: 0; }
.clip video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: var(--radius); background: var(--bg-raised); }
.clip figcaption { margin-top: 12px; }
/* Bouton de lecture posé par site.js sur l'affiche (la barre native revient au clic).
   Toute l'affiche est cliquable ; le rond de 64 px est dessiné en ::before. */
.clip-play {
  position: absolute; top: 0; left: 0; z-index: 1; width: 100%; aspect-ratio: 9 / 16;
  display: grid; place-items: center; padding: 0; border: 0; border-radius: var(--radius);
  background: transparent; color: var(--text); font-size: 1.125rem;
}
.clip-play::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px;
  border-radius: 50%; border: 1px solid var(--line-strong); background: rgba(10, 13, 11, .55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: border-color .2s, background-color .2s, transform .2s var(--ease);
}
.clip-play i { position: relative; margin-left: 3px; }   /* triangle centré à l'œil */
.clip-play:focus-visible { outline-offset: -2px; }
@media (hover: hover) and (pointer: fine) {
  .clip-play:hover::before { border-color: var(--text); background: rgba(10, 13, 11, .7); }
}
.clip-play:active::before { transform: scale(.97); transition-duration: .08s; }
@media (max-width: 899px) {
  .moments-grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .moments-head, .moments-dates, .clip { grid-column: 1; grid-row: auto; }
  .clip { justify-self: start; max-width: 320px; margin-bottom: 36px; }
}

.gal-lightbox {
  width: min(96vw, 1100px); max-width: none; max-height: 94vh; padding: 0; border: 1px solid var(--line);
  border-radius: 12px; background: var(--bg); color: var(--text);
}
.gal-lightbox::backdrop { background: rgba(5, 7, 6, .9); }
.gal-lightbox[open] { animation: lbIn .25s var(--ease); }
@keyframes lbIn { from { opacity: 0; transform: scale(.985); } }
.gal-lb-inner { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 60px 14px 18px; }
/* Colonnes fixées : la photo reste au centre même quand Précédent et Suivant
   sont masqués (une seule photo) */
.gal-lb-prev { grid-column: 1; }
.gal-lb-figure { grid-column: 2; margin: 0; text-align: center; }
.gal-lb-next { grid-column: 3; }
/* width/height posés par le script : la photo n'est jamais agrandie au-delà de sa taille réelle */
.gal-lb-figure img { width: auto; height: auto; max-width: 100%; max-height: 74vh; margin-inline: auto; border-radius: 4px; }
.gal-lb-figure figcaption { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-top: 14px; font-size: .9375rem; color: var(--text-soft); }
.gal-lb-count { color: var(--text-mute); font-variant-numeric: tabular-nums; }
.gal-lb-btn {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line-strong); background: rgba(237, 239, 234, .04); color: var(--text);
  transition: border-color .2s, background-color .2s, transform .2s var(--ease);
}
.gal-lb-btn:hover { border-color: var(--text); background: rgba(237, 239, 234, .1); }
.gal-lb-close { position: absolute; top: 10px; right: 10px; }
body.gal-locked { overflow: hidden; }
@media (max-width: 599px) {
  .gal-lb-inner { grid-template-columns: 1fr 1fr; padding: 60px 10px 14px; }
  .gal-lb-figure { grid-column: 1 / -1; grid-row: 1; }
  .gal-lb-prev { grid-row: 2; justify-self: end; }
  .gal-lb-next { grid-column: 2; grid-row: 2; justify-self: start; }
}


/* ==========================================================================
   26 Fenêtre newsletter et chatbot
   Balisage : la fenêtre newsletter est dans la page (#newsletter-overlay,
   .popup-content, ids et champs inchangés) ; le chatbot est créé par
   script.js sur toutes les pages (#lc-chatbot). script.js pose .visible
   (fenêtre) et .open (chatbot) : seuls les styles changent ici.
   ========================================================================== */
#newsletter-overlay {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(5, 7, 6, .72);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
/* Fermée : ni visible, ni tabulable, ni lue (sinon aria-modal enfermerait
   l'utilisateur dans une fenêtre invisible) */
#newsletter-overlay:not(.visible) { visibility: hidden; }
#newsletter-overlay.visible { opacity: 1; pointer-events: auto; visibility: visible; transition: opacity .35s ease, visibility 0s; }
.popup-content {
  position: relative; width: 100%; max-width: 460px;
  padding: clamp(28px, 5vw, 40px);
  background: var(--bg-raised); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: 14px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8);
  transform: translateY(14px); transition: transform .35s var(--ease);
}
#newsletter-overlay.visible .popup-content { transform: none; }
.popup-badge { margin: 0 0 16px; font-size: .75rem; font-weight: 500; letter-spacing: .16em; line-height: 1.4; text-transform: uppercase; color: var(--text-mute); }
.popup-content h3 { margin: 0 0 12px; padding-right: 40px; font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.4rem); line-height: 1.05; }
.popup-content p { margin: 0 0 22px; color: var(--text-soft); }
.popup-label { display: block; margin-bottom: 8px; font-size: .9375rem; font-weight: 500; color: var(--text); }
.close-btn {
  position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center; border-radius: 50%;
  border: 1px solid var(--line-strong); background: transparent; color: var(--text);
  transition: border-color .2s, background-color .2s, transform .2s var(--ease);
}
.close-btn:hover { border-color: var(--text); background: rgba(237, 239, 234, .06); }

/* Champ + bouton, en ligne (fenêtre et pied de page) */
.input-group { display: flex; gap: 8px; }
.input-group input { flex: 1; min-width: 0; min-height: 48px; border-radius: 999px; padding: 10px 18px; }
.btn-popup {
  flex: none; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 0;
  background: var(--yellow); color: var(--yellow-ink); font-weight: 600; white-space: nowrap;
  transition: background-color .2s, transform .2s var(--ease);
}
.btn-popup:hover { background: var(--yellow-hover); }
.btn-popup:disabled { opacity: .7; cursor: progress; }
/* Dans le pied de page, le bouton reste discret : le jaune est pour l'action principale */
.site-footer .btn-popup { background: var(--text); color: #0A0D0B; }
.site-footer .btn-popup:hover { background: #FFFFFF; }
@media (max-width: 379px) {
  .popup-content .input-group { flex-direction: column; }
  .popup-content .btn-popup { width: 100%; }
}

/* Chatbot */
#lc-chatbot { position: fixed; right: 20px; bottom: 20px; z-index: 90; font-family: var(--font); }
#lc-chatbot-trigger {
  width: 54px; height: 54px; padding: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(17, 22, 18, .86); color: var(--text);
  border: 1px solid var(--line-strong); font-size: 1.2rem;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .8);
  transition: transform .25s var(--ease), border-color .2s, background-color .2s;
}
#lc-chatbot-trigger:hover { border-color: var(--text); background: rgba(31, 38, 33, .92); }
#lc-chatbot-window {
  position: absolute; right: 0; bottom: 70px; width: 360px; height: 500px; max-height: calc(100vh - 110px);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg-raised); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: 14px;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .85);
  opacity: 0; pointer-events: none; transform: translateY(14px);
  transition: opacity .3s ease, transform .3s var(--ease), visibility 0s linear .3s;
}
#lc-chatbot-window:not(.open) { visibility: hidden; }
#lc-chatbot-window.open { opacity: 1; pointer-events: auto; transform: none; visibility: visible; transition: opacity .3s ease, transform .3s var(--ease), visibility 0s; }
.lc-chatbot-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 14px 14px 20px; border-bottom: 1px solid var(--line); }
/* Titre de la fenêtre : un h2 (hiérarchie des titres), même rendu que l'ancien h4 */
.lc-chatbot-header :is(h2, h4) { margin: 0; font-size: 1rem; font-weight: 500; line-height: 1.3; letter-spacing: 0; text-wrap: wrap; color: var(--text); }
#lc-chatbot-close {
  position: relative; flex: none; width: 40px; height: 40px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line-strong); background: transparent; color: var(--text);
  transition: border-color .2s, background-color .2s;
}
/* La croix est dessinée en CSS (aucun caractère dans le bouton) */
#lc-chatbot-close::before, #lc-chatbot-close::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; margin: -.75px 0 0 -7px;
  background: currentColor; border-radius: 1px; transform: rotate(45deg);
}
#lc-chatbot-close::after { transform: rotate(-45deg); }
#lc-chatbot-close:hover { border-color: var(--text); background: rgba(237, 239, 234, .06); }
.lc-chatbot-body { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: 18px; overflow-y: auto; }
.lc-msg { max-width: 88%; padding: 11px 15px; border-radius: 14px; font-size: .9375rem; line-height: 1.55; overflow-wrap: anywhere; animation: lc-msg-in .3s ease forwards; }
@keyframes lc-msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.lc-msg-bot { align-self: flex-start; background: rgba(237, 239, 234, .06); border: 1px solid var(--line); border-bottom-left-radius: 4px; color: var(--text); }
.lc-msg-bot b { font-weight: 600; }
.lc-msg-bot a { color: var(--text) !important; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.lc-msg-user { align-self: flex-end; background: var(--text); color: #0A0D0B; border-bottom-right-radius: 4px; }
.lc-chat-options { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; transition: opacity .2s; }
.lc-option-btn {
  min-height: 44px; padding: 9px 16px; text-align: left; border-radius: 999px;
  background: transparent; border: 1px solid var(--line-strong); color: var(--text);
  font-size: .9375rem; font-weight: 400; transition: border-color .2s, background-color .2s, transform .2s var(--ease);
}
.lc-option-btn:hover { border-color: var(--text); background: rgba(237, 239, 234, .06); }
@media (max-width: 767px) {
  /* plus petit et plus près du bord : il masque moins le contenu */
  #lc-chatbot { right: 12px; bottom: 12px; }
  #lc-chatbot-trigger {
    width: 48px; height: 48px; font-size: 1.1rem;
    transition: transform .25s var(--ease), border-color .2s, background-color .2s, opacity .2s, visibility .2s;
  }
  /* Pendant la saisie dans un formulaire, le bouton s'efface (il masquait les champs) */
  html:has(:is(.form-group, .input-group, .form-check) :focus) #lc-chatbot-trigger {
    opacity: 0; visibility: hidden; pointer-events: none;
  }
  #lc-chatbot-window { position: fixed; left: 0; right: 0; bottom: 0; width: 100%; height: 80vh; max-height: none; border-radius: 16px 16px 0 0; border-bottom: 0; }
}


/* ==========================================================================
   Retour au toucher (avant la section 27) : un bouton s'enfonce légèrement,
   un lien s'atténue. Jamais sur #lc-chatbot-trigger (script.js lui pose un
   transform en ligne).
   ========================================================================== */
.btn:active, .submit-btn:not(:disabled):active, .btn-popup:not(:disabled):active,
.gal-chip:active, .lc-option-btn:active, .menu-btn:active, .mo-close:active,
.gal-lb-btn:active, .close-btn:active { transform: scale(.97); transition-duration: .08s; }
.link-arrow:active, .f-list a:active, .mo-links a:active,
.channel:active, .faq-item summary:active { opacity: .7; }


/* ==========================================================================
   27 Apparitions au défilement, mouvement réduit, impression
   .reveal n'est masqué que si la classe "js" est posée sur <html> par le
   petit script du <head> : sans JavaScript, tout est visible, sans flash.
   Le même script retire "js" si site.js n'a pas chargé au bout de 3 s.
   ========================================================================== */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
/* Blocs déjà dans le premier écran au chargement : affichés sans fondu (site.js) */
.js .reveal.is-instant { transition: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .hero-media img { transform: none; animation: none; }
  .js .reveal { opacity: 1; transform: none; }
  .faq-item::details-content { transition: none; }
  .menu-overlay, .gal-lightbox[open] { transition: none; animation: none; }
}

@media print {
  .site-header, .menu-overlay, .skip-link, #lc-chatbot, #newsletter-overlay { display: none !important; }
  body { background: #fff; color: #000; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  .hero { min-height: 0; }
  .hero-media, .hero::before, .hero::after { display: none; }
  .hero-content { padding: 0; }
}


/* ==========================================================================
   28 Utilitaires
   ========================================================================== */
.text-center { text-align: center; }
/* Garde ensemble le dernier mot et la ponctuation (« ? », « : ») d'un texte
   repris à l'identique dans un JSON-LD, où l'espace insécable n'est pas permise */
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
@media (max-width: 639px) { .hide-mobile { display: none !important; } }
@media (min-width: 640px) { .only-mobile { display: none !important; } }

/* Accès pratiques : même palette, mêmes filets, actions faciles à trouver. */
.mo-secondary { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 24px; }
.mo-secondary a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-soft); font-size: 1rem; text-underline-offset: 5px; }
.mo-secondary a[aria-current="page"], .mo-secondary a[aria-current="true"] { color: var(--text); }
.mobile-shortcuts { display: none; }
.task-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-block: 1px solid var(--line); }
.task-links li + li { border-left: 1px solid var(--line); }
.task-links a { display: flex; height: 100%; flex-direction: column; align-items: flex-start; padding: 28px; text-decoration: none; transition: background-color .2s; }
.task-links a:hover { background: rgba(237, 239, 234, .04); }
.task-number { font-size: 1rem; color: var(--text-mute); margin-bottom: 32px; }
.task-links h3 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.15; margin-bottom: 14px; }
.task-links p { color: var(--text-soft); margin-bottom: 24px; }
.task-links .link-arrow { margin-top: auto; }
.practical-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 24px; color: var(--text-soft); }
.practical-note p { margin: 0; }
.home-story { padding-top: 0; }
.home-story .temps { padding-top: 16px; }
.home-story h2 { font-size: clamp(2.25rem, 1.4rem + 2.3vw, 3.5rem); margin-bottom: 20px; }
.practical-hero.page-hero { min-height: 0; }
.practical-hero .hero-content { padding: calc(var(--header-h) + 44px) var(--gutter) 36px; }
.practical-hero h1 { font-size: clamp(2.5rem, 5vw, 4.5rem); margin: 16px 0 20px; }
.practical-hero .lead { max-width: 38em; margin-bottom: 20px; }
.practical-hero .photo-note { display: none; }
.practical-hero .jump { gap: 8px 16px; }
.practical-hero .jump a { padding: 8px 16px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--text); font-size: 1rem; }
.week { padding-top: 36px; }
.week .section-head { margin-bottom: 24px; }
.week .section-head h2 { font-size: clamp(2rem, 4vw, 3rem); }
.schedule-filters { display: flex; flex-wrap: wrap; gap: 10px; }
/* text-wrap: balance : un libellé sur deux lignes (téléphone) donne « Adultes · » puis
   « 16 ans et + », jamais un « + » seul */
.schedule-filters button { min-height: 48px; padding: 10px 18px; border: 1px solid var(--line-strong); border-radius: 999px; background: transparent; font-size: 1rem; line-height: 1.3; text-wrap: balance; }
.schedule-filters button[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.schedule-filters button:hover { border-color: var(--text); }
.schedule-status { color: var(--text-soft); margin: 18px 0; }
.schedule-actions { margin-top: 28px; }
.slot-time { font-size: 1.25rem; letter-spacing: -.02em; }
.slot { grid-template-columns: minmax(11em, 3fr) 4fr 3fr; }
.slot-name { font-size: 1.125rem; }
.slot-age { font-size: 1rem; }
.registration-steps { padding-block: 28px; }
.registration-steps > .container > h2 { font-size: 1.75rem; margin-bottom: 24px; }
.registration-path { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; list-style: none; padding: 0; margin: 0; }
.registration-path a { display: flex; align-items: flex-start; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); text-decoration: none; }
.registration-path .task-number { margin: 0; padding-top: 3px; }
.registration-path strong { display: block; font-size: 1.125rem; font-weight: 500; }
.registration-path a > span > span { display: block; color: var(--text-soft); font-size: 1rem; }
.registration-path a:hover strong { text-decoration: underline; text-underline-offset: 5px; }
.registration-steps .section-head { margin-bottom: 24px; }
.registration-steps .section-head h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); margin: 12px 0; }
.registration-steps .cols h3 { font-size: 1.5rem; }
.registration-steps .cols > li { padding-block: 20px; }
.writing-loop { display: inline-block; position: relative; text-wrap: initial; }
.is-writing .write-reserve { color: transparent; }
.write-reserve { display: grid; }
.write-reserve > span { grid-area: 1 / 1; }
.write-ink { position: absolute; inset: 0; text-wrap: initial; }
.write-ink::after { content: ""; display: inline-block; width: 2px; height: .8em; margin-left: 4px; background: var(--yellow); }

/* Les actions doivent se repérer sans chercher un petit lien souligné. */
.btn { min-height: 54px; font-size: 1.0625rem; }
a.link-arrow, .cols a.link-arrow, .public a.link-arrow, .task-links .link-arrow {
  min-height: 56px; padding: 14px 22px; border: 1px solid var(--line-strong);
  border-radius: 999px; background: var(--bg-raised); font-size: 1.0625rem;
  line-height: 1.35; text-align: left;
}
a.link-arrow:hover { background: rgba(237, 239, 234, .08); border-color: var(--text); }
/* Texte justifié : seulement sur une ligne assez longue (environ 45 caractères ou plus). Plus
   court, la justification ouvre de grands blancs entre les mots : le texte s'aligne alors à
   gauche, sans césure. Un lien n'est jamais coupé par un trait d'union (« lacon-nexionasso@gmail.com »
   semblerait contenir un tiret) ; une adresse trop longue passe à la ligne, sans tiret. */
.is-justified { text-align: justify; text-align-last: start; text-wrap: wrap; hyphens: auto; overflow-wrap: anywhere; }
.is-justified a { hyphens: manual; }
/* Colonnes dont la largeur varie avec l'écran : la règle @container ci-dessous mesure la colonne */
.split-text, .temps-text, .story-copy, .famille-text, .aside-body { container-type: inline-size; }
/* Colonnes toujours étroites (pied de page, colonnes entre filets, raccourcis, titre à gauche, dates),
   et paragraphes qui contiennent une adresse e-mail : l'adresse, longue et insécable, passe
   entière à la ligne et laisserait une ligne justifiée pleine de blancs. */
:is(.site-footer, .cols, .task-links, .aside-head, .dates) .is-justified,
.is-justified:has(a[href^="mailto:"]) { text-align: start; hyphens: manual; text-wrap: pretty; }
/* 30em (510 px) : le paragraphe, souvent plus étroit que sa colonne ou écrit plus gros
   (19 px), y garde moins de 45 à 50 caractères par ligne */
@container (width < 30em) {
  .is-justified { text-align: start; hyphens: manual; text-wrap: pretty; }
}
/* Téléphone : toutes les colonnes font moins de 45 caractères (34 en 375 px) */
@media (max-width: 599px) {
  .is-justified { text-align: start; hyphens: manual; text-wrap: pretty; }
}
/* Blocs centrés (ouverture de l'accueil et des pages pratiques, appels finaux, 404) : un paragraphe
   non justifié y reste centré, comme son titre et ses boutons. text-align-last: auto, sinon la
   dernière ligne reste à gauche (text-align-last: start de .is-justified). */
:is(.hero, .halo-section, .page-head.center) .is-justified:has(a[href^="mailto:"]) { text-align: center; text-align-last: auto; }
@media (max-width: 599px) {
  :is(.hero, .halo-section, .page-head.center) .is-justified { text-align: center; text-align-last: auto; }
}

@media (max-width: 1279px) {
  body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  html { scroll-padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
  /* Quatre raccourcis, puis une cinquième case de 56 px où se pose le bouton du chatbot : il ne
     flotte plus au-dessus du contenu (filtres du planning, champs, pied de page).
     1fr et non minmax(0, 1fr) : un mot long (« financières ») élargit un peu sa colonne au lieu
     de déborder sur la voisine. */
  .mobile-shortcuts { display: grid; grid-template-columns: repeat(4, 1fr) 56px; position: fixed; inset: auto 0 0; z-index: 45; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-strong); background: var(--bg); }
  .mobile-shortcuts a { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 54px; padding: 4px 2px; font-size: .875rem; font-weight: 500; line-height: 1.25; text-align: center; text-decoration: none; border-radius: 6px; }
  .mobile-shortcuts a[aria-current="page"] { color: var(--text); box-shadow: inset 0 3px var(--text-soft); background: var(--bg-raised); }
  /* Le bouton, centré dans la cinquième case (8 px de marge de barre + 56 px de case) */
  #lc-chatbot { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); }
  #lc-chatbot-trigger { width: 48px; height: 48px; font-size: 1.1rem; box-shadow: none; }
}
/* Moins de 375 px : libellés en 13 px, « Inscription » et « financières » gardent de l'air
   autour d'eux (en 14 px, ils touchaient les bords de leur colonne) */
@media (max-width: 374px) {
  .mobile-shortcuts a { font-size: .8125rem; }
}
/* Moins de 360 px : quatre libellés et le bouton ne tiennent pas sur une ligne (« Inscription »
   et « financières » ne se coupent pas). La barre garde quatre colonnes et le bouton flotte
   au-dessus d'elle, comme avant. */
@media (max-width: 359px) {
  .mobile-shortcuts { grid-template-columns: repeat(4, 1fr); }
  #lc-chatbot { bottom: calc(90px + env(safe-area-inset-bottom)); }
  #lc-chatbot-trigger { box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .8); }
}
@media (max-width: 899px) {
  .registration-path { grid-template-columns: 1fr; gap: 0; }
  .task-links { grid-template-columns: 1fr; }
  .task-links li + li { border-left: 0; border-top: 1px solid var(--line); }
  .task-links a { padding: 24px 0; }
  .task-number { margin-bottom: 10px; }
  .task-links h3 { font-size: 1.75rem; }
  .task-links p { margin-bottom: 12px; }
  /* Créneau en deux lignes : l'horaire et le cours, puis l'âge. Un cours qui ne tient pas
     à côté de l'horaire (320 px) passe entier à la ligne : ses mots ne sont jamais coupés. */
  .slot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; }
  .slot-age { flex: 1 0 100%; }
  /* La fenêtre s'arrête sous l'en-tête fixe (bouton Menu visible) : 76 px de barre en dessous
     (88 px entre 768 et 899 px, où elle se pose 12 px plus haut, sur le bouton). */
  #lc-chatbot-window { bottom: calc(76px + env(safe-area-inset-bottom)); height: min(calc(100svh - var(--header-h) - 88px - 2 * env(safe-area-inset-bottom)), 540px); }
}
@media (max-width: 599px) {
  a.link-arrow { max-width: 100%; }
  .hero:not(.page-hero) { min-height: 0; }
  .hero:not(.page-hero) .hero-content { padding-top: calc(var(--header-h) + 52px); padding-bottom: 56px; }
  .hero .actions .btn { width: 100%; min-height: 52px; }
  .practical-hero .jump, .practical-hero nav:has(> .jump) { display: flex; justify-content: center; }
  .practical-hero .lead { margin-bottom: 20px; }
  .practical-hero .hero-content { padding-top: calc(var(--header-h) + 24px); padding-bottom: 28px; }
  .practical-hero .jump a { padding-inline: 12px; }
  .schedule-filters { gap: 8px; }
  .schedule-filters button { flex: 1 1 calc(50% - 8px); padding-inline: 8px; }
  .schedule-filters button:first-child { flex-basis: 100%; }
  .week .section-head h2 { font-size: 2rem; }
  .registration-steps .cols { gap: 0; }
  .registration-steps .cols h3 { font-size: 1.35rem; }
  .registration-steps .cols p:not(.eyebrow) { margin-bottom: 8px; }
}
@media print {
  body { padding-bottom: 0; }
  .mobile-shortcuts, .schedule-filters, .schedule-actions { display: none !important; }
}

/* Horaires et cotisations : un repère commun par public, toujours nommé. */
[data-courses~="enfants"], [data-course="enfants"], [data-category="enfants"] { --category: #E8C35F; --category-bg: #E8C35F12; }
[data-courses~="ados"], [data-course="ados"], [data-category="ados"] { --category: #76C8E8; --category-bg: #76C8E812; }
[data-courses~="adultes"], [data-course="adultes"], [data-category="adultes"] { --category: #95D4A5; --category-bg: #95D4A512; }
[data-courses~="femmes"], [data-course="femmes"], [data-category="femmes"] { --category: #C7ADF1; --category-bg: #C7ADF112; }
.schedule-filters button:not([data-course="tous"]) { color: var(--category); border-color: var(--category); background: var(--category-bg); }
.schedule-filters button:not([data-course="tous"])[aria-pressed="true"] { color: var(--bg); background: var(--category); }
.slots { gap: 12px; }
.slot { padding: 16px 20px; background: var(--category-bg); border: 1px solid var(--line); border-left: 4px solid var(--category); border-radius: 6px; }
.slot-time { font-size: clamp(1.375rem, 1rem + .65vw, 1.625rem); color: var(--category); white-space: nowrap; }
.slot-name { font-weight: 500; }
.slot[data-courses="enfants ados"] { --category: #E8C35F; background: linear-gradient(110deg, #E8C35F12, #76C8E812); border-right: 4px solid #76C8E8; }
.slot[data-courses="enfants ados"] .slot-name { color: var(--text); }
.prices { gap: 16px; border: 0; }
.prices > div.fee-category { padding: 28px 24px; border: 1px solid var(--line); border-top: 4px solid var(--category); border-radius: 6px; background: var(--category-bg); }
.fee-category dd { color: var(--category); }
.fee-category dt { font-size: 1.125rem; }
.fee-category dt small { margin-top: 4px; font-size: 1rem; }
.aid-banner { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 24px 0; padding: 24px; border: 1px solid #95D4A550; border-left: 4px solid #95D4A5; border-radius: 6px; background: #95D4A50C; text-decoration: none; }
.aid-banner strong { display: block; margin-bottom: 8px; color: #95D4A5; font-size: clamp(1.25rem, 1rem + .5vw, 1.5rem); font-weight: 500; line-height: 1.3; }
.aid-banner > span > span { color: var(--text-soft); }
.aid-banner-action { display: inline-flex; align-items: center; gap: 10px; flex: none; min-height: 48px; padding: 10px 18px; border: 1px solid #95D4A5; border-radius: 999px; font-weight: 500; }
.aid-banner:hover { border-color: #95D4A5; }
.story-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.story-photo { margin: 0; }
.story-copy h2 { margin-bottom: 28px; font-size: clamp(2.3rem, 1.5rem + 3vw, 4rem); line-height: 1.08; }
.story-copy > p { margin-bottom: 28px; color: var(--text-soft); font-size: 1.125rem; }
.story-values { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.story-values span { padding: 10px 16px; border: 1px solid var(--line-strong); border-radius: 999px; font-size: 1rem; }
.story-timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.story-timeline li { padding: 24px 28px; border-top: 2px solid var(--line-strong); }
.story-timeline li:first-child { padding-left: 0; }
.story-timeline li + li { border-left: 1px solid var(--line); }
.story-year { display: block; margin-bottom: 32px; font-size: 1.375rem; color: var(--yellow); }
.story-timeline h3 { font-size: 1.75rem; margin-bottom: 12px; }
.story-timeline p { margin: 0; color: var(--text-soft); }
.story-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; margin: 0; padding: 0; list-style: none; }
.story-people li { padding: 24px 0; border-top: 1px solid var(--line); }
.story-people h3 { font-size: 1.75rem; margin-bottom: 10px; }
.story-people p { margin: 0; color: var(--text-soft); }
.story-partners { padding-top: 32px; margin-top: 24px; border-top: 1px solid var(--line); }
.story-partners h3 { font-size: 1.5rem; margin-bottom: 20px; }
.story-partners ul { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 0; padding: 0; list-style: none; color: var(--text-soft); }
.story-sources { margin-top: 28px; color: var(--text-mute); font-size: .9375rem; }
.story-sources summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.story-sources p { margin: 12px 0 0; }
@media (max-width: 899px) {
  .story-intro { grid-template-columns: 1fr; }
  .story-photo { max-width: 600px; }
  .story-timeline { grid-template-columns: 1fr; }
  .story-timeline li, .story-timeline li:first-child { padding: 24px 0 24px 24px; border-top: 0; border-left: 2px solid var(--line-strong); }
  .story-year { margin-bottom: 12px; }
  .aid-banner { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 599px) {
  .slot { padding: 14px; }
  .prices { gap: 12px; }
  .prices > div.fee-category { padding: 24px 16px; }
  .prices dd { font-size: 2.75rem; }
  .story-people { grid-template-columns: 1fr; }
  .story-copy h2 { font-size: 2.5rem; }
  .aid-banner { padding: 20px 16px; }
}

/* Accessibilité (zoom fort, WCAG 1.4.10 et 1.4.4) : quand la fenêtre est très basse (zoom à 200 %
   ou plus, téléphone en paysage), les barres fixes du haut et du bas cachaient jusqu'aux deux tiers
   de l'écran. Elles reprennent alors leur place dans la page. Téléphone en portrait et ordinateur :
   rien ne change (barre de raccourcis fixe en bas). */
@media (max-height: 480px) {
  .site-header { position: absolute; }
  /* quatre colonnes : la cinquième case du bouton du chatbot n'a plus lieu d'être (il flotte) */
  .mobile-shortcuts { position: static; grid-template-columns: repeat(4, 1fr); }
  body { padding-bottom: 0; }
  html { scroll-padding-top: 12px; scroll-padding-bottom: 12px; }
  /* la barre n'est plus fixe : le bouton flotte de nouveau, avec son ombre */
  #lc-chatbot { bottom: 16px; }
  #lc-chatbot-trigger { box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .8); }
}


/* ==========================================================================
   29 Blog : articles (blog/SLUG.html) et liste des articles (blog/index.html)
   Les pages du blog sont dans le dossier blog/ : toutes leurs adresses sont
   absolues (/assets/..., /planning, /blog/...). Mêmes jetons, mêmes filets,
   même photo noir et blanc légendée « Photo d'illustration ».

   Article (une colonne centrée de 820 px, texte à 68 caractères par ligne) :
   <main> <article class="article">
     <header class="page-head article-head"><div class="container is-narrow">
       nav.crumbs (Accueil / Blog / titre), h1, p.lead, p.article-meta (date)
     </div></header>
     <div class="article-section"><div class="container is-narrow">
       <figure class="shot article-figure"> img + figcaption.photo-note </figure>
       <div class="prose article-body">
         p, h2, h3, ul, ol ;
         <aside class="article-club"> h2 « Au club », p, a.link-arrow </aside> ;
         <nav class="article-more"> h2 « À lire aussi », ul.article-more-list > li > a </nav>
       </div>
     </div></div>
   </article>
   <section class="final halo-section"> (cours d'essai, planning) </section> </main>

   Liste : <ul class="blog-grid"> <li class="blog-card">
     <figure class="shot blog-card-media"> img + figcaption.photo-note </figure>
     <h2 ou h3 class="blog-card-title"><a href="/blog/SLUG">Titre</a></h2>
     <p class="blog-card-text">Une phrase.</p>
     <span class="blog-card-more" aria-hidden="true">Lire l'article <i class="fa-solid fa-arrow-right"></i></span>
   </li> </ul>
   Toute la carte est cliquable (le lien du titre la couvre) ; son nom est le titre.
   ========================================================================== */

/* Ouverture : la colonne de lecture, un h1 un peu plus petit que sur les pages secondaires
   (68 px en 1440, 38 px en 375 : il reste le plus grand titre de la page) */
.article-head h1 { max-width: none; font-size: clamp(2.375rem, 1.4rem + 3.2vw, 4.25rem); line-height: 1.04; }
.article-meta { margin: 24px 0 0; font-size: .9375rem; color: var(--text-mute); }
/* Fil d'Ariane : un titre long tient sur la même ligne, coupé par des points de suspension
   (le texte entier reste lu par les lecteurs d'écran) */
.article-head .crumbs li[aria-current] { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Photo puis texte, sous l'ouverture */
.article-section { padding: clamp(32px, 4vw, 56px) 0 var(--section); }
.article-figure { aspect-ratio: 16 / 9; margin: 0 0 clamp(32px, 4vw, 48px); }
@media (max-width: 599px) { .article-figure { aspect-ratio: 3 / 2; } }

/* Une seule colonne de lecture centrée (fil d'Ariane, titre, photo, texte) : les marges sont
   égales des deux côtés, sans grand vide à droite. 720 px avec un texte de 19 px : environ
   70 caractères par ligne avec Switzer */
.article-head > .container.is-narrow,
.article-section > .container.is-narrow { max-width: 720px; }

/* Texte de l'article : .prose (couleurs, listes, liens soulignés), en un peu plus grand,
   sur toute la largeur de la colonne */
.article-body { max-width: none; font-size: clamp(1.0625rem, 1rem + .25vw, 1.1875rem); line-height: 1.7; }
.article-body h2 { margin: clamp(44px, 5vw, 64px) 0 16px; font-size: clamp(1.75rem, 1.35rem + 1.3vw, 2.5rem); line-height: 1.08; }
.article-body h3 { margin: 32px 0 8px; }
.article-body :is(ul, ol) { margin-bottom: 1.2em; }

/* « Au club » : le seul passage sur le club, en encadré sobre (fond à peine relevé, filets fins) */
.article-club { margin: clamp(40px, 5vw, 56px) 0; padding: clamp(20px, 3vw, 28px); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-raised); }
/* Petits titres de l'encadré et de « À lire aussi » : comme les titres du pied de page */
.article-body :is(.article-club, .article-more) h2 {
  margin: 0 0 12px; font-size: .8125rem; font-weight: 500; line-height: 1.4; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-mute);
}
.article-club p { margin: 0; }
.article-club p + p { margin-top: .8em; }
.article-body .article-club a.link-arrow { margin-top: 20px; color: var(--text); text-decoration: none; }

/* « À lire aussi » : deux articles, une ligne chacun entre filets */
.article-more { margin-top: clamp(48px, 6vw, 72px); }
.article-body .article-more-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.article-body .article-more-list li { margin: 0; border-bottom: 1px solid var(--line); }
.article-body .article-more-list a {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding: 16px 0;
  font-size: var(--fs-h5); font-weight: 300; line-height: 1.2; letter-spacing: -.015em;
  color: var(--text); text-decoration: none;
}
.article-more-list a i { flex: none; font-size: 1rem; color: var(--text-mute); transition: transform .25s var(--ease), color .2s; }
@media (hover: hover) and (pointer: fine) {
  .article-more-list a:hover i { transform: translateX(4px); color: var(--text); }
}

/* Appel final d'un article : sous le h1 de la page (56 px en 1440, 32 px en 375) */
:where(main:has(> .article)) .halo-section :is(h2, .halo-title) { font-size: var(--fs-h2-s); }

/* Liste des articles : trois cartes par ligne, deux sur tablette, une sur téléphone */
.blog-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(40px, 4vw, 56px) clamp(20px, 2.4vw, 32px); margin: 0; padding: 0; list-style: none;
}
@media (max-width: 1023px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .blog-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } }
.blog-card { position: relative; display: flex; flex-direction: column; border-radius: var(--radius); }
.blog-card-media { aspect-ratio: 3 / 2; margin-bottom: 20px; }
.blog-card-media img { transition: filter .4s, transform .6s var(--ease); }
.blog-card-title { margin: 0 0 10px; font-size: var(--fs-h5); font-weight: 400; line-height: 1.15; letter-spacing: -.015em; }
.blog-card-title a { color: var(--text); text-decoration: none; text-decoration-thickness: 1px; text-underline-offset: 4px; }
/* le lien du titre couvre toute la carte (photo comprise) */
.blog-card-title a::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: var(--radius); }
.blog-card-title a:focus-visible { outline: none; }
.blog-card:has(.blog-card-title a:focus-visible) { outline: 2px solid var(--yellow); outline-offset: 6px; }
.blog-card-text { margin: 0 0 16px; font-size: 1rem; line-height: 1.55; color: var(--text-soft); }
.blog-card-more { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; min-height: 44px; font-size: .9375rem; font-weight: 500; color: var(--text); }
.blog-card-more i { font-size: .8em; transition: transform .25s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .blog-card:hover .blog-card-media img { filter: grayscale(1) contrast(1.08) brightness(.88); transform: scale(1.02); }
  .blog-card:hover .blog-card-title a { text-decoration: underline; }
  .blog-card:hover .blog-card-more i { transform: translateX(4px); }
}
/* Retour au toucher, comme les autres liens */
.blog-card:active, .article-more-list a:active { opacity: .7; }