/* Polices auto-hébergées — généré par scripts/fetch-fonts.js, ne pas éditer à la main. */
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/atkinson-hyperlegible-next-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Faustina';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/faustina-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Design tokens — terre cuite et le vert du logo, sur un neutre chaud.
   Le vert de marque n'est pas choisi : il est mesuré sur assets/originals/logo-soforme.png,
   où il occupe 90 % de l'image → oklch(67,1% 0,034 151). Toute l'échelle verte tient
   cette teinte et ne dépasse jamais son chroma, sans quoi on retombe sur un vert pin
   qui n'est pas celui de la marque.
   Les couleurs sont en OKLCH : à chroma constant, un écart de clarté identique se voit
   identique. Tous les ratios en commentaire ont été calculés, pas estimés. */
:root {
  /* --- Primitives : le sauge du logo, teinte 151 --- */
  --sage-950: oklch(23% 0.02 151);
  --sage-900: oklch(31% 0.026 151);
  --sage-800: oklch(39% 0.031 151);
  --sage-700: oklch(47% 0.034 151);
  --sage-600: oklch(57% 0.034 151);
  --sage-500: oklch(67.1% 0.034 151); /* la couleur exacte du logo */
  --sage-300: oklch(81% 0.026 151);
  --sage-200: oklch(89% 0.018 151);

  /* --- Primitives : terre cuite, teinte 42 ---
     Chroma volontairement contenu : face à un sauge grisé, une terre cuite saturée
     écraserait tout. terra-700 est la variante admise pour du texte (5,8:1) ;
     terra-600 ne tient que le grand texte (3,8:1). */
  --terra-900: oklch(31% 0.058 42);
  --terra-800: oklch(41% 0.08 42);
  --terra-700: oklch(50% 0.098 42);
  --terra-600: oklch(60% 0.108 42);
  --terra-400: oklch(74% 0.082 42);
  --terra-200: oklch(89% 0.036 42);

  /* --- Neutres, teintés vers la terre cuite ---
     C'est ce qui donne son thème à la page : la surface entière est chaude, le sauge
     y est le contrepoint calme. Ni blanc pur ni noir pur. */
  --shell: oklch(97.3% 0.009 65);
  --shell-deep: oklch(93.8% 0.015 60);
  --paper: oklch(99.1% 0.004 65);
  --ink: oklch(25% 0.014 45);
  --ink-soft: oklch(47% 0.016 45);

  /* --- Rôles sémantiques --- */
  --bg: var(--shell);
  --bg-alt: var(--paper);
  --bg-deep: var(--sage-800);
  /* Le vert du logo ne tient que 2,7:1 sur fond clair : il ne peut porter ni texte,
     ni filet, ni icône. Sa place est un grand aplat qui reçoit du texte sombre (5,5:1). */
  --bg-brand: var(--sage-500);
  --surface: var(--paper);
  --text: var(--ink); /* 14,8:1 sur --bg */
  --text-muted: var(--ink-soft); /* 6,3:1 sur --bg */
  --text-invert: var(--shell); /* 8,7:1 sur --bg-deep */
  --accent: var(--terra-700); /* 5,8:1 sur --bg */
  --accent-hover: var(--terra-800);
  --highlight: var(--sage-700); /* 6,2:1 sur --bg */
  --highlight-invert: var(--terra-400); /* 5,5:1 sur --sage-900 */
  --line: color-mix(in oklab, var(--sage-800) 20%, transparent);
  --line-strong: color-mix(in oklab, var(--sage-800) 38%, transparent);

  /* L'anneau de focus doit tenir 3:1 sur son fond. La terre cuite sombre y parvient
     sur les fonds clairs (5,8:1) mais pas sur les fonds verts sombres : ceux-ci
     redéfinissent donc --focus sur la variante claire. */
  --focus: var(--terra-700);

  /* --- Alias hérités ---
     Les onze autres pages n'ont pas encore été reprises et consomment ces noms.
     À supprimer au fur et à mesure de leur refonte. */
  --sage: var(--sage-500);
  --sage-dark: var(--sage-700); /* 6,2:1 sur --bg */
  --forest: var(--sage-700);
  --forest-deep: var(--sage-900);
  --gold: var(--terra-600);
  --gold-dark: var(--terra-700);
  --cream: var(--shell);
  --cream-warm: var(--shell-deep);
  --white: var(--paper);

  /* --- Typographie ---
     Faustina en titrage, Atkinson Hyperlegible Next en texte : cette dernière est
     dessinée pour la basse vision, lettres proches délibérément différenciées. */
  --font-display: 'Faustina', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --font-body: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont,
    'Segoe UI', Helvetica, Arial, sans-serif;

  /* Écart d'au moins 1,25 entre deux marches consécutives : peu de tailles,
     beaucoup de contraste. Le corps ne descend jamais sous 17 px. */
  --text-label: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: clamp(1.0625rem, 1.02rem + 0.2vw, 1.1875rem);
  --text-md: clamp(1.25rem, 1.18rem + 0.3vw, 1.5rem);
  --text-lg: clamp(1.625rem, 1.45rem + 0.78vw, 2.125rem);
  --text-xl: clamp(2.125rem, 1.7rem + 1.9vw, 3.25rem);
  --text-2xl: clamp(2.875rem, 2.15rem + 3.2vw, 4.375rem);
  /* Le minimum tient « Renforcer, » sur une ligne dans une fenêtre de 320 px. */
  --text-display: clamp(3.25rem, 1.9rem + 6.6vw, 8.125rem);

  /* Alias hérités de l'ancienne échelle, consommés par base.css et les autres pages. */
  --step--1: var(--text-sm);
  --step-0: var(--text-base);
  --step-1: var(--text-md);
  --step-2: var(--text-lg);
  --step-3: var(--text-xl);
  --step-4: var(--text-2xl);

  --leading-display: 0.94;
  --leading-tight: 1.08;
  --leading-body: 1.6;

  /* --- Rythme : échelle de 4 pt --- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2.25rem;
  --space-xl: 3.5rem;
  --space-2xl: 5rem;
  --space-3xl: clamp(4.5rem, 3rem + 7vw, 8rem);

  --measure: 66ch;
  --wrap: 74rem;
  --wrap-narrow: 52rem;

  /* Angles resserrés : au-delà, la page glisse vers la carte à coins arrondis
     et l'ombre douce, c'est-à-dire vers le gabarit générique. */
  --radius-s: 2px;
  --radius-m: 5px;
  --radius-l: 9px;
  --radius-pill: 999px;

  /* Ombres discrètes : la profondeur vient des filets et des aplats, pas du flou. */
  --shadow-s: 0 1px 2px oklch(25% 0.014 45 / 5%);
  --shadow-m: 0 1px 3px oklch(25% 0.014 45 / 6%), 0 12px 28px -16px oklch(25% 0.014 45 / 16%);
  --shadow-l: 0 24px 60px -32px oklch(25% 0.014 45 / 28%);

  /* Décélération exponentielle : les objets réels ralentissent, ils ne rebondissent pas. */
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease: var(--ease-out);
  --duration-fast: 160ms;
  --duration: 320ms;
  --duration-slow: 620ms;
}

/* Reset raisonné et styles de base. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: var(--forest-deep);
}

h1 {
  font-size: var(--step-4);
}

h2 {
  font-size: var(--step-3);
}

h3 {
  font-size: var(--step-2);
}

h4 {
  font-size: var(--step-1);
}

p,
ul,
ol,
dl,
figure,
blockquote {
  margin: 0;
}

p {
  text-wrap: pretty;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: color 180ms var(--ease), text-decoration-color 180ms var(--ease);
}

a:hover {
  color: var(--accent);
  text-decoration-color: currentcolor;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--radius-s);
}

/* Surfaces sombres : la terre cuite claire y tient 4,0:1 à 5,5:1. Le héros n'en fait
   plus partie, son voile est clair. */
.site-footer,
.section--deep {
  --focus: var(--terra-400);
}

/* Le bandeau d'appel est un ton médian — le vert du logo. Aucune des deux terres
   cuites n'y tient 3:1 (2,1:1 pour la sombre) : il lui faut un anneau d'encre. */
.cta-band {
  --focus: var(--sage-950);
}

::selection {
  background: var(--sage);
  color: var(--white);
}

strong,
b {
  font-weight: 600;
}

table {
  border-collapse: collapse;
  width: 100%;
}

abbr[title] {
  text-decoration: none;
  border-bottom: 1px dotted var(--line-strong);
}

hr {
  height: 1px;
  margin: var(--space-xl) 0;
  border: 0;
  background: var(--line);
}

.skip-link {
  position: absolute;
  top: var(--space-2xs);
  left: var(--space-2xs);
  z-index: 100;
  padding: var(--space-2xs) var(--space-s);
  border-radius: var(--radius-s);
  background: var(--forest-deep);
  color: var(--text-invert);
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 180ms var(--ease);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Structures de page : conteneurs, sections, en-tête, pied de page. */
.wrap {
  width: min(100% - 2.5rem, var(--wrap));
  margin-inline: auto;
}

.wrap--narrow {
  width: min(100% - 2.5rem, var(--wrap-narrow));
}

.section {
  padding-block: var(--space-3xl);
}

.section--tight {
  padding-block: var(--space-2xl);
}

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

.section--deep {
  background: var(--bg-deep);
  color: var(--text-invert);
}

.section--deep h2,
.section--deep h3 {
  color: var(--white);
}

.section__head {
  max-width: var(--measure);
  margin-bottom: var(--space-xl);
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

.kicker {
  display: block;
  margin-bottom: var(--space-xs);
  color: var(--sage-dark);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.section--deep .kicker {
  color: color-mix(in srgb, var(--sage) 70%, white);
}

.lede {
  margin-top: var(--space-s);
  max-width: var(--measure);
  color: var(--text-muted);
  font-size: var(--step-1);
  line-height: 1.5;
}

.section--deep .lede {
  color: color-mix(in srgb, var(--text-invert) 88%, transparent);
}

.prose > * + * {
  margin-top: var(--space-m);
}

.prose {
  max-width: var(--measure);
}

.prose--wide {
  max-width: 78ch;
}

/* --- En-tête --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 220ms var(--ease), background 220ms var(--ease);
}

.site-header[data-scrolled='true'] {
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--cream) 96%, transparent);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  min-height: 4.75rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-right: auto;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--forest-deep);
  text-decoration: none;
}

.brand img {
  width: 42px;
  height: auto;
  border-radius: var(--radius-s);
}

.brand__sub {
  display: block;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sage-dark);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-s);
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.nav__link {
  display: block;
  padding: 0.5rem 0.8rem;
  border-radius: var(--radius-pill);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 180ms var(--ease), color 180ms var(--ease);
}

.nav__link:hover {
  background: color-mix(in srgb, var(--sage) 22%, transparent);
  color: var(--forest-deep);
}

.nav__link[aria-current='page'] {
  background: color-mix(in srgb, var(--sage) 30%, transparent);
  color: var(--forest-deep);
  font-weight: 600;
}

.nav__toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--forest-deep);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
}

.nav__toggle-bars {
  display: grid;
  gap: 4px;
  width: 18px;
}

.nav__toggle-bars span {
  height: 2px;
  background: currentcolor;
  border-radius: 2px;
  transition: transform 220ms var(--ease), opacity 160ms var(--ease);
}

.nav__toggle[aria-expanded='true'] .nav__toggle-bars span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}

.nav__toggle[aria-expanded='true'] .nav__toggle-bars span:nth-child(2) {
  opacity: 0;
}

.nav__toggle[aria-expanded='true'] .nav__toggle-bars span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (max-width: 60rem) {
  .nav__toggle {
    display: inline-flex;
  }

  .nav {
    position: fixed;
    inset: 4.75rem 0 auto;
    display: block;
    padding: var(--space-m) 1.25rem var(--space-l);
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-m);
    max-height: calc(100dvh - 4.75rem);
    overflow-y: auto;
  }

  .nav[hidden] {
    display: none;
  }

  .nav__list {
    display: grid;
    gap: 0.25rem;
    margin-bottom: var(--space-m);
  }

  .nav__link {
    padding: 0.85rem 1rem;
    border-radius: var(--radius-m);
    font-size: 1.1rem;
  }

  .nav .btn {
    width: 100%;
  }
}

/* --- Pied de page --- */
.site-footer {
  padding-block: var(--space-2xl) var(--space-l);
  background: var(--sage-800);
  color: var(--text-invert);
}

.site-footer a {
  color: inherit;
}

.site-footer a:hover {
  color: var(--white);
}

.site-footer h2,
.site-footer h3 {
  color: var(--white);
}

.footer__grid {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.footer__title {
  margin-bottom: var(--space-s);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--sage) 72%, white);
}

.footer__list {
  display: grid;
  gap: 0.55rem;
  font-size: 1rem;
}

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  justify-content: space-between;
  align-items: center;
  margin-top: var(--space-2xl);
  padding-top: var(--space-m);
  border-top: 1px solid color-mix(in srgb, white 16%, transparent);
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--text-invert) 76%, transparent);
}

.breadcrumb {
  margin-bottom: var(--space-l);
  font-size: 0.92rem;
  color: var(--text-muted);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.breadcrumb li + li::before {
  content: '›';
  margin-right: 0.5rem;
  color: var(--sage-dark);
}

/* Composants réutilisables. */

/* --- Boutons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.7rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--forest);
  color: var(--text-invert);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 200ms var(--ease), transform 200ms var(--ease), box-shadow 200ms var(--ease);
}

.btn:hover {
  background: var(--forest-deep);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: var(--shadow-m);
}

.btn:active {
  transform: translateY(0);
}

.btn--ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--forest-deep);
}

.btn--ghost:hover {
  background: color-mix(in srgb, var(--sage) 20%, transparent);
  color: var(--forest-deep);
  box-shadow: none;
}

/* L'accent terre cuite ne sert qu'à l'action principale : il ne fonctionne que
   parce qu'il est rare. */
.btn--accent {
  background: var(--terra-700);
  color: var(--shell);
}

.btn--accent:hover {
  background: var(--terra-800);
  color: var(--shell);
}

.btn--light {
  background: var(--white);
  color: var(--forest-deep);
}

.btn--light:hover {
  background: var(--cream);
  color: var(--forest-deep);
}

.btn--outline-light {
  background: transparent;
  border-color: color-mix(in srgb, white 45%, transparent);
  color: var(--text-invert);
}

.btn--outline-light:hover {
  background: color-mix(in srgb, white 14%, transparent);
  color: var(--white);
  box-shadow: none;
}

.btn--sm {
  min-height: 40px;
  padding: 0.45rem 1rem;
  font-size: 0.92rem;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-m);
  margin-top: var(--space-m);
}

/* Action secondaire : un lien assumé plutôt qu'un deuxième bouton. Toute la
   hiérarchie se perd quand chaque action est un bouton plein. */
.link-quiet {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  text-decoration-color: color-mix(in oklab, currentcolor 40%, transparent);
}

.link-quiet:hover {
  color: inherit;
  text-decoration-color: currentcolor;
}

/* --- Héros ---
   La devise est le plus grand objet de la page ; le h1 reste la phrase qui décrit
   le studio, en corps modeste. Hiérarchie visuelle et hiérarchie sémantique sont
   volontairement dissociées. */
.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: min(76svh, 44rem);
  padding-block: var(--space-2xl) var(--space-xl);
  overflow: hidden;
  isolation: isolate;
  color: var(--text);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 38%;
}

/* Voile CLAIR, et non sombre. La photo du héros est elle-même très claire : y poser
   du texte blanc obligeait à l'assombrir, ce qui plombait toute la page pour un
   contraste malgré tout médiocre. Le voile chaud porte du texte sombre à 14,8:1,
   la page reste claire, et le sujet de la photo reste visible à droite. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to right,
    oklch(97.3% 0.009 65 / 95%) 0%,
    oklch(97.3% 0.009 65 / 88%) 52%,
    oklch(97.3% 0.009 65 / 0%) 88%
  );
}

.hero__place {
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--terra-700); /* 5,8:1 sur le voile clair */
}

.hero__motto {
  margin-top: var(--space-s);
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: 600;
  line-height: var(--leading-display);
  letter-spacing: -0.035em;
  color: var(--sage-900); /* 11,4:1 sur le voile clair */
}

/* L'escalier : le motif se répète sur la progression des cours plus bas. */
.hero__motto-line {
  display: block;
}

.hero__motto-line:nth-child(2) {
  padding-left: 0.3em;
}

.hero__motto-line:nth-child(3) {
  padding-left: 0.6em;
}

.hero__title {
  max-width: 32ch;
  margin-top: var(--space-l);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--text);
}

.hero__lede {
  max-width: 50ch;
  margin-top: var(--space-xs);
  color: var(--text-muted);
  line-height: 1.7;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s) var(--space-m);
  margin-top: var(--space-l);
}

@keyframes hero-in {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* Une seule orchestration sur toute la page, au chargement. */
.hero__inner > * {
  animation: hero-in var(--duration-slow) var(--ease-out-expo) backwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}

/* --- Bandeau de page intérieure ---
   Un aplat chaud, pas un dégradé : l'ancien lavis vert virait au gris sale et ne
   ressemblait en rien au voile clair du héros d'accueil. */
.page-hero {
  padding-block: var(--space-2xl) var(--space-xl);
  background: var(--shell-deep);
}

/* Comme le sur-titre du héros d'accueil. Les sur-titres de section, eux, restent
   verts : c'est ce qui distingue l'entrée de page du rythme interne. */
.page-hero .kicker {
  color: var(--terra-700);
}

.page-hero__inner {
  display: grid;
  gap: var(--space-l);
  align-items: center;
}

@media (min-width: 55rem) {
  .page-hero__inner--split {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: var(--space-2xl);
  }
}

.page-hero__figure img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-l);
}

/* --- Bloc de preuve ---
   Quatre chiffres de même poids, alignés, lisibles d'un coup d'œil. Une version
   antérieure hiérarchisait deux chiffres géants et deux en appui : le décalage se
   lisait comme un défaut d'alignement, pas comme une intention. */
.proof__title {
  max-width: 22ch;
  margin-top: var(--space-2xs);
  font-size: var(--text-xl);
}

.stats {
  display: grid;
  gap: var(--space-s);
  margin-top: var(--space-xl);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.stat {
  padding: var(--space-m);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
}

.stat__value {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: 1.1;
  color: var(--terra-700);
  font-variant-numeric: lining-nums tabular-nums;
}

.stat__label {
  margin-top: var(--space-2xs);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--text-muted);
}

/* --- Léa et Sonia ---
   Un filet horizontal par personne plutôt qu'une carte : deux personnes nommées,
   pas deux produits alignés. */
/* Le texte à gauche, le portrait entier à droite. La photo est au format vertical
   (1434 × 2186) : lui imposer un ratio la recadrait de moitié. Aucun object-fit ici,
   la hauteur suit le rapport naturel de l'image. */
.teachers__inner {
  display: grid;
  gap: var(--space-xl);
  align-items: start;
}

@media (min-width: 55rem) {
  .teachers__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr);
    column-gap: var(--space-3xl);
  }

  .teachers__col {
    grid-area: 1 / 1;
  }

  .teachers__grid {
    grid-area: 2 / 1;
  }

  /* Le portrait occupe la colonne de droite sur toute la hauteur des deux rangées. */
  .teachers__figure {
    grid-area: 1 / 2 / span 2;
  }
}

.teachers__figure img {
  width: 100%;
  border-radius: var(--radius-l);
}

.teachers__grid {
  display: grid;
  gap: var(--space-l);
}

@media (min-width: 45rem) {
  .teachers__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-l);
  }
}

.teacher {
  display: grid;
  gap: var(--space-3xs);
  align-content: start;
  padding-top: var(--space-s);
  border-top: 2px solid var(--sage-700);
}

.teacher__name {
  font-size: var(--text-lg);
}

.teacher__role {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.teacher__blurb {
  margin-top: var(--space-2xs);
  max-width: 46ch;
}

.teacher__phone {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--space-2xs);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--terra-700);
  text-decoration: none;
}

.teacher__phone:hover {
  color: var(--terra-800);
  text-decoration: underline;
}

.teacher__social {
  justify-self: start;
  font-size: var(--text-sm);
  font-weight: 700;
}

/* --- Progression des niveaux ---
   Le décalage horizontal croît d'un palier à l'autre : la montée en intensité
   se lit dans la mise en page avant d'être lue dans le texte. */
.levels {
  margin-top: var(--space-xl);
  border-top: 1px solid var(--line);
}

.level {
  position: relative;
  display: grid;
  gap: var(--space-3xs);
  padding-block: var(--space-m);
  border-bottom: 1px solid var(--line);
  transition: background var(--duration-fast) var(--ease-out);
}

@media (min-width: 48rem) {
  .level {
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: var(--space-m);
    padding-left: calc(var(--i, 0) * 2.25rem);
  }
}

.level__index {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--terra-700);
}

.level__name {
  font-size: var(--text-lg);
}

.level__name a {
  text-decoration: none;
}

/* Toute la ligne est cliquable, sans dupliquer le lien dans le HTML. */
.level__name a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.level__meta {
  margin-top: var(--space-3xs);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage-700);
}

.level__text {
  max-width: 62ch;
  margin-top: var(--space-2xs);
  color: var(--text-muted);
}

@media (hover: hover) {
  .level:hover {
    background: var(--shell-deep);
  }
}

/* --- Cartes de cours --- */
/* Trois colonnes au maximum : à quatre, les six cours laissent un rang bancal. */
.card-grid {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}

@media (min-width: 62rem) {
  .card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Carte plate, comme .stat sur l'accueil : un filet, aucun relief. Le survol change
   la teinte du fond plutôt que de soulever la carte — c'est le geste retenu pour
   .level, on le reprend ici. */
.course-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
  transition: border-color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}

@media (hover: hover) {
  .course-card:hover {
    border-color: var(--line-strong);
    background: var(--shell-deep);
  }
}

.course-card__media {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--cream-warm);
}

.course-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.course-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-2xs);
  padding: var(--space-m);
}

.course-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: var(--space-3xs);
}

.course-card h3 {
  font-size: var(--step-1);
}

.course-card h3 a {
  text-decoration: none;
}

.course-card h3 a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.course-card__text {
  flex: 1;
  color: var(--text-muted);
  font-size: var(--step--1);
}

.course-card__more {
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--terra-700);
}

.course-card {
  position: relative;
}

.tag {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--sage) 26%, transparent);
  color: var(--forest-deep);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.tag--gold {
  background: color-mix(in oklab, var(--terra-400) 34%, transparent);
  color: var(--terra-800);
}

/* --- Blocs alternés texte / image --- */
.split {
  display: grid;
  gap: var(--space-l);
  align-items: center;
}

.split--top {
  align-items: start;
}

@media (min-width: 55rem) {
  .split {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2xl);
  }

  .split--reverse > :first-child {
    order: 2;
  }
}

.split__media img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-l);
}

.split__media--wide img {
  aspect-ratio: 4 / 3;
}

/* Format naturel imposé nulle part : réservé aux images verticales, qu'un ratio
   forcé amputerait (voir la photo de Léa et Sonia sur l'accueil). */
.split__media--portrait {
  max-width: 26rem;
}

.split__media--portrait img {
  aspect-ratio: auto;
}

/* --- Listes de contenu --- */
.checklist {
  display: grid;
  gap: var(--space-xs);
  max-width: var(--measure);
}

.checklist li {
  position: relative;
  padding-left: 1.9rem;
}

.checklist li::before {
  content: '';
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 1.05rem;
  height: 0.55rem;
  border-left: 2.5px solid var(--sage-dark);
  border-bottom: 2.5px solid var(--sage-dark);
  transform: rotate(-45deg);
}

.section--deep .checklist li::before {
  border-color: color-mix(in srgb, var(--gold) 75%, white);
}

.steps {
  display: grid;
  gap: var(--space-m);
  counter-reset: step;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.step {
  position: relative;
  padding: var(--space-m);
  padding-top: var(--space-l);
  border-radius: var(--radius-m);
  background: var(--surface);
  border: 1px solid var(--line);
}

/* Terre cuite, comme .level__index : sur tout le site, un numéro est terre cuite. */
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: var(--space-s);
  left: var(--space-m);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--terra-700);
}

.step h3 {
  font-size: var(--step-1);
  margin-bottom: var(--space-3xs);
}

.step p {
  color: var(--text-muted);
  font-size: var(--step--1);
}

/* --- Planning --- */
.planning-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-bottom: var(--space-l);
}

.planning-controls[hidden] {
  display: none;
}

.chip {
  min-height: 44px;
  padding: 0.5rem 1.15rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--forest-deep);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 180ms var(--ease), color 180ms var(--ease), border-color 180ms var(--ease);
}

.chip:hover {
  background: color-mix(in srgb, var(--sage) 18%, transparent);
}

.chip[aria-pressed='true'] {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--text-invert);
}

/* Un seul composant de semaine, partagé par l'accueil, la page planning et les pages
   de cours. Le niveau de titre varie selon la page, le style non. */
.studio-week + .studio-week {
  margin-top: var(--space-2xl);
}

.studio-week[hidden] {
  display: none;
}

.studio-week__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-xs);
  margin-bottom: var(--space-m);
  padding-bottom: var(--space-2xs);
  border-bottom: 2px solid var(--sage-700);
}

.studio-week__head h2,
.studio-week__head h3 {
  font-size: var(--text-lg);
}

.studio-week__sub {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* Une seule grille tenue par ses filets, plutôt que sept cartes détachées. */
.week {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--line);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.day {
  display: flex;
  flex-direction: column;
  background: var(--surface);
}

.day__name {
  padding: 0.6rem var(--space-s);
  background: color-mix(in oklab, var(--sage-700) 10%, var(--surface));
  font-family: var(--font-body);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage-800);
}

.day__slots {
  display: grid;
  flex: 1;
  align-content: start;
}

/* Un jour sans cours est une information, pas une colonne vide. */
.day--empty {
  background: var(--shell-deep);
}

.day__empty {
  padding: 0.7rem var(--space-s);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.slot {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.6rem var(--space-s);
  border-top: 1px solid var(--line);
  font-size: var(--text-sm);
}

.slot:first-child {
  border-top: 0;
}

.slot__time {
  flex-shrink: 0;
  min-width: 3.2rem;
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--sage-700);
}

.slot__class {
  font-weight: 500;
}

.slot__class a {
  text-decoration-color: var(--line);
}

/* L'appel suit le studio consulté : le bouton vit dans le panneau, il bascule donc
   avec lui sans une ligne de JavaScript supplémentaire. */
.studio-week__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-s) var(--space-m);
  margin-top: var(--space-m);
}

.studio-week__phone {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--sage-700);
}

.week-note {
  margin-top: var(--space-l);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* --- Académie en ligne --- */
.academy__inner {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

@media (min-width: 55rem) {
  .academy__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: var(--space-3xl);
  }
}

.academy__figure img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius-l);
}

/* Bordure pleine et fond teinté : la bande latérale colorée est le tic visuel
   le plus reconnaissable des interfaces générées, on s'en passe. */
.callout {
  padding: var(--space-m);
  border: 1px solid color-mix(in oklab, var(--terra-700) 32%, transparent);
  border-radius: var(--radius-m);
  background: color-mix(in oklab, var(--terra-200) 55%, var(--surface));
  font-size: var(--text-sm);
}

.callout--sage {
  border-color: color-mix(in oklab, var(--sage-700) 28%, transparent);
  background: color-mix(in oklab, var(--sage-200) 45%, var(--surface));
}

.callout strong {
  color: var(--forest-deep);
}

/* --- Tarifs --- */
.price-grid {
  display: grid;
  gap: var(--space-m);
  align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.price-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-l);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
}

/* L'emphase passe par la terre cuite et un fond teinté, pas par une bordure épaisse :
   le vert du logo ne tient que 2,7:1 et disparaissait purement et simplement. */
.price-card--featured {
  border-color: color-mix(in oklab, var(--terra-700) 40%, transparent);
  background: color-mix(in oklab, var(--terra-200) 32%, var(--surface));
}

.price-card__badge {
  align-self: flex-start;
  margin-bottom: var(--space-s);
}

.price-card h3 {
  font-size: var(--step-1);
}

.price-card__duration {
  margin-top: var(--space-3xs);
  color: var(--sage-dark);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.price-card__subtitle {
  margin-top: var(--space-2xs);
  color: var(--text-muted);
  font-size: var(--step--1);
}

.price-list {
  display: grid;
  gap: 0;
  margin-top: var(--space-m);
}

.price-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--line);
}

.price-list li:first-child {
  border-top: 0;
}

.price-list__label {
  font-size: var(--step--1);
}

.price-list__unit {
  display: block;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.price-list__value {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 700;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--terra-700);
  white-space: nowrap;
}

.price-card__note {
  margin-top: var(--space-m);
  padding-top: var(--space-s);
  border-top: 1px solid var(--line);
  color: var(--text-muted);
  font-size: 0.92rem;
}

/* --- FAQ --- */
.faq {
  max-width: var(--wrap-narrow);
  border-top: 1px solid var(--line);
}

.faq__item {
  border-bottom: 1px solid var(--line);
}

.faq__item summary {
  display: flex;
  align-items: flex-start;
  gap: var(--space-s);
  padding: var(--space-m) 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--forest-deep);
  cursor: pointer;
  list-style: none;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary::after {
  content: '';
  flex-shrink: 0;
  width: 0.6rem;
  height: 0.6rem;
  margin-top: 0.5em;
  margin-left: auto;
  border-right: 2.5px solid var(--sage-dark);
  border-bottom: 2.5px solid var(--sage-dark);
  transform: rotate(45deg);
  transition: transform 240ms var(--ease);
}

.faq__item[open] summary::after {
  transform: rotate(-135deg);
}

.faq__item summary:hover {
  color: var(--forest);
}

.faq__answer {
  max-width: var(--measure);
  padding-bottom: var(--space-m);
  color: var(--text-muted);
}

/* --- Contact --- */
.contact-grid {
  display: grid;
  gap: var(--space-l);
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}

.studio-card {
  display: flex;
  flex-direction: column;
  padding: var(--space-l);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
}

.studio-card h3 {
  font-size: var(--text-lg);
}

.studio-card__address {
  margin-top: var(--space-s);
  font-style: normal;
  color: var(--text-muted);
}

.contact-list {
  display: grid;
  gap: var(--space-xs);
  margin-top: var(--space-m);
}

.contact-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  font-weight: 500;
  text-decoration: none;
}

.contact-list a:hover {
  text-decoration: underline;
}

.contact-list svg {
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  color: var(--sage-dark);
}

/* --- Bandeau d'appel à l'action --- */
/* Le seul grand aplat du vert de marque, avec du texte sombre dessus (5,7:1).
   C'est la place que le vert du logo peut réellement tenir : une surface, pas une encre. */
.cta-band {
  padding: var(--space-2xl) 0;
  background: var(--bg-brand);
  color: var(--sage-950);
}

.cta-band__inner {
  display: grid;
  gap: var(--space-m);
  align-items: center;
}

@media (min-width: 55rem) {
  .cta-band__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2xl);
  }
}

.cta-band h2 {
  color: var(--sage-950);
  font-size: var(--text-lg);
}

.cta-band p {
  margin-top: var(--space-2xs);
  color: var(--sage-900);
}

/* Le bandeau étant désormais clair, les boutons « pour fond sombre » s'inversent. */
.cta-band .btn--light {
  background: var(--sage-950);
  color: var(--shell);
}

.cta-band .btn--light:hover {
  background: var(--ink);
  color: var(--shell);
}

.cta-band .btn--outline-light {
  border-color: color-mix(in oklab, var(--sage-950) 42%, transparent);
  color: var(--sage-950);
}

.cta-band .btn--outline-light:hover {
  background: color-mix(in oklab, var(--sage-950) 10%, transparent);
  color: var(--sage-950);
}

.cta-band .btn-row {
  margin-top: 0;
}

/* --- Révélation au défilement --- */
.reveal {
  opacity: 1;
}

.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .js .reveal {
    opacity: 1;
    transform: none;
  }
}