/* =====================================================================
   Ju-Jutsu Traditionnel — Club de Houyet
   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                 */
  --vert:        #14803f;   /* vert principal — accent            */
  --vert-deep:   #0d5c2c;   /* vert foncé — survols / textes      */
  --vert-clair:  #9ad2ab;   /* vert 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); }

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

.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(--vert);
  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(--vert); color: #fff; }
.btn--primary:hover { background: var(--vert-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.
   À RETIRER quand le club ne sera plus une nouveauté (fin 2026 ?). */
.topbar__neuf {
  display: inline-block;
  margin-left: .3em;
  padding: .15em .4em;
  border-radius: 2px;
  background: var(--vert-neuf);
  color: #0d1f0e;
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.05;
  vertical-align: .12em;
}

/* Sur petit écran, le bandeau tombait sur trois lignes. On le range en
   grille 2 × 2 : téléphone et espace membre en haut, les deux clubs en
   dessous. « display: contents » fait disparaître le conteneur .topbar__links
   de la mise en page : ses trois liens deviennent alors des cases de la
   grille au même titre que le numéro de téléphone, ce qui donne les
   quatre cases attendues. */
@media (max-width: 620px) {
  /* Le bandeau passe sur deux lignes : la pile du haut grandit d'autant, et
     le hero doit en tenir compte pour continuer à remplir l'écran. */
  :root { --pile-haut: 143px; }   /* bandeau 66 + en-tête 77 */

  .topbar .wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .45rem 1rem;
    justify-content: initial;
    /* Chaque lien est centré dans sa case. On centre le TEXTE plutôt que la
       case elle-même : le lien continue ainsi d'occuper toute la largeur
       disponible, ce qui garde une zone tactile confortable au doigt. */
    text-align: center;
  }
  .topbar__links { display: contents; }
}

.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: 58px; height: 58px; 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(--vert-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(--vert); outline-offset: 3px; }

/* Seuil élargi à 1000px : la barre compte désormais 6 rubriques plus le bouton,
   elle devenait trop serrée entre 900 et 1000px avant de basculer en burger. */
@media (max-width: 1000px) {
  /* 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);
}
/* 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(--vert); 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(--vert); padding: .38em .8em; border-radius: 3px; margin-bottom: 1rem;
}
.cours-card__age { color: var(--vert-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; } }

/* =====================================================================
   Galerie
   ===================================================================== */
.galerie { background: var(--washi-3); border-block: 1px solid var(--line); }
.galerie__grid {
  columns: 4 200px;
  column-gap: 12px;
}
/* Repli sans JavaScript : on réduit le nombre de colonnes pour les tout
   petits albums, sinon la dernière colonne reste vide. Le « :not() » laisse
   la main au masonry du script dès qu'il est actif. */
.galerie__grid:not(.js-masonry):has(a:nth-child(3):last-child) { columns: 3 200px; }
.galerie__grid:not(.js-masonry):has(a:nth-child(2):last-child) { columns: 2 200px; }
.galerie__grid:not(.js-masonry):has(a:only-child)              { columns: 1 200px; max-width: 520px; }

/* Masonry piloté par js/masonry.js. Les rangées de 8 px et la marge de 12 px
   sont reprises telles quelles dans le script : modifier l'une sans l'autre
   décalerait la mise en page. */
.galerie__grid.js-masonry {
  columns: auto;
  display: grid;
  /* « auto-fit » et non « auto-fill » : les colonnes restées vides sont
     supprimées, et les photos d'un petit album s'étalent au lieu de laisser
     un blanc à droite. */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: 8px;
  align-items: start;
  column-gap: 12px;
  row-gap: 0;
}
.galerie__grid a {
  display: block; margin-bottom: 12px; break-inside: avoid;
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
  position: relative;
}
.galerie__grid img { width: 100%; transition: transform .4s ease; }
.galerie__grid a::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(13,92,44,.0));
  transition: background .3s ease;
}
.galerie__grid a:hover img { transform: scale(1.05); }
.galerie__grid a:hover::after { background: linear-gradient(180deg, transparent 40%, rgba(13,92,44,.28)); }
@media (prefers-reduced-motion: reduce) { .galerie__grid img { transition: none; } }

/* =====================================================================
   Appel à l'action — contact
   ===================================================================== */
.cta {
  position: relative; overflow: hidden;
  background: var(--vert); 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 vers une teinte très sombre, d'où une bande terne.
   Le voile est supprimé et le dégradé reste dans la famille du vert principal.
   ATTENTION avant d'éclaircir davantage : le texte est blanc, et --vert est
   déjà la limite (contraste 5,01 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(--vert) 0%, #0f7538 52%, #0a5c2b 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 vert, 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(--vert-deep); }
.btn--clair:hover { background: var(--washi); color: var(--vert-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; }
.footer h2 { font-family: var(--ff-body); font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--vert-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__badges { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; margin-top: .3rem; }
.footer__badges img { background: #fff; padding: 8px 10px; border-radius: 4px; }
.footer__badges img.lfbsel { height: 40px; width: auto; }
.footer__badges img.aejt { height: 56px; width: auto; }
.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; }
/* Mention temporaire : les photos sont celles de Beauraing, en attendant
   les vraies photos de Houyet. À retirer quand elles seront remplacées. */
.footer__illus { margin-top: 1rem; font-size: .8rem; font-style: italic; color: rgba(246,241,231,.5); }

@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.

   Bloc JUMEAU de celui du site de Beauraing : toute correction vaut pour les deux. */
@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(--vert-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(--vert-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(--vert);
}
.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(--vert-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(--vert-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; }

/* ---------- 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 ---------- */
/* Les documents sont rangés par public (enfants / ados & adultes). Chaque
   groupe est complet, certificat médical compris : un parent trouve ainsi
   tout ce qui le concerne sans avoir à piocher ailleurs. Le certificat est
   donc volontairement présent dans les deux groupes — c'est le même fichier. */
.docs__groupe + .docs__groupe { margin-top: 2.4rem; }
.docs__groupe h3 {
  font-family: var(--ff-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vert-deep);
  margin-bottom: .9rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--line);
}
.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(--vert); }
@media (prefers-reduced-motion: reduce) { .docs a:hover { transform: none; } }
.docs__icone { flex: 0 0 auto; width: 32px; height: 40px; color: var(--vert); }
.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); }

/* Aperçu A4 : le calendrier complet exporté. Le PDF s'ouvre via le bouton. */
.apercu-a4 { margin: 0; }
.apercu-a4 img {
  display: block;
  width: 100%;
  max-width: 820px;
  margin-inline: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.apercu-a4 figcaption { margin-top: 1.3rem; text-align: center; }

/* ---------- Galerie par événement ---------- */
.album + .album { margin-top: clamp(2.5rem, 5vw, 4rem); }
.album__head {
  display: flex; flex-wrap: wrap; gap: .2rem 1rem; align-items: baseline;
  margin-bottom: 1.2rem; padding-bottom: .6rem; border-bottom: 2px solid var(--line);
}
.album__head h3 { font-size: clamp(1.3rem, 1.1rem + .9vw, 1.65rem); }
.album__date { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--vert-deep); }

/* ---------- 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(--vert); 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(--vert); }

/* ---------- 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(--vert); box-shadow: 0 0 0 3px rgba(20,128,63,.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(--vert); }
.consent a { color: var(--vert-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(--vert-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(--vert); }
/* 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; }

/* ---------- 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);
}
.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(--vert-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 { 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(--vert-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(--gold);
  border-radius: var(--radius);
}
.tf__date {
  display: inline-block;
  font-family: var(--ff-body);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--vert-deep);
}
.tf__titre {
  margin: .5rem 0;
  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
   ===================================================================== */
.actu__source {
  margin: 0 0 2rem;
  font-size: .88rem;
  color: var(--sumi-soft);
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--line);
}
.actu__source a { color: var(--vert-deep); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* 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. */
.actus { display: grid; gap: clamp(2rem, 4vw, 3.2rem); max-width: 44rem; }

.actu {
  padding-bottom: clamp(2rem, 4vw, 3.2rem);
  border-bottom: 1px solid var(--line);
}
.actu:last-child { border-bottom: 0; padding-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(--vert-deep);
  margin-bottom: .9rem;
}

.actu__photo {
  width: 100%;
  border-radius: var(--radius);
  margin-bottom: 1.2rem;
  box-shadow: var(--shadow-sm);
}

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

.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(--vert-deep);
  text-decoration: none;
  transition: gap .18s ease;
}
.actu__suite:hover { gap: .8em; 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 coloré). 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 coloré 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(13, 92, 44, 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(13, 92, 44, .28)); }

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