/* =====================================================================
   Ju-Jutsu Traditionnel — Club de Koekelberg
   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                 */
  --mauve:       #8a3a86;   /* mauve principal — accent           */
  --mauve-deep:  #5c2358;   /* mauve foncé — survols / textes     */
  --mauve-clair: #cfa3cb;   /* mauve clair — sur fonds sombres    */
  --gold:        #b08d4c;   /* doré discret — rappel du logo      */
  --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(--mauve-deep);
  display: inline-flex;
  align-items: center;
  gap: .7em;
  margin: 0;
}
.eyebrow--light { color: var(--mauve-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(--mauve); }

.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(--mauve);
  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(--mauve); color: #fff; }
.btn--primary:hover { background: var(--mauve-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; }

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

/* Sur petit écran, le bandeau du haut disparaît ENTIÈREMENT (08/08/2026,
   après Beauraing). 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 au pied de page et dans les bandes d'appel à
   l'action.
   ⚠️ Le numéro n'est donc plus cliquable depuis le haut de page sur
   téléphone. */
@media (max-width: 620px) {
  /* Le bandeau parti, la pile se réduit au seul en-tête. Hauteur MESURÉE :
     77 px pour cet en-tête (logo de 66 px, « .wrap » à
     min-height 76 px). À remesurer si l'on touche à l'en-tête. */
  :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(--mauve-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(--mauve); 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);
  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; }

/* Variante avec légende sous la photo. Le conteneur devient un <figure>, qui
   porte une marge par DÉFAUT dans les navigateurs (1em en haut et en bas,
   40px sur les côtés) : on la remet à zéro pour qu'il se comporte exactement
   comme le <div class="feature__media"> qu'il remplace, sinon l'image
   rétrécit et se décale dans sa colonne. */
figure.feature__media { margin: 0; }
.feature__legende {
  margin: .9rem 0 0;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--sumi-soft);
}

@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(--mauve); 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(--mauve); padding: .38em .8em; border-radius: 3px; margin-bottom: 1rem;
}
.cours-card__age { color: var(--mauve-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(--mauve); 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 mauve principal.
   ATTENTION avant d'éclaircir : le texte est blanc, et --mauve offre un
   contraste de 6,93 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(--mauve) 0%, #7e357a 52%, #72306e 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 mauve, 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(--mauve-deep); }
.btn--clair:hover { background: var(--washi); color: var(--mauve-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(--mauve-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; }
/* Subvention communale — propre à Koekelberg, les deux autres clubs n'en ont
   pas. Le bloc vit entre les colonnes et la ligne légale, VOLONTAIREMENT sans
   filet à lui : celui de « .footer__bottom » ferme déjà le pied de page, et
   deux traits si proches l'alourdiraient.
   Le logo de la Commune garde ses couleurs d'origine (vert), qui ne sont pas
   celles du club : c'est un logo officiel, on ne le teinte pas. */
.footer__soutien {
  margin-top: 2.2rem;
  display: flex; flex-direction: column; align-items: flex-start; gap: .6rem;
  font-size: .82rem; color: rgba(246,241,231,.55);
}
.footer__soutien p { margin: 0; }
/* Servi en 300 px pour rester net sur les écrans à forte densité. */
.footer__soutien img { width: 150px; height: 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; }

@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(--mauve-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(--mauve-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(--mauve);
}
.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(--mauve-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(--mauve-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(--mauve); }
@media (prefers-reduced-motion: reduce) { .docs a:hover { transform: none; } }
.docs__icone { flex: 0 0 auto; width: 32px; height: 40px; color: var(--mauve); }
.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(--mauve-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(--mauve); 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(--mauve); }

/* ---------- 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(--mauve); box-shadow: 0 0 0 3px rgba(138,58,134,.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(--mauve); }
.consent a { color: var(--mauve-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(--mauve-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(--mauve); }
/* 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; }

/* =====================================================================
   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(--mauve-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(--mauve);
  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(--mauve-deep);
  /* Bulle mauve : 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(138, 58, 134, .10);
  border: 1px solid rgba(138, 58, 134, .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); }