/* ============================================================
   IPPON WADO KAI
   Charte : « Propositions graphiques » (assets/…​.pdf)
   Palette officielle — 3 couleurs, aucune autre.
     #CEC0A9  sable   · #DB4236  rouge   · #30131B  prune
   Typographie de marque : DM Sans
   ============================================================ */

:root {
  /* --- couleurs de marque (charte) --- */
  --sand: #cec0a9;
  --red: #db4236;
  --plum: #30131b;

  /* --- déclinaisons, dérivées des 3 couleurs --- */
  --sand-pale: #e4dcd0;
  --sand-deep: #b9a88d;
  --plum-deep: #240e14;

  --muted: rgb(48 19 27 / 74%);
  --hairline: rgb(48 19 27 / 18%);
  --hairline-light: rgb(206 192 169 / 26%);

  /* Le sceau et le logotype dérivent d'une seule valeur : la changer
     ici suffit, sur toutes les pages. La hauteur d'en-tête suit, pour
     garder le même air autour du logo. */
  --header-height: 99px;
  --brand-symbol-size: 83px;
  --brand-wordmark-height: calc(var(--brand-symbol-size) * 0.5);
  --gutter: 80px;
  --section-space: clamp(68px, 8vw, 124px);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--sand-pale);
  color: var(--plum);
  font-family: "DM Sans", "Avenir Next", Avenir, "Helvetica Neue", Arial,
    sans-serif;
  font-optical-sizing: auto;
  line-height: 1.6;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
}

.container {
  width: calc(100% - var(--gutter));
  max-width: 1360px;
  margin: 0 auto;
}

.skip-link {
  position: absolute;
  top: -60px;
  left: 16px;
  z-index: 30;
  padding: 10px 16px;
  background: var(--plum);
  color: var(--sand);
  font-size: 0.85rem;
  text-decoration: none;
  transition: top 160ms ease;
}

.skip-link:focus {
  top: 12px;
}

/* ============================================================
   HEADER
   ============================================================ */

.site-header {
  position: relative;
  z-index: 10;
  min-height: var(--header-height);
  background: var(--sand);
  border-bottom: 1px solid var(--hairline);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% - var(--gutter));
  max-width: 1360px;
  min-height: var(--header-height);
  margin: 0 auto;
}

.brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 14px;
  color: var(--plum);
  text-decoration: none;
}

.brand-symbol {
  display: block;
  width: var(--brand-symbol-size);
  height: var(--brand-symbol-size);
}

.brand-wordmark {
  display: block;
  width: auto;
  height: var(--brand-wordmark-height);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.2vw, 42px);
}

.site-nav a {
  position: relative;
  padding: 8px 0;
  color: var(--plum);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}

.site-nav a:not(.nav-cta)::after {
  position: absolute;
  right: 0;
  bottom: 1px;
  left: 0;
  height: 2px;
  background: var(--red);
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 180ms ease;
}

.site-nav a:is(:hover, :focus-visible)::after,
.site-nav .is-active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.site-nav .nav-cta {
  margin-left: 4px;
  padding: 14px 20px;
  background: var(--plum);
  border-radius: 999px;
  color: var(--sand);
  transition: background-color 180ms ease, color 180ms ease;
}

.site-nav .nav-cta:hover {
  background: var(--red);
  color: var(--plum);
}

/* Focus clavier : contraste plein, cf. .btn-primary:focus-visible. */
.site-nav .nav-cta:focus-visible {
  background: var(--plum);
  color: var(--sand);
}

.site-nav a:focus-visible,
.brand:focus-visible,
.menu-toggle:focus-visible + .menu-button {
  outline: 2px solid var(--plum);
  outline-offset: 5px;
}

.menu-toggle,
.menu-button {
  display: none;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   TYPOGRAPHIE
   ============================================================ */

h1,
h2,
h3 {
  margin: 0;
  font-weight: 700;
}

h1 {
  font-size: clamp(2.3rem, 4.6vw, 3.9rem);
  letter-spacing: -0.025em;
  line-height: 1.04;
}

h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.75rem);
  letter-spacing: -0.02em;
  line-height: 1.12;
}

h3 {
  margin-bottom: 10px;
  font-size: 1.16rem;
  letter-spacing: -0.005em;
}

/* Label de section : carré rouge + libellé prune (le rouge ne porte
   jamais de petit texte — contraste insuffisant sur fond clair). */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.eyebrow::before {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  background: var(--red);
  content: "";
}

.eyebrow-light {
  color: var(--sand);
  justify-content: center;
}

.lead {
  max-width: 36ch;
  margin: 22px 0 0;
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
  color: var(--muted);
}

.btn {
  display: inline-flex;
  align-items: center;
  padding: 15px 28px;
  border: 1px solid var(--plum);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 180ms ease, color 180ms ease,
    border-color 180ms ease;
}

.btn-primary {
  background: var(--plum);
  color: var(--sand);
}

.btn-primary:hover {
  background: var(--red);
  border-color: var(--red);
  color: var(--plum);
}

/* Le survol rouge donne 3,9:1 — acceptable pour un état transitoire à la
   souris, mais c'était aussi l'état du focus clavier. Le focus garde donc
   le contraste plein (9,5:1) : voir CHARTE-GRAPHIQUE.md. */
.btn-primary:focus-visible {
  background: var(--plum);
  border-color: var(--plum);
  color: var(--sand);
}

.btn-ghost:is(:hover, :focus-visible) {
  background: var(--plum);
  color: var(--sand);
}

/* ============================================================
   DÉCOR JAPONAIS
   Motifs traditionnels employés comme texture de fond, jamais
   comme illustration : traits fins, opacité très basse, dans les
   seules couleurs de la charte. Tous en aria-hidden.
   ============================================================ */

.deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

/* --- Seigaiha 青海波 : les vagues de la mer bleue, motif de bon
       augure. Tuile de 60 × 30, dégradée vers le haut. --- */

.deco-seigaiha {
  right: 0;
  bottom: 0;
  left: 0;
  height: 190px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30' viewBox='0 0 60 30'%3E%3Cg fill='none' stroke='%2330131b' stroke-width='1.1'%3E%3Cpath d='M0 30a30 30 0 0 1 60 0'/%3E%3Cpath d='M8 30a22 22 0 0 1 44 0'/%3E%3Cpath d='M16 30a14 14 0 0 1 28 0'/%3E%3Cpath d='M24 30a6 6 0 0 1 12 0'/%3E%3Cpath d='M-30 0a30 30 0 0 0 60 0'/%3E%3Cpath d='M-22 0a22 22 0 0 0 44 0'/%3E%3Cpath d='M-14 0a14 14 0 0 0 28 0'/%3E%3Cpath d='M-6 0a6 6 0 0 0 12 0'/%3E%3Cpath d='M30 0a30 30 0 0 0 60 0'/%3E%3Cpath d='M38 0a22 22 0 0 0 44 0'/%3E%3Cpath d='M46 0a14 14 0 0 0 28 0'/%3E%3Cpath d='M54 0a6 6 0 0 0 12 0'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 60px 30px;
  opacity: 0.16;
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0%, transparent 100%);
}

.deco-seigaiha-light {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30' viewBox='0 0 60 30'%3E%3Cg fill='none' stroke='%23cec0a9' stroke-width='1.1'%3E%3Cpath d='M0 30a30 30 0 0 1 60 0'/%3E%3Cpath d='M8 30a22 22 0 0 1 44 0'/%3E%3Cpath d='M16 30a14 14 0 0 1 28 0'/%3E%3Cpath d='M24 30a6 6 0 0 1 12 0'/%3E%3Cpath d='M-30 0a30 30 0 0 0 60 0'/%3E%3Cpath d='M-22 0a22 22 0 0 0 44 0'/%3E%3Cpath d='M-14 0a14 14 0 0 0 28 0'/%3E%3Cpath d='M-6 0a6 6 0 0 0 12 0'/%3E%3Cpath d='M30 0a30 30 0 0 0 60 0'/%3E%3Cpath d='M38 0a22 22 0 0 0 44 0'/%3E%3Cpath d='M46 0a14 14 0 0 0 28 0'/%3E%3Cpath d='M54 0a6 6 0 0 0 12 0'/%3E%3C/g%3E%3C/svg%3E");
  opacity: 0.22;
}

/* Au-dessus du pied de page, les vagues descendent au lieu de monter. */
.deco-seigaiha-top {
  top: 0;
  bottom: auto;
  height: 150px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
}

/* --- Kanji en colonne verticale, à la manière d'une enseigne --- */

.deco-kanji {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP",
    "Songti SC", serif;
  font-weight: 400;
  line-height: 1.05;
  color: var(--plum);
  writing-mode: vertical-rl;
  opacity: 0.075;
}

/* Sur le sable soutenu, le même signe ressort davantage. */
.section-alt .deco-kanji {
  opacity: 0.06;
}

.deco-kanji-light {
  color: var(--sand);
  opacity: 0.1;
}

/* (Le hero n'a plus de kanji : le panorama porte seul le motif japonais.) */

.deco-kanji-club {
  top: 50%;
  right: -0.12em;
  font-size: clamp(9rem, 22vw, 22rem);
  writing-mode: horizontal-tb;
  transform: translateY(-50%);
}

.deco-kanji-karate {
  right: -0.06em;
  bottom: -0.12em;
  font-size: clamp(6rem, 13vw, 13rem);
}

.deco-kanji-cta {
  top: 50%;
  left: 2vw;
  font-size: clamp(6rem, 12vw, 12rem);
  transform: translateY(-50%);
}

/* --- Ensō 円相 : le cercle tracé d'un seul geste. Le cercle est
       « symbole fondamental » selon la charte. --- */

.deco-enso {
  top: 50%;
  right: 4vw;
  width: min(46vw, 460px);
  height: auto;
  color: var(--sand);
  opacity: 0.14;
  transform: translateY(-50%);
}

/* --- Paysage japonais : Fuji, soleil, torii et vagues --- */

/* (Le paysage japonais n'est plus un décor de fond : voir .hero-art.) */

/* ============================================================
   HERO
   ============================================================ */

/* Texte et panorama partagent la même cellule de grille : le paysage
   passe en fond, le texte par-dessus. La hauteur du hero suit le plus
   grand des deux. */
.hero {
  position: relative;
  display: grid;
  padding: 0;
  background: var(--sand);
  overflow: hidden;
}

.hero > .hero-inner,
.hero > .hero-art {
  grid-area: 1 / 1;
}

.hero-inner {
  position: relative;
  z-index: 1;
  align-self: start;
  padding-top: clamp(52px, 6vw, 92px);
  /* Réserve la hauteur des reliefs : sous 1024px le texte occupe toute
     la largeur, il doit donc s'arrêter au-dessus des montagnes. */
  padding-bottom: 28vw;
}

.hero-text {
  max-width: 60ch;
}

.hero .lead {
  max-width: 52ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 34px 0 0;
}

.hero-note {
  margin: 26px 0 0;
  padding-left: 16px;
  border-left: 3px solid var(--red);
  color: var(--muted);
  font-size: 0.92rem;
}

/* Le symbole est un emoji : il arrive avec ses propres couleurs,
   qui ne sont pas celles de la charte. On le tient donc petit et
   on le sépare du texte — un accent, pas une illustration. */
.hero-note-symbole {
  margin-right: 8px;
  font-size: 1.05em;
  font-style: normal;
  line-height: 1;
}

/* Panorama : fond du hero. Il prend presque toute la largeur, ne garde
   qu'une marge étroite, et sa ligne de sol coïncide avec le bas du hero
   — donc avec le haut du bandeau rouge. */
.hero-art {
  z-index: 0;
  align-self: end;
  width: calc(100% - clamp(20px, 2.4vw, 44px));
  max-width: 1700px;
  margin: 0 auto;
}

.hero-art img {
  display: block;
  width: 100%;
  height: auto;
}

/* Sur mobile le panorama entier ne ferait qu'une bande de 150px. On
   l'agrandit et on le recadre sur sa partie dense (pins → torii) : il
   déborde de l'écran comme un vrai fond, et le texte le recouvre
   largement — tout en s'arrêtant au-dessus des reliefs. */
@media (max-width: 760px) {
  .hero-inner {
    padding-bottom: calc(47vw + 22px);
  }

  .hero-art {
    width: 100%;
    max-width: none;
  }

  /* `max-width: none` : sinon la règle globale `img { max-width: 100% }`
     ramènerait l'image à la largeur du conteneur. */
  .hero-art img {
    width: 185%;
    max-width: none;
    margin-left: -82.4%;
  }
}

/* À partir de 1024px, le texte tient dans la zone volontairement dégagée
   à gauche du panorama : il peut alors descendre sur toute la hauteur
   sans jamais croiser la pagode, le Fuji ou le torii. */
@media (min-width: 1024px) {
  .hero-inner {
    padding-bottom: clamp(56px, 6vw, 96px);
  }

  .hero-text {
    max-width: 43%;
  }
}

/* ============================================================
   BANDEAU REPRISE  (bloc rouge : uniquement du texte de grande
   taille, seul cas où le prune sur rouge atteint le contraste AA)
   ============================================================ */

.banner {
  background: var(--red);
  color: var(--plum);
}

.banner-inner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 0;
}

/* Enveloppe le SVG venu de la base : la taille est imposée ici, le
   fichier d'origine ne la dicte pas. `currentColor` fait prendre à
   l'icône la couleur du texte du bandeau — aucune quatrième couleur
   ne peut s'y glisser. */
.banner-icon {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 26px;
  height: 26px;
}

.banner-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.banner p {
  margin: 0;
  font-size: clamp(1.2rem, 1.7vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ============================================================
   SECTIONS
   ============================================================ */

.section {
  position: relative;
  padding: var(--section-space) 0;
  overflow: hidden;
}

.section-alt {
  background: var(--sand);
}

.section > .container {
  position: relative;
  z-index: 1;
}

.section-head {
  max-width: 62ch;
  margin-bottom: clamp(38px, 4.5vw, 62px);
}

.section-lead {
  margin: 20px 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.35vw, 1.1rem);
}

.subhead {
  margin: clamp(48px, 5vw, 72px) 0 26px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 60px);
}

.split-top {
  margin-top: clamp(48px, 5vw, 76px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.prose p {
  margin: 0 0 16px;
  max-width: 60ch;
  color: var(--muted);
}

.prose p:last-child {
  margin-bottom: 0;
}

.prose h3 {
  margin-bottom: 14px;
}

/* --- carte enseignant --- */

.card {
  padding: clamp(26px, 3vw, 38px);
  background: var(--sand-pale);
  border: 1px solid var(--hairline);
}

.section .card {
  background: var(--sand);
}

.section-alt .card {
  background: var(--sand-pale);
}

/* Carte horizontale : le portrait occupe toute la colonne de gauche, du
   filet rouge jusqu'au bas de la carte. En pleine largeur au-dessus du
   texte, il rendait la carte deux fois plus haute que la colonne de prose
   voisine ; posé en vignette carrée, il laissait un grand vide sous lui.

   Le padding est porté par .sensei-texte et non par la carte : l'image
   affleure ainsi les trois bords qu'elle touche. La hauteur de la ligne
   est donnée par le texte seul — l'image est en absolu pour ne pas
   participer à ce calcul, sans quoi sa hauteur intrinsèque l'imposerait. */
.card-sensei {
  --pad: clamp(26px, 3vw, 38px);
  display: grid;
  grid-template-columns: minmax(0, clamp(150px, 33%, 230px)) minmax(0, 1fr);
  padding: 0;
  border-top: 4px solid var(--red);
}

.sensei-media {
  position: relative;
  align-self: stretch;
  background: var(--sand-deep);
}

.sensei-texte {
  min-width: 0;
  padding: var(--pad) var(--pad) var(--pad) clamp(20px, 2.2vw, 30px);
}

/* `max-width: none` neutralise la règle globale `img`. */
.sensei-portrait {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
}

.card-eyebrow {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.card-sensei h3 {
  margin-bottom: 4px;
  font-size: 1.4rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sensei-rank {
  margin: 0 0 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.82rem;
}

.card-sensei p {
  margin: 0 0 16px;
  color: var(--muted);
}

.card-sensei .card-contact {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}

.card-contact a {
  color: var(--plum);
  font-size: 1.14rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.card-contact a:is(:hover, :focus-visible) {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* --- valeurs --- */

.values {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.values li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  font-weight: 500;
}

/* Le cercle, motif central de la charte. */
.values svg {
  width: 52px;
  height: 52px;
  padding: 12px;
  border: 1px solid var(--red);
  border-radius: 50%;
  color: var(--red);
}

/* --- points forts --- */

.checks {
  display: grid;
  /* `min(310px, 100%)` : sous 344px de viewport le conteneur est plus
     étroit que 310px, et une piste fixe le ferait déborder. */
  grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr));
  gap: 14px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.checks li {
  position: relative;
  padding-left: 34px;
  color: var(--muted);
}

.checks li::before {
  position: absolute;
  top: 4px;
  left: 0;
  display: grid;
  width: 18px;
  height: 18px;
  background: var(--red);
  border-radius: 50%;
  color: var(--plum);
  content: "✓";
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1;
  place-content: center;
}

/* ============================================================
   COURS
   ============================================================ */

.courses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
}

.course {
  display: flex;
  gap: clamp(18px, 2vw, 26px);
  padding: clamp(26px, 3vw, 38px);
  background: var(--sand-pale);
}

.course-age {
  display: grid;
  flex: 0 0 auto;
  width: 70px;
  height: 70px;
  margin: 0;
  background: var(--red);
  border-radius: 50%;
  color: var(--plum);
  /* 19,2px en gras : au-dessus du seuil « texte large », où 3:1 suffit.
     Prune sur rouge donne 3,9:1 — sous ce seuil il en faudrait 4,5. */
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  place-content: center;
}

.course-extra .course-age {
  background: var(--plum);
  color: var(--sand);
}

.course-age svg {
  width: 28px;
  height: 28px;
}

.course-body {
  min-width: 0;
}

.course h3 {
  margin-bottom: 14px;
  font-size: 1.26rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.course h3 span {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.course-body p {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.schedule {
  margin: 0;
  padding: 14px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.schedule > div {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 4px 0;
}

.schedule dt {
  flex: 0 0 84px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.schedule dd {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.steps {
  margin: 0;
  padding-left: 20px;
  color: var(--muted);
}

.steps li {
  margin-bottom: 8px;
  padding-left: 4px;
}

.steps strong {
  color: var(--plum);
  font-weight: 700;
}

/* Date de dernière mise à jour des horaires : discrète, sous la
   grille. Elle dit au visiteur s'il lit quelque chose d'actuel. */
.horaires-maj {
  margin: clamp(22px, 2.4vw, 30px) 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

/* ============================================================
   TARIFS
   ============================================================ */

.prices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.price {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3vw, 40px);
  background: var(--sand);
  border: 1px solid var(--hairline);
}

/* Le rouge revient ici en filet, pas en texte : c'est le seul emploi que
   la charte autorise sur ces fonds. */
.price-featured {
  background: var(--plum);
  border-color: var(--plum);
  border-top: 4px solid var(--red);
  color: var(--sand);
}

.price-flag {
  margin: 0 0 14px;
  color: var(--sand);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.price h3 {
  margin-bottom: 18px;
  font-size: 0.98rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Le montant était en rouge sur sable : 2,4:1, sous le seuil même pour du
   très grand corps. La charte est explicite — « rouge sur sable, jamais de
   texte ». Prune sur sable donne 9,5:1. */
.price-tag {
  margin: 0 auto 14px 0;
  color: var(--plum);
  font-size: clamp(2.8rem, 4.6vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

/* Sur la carte prune, l'inverse : sable sur prune, 9,5:1 également. */
.price-featured .price-tag {
  color: var(--sand);
}

.price-tag span {
  margin-left: 4px;
  font-size: 0.4em;
  font-weight: 700;
  vertical-align: super;
}

.price-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.price-featured .price-note {
  color: rgb(206 192 169 / 80%);
}

.prices-foot {
  margin: 30px 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.prices-foot a {
  color: var(--plum);
  font-weight: 700;
  text-underline-offset: 3px;
}

/* ============================================================
   CTA
   ============================================================ */

.cta {
  position: relative;
  padding: var(--section-space) 0;
  background: var(--plum);
  color: var(--sand);
  overflow: hidden;
}

.cta-inner {
  position: relative;
  z-index: 1;
  max-width: 900px;
  text-align: center;
}

.cta h2 {
  font-size: clamp(1.85rem, 4.2vw, 3.2rem);
}

.cta-lead {
  max-width: 46ch;
  margin: 20px auto 0;
  color: rgb(206 192 169 / 82%);
  font-size: clamp(1rem, 1.4vw, 1.12rem);
}

/* Bouton clair sur le bloc prune. */
.btn-light {
  background: var(--sand);
  border-color: var(--sand);
  color: var(--plum);
}

.btn-light:hover {
  background: var(--red);
  border-color: var(--red);
  color: var(--plum);
}

/* Focus clavier sur fond prune : on inverse vers le sable plein. */
.btn-light:focus-visible {
  background: var(--sand);
  border-color: var(--sand);
  color: var(--plum);
}

.cta-actions {
  margin: 30px 0 0;
}

.cta-contacts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: clamp(34px, 4vw, 52px) 0 0;
}

.cta-phone {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 18px;
  border: 1px solid var(--hairline-light);
  text-decoration: none;
  transition: background-color 180ms ease, border-color 180ms ease;
}

.cta-phone:is(:hover, :focus-visible) {
  background: rgb(206 192 169 / 8%);
  border-color: var(--sand);
}

.cta-phone span {
  color: rgb(206 192 169 / 78%);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.cta-phone strong {
  font-size: clamp(0.95rem, 1.5vw, 1.14rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}

.quote {
  margin: clamp(40px, 5vw, 62px) 0 0;
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--hairline-light);
}

.quote blockquote {
  margin: 0;
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  font-style: italic;
  letter-spacing: -0.01em;
}

.quote blockquote::before {
  content: "« ";
}

.quote blockquote::after {
  content: " »";
}

.quote figcaption {
  margin-top: 14px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgb(206 192 169 / 78%);
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  position: relative;
  padding: clamp(48px, 5vw, 72px) 0 0;
  background: var(--plum-deep);
  color: rgb(206 192 169 / 80%);
  font-size: 0.93rem;
  overflow: hidden;
}

.site-footer > .container {
  position: relative;
  z-index: 1;
}

.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(28px, 3.5vw, 48px);
}

.footer-brand {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.footer-brand img {
  width: 64px;
  height: 64px;
}

.footer-brand p {
  margin: 0;
}

.footer-col h2 {
  margin-bottom: 14px;
  color: var(--sand);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.footer-col p,
.footer-col address {
  margin: 0;
  font-style: normal;
  line-height: 1.9;
}

.footer-col a {
  color: inherit;
  overflow-wrap: anywhere;
  text-decoration: none;
}

.footer-col a:is(:hover, :focus-visible) {
  color: var(--sand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 28px;
  margin-top: clamp(40px, 4vw, 60px);
  padding: 22px 0;
  border-top: 1px solid var(--hairline-light);
}

.footer-legal-liens {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}

.footer-legal-liens a {
  color: rgb(206 192 169 / 90%);
  text-decoration: none;
  text-underline-offset: 3px;
}

.footer-legal-liens a:is(:hover, :focus-visible) {
  color: var(--sand);
  text-decoration: underline;
}

/* Rouvrir le bandeau est une action, donc un <button> — mais il doit
   se lire comme les deux liens voisins. Sélecteur à deux classes :
   `.footer-legal p` (0,1,1) l'emporterait sur une classe seule. */
.footer-legal-liens .lien-consent {
  padding: 0;
  background: none;
  border: 0;
  color: rgb(206 192 169 / 90%);
  font: inherit;
  text-underline-offset: 3px;
  cursor: pointer;
}

.footer-legal-liens .lien-consent:is(:hover, :focus-visible) {
  color: var(--sand);
  text-decoration: underline;
}

/* L'`opacity: 0.75` se cumulait avec la transparence héritée du pied de
   page et tombait à 4,38:1. Une couleur explicite donne 8,4:1. */
.footer-legal p {
  margin: 0;
  color: rgb(206 192 169 / 90%);
  font-size: 0.8rem;
}

/* ============================================================
   PAGES LÉGALES
   Texte long : une seule colonne mesurée, hiérarchie sobre.
   ============================================================ */

.legal {
  max-width: 68ch;
}

.legal h2 {
  margin: clamp(38px, 4vw, 56px) 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
  font-size: clamp(1.15rem, 1.9vw, 1.4rem);
}

.legal h2:first-child {
  margin-top: 0;
}

.legal h3 {
  margin: 26px 0 8px;
  font-size: 1rem;
}

.legal p,
.legal li {
  margin: 0 0 14px;
  color: var(--muted);
}

.legal ul {
  margin: 0 0 14px;
  padding-left: 20px;
}

.legal li {
  margin-bottom: 7px;
}

.legal a {
  color: var(--plum);
  font-weight: 700;
  text-underline-offset: 3px;
}

.legal strong {
  color: var(--plum);
}

/* Bloc d'identité : libellé à gauche, valeur à droite. */
.legal-fiche {
  margin: 0 0 14px;
  padding: clamp(20px, 2.4vw, 28px);
  background: var(--sand);
  border: 1px solid var(--hairline);
}

.legal-fiche div {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 4px 18px;
  padding: 7px 0;
  border-bottom: 1px solid var(--hairline);
}

.legal-fiche div:last-child {
  border-bottom: 0;
}

.legal-fiche dt {
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.legal-fiche dd {
  margin: 0;
  color: var(--muted);
}

/* Encart d'avertissement : filet rouge, pas de texte rouge. */
.legal-note {
  margin: 20px 0;
  padding: 18px 22px;
  background: var(--sand);
  border-left: 3px solid var(--red);
}

.legal-note p:last-child {
  margin-bottom: 0;
}

.legal-maj {
  margin-top: clamp(40px, 4vw, 56px);
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
  font-size: 0.85rem;
}

@media (max-width: 560px) {
  .legal-fiche div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* ============================================================
   FORMULAIRE D'INSCRIPTION
   ============================================================ */

[hidden] {
  display: none !important;
}

.form {
  max-width: 860px;
}

.field-group {
  margin: 0 0 clamp(28px, 3.5vw, 44px);
  padding: clamp(24px, 3vw, 38px);
  background: var(--sand);
  border: 1px solid var(--hairline);
}

.field-legend {
  padding: 0;
  margin-bottom: 24px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.field-subhead {
  margin: 34px 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--hairline);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* --- choix adulte / jeune --- */

.choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.choice {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  background: var(--sand-pale);
  border: 1px solid var(--hairline);
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.choice:hover {
  border-color: var(--plum);
}

.choice:has(:checked) {
  border-color: var(--red);
  box-shadow: inset 0 0 0 1px var(--red);
}

.choice input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--red);
}

.choice-body {
  display: grid;
  gap: 3px;
}

.choice-title {
  font-weight: 700;
}

.choice-meta,
.check-meta {
  color: var(--muted);
  font-size: 0.88rem;
}

/* --- champs --- */

.fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
}

.field {
  display: grid;
  gap: 7px;
  margin: 0;
}

.field-wide {
  grid-column: 1 / -1;
}

.field label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.field-optional {
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 15px;
  background: var(--sand-pale);
  border: 1px solid var(--hairline);
  border-radius: 0;
  color: var(--plum);
  font: inherit;
  font-size: 1rem;
}

.field textarea {
  resize: vertical;
  line-height: 1.6;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--sand-deep);
}

/* Le rouge n'atteint pas 3:1 sur le sable : l'anneau de focus
   reste prune, seul contraste fiable de la charte. */
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible,
.choice:has(:focus-visible),
.check:has(:focus-visible) {
  outline: 2px solid var(--plum);
  outline-offset: 2px;
}

/* `:user-invalid` ne se déclenche qu'après une saisie ou une
   tentative d'envoi — un champ encore vierge n'est pas signalé. */
.field input:user-invalid,
.field select:user-invalid,
.field textarea:user-invalid {
  border-color: var(--red);
  box-shadow: inset 0 0 0 1px var(--red);
}

/* --- cases à cocher --- */

.checks-form {
  display: grid;
  gap: 12px;
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  background: var(--sand-pale);
  border: 1px solid var(--hairline);
  cursor: pointer;
  transition: border-color 160ms ease;
}

.check:hover {
  border-color: var(--plum);
}

.check:has(:checked) {
  border-color: var(--red);
}

.check input {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--red);
}

.check > span {
  display: grid;
  gap: 3px;
}

/* --- messages --- */

.field-note {
  margin: 18px 0 0;
  padding-left: 15px;
  border-left: 3px solid var(--sand-deep);
  color: var(--muted);
  font-size: 0.9rem;
}

.field-error {
  margin: 18px 0 0;
  padding: 13px 16px;
  background: var(--plum);
  color: var(--sand);
  font-size: 0.92rem;
  font-weight: 500;
}

.form-actions {
  margin: 28px 0 0;
}

/* <button> n'hérite ni de la police ni du curseur. */
.form-actions .btn {
  cursor: pointer;
  font-family: inherit;
}

/* Piège à robots : hors écran plutôt que display:none, que certains
   scripts détectent et contournent. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- confirmation d'envoi --- */

.succes {
  max-width: 860px;
  padding: clamp(28px, 3.5vw, 44px);
  background: var(--plum);
  color: var(--sand);
}

.succes h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.succes p {
  margin: 16px 0 0;
  color: rgb(206 192 169 / 82%);
}

.succes a {
  color: var(--sand);
  font-weight: 700;
  text-underline-offset: 3px;
}

/* --- repli si l'envoi échoue --- */

.fallback {
  max-width: 860px;
  margin-top: clamp(28px, 3.5vw, 44px);
  padding: clamp(24px, 3vw, 38px);
  background: var(--sand);
  border: 1px solid var(--hairline);
  border-top: 4px solid var(--red);
}

.fallback h2 {
  font-size: 1.3rem;
}

.fallback p {
  margin: 14px 0 0;
  color: var(--muted);
}

.fallback-mail {
  color: var(--plum);
  font-weight: 700;
  text-underline-offset: 3px;
}

.fallback-raison {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.fallback-text {
  margin: 20px 0 0;
  padding: 20px;
  max-height: 340px;
  overflow: auto;
  background: var(--sand-pale);
  border: 1px solid var(--hairline);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86rem;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ============================================================
   PAGE CONTACT
   ============================================================ */

/* Le formulaire est ici dans une grille : sa largeur est donnée
   par la colonne, pas par la limite de lecture de .form. */
.form-contact {
  max-width: none;
}

.contact-main {
  min-width: 0;
}

/* --- carte « contact direct » --- */

.contact-card {
  align-self: start;
  border-top: 4px solid var(--red);
}

.contact-liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-liste li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
}

.contact-liste li:first-child {
  padding-top: 0;
}

.contact-role {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.contact-liste a {
  color: var(--plum);
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.contact-liste a:is(:hover, :focus-visible) {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.contact-bloc {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--hairline);
}

/* Premier bloc d'une colonne : rien au-dessus dont il faut se séparer. */
.contact-bloc-first {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.contact-horaires {
  margin: 0;
}

.contact-horaires > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
}

.contact-horaires dt {
  font-weight: 700;
}

.contact-horaires dd {
  margin: 0;
  color: var(--muted);
  white-space: nowrap;
}

.contact-aparte {
  margin: 0 0 16px;
  color: var(--muted);
}

.contact-aparte a {
  color: var(--plum);
  font-weight: 700;
}

/* --- plan d'accès --- */

.acces-infos {
  min-width: 0;
}

.acces-adresse {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

.acces-liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.acces-liste li {
  position: relative;
  padding: 0 0 12px 26px;
  color: var(--muted);
}

/* Le cercle, motif central de la charte. */
.acces-liste li::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  width: 9px;
  height: 9px;
  border: 2px solid var(--red);
  border-radius: 50%;
}

.acces-liste li:last-child {
  padding-bottom: 0;
}

/* La carte et son écran d'attente occupent exactement la même
   surface : afficher le plan ne fait pas sauter la page. */
.carte {
  position: relative;
  /* `width` explicite : sans elle, `min-height` fait grandir la largeur
     pour tenir le ratio, et la carte déborde de sa colonne. */
  width: 100%;
  aspect-ratio: 16 / 11;
  min-height: 320px;
  background: var(--sand-pale);
  border: 1px solid var(--hairline);
}

.carte-cadre {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.carte-consent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
  padding: clamp(24px, 3vw, 40px);
}

.carte-consent-titre {
  margin: 0 0 12px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.carte-consent-texte {
  margin: 0;
  max-width: 46ch;
  color: var(--muted);
  font-size: 0.95rem;
}

.carte-consent .form-actions {
  margin: 22px 0 0;
}

.carte-consent-note {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.carte-consent-note a {
  color: var(--plum);
  font-weight: 700;
}

/* ============================================================
   BANDEAU DE CONSENTEMENT
   Le seul contenu externe du site est le plan Google Maps de la
   page Contact. Les deux boutons sont volontairement identiques :
   refuser doit être aussi simple qu'accepter.
   ============================================================ */

.bandeau-consent {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  background: var(--plum-deep);
  border-top: 1px solid var(--hairline-light);
  color: var(--sand);
}

.bandeau-consent:focus-visible {
  outline: 2px solid var(--sand);
  outline-offset: -4px;
}

.bandeau-consent-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 40px;
  padding: 22px 0;
}

.bandeau-consent-titre {
  margin: 0 0 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.bandeau-consent-texte {
  margin: 0;
  max-width: 74ch;
  color: rgb(206 192 169 / 90%);
  font-size: 0.88rem;
}

.bandeau-consent-texte a {
  color: var(--sand);
  font-weight: 700;
  text-underline-offset: 3px;
}

.bandeau-consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Aucune différence visuelle entre « Refuser » et « Accepter » :
   même forme, même graisse, même contraste. */
.btn-consent {
  background: none;
  border-color: var(--sand);
  color: var(--sand);
  padding: 13px 30px;
  cursor: pointer;
  font-family: inherit;
}

.btn-consent:is(:hover, :focus-visible) {
  background: var(--sand);
  border-color: var(--sand);
  color: var(--plum);
}

/* ============================================================
   ACTUALITÉS
   ============================================================ */

/* `auto-fill` et non `auto-fit` : la différence ne se voit qu'avec
   peu d'articles. `auto-fit` fait disparaître les colonnes vides et
   laisse la carte restante occuper toute la largeur — un seul
   article remplissait alors l'écran. `auto-fill` garde les colonnes
   vides : la carte reste à sa taille, calée à gauche, et le reste
   de la rangée respire. */
.actus {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: clamp(20px, 2.4vw, 32px);
}

.actu {
  display: flex;
  /* Plafond de sécurité : sur une largeur intermédiaire la grille
     retombe à une seule colonne, et sans cette limite la carte
     s'étirerait de nouveau. */
  max-width: 440px;
  background: var(--sand);
  border: 1px solid var(--hairline);
  border-top: 4px solid var(--red);
}

.section-alt .actu {
  background: var(--sand-pale);
}

/* Toute la carte est cliquable — pas seulement le titre : sur
   un écran tactile, viser un lien de trois mots est pénible. */
.actu-lien {
  display: flex;
  flex-direction: column;
  width: 100%;
  color: inherit;
  text-decoration: none;
}

.actu-image {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--sand-deep);
}

/* Article sans photo : le sceau centré sur un aplat, pour que la
   grille garde des cartes de même hauteur. */
.actu-image-vide {
  display: grid;
  place-items: center;
}

.actu-image-vide img {
  width: 72px;
  height: 72px;
  opacity: 0.7;
}

.actu-corps {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: clamp(22px, 2.4vw, 30px);
}

.actu-date {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.actu-titre {
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.actu-resume {
  color: var(--muted);
  font-size: 0.95rem;
}

/* Repoussé en bas : les cartes d'une même rangée alignent leur
   « Lire la suite » même si les résumés font des hauteurs
   différentes. */
.actu-suite {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 14px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* Le cercle, motif central de la charte. Le rouge sert de pastille,
   jamais de couleur de texte : sur le sable il ne donne que 2,4:1. */
.actu-suite::before {
  content: "";
  width: 9px;
  height: 9px;
  border: 2px solid var(--red);
  border-radius: 50%;
}

.actu:hover,
.actu:focus-within {
  border-color: var(--plum);
}

.actu-lien:is(:hover, :focus-visible) .actu-suite {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.actu-lien:focus-visible {
  outline: 2px solid var(--plum);
  outline-offset: 3px;
}

/* --- page d'un article --- */

.article-auteur {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Les images d'un article portent leur propre largeur, posée par
   l'administration dans --largeur-image. Elle vaut un pourcentage
   de la colonne de l'article : à 100 % une photo occupe un écran
   entier avant qu'on ait lu une ligne, d'où la moitié par défaut.

   Elles restent calées à gauche, sur le bord du titre et du texte :
   centrée, une image à mi-largeur flotte entre deux marges sans
   s'aligner sur rien. */
.article-couverture {
  display: block;
  width: var(--largeur-image, 50%);
  max-width: none;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin-bottom: clamp(34px, 4vw, 52px);
  background: var(--sand-deep);
}

/* Le corps est du texte long : une mesure de lecture, pas la
   largeur du conteneur. */
.article-corps {
  max-width: 68ch;
  font-size: clamp(1rem, 1.3vw, 1.08rem);
}

.article-corps p {
  margin: 0 0 20px;
}

.article-corps h3,
.article-corps h4 {
  margin: clamp(34px, 3.5vw, 46px) 0 14px;
  letter-spacing: -0.01em;
}

.article-corps h3 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
}

.article-corps h4 {
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.article-corps ul,
.article-corps ol {
  margin: 0 0 20px;
  padding-left: 22px;
}

.article-corps li {
  margin-bottom: 8px;
}

.article-corps a {
  color: var(--plum);
  font-weight: 700;
  text-underline-offset: 3px;
}

.article-corps blockquote {
  margin: clamp(26px, 3vw, 36px) 0;
  padding-left: 22px;
  border-left: 2px solid var(--red);
  font-size: 1.1rem;
  font-style: italic;
}

.article-corps hr {
  height: 0;
  margin: clamp(30px, 3.5vw, 44px) 0;
  border: 0;
  border-top: 1px solid var(--hairline);
}

/* Une pile, plus une grille : dans une grille, chaque image
   remplissait sa colonne et « 50 % » aurait voulu dire la moitié
   d'une colonne pour la galerie et la moitié de la page pour la
   couverture. Empilées, les deux mesures sont la même. */
.article-galerie {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(20px, 2.4vw, 32px);
  margin-top: clamp(34px, 4vw, 52px);
}

.article-galerie img {
  display: block;
  width: var(--largeur-image, 50%);
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--sand-deep);
}

/* Position de l'image dans la colonne. Des marges automatiques
   plutôt que `align-self` : elles agissent aussi bien sur la
   couverture, qui est dans le flux ordinaire, que sur les images
   de la galerie, qui sont des éléments flex. Une seule règle pour
   les deux.

   `gauche` est l'état par défaut et n'a besoin de rien, mais la
   classe est tout de même écrite : à la lecture du HTML, on voit
   ce qui a été choisi plutôt qu'une absence. */
.img-gauche {
  margin-right: auto;
}

.img-centre {
  margin-left: auto;
  margin-right: auto;
}

.img-droite {
  margin-left: auto;
}

/* Sur un téléphone, la colonne fait déjà la largeur de l'écran :
   une image à 40 % n'y montrerait plus rien. Elles reprennent donc
   toute la largeur, quel que soit le réglage.

   C'est aussi la raison pour laquelle la largeur passe par une
   variable et non par un `width:` en ligne, qui l'emporterait sur
   cette règle. */
@media (max-width: 700px) {
  .article-couverture,
  .article-galerie img {
    width: 100%;
  }
}

.article-retour {
  margin-top: clamp(40px, 4.5vw, 60px);
  padding-top: clamp(26px, 3vw, 36px);
  border-top: 1px solid var(--hairline);
}

/* --- le dojo --- */

.dojo-texte {
  max-width: 62ch;
}

/* La photo ferme la section et la raccorde aux cours, qui annoncent
   justement ce dojo. Elle est servie en 4/3 et recadrée ici : à
   pleine largeur, un 4/3 ferait plus de mille pixels de haut et
   pousserait le reste de la page hors de l'écran. */
.dojo-photo {
  display: block;
  width: 100%;
  /* La règle générale limite les images à leur conteneur ; ici c'est
     la largeur qui commande, et l'attribut height du HTML ne doit pas
     l'emporter sur l'aspect-ratio. */
  max-width: none;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  margin-top: clamp(26px, 3vw, 38px);
  background: var(--sand-deep);
}

@media (max-width: 700px) {
  /* Sur un téléphone, le bandeau ne ferait que 180 px de haut : on
     ne verrait plus la salle, seulement une bande de tapis. On
     montre donc davantage de la photo. */
  .dojo-photo {
    aspect-ratio: 4 / 3;
  }
}

/* --- bloc d'accueil --- */

.actus-accueil-pied {
  margin: clamp(30px, 3.5vw, 44px) 0 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1050px) {
  :root {
    --header-height: 92px;
    --brand-symbol-size: 74px;
    --gutter: 64px;
  }

  .site-nav {
    gap: 20px;
  }

  .site-nav a {
    font-size: 0.71rem;
  }

  .values {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .courses {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer-inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 840px) {
  :root {
    --header-height: 84px;
    --brand-symbol-size: 64px;
    --gutter: 32px;
  }

  .menu-toggle {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    clip: rect(0, 0, 0, 0);
    overflow: hidden;
    white-space: nowrap;
    border: 0;
  }

  .menu-button {
    display: grid;
    width: 42px;
    height: 42px;
    padding: 11px 8px;
    cursor: pointer;
    place-content: center;
    gap: 5px;
  }

  .menu-button span:not(.sr-only) {
    display: block;
    width: 25px;
    height: 2px;
    background: var(--plum);
    transition: transform 180ms ease, opacity 180ms ease;
  }

  .site-nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: grid;
    gap: 0;
    max-height: 0;
    padding: 0 20px;
    overflow: hidden;
    background: var(--sand);
    border-bottom: 1px solid transparent;
    opacity: 0;
    pointer-events: none;
    /* `max-height: 0` et `opacity: 0` ne retirent pas les liens à la
       tabulation : sans `visibility`, on traverse au clavier cinq liens
       invisibles. Le délai laisse l'animation de fermeture se dérouler
       avant que l'élément disparaisse. */
    visibility: hidden;
    transition: max-height 250ms ease, padding 250ms ease, opacity 180ms ease,
      visibility 0s linear 250ms;
  }

  .site-nav a {
    padding: 16px 0;
    font-size: 0.78rem;
  }

  .site-nav a:not(.nav-cta) {
    border-bottom: 1px solid var(--hairline);
  }

  .site-nav .nav-cta {
    justify-self: start;
    margin: 18px 0 4px;
    padding: 13px 18px;
  }

  .menu-toggle:checked ~ .site-nav {
    max-height: 430px;
    padding: 10px 20px 24px;
    border-bottom-color: var(--hairline);
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    /* À l'ouverture, pas d'attente : le menu doit être atteignable tout de
       suite. Les autres durées sont reprises telles quelles. */
    transition: max-height 250ms ease, padding 250ms ease, opacity 180ms ease,
      visibility 0s;
  }

  .menu-toggle:checked + .menu-button span:nth-of-type(2) {
    transform: translateY(7px) rotate(45deg);
  }

  .menu-toggle:checked + .menu-button span:nth-of-type(3) {
    opacity: 0;
  }

  .menu-toggle:checked + .menu-button span:nth-of-type(4) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .lead {
    max-width: none;
  }

  .split,
  .split-top {
    grid-template-columns: minmax(0, 1fr);
  }

  .values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .prices {
    grid-template-columns: minmax(0, 1fr);
  }

  .cta-contacts {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Deux mises en page, choisies d'après la largeur de la carte :

     ≥ 1151 px   la carte est la colonne étroite de .split → le portrait
                 vertical occupe toute sa hauteur, à gauche du texte
     ≤ 1150 px   la carte est large et courte → un bandeau paysage la
                 traverse de bord à bord, au-dessus du texte

   Le cadrage change avec elles : <picture> sert deux fichiers différents,
   il ne redimensionne pas le même. Un portrait vertical dans une carte
   large donnait une bande étroite entourée de vide ; l'étirer aurait fait
   rogner à `object-fit: cover` jusqu'à 45 % de l'image. */
@media (max-width: 1150px) {
  .card-sensei {
    grid-template-columns: minmax(0, 1fr);
  }

  .sensei-media {
    align-self: auto;
    aspect-ratio: 3 / 2;
  }

  .sensei-texte {
    padding: var(--pad);
  }
}

@media (max-width: 700px) {
  .choices,
  .fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .carte {
    aspect-ratio: 4 / 3;
    min-height: 280px;
  }

  .contact-horaires > div {
    flex-direction: column;
    gap: 2px;
  }

  .bandeau-consent-actions {
    width: 100%;
  }

  /* `1 1 0` et non `auto` : les deux boutons gardent exactement la
     même largeur malgré des libellés de longueurs différentes. */
  .btn-consent {
    flex: 1 1 0;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  :root {
    --header-height: 76px;
    --brand-symbol-size: 58px;
    --gutter: 24px;
  }

  .brand {
    gap: 9px;
  }

  .site-nav,
  .menu-toggle:checked ~ .site-nav {
    padding-right: 14px;
    padding-left: 14px;
  }

  .btn {
    justify-content: center;
    width: 100%;
  }

  .banner-inner {
    align-items: flex-start;
  }

  .course {
    flex-direction: column;
    gap: 18px;
  }

  .course h3 span {
    display: block;
    white-space: normal;
  }

  .schedule dt {
    flex-basis: 72px;
  }

  .values {
    grid-template-columns: minmax(0, 1fr);
  }

  .values li {
    flex-direction: row;
    align-items: center;
    gap: 16px;
  }

  .footer-inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}