/* ==========================================================================
   KARATE-DO SHOTOKAI FRANCE — kds-france.com
   Refonte 2026 — design "encre & vermillon"
   ========================================================================== */

:root {
  --paper: #f7f7f4;
  --paper-2: #eeede8;
  --ink: #16151a;
  --ink-2: #232228;
  --ink-soft: #56555a;
  --crimson: #8e1f2f;
  --crimson-dark: #64121f;
  --gold: #c9a227;
  --stone: #83828a;
  --line: rgba(22, 21, 26, .14);
  --line-light: rgba(247, 247, 244, .16);
  --font-display: "Zen Old Mincho", "Times New Roman", serif;
  --font-body: "Manrope", "Helvetica Neue", sans-serif;
  --shadow-card: 0 18px 45px -18px rgba(22, 21, 26, .35);
  --ease: cubic-bezier(.22, .61, .21, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  font-size: 16.5px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--crimson); text-decoration: none; }
a:hover { color: var(--crimson-dark); }

::selection { background: var(--crimson); color: var(--paper); }

/* ---------- typo ---------- */

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--crimson);
}
.kicker::before {
  content: "";
  width: 2.2rem;
  height: 1px;
  background: var(--crimson);
}

.section-title {
  font-size: clamp(1.9rem, 4vw, 2.9rem);
  margin: .6rem 0 1.2rem;
}

.lead { font-size: 1.12rem; color: var(--ink-soft); }

/* ---------- layout ---------- */

.wrap { width: min(1180px, 92vw); margin-inline: auto; }
.wrap-narrow { width: min(860px, 92vw); margin-inline: auto; }

section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }

/* ---------- header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: rgba(22, 21, 26, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-light);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .8rem 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: .8rem;
  color: var(--paper);
}
.brand:hover { color: #fff; }
.brand svg, .brand-logo { width: 40px; height: 40px; flex: none; object-fit: contain; }
.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: .12em;
  line-height: 1.25;
}
.brand-name small {
  display: block;
  font-family: var(--font-body);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .34em;
  color: var(--gold);
  text-transform: uppercase;
}

.main-nav { display: flex; align-items: center; gap: 1.35rem; }
.main-nav a {
  color: rgba(246, 243, 236, .78);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .35rem 0;
  border-bottom: 2px solid transparent;
  transition: color .25s, border-color .25s;
}
.main-nav a:hover { color: #fff; }
.main-nav a.active { color: #fff; border-color: var(--crimson); }

.nav-cta {
  background: var(--crimson);
  color: #fff !important;
  padding: .55rem 1.1rem !important;
  border: none !important;
  border-radius: 2px;
  transition: background .25s;
}
.nav-cta:hover { background: var(--crimson-dark); }

/* ---------- nav dropdowns ---------- */

.nav-dropdown { position: relative; }

.nav-drop-btn {
  display: flex;
  align-items: center;
  gap: .4rem;
  background: none;
  border: none;
  font-family: var(--font-body);
  color: rgba(246, 243, 236, .78);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .35rem 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color .25s, border-color .25s;
}
.nav-drop-btn:hover { color: #fff; }
.nav-drop-btn .chev { width: 9px; height: 6px; flex: none; transition: transform .25s var(--ease); }
.nav-dropdown.open .nav-drop-btn { color: #fff; }
.nav-dropdown.open .nav-drop-btn .chev { transform: rotate(180deg); }
.nav-drop-btn.active { color: #fff; border-color: var(--crimson); }

.nav-drop-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  min-width: 230px;
  background: var(--ink);
  border: 1px solid var(--line-light);
  border-radius: 3px;
  padding: .45rem;
  margin-top: .7rem;
  box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s, transform .2s, visibility .2s;
  z-index: 20;
}
.nav-dropdown.open .nav-drop-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-drop-panel a {
  display: block;
  padding: .65rem .9rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
  color: rgba(246, 243, 236, .8);
  border-radius: 2px;
  border-bottom: none;
}
.nav-drop-panel a:hover { background: rgba(246, 243, 236, .07); color: #fff; }
.nav-drop-panel a.active { color: var(--gold); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line-light);
  border-radius: 3px;
  color: var(--paper);
  font-size: 1.3rem;
  line-height: 1;
  padding: .45rem .7rem;
  cursor: pointer;
}
/* Icône ☰ → ✕ (changée en JS, cf. main.js) : le fond se teinte aussi en
   ouvert, pour que l'état soit visible même sans regarder le symbole de près. */
.nav-toggle.is-open { background: rgba(246, 243, 236, .1); border-color: var(--gold); }

/* ---------- sélecteur de langue ---------- */

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(246, 243, 236, .08);
  border: 1px solid var(--line-light);
  border-radius: 999px;
  padding: 3px;
  flex: none;
}
.lang-toggle button {
  border: none;
  background: transparent;
  color: rgba(246, 243, 236, .55);
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .05em;
  padding: .32rem .65rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.lang-toggle button:hover { color: #fff; }
.lang-toggle button.is-active {
  background: var(--crimson);
  color: #fff;
}

/* Espace membres : bandeau teinté (au lieu du noir du site public) pour qu'on
   comprenne au premier coup d'œil qu'on est passé sur un menu différent —
   demande explicite de Stéphane, ce n'était pas assez visible avant. */
.prive-page .site-header {
  background: rgba(100, 18, 31, .93);
  border-bottom-color: rgba(201, 162, 39, .25);
}
.prive-page .main-nav a.active { border-color: var(--gold); }
.prive-page .nav-cta {
  background: var(--gold);
  color: var(--ink) !important;
}
.prive-page .nav-cta:hover { background: #b6911f; }

/* Espace membres en mobile : même burger que le site public (cf. règles
   générales .nav-toggle/.main-nav plus bas), pas de traitement spécial ici.
   Pour signaler que le menu a changé sans imposer un menu toujours déroulé
   (essayé, mais personne n'a de raison de rouvrir un burger qu'on pense déjà
   connaître) : le menu s'ouvre tout seul une fois à l'arrivée dans l'espace
   membres, cf. main.js — se referme normalement ensuite, comme un burger classique. */

@media (max-width: 1120px) {
  .nav-toggle { display: block; }
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ink);
    border-bottom: 1px solid var(--line-light);
    max-height: 0;
    overflow: hidden;
    /* Pas de transition tant que .nav-ready n'est pas posé sur <html> (cf.
       main.js) : sur certains moteurs mobiles (WebKit iOS), une transition
       déjà active pendant que la mise en page se stabilise peut afficher une
       frame intermédiaire (menu entrouvert) au tout premier chargement,
       corrigée seulement au premier scroll. En désactivant la transition
       jusqu'à ce que la page ait fini de se peindre une première fois, il n'y
       a plus de transition en cours pouvant produire cette frame fantôme. */
    transition: none;
  }
  html.nav-ready .main-nav { transition: max-height .4s var(--ease); }
  .main-nav.open { max-height: 80vh; overflow: auto; }
  .main-nav a {
    padding: .9rem 4vw;
    border-bottom: 1px solid rgba(246, 243, 236, .07);
  }
  .main-nav a.active { border-color: rgba(246, 243, 236, .07); color: var(--gold); }
  .nav-cta { margin: .9rem 4vw 1.2rem; text-align: center; border-radius: 2px; }

  .nav-drop-btn {
    width: 100%;
    justify-content: space-between;
    padding: .9rem 4vw;
    border-bottom: 1px solid rgba(246, 243, 236, .07);
  }
  .nav-drop-panel {
    position: static;
    transform: none;
    margin-top: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background: rgba(0, 0, 0, .18);
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s var(--ease);
  }
  .nav-dropdown.open .nav-drop-panel { max-height: 260px; padding: .3rem 0 .5rem; transform: none; }
  .nav-drop-panel a { padding: .7rem 7vw; }
}

/* ---------- hero (accueil) ---------- */

.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  background: linear-gradient(105deg, #131316 0%, #1e1d22 55%, #26232a 100%);
  color: var(--paper);
  overflow: hidden;
  padding: 7.5rem 0 4rem;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.hero h1 {
  color: var(--paper);
  font-size: clamp(2.4rem, 5.4vw, 4.3rem);
  font-weight: 900;
  letter-spacing: .04em;
  margin: 1.1rem 0 1.4rem;
}
.hero h1 em {
  font-style: normal;
  color: var(--gold);
  display: block;
  font-size: .48em;
  font-weight: 700;
  letter-spacing: .18em;
  margin-top: .55rem;
}

.hero p.lead { color: rgba(246, 243, 236, .75); max-width: 34rem; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; }

.btn {
  display: inline-block;
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .95rem 1.9rem;
  border-radius: 2px;
  transition: transform .25s var(--ease), background .25s, color .25s;
}
.btn:active { transform: translateY(2px); }
.btn-primary { background: var(--crimson); color: #fff; }
.btn-primary:hover { background: var(--crimson-dark); color: #fff; }
.btn-ghost { border: 1px solid rgba(246, 243, 236, .35); color: var(--paper); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.btn-dark { border: 1.5px solid var(--ink); color: var(--ink); }
.btn-dark:hover { background: var(--ink); color: var(--paper); }

.hero-figure { position: relative; justify-self: center; }
.hero-figure img {
  width: min(400px, 78vw);
  border-radius: 3px;
  box-shadow: 0 35px 70px -25px rgba(0, 0, 0, .7);
}
.hero-figure::before {
  content: "";
  position: absolute;
  inset: -14px 14px 14px -14px;
  border: 1px solid rgba(176, 141, 63, .5);
  border-radius: 3px;
  pointer-events: none;
}
.hero-figure figcaption {
  margin-top: 1.1rem;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(246, 243, 236, .55);
  text-align: center;
}

.jp-vertical {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: clamp(.5rem, 2vw, 2.2rem);
  writing-mode: vertical-rl;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  letter-spacing: .5em;
  color: rgba(246, 243, 236, .12);
  user-select: none;
  pointer-events: none;
}

.hero-kiku {
  position: absolute;
  bottom: -12%;
  left: -6%;
  width: 46vw;
  max-width: 620px;
  opacity: .05;
  pointer-events: none;
  object-fit: contain;
}

@media (max-width: 900px) {
  .hero { min-height: 0; padding-top: 6.5rem; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-figure { order: -1; }
  .hero-figure img { width: min(330px, 80vw); margin-inline: auto; }
  .jp-vertical { display: none; }
}

/* ---------- bandes sombres ---------- */

.band-dark {
  background: linear-gradient(120deg, #17171b, #232227);
  color: var(--paper);
}
.band-dark h2, .band-dark h3 { color: var(--paper); }
.band-dark .lead, .band-dark p { color: rgba(246, 243, 236, .78); }

/* ---------- section stage (photo de groupe) ---------- */

.stage-figure {
  position: relative;
  margin-top: 2.5rem;
}
.stage-figure img {
  width: 100%;
  border-radius: 3px;
  box-shadow: var(--shadow-card);
  border: 6px solid #fff;
}
.stage-figure figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  margin-top: 1rem;
  font-size: .85rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--stone);
}
.stage-figure figcaption strong { color: var(--crimson); font-weight: 700; }

/* Grille à colonnes FIXES (pas auto-fit) : nécessaire pour savoir, en CSS pur,
   où une ligne se termine (:nth-child(5n)) et ne pas y afficher de flèche —
   avec auto-fit le nombre de colonnes dépend de la largeur réelle et devient
   imprévisible, ce qui cassait le repère "01 → 02 → 03..." dès que le nombre
   de stages affichés dépasse une ligne (jusqu'à une dizaine par an désormais,
   historique complet importé en base). */
.stage-dates {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  /* Écart vertical volontairement large : le badge numéroté de chaque carte
     déborde de ~2.6rem au-dessus d'elle (cf. .date-card::before), il faut au
     moins ça entre deux lignes pour qu'il n'empiète pas sur la carte du dessus
     dès que la grille passe sur plusieurs lignes (7+ stages désormais). */
  gap: 3.2rem 1rem;
  margin-top: 3.6rem;
  position: relative;
  counter-reset: stage;
}
.date-card {
  counter-increment: stage;
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1.5rem 1.4rem 1.3rem;
  /* Position/contenu de la flèche pilotés par variables (redéfinies dans le
     @media mobile ci-dessous) plutôt que par une règle ::after concurrente :
     deux sélecteurs ::after de spécificités différentes (desktop exclut les
     fins de ligne via :nth-child(5n), pas le mobile) se battaient sinon, et
     la règle la plus spécifique gagnait même à l'intérieur du media query. */
  --arrow-content: "→";
  --arrow-top: -1.75rem;
  --arrow-bottom: auto;
  --arrow-left: auto;
  --arrow-right: -1.35rem;
  --arrow-transform: translateY(-50%);
}
.date-card::before {
  content: counter(stage, decimal-leading-zero);
  position: absolute;
  top: -1.75rem;
  left: 1.4rem;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--crimson);
  color: var(--crimson);
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
/* Desktop : pas de flèche en fin de ligne ("01 → 02 → ... → 05" puis 06
   recommence en dessous, sans flèche entre 05 et 06 — pas côte à côte).
   Le mobile a sa propre règle équivalente dans le @media plus bas (le
   sélecteur y est différent : plus de notion de "fin de ligne" en colonne
   unique, il fallait éviter que les spécificités des deux règles se battent). */
.date-card:not(:last-child):not(:nth-child(5n))::after {
  content: var(--arrow-content);
  position: absolute;
  top: var(--arrow-top);
  bottom: var(--arrow-bottom);
  left: var(--arrow-left);
  right: var(--arrow-right);
  width: 28px;
  text-align: center;
  transform: var(--arrow-transform);
  color: var(--stone);
  font-size: .85rem;
  z-index: 1;
}
@media (max-width: 1120px) {
  .stage-dates {
    grid-template-columns: 1fr;
    gap: 1.6rem;
    margin-top: 1.6rem;
  }
  .date-card {
    padding-left: 3.4rem;
    /* Empilées en une colonne : la flèche pointe vers le bas, alignée avec la
       pastille numérotée (même position horizontale que celle-ci). */
    --arrow-content: "↓";
    --arrow-top: auto;
    --arrow-bottom: -1.3rem;
    --arrow-left: 0.4rem;
    --arrow-right: auto;
    --arrow-transform: none;
  }
  .date-card::before {
    top: 1.4rem;
    left: 0.4rem;
    transform: none;
  }
  /* En colonne unique, toute carte sauf la dernière obtient la flèche —
     y compris celles qui étaient "fin de ligne" en grille desktop (5n). */
  .date-card:not(:last-child)::after {
    content: var(--arrow-content);
    position: absolute;
    top: var(--arrow-top);
    bottom: var(--arrow-bottom);
    left: var(--arrow-left);
    right: var(--arrow-right);
    width: 28px;
    text-align: center;
    transform: var(--arrow-transform);
    color: var(--stone);
    font-size: .85rem;
    z-index: 1;
  }
}
.dc-when {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  margin-top: .1rem;
}
.dc-range {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--ink);
}
.dc-monthyear {
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--ink-soft);
  white-space: nowrap;
}
.dc-where {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .6rem;
}
.dc-notes {
  margin-top: .55rem;
  font-size: .88rem;
  line-height: 1.45;
  color: var(--ink-soft);
}
/* Mention spéciale d'un stage (ex. "20e anniversaire") : badge doré, plus en
   avant que les notes libres — même famille visuelle que le macaron "Depuis"
   des fiches club. Décliné en rappel discret sur la ligne du stage dans la
   carte "Prochains stages" de l'espace membres (.ds-mention). */
.dc-mention {
  display: inline-block;
  margin-top: .6rem;
  padding: .22rem .6rem;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--crimson-dark);
  background: rgba(201, 162, 39, .14);
  border: 1px solid rgba(201, 162, 39, .55);
  border-radius: 999px;
}
/* Même pastille que .dc-mention (carte publique) plutôt qu'un texte inline
   nu : sans quoi "20E ANNIVERSAIRE" se retrouvait à couper au milieu du mot
   en bout de ligne, à côté de la date — illisible (retour Stéphane du
   20/08/2026). white-space: nowrap empêche justement cette coupure : la
   pastille entière passe à la ligne suivante plutôt que de se briser. */
.ds-mention {
  display: inline-block;
  margin-left: .5rem;
  padding: .12rem .55rem;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--crimson-dark);
  background: rgba(201, 162, 39, .14);
  border: 1px solid rgba(201, 162, 39, .55);
  border-radius: 999px;
}
.dc-flag { font-size: 1.05rem; line-height: 1; }
.dc-place {
  flex-basis: 100%;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--stone);
}
.dc-country {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--stone);
  opacity: .6;
}
.dc-tag {
  display: none;
  position: absolute;
  top: .9rem;
  right: .9rem;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--stone);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: .25rem .6rem;
  background: var(--paper-2);
}
.date-card.is-past { background: var(--paper-2); opacity: .82; }
.date-card.is-past .dc-tag { display: inline-block; }
.date-card.is-past .dc-range,
.date-card.is-past .dc-monthyear { color: var(--stone); }
.date-card.is-past::before { border-color: var(--line); color: var(--stone); background: var(--paper-2); }

/* ---------- section MBE ---------- */

.mbe {
  position: relative;
  overflow: hidden;
}
.mbe-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.mbe-figure { position: relative; }
.mbe-figure img {
  width: min(360px, 80vw);
  margin-inline: auto;
  border-radius: 3px;
  box-shadow: var(--shadow-card);
  border: 6px solid #fff;
}
.mbe-figure figcaption {
  text-align: center;
  margin-top: 1rem;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--stone);
}

.mbe-medal {
  display: inline-flex;
  align-items: center;
  gap: 1.1rem;
  margin: 1.4rem 0 .6rem;
  padding: 1rem 1.4rem;
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: 3px;
}
.mbe-medal svg { width: 46px; height: 74px; flex: none; }
.mbe-medal .t { font-size: .95rem; line-height: 1.5; }
.mbe-medal .t strong { font-family: var(--font-display); font-size: 1.05rem; }

blockquote.pull {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  line-height: 1.55;
  color: var(--ink-2);
  border-left: 3px solid var(--crimson);
  padding-left: 1.6rem;
  margin: 2rem 0;
}
blockquote.pull footer {
  font-family: var(--font-body);
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--stone);
  margin-top: .9rem;
}

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

/* ---------- hommage ---------- */

.hommage {
  text-align: center;
  padding: clamp(3rem, 6vw, 4.5rem) 0;
  background: var(--ink);
  color: var(--paper);
}
.hommage .jp {
  font-family: var(--font-display);
  color: var(--gold);
  letter-spacing: .5em;
  font-size: 1rem;
  margin-bottom: 1rem;
}
.hommage h2 {
  color: var(--paper);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 700;
}
.hommage p { color: rgba(246, 243, 236, .6); margin-top: .8rem; }

/* ---------- cards clubs ---------- */

.club-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.2rem;
  margin-top: 2.4rem;
}
.club-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1.6rem 1.6rem 1.4rem;
  transition: transform .3s var(--ease), box-shadow .3s;
  position: relative;
  overflow: hidden;
}
.club-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 3px;
  background: var(--crimson);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.club-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.club-card:hover::after { transform: scaleX(1); }
.club-card h3 { font-size: 1.25rem; margin-bottom: .4rem; color: var(--ink); }
.club-card .region {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}
.club-card .region .flag { font-size: 1.05rem; letter-spacing: 0; }
.club-card .region .dept {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  color: var(--gold);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: 0;
}
.club-card p { font-size: .92rem; color: var(--ink-soft); margin-top: .6rem; padding-right: 1.6rem; }
.club-card a.more {
  display: inline-block;
  margin-top: .9rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
/* Carte-club de l'accueil : toute la carte est le lien (une seule et même
   action "en savoir plus" répétée sur chaque club), une flèche en coin sert
   d'indice visuel plutôt qu'un bouton texte redondant sur chaque carte. */
.club-card.club-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.club-card-link::before {
  content: "→";
  position: absolute;
  right: 1.6rem;
  bottom: 1.3rem;
  font-size: .95rem;
  color: var(--crimson);
  transition: transform .25s var(--ease);
}
.club-card-link:hover::before { transform: translateX(4px); }

/* liste des clubs par pays (page Clubs, section internationale) */
.club-card .intl-liste { list-style: none; margin-top: .7rem; }
.club-card .intl-liste li {
  font-size: .88rem;
  padding: .3rem 0;
  border-top: 1px solid var(--line);
  color: var(--ink);
}
.club-card .intl-liste li:first-child { border-top: none; }
.club-card .intl-liste a { color: var(--ink); font-weight: 600; }
.club-card .intl-liste a:hover { color: var(--crimson); }
.club-card details { margin-top: .3rem; }
.club-card details summary {
  cursor: pointer;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--crimson);
  padding-top: .5rem;
}
.club-card details[open] summary { margin-bottom: -.3rem; }

/* ---------- mini galerie (photos éparses) ---------- */

.mini-gallery {
  display: flex;
  gap: .9rem;
  margin: 1.8rem 0 .4rem;
  flex-wrap: wrap;
}
.mini-gallery img {
  width: 92px;
  height: 92px;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: var(--shadow-card);
  border: 3px solid #fff;
}
.mini-gallery img:nth-child(1) { transform: rotate(2deg); }
.mini-gallery img:nth-child(2) { transform: translateY(10px) rotate(-2deg); }
.mini-gallery img:nth-child(3) { transform: translateY(4px) rotate(1.5deg); }

/* ---------- page hero (pages intérieures) ---------- */

.page-hero {
  position: relative;
  background: linear-gradient(115deg, #17171b, #242329);
  color: var(--paper);
  padding: 9.5rem 0 4rem;
  overflow: hidden;
}
.page-hero h1 {
  color: var(--paper);
  font-size: clamp(2.1rem, 4.5vw, 3.4rem);
  font-weight: 900;
  letter-spacing: .04em;
  margin-top: .9rem;
}
.page-hero .lead { max-width: 46rem; margin-top: 1rem; color: rgba(246, 243, 236, .75); }
.page-hero .jp-vertical { font-size: clamp(1.4rem, 2.4vw, 2rem); }

/* ---------- prose (longs textes) ---------- */

.prose { max-width: 800px; }
.prose p {
  margin-bottom: 1.35rem;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}
.prose h2 {
  font-size: 1.7rem;
  margin: 2.8rem 0 1.1rem;
}
.prose h3 { font-size: 1.25rem; margin: 2.2rem 0 .9rem; }
.prose strong { color: var(--ink-2); }
.prose .intro-drop::first-letter {
  font-family: var(--font-display);
  font-size: 3.4em;
  font-weight: 900;
  color: var(--crimson);
  float: left;
  line-height: .85;
  padding-right: .12em;
  padding-top: .05em;
}

.note {
  background: var(--paper-2);
  border-left: 3px solid var(--gold);
  border-radius: 3px;
  padding: 1.2rem 1.5rem;
  font-size: .95rem;
  margin: 1.8rem 0;
}

.sep-kiku {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin: 3rem 0;
}
.sep-kiku::before, .sep-kiku::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
/* Le vrai logo (photo/PNG) ne peut pas se recolorer comme l'ancien SVG
   générique via `color`/currentColor — élément vide (pas de bitmap propre)
   avec un fond uni découpé par un masque CSS à la forme du logo. */
.sep-kiku .kiku-mark {
  display: block;
  width: 20px;
  height: 20px;
  flex: none;
  background: var(--crimson);
  -webkit-mask: url('../images/logo-kiku-gold.png') no-repeat center / contain;
  mask: url('../images/logo-kiku-gold.png') no-repeat center / contain;
}

/* ---------- figures ---------- */

.figure-framed {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1rem;
  box-shadow: var(--shadow-card);
}
.figure-framed img { width: 100%; border-radius: 2px; }
.figure-framed figcaption {
  padding-top: .9rem;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--stone);
  text-align: center;
}

.figure-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin: 2.5rem 0;
}

/* ---------- galerie documents ---------- */

.doc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.3rem;
  margin-top: 2.5rem;
}
.doc-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  cursor: zoom-in;
  transition: transform .3s var(--ease), box-shadow .3s;
}
.doc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.doc-card img { width: 100%; aspect-ratio: 4/3.2; object-fit: cover; object-position: top; }
.doc-card .doc-label {
  padding: .8rem 1rem;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-top: 1px solid var(--line);
}

/* lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(17, 16, 20, .93);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1vh 1vw;
  cursor: zoom-out;
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: 99vw;
  max-height: 95vh;
  border-radius: 3px;
  box-shadow: 0 40px 80px rgba(0, 0, 0, .6);
}
.lightbox .lb-caption {
  position: absolute;
  bottom: 11vh;
  left: 0; right: 0;
  text-align: center;
  color: rgba(246, 243, 236, .8);
  font-size: .85rem;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.lightbox .lb-strip {
  position: absolute;
  bottom: 2vh;
  left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: .5rem;
  padding: 0 4vw;
  overflow-x: auto;
  cursor: default;
}
.lightbox .lb-strip img {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 2px;
  box-shadow: none;
  opacity: .5;
  cursor: pointer;
  border: 2px solid transparent;
  transition: opacity .2s, border-color .2s;
}
.lightbox .lb-strip img:hover { opacity: .8; }
.lightbox .lb-strip img.active { opacity: 1; border-color: var(--gold); }
@media (max-width: 640px) {
  .lightbox img { max-height: 82vh; }
  .lightbox .lb-strip img { flex-basis: 42px; width: 42px; height: 42px; }
}
.lightbox .lb-close, .club-lightbox .lb-close {
  position: absolute;
  top: 2.5vh;
  right: 4vw;
  background: none;
  border: none;
  color: var(--paper);
  font-size: 2rem;
  cursor: pointer;
}
.lightbox .lb-nav, .club-lightbox .lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid rgba(246, 243, 236, .4);
  background: rgba(22, 21, 26, .55);
  color: var(--paper);
  font-size: 1.3rem;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.lightbox .lb-nav:hover, .club-lightbox .lb-nav:hover { background: var(--crimson); border-color: var(--crimson); }
.lightbox .lb-prev, .club-lightbox .lb-prev { left: 3vw; }
.lightbox .lb-next, .club-lightbox .lb-next { right: 3vw; }
@media (max-width: 640px) {
  .lightbox .lb-nav, .club-lightbox .lb-nav { width: 40px; height: 40px; font-size: 1.1rem; }
  .lightbox .lb-prev, .club-lightbox .lb-prev { left: 1.5vw; }
  .lightbox .lb-next, .club-lightbox .lb-next { right: 1.5vw; }
}

/* lightbox club (fiche complète, même mécanique que le lightbox photos) */
.club-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(17, 16, 20, .93);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
}
.club-lightbox.open { display: flex; }
/* Sélecteur à deux classes : .club-fr-card (plus bas dans ce fichier) pose
   overflow: hidden — à spécificité égale il gagnerait par ordre d'apparition,
   et la fiche agrandie deviendrait indéfilable (bas coupé sur mobile). */
.club-lightbox .club-lightbox-panel {
  max-width: 620px;
  max-height: 86vh;
  overflow-y: auto;
  cursor: default;
}
.club-lightbox-panel:hover { transform: none; box-shadow: var(--shadow-card); }
.club-lightbox-panel .cfc-photo img { height: 260px; }
.club-lightbox-panel h3 { font-size: 1.4rem; }
.club-lightbox-panel .cfc-meta {
  margin-top: 1.2rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}
@media (max-width: 640px) {
  .club-lightbox-panel { max-width: 92vw; }
  .club-lightbox-panel .cfc-photo img { height: 190px; }
}

/* ---------- listes stylées ---------- */

.styled-list { list-style: none; margin: 1.5rem 0; }
.styled-list li {
  position: relative;
  padding: .45rem 0 .45rem 2rem;
}
.styled-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05rem;
  width: .95rem;
  height: 1px;
  background: var(--crimson);
}

/* ---------- clubs français (grille) ---------- */

.club-fr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.4rem;
}
.club-fr-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1.6rem 1.7rem 1.7rem;
  transition: transform .3s var(--ease), box-shadow .3s;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.club-fr-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.club-fr-card .cfc-photo {
  margin: -1.6rem -1.7rem 1.2rem;
  position: relative;
}
.club-fr-card .cfc-photo img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  object-position: 50% 25%;
  display: block;
}
.club-fr-card .cfc-photo-legende {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: .5rem .9rem;
  font-size: .72rem;
  letter-spacing: .03em;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.6), transparent);
}
.club-fr-card .who {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .55rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}
.club-fr-card .who-left {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
}
.club-fr-card .cfc-depuis {
  flex: none;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: none;
  color: var(--stone);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .3rem .75rem;
  white-space: nowrap;
}
.club-fr-card .cfc-depuis .cfc-empty { color: inherit; }
.club-fr-card .who .dept {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  color: var(--gold);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: 0;
}
.club-fr-card h3 { font-size: 1.15rem; margin: .5rem 0 0; }
.club-fr-card > p {
  font-size: .92rem;
  color: var(--ink-soft);
  margin-top: .9rem;
  flex: 1 0 auto;
}
.club-fr-card .cfc-more {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  background: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--crimson);
  transition: opacity .2s;
}
.club-fr-card .cfc-more:hover { opacity: .7; }
.cfc-meta {
  margin: .9rem 0 0;
  display: grid;
  gap: .55rem;
}
.cfc-meta > div {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: .6rem;
  align-items: baseline;
}
/* Carte compacte (avant clic "Plus d'infos") : moins large que la fiche
   agrandie, un écart identique y paraît plus grand — resserré un peu ici
   seulement (retour Stéphane), la fiche agrandie garde .6rem. */
.cfc-teaser > div { gap: .4rem; }
.cfc-meta dt {
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--stone);
}
.cfc-meta dd { font-size: .87rem; color: var(--ink-soft); margin: 0; }
.cfc-empty { color: var(--stone); font-style: italic; }

/* ---------- espace privé ---------- */

.gate {
  color-scheme: dark;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse at 70% 20%, rgba(142, 31, 47, .25), transparent 55%),
    linear-gradient(130deg, #131316, #201f24);
  padding: 7rem 4vw 4rem;
}
.gate-card {
  width: 100%;
  max-width: 430px;
  background: rgba(246, 243, 236, .04);
  border: 1px solid rgba(246, 243, 236, .14);
  border-radius: 4px;
  padding: 3rem 2.6rem;
  text-align: center;
  color: var(--paper);
  backdrop-filter: blur(6px);
}
.gate-card img.kiku { width: 62px; height: 62px; object-fit: contain; display: block; margin-inline: auto; }
.gate-card h1 {
  color: var(--paper);
  font-size: 1.7rem;
  margin: 1.2rem 0 .4rem;
}
.gate-card p { color: rgba(246, 243, 236, .6); font-size: .93rem; }
.gate-form, .gate-form-preview { margin-top: 1.8rem; display: grid; gap: .9rem; }
/* width: 100% + min-width: 0 explicites : dans une grille, les champs de
   formulaire ne s'étirent pas toujours tout seuls pour remplir leur colonne
   (contrairement à un <div>) — sur certains moteurs mobiles (Chrome/Safari iOS,
   qui partagent le même moteur WebKit), l'input et le bouton gardaient une
   largeur intrinsèque et débordaient de la carte. Confirmé par Stéphane sur
   iPhone (Chrome iOS), non reproductible en environnement de dev classique. */
.gate-form input, .gate-form-preview input,
.gate-form button, .gate-form-preview button {
  width: 100%;
  min-width: 0;
}
.gate-form input, .gate-form-preview input {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(246, 243, 236, .07);
  border: 1px solid rgba(246, 243, 236, .22);
  border-radius: 3px;
  padding: .95rem 1.1rem;
  color: var(--paper);
  font-size: 1rem;
  text-align: center;
  letter-spacing: .3em;
  outline: none;
  transition: border-color .25s;
}
/* Safari applique un fond blanc opaque aux champs password en autofill/suggestion
   avant même la saisie, par-dessus le fond translucide ci-dessus. */
.gate-form input::-webkit-contacts-auto-fill-button,
.gate-form-preview input::-webkit-contacts-auto-fill-button,
.gate-form input::-webkit-credentials-auto-fill-button,
.gate-form-preview input::-webkit-credentials-auto-fill-button {
  background-color: transparent;
}
.gate-form input:focus, .gate-form-preview input:focus { border-color: var(--gold); }
.gate-form .err, .gate-form-preview .err {
  color: #e08795;
  font-size: .85rem;
  min-height: 1.3em;
}
.gate-card.shake { animation: shake .4s; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}

/* privé hub */
.prive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.3rem;
  margin-top: 2.5rem;
}
.prive-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 1.8rem;
  transition: transform .3s var(--ease), box-shadow .3s;
}
.prive-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.prive-card .ico {
  font-size: 1.6rem;
  color: var(--crimson);
  font-family: var(--font-display);
}
.prive-card h3 { font-size: 1.2rem; margin: .7rem 0 .5rem; }
.prive-card p { font-size: .92rem; color: var(--ink-soft); }
.prive-card .links { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .8rem; }
.prive-card .links a {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
/* Carte "Prochains stages" : une ligne par stage, pas une rangée de liens à plat —
   un même stage peut porter plusieurs ressources (page d'infos + flyer PDF), il
   faut voir d'un coup d'œil lesquelles appartiennent à quelle date. */
.prive-card .links-stages { flex-direction: column; gap: .7rem; }
.doc-stage { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .9rem; }
.doc-stage .ds-quand {
  flex: 1 0 100%;
  font-size: .9rem;
  font-weight: 600;
  color: var(--ink);
}

/* galeries privées : un carrousel par stage */
.galeries-liste { margin-top: 2rem; display: flex; flex-direction: column; gap: 1.6rem; }
/* Filtre par année (rendu par rendreGaleries) : une seule année affichée à la fois. */
.galerie-filtres { display: flex; flex-wrap: wrap; gap: .5rem; }
.gf-btn {
  padding: .45rem 1rem; border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--ink); font: inherit; font-size: .88rem;
  cursor: pointer; transition: border-color .15s, background .15s, color .15s;
}
.gf-btn:hover { border-color: var(--crimson); color: var(--crimson); }
.gf-btn.actif { background: var(--crimson); border-color: var(--crimson); color: #fff; }
.galerie-bloc {
  border: 1px solid var(--line);
  border-radius: 3px;
  background: #fff;
  padding: 1.1rem 1.1rem 1.3rem;
}
.galerie-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .8rem;
  margin-bottom: .8rem;
}
.galerie-head h3 { font-family: var(--font-display); font-size: 1.1rem; margin: 0; }
.galerie-carousel { position: relative; }
.gc-track {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.gc-track::-webkit-scrollbar { display: none; }
.gc-item { flex: 0 0 200px; scroll-snap-align: start; }
.gc-item img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 2px;
  cursor: zoom-in;
  display: block;
}
.gc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1.5px solid var(--crimson);
  background: rgba(255, 255, 255, .92);
  color: var(--crimson);
  font-size: .9rem;
  cursor: pointer;
  z-index: 1;
}
.gc-prev { left: -12px; }
.gc-next { right: -12px; }
.gc-arrow:hover { background: var(--crimson); color: #fff; }

/* katas */
.kata-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 1.8rem 0;
}
.kata-grid button {
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  background: #fff;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: .55rem 1rem;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.kata-grid button:hover { border-color: var(--crimson); color: var(--crimson); }
.kata-grid button.active { background: var(--crimson); border-color: var(--crimson); color: #fff; }
.kata-player {
  background: #000;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.kata-player video { width: 100%; display: block; aspect-ratio: 4/3; }
/* Le lecteur n'existe qu'à partir du moment où un kata est choisi : à l'arrivée
   sur la page, un grand rectangle noir vide donnait l'impression d'une vidéo qui
   ne charge pas. L'attribut hidden est explicité ici parce que la règle
   .kata-player ci-dessus le neutraliserait sinon. */
.kata-player[hidden] { display: none; }

/* ---------- reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.reveal.visible { opacity: 1; transform: none; }

/* ---------- footer ---------- */

.site-footer {
  background: var(--ink);
  color: rgba(246, 243, 236, .65);
  padding: 3.5rem 0 2rem;
  font-size: .9rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(246, 243, 236, .1);
}
.site-footer h4 {
  font-family: var(--font-display);
  color: var(--paper);
  font-size: 1rem;
  letter-spacing: .1em;
  margin-bottom: 1rem;
}
.site-footer a { color: rgba(246, 243, 236, .75); }
.site-footer a:hover { color: var(--gold); }
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: .45rem; }
.footer-brand { display: flex; align-items: flex-start; gap: 1rem; }
.footer-brand svg, .footer-brand .brand-logo { width: 46px; height: 46px; flex: none; object-fit: contain; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .8rem;
  padding-top: 1.6rem;
  font-size: .78rem;
  color: rgba(246, 243, 236, .4);
}
@media (max-width: 800px) {
  .footer-grid { grid-template-columns: 1fr; gap: 1.8rem; }
}

/* ---------- divers ---------- */

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }

.badge-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.badge {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: .4rem .8rem;
  color: var(--ink-soft);
  background: #fff;
}