/*
Theme Name: Reighikan Dojo
Theme URI: https://www.reighikan-dojo.ch/
Author: Reighikan Dojo
Author URI: https://www.reighikan-dojo.ch/
Description: Thème sur mesure du Reighikan Dojo — École d'Aikido Yoshin Ryu et École de Judo, de Ju-Jitsu et d'Armes japonaises Bodaïshinkan Ryu, à Lausanne. Deux thèmes de couleur, clair et foncé, une calligraphie au pinceau pour les idéogrammes, et des contenus sur mesure pour les stages, l'équipe enseignante, les horaires et les cotisations.
Version: 1.1.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: reighikan
Tags: two-columns, custom-menu, custom-logo, featured-images, translation-ready, block-styles, wide-blocks
*/

/* ============================================================
   La feuille qui suit est celle du site, reprise telle quelle.
   Les polices ne sont plus appelées par @import : elles sont
   mises en file d'attente depuis inc/assets.php, comme le veut
   WordPress, ce qui permet au navigateur de les charger sans
   attendre l'analyse de cette feuille.
   ============================================================ */

/* ============================================================
   VARIABLES — THÈME CLAIR (valeurs par défaut)

   Toute couleur qui change d'un thème à l'autre est déclarée ici et
   uniquement ici ; le thème foncé, plus bas, se contente de redéfinir
   les mêmes jetons. Les triplets RVB (--rgb-*) permettent de réutiliser
   une couleur du thème dans un voile, un filet ou un dégradé sans avoir
   à réécrire l'expression rgba() dans chaque thème.
   ============================================================ */
:root {
  color-scheme: light;

  /* Triplets RVB des trois couleurs structurantes du thème */
  --rgb-bg:     246,243,237;   /* le fond de page */
  --rgb-ink:    52,56,58;      /* l'encre : texte, filets, survols */
  --rgb-accent: 138,15,20;     /* le rouge sang */
  --rgb-gold:   139,129,119;   /* le taupe zen */
  /* Encre posée sur une photo ou sur le voile de la visionneuse :
     toujours du blanc cassé, quel que soit le thème. */
  --rgb-photo-ink: 246,243,237;

  /* Fonds — blanc cassé, du plus clair au plus soutenu */
  --color-dark:    #f6f3ed;
  --color-dark-2:  #f1ede5;
  --color-dark-3:  #eae5db;
  /* Rouge sang — titres, liens, accents */
  --color-accent:  #8a0f14;
  --color-accent-2:#a3161c;
  /* Taupe zen — remplace l'or : libellés, filets, notes discrètes */
  --color-gold:    #8b8177;
  /* Emphase <em> — aligné sur le rouge sang */
  --color-em:      #8a0f14;
  /* Textes en gris foncé (le nom "light" = texte posé sur le fond) */
  --color-light:   #34383a;
  --color-light-2: #4d5254;
  --color-muted:   #7f8486;
  --color-white:   #ffffff;
  /* Texte posé sur un aplat de rouge ou de taupe (bouton plein, cartouche) */
  --color-on-accent: #ffffff;

  /* Filets / ombres — thème clair, tracés discrets */
  --line-soft:   rgba(var(--rgb-ink),0.07);
  --line-faint:  rgba(var(--rgb-ink),0.06);
  --line-strong: rgba(var(--rgb-ink),0.13);
  --line-btn:    rgba(var(--rgb-ink),0.28);
  --line-gold:        rgba(var(--rgb-gold),0.28);
  --line-gold-strong: rgba(var(--rgb-gold),0.45);
  --shadow-sm:   0 4px 18px rgba(var(--rgb-ink),0.06);
  --shadow-md:   0 10px 30px rgba(var(--rgb-ink),0.09);
  --nav-shadow:  0 4px 24px rgba(var(--rgb-ink),0.10);

  /* Aplats composés */
  --nav-bg:           rgba(var(--rgb-bg),0.95);
  --hover-bg:         rgba(var(--rgb-ink),0.045);
  --gold-wash:        rgba(var(--rgb-gold),0.07);
  --gold-wash-strong: rgba(var(--rgb-gold),0.10);
  --accent-wash:      rgba(var(--rgb-accent),0.06);
  --panel-grad:          linear-gradient(160deg,#eeeae2 0%,#ddd8ce 100%);
  --section-accent-grad: linear-gradient(135deg, var(--color-dark-2) 0%, #ede5de 100%);

  /* Visionneuse plein écran — voile sombre dans les deux thèmes */
  --overlay-bg:  rgba(var(--rgb-ink),0.92);
  --overlay-ink: rgb(var(--rgb-photo-ink));

  /* Voile posé sur le motif seigaiha du fond de page (transparent au clair) */
  --bg-veil: rgba(var(--rgb-bg),0);
  /* Retouche des photos de bannière */
  --hero-bg-filter: brightness(1.15) saturate(0.55);

  /* Carte — les deux aplats des panneaux Leaflet ne correspondent à
     aucun fond de la charte : ils ont leurs valeurs propres. */
  --map-panel:       #eeeae2;
  --map-panel-hover: #e5e0d6;
  --filtre-tuiles:   none;

  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;
  /* Idéogrammes : Yuji Syuku, une calligraphie tracée au pinceau à la main.
     Repli sur un mincho si la police distante n'est pas disponible. */
  --font-kanji:   'Yuji Syuku', 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN',
                  'Noto Serif JP', 'MS Mincho', 'Songti SC', serif;

  --nav-height: 200px;
  --nav-menu-height: 44px;
  --max-width:  1300px;
  --radius:     4px;
  --transition: 0.3s ease;

  /* Spacing scale */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  3rem;
  --space-xl:  5rem;
  --space-2xl: 7rem;

  /* Section padding */
  --section-pad: clamp(3.5rem, 8vw, 7rem);
}

/* ============================================================
   VARIABLES — THÈME FONCÉ

   L'attribut est posé sur <html> par theme.js, avant le premier
   rendu : soit le choix enregistré par le visiteur, soit à défaut
   sa préférence système. Sans JavaScript, le thème clair s'applique.

   Le fond est un brun-noir chaud, dans la continuité de l'encre de
   Chine ; le rouge sang est éclairci jusqu'à passer le seuil de
   contraste AA sur ce fond (4,9:1), et le taupe de même.
   ============================================================ */
:root[data-theme="dark"] {
  color-scheme: dark;

  --rgb-bg:     18,16,14;
  --rgb-ink:    234,227,216;
  --rgb-accent: 232,71,78;
  --rgb-gold:   168,156,142;

  --color-dark:    #12100e;
  --color-dark-2:  #1a1714;
  --color-dark-3:  #241f1b;

  --color-accent:  #ca0000;
  --color-accent-2:#f4676d;
  --color-gold:    #a89c8e;
  --color-em:      #e8474e;

  --color-light:   #eae3d8;
  --color-light-2: #c9c1b6;
  --color-muted:   #9a9186;
  /* Sur un aplat rouge ou taupe, seule une encre sombre reste lisible */
  --color-on-accent: #14100f;

  /* Filets : un trait clair sur fond sombre paraît plus fin qu'il ne l'est,
     les opacités sont donc relevées par rapport au thème clair. */
  --line-soft:   rgba(var(--rgb-ink),0.10);
  --line-faint:  rgba(var(--rgb-ink),0.08);
  --line-strong: rgba(var(--rgb-ink),0.18);
  --line-btn:    rgba(var(--rgb-ink),0.32);
  --line-gold:        rgba(var(--rgb-gold),0.30);
  --line-gold-strong: rgba(var(--rgb-gold),0.50);
  /* Les ombres ne se lisent plus par la couleur du texte mais par le noir */
  --shadow-sm:   0 4px 18px rgba(0,0,0,0.45);
  --shadow-md:   0 10px 30px rgba(0,0,0,0.55);
  --nav-shadow:  0 4px 24px rgba(0,0,0,0.55);

  --hover-bg:         rgba(var(--rgb-ink),0.06);
  --gold-wash:        rgba(var(--rgb-gold),0.08);
  --gold-wash-strong: rgba(var(--rgb-gold),0.12);
  --accent-wash:      rgba(var(--rgb-accent),0.12);
  --panel-grad:          linear-gradient(160deg,#262019 0%,#171310 100%);
  --section-accent-grad: linear-gradient(135deg, var(--color-dark-2) 0%, #241b18 100%);

  --overlay-bg: rgba(5,4,3,0.94);

  /* Le motif seigaiha est imprimé en clair : on le noie sous un voile
     pour n'en laisser affleurer que le tracé, comme au thème clair. */
  --bg-veil: rgba(var(--rgb-bg),0.90);
  --hero-bg-filter: brightness(0.5) saturate(0.6);

  /* Carte — les tuiles foncées de CARTO sont presque noires : leurs
     rues se perdent, et la carte fait un trou dans la page. On relève
     leur clarté et on adoucit leur contraste pour qu'elle se lise. */
  --map-panel:       #221d1a;
  --map-panel-hover: #2d2723;
  --filtre-tuiles:   brightness(1.7) contrast(0.82) saturate(0.9);
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* text-size-adjust empêche Safari mobile de grossir le texte de son propre
   chef. La forme préfixée vient d'abord : elle est la seule que connaissent
   Safari et Firefox, la standard prend le relais sur Chrome et Edge. */
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-light);
  background-color: var(--color-dark);
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ------------------------------------------------------------
   LIENS DE CONTENU — rouge sang
   Les composants qui portent leur propre couleur (nav, boutons,
   pied de page) ne sont volontairement pas concernés.
   ------------------------------------------------------------ */
p a,
td a,
.section-intro a,
.breadcrumb a,
.contact-detail-value a,
.stage-body a,
.blockquote a,
.timeline-text a,
.card-text a {
  color: var(--color-accent);
  transition: color var(--transition);
}
p a:hover,
td a:hover,
.section-intro a:hover,
.breadcrumb a:hover,
.contact-detail-value a:hover,
.stage-body a:hover,
.blockquote a:hover,
.timeline-text a:hover,
.card-text a:hover {
  color: var(--color-accent-2);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ============================================================
   TYPOGRAPHY — fluid
   ============================================================ */
h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  font-weight: 300;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--color-accent);
}
h1 { font-size: clamp(2.2rem, 6vw, 5rem); }
h2 { font-size: clamp(1.8rem, 4vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2.5vw, 2rem); }
h4 { font-size: clamp(1rem, 1.5vw, 1.2rem); font-weight: 400; }
p  { margin-bottom: 1rem; color: var(--color-light-2); }
p:last-child { margin-bottom: 0; }
em { font-style: italic; color: var(--color-em); }
strong { font-weight: 600; color: var(--color-light); }

/* ============================================================
   CONTAINER
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem);
}

/* ============================================================
   GRID UTILITIES  (used inline + in pages)
   ============================================================ */

/* 2-col → stacks on tablet/mobile */
.g2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
}
/* 3-col → 2 col tablet → 1 col mobile */
.g3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 3vw, 1.5rem);
}
/* auto-fit responsive grid */
.g-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(1rem, 3vw, 2rem);
}

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

/* ============================================================
   NAVIGATION
   ============================================================ */
.site-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  height: var(--nav-height);
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-strong);
  transition: box-shadow var(--transition);
}
/* Posée par le script de page dès que la page a défilé */
.site-nav.is-scrolled { box-shadow: var(--nav-shadow); }
.nav-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0.6rem clamp(1rem, 4vw, 2rem) 0;
  gap: 0;
}
.nav-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 0;
}
.nav-logo img {
  height: 144px;
  width: auto;
  flex-shrink: 0;
}
.nav-logo-text {
  font-family: var(--font-heading);
  font-size: clamp(0.85rem, 2vw, 1.05rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-light);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-logo-text span {
  display: block;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  color: var(--color-gold);
}

/* Desktop menu */
.nav-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  flex-shrink: 0;
  width: 100%;
  border-top: 1px solid var(--line-gold);
}
.nav-menu > li { position: relative; }
.nav-menu > li > a {
  display: flex;
  align-items: center;
  padding: 0 0.9rem;
  height: var(--nav-menu-height);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-light-2);
  transition: color var(--transition);
  white-space: nowrap;
}
.nav-menu > li > a:hover,
.nav-menu > li > a.active { color: var(--color-accent); }

/* Dropdown desktop */
.nav-menu li .dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--color-dark-2);
  border: 1px solid var(--line-gold-strong);
  border-top: 2px solid var(--color-gold);
  list-style: none;
  padding: 0.4rem 0;
  box-shadow: var(--shadow-md);
}
.nav-menu > li:hover > .dropdown { display: block; }
.nav-menu li .dropdown li a {
  display: block;
  padding: 0.55rem 1.1rem;
  font-size: 0.76rem;
  letter-spacing: 0.07em;
  color: var(--color-light-2);
  transition: all var(--transition);
  white-space: nowrap;
}
.nav-menu li .dropdown li a:hover {
  color: var(--color-accent);
  padding-left: 1.5rem;
  background: var(--hover-bg);
}
/* Intertitre séparant deux groupes au sein d'un même menu déroulant */
.dropdown-titre {
  padding: 0.7rem 1.1rem 0.35rem;
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
  white-space: nowrap;
}
.dropdown-titre + li a { padding-top: 0.2rem; }
.dropdown li + .dropdown-titre {
  margin-top: 0.35rem;
  border-top: 1px solid var(--line-soft);
}

/* CTA button in nav — même traitement « contour » que les autres boutons */
.nav-cta {
  display: inline-flex !important;
  align-items: center;
  background: transparent !important;
  color: var(--color-light) !important;
  border: 2px solid var(--line-btn) !important;
  padding: 0.5rem 1.2rem !important;
  height: auto !important;
  line-height: 1 !important;
  border-radius: var(--radius);
  margin-left: 0.4rem;
  font-size: 0.72rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
  white-space: nowrap;
  transition: all var(--transition) !important;
  flex-shrink: 0;
}
.nav-cta:hover {
  background: transparent !important;
  border-color: var(--color-accent) !important;
  color: var(--color-accent) !important;
}

/* Liens sociaux dans la barre de navigation */
.nav-social {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: 0.7rem;
  padding-left: 0.8rem;
  border-left: 1px solid var(--line-gold);
}
.nav-social a {
  /* Le pictogramme est posé nu, sans cercle : la surface reste tout de
     même à 30 px pour que la cible tactile ne se réduise pas au dessin.
     `flex-shrink` la défend — ces liens n'ayant plus de texte, ils n'ont
     aucune largeur intrinsèque à opposer au manque de place. */
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-light-2);
  transition: color var(--transition);
}
.nav-social a:hover { color: var(--color-accent); }

/* ------------------------------------------------------------
   PICTOGRAMMES SOCIAUX

   Le dessin de la marque est appliqué en masque sur un aplat de
   `currentColor` : il prend donc exactement la couleur du lien qui
   le porte — taupe au repos, rouge au survol — et suit les deux
   thèmes sans qu'aucune couleur ne soit inscrite dans le tracé.
   ------------------------------------------------------------ */
.social-icone::before {
  content: '';
  display: block;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  background-color: currentColor;
  -webkit-mask: var(--social-glyphe) center / contain no-repeat;
  mask: var(--social-glyphe) center / contain no-repeat;
}

.social-instagram { --social-glyphe: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZD0nTTEyIDBDOC43NCAwIDguMzMzLjAxNSA3LjA1My4wNzIgNS43NzUuMTMyIDQuOTA1LjMzMyA0LjE0LjYzYy0uNzg5LjMwNi0xLjQ1OS43MTctMi4xMjYgMS4zODRTLjkzNSAzLjM1LjYzIDQuMTRDLjMzMyA0LjkwNS4xMzEgNS43NzUuMDcyIDcuMDUzLjAxMiA4LjMzMyAwIDguNzQgMCAxMnMuMDE1IDMuNjY3LjA3MiA0Ljk0N2MuMDYgMS4yNzcuMjYxIDIuMTQ4LjU1OCAyLjkxMy4zMDYuNzg4LjcxNyAxLjQ1OSAxLjM4NCAyLjEyNi42NjcuNjY2IDEuMzM2IDEuMDc5IDIuMTI2IDEuMzg0Ljc2Ni4yOTYgMS42MzYuNDk5IDIuOTEzLjU1OEM4LjMzMyAyMy45ODggOC43NCAyNCAxMiAyNHMzLjY2Ny0uMDE1IDQuOTQ3LS4wNzJjMS4yNzctLjA2IDIuMTQ4LS4yNjIgMi45MTMtLjU1OC43ODgtLjMwNiAxLjQ1OS0uNzE4IDIuMTI2LTEuMzg0LjY2Ni0uNjY3IDEuMDc5LTEuMzM1IDEuMzg0LTIuMTI2LjI5Ni0uNzY1LjQ5OS0xLjYzNi41NTgtMi45MTMuMDYtMS4yOC4wNzItMS42ODcuMDcyLTQuOTQ3cy0uMDE1LTMuNjY3LS4wNzItNC45NDdjLS4wNi0xLjI3Ny0uMjYyLTIuMTQ5LS41NTgtMi45MTMtLjMwNi0uNzg5LS43MTgtMS40NTktMS4zODQtMi4xMjZDMjEuMzE5IDEuMzQ3IDIwLjY1MS45MzUgMTkuODYuNjNjLS43NjUtLjI5Ny0xLjYzNi0uNDk5LTIuOTEzLS41NThDMTUuNjY3LjAxMiAxNS4yNiAwIDEyIDB6bTAgMi4xNmMzLjIwMyAwIDMuNTg1LjAxNiA0Ljg1LjA3MSAxLjE3LjA1NSAxLjgwNS4yNDkgMi4yMjcuNDE1LjU2Mi4yMTcuOTYuNDc3IDEuMzgyLjg5Ni40MTkuNDIuNjc5LjgxOS44OTYgMS4zODEuMTY0LjQyMi4zNiAxLjA1Ny40MTMgMi4yMjcuMDU3IDEuMjY2LjA3IDEuNjQ2LjA3IDQuODVzLS4wMTUgMy41ODUtLjA3NCA0Ljg1Yy0uMDYxIDEuMTctLjI1NiAxLjgwNS0uNDIxIDIuMjI3LS4yMjQuNTYyLS40NzkuOTYtLjg5OSAxLjM4Mi0uNDE5LjQxOS0uODI0LjY3OS0xLjM4Ljg5Ni0uNDIuMTY0LTEuMDY1LjM2LTIuMjM1LjQxMy0xLjI3NC4wNTctMS42NDkuMDctNC44NTkuMDctMy4yMTEgMC0zLjU4Ni0uMDE1LTQuODU5LS4wNzQtMS4xNzEtLjA2MS0xLjgxNi0uMjU2LTIuMjM2LS40MjEtLjU2OS0uMjI0LS45Ni0uNDc5LTEuMzc5LS44OTktLjQyMS0uNDE5LS42OS0uODI0LS45LTEuMzgtLjE2NS0uNDItLjM1OS0xLjA2NS0uNDItMi4yMzUtLjA0NS0xLjI2LS4wNjEtMS42NDktLjA2MS00Ljg0NCAwLTMuMTk2LjAxNi0zLjU4Ni4wNjEtNC44NjEuMDYxLTEuMTcuMjU1LTEuODE0LjQyLTIuMjM0LjIxLS41Ny40NzktLjk2LjktMS4zODEuNDE5LS40MTkuODEtLjY4OSAxLjM3OS0uODk4LjQyLS4xNjYgMS4wNTEtLjM2MSAyLjIyMS0uNDIxIDEuMjc1LS4wNDUgMS42NS0uMDYgNC44NTktLjA2bC4wNDUuMDN6bTAgMy42NzhjLTMuNDA1IDAtNi4xNjIgMi43Ni02LjE2MiA2LjE2MiAwIDMuNDA1IDIuNzYgNi4xNjIgNi4xNjIgNi4xNjIgMy40MDUgMCA2LjE2Mi0yLjc2IDYuMTYyLTYuMTYyIDAtMy40MDUtMi43Ni02LjE2Mi02LjE2Mi02LjE2MnpNMTIgMTZjLTIuMjEgMC00LTEuNzktNC00czEuNzktNCA0LTQgNCAxLjc5IDQgNC0xLjc5IDQtNCA0em03Ljg0Ni0xMC40MDVjMCAuNzk1LS42NDYgMS40NC0xLjQ0IDEuNDQtLjc5NSAwLTEuNDQtLjY0Ni0xLjQ0LTEuNDQgMC0uNzk0LjY0Ni0xLjQzOSAxLjQ0LTEuNDM5Ljc5My0uMDAxIDEuNDQuNjQ1IDEuNDQgMS40Mzl6Jy8+PC9zdmc+"); }
.social-facebook { --social-glyphe: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZD0nTTkuMTAxIDIzLjY5MXYtNy45OEg2LjYyN3YtMy42NjdoMi40NzR2LTEuNThjMC00LjA4NSAxLjg0OC01Ljk3OCA1Ljg1OC01Ljk3OC40MDEgMCAuOTU1LjA0MiAxLjQ2OC4xMDNhOC42OCA4LjY4IDAgMCAxIDEuMTQxLjE5NXYzLjMyNWE4LjYyMyA4LjYyMyAwIDAgMC0uNjUzLS4wMzYgMjYuODA1IDI2LjgwNSAwIDAgMC0uNzMzLS4wMDljLS43MDcgMC0xLjI1OS4wOTYtMS42NzUuMzA5YTEuNjg2IDEuNjg2IDAgMCAwLS42NzkuNjIyYy0uMjU4LjQyLS4zNzQuOTk1LS4zNzQgMS43NTJ2MS4yOTdoMy45MTlsLS4zODYgMi4xMDMtLjI4NyAxLjU2NGgtMy4yNDZ2OC4yNDVDMTkuMzk2IDIzLjIzOCAyNCAxOC4xNzkgMjQgMTIuMDQ0YzAtNi42MjctNS4zNzMtMTItMTItMTJzLTEyIDUuMzczLTEyIDEyYzAgNS42MjggMy44NzQgMTAuMzUgOS4xMDEgMTEuNjQ3WicvPjwvc3ZnPg=="); }

/* Une fois le menu déplié, ils reprennent leur place dans la colonne */
.nav-menu.open .nav-social {
  margin: 1.2rem clamp(1rem, 5vw, 2rem) 0;
  padding-left: 0;
  border-left: none;
  justify-content: flex-start;
}

/* ------------------------------------------------------------
   BASCULE CLAIR / FONCÉ

   En desktop la barre empile le logo puis le menu : le bouton est
   posé dans l'angle supérieur droit, qui reste vide. Sous 900 px la
   barre repasse sur une ligne et le bouton reprend sa place dans le
   flux, juste avant le hamburger.
   ------------------------------------------------------------ */
.nav-actions {
  position: absolute;
  top: 0.8rem;
  right: clamp(1rem, 4vw, 2rem);
  z-index: 201;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.theme-toggle {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--color-light-2);
  background: transparent;
  border: 1px solid var(--line-gold);
  border-radius: 50%;
  transition: color var(--transition), border-color var(--transition),
              background var(--transition);
}
.theme-toggle:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
  background: var(--hover-bg);
}
.theme-toggle:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
/* Le pictogramme annonce le thème vers lequel le bouton bascule :
   une lune tant qu'on est au clair, un soleil une fois au foncé. */
.theme-toggle .icone-clair { display: none; }
.theme-toggle .icone-fonce { display: block; }
:root[data-theme="dark"] .theme-toggle .icone-clair { display: block; }
:root[data-theme="dark"] .theme-toggle .icone-fonce { display: none; }

/* 980 px : le seuil auquel la barre passe au hamburger. Il est repris
   plus bas par le bloc qui déplie le menu ; les deux valeurs doivent
   rester identiques. */
@media (max-width: 980px) {
  .nav-actions { position: static; }
}

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  padding: 0.5rem;
  flex-shrink: 0;
  z-index: 201;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-light);
  border-radius: 2px;
  transition: var(--transition);
}
.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu overlay */
.nav-menu.open {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: var(--nav-height);
  left: 0; right: 0;
  bottom: 0;
  background: var(--color-dark-2);
  overflow-y: auto;
  padding: 1rem 0 2rem;
  border-top: 1px solid var(--line-gold);
}
.nav-menu.open > li > a {
  height: auto;
  padding: 0.9rem clamp(1rem, 5vw, 2rem);
  font-size: 0.9rem;
  border-bottom: 1px solid var(--line-faint);
}
/* Mobile sub-items */
.nav-menu.open .dropdown {
  display: block;
  position: static;
  border: none;
  border-top: none;
  padding: 0 0 0.5rem clamp(1.5rem, 5vw, 3rem);
  background: transparent;
  box-shadow: none;
}
.nav-menu.open .dropdown li a {
  /* --color-muted ne donnait que 3,2:1 sur ce fond : sous le seuil.
     --color-light-2 monte à 6,8:1. La cible tactile passe à ~40 px. */
  padding: 0.7rem 1rem;
  font-size: 0.9rem;
  color: var(--color-light-2);
  border: none;
}
.nav-menu.open .dropdown li a:hover {
  padding-left: 1.4rem;
  color: var(--color-accent);
  background: transparent;
}
/* Hide CTA in open menu (it's shown as a nav item) */
.nav-menu.open .nav-cta {
  margin: 1rem clamp(1rem, 5vw, 2rem) 0;
  padding: 0.8rem 1.5rem !important;
  display: flex !important;
  justify-content: center;
  font-size: 0.8rem !important;
  border-radius: var(--radius);
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  /* La photographie de fond n'est pas fournie avec le thème : c'est du
     contenu, qui a sa place dans la médiathèque. On la désigne par un
     jeton, que la page peut poser elle-même :
       <div class="hero-bg" style="--hero-image:url(…)"></div>          */
  background-image: var(--hero-image, none);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center 30%;
  /* fixed disabled on mobile (iOS bug) */
  background-attachment: scroll;
  filter: var(--hero-bg-filter);
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  /* 1. voile latéral : la colonne de texte repose sur du blanc cassé quasi plein
     2. fondu haut/bas : la photo se dissout dans le fond, sans arête franche */
  background:
    linear-gradient(
      to bottom,
      var(--color-dark) 0%,
      rgba(var(--rgb-bg),0.55) 16%,
      rgba(var(--rgb-bg),0.30) 34%,
      rgba(var(--rgb-bg),0.72) 58%,
      var(--color-dark) 76%,
      var(--color-dark) 100%
    ),
    linear-gradient(
      95deg,
      rgba(var(--rgb-bg),0.92) 0%,
      rgba(var(--rgb-bg),0.70) 34%,
      rgba(var(--rgb-accent),0.06) 62%,
      rgba(var(--rgb-bg),0.30) 100%
    );
}
.hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: calc(var(--nav-height) + 2rem) clamp(1rem, 4vw, 2rem) 4rem;
}
.hero-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-gold);
  border-left: 2px solid var(--color-gold);
  padding-left: 0.7rem;
  margin-bottom: 1.2rem;
}
.hero-title {
  font-size: clamp(2.6rem, 7vw, 6rem);
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1.02;
  margin-bottom: 0.5rem;
  color: var(--color-accent);
}
.hero-subtitle {
  font-family: var(--font-heading);
  font-size: clamp(1rem, 2.2vw, 1.4rem);
  font-style: italic;
  color: var(--color-light-2);
  margin-bottom: 1.5rem;
}
.hero-divider {
  width: 50px; height: 1px;
  background: var(--color-gold);
  margin-bottom: 1.5rem;
}
.hero-desc {
  max-width: 500px;
  font-size: clamp(0.9rem, 1.5vw, 1rem);
  line-height: 1.8;
  color: var(--color-light-2);
  margin-bottom: 2rem;
}
.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.hero-scroll {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-gold);
  opacity: 0.7;
}
.hero-scroll::after {
  content: '';
  display: block;
  width: 1px; height: 36px;
  background: var(--color-gold);
  animation: scrollLine 1.6s ease-in-out infinite;
}
@keyframes scrollLine {
  0%,100% { opacity: 0.2; transform: scaleY(0.4); transform-origin: top; }
  50%      { opacity: 1;   transform: scaleY(1);   transform-origin: top; }
}

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.page-hero {
  position: relative;
  padding: calc(var(--nav-height) + clamp(3rem,6vw,5rem)) 0 clamp(2.5rem,4vw,4rem);
  background: var(--color-dark-2);
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('https://www.reighikan-dojo.ch/wp-content/uploads/reighikan-bg.jpg');
  background-size: cover;
  background-position: center top;
  opacity: 0.1;
}
/* Voile de lisibilité : certaines pages posent une photo pleine largeur
   en fond de .page-hero ; le titre gris/rouge doit rester lisible. */
.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(var(--rgb-bg),0) 60%, var(--color-dark) 100%),
    linear-gradient(
      95deg,
      rgba(var(--rgb-bg),0.94) 0%,
      rgba(var(--rgb-bg),0.82) 42%,
      rgba(var(--rgb-bg),0.45) 100%
    );
}
.page-hero-content { position: relative; z-index: 1; }
.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem 0.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  margin-bottom: 1.2rem;
}
.breadcrumb a:hover { color: var(--color-gold); }
.breadcrumb span { color: var(--color-gold); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.8rem;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  border-radius: var(--radius);
  transition: all var(--transition);
  cursor: pointer;
  white-space: nowrap;
  border: 2px solid transparent;
}
.btn-primary {
  background: var(--color-accent);
  color: var(--color-on-accent);
  border-color: var(--color-accent);
}
.btn-primary:hover {
  background: var(--color-accent-2);
  border-color: var(--color-accent-2);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(var(--rgb-accent),0.25);
}
.btn-outline {
  background: transparent;
  color: var(--color-light);
  border-color: var(--line-btn);
}
.btn-outline:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  transform: translateY(-1px);
}
.btn-gold {
  background: transparent;
  color: var(--color-gold);
  border-color: var(--color-gold);
}
.btn-gold:hover {
  background: var(--color-gold);
  color: var(--color-on-accent);
  transform: translateY(-1px);
}

/* ============================================================
   SECTIONS
   ============================================================ */
section { padding: var(--section-pad) 0; }
.section-label {
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  /* même gris foncé que « Dojo » dans le titre de la bannière */
  color: var(--color-light);
  margin-bottom: 0.8rem;
}
.section-title { color: var(--color-accent); margin-bottom: 1.2rem; }
.section-title em { font-style: normal; color: var(--color-gold); }
.section-line {
  width: 44px; height: 2px;
  background: var(--color-accent);
  margin-bottom: 1.8rem;
}
.section-intro {
  max-width: 680px;
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  line-height: 1.85;
  color: var(--color-light-2);
  margin-bottom: 2.5rem;
}
.section-dark   { background: var(--color-dark); }
.section-dark-2 { background: var(--color-dark-2); }
.section-dark-3 { background: var(--color-dark-3); }
.section-accent {
  background: var(--section-accent-grad);
  border-top: 1px solid var(--line-gold);
  border-bottom: 1px solid var(--line-gold);
}

/* ============================================================
   CARDS
   ============================================================ */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1.2rem, 3vw, 2rem);
}
.card {
  background: var(--color-dark-2);
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  display: flex;
  flex-direction: column;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-gold-strong);
}
.card-image {
  height: 200px;
  overflow: hidden;
  background: var(--color-dark-3);
  flex-shrink: 0;
}
.card-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.card:hover .card-image img { transform: scale(1.05); }
.card-body { padding: clamp(1.2rem, 3vw, 1.8rem); flex: 1; display: flex; flex-direction: column; }
.card-tag {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 0.4rem;
}
.card-title {
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  font-weight: 400;
  color: var(--color-accent);
  margin-bottom: 0.7rem;
  line-height: 1.2;
}
.card-text {
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--color-muted);
  margin-bottom: 1.2rem;
  flex: 1;
}

/* ============================================================
   TWO-COLUMN LAYOUT
   ============================================================ */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.two-col.reverse { direction: rtl; }
.two-col.reverse > * { direction: ltr; }
.two-col-image { position: relative; }
.two-col-image img {
  width: 100%;
  border-radius: var(--radius);
  filter: none;
}
.two-col-image::before {
  content: '';
  position: absolute;
  top: -10px; left: -10px;
  right: 10px; bottom: 10px;
  border: 1px solid var(--line-gold-strong);
  border-radius: var(--radius);
  z-index: -1;
}

/* ============================================================
   BIO LAYOUT (biography sidebar + content)
   ============================================================ */
.bio-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
@media (max-width: 768px) {
  .bio-layout { grid-template-columns: 1fr; }
}

/* ============================================================
   PERSON CARD
   ============================================================ */
.person-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
  background: var(--color-dark-2);
  border: 1px solid var(--line-gold);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border-radius: var(--radius);
  margin-bottom: 2rem;
}
.person-card-avatar {
  width: 100%;
  aspect-ratio: 3/4;
  background: var(--panel-grad);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: 0.5rem;
}
.person-photo {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: var(--radius);
  filter: grayscale(15%);
}
.person-rank {
  display: inline-block;
  padding: 0.28rem 0.75rem;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 2px;
  margin-bottom: 0.6rem;
}
.person-name {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 300;
  color: var(--color-accent);
  margin-bottom: 0.3rem;
  line-height: 1.1;
}
/* ------------------------------------------------------------
   La fiche de direction de « Christine Venard » reprend le vocabulaire
   des fiches de l'équipe enseignante (page Aikido Yoshin Ryu) : photo
   cerclée d'un filet, grade en Cormorant rouge posé sous le nom, et
   fonction en corps de texte plutôt qu'en italique taupe. Seule la
   mise en colonnes diffère — ce bloc porte du texte courant, là où les
   fiches de l'équipe sont centrées et sans prose.
   ------------------------------------------------------------ */
.person-card .person-photo {
  border: 1px solid var(--line-gold);
  background: var(--color-dark-3);
  /* La même photographie ouvre les deux pages : pas de désaturation ici,
     sans quoi elle n'aurait pas le même rendu d'un endroit à l'autre. */
  filter: none;
}
.person-card .fiche-rang { margin-bottom: 0.7rem; }
.person-card .person-title {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.9rem;
  color: var(--color-light);
}

.person-title {
  font-family: var(--font-heading);
  font-style: italic;
  color: var(--color-gold);
  margin-bottom: 1.2rem;
  font-size: 1rem;
}

/* ============================================================
   INFO BOXES
   ============================================================ */
.info-boxes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
}
.info-box {
  padding: clamp(1.2rem, 2.5vw, 1.8rem);
  background: var(--color-dark-3);
  border-left: 3px solid var(--color-gold);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.info-box-label {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 0.35rem;
}
.info-box-value {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  font-weight: 400;
  color: var(--color-light);
  line-height: 1.3;
}

/* ============================================================
   SCHEDULE TABLE
   ============================================================ */
/* ============================================================
   STAGE CARDS
   ============================================================ */
.stage-card {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 0;
  background: var(--color-dark-3);
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1.5rem;
}
.stage-date-col {
  background: var(--gold-wash-strong);
  border-right: 1px solid var(--line-gold);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
  text-align: center;
  gap: 0.2rem;
}
.stage-month {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold);
  font-family: var(--font-heading);
}
.stage-days {
  font-size: 2rem;
  font-family: var(--font-heading);
  color: var(--color-light);
  line-height: 1;
}
.stage-year {
  font-size: 0.75rem;
  color: var(--color-muted);
}
.stage-body {
  padding: 1.5rem 2rem;
}
.stage-title {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--color-accent);
  margin: 0.3rem 0 1rem;
}
/* La liste des enseignants occupe une ligne de la grille, sous le
   libellé « Avec » — au même titre que le lieu, les horaires ou les
   tarifs. Elle se règle donc comme .stage-schedule : un nom par ligne,
   la taille et la couleur héritées de .stage-meta. */
.stage-instructors {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  color: var(--color-light-2);
}
.stage-instructors em { color: var(--color-muted); font-style: normal; }
.stage-meta {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  font-size: 0.88rem;
}
.stage-meta-item {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 0.5rem;
  align-items: baseline;
}
.stage-meta-label {
  color: var(--color-gold);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--font-heading);
}
.stage-schedule {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  color: var(--color-light-2);
}
.stage-schedule em { color: var(--color-em); font-style: normal; }

@media (max-width: 600px) {
  .stage-card { grid-template-columns: 1fr; }
  .stage-date-col {
    flex-direction: row;
    gap: 0.6rem;
    padding: 0.8rem 1.5rem;
    border-right: none;
    border-bottom: 1px solid var(--line-gold);
    justify-content: flex-start;
  }
  .stage-days { font-size: 1.4rem; }
  .stage-body { padding: 1.2rem 1.5rem; }
  .stage-meta-item { grid-template-columns: 1fr; gap: 0.15rem; }
}

.schedule-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.2rem;
}
.schedule-table th {
  text-align: left;
  padding: 0.8rem 1rem;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
  border-bottom: 1px solid var(--line-gold-strong);
}
.schedule-table td {
  padding: 0.85rem 1rem;
  font-size: 0.92rem;
  color: var(--color-light-2);
  border-bottom: 1px solid var(--line-soft);
}
.schedule-table tr:hover td {
  background: var(--hover-bg);
  color: var(--color-light);
}

/* ============================================================
   DAN LIST (black belts)
   ============================================================ */
.dan-section { margin-bottom: 2.2rem; }
.dan-title {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  font-weight: 400;
  color: var(--color-accent);
  border-bottom: 1px solid var(--line-gold-strong);
  padding-bottom: 0.4rem;
  margin-bottom: 0.8rem;
}
/* Cormorant n'a pas d'idéogrammes : sans cette règle, les kanji d'un titre
   retombent sur une police système au lieu du pinceau. */
.dan-title [lang="ja"],
.fiche-rang [lang="ja"] {
  font-family: var(--font-kanji);
  margin-right: 0.3em;
  letter-spacing: 0.06em;
}
.dan-list,
.dan-list-old {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
}
.dan-list li,
.dan-list-old li {
  padding: 0.4rem 0.9rem;
  background: var(--color-dark-3);
  border: 1px solid var(--line-gold);
  border-radius: 2px;
  font-size: 0.88rem;
  color: var(--color-light-2);
}
/* Anciens gradés : mêmes cartouches, en italique */
.dan-list-old li { font-style: italic; }
.dan-list + .dan-list-old { margin-top: 0.5rem; }
/* Les deux listes sont des mentions, pas des liens : aucun effet au survol */

/* ============================================================
   CONTACT GRID
   ============================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.contact-info-item {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.4rem;
  align-items: flex-start;
}
.contact-icon {
  width: 38px; height: 38px;
  background: var(--color-dark-3);
  border: 1px solid var(--line-gold-strong);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 0.85rem;
  color: var(--color-gold);
}
.contact-detail-label {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 0.2rem;
}
.contact-detail-value { font-size: 0.92rem; color: var(--color-light); }
.contact-detail-value a:hover { color: var(--color-gold); }

.map-container {
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line-gold);
}
.map-container iframe { width: 100%; height: 100%; border: 0; }

/* ============================================================
   BLOCKQUOTE
   ============================================================ */
.blockquote {
  border-left: 3px solid var(--color-gold);
  padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1rem, 3vw, 2rem);
  margin: 2rem 0;
  background: var(--gold-wash);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.blockquote p {
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-style: italic;
  font-weight: 300;
  color: var(--color-light);
  margin: 0;
  line-height: 1.6;
}
.blockquote cite {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold);
}

/* ============================================================
   STATS ROW
   ============================================================ */
.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: clamp(1.5rem, 3vw, 2rem);
  text-align: center;
}
.stat-number {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 300;
  color: var(--color-accent);
  display: block;
  line-height: 1;
}
.stat-label {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-top: 0.4rem;
  display: block;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--color-dark);
  border-top: 1px solid var(--line-gold);
  padding: clamp(3rem, 5vw, 4rem) 0 0;
}
.footer-grid {
  display: grid;
  /* La marque garde sa colonne fixe ; les trois autres se partagent le
     reste à parts égales — chacune porte désormais des coordonnées, et
     non plus une simple liste de liens. */
  grid-template-columns: 260px repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  padding-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line-soft);
}
.footer-brand img {
  height: 50px;
  /* le logo est déjà en version claire (encre sombre + rouge) */
  margin-bottom: 0.8rem;
}
.footer-brand-name {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--color-accent);
  letter-spacing: 0.07em;
  margin-bottom: 0.15rem;
}
.footer-brand-sub {
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 0.8rem;
}
.footer-tagline { font-size: 0.82rem; line-height: 1.6; color: var(--color-muted); }
/* Le titre de colonne doit se suffire à lui-même : le thème de blocs le
   porte par un <h3>, qui sans cela garderait le Cormorant en graisse 300
   de la règle globale des titres. Les trois valeurs rappelées ici sont
   celles dont hérite le <div> du site — son rendu ne bouge pas. */
.footer-col-title {
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.8;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 1rem;
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 0.45rem; }
.footer-links a {
  font-size: 0.85rem;
  color: var(--color-muted);
  transition: color var(--transition), padding var(--transition);
}
.footer-links a:hover { color: var(--color-accent); padding-left: 4px; }
.footer-contact-item {
  display: flex; flex-direction: column;
  gap: 0.1rem; margin-bottom: 0.9rem; font-size: 0.83rem;
}
/* Le libellé reprend la taille de la valeur qu'il annonce : seules la
   couleur et l'espacement des lettres l'en distinguent désormais. */
.footer-contact-label { color: var(--color-muted); letter-spacing: 0.1em; }
/* À taille égale, le libellé ne se détache plus du dernier lien de la
   liste qui le précède : un peu d'air rétablit la coupure. */
.footer-links + .footer-contact-item { margin-top: 1.1rem; }
.footer-contact-value { color: var(--color-light-2); }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 0;
  font-size: 0.76rem;
  color: var(--color-muted);
  flex-wrap: wrap;
  gap: 0.8rem;
}

/* ============================================================
   TIMELINE (archives)
   ============================================================ */
.timeline {
  position: relative;
  padding-left: 2rem;
  border-left: 1px solid var(--line-gold-strong);
}
.timeline-item {
  position: relative;
  margin-bottom: 2.5rem;
}
.timeline-dot {
  position: absolute;
  left: calc(-2rem - 7px);
  top: 0.5rem;
  width: 14px; height: 14px;
  border-radius: 50%;
  border: 2px solid var(--color-dark);
}
.timeline-date {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  color: var(--color-gold);
  margin-bottom: 0.2rem;
}
.timeline-title {
  font-family: var(--font-heading);
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 400;
  color: var(--color-accent);
  margin-bottom: 0.4rem;
}
.timeline-text { font-size: 0.88rem; color: var(--color-muted); line-height: 1.65; }

/* ============================================================
   MISC UTILITIES
   ============================================================ */
.text-center { text-align: center; }
.mt-sm { margin-top: 1rem; }
.mt-md { margin-top: 2rem; }
.mt-lg { margin-top: 3rem; }
.mb-sm { margin-bottom: 1rem; }
.mb-md { margin-bottom: 2rem; }
.flex-wrap-gap {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.flex-center {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Gallery grid */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.5rem, 1.5vw, 1rem);
}
.gallery-grid .span2 { grid-column: span 2; }

/* Filiation tree */
.filiation-node {
  padding: 0.9rem 1.3rem;
  border-radius: var(--radius);
  text-align: center;
}
.filiation-line {
  width: 1px;
  background: var(--line-gold-strong);
  margin: 0 auto;
}

/* ============================================================
   RESPONSIVE — TABLET  (≤ 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  .two-col { gap: clamp(1.5rem, 3vw, 3rem); }

  /* Tighten nav on tablet */
  :root { --nav-height: 170px; }
  .nav-logo img { height: 116px; }
  .nav-menu > li > a { padding: 0 0.6rem; font-size: 0.72rem; }
}

/* ============================================================
   RESPONSIVE — MOBILE  (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {
  :root { --nav-height: 72px; }

  /* Nav reverts to horizontal row on mobile */
  .nav-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 clamp(1rem, 4vw, 1.5rem);
  }
  .nav-logo img { height: 52px; }
  .nav-menu { border-top: none; width: auto; justify-content: flex-start; }

  /* Nav: show hamburger, hide desktop menu */
  .nav-menu:not(.open) { display: none; }
  .nav-cta:not(.nav-menu .nav-cta) { display: none; }
  .nav-toggle { display: flex; }

  /* Stack all two-column layouts */
  .two-col,
  .contact-grid,
  .person-card { grid-template-columns: 1fr; }
  .two-col.reverse { direction: ltr; }
  .two-col-image::before { display: none; }

  /* Person card: photo becomes a banner */
  .person-card-avatar {
    width: 100%;
    aspect-ratio: 16/9;
    max-height: 200px;
  }

  /* La photographie, elle, garde son cadrage portrait — la recadrer en
     bandeau lui couperait le visage. Une fois la fiche empilée, il suffit
     de cesser de l'étirer : sans plafond, elle occupe un écran entier. */
  .person-card .person-photo {
    display: block;
    max-width: 220px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Sections */
  section { padding: clamp(2.5rem, 6vw, 4rem) 0; }

  /* Footer: single column */
  .footer-grid { grid-template-columns: 1fr; gap: 1.8rem; }
  .footer-bottom { justify-content: center; text-align: center; }

  /* Cards: always single column on very small */
  .cards-grid { grid-template-columns: 1fr; }

  /* Gallery */
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid .span2 { grid-column: span 1; }

  /* Hero scroll indicator: hide on mobile */
  .hero-scroll { display: none; }

  /* blockquote */
  .blockquote { padding: 1rem 1.2rem; }

  /* background-attachment: fixed is broken on iOS — ensure scroll */
  .hero-bg { background-attachment: scroll; }
}

/* ============================================================
   RESPONSIVE — SMALL MOBILE  (≤ 480px)
   ============================================================ */
@media (max-width: 480px) {
  /* Smaller logo on small mobile */
  .nav-logo img { height: 40px; }

  /* Full-width buttons */
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }

  /* Tighten info boxes */
  .info-boxes { grid-template-columns: 1fr; }

  /* Schedule table: compact */
  .schedule-table th,
  .schedule-table td { padding: 0.65rem 0.75rem; font-size: 0.85rem; }

  /* Stats: 2 per row */
  .stats-row { grid-template-columns: 1fr 1fr; gap: 1.5rem; }

  /* Gallery: single column */
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-grid .span2 { grid-column: span 1; }

  /* Section padding */
  section { padding: 2.5rem 0; }
  .page-hero { padding-top: calc(var(--nav-height) + 2rem); }

  /* g2/g3 always single column */
  .g2, .g3 { grid-template-columns: 1fr; }

  /* Hide the two-col decoration */
  .two-col-image::before { display: none; }
}

/* ============================================================
   ACCUEIL — BANNIÈRE ZEN, KANJI, BANDEAU PHOTO
   ============================================================ */

/* Bannière de titre : beaucoup de vide, un ensō en filigrane,
   les trois kanji 礼 儀 館 comme signature. */
.hero-zen {
  position: relative;
  overflow: hidden;
  padding: calc(var(--nav-height) + clamp(3rem, 7vw, 6rem)) 0 clamp(3rem, 6vw, 5rem);
  background: var(--color-dark);
}
.hero-zen::after {
  /* filet de fermeture, à la manière d'un trait de pinceau qui s'épuise */
  content: '';
  position: absolute;
  left: 0; right: 55%; bottom: 0;
  height: 1px;
  background: linear-gradient(to right, var(--line-gold-strong), transparent);
}
.enso-watermark {
  position: absolute;
  top: 50%;
  right: clamp(1rem, 5vw, 5rem);
  transform: translateY(-44%);
  width: clamp(280px, 36vw, 520px);
  opacity: 0.06;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.enso-watermark img { width: 100%; height: auto; }

/* Bannière en deux temps : la colonne de kanji à gauche, le titre à droite */
.hero-zen-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1.8rem, 5vw, 4rem);
  align-items: start;
}
.hero-zen-inner { position: relative; z-index: 1; max-width: 780px; }

/* Colonne verticale 礼 儀 館 道 場 — Rei Ghi Kan Dô Jô */
.kanji-column {
  display: grid;
  gap: clamp(0.5rem, 1.4vw, 1rem);
  padding-right: clamp(1.2rem, 3vw, 2.2rem);
  border-right: 1px solid var(--line-gold);
}
.kc-unit {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: end;
  gap: 0.8rem;
}
.kc-glyph {
  font-family: var(--font-kanji);
  font-size: clamp(2rem, 4.5vw, 3rem);
  line-height: 1;
  color: var(--color-accent);
}

/* ------------------------------------------------------------
   Les idéogrammes ne sont jamais rendus en gras : Yuji Syuku
   n'existe qu'en graisse normale, un gras serait synthétisé
   (épaissi artificiellement) par le navigateur.
   ------------------------------------------------------------ */
[lang="ja"],
.kc-glyph,
.kanji-glyph,
.card-kanji .glyphs,
.footer-kanji span,
.lexique-jp,
.hero-zen-sub .jp {
  font-weight: 400;
  -webkit-font-synthesis: none;
  font-synthesis: none;
}
.kc-romaji {
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-gold);
  min-width: 2.6rem;
}

/* Sous 768 px la colonne repasse à l'horizontale, au-dessus du titre */
@media (max-width: 768px) {
  .hero-zen-grid { grid-template-columns: 1fr; gap: 2rem; }
  .kanji-column {
    grid-auto-flow: column;
    justify-content: start;
    gap: clamp(1rem, 4vw, 2rem);
    padding: 0 0 1.4rem;
    border-right: none;
    border-bottom: 1px solid var(--line-gold);
  }
  .kc-unit { grid-template-columns: 1fr; justify-items: center; justify-content: center; gap: 0.4rem; }
  .kc-romaji { min-width: 0; }
}
/* Ensō posé à gauche du titre, en marque */
.hero-zen-lockup {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.5vw, 2rem);
  margin-bottom: 0.6rem;
}
/* Le sceau posé à gauche du titre est purement décoratif : il est tracé
   en fond de bloc plutôt qu'en <img>, ce qui permet au thème de choisir
   la version claire ou foncée du dessin sans passer par le script — donc
   sans qu'on voie le mauvais dessin le temps d'un battement. */
.hero-zen-enso {
  width: clamp(74px, 10vw, 130px);
  flex-shrink: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
/* L'ensō du Reighikan — dessin de 150 × 150 */
.enso-reighi {
  aspect-ratio: 1 / 1;
  background-image: url('./img/Reighi-Enso_light.svg');
}
:root[data-theme="dark"] .enso-reighi {
  background-image: url('./img/Reighi-Enso.svg');
}
/* Le sceau de l'école Yoshin Ryu — dessin de 150 × 200 */
.enso-yoshin {
  aspect-ratio: 3 / 4;
  background-image: url('./img/Logo_YR.svg');
}
:root[data-theme="dark"] .enso-yoshin {
  background-image: url('./img/Logo_YR_dark.svg');
}
.hero-zen-lockup .hero-zen-title { margin-bottom: 0; }

.hero-zen-title {
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: 0.03em;
  color: var(--color-accent);
  margin-bottom: 0.6rem;
}
.hero-zen-title span { display: block; color: var(--color-light); }
.hero-zen-sub {
  font-family: var(--font-heading);
  font-size: clamp(1rem, 2vw, 1.35rem);
  line-height: 1.6;
  font-style: italic;
  color: var(--color-light-2);
  max-width: 34em;
  margin-bottom: 2.4rem;
}
.hero-zen-sub .jp {
  font-family: var(--font-kanji);
  font-style: normal;
  font-size: 1.25em;
  color: var(--color-accent);
  margin-right: 0.45rem;
  letter-spacing: 0.12em;
}

/* Les trois idéogrammes : REI · GHI · KAN */
.kanji-mark {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1.2rem, 4vw, 3rem);
  margin-bottom: 2.6rem;
}
.kanji-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 clamp(0.6rem, 2vw, 1.4rem);
  min-width: 5.5rem;
}
.kanji-unit + .kanji-unit { border-left: 1px solid var(--line-gold); }
.kanji-glyph {
  font-family: var(--font-kanji);
  font-size: clamp(2.9rem, 7vw, 4.3rem);
  font-weight: 400;
  line-height: 1;
  color: var(--color-accent);
}
.kanji-romaji {
  margin-top: 0.7rem;
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--color-gold);
}
.kanji-gloss {
  margin-top: 0.15rem;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--color-muted);
  line-height: 1.4;
}

/* Bandeau photo en tête de page, au-dessus de la barre de navigation.
   Sur l'accueil, la barre devient collante : elle suit le bandeau puis
   se fixe en haut, recouvrant la photo au défilement. */
.masthead { position: relative; width: 100%; line-height: 0; }
.masthead img { width: 100%; height: auto; display: block; }

/* Carrousel — fondu enchaîné lent. Utilisé par le bandeau et en cours de page. */
.carousel-track {
  position: relative;
  /* Le cadre épouse le rapport des images qu'il porte — 1300 × 343 pour
     le bandeau du dojo. Le jeton permet de le régler ailleurs sans
     toucher à cette règle ; le thème WordPress le calcule à partir des
     images réellement téléversées. */
  aspect-ratio: var(--rapport-bandeau, 1300 / 343);
  overflow: hidden;
}
.masthead .carousel-slide,
.carousel .carousel-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* « contain » et non « cover » : une image dont le rapport ne
     correspondrait pas exactement au cadre est réduite pour tenir en
     entier, jamais rognée. Quand les deux rapports coïncident — c'est le
     cas ici — les deux valeurs donnent le même résultat. */
  object-fit: contain;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.masthead .carousel-slide.is-active,
.carousel .carousel-slide.is-active { opacity: 1; }

/* Carrousel posé dans le corps d'une page.
   La largeur est plafonnée : les vues du dojo ne font que 285 px de large,
   au-delà elles se délavent. */
.carousel { position: relative; margin: 0; max-width: 420px; }
.carousel .carousel-track {
  aspect-ratio: var(--rapport-carrousel, 3 / 2);
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
}
.carousel figcaption {
  padding-top: 0.8rem;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
}

.carousel-dots {
  position: absolute;
  bottom: clamp(0.7rem, 2vw, 1.2rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 0.6rem;
}
.carousel-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border-radius: 50%;
  /* Posés sur la photo : le blanc cassé reste de mise dans les deux thèmes */
  background: rgba(var(--rgb-photo-ink),0.5);
  border: 1px solid rgba(var(--rgb-photo-ink),0.85);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.carousel-dot:hover { background: rgba(var(--rgb-photo-ink),0.85); }
.carousel-dot.is-active {
  background: var(--color-accent);
  border-color: rgba(var(--rgb-photo-ink),0.9);
}

/* Pas d'animation si l'utilisateur la refuse */
@media (prefers-reduced-motion: reduce) {
  .masthead .carousel-slide { transition: none; }
}

body.framed .site-nav { position: sticky; top: 0; left: auto; right: auto; }
body.framed .hero-zen,
body.framed .page-hero { padding-top: clamp(2.5rem, 5vw, 4rem); }

/* Sommaire d'une page longue — accès direct aux sections */
.sommaire {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-soft);
}
.sommaire a {
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-light-2);
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
  padding: 0.45rem 0.9rem;
  transition: all var(--transition);
}
.sommaire a:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Tableau des cotisations */
.tarifs { width: 100%; border-collapse: collapse; }
.tarifs th {
  text-align: left;
  padding: 0.7rem 1rem 0.7rem 0;
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  border-bottom: 1px solid var(--line-gold);
}
.tarifs td {
  padding: 0.8rem 1rem 0.8rem 0;
  font-size: 0.95rem;
  color: var(--color-light-2);
  border-bottom: 1px solid var(--line-soft);
}
.tarifs td.montant {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  color: var(--color-light);
  white-space: nowrap;
}

/* Note d'avertissement (assurance, responsabilité) */
.note {
  padding: clamp(1rem, 2.5vw, 1.4rem);
  background: var(--color-dark-3);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.9rem;
  color: var(--color-light-2);
}

/* ------------------------------------------------------------
   FORMULAIRE DE CONTACT
   ------------------------------------------------------------ */
.form { display: grid; gap: 1.1rem; }
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
.form-field { display: grid; gap: 0.4rem; }
.form-field label {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold);
}
.form-field label .requis { color: var(--color-accent); }
.form-field input,
.form-field textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-light);
  background: var(--color-dark);
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-field textarea { min-height: 170px; resize: vertical; }
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(var(--rgb-accent),0.10);
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--color-muted); opacity: 0.7; }

/* Question anti-robot */
.form-captcha {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.1rem;
  align-items: end;
  padding: clamp(0.9rem, 2vw, 1.2rem);
  background: var(--color-dark-3);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.form-captcha .form-field input { max-width: 8rem; }
.form-captcha-question {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--color-light);
}

/* Retour après envoi */
.form-retour {
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius);
  font-size: 0.9rem;
}
.form-retour[data-etat="succes"] {
  background: var(--accent-wash);
  border-left: 3px solid var(--color-accent);
  color: var(--color-light);
}
.form-retour[data-etat="erreur"] {
  background: var(--color-dark-3);
  border-left: 3px solid var(--color-accent);
  color: var(--color-accent);
}
.form-retour[hidden] { display: none; }

/* Champ leurre : invisible aux humains, rempli par les robots */
.form-leurre {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr; }
  .form-captcha { grid-template-columns: 1fr; align-items: start; }
}

/* Liste à puces « — » du dojo */
.liste-tirets { list-style: none; display: grid; gap: 0.7rem; }
.liste-tirets li {
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: 0.4rem;
  font-size: 0.95rem;
  color: var(--color-light-2);
}
.liste-tirets li::before { content: '—'; color: var(--color-accent); }

/* ------------------------------------------------------------
   CADRE DE PAGE — colonne de 1300 px posée sur le motif seigaiha
   Le fond (vagues, 350 × 350 px) se répète derrière la page ;
   tous les blocs de premier niveau sont ramenés à --max-width,
   ce qui laisse le motif apparent de part et d'autre.
   ------------------------------------------------------------ */
body.framed {
  /* Le motif est imprimé en clair. Un voile de la couleur du fond est
     posé par-dessus : nul au thème clair, presque opaque au thème foncé,
     où il ne laisse plus affleurer que le tracé des vagues. */
  background-image:
    linear-gradient(var(--bg-veil), var(--bg-veil)),
    url('./img/Background.jpg');
  background-repeat: repeat;
  background-position: top center;
  background-size: auto, 350px 350px;
}
body.framed > .site-nav,
body.framed > .masthead,
body.framed > .hero-zen,
body.framed > section,
body.framed > .site-footer {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
}
/* La barre collante doit rester opaque au-dessus du motif */
body.framed > .site-nav { background: var(--color-dark); }

/* Le logo de l'accueil est une petite pierre murale (62 × 68 px) :
   on la laisse à sa taille native pour ne pas la crénéler.

   La barre lui ménage de l'air au-dessus et au-dessous : sans quoi la
   pierre venait toucher le filet qui la sépare de la rangée du menu.
   La hauteur de barre suit — 12 px de marge, 68 px de pierre, 12 px de
   marge, 44 px de menu, plus le retrait du haut. */
body.framed { --nav-height: 146px; }
body.framed .nav-logo { margin-block: 0.75rem; }
body.framed .nav-logo img { height: 68px; }
@media (max-width: 1024px) { body.framed { --nav-height: 146px; } }
@media (max-width: 768px)  {
  body.framed { --nav-height: 72px; }
  body.framed .nav-logo img { height: 48px; }
}

/* Bandeau photo panoramique du dojo (usage en cours de page) */
.dojo-banner {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
}
.dojo-banner img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  border: 1px solid var(--line-gold);
}
.dojo-banner figcaption {
  padding-top: 0.8rem;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ------------------------------------------------------------
   LES DEUX ÉCOLES — présentation, direction, bio et contact
   réunies dans une même colonne, côte à côte.
   ------------------------------------------------------------ */
.schools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: stretch;
}
.school {
  display: flex;
  flex-direction: column;
  background: var(--color-dark-2);
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
  overflow: hidden;
}
.school-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(1.4rem, 3vw, 2.2rem);
}
.school-summary { font-size: 0.92rem; color: var(--color-light-2); }

/* Bandeau du directeur technique */
.school-director {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
  align-items: center;
  margin-top: 1.8rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-soft);
}
.school-director .person-photo,
.school-avatar {
  width: 104px;
  aspect-ratio: 3/4;
  border-radius: var(--radius);
}
.school-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel-grad);
  font-family: var(--font-heading);
  font-size: 1.7rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}
.school-director .person-name { font-size: clamp(1.3rem, 2.2vw, 1.7rem); margin-bottom: 0.2rem; }
.school-director .person-title { margin-bottom: 0; font-size: 0.92rem; }

.school-bio { margin-top: 1.2rem; font-size: 0.88rem; }
.school-bio p { font-size: 0.88rem; line-height: 1.7; }

/* Contact, calé en bas pour que les deux colonnes s'alignent */
.school-contact {
  margin-top: auto;
  padding-top: 1.3rem;
  border-top: 1px solid var(--line-soft);
  display: grid;
  gap: 0.25rem;
  font-size: 0.9rem;
}
.school-contact .label {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 0.2rem;
}
.school-contact a { color: var(--color-accent); transition: color var(--transition); }
.school-contact a:hover {
  color: var(--color-accent-2);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.school-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.4rem; }

@media (max-width: 900px) {
  .schools { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .school-director { grid-template-columns: 1fr; justify-items: start; }
}

/* ------------------------------------------------------------
   GALERIE D'IMAGES + visionneuse
   ------------------------------------------------------------ */
/* Mosaïque en colonnes : accepte portraits et paysages sans recadrage.
   Le nombre de colonnes règle la taille des vignettes — plus il est élevé,
   plus les images sont petites. Cinq colonnes donnent des vignettes
   d'environ 250 px sur la largeur de la colonne de texte : la mosaïque
   se lit d'un coup d'œil, et la visionneuse prend le relais au clic. */
.galerie {
  columns: 5;
  column-gap: clamp(0.5rem, 1.2vw, 0.8rem);
}
.galerie button {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0 0 clamp(0.5rem, 1.2vw, 0.8rem);
  overflow: hidden;
  break-inside: avoid;
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
  background: var(--color-dark-3);
  cursor: zoom-in;
  transition: border-color var(--transition);
}
.galerie button:hover { border-color: var(--color-accent); }
.galerie img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.6s ease;
}
.galerie button:hover img { transform: scale(1.04); }

@media (max-width: 1100px) { .galerie { columns: 4; } }
@media (max-width: 760px)  { .galerie { columns: 3; } }
@media (max-width: 460px)  { .galerie { columns: 2; } }

/* Visionneuse plein écran */
.visionneuse {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: var(--overlay-bg);
  cursor: zoom-out;
}
.visionneuse[open] { display: flex; }
.visionneuse img {
  max-width: 100%;
  max-height: 88vh;
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.visionneuse-fermer {
  position: absolute;
  top: clamp(0.8rem, 2vw, 1.5rem);
  right: clamp(0.8rem, 2vw, 1.5rem);
  width: 42px;
  height: 42px;
  font-size: 1.3rem;
  line-height: 1;
  color: var(--overlay-ink);
  border: 1px solid rgba(var(--rgb-photo-ink),0.45);
  border-radius: 50%;
  background: transparent;
  transition: all var(--transition);
}
.visionneuse-fermer:hover {
  background: rgba(var(--rgb-photo-ink),0.15);
  border-color: var(--overlay-ink);
}
.visionneuse-legende {
  position: absolute;
  bottom: clamp(0.8rem, 3vw, 2rem);
  left: 0; right: 0;
  text-align: center;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(var(--rgb-photo-ink),0.8);
}

/* ------------------------------------------------------------
   ACCÈS AUX DEUX ÉCOLES — dans la bannière d'accueil.
   Remplace deux simples boutons par des blocs porteurs d'information.
   ------------------------------------------------------------ */
.ecoles-acces {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.7rem, 1.8vw, 1.1rem);
  margin-top: clamp(1.5rem, 3vw, 2.2rem);
}
.ecole-acces {
  display: grid;
  align-content: start;
  gap: 0.45rem;
  padding: clamp(1rem, 2.4vw, 1.4rem);
  background: var(--color-dark-2);
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
  transition: border-color var(--transition), background var(--transition);
}
.ecole-acces:hover {
  border-color: var(--color-accent);
  background: var(--color-dark-3);
}
.ecole-kanji {
  font-family: var(--font-kanji);
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  line-height: 1.25;
  letter-spacing: 0.1em;
  color: var(--color-accent);
}
.ecole-nom {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.2;
  color: var(--color-light);
}
.ecole-info { font-size: 0.82rem; line-height: 1.7; color: var(--color-light-2); }
/* Le nom du responsable, en tête du bloc d'information */
.ecole-personne {
  display: block;
  margin-bottom: 0.15rem;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--color-light);
}
/* Lien de biographie, placé juste sous le nom du responsable */
.ecole-lien-bio {
  display: block;
  margin-bottom: 0.5rem;
}
.ecole-liens {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.3rem;
  margin-top: 0.6rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--line-soft);
}
.ecole-lien {
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
  transition: color var(--transition);
}
a.ecole-lien:hover {
  color: var(--color-accent-2);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
@media (max-width: 620px) {
  .ecoles-acces { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   ÉQUIPE ENSEIGNANTE — direction à gauche, enseignants à droite.
   Toutes les fiches suivent le même schéma : image puis informations.
   ------------------------------------------------------------ */
.equipe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}

.fiche {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.fiche-image {
  width: 100%;
  max-width: 165px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
  background: var(--color-dark-3);
}
/* Médaillon d'attente, tant qu'aucune photo n'est disponible */
.fiche-initiales {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  letter-spacing: 0.1em;
  color: var(--color-muted);
  background: var(--panel-grad);
}
/* Nom, grade, fonction, fédération — sans texte courant */
.fiche-corps { padding-top: 1rem; }
.fiche-corps .person-name {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  margin-bottom: 0.4rem;
}
/* Le grade reprend le traitement des titres de « Ceintures noires » */
.fiche-rang {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--color-accent);
  margin-bottom: 0.55rem;
}
.fiche-corps .person-title {
  margin-bottom: 0.1rem;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.86rem;
  color: var(--color-light);
}
.fiche-aikido { font-size: 0.82rem; color: var(--color-muted); }
.fiche-corps .ecole-lien { display: inline-block; margin-top: 0.8rem; }

@media (max-width: 860px) { .equipe { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .equipe { grid-template-columns: 1fr; } }

/* Affiche / flyer d'un cours */
.flyer {
  display: block;
  max-width: 320px;
  margin: 0 auto;
}
.flyer img {
  width: 100%;
  height: auto;
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), border-color var(--transition);
}
a.flyer:hover img {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}
.flyer figcaption {
  padding-top: 0.7rem;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-align: center;
}

/* Logo d'une fédération partenaire */
.logo-partenaire {
  display: inline-block;
  margin-top: 1.6rem;
  padding: 1rem 1.4rem;
  background: var(--color-white);
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
}
.logo-partenaire img { width: 240px; max-width: 100%; height: auto; }

/* Vidéo de démonstration */
.video-dojo { margin-top: clamp(2rem, 4vw, 3rem); }
.video-dojo video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  border: 1px solid var(--line-gold);
  background: var(--color-dark-3);
}
.video-dojo figcaption {
  padding-top: 0.8rem;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* Plaque de kanji en tête de carte — remplace une photo */
.card-kanji {
  height: 190px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  background:
    linear-gradient(160deg, var(--color-dark-2) 0%, var(--color-dark-3) 100%);
  border-bottom: 1px solid var(--line-gold);
}
.card-kanji .glyphs {
  font-family: var(--font-kanji);
  font-size: clamp(2.1rem, 4.5vw, 3rem);
  letter-spacing: 0.14em;
  line-height: 1;
  color: var(--color-accent);
}
.card-kanji .reading {
  font-size: 0.6rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--color-gold);
}

/* Pied de page : bandeau de kanji en ouverture */
.footer-kanji {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: clamp(1.4rem, 5vw, 3.2rem);
  padding: 0 0 clamp(2rem, 4vw, 2.8rem);
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.footer-kanji span {
  font-family: var(--font-kanji);
  font-size: clamp(1.8rem, 4.5vw, 2.6rem);
  color: var(--color-accent);
  letter-spacing: 0.1em;
}
.footer-kanji small {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-body);
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--color-gold);
  text-align: center;
}

/* Les ancres de la barre de navigation ne doivent pas passer sous celle-ci */
section[id], header[id] {
  scroll-margin-top: calc(var(--nav-height) + 1rem);
}

/* Lexique japonais — panneau d'accompagnement de « Notre influence » */
.lexique {
  background: var(--color-dark-3);
  border-top: 2px solid var(--color-accent);
  border-radius: 0 0 var(--radius) var(--radius);
  padding: clamp(1.4rem, 3vw, 2rem);
}
.lexique-title {
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 1.2rem;
}
.lexique dl { display: grid; gap: 0.9rem; }
.lexique-row {
  display: grid;
  grid-template-columns: 4.6rem 1fr;
  gap: 0.9rem;
  align-items: baseline;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line-soft);
}
.lexique-row:last-child { border-bottom: none; padding-bottom: 0; }
.lexique-jp {
  font-family: var(--font-kanji);
  font-size: 1.6rem;
  line-height: 1.2;
  color: var(--color-accent);
  letter-spacing: 0.06em;
}
.lexique-fr { font-size: 0.86rem; line-height: 1.55; color: var(--color-light-2); }
/* Romaji et traduction sur la même ligne que l'idéogramme.
   Cormorant ayant une hauteur d'x plus basse qu'Inter, le romaji est
   remonté de 15 % pour paraître du même corps que la définition. */
.lexique-fr b {
  display: inline;
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 400;
  font-size: 1.15em;
  color: var(--color-light);
}
.lexique-fr b::after {
  content: ' — ';
  font-family: var(--font-body);
  font-style: normal;
  color: var(--color-muted);
}
@media (max-width: 480px) {
  .lexique-row { grid-template-columns: 4rem 1fr; gap: 0.7rem; }
  .lexique-jp { font-size: 1.35rem; }
}

/* ------------------------------------------------------------
   CARTE — habillage de Leaflet

   La bibliothèque arrive avec ses propres panneaux, blancs. On les
   ramène aux couleurs de la charte, de façon qu'ils suivent le thème
   comme le reste de la page.
   ------------------------------------------------------------ */
/* Le préfixe :root n'est pas décoratif : la feuille de Leaflet peut
   être chargée après celle du thème — c'est le cas sur l'accueil, et
   dans WordPress où elle n'arrive que sur les pages portant une carte.
   Ce poids supplémentaire fait gagner nos règles dans tous les cas. */
:root .leaflet-tile {
  filter: var(--filtre-tuiles);
}
:root .leaflet-popup-content-wrapper {
  background: var(--map-panel);
  color: var(--color-light);
  border: 1px solid var(--line-gold-strong);
  border-radius: var(--radius);
  box-shadow: 0 4px 20px rgba(var(--rgb-ink),0.15);
}
:root .leaflet-popup-tip { background: var(--map-panel); }
:root .leaflet-popup-content b { color: var(--color-accent); }
:root .leaflet-container a.leaflet-popup-close-button { color: var(--color-muted); }
:root .leaflet-container a.leaflet-popup-close-button:hover { color: var(--color-accent); }

.leaflet-control-zoom a {
  background: var(--map-panel) !important;
  color: var(--color-gold) !important;
  border-color: var(--line-gold-strong) !important;
}
.leaflet-control-zoom a:hover { background: var(--map-panel-hover) !important; }

.leaflet-control-attribution {
  background: rgba(var(--rgb-bg),0.85) !important;
  color: var(--color-muted) !important;
}
.leaflet-control-attribution a { color: var(--color-gold) !important; }

/* Carte de contact de l'accueil */
.home-map {
  height: 380px;
  border-radius: var(--radius);
  border: 1px solid var(--line-gold);
  overflow: hidden;
}

@media (max-width: 768px) {
  .enso-watermark { width: 320px; right: -5rem; opacity: 0.05; }
  .kanji-unit + .kanji-unit { border-left: none; }
  .kanji-mark { gap: 1.2rem 2rem; }
  .home-map { height: 300px; }
}

/* ============================================================
   SOUS-TITRES — un seul niveau, partagé par les trois pages
   .dan-title   : tête de sous-partie, avec filet
   .sous-titre  : tête de bloc à l'intérieur d'une colonne
   ============================================================ */
.sous-titre {
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  font-weight: 400;
  line-height: 1.25;
  color: var(--color-accent);
  margin-bottom: 0.9rem;
}
.sous-titre + .schedule-table,
.sous-titre + .tarifs { margin-top: 0; }
/* Un tableau qui ouvre sa colonne n'a rien à décoller ; en revanche le
   paragraphe qui le suit doit respirer plus qu'un simple interligne. */
.schedule-table:first-child { margin-top: 0; }
.schedule-table + p { margin-top: 1.6rem; }

/* ============================================================
   RESPONSIVE — TABLETTE ET TÉLÉPHONE
   Consolide le comportement des pages « framed » : accueil,
   Aikido Yoshin Ryu et Christine Venard.
   ============================================================ */

/* ── Jusqu'à 1024 px : la colonne de kanji disparaît ───────────
   Elle n'a de sens qu'en desktop, où la bannière tient sur deux
   colonnes. En dessous, elle mangerait la largeur du titre. */
@media (max-width: 1024px) {
  .kanji-column { display: none; }
  .hero-zen-grid { grid-template-columns: 1fr; }
  .hero-zen-inner { max-width: none; }
}

/* ── Jusqu'à 980 px : menu déroulant au hamburger ─────────────
   Les intitulés sont longs ; au-delà de 4 entrées ils débordent
   de la barre bien avant 768 px. Le seuil a été relevé de 900 à
   980 px à l'ajout d'« Infos pratiques » : à cinq entrées, la ligne
   ne tenait plus sous 970 px et le bouton « Nous Trouver » repassait
   à la ligne, hors de la hauteur de barre. */
@media (max-width: 980px) {
  /* `backdrop-filter` fait de la barre un bloc conteneur pour ses
     descendants en `position: fixed` : le menu déplié s'y trouverait
     enfermé au lieu de couvrir l'écran. On le neutralise ici. */
  .site-nav {
    height: auto;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--color-dark);
  }
  body.framed { --nav-height: 76px; }
  .nav-inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    height: var(--nav-height);
    padding: 0 clamp(1rem, 4vw, 1.5rem);
  }
  body.framed .nav-logo { margin-block: 0; }
  body.framed .nav-logo img { height: 52px; }
  .nav-menu { border-top: none; width: auto; }
  .nav-menu:not(.open) { display: none; }
  .nav-cta:not(.nav-menu .nav-cta) { display: none; }
  .nav-toggle { display: flex; }
  /* Panneau latéral déplié à droite, du côté du bouton hamburger.
     flex-wrap doit être neutralisé : hérité de la barre desktop, il
     ferait déborder les entrées en colonnes hors du panneau. */
  .nav-menu.open {
    top: var(--nav-height);
    left: auto;
    right: 0;
    width: min(340px, 86vw);
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    border-left: 1px solid var(--line-gold);
    box-shadow: var(--shadow-md);
  }
  .nav-menu.open > li { flex: 0 0 auto; }
  .nav-menu.open > li { width: 100%; }

  /* Les intertitres du menu déroulant restent lisibles une fois déplié */
  .nav-menu.open .dropdown-titre {
    padding: 1rem clamp(1.5rem, 5vw, 3rem) 0.3rem;
    font-size: 0.66rem;
    border-top: 1px solid var(--line-soft);
  }

  /* Entrées de premier niveau : cibles tactiles franches */
  .nav-menu.open > li > a {
    font-size: 0.95rem;
    padding: 1rem clamp(1rem, 5vw, 2rem);
    color: var(--color-light);
  }
  .nav-menu.open > li > a.active { color: var(--color-accent); }
}

/* ── Jusqu'à 768 px : téléphone ───────────────────────────────── */
@media (max-width: 768px) {
  /* Les tableaux ne doivent jamais déborder de l'écran */
  .schedule-table,
  .tarifs { font-size: 0.86rem; }
  .schedule-table th,
  .schedule-table td { padding: 0.6rem 0.5rem 0.6rem 0; }
  .tarifs td.montant { font-size: 1.1rem; }

  /* Le carrousel de page prend toute la largeur disponible */
  .carousel { max-width: 100%; }

  /* Trois colonnes deviennent illisibles : on empile */
  .g3 { grid-template-columns: 1fr; }

  /* Vidéo et affiche recentrées */
  .flyer { max-width: 260px; }
}

/* ── Jusqu'à 560 px : petit téléphone ─────────────────────────── */
@media (max-width: 560px) {
  .hero-zen-lockup { gap: 0.8rem; }
  .hero-zen-enso { width: 62px; }
  .school-actions .btn,
  .flex-wrap-gap .btn { width: 100%; justify-content: center; }
  .footer-kanji { gap: 1.6rem; }
}

/* ============================================================
   PRINT BASIC
   ============================================================ */
@media print {
  /* Le thème foncé revient à la palette claire sur le papier :
     une encre crème sur une feuille blanche ne s'imprimerait pas.
     Seuls les jetons de base sont rétablis — les filets et les ombres
     en découlent. */
  :root[data-theme="dark"] {
    --rgb-bg:     246,243,237;
    --rgb-ink:    52,56,58;
    --rgb-accent: 138,15,20;
    --rgb-gold:   139,129,119;

    --color-dark:    #f6f3ed;
    --color-dark-2:  #f1ede5;
    --color-dark-3:  #eae5db;
    --color-accent:  #8a0f14;
    --color-accent-2:#a3161c;
    --color-gold:    #8b8177;
    --color-em:      #8a0f14;
    --color-light:   #34383a;
    --color-light-2: #4d5254;
    --color-muted:   #7f8486;
    --color-on-accent: #ffffff;

    --panel-grad:          linear-gradient(160deg,#eeeae2 0%,#ddd8ce 100%);
    --section-accent-grad: linear-gradient(135deg, var(--color-dark-2) 0%, #ede5de 100%);
    --bg-veil:        rgba(var(--rgb-bg),0);
    --hero-bg-filter: none;
    --shadow-sm:  none;
    --shadow-md:  none;
    --nav-shadow: none;
  }

  .site-nav, .hero-scroll, .nav-toggle, .nav-actions { display: none; }
  .hero-bg, .enso-watermark { display: none; }
  body { background: white; color: black; }
  h1, h2, h3, h4, h5 { color: var(--color-accent); }
  a { color: black; }
}

/* ============================================================
   MAÎTRES INVITÉS — encadré de la page Stages
   ============================================================ */
.carte-maitres {
  background: var(--color-dark-2);
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
  padding: 2rem;
}
.carte-maitres .card-tag { margin-bottom: 1.2rem; }

.liste-maitres {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.maitre {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line-soft);
}
/* Le dernier de la liste ne porte pas de filet : rien ne le suit. */
.maitre:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
/* Le pays, en lettres dorées et de largeur fixe, aligne les noms. */
.maitre-pays {
  min-width: 48px;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--color-gold);
}
.maitre-nom { color: var(--color-light); }
.maitre-detail {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-muted);
}

/* ============================================================
   UTILITAIRES
   Ils remplacent les attributs style="" que portaient les pages
   (règle webhint « no-inline-styles »). Ils ferment la feuille :
   à spécificité égale, ils l'emportent ainsi sur les composants
   qu'ils viennent ajuster — .two-col et son align-items: center,
   .section-intro et sa marge basse.
   ============================================================ */

/* Colonnes calées en haut plutôt que centrées : deux blocs de texte
   de longueurs différentes doivent démarrer sur la même ligne. */
.align-start { align-items: start; }

/* Espacements ponctuels. Les valeurs reprennent exactement celles qui
   étaient posées en ligne : le rendu ne bouge pas. */
.espace-dessus-xs  { margin-top: 0.8rem; }
.espace-dessus-s   { margin-top: 1rem; }
.espace-dessus-m   { margin-top: 1.5rem; }
.espace-dessus-l   { margin-top: 1.8rem; }
.espace-dessus-xl  { margin-top: 2rem; }
.espace-dessus-xxl { margin-top: 2.5rem; }
.espace-dessous-l  { margin-bottom: 1.8rem; }

/* Respiration d'un sous-chapitre ouvrant au sein d'une même section. */
.espace-chapitre { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* Mention discrète : source, précision, note de bas de bloc. */
.mention {
  font-size: 0.85rem;
  color: var(--color-muted);
}

/* ============================================================
   COMPLÉMENT WORDPRESS

   Tout ce qui suit n'existait pas sur le site statique : ce sont
   les classes que WordPress produit de lui-même — alignements de
   médias, légendes, pagination, commentaires — habillées avec les
   mêmes jetons que le reste du thème, de façon à ce qu'un contenu
   saisi dans l'éditeur ne détonne pas.
   ============================================================ */

/* ------------------------------------------------------------
   Barre d'administration
   La barre du site est collante : sans cette correction elle se
   glisserait sous la barre noire de WordPress.
   ------------------------------------------------------------ */
.admin-bar body.framed .site-nav { top: 32px; }
@media screen and (max-width: 782px) {
  .admin-bar body.framed .site-nav { top: 46px; }
}
.admin-bar section[id],
.admin-bar header[id] { scroll-margin-top: calc(var(--nav-height) + 3rem); }

/* ------------------------------------------------------------
   Accessibilité — lien d'évitement et textes réservés aux lecteurs
   d'écran. Repris du code de référence de WordPress.
   ------------------------------------------------------------ */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}
.screen-reader-text:focus,
.lien-evitement:focus {
  clip-path: none;
  height: auto;
  width: auto;
  left: 1rem;
  top: 1rem;
  z-index: 100000;
  display: block;
  padding: 0.8rem 1.4rem;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-on-accent);
  background: var(--color-accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}

/* ------------------------------------------------------------
   Alignements et médias produits par l'éditeur
   ------------------------------------------------------------ */
.alignleft {
  float: left;
  margin: 0.4rem clamp(1rem, 3vw, 2rem) 1rem 0;
}
.alignright {
  float: right;
  margin: 0.4rem 0 1rem clamp(1rem, 3vw, 2rem);
}
.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.alignwide  { width: 100%; }
.alignfull  { width: 100%; }
.entry-content > .alignwide,
.entry-content > .alignfull { margin-inline: 0; }

.wp-caption { max-width: 100%; }
.wp-caption img { border-radius: var(--radius); }
.wp-caption-text,
figcaption,
.wp-block-image figcaption {
  padding-top: 0.7rem;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-muted);
  text-align: center;
}
.wp-block-image img { border-radius: var(--radius); }

/* Les blocs de citation reprennent le traitement de .blockquote */
.wp-block-quote {
  border-left: 3px solid var(--color-gold);
  padding: clamp(1rem, 2.5vw, 1.5rem) clamp(1rem, 3vw, 2rem);
  margin: 2rem 0;
  background: var(--gold-wash);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.wp-block-quote p {
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-style: italic;
  font-weight: 300;
  color: var(--color-light);
  line-height: 1.6;
}
.wp-block-quote cite {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-style: normal;
  color: var(--color-gold);
}

/* Séparateur */
.wp-block-separator {
  width: 44px;
  height: 2px;
  border: 0;
  background: var(--color-accent);
  margin: 2rem 0;
}
.wp-block-separator.is-style-wide { width: 100%; height: 1px; background: var(--line-gold); }

/* Listes et tableaux saisis dans l'éditeur */
.entry-content ul,
.entry-content ol { padding-left: 1.3rem; margin-bottom: 1rem; color: var(--color-light-2); }
.entry-content li { margin-bottom: 0.35rem; }
.wp-block-table table { width: 100%; border-collapse: collapse; }
.wp-block-table th {
  text-align: left;
  padding: 0.8rem 1rem;
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-gold);
  border-bottom: 1px solid var(--line-gold-strong);
}
.wp-block-table td {
  padding: 0.85rem 1rem;
  font-size: 0.92rem;
  color: var(--color-light-2);
  border-bottom: 1px solid var(--line-soft);
}

/* Code */
.entry-content code,
.wp-block-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: var(--color-dark-3);
  border-radius: var(--radius);
  padding: 0.15em 0.4em;
}
.wp-block-code { padding: 1rem 1.2rem; overflow-x: auto; }

/* Galerie native de WordPress — même traitement que .galerie */
.wp-block-gallery.has-nested-images figure.wp-block-image img {
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
}

/* ------------------------------------------------------------
   Listes d'articles — archives, résultats de recherche
   ------------------------------------------------------------ */
.liste-articles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(1.2rem, 3vw, 2rem);
}
.article-resume {
  display: flex;
  flex-direction: column;
  background: var(--color-dark-2);
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition),
              border-color var(--transition);
}
.article-resume:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--line-gold-strong);
}
.article-resume-image { height: 200px; overflow: hidden; background: var(--color-dark-3); }
.article-resume-image img { width: 100%; height: 100%; object-fit: cover; }
.article-resume-corps { padding: clamp(1.2rem, 3vw, 1.8rem); flex: 1; display: flex; flex-direction: column; }
.article-resume-date {
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 0.4rem;
}
.article-resume-titre {
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 2.5vw, 1.5rem);
  font-weight: 400;
  color: var(--color-accent);
  margin-bottom: 0.7rem;
  line-height: 1.2;
}
.article-resume-extrait { font-size: 0.88rem; line-height: 1.7; color: var(--color-muted); flex: 1; margin-bottom: 1.2rem; }

/* Métadonnées d'un article seul */
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: 1.6rem;
}

/* ------------------------------------------------------------
   Pagination
   ------------------------------------------------------------ */
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 0.6rem;
  font-size: 0.78rem;
  color: var(--color-light-2);
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
  transition: all var(--transition);
}
.pagination .page-numbers:hover,
.pagination .page-numbers.current {
  color: var(--color-accent);
  border-color: var(--color-accent);
}
.pagination .page-numbers.dots { border-color: transparent; }

/* ------------------------------------------------------------
   Formulaire de recherche
   ------------------------------------------------------------ */
.recherche {
  display: flex;
  gap: 0.6rem;
  max-width: 480px;
}
.recherche input[type="search"] {
  flex: 1;
  min-width: 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-light);
  background: var(--color-dark);
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.recherche input[type="search"]:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(var(--rgb-accent),0.10);
}

/* ------------------------------------------------------------
   Commentaires
   ------------------------------------------------------------ */
.zone-commentaires { margin-top: clamp(2.5rem, 5vw, 4rem); }
.liste-commentaires { list-style: none; display: grid; gap: 1.2rem; }
.liste-commentaires .children { list-style: none; padding-left: clamp(1rem, 4vw, 2.5rem); margin-top: 1.2rem; display: grid; gap: 1.2rem; }
.commentaire-corps {
  padding: clamp(1.2rem, 3vw, 1.8rem);
  background: var(--color-dark-2);
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
}
.commentaire-auteur { font-family: var(--font-heading); font-size: 1.1rem; color: var(--color-accent); }
.commentaire-date { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-gold); margin-bottom: 0.8rem; }

/* ------------------------------------------------------------
   Message d'absence de contenu
   ------------------------------------------------------------ */
.aucun-resultat {
  padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--color-dark-3);
  border-left: 3px solid var(--color-gold);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--color-light-2);
}

/* ------------------------------------------------------------
   Retour du formulaire de contact
   Le site statique affichait le message par JavaScript ; ici il
   revient du serveur, dans l'adresse. Les deux voies partagent la
   même présentation, déjà définie plus haut (.form-retour).
   ------------------------------------------------------------ */
.form-retour[data-etat="succes"] { display: block; }

/* ------------------------------------------------------------
   Emplacement de média à pourvoir
   Le thème ne livre que les ressources de la charte ; les
   photographies sont du contenu, et viennent de la médiathèque. Ce
   cartouche marque la place, en disant ce qu'on y attend.
   ------------------------------------------------------------ */
.media-a-poser {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 180px;
  padding: clamp(1.2rem, 3vw, 2rem);
  text-align: center;
  background: var(--panel-grad);
  border: 1px dashed var(--line-gold-strong);
  border-radius: var(--radius);
}
.media-a-poser-titre {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--color-gold);
}
.media-a-poser-aide {
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--color-muted);
  max-width: 26em;
}
.media-a-poser.est-portrait { aspect-ratio: 3/4; min-height: 0; }

/* ------------------------------------------------------------
   Carte en mode « adresse et lien »
   Aucune requête ne part vers l'extérieur : le visiteur reste maître
   du moment où il ouvre le plan.
   ------------------------------------------------------------ */
.carte-lien {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.2rem;
  min-height: 240px;
  padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--color-dark-3);
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
}
.carte-lien-adresse {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-light-2);
}

/* ------------------------------------------------------------
   Logo personnalisé
   ------------------------------------------------------------ */
.nav-logo .custom-logo { height: 68px; width: auto; }
@media (max-width: 980px) { .nav-logo .custom-logo { height: 52px; } }
@media (max-width: 480px) { .nav-logo .custom-logo { height: 40px; } }