/* =====================================================================
   Ju-Jutsu Traditionnel — Club Notre-Dame de Beauraing
   Feuille de style unique — reconstruction propre et légère
   Palette : encre sumi · papier washi · rouge hinomaru · vert tatami
   Typographie : Zen Old Mincho (titres) · Zen Kaku Gothic New (texte)
   ===================================================================== */

/* ---------------------------------------------------------------------
   Polices hébergées par le site (dossier fonts/)

   Pourquoi ne plus passer par Google Fonts :
   1. VITESSE — avec Google, le navigateur devait d'abord aller chercher une
      feuille de style chez fonts.googleapis.com, y découvrir l'adresse des
      fichiers, puis les télécharger chez fonts.gstatic.com : trois allers-
      retours sur deux domaines. Ici les fichiers sont sur le même serveur et
      sont préchargés dès le HTML (voir les « preload » dans chaque page).
   2. VIE PRIVÉE — Google Fonts transmet l'adresse IP du visiteur à Google.
      Le site ne dépose aucun cookie ; il n'envoie désormais plus rien non
      plus à un tiers.

   ATTENTION — ce sont des polices JAPONAISES : les fichiers complets pèsent
   plusieurs mégaoctets (des milliers de kanji). On n'embarque donc QUE les
   sous-ensembles latins, soit 70 Ko en tout. Ne jamais les remplacer par le
   fichier « complet » téléchargé depuis Google Fonts : le site s'effondrerait.
   Grâce à « unicode-range », le navigateur ne télécharge un fichier que si la
   page contient réellement des caractères de sa plage.

   Graisses embarquées, et elles seules : Zen Kaku Gothic New 400/500/700
   (texte) et Zen Old Mincho 400/500 (titres). La graisse 600, chargée
   autrefois, n'était utilisée nulle part.

   Licence : SIL Open Font License 1.1 (voir fonts/LICENSE.txt).
   --------------------------------------------------------------------- */
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/zen-kaku-gothic-new-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/zen-kaku-gothic-new-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/zen-kaku-gothic-new-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/zen-kaku-gothic-new-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/zen-kaku-gothic-new-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Zen Kaku Gothic New';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/zen-kaku-gothic-new-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Zen Old Mincho';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/zen-old-mincho-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Zen Old Mincho';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/zen-old-mincho-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Zen Old Mincho';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/zen-old-mincho-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Zen Old Mincho';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/zen-old-mincho-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */
:root {
  --sumi:        #17130f;   /* encre — texte & fonds sombres      */
  --sumi-soft:   #4a4038;   /* texte secondaire                   */
  --washi:       #ece5d6;   /* papier — fond principal            */
  --washi-2:     #f6f1e7;   /* cartes / surfaces claires          */
  --washi-3:     #e2d9c6;   /* surfaces alternées                 */
  --bleu:        #0077b1;   /* bleu principal — accent            */
  --bleu-deep:   #114179;   /* bleu foncé — survols / textes      */
  --bleu-clair:  #97c8e0;   /* bleu clair — sur fonds sombres     */
  --gold:        #b08d4c;   /* doré discret — rappel du logo      */
  --vert-neuf:   #5ba55f;   /* vert des pastilles « nouveau »     */
  --line:        rgba(23, 19, 15, .14);
  --line-light:  rgba(246, 241, 231, .18);

  --maxw: 1160px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 4px;

  /* Hauteur cumulée du bandeau et de l'en-tête, valeurs MESURÉES. Elle est
     retranchée de la hauteur d'écran pour que le hero occupe exactement le
     reste (voir .hero). À réajuster si l'un des deux change de hauteur. */
  --pile-haut: 115px;   /* bandeau 38 + en-tête 77 */

  --shadow-sm: 0 1px 2px rgba(23,19,15,.06), 0 4px 14px rgba(23,19,15,.06);
  --shadow-md: 0 8px 34px rgba(23,19,15,.14);

  --ff-display: "Zen Old Mincho", Georgia, "Times New Roman", serif;
  --ff-body: "Zen Kaku Gothic New", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--ff-body);
  font-weight: 400;
  color: var(--sumi);
  background: var(--washi);
  line-height: 1.65;
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--ff-display); font-weight: 500; line-height: 1.12; margin: 0; }

/* ---------- Utilities ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

/* Souligne un lien noyé dans une phrase, que rien ne distinguerait sinon —
   le reset plus haut retire tout soulignement. La COULEUR n'est pas touchée :
   le lien garde celle du texte qui l'entoure.
   À poser au cas par cas dans le HTML, jamais en règle générale : les menus,
   les boutons et les cartes cliquables se signalent déjà par leur forme. */
.lien-souligne { text-decoration: underline; text-underline-offset: 2px; }

/* Empêche un mot de se couper à son trait d'union — « Ju-Jutsu » scindé en
   « Ju- » et « Jutsu » d'une ligne à l'autre, ce qui arrive dans le sceau du
   hero sur un écran étroit. Le trait d'union insécable (U+2011) ferait la
   même chose en pur HTML, MAIS il est absent de nos sous-ensembles de
   polices : il serait tiré d'une police de secours et jurerait au milieu du
   texte. D'où cette classe. */
.insecable { white-space: nowrap; }

.eyebrow {
  font-family: var(--ff-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--bleu-deep);
  display: inline-flex;
  align-items: center;
  gap: .7em;
  margin: 0;
}
.eyebrow--light { color: var(--bleu-clair); }

.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }

.section__head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section__title {
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
  margin-top: .7rem;
  letter-spacing: -0.01em;
}
.section__title em { font-style: normal; color: var(--bleu); }

.lede { font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); color: var(--sumi-soft); }

/* Un numéro de téléphone ne doit jamais se couper en fin de ligne : les
   espaces qu'il contient sont des séparateurs de lecture, pas des césures
   possibles. Règle posée sur tous les liens « tel: » du site d'un coup. */
a[href^="tel:"] { white-space: nowrap; }

/* Focus visibility — accessibilité clavier */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--bleu);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .01em;
  padding: .82em 1.5em;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn svg { width: 1.05em; height: 1.05em; }
.btn--primary { background: var(--bleu); color: #fff; }
.btn--primary:hover { background: var(--bleu-deep); transform: translateY(-2px); }
.btn--ghost { border-color: currentColor; color: var(--sumi); }
.btn--ghost:hover { background: var(--sumi); color: var(--washi-2); border-color: var(--sumi); }
.btn--onDark { border-color: rgba(255,255,255,.5); color: #fff; }
.btn--onDark:hover { background: #fff; color: var(--sumi); border-color: #fff; }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }

/* =====================================================================
   En-tête
   ===================================================================== */
.topbar {
  background: var(--sumi);
  color: rgba(246,241,231,.82);
  font-size: .82rem;
}
.topbar .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.4rem;
  align-items: center;
  justify-content: space-between;
  padding-block: .5rem;
}
.topbar a { color: inherit; transition: color .15s ease; }
.topbar a:hover { color: #fff; }
.topbar__links { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.topbar strong { color: #fff; font-weight: 700; letter-spacing: .08em; }

/* Pastille « Nouveau » du club de Houyet. Elle vit à DEUX endroits : le
   bandeau du haut et le pied de page — d'où son nom neutre, l'ancien
   « topbar__neuf » ayant cessé d'être vrai le 06/08/2026.
   La taille est en « em » et non en « rem » : la pastille suit ainsi le texte
   qui l'accueille (bandeau .82rem, pied de page .92rem) au lieu de paraître
   rapetissée dans le second. .61em reproduit exactement les 8px d'origine
   dans le bandeau.
   Ses couleurs sont posées en dur, donc elle tient sur n'importe quel fond.
   À RETIRER aux deux endroits quand le club ne sera plus une nouveauté
   (fin 2026 ?). */
.pastille-neuf {
  display: inline-block;
  margin-left: .3em;
  padding: .15em .4em;
  border-radius: 2px;
  background: var(--vert-neuf);
  color: #0d1f0e;
  font-size: .61em;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.05;
  vertical-align: .12em;
}

/* Petit combiné téléphonique devant le numéro. C'est EXACTEMENT le même tracé
   que l'icône de la bande d'appel à l'action (.cta__tel) : les deux téléphones
   du site sont ainsi identiques. Taille en « em » pour qu'elle suive le texte
   du bandeau, et calage sur la ligne de base. L'icône reste HORS du <strong> :
   elle hérite donc de la couleur adoucie du bandeau, un ton en dessous du
   numéro lui-même. */
.topbar__icone {
  width: 1.05em;
  height: 1.05em;
  margin-right: .62em;
  vertical-align: -.17em;
}

/* « Espace membres » vit à DEUX endroits, jamais visible aux deux à la
   fois : dans le BANDEAU sur ordinateur, dans le MENU sur téléphone. Le
   relais se fait à 620 px, là où le bandeau disparaît.
   Pourquoi : à sept entrées, le menu horizontal serrait les libellés au
   point de couper « La méthode », « Les cours » et « Espace membres » en
   deux lignes (constaté le 08/08/2026 à 1100 px — 65 px de haut au lieu
   de 40). Le bandeau, lui, a de la place.
   Une seule règle suffit : au-dessus de 620 px on masque l'entrée du
   menu, et en dessous c'est le bandeau tout entier qui disparaît (règle
   suivante) — donc son lien avec lui. ⚠️ Si le bandeau devait un jour
   réapparaître sur téléphone, il faudrait y masquer `.topbar__membres`,
   sans quoi le lien se verrait deux fois. */
@media (min-width: 621px) { .nav__membres { display: none; } }

/* Sur petit écran, le bandeau du haut disparaît ENTIÈREMENT (08/08/2026).
   Les liens vers les clubs frères y étaient déjà masqués depuis le
   06/08/2026 ; il ne restait que le numéro de téléphone, qui prenait une
   bande pleine largeur au sommet de chaque page pour une information
   présente ailleurs — pied de page et bandes d'appel à l'action.
   ⚠️ Deux conséquences à connaître avant de revenir en arrière :
     • la pastille « Nouveau » du club de Houyet ne vit que dans ce bandeau,
       elle ne paraît donc plus du tout sur mobile (elle subsiste au pied
       de page, où elle avait été ajoutée le 06/08/2026) ;
     • le numéro n'est plus cliquable depuis le haut de page. */
@media (max-width: 620px) {
  /* Le bandeau parti, la pile se réduit au seul en-tête. Hauteur MESURÉE :
     76,8 px, arrondie à 77. À remesurer si l'on touche à l'en-tête — son
     « .wrap » porte un min-height de 76 px que le logo de 66 px n'atteint
     pas. */
  :root { --pile-haut: 77px; }

  .topbar { display: none; }
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--washi) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 76px;
}
.brand { display: flex; align-items: center; gap: .7rem; margin-right: auto; }
.brand img { width: 66px; height: 66px; border-radius: 50%; }
.brand__name { font-family: var(--ff-display); font-size: 1.02rem; line-height: 1.15; }
.brand__name span { display: block; font-family: var(--ff-body); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bleu-deep); font-weight: 700; }

.nav { display: flex; align-items: center; gap: .3rem; }
.nav a {
  font-family: var(--ff-body);
  font-size: .92rem;
  font-weight: 500;
  padding: .5rem .7rem;
  border-radius: 3px;
  color: var(--sumi-soft);
  transition: color .15s ease, background-color .15s ease;
}
.nav a:hover { color: var(--sumi); background: var(--washi-3); }
.nav .btn { margin-left: .6rem; padding: .6em 1.1em; }
.nav .btn--primary { color: #fff; }

/* Menu mobile */
.nav-toggle { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); overflow: hidden; }
.nav-toggle-label { display: none; }
.nav-voile { display: none; }
.nav-toggle:focus-visible ~ .nav-toggle-label { outline: 2px solid var(--bleu); outline-offset: 3px; }

/* Seuil élargi à 1040px (08/08/2026). Il valait 1000px, mais la barre compte
   6 rubriques plus le bouton : entre 1001 et 1035px, « La méthode » et
   « Les cours » se coupaient en deux lignes — 65px de haut au lieu de 40.
   ⚠️ Valeur MESURÉE : la coupure disparaît à 1036px. On garde une petite
   marge, le rendu des polices variant d'un système à l'autre. À remesurer
   si l'on ajoute une rubrique ou si l'on change les libellés. */
@media (max-width: 1040px) {
  /* IMPORTANT : « backdrop-filter » sur l'en-tête crée un bloc conteneur pour
     ses descendants en « position: fixed ». Le menu se retrouvait alors calé
     sur la hauteur de l'en-tête au lieu de l'écran : fond réduit à une bande
     et panneau débordant sur le côté (page élargie). On retire donc le flou
     sur mobile et on rend le fond opaque. Ne pas remettre backdrop-filter ici. */
  .site-header {
    background: var(--washi);
    backdrop-filter: none;
  }
  /* Voile : couvre l'écran sous le panneau. Les z-index se lisent ensemble —
     voile 40 < panneau 50 < bouton 60 — pour que le panneau reste au-dessus
     du voile, et la croix de fermeture au-dessus des deux. */
  .nav-voile {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(23, 19, 15, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
  }
  .nav-toggle:checked ~ .nav-voile { opacity: 1; visibility: visible; }
  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 50;
    width: min(80vw, 320px);
    flex-direction: column;
    align-items: stretch;
    gap: .2rem;
    background: var(--washi-2);
    box-shadow: var(--shadow-md);
    padding: 5rem 1.4rem 2rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(100%);
    /* « visibility » retire le panneau fermé du flux visuel et du parcours
       clavier : il ne peut plus élargir la page ni recevoir le focus. */
    visibility: hidden;
    transition: transform .3s ease, visibility .3s ease;
  }
  .nav a { padding: .8rem .6rem; font-size: 1.05rem; border-bottom: 1px solid var(--line); }
  .nav .btn { margin: .8rem 0 0; justify-content: center; }
  .nav-toggle:checked ~ .nav { transform: translateX(0); visibility: visible; }
  .nav-toggle-label {
    display: inline-flex; flex-direction: column; gap: 5px;
    width: 42px; height: 42px; padding: 11px 9px; cursor: pointer; z-index: 60;
    border: 1px solid var(--line); border-radius: 4px; background: var(--washi-2);
  }
  .nav-toggle-label span { height: 2px; background: var(--sumi); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .nav-toggle-label span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  @media (prefers-reduced-motion: reduce) { .nav, .nav-voile, .nav-toggle-label span { transition: none; } }
}

/* =====================================================================
   Hero
   ===================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--sumi);
  color: var(--washi-2);
  isolation: isolate;

  /* Le hero occupe tout l'écran restant sous le bandeau et l'en-tête : sans
     cela, sur les écrans hauts, le début de la section suivante apparaissait
     au chargement. « min-height » et non « height » : si le contenu est plus
     grand (petits écrans, texte replié), le hero s'agrandit au lieu de le
     rogner. La ligne « 100vh » sert de repli aux navigateurs anciens ;
     « 100svh » lui succède et vaut mieux sur mobile, où il tient compte de
     la barre d'outils du navigateur et évite un débordement. */
  min-height: calc(100vh - var(--pile-haut));
  min-height: calc(100svh - var(--pile-haut));
  display: grid;
  align-items: center;
}
.hero::after { /* voile pour lisibilité sur la photo */
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(15,12,9,.62), rgba(15,12,9,.86)),
    var(--hero-photo, none) center/cover no-repeat;
}
.hero .wrap { position: relative; z-index: 2; padding-block: clamp(2.75rem, 6vw, 4.5rem); }
.hero__inner { max-width: 44rem; margin-inline: auto; text-align: center; }
.hero h1 {
  font-size: clamp(2.3rem, 1.4rem + 4.4vw, 4.4rem);
  letter-spacing: -0.015em;
  margin-top: .8rem;
}
.hero h1 .sub {
  display: block;
  font-size: clamp(1.3rem, .9rem + 2vw, 2.2rem);
  color: var(--washi);
  font-weight: 400;
  /* Les deux lignes se touchaient presque : la ligne de base du titre et la
     hauteur de capitale du sous-titre se frôlaient. */
  margin-top: .4em;
}
.hero__tag { margin: 1.4rem auto 2rem; font-size: clamp(1.05rem, 1rem + .5vw, 1.35rem); color: rgba(246,241,231,.86); max-width: 34rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; justify-content: center; }
.hero__seal {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-top: 2.4rem; padding: .55rem 1.1rem;
  border: 1px solid var(--line-light); border-radius: 999px;
  font-size: .82rem; color: rgba(246,241,231,.8); backdrop-filter: blur(2px);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
/* Le sceau est un lien vers le site de l'académie. Rien ne le signale au repos,
   et c'est voulu : le hero doit rester calme. C'est le survol qui l'annonce, en
   renforçant à peine le fond et la bordure — le curseur main fait le reste. */
.hero__seal:hover, .hero__seal:focus-visible {
  background: rgba(246, 241, 231, .12);
  border-color: rgba(246, 241, 231, .42);
  color: var(--washi);
}
/* Le yin-yang tient lieu de puce devant le texte. « align-items: center » du
   conteneur le centre déjà verticalement ; « flex: 0 0 auto » l'empêche
   seulement de se comprimer si la ligne se resserre. */
.hero__seal-symbole {
  flex: 0 0 auto;
  width: 1.1em; height: 1.1em;
  color: var(--gold);
}

/* =====================================================================
   Intro — art, sport, culture
   ===================================================================== */
.feature { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.feature__media { position: relative; }
.feature__media img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-md); }
.feature__body p { color: var(--sumi-soft); }
.feature__body .btn { margin-top: 1.4rem; }

@media (max-width: 760px) {
  .feature { grid-template-columns: 1fr; }
}

/* =====================================================================
   Méthode + principes
   ===================================================================== */
.methode { background: var(--washi-3); border-block: 1px solid var(--line); }
.methode__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.methode__text p { color: var(--sumi-soft); }
.methode__note {
  margin-top: 1.6rem; padding-left: 1.1rem; border-left: 3px solid var(--gold);
  font-size: .95rem; color: var(--sumi-soft);
}
.methode__note strong { color: var(--sumi); }

.principes { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.principes li {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.05rem .4rem; border-bottom: 1px solid var(--line);
  font-family: var(--ff-display); font-size: clamp(1.1rem, 1rem + .6vw, 1.4rem);
}
.principes li:last-child { border-bottom: 0; }
/* Puce ronde générée en CSS : rien à écrire dans le HTML, et le point suit
   automatiquement la couleur de la charte. Il est centré verticalement, comme
   le veut le « align-items: center » de .principes li. */
.principes li::before {
  content: "";
  width: .45rem; height: .45rem; border-radius: 50%;
  background: var(--bleu); flex: 0 0 auto;
}

.methode__figure { position: relative; }
.methode__figure img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow-md); }

@media (max-width: 820px) { .methode__grid { grid-template-columns: 1fr; } .methode__figure { max-width: 380px; } }

/* =====================================================================
   Cours
   ===================================================================== */
.cours__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 2.2rem); }
.cours-card {
  background: var(--washi-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.6rem, 3vw, 2.4rem);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.cours-card__when {
  display: inline-block; align-self: flex-start;
  font-family: var(--ff-body); font-weight: 700; font-size: .74rem;
  letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: var(--bleu); padding: .38em .8em; border-radius: 3px; margin-bottom: 1rem;
}
.cours-card__age { color: var(--bleu-deep); font-weight: 700; font-size: .9rem; }
.cours-card h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem); margin: .2rem 0 .8rem; }
.cours-card p { color: var(--sumi-soft); margin: 0; }
@media (max-width: 700px) { .cours__grid { grid-template-columns: 1fr; } }

/* =====================================================================
   Appel à l'action — contact
   ===================================================================== */
.cta {
  position: relative; overflow: hidden;
  background: var(--bleu); color: #fff; text-align: center; isolation: isolate;
}
/* Fond allégé : la version précédente superposait un voile NOIR à 28 % sur un
   dégradé qui plongeait jusqu'au bleu marine, d'où une bande lourde et terne.
   Le voile est supprimé et le dégradé reste dans la famille du bleu principal.
   ATTENTION avant d'éclaircir davantage : le texte est blanc, et --bleu est
   déjà la limite (contraste 4,91 pour du blanc pur, seuil requis 4,5). Tout
   voile clair ajouté ici ferait passer les textes sous le seuil de lisibilité. */
.cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(176deg, var(--bleu) 0%, #0a6b9c 52%, #065f8c 100%);
}
/* La transparence est portée par « opacity » et NON par une couleur rgba() :
   l'ensemble du dessin est aplati en une seule couche, donc les traits qui se
   croisent ne cumulent plus leur opacité. Ne pas revenir à rgba() ici. */
.cta__symbole { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(70vw, 480px); color: #fff; opacity: .1; z-index: -1; }
.cta .wrap { position: relative; padding-block: clamp(3.5rem, 8vw, 6rem); }
.cta h2 { font-size: clamp(1.8rem, 1.3rem + 2.5vw, 3rem); }
.cta__badge { font-family: var(--ff-body); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; font-size: .78rem; color: rgba(255,255,255,.94); }
/* Opacités calées sur le contraste : en dessous de .94 sur ce bleu, les
   textes courants passent sous le seuil de lisibilité de 4,5. */
.cta p { max-width: 40rem; margin: 1rem auto 2rem; color: rgba(255,255,255,.94); font-size: 1.1rem; }
/* Deux actions de poids différents : un vrai bouton vers la page Contact,
   et le numéro en retrait pour qui préfère appeler directement. L'ancienne
   version affichait le numéro dans un cadre de 2,4 rem — une taille de
   titre pour un bouton, d'où l'effet disproportionné. */
.cta__actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .9rem 1.8rem;
}
.btn--clair { background: #fff; color: var(--bleu-deep); }
.btn--clair:hover { background: var(--washi); color: var(--bleu-deep); }

.cta__tel {
  display: inline-flex; align-items: center; gap: .5em;
  /* Même corps que le bouton, jamais plus : c'est l'action secondaire. */
  font-family: var(--ff-body); font-weight: 700; font-size: .95rem;
  letter-spacing: .02em; color: rgba(255,255,255,.94);
  padding-bottom: .15em; border-bottom: 1px solid rgba(255,255,255,.4);
  transition: color .18s ease, border-color .18s ease;
}
.cta__tel:hover { color: #fff; border-color: #fff; }
.cta__tel svg { width: 1.05em; height: 1.05em; }

/* Sur téléphone, les deux actions tiennent sur une ligne mais s'y trouvent
   à l'étroit (une vingtaine de pixels de marge). On les empile : chacune
   respire et reste centrée. */
@media (max-width: 520px) {
  .cta__actions { flex-direction: column; gap: 1.1rem; }
}

/* =====================================================================
   Pied de page
   ===================================================================== */
.site-footer { background: var(--sumi); color: rgba(246,241,231,.72); font-size: .92rem; }
.site-footer .wrap { padding-block: clamp(2.5rem, 5vw, 4rem); }
.footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
.footer__brand img { width: 96px; height: 96px; border-radius: 50%; margin-bottom: 1rem; }
.footer__brand p { margin: .3rem 0; }
.footer__brand a[href^="tel:"] { letter-spacing: .08em; }
.footer__brand strong { color: #fff; font-family: var(--ff-display); font-weight: 500; font-size: 1.1rem; }
/* Lien vers la page Facebook. Le lien n'a pas de texte visible : la zone
   cliquable serait donc réduite à l'icône. On l'agrandit par le padding
   (44px au total, la cible minimale confortable au doigt), compensé par
   une marge négative pour que l'icône reste alignée sur le texte au-dessus. */
.footer__brand .footer__reseaux { margin-top: .9rem; }
.footer__reseaux a {
  display: inline-flex;
  padding: 10px;
  margin: -10px 0 -10px -10px;
}
.footer__reseaux svg { width: 24px; height: 24px; }
.footer h2 { font-family: var(--ff-body); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--bleu-clair); margin-bottom: 1rem; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer a { color: rgba(246,241,231,.72); transition: color .15s ease; }
.footer a:hover { color: #fff; }
.footer__bottom {
  margin-top: 2.5rem; padding-top: 1.4rem; border-top: 1px solid var(--line-light);
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between; align-items: center;
  font-size: .82rem; color: rgba(246,241,231,.55);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 1.2rem; }

@media (max-width: 760px) { .footer__top { grid-template-columns: 1fr; gap: 2rem; } }

/* Lien d'évitement (accessibilité) */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--sumi); color: #fff; padding: .7rem 1.1rem; border-radius: 0 0 4px 0;
}
.skip-link:focus { left: 0; }

/* =====================================================================
   PAGES INTÉRIEURES — composants communs
   Tout ce qui suit ne sert qu'aux pages autres que l'accueil.
   ===================================================================== */

/* Visible des lecteurs d'écran uniquement (légendes de tableaux, etc.) */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  border: 0; clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}

/* Variante de fond, pour alterner les sections d'une même page */
.section--alt { background: var(--washi-3); border-block: 1px solid var(--line); }

/* ---------- Bandeau de titre ---------- */
.page-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--sumi); color: var(--washi-2);
}
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(15,12,9,.66), rgba(15,12,9,.88)),
    var(--hero-photo, none) center/cover no-repeat;
}
/* Sur téléphone, les deux bandeaux servent une photo réduite (1200 px au lieu
   de 1600-1900). Le gain est net : la photo du bandeau est l'élément le plus
   lourd de la page, et c'est lui que Google chronomètre (LCP).

   Pourquoi surcharger le PSEUDO-ÉLÉMENT et non la variable : « --hero-photo »
   est posée en style INLINE dans chaque page, et rien en feuille de style ne
   peut l'emporter sur un style inline. On agit donc là où la variable est
   CONSOMMÉE. Le repli en cascade — mobile, puis normale, puis « none » — fait
   qu'une page sans variante mobile continue de fonctionner.

   Les préchargements des pages portent le même seuil de 700 px : les deux
   doivent rester d'accord, sinon le téléphone précharge une photo et en
   affiche une autre, soit deux téléchargements au lieu d'un.

   Les deux voiles sont RECOPIÉS à l'identique de leur règle d'origine (l'un
   est un peu plus clair que l'autre) : redéclarer « background » écrase le
   raccourci en entier, dégradé compris. Les fondre en une seule règle
   changerait la teinte de l'accueil sur téléphone. */
@media (max-width: 700px) {
  .hero::after {
    background:
      linear-gradient(180deg, rgba(15,12,9,.62), rgba(15,12,9,.86)),
      var(--hero-photo-mobile, var(--hero-photo, none)) center/cover no-repeat;
  }
  .page-hero::after {
    background:
      linear-gradient(180deg, rgba(15,12,9,.66), rgba(15,12,9,.88)),
      var(--hero-photo-mobile, var(--hero-photo, none)) center/cover no-repeat;
  }
}

.page-hero .wrap { padding-block: clamp(2.5rem, 5vw, 4rem); }
.page-hero__inner { max-width: 46rem; }
.page-hero h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem); letter-spacing: -.015em; margin-top: .7rem; }
.page-hero p { margin: 1.1rem 0 0; color: rgba(246,241,231,.86); font-size: clamp(1rem, .97rem + .4vw, 1.2rem); max-width: 42rem; }

/* Fil d'Ariane */
.fil { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; font-size: .8rem; color: rgba(246,241,231,.62); }
.fil a { text-decoration: underline; text-underline-offset: 2px; }
.fil a:hover { color: #fff; }
.fil span { opacity: .55; }

/* Page courante dans le menu */
.nav a[aria-current="page"] { color: var(--bleu-deep); background: var(--washi-3); }

/* ---------- Texte long (pages légales) ---------- */
.prose { max-width: 46rem; }
.prose h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.7rem); margin: 2.6rem 0 .8rem; }
.prose h3 { font-family: var(--ff-body); font-weight: 700; font-size: 1.1rem; margin: 1.8rem 0 .5rem; }
.prose p, .prose li { color: var(--sumi-soft); }
.prose ul, .prose ol { padding-left: 1.2rem; display: grid; gap: .4rem; margin: .8rem 0; }
.prose a { color: var(--bleu-deep); text-decoration: underline; text-underline-offset: 2px; }
.prose > *:first-child { margin-top: 0; }
.prose__maj { font-size: .85rem; border-left: 3px solid var(--gold); padding-left: 1rem; }

/* Encart d'information ou d'avertissement */
.encart {
  background: var(--washi-2); border: 1px solid var(--line); border-left: 4px solid var(--gold);
  border-radius: var(--radius); padding: 1.1rem 1.3rem; margin: 1.6rem 0;
  font-size: .92rem; color: var(--sumi-soft);
}
.encart strong { color: var(--sumi); }
.encart p { margin: .4rem 0 0; }
.encart > *:first-child { margin-top: 0; }

/* ---------- Horaires ---------- */
.horaires { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(1.2rem, 2.5vw, 1.8rem); }
.jour {
  background: var(--washi-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.3rem, 2.5vw, 1.8rem); box-shadow: var(--shadow-sm);
}
.jour__nom {
  display: inline-block; margin-bottom: 1.1rem; padding: .4em .9em; border-radius: 3px;
  font-family: var(--ff-body); font-weight: 700; font-size: .76rem; letter-spacing: .16em; text-transform: uppercase;
  color: #fff; background: var(--bleu);
}
.creneaux { list-style: none; margin: 0; padding: 0; }
.creneaux li { display: grid; gap: .15rem; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.creneaux li:last-child { border-bottom: 0; padding-bottom: 0; }
.creneau__h { font-family: var(--ff-display); font-size: 1.15rem; color: var(--bleu-deep); }
.creneau__q { font-size: .9rem; color: var(--sumi-soft); }

/* ---------- Tableaux ---------- */
.table-wrap { overflow-x: auto; }
.tableau {
  width: 100%; min-width: 30rem; border-collapse: collapse;
  background: var(--washi-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.tableau th, .tableau td { padding: .85rem 1rem; text-align: left; border-bottom: 1px solid var(--line); }
.tableau thead th {
  background: var(--washi-3); color: var(--bleu-deep);
  font-family: var(--ff-body); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase;
}
.tableau tbody th { font-family: var(--ff-display); font-weight: 500; font-size: 1.05rem; }
.tableau tbody tr:last-child th, .tableau tbody tr:last-child td { border-bottom: 0; }
.tableau .prix { font-family: var(--ff-display); font-size: 1.15rem; white-space: nowrap; }
/* Note discrète sous un tableau : elle commente les chiffres qui précèdent,
   d'où sa place hors du tableau mais collée à lui. */
.tableau-note { margin: .8rem 0 0; color: var(--sumi-soft); font-size: .95rem; }

/* ---------- Blocs d'information ---------- */
.blocs { display: grid; grid-template-columns: repeat(auto-fit, minmax(265px, 1fr)); gap: clamp(1.4rem, 3vw, 2.4rem); }
.bloc h3 { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.5rem); margin-bottom: .5rem; }
.bloc p { color: var(--sumi-soft); margin: .5rem 0 0; }

/* ---------- Documents à télécharger ---------- */
/* Seul le règlement d'ordre intérieur est publié, en deux versions selon le
   public. Les documents d'inscription sont remis en main propre : d'où une
   liste unique, sans regroupement par public. */
.docs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); gap: 1rem; }
.docs a {
  display: flex; gap: 1rem; align-items: center; height: 100%;
  background: var(--washi-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem 1.2rem; box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.docs a:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--bleu); }
@media (prefers-reduced-motion: reduce) { .docs a:hover { transform: none; } }
.docs__icone { flex: 0 0 auto; width: 32px; height: 40px; color: var(--bleu); }
.docs__nom { display: block; font-family: var(--ff-display); font-size: 1.06rem; line-height: 1.25; }
.docs__meta { display: block; margin-top: .3rem; font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--sumi-soft); }

/* ---------- Agenda mois par mois ---------- */
.agenda { display: grid; gap: clamp(1.8rem, 3vw, 2.6rem); }
.agenda__mois h3 {
  font-size: clamp(1.25rem, 1.1rem + .8vw, 1.55rem); color: var(--bleu-deep);
  padding-bottom: .5rem; border-bottom: 2px solid var(--line);
}
.agenda__liste { list-style: none; margin: 0; padding: 0; }
/* Colonne de date à largeur FIXE : chaque « li » a sa propre grille, c'est
   donc cette valeur commune — et non le contenu — qui aligne les colonnes
   d'une ligne à l'autre. Ne pas la passer en « auto ». */
.agenda__liste li {
  display: grid; grid-template-columns: 8.5rem 1fr auto; gap: .35rem 1rem; align-items: center;
  padding: .8rem .2rem; border-bottom: 1px solid var(--line);
}
.agenda__liste li:last-child { border-bottom: 0; }
.agenda__date { font-family: var(--ff-display); font-size: 1.02rem; white-space: nowrap; }
.agenda__date b { margin-right: .4rem; font-weight: 500; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sumi-soft); }
/* Une date qui couvre plusieurs jours (« Du 20 déc. au 3 janv. ») ne tient
   pas sur une ligne : elle seule a le droit de revenir à la ligne. */
.agenda__date--plage { white-space: normal; line-height: 1.35; }
.agenda__quoi { color: var(--sumi-soft); }
/* Une date de l'agenda peut porter un petit exposant (1ᵉʳ sept.). */
.agenda__liste sup { font-size: .7em; }
@media (max-width: 620px) {
  .agenda__liste li { grid-template-columns: 1fr auto; }
  .agenda__date { grid-column: 1 / -1; }
}

/* Étiquettes de catégorie de l'agenda */
.tag {
  padding: .35em .7em; border-radius: 3px; white-space: nowrap; color: #fff; background: var(--sumi-soft);
  font-family: var(--ff-body); font-size: .67rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.tag--ceremonie { background: #a85f42; }
.tag--theme     { background: var(--gold); }
.tag--conge     { background: #8a8078; }

/* Chaque étiquette reste collée à sa description, même en fin de ligne. */
.legende { display: flex; flex-wrap: wrap; gap: .7rem 1.6rem; align-items: center; margin-bottom: 2rem; }

/* ---------- Coordonnées ---------- */
.coord { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.coord li { display: flex; gap: 1rem; align-items: flex-start; }
.coord svg { flex: 0 0 auto; width: 21px; height: 21px; color: var(--bleu); margin-top: .25rem; }
.coord__lbl { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sumi-soft); }
.coord__val { display: block; font-family: var(--ff-display); font-size: 1.15rem; margin-top: .1rem; }
.coord a.coord__val:hover { color: var(--bleu); }

/* ---------- Formulaire ---------- */
.contact__grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (max-width: 880px) { .contact__grid { grid-template-columns: 1fr; } }

.form { display: grid; gap: 1.1rem; }
.form__hp { position: absolute; left: -9999px; }   /* piège à robots, hors écran */
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }
.champ { display: grid; gap: .4rem; }
.champ label { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sumi-soft); }
.champ input, .champ select, .champ textarea {
  width: 100%; padding: .75rem .9rem;
  font-family: var(--ff-body); font-size: 1rem; color: var(--sumi);
  background: var(--washi-2); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.champ textarea { resize: vertical; min-height: 8rem; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none; border-color: var(--bleu); box-shadow: 0 0 0 3px rgba(0,119,177,.16);
}
.consent { display: flex; gap: .7rem; align-items: flex-start; font-size: .9rem; color: var(--sumi-soft); }
.consent input { flex: 0 0 auto; width: 1.05rem; height: 1.05rem; margin-top: .28rem; accent-color: var(--bleu); }
.consent a { color: var(--bleu-deep); text-decoration: underline; text-underline-offset: 2px; }
.form button { justify-self: start; }
.form__note { font-size: .82rem; color: var(--sumi-soft); margin: 0; }

/* ---------- Cartes de renvoi (accueil) ---------- */
/* 220px permet aux 4 cartes de tenir sur une seule ligne en grand écran,
   puis de passer à 2 colonnes sur tablette et 1 sur mobile. */
.apercus { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(1.3rem, 2.5vw, 2rem); }
.apercu {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--washi-2); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease;
}
.apercu:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
@media (prefers-reduced-motion: reduce) { .apercu:hover { transform: none; } }
.apercu img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.apercu__corps { display: flex; flex-direction: column; flex: 1; padding: clamp(1.2rem, 2.5vw, 1.6rem); }
.apercu h3 { font-size: 1.32rem; margin-bottom: .5rem; }
.apercu p { flex: 1; margin: 0 0 1.1rem; font-size: .95rem; color: var(--sumi-soft); }
.apercu__lien { font-weight: 700; font-size: .9rem; color: var(--bleu-deep); display: inline-flex; align-items: center; gap: .4rem; transition: gap .18s ease; }
.apercu:hover .apercu__lien { gap: .75rem; }

/* ---------- Page de confirmation d'envoi ---------- */
.merci { max-width: 38rem; margin-inline: auto; text-align: center; }
/* « display: block » est indispensable : un SVG est en ligne par défaut, donc
   « margin: 0 auto » ne le centrait pas, et il partageait sa ligne avec le
   paragraphe « .eyebrow » qui suit (lui-même en inline-flex). Les deux étaient
   alors centrés ensemble, ce qui décalait l'icône vers la gauche. */
.merci__icone { display: block; width: 60px; height: 60px; margin: 0 auto 1.4rem; color: var(--bleu); }
/* Texte un cran plus petit que le « .lede » standard : la colonne est étroite
   et centrée, une taille trop généreuse y produit des lignes trop courtes. */
.merci .lede { font-size: clamp(1rem, .97rem + .25vw, 1.13rem); }
.merci .btn { margin-top: 1.8rem; }

/* ---------- Espace membres ----------
   Le portail (le formulaire de mot de passe) n'est pas un fichier du site :
   il est écrit par netlify/edge-functions/espace-membres.js, qui charge
   cette feuille de style. Modifier les règles ci-dessous change donc
   l'apparence d'une page qui vit ailleurs — c'est voulu : rien de la
   charte visuelle ne doit être recopié dans du JavaScript. */
.portail { max-width: 26rem; margin-inline: auto; text-align: center; }
.portail__logo { margin: 0 auto 1.5rem; }
.portail .lede { font-size: clamp(1rem, .97rem + .25vw, 1.13rem); margin-top: 1.2rem; }

/* Le formulaire repasse à gauche : une étiquette et un champ centrés se
   lisent mal, et le champ occupe de toute façon toute la largeur. */
.portail__form { margin-top: 2rem; text-align: left; }
.portail__form button { justify-self: stretch; justify-content: center; }

/* Seul endroit du site où du rouge apparaît : un mot de passe refusé doit
   se voir immédiatement, et la palette du club (bleu, doré) ne sait pas
   dire « non ». Contraste vérifié : 7,4 pour ce texte sur ce fond. */
.portail__erreur {
  margin: 1.6rem 0 0; padding: .85rem 1.1rem; border-radius: var(--radius);
  background: #fbeaea; border: 1px solid #e3b9b9; color: #8a2b2b;
  font-size: .92rem; text-align: left;
}

.portail__aide { font-size: .88rem; color: var(--sumi-soft); margin: 1.6rem 0 0; }
.portail__retour { margin-top: 1.4rem; }

/* Colonne de lecture étroite et centrée, un cran plus large que le
   portail. Elle porte le formulaire d'abonnement aux annonces, présent
   sur /annonces/ et /membres/ : d'où un nom neutre, et non
   « membres-bloc » comme à sa création. */
.bloc-etroit { max-width: 40rem; margin-inline: auto; }

/* Renvoi vers /annonces/, où vit le formulaire d'abonnement — celui-ci
   mangeait un écran entier sur des pages que consultent surtout des
   visiteurs non encore inscrits (08/08/2026).
   Il vit DANS une section (bas des horaires sur Cours, bas des temps forts
   sur Calendrier) et non en bande séparée : une phrase et un bouton côte à
   côte, détachés du contenu par un simple filet. Il ne doit pas rivaliser
   avec la section qui l'accueille. */
.renvoi {
  margin-top: clamp(1.8rem, 3vw, 2.6rem);
  padding-top: clamp(1.4rem, 2.5vw, 2rem);
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1rem 1.6rem;
}
/* « flex: 1 1 20rem » : la phrase occupe la place restante, mais passe
   sous le bouton dès qu'elle ne peut plus tenir sur 20rem. */
.renvoi p { flex: 1 1 20rem; margin: 0; font-size: .95rem; color: var(--sumi-soft); }
.renvoi strong { color: var(--sumi); }
.renvoi .btn { flex: 0 0 auto; }

/* Groupe de cases à cocher (choix des listes d'annonces). Un « fieldset »
   plutôt qu'un simple div : c'est lui qui, avec sa légende, annonce aux
   lecteurs d'écran que ces cases forment UNE question. Ses bordures et
   marges par défaut sont retirées, elles ne servent à rien ici. */
.cases { margin: 0; padding: 0; border: 0; display: grid; gap: .7rem; }
.cases legend {
  padding: 0; margin-bottom: .75rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sumi-soft);
}
/* Toute la ligne est cliquable, étiquette comprise : on lui donne la
   hauteur d'une vraie cible tactile (44 px). Sans cela, un choix tenant
   sur une seule ligne n'en fait que 24 — trop peu au doigt, et deux choix
   voisins se confondent. Même exigence que le numéro du bandeau. */
.cases .consent { min-height: 44px; padding-block: .3rem; }

/* Message d'ERREUR affiché sous le bouton (js/abonnement.js), même teinte
   que celle du portail. Contraste vérifié : 7,4.
   Il n'existe plus de variante « succès » : depuis le 08/08/2026, une
   inscription réussie conduit à une vraie page — un petit message vert
   laissait croire que tout était réglé alors qu'il restait un clic à
   faire dans la boîte mail. Seules les erreurs restent sur place, pour
   qu'on puisse corriger sa saisie. */
.form__reponse { margin: 0; padding: .85rem 1.1rem; border-radius: var(--radius); font-size: .92rem; }
.form__reponse--ko { background: #fbeaea; border: 1px solid #e3b9b9; color: #8a2b2b; }

/* ---------- Visionneuse photo (créée par js/lightbox.js) ----------
   Sans JavaScript, rien de tout ceci n'apparaît : les vignettes restent
   de simples liens vers les images. */
.lb {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(15, 12, 9, .93);
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.lb[data-ouvert] { opacity: 1; visibility: visible; }

.lb__cadre { margin: 0; display: grid; justify-items: center; gap: .9rem; }
.lb__img {
  max-width: min(92vw, 1400px); max-height: 78vh;
  width: auto; height: auto;
  border-radius: var(--radius); box-shadow: var(--shadow-md);
}
/* Fondu au changement de photo. La classe est posée puis retirée par
   js/lightbox.js ; la photo suivante n'apparaît qu'une fois décodée. */
.lb__img { transition: opacity .16s ease; }
.lb__img--efface { opacity: 0; }
.lb__legende { text-align: center; max-width: 46rem; color: rgba(246, 241, 231, .82); font-size: .92rem; }
.lb__compteur {
  display: block; margin-top: .35rem;
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(246, 241, 231, .5);
}

.lb__btn {
  position: absolute; display: grid; place-items: center;
  width: 48px; height: 48px; padding: 0;
  border: 1px solid rgba(255, 255, 255, .32); border-radius: 50%;
  background: rgba(0, 0, 0, .35); color: #fff; cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.lb__btn:hover { background: #fff; color: var(--sumi); border-color: #fff; }
.lb__btn:focus-visible { outline: 2px solid var(--bleu-clair); outline-offset: 3px; }
.lb__btn svg { width: 22px; height: 22px; }
.lb__btn[hidden] { display: none; }

.lb__fermer { top: clamp(.6rem, 2vw, 1.4rem); right: clamp(.6rem, 2vw, 1.4rem); }
.lb__prec { left: clamp(.4rem, 2vw, 1.4rem); top: 50%; transform: translateY(-50%); }
.lb__suiv { right: clamp(.4rem, 2vw, 1.4rem); top: 50%; transform: translateY(-50%); }

/* Empêche la page située derrière de défiler pendant la consultation. */
body.lb-ouvert { overflow: hidden; }

@media (max-width: 600px) {
  .lb__btn { width: 42px; height: 42px; }
  .lb__img { max-height: 68vh; }
}
@media (prefers-reduced-motion: reduce) {
  .lb, .lb__img { transition: none; }
}

/* =====================================================================
   Calendrier de la saison — grands rendez-vous
   ===================================================================== */
.cal__note { margin-top: 1.4rem; font-size: .92rem; color: var(--sumi-soft); }
.cal__note a { color: var(--bleu-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* Grands rendez-vous : les deux ou trois moments phares de la saison. */
.temps-forts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1rem, 2.2vw, 1.6rem);
}
.tf {
  padding: 1.5rem 1.4rem 1.4rem;
  background: var(--washi-2);
  border: 1px solid var(--line);
  border-top: 4px solid var(--bleu);
  border-radius: var(--radius);
}
/* La date et l'icône partagent une ligne : la bulle à gauche, l'icône
   repoussée contre le bord droit de la carte par le space-between. */
.tf__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.tf__icone {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  color: var(--gold);
}
.tf__date {
  display: inline-block;
  font-family: var(--ff-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bleu-deep);
  /* Bulle bleue : le .92em de droite compense l'espace ajouté après la
     dernière lettre par letter-spacing, sinon le texte paraît décentré. */
  padding: .42em .92em .42em .8em;
  background: rgba(0, 119, 177, .10);
  border: 1px solid rgba(0, 119, 177, .30);
  border-radius: 999px;
}
.tf__titre {
  margin: .7rem 0 .5rem;
  font-family: var(--ff-display);
  font-size: 1.18rem;
  line-height: 1.25;
  color: var(--sumi);
}
.tf__desc { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--sumi-soft); }

/* =====================================================================
   Actualités — publications reprises de la page Facebook
   ===================================================================== */
/* Colonne de lecture volontairement étroite : un fil se lit, il ne se
   balaye pas. Au-delà d'environ 70 caractères par ligne, l'œil décroche.

   Les TROIS blocs du fil (ligne de source, publications, pied de fil)
   partagent la même largeur et sont centrés par « margin-inline: auto ».
   Sans ce centrage, la colonne restait collée au bord gauche et laissait
   un grand vide à droite. Les filets horizontaux s'alignent ainsi
   exactement sur la colonne. Si l'on change cette largeur, la changer
   aux trois endroits. */
.actu__source,
.actus,
.actus__fin { max-width: 44rem; margin-inline: auto; }

.actu__source {
  margin-bottom: 2rem;
  font-size: .88rem;
  color: var(--sumi-soft);
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--line);
}

.actus { display: grid; gap: clamp(2rem, 4vw, 3.2rem); }

/* Pied du fil : rappelle que seules les publications récentes sont reprises,
   et renvoie vers Facebook pour les précédentes. Centré, à la différence des
   publications elles-mêmes : c'est une fin de parcours, pas du texte à lire. */
/* Bloc de fin de liste : un renvoi centré sous la dernière publication. */
.actus__fin {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(2rem, 4vw, 2.6rem);
  border-top: 1px solid var(--line);
  text-align: center;
}
.actus__fin p {
  margin: 0 0 1.3rem;
  font-size: .95rem;
  color: var(--sumi-soft);
}

.actu {
  padding-bottom: clamp(2rem, 4vw, 3.2rem);
  border-bottom: 1px solid var(--line);
}
.actu:last-child { border-bottom: 0; padding-bottom: 0; }

/* Publication sans photo : un filet bleu à gauche lui donne une silhouette
   propre dans le fil, là où les autres sont identifiées par leur vignette.

   Le filet est dessiné par un pseudo-élément, et NON par un « border-left » :
   une bordure suit toute la hauteur de la carte, y compris l'espace qui la
   sépare de la suivante, et descendrait donc bien plus bas que le texte. Ici
   le trait s'arrête à son pied, en remontant de la hauteur de cet espace. */
.actu--texte {
  position: relative;
  /* Les 3 px du trait s'ajoutent au retrait : le texte reste exactement là
     où le plaçait la bordure qu'il remplace. */
  padding-left: calc(clamp(1rem, 2.5vw, 1.4rem) + 3px);
}
.actu--texte::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: clamp(2rem, 4vw, 3.2rem);   /* = le padding-bottom de .actu */
  width: 3px;
  background: var(--bleu);
}
/* La dernière publication n'a pas cet espace : le trait descend jusqu'en bas. */
.actu--texte:last-child::before { bottom: 0; }

.actu__date {
  display: block;
  font-family: var(--ff-body);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bleu-deep);
  margin-bottom: .9rem;
}

/* Photos d'une publication. Une seule vignette est visible ; les autres
   sont des liens masqués que la visionneuse fait défiler (voir
   js/lightbox.js). Le conteneur porte la marge, pas l'image. */
.actu__photos { margin-bottom: 1.2rem; }

.actu__vignette {
  position: relative;
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s ease;
}
.actu__vignette:hover { box-shadow: var(--shadow-md); }
.actu__vignette:focus-visible { outline: 2px solid var(--bleu); outline-offset: 3px; }

.actu__photo {
  width: 100%;
  display: block;
  transition: transform .4s ease;
}
.actu__vignette:hover .actu__photo { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .actu__photo, .actu__vignette { transition: none; }
  .actu__vignette:hover .actu__photo { transform: none; }
}

/* Pastille « N photos » : sans elle, rien n'indiquerait qu'il y en a
   d'autres à voir. Elle n'apparaît qu'à partir de deux photos. */
.actu__compte {
  position: absolute;
  right: .7rem;
  bottom: .7rem;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .3em .7em;
  border-radius: 3px;
  background: rgba(15, 12, 9, .72);
  color: #fff;
  font-family: var(--ff-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  backdrop-filter: blur(2px);
}

.actu p { margin: 0 0 .9rem; }
.actu p:last-of-type { margin-bottom: 0; }
.actu a { color: var(--bleu-deep); text-decoration: underline; text-underline-offset: 3px; }
.actu__vide { color: var(--sumi-soft); font-style: italic; }

/* Deux classes dans le sélecteur, pour l'emporter sur « .actu a » qui
   souligne tous les liens d'une publication : ici le soulignement est
   porté par le seul libellé, pas par le lien entier. */
.actu .actu__suite {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  margin-top: 1rem;
  font-family: var(--ff-body);
  font-size: .9rem;
  font-weight: 700;
  color: var(--bleu-deep);
  text-decoration: none;
  transition: gap .18s ease;
}
.actu__suite:hover { gap: .8em; }
.actu__suite:hover .actu__suite-texte {
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) { .actu__suite { transition: none; } }

/* =====================================================================
   Accueil — aperçu de la galerie
   Grille simple de six photos, dans l'esprit des vignettes de la page
   Galerie (même survol : léger zoom + voile bleu). Le bouton se trouve en
   haut, à côté du titre : sur mobile il précède les photos, donc on
   l'atteint sans tout faire défiler.
   ===================================================================== */
.galerie-apercu__tete {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 1rem 2rem;
  margin-bottom: clamp(1.8rem, 3vw, 2.6rem);
}
.galerie-apercu__tete .btn { flex: 0 0 auto; }

.galerie-apercu {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.5rem, 1.5vw, 1rem);
}
.galerie-apercu a {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .25s ease;
}
.galerie-apercu img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
/* Première photo mise en avant : une colonne, deux rangées de haut. Elle
   s'étire pour remplir les deux lignes (donc pas de ratio 4/3 imposé). Le
   « a.… » élève la spécificité au-dessus de « .galerie-apercu a ». */
.galerie-apercu a.galerie-apercu__grand { grid-row: span 2; aspect-ratio: auto; }
/* Voile bleu qui apparaît au survol, comme sur la page Galerie. */
.galerie-apercu a::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(17, 65, 121, 0));
  transition: background .3s ease;
}
.galerie-apercu a:hover { box-shadow: var(--shadow-md); }
.galerie-apercu a:hover img { transform: scale(1.05); }
.galerie-apercu a:hover::after { background: linear-gradient(180deg, transparent 40%, rgba(17, 65, 121, .28)); }

@media (max-width: 620px) {
  .galerie-apercu { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .galerie-apercu img { transition: none; }
}