@charset "utf-8";

/* ============================================================
   Karaté Tang Soo Do — Garéoult
   Palette échantillonnée directement sur l'affiche imprimée :
     papier  #F3E9D9   encre #0E0D0C
     or vif  #F0B028   or profond #C08018
   ============================================================ */

:root {
  /* — Couleurs, en OKLCH, dérivées de l'affiche — */
  --paper:        oklch(93.2% 0.025 79);    /* crème du papier            */
  --paper-deep:   oklch(89.4% 0.031 76);    /* crème dans les creux       */
  --paper-lift:   oklch(96.4% 0.018 82);    /* crème éclairé              */
  --ink:          oklch(17.5% 0.006 60);    /* noir d'encre, jamais #000  */
  --ink-soft:     oklch(38%   0.012 62);    /* texte secondaire           */
  --gold:         oklch(78.5% 0.148 74);    /* or vif — accents rares     */
  --gold-deep:    oklch(60.5% 0.124 66);    /* or profond — filets, texte */
  --gold-wash:    oklch(88%   0.055 76);    /* voile doré                 */
  /* Or assombri pour le petit texte : 4.6:1 sur le papier (WCAG AA).
     --gold-deep reste réservé aux grands titres et aux filets. */
  --gold-text:    oklch(50.5% 0.115 62);
  /* Gris assombri : 4.8:1 au lieu de 3.8:1 */
  --ink-faint:    oklch(50%   0.013 64);

  /* — Typographie — */
  --font-hit:  "Anton", "Haettenschweiler", "Arial Narrow", sans-serif;
  --font-disp: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --font-body: "Karla", "Segoe UI", system-ui, sans-serif;
  --font-brush: "Permanent Marker", "Bradley Hand", cursive;

  /* Échelle modulaire, ratio 1.28 */
  --t-xs:   0.78rem;
  --t-sm:   0.94rem;
  --t-base: 1.06rem;
  --t-md:   clamp(1.24rem, 1.06rem + 0.72vw, 1.55rem);
  --t-lg:   clamp(1.62rem, 1.32rem + 1.34vw, 2.42rem);
  --t-xl:   clamp(2.18rem, 1.6rem + 2.6vw, 3.9rem);
  --t-2xl:  clamp(4rem, 2.7rem + 5.8vw, 7.6rem);

  /* — Espace, base 4pt, noms sémantiques — */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --measure: 64ch;
  --page: 74rem;
  --section-gap: clamp(3.25rem, 6vw, 4.75rem);
  --section-gap-compact: clamp(2.5rem, 4.5vw, 3.75rem);

  /* — Mouvement : décélération exponentielle, jamais de rebond — */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ============================================================
   BASE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: 1.62;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Grain du papier froissé, reproduit sur toute la page.
   Deux couches de bruit fractal à des échelles différentes :
   la fibre fine, puis les plis larges. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.34;
  mix-blend-mode: multiply;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.34 0 0 0 0 0.22 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23f)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008' numOctaves='5' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0.36 0 0 0 0 0.28 0 0 0 0 0.16 0 0 0 0.22 0'/%3E%3C/filter%3E%3Crect width='700' height='700' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 300px 300px, 700px 700px;
}

/* Les fibres seules donnaient un aplat granuleux. Ces plis larges, fixes et
   volontairement irréguliers recréent le relief du papier de l'affiche sans
   ajouter une image lourde ni distraire la lecture. */
body::after {
  content: "";
  position: fixed;
  inset: -8%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.72;
  background:
    linear-gradient(103deg,
      transparent 0 18%,
      oklch(72% 0.018 72 / 0.08) 18.35%,
      oklch(98% 0.012 84 / 0.24) 18.8%,
      transparent 19.4% 63%,
      oklch(74% 0.018 72 / 0.065) 63.35%,
      oklch(98% 0.012 84 / 0.2) 63.75%,
      transparent 64.4%),
    linear-gradient(79deg,
      transparent 0 36%,
      oklch(98% 0.012 84 / 0.22) 36.35%,
      oklch(70% 0.018 72 / 0.055) 36.75%,
      transparent 37.4% 81%,
      oklch(71% 0.018 72 / 0.06) 81.3%,
      transparent 82%),
    linear-gradient(168deg,
      transparent 0 46%,
      oklch(72% 0.018 72 / 0.055) 46.3%,
      oklch(98% 0.012 84 / 0.18) 46.8%,
      transparent 47.45%),
    radial-gradient(ellipse at 74% 8%,
      oklch(98% 0.012 84 / 0.18), transparent 34%),
    radial-gradient(ellipse at 18% 76%,
      oklch(76% 0.018 72 / 0.055), transparent 38%);
}

body > * { position: relative; z-index: 1; }

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

a { color: inherit; }

::selection { background: var(--gold); color: var(--ink); }

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

.skip {
  position: absolute;
  left: var(--gutter);
  top: -6rem;
  z-index: 99;
  background: var(--ink);
  color: var(--paper);
  padding: var(--space-sm) var(--space-md);
  font-weight: 700;
  text-decoration: none;
  transition: top 220ms var(--ease-out);
}
.skip:focus { top: var(--space-md); }

/* ============================================================
   EN-TÊTE
   ============================================================ */

.hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(38rem, 72svh, 44rem);
  padding: clamp(2rem, 5vw, 3.75rem) var(--gutter) clamp(1.75rem, 4vw, 2.75rem);
  max-width: var(--page);
  margin-inline: auto;
  isolation: isolate;
}

/* Le tigre : image de l'affiche, détourée en douceur par un masque
   radial pour se fondre dans le papier comme à l'impression. */
.hero__tiger {
  position: absolute;
  z-index: -1;
  top: clamp(-2.5rem, -2vw, -0.75rem);
  right: clamp(-3.75rem, -2vw, -1rem);
  width: clamp(27rem, 48vw, 38rem);
  aspect-ratio: 1244 / 1265;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url("assets/tiger.png");
  background-image: image-set(
    url("assets/tiger-v2.webp") type("image/webp"),
    url("assets/tiger.png") type("image/png")
  );
  opacity: 0.96;
  filter: saturate(0.88) contrast(1.03);
}

.hero__eyebrow {
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);
  font-family: var(--font-disp);
  font-weight: 800;
  font-size: var(--t-sm);
  line-height: 1.32;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  max-width: 22ch;
}
.hero__eyebrow span { color: var(--ink); }

.hero__title { margin: 0; padding-top: 0.06em; }

.hero__karate,
.hero__place { display: block; }

/* « KARATÉ » — la ligne la plus forte de la page, comme sur l'affiche. */
.hero__karate {
  font-family: var(--font-brush);
  font-size: var(--t-2xl);
  line-height: 0.88;
  letter-spacing: -0.045em;
  text-transform: uppercase;
  color: var(--ink);
  transform: rotate(-1.6deg);
  transform-origin: left center;
}

.hero__place {
  font-family: var(--font-brush);
  font-size: clamp(2rem, 1.25rem + 3vw, 4rem);
  line-height: 0.96;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--ink);
  margin-left: clamp(1.4rem, 5vw, 4.25rem);
  margin-top: 0.22em;
  transform: rotate(-1.6deg);
  transform-origin: left center;
}
.hero__place em {
  font-style: normal;
  font-size: 0.56em;
  margin-right: 0.34em;
  vertical-align: 0.06em;
}

/* Le filet doré tracé sous « à Garéoult » */
.hero__rule {
  height: 5px;
  width: clamp(8rem, 24vw, 15rem);
  margin: clamp(0.85rem, 1.6vw, 1.2rem) 0 0 clamp(1.5rem, 5vw, 4.4rem);
  background: var(--gold-deep);
  border-radius: 3px 6px 4px 5px / 4px 3px 5px 3px;
  transform: rotate(-0.7deg);
  transform-origin: left center;
  animation: ink-rule 620ms 140ms var(--ease-out) both;
}

@keyframes ink-rule {
  from { opacity: 0; transform: rotate(-0.7deg) scaleX(0); }
  to { opacity: 1; transform: rotate(-0.7deg) scaleX(1); }
}

.hero__tagline {
  margin: clamp(1.5rem, 3vw, 2.3rem) 0 0;
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: var(--t-md);
  line-height: 1.28;
  color: var(--gold-text);
  max-width: 18ch;
}

.hero__cta {
  margin-top: clamp(1.75rem, 4vw, 2.6rem);
  display: grid;
  grid-template-columns: max-content max-content;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  width: fit-content;
  max-width: 100%;
}

/* ============================================================
   LE COUP DE PINCEAU — « 2 cours d'essai GRATUITS »
   Reprise fidèle du carton de l'affiche : le yin-yang chevauche
   le trait de brosse, et le lettrage est peint à la main.
   ============================================================ */

.brush {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: clamp(0.6rem, 2vw, 1rem);
  padding: clamp(0.7rem, 2vw, 1.05rem) clamp(1.3rem, 3.4vw, 2rem)
           clamp(0.85rem, 2.2vw, 1.25rem) clamp(2.6rem, 7vw, 4.1rem);
  margin-left: clamp(1.5rem, 4.5vw, 2.6rem);
  color: var(--paper);
  text-decoration: none;
  transform: rotate(-1.4deg);
  transition: transform 240ms var(--ease-out);
}

/* Le trait de brosse : bords irréguliers, jamais un rectangle */
.brush::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ink);
  clip-path: polygon(
    0.6% 8%, 12% 1.5%, 30% 5%, 51% 0.8%, 70% 5.5%, 87% 1.2%, 97% 6%,
    99.4% 30%, 98.2% 62%, 99.6% 90%, 85% 98%, 64% 92%, 43% 99%,
    22% 93.5%, 7% 98.8%, 0.4% 88%, 1.8% 56%, 0.2% 32%
  );
}

.brush:hover, .brush:focus-visible { transform: rotate(-1.4deg) scale(1.02); }

/* Le yin-yang déborde à gauche, comme sur l'affiche */
.brush__yy {
  position: absolute;
  left: clamp(-1.5rem, -4vw, -1rem);
  top: 50%;
  width: clamp(3.4rem, 9vw, 4.8rem);
  transform: translateY(-50%) rotate(1.4deg);
  filter: drop-shadow(0 1px 0 oklch(17.5% 0.006 60 / 0.25));
}

.brush__text { display: block; }

.brush__l1 {
  display: block;
  font-family: var(--font-brush);
  font-size: clamp(1.02rem, 0.82rem + 1vw, 1.58rem);
  line-height: 1.06;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--paper-lift);
}

.brush__l2 {
  display: block;
  font-family: var(--font-brush);
  font-size: clamp(1.7rem, 1.1rem + 2.7vw, 2.95rem);
  line-height: 1.02;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--gold);
  margin-top: 0.1em;
  transform: rotate(-0.8deg);
  transform-origin: left center;
}

.hero__call {
  position: relative;
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: var(--t-base);
  line-height: 1.34;
  color: var(--ink);
  text-decoration: none;
  padding-bottom: 2px;
  white-space: nowrap;
  transition: color 200ms var(--ease-out);
}
.hero__call span {
  display: block;
  font-weight: 500;
  font-size: var(--t-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border: 0;
}
.hero__call:hover { color: var(--gold-text); }

/* Les liens éditoriaux sont soulignés à l'encre, jamais au cordeau. */
.hero__call::after,
.place__map::after,
.footer__contact a::after,
.essai__contact b::after {
  content: "";
  position: absolute;
  left: -0.03em;
  right: -0.08em;
  bottom: 0;
  height: 2px;
  background: var(--ink-line, var(--gold-deep));
  clip-path: polygon(
    0 31%, 9% 2%, 21% 36%, 36% 8%, 52% 43%, 68% 4%,
    83% 35%, 100% 9%, 99% 76%, 84% 61%, 66% 92%,
    49% 62%, 32% 95%, 16% 59%, 0 83%
  );
  opacity: 0.72;
  transform: rotate(var(--stroke-angle, -0.35deg)) scaleX(0.96);
  transform-origin: left center;
  transition: opacity 180ms var(--ease-out), transform 220ms var(--ease-out);
  pointer-events: none;
}

.hero__call:hover::after,
.place__map:hover::after,
.footer__contact a:hover::after,
.essai__contact:hover b::after {
  opacity: 1;
  transform: rotate(var(--stroke-angle, -0.35deg)) scaleX(1);
}

/* ============================================================
   ACCÈS RAPIDE — barre collante sous l'en-tête
   Quatre entrées, pas une de plus : au-delà, on choisit moins bien.
   ============================================================ */

.subnav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: oklch(95.2% 0.022 80 / 0.93);
  border-bottom: 1px solid oklch(60.5% 0.124 66 / 0.32);
  /* Le papier reste visible dans la bande : pas d'effet barre d'application. */
}

.subnav ul {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--gutter);
  list-style: none;
  display: flex;
  align-items: center;
  gap: clamp(0.7rem, 2.6vw, 2rem);
  overflow-x: auto;
  scrollbar-width: none;
  /* le dernier element ne doit jamais etre coupe */
  scroll-padding-inline: var(--gutter);
}
.subnav li { display: flex; align-items: center; }
.subnav li:last-child { padding-right: var(--gutter); }
.subnav ul::-webkit-scrollbar { display: none; }

.subnav a {
  position: relative;
  display: flex;
  align-items: center;
  height: 3rem;
  min-height: 3rem;
  padding: 0.14rem 0 0;
  white-space: nowrap;
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: clamp(0.875rem, 0.82rem + 0.24vw, 0.96rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color 180ms var(--ease-out);
}
.subnav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.28rem;
  height: 2px;
  background: var(--gold-deep);
  clip-path: polygon(0 28%, 29% 0, 62% 32%, 100% 8%, 98% 100%, 57% 74%, 18% 100%, 0 68%);
  opacity: 0;
  transform: rotate(var(--stroke-angle, -0.8deg)) scaleX(0.45);
  transform-origin: left center;
  transition: opacity 180ms var(--ease-out), transform 220ms var(--ease-out);
}
.subnav a:hover { color: var(--ink); }
.subnav a:hover::after,
.subnav a.is-current::after {
  opacity: 1;
  transform: rotate(var(--stroke-angle, -0.8deg)) scaleX(1);
}

.subnav li:nth-child(2) a { --stroke-angle: 0.32deg; }
.subnav li:nth-child(3) a { --stroke-angle: -0.18deg; }
.subnav li:nth-child(4) a { --stroke-angle: 0.48deg; }

/* La section visible est signalée : on sait où on se trouve */
.subnav a.is-current {
  color: var(--ink);
}

.subnav__cta { color: var(--gold-text); }
.subnav__cta:hover, .subnav__cta.is-current { color: var(--gold-text); }

/* ============================================================
   LES QUATRE RÉPONSES
   Liste, pas une grille de cartes.
   ============================================================ */

.facts {
  max-width: var(--page);
  margin: clamp(1rem, 3vw, 2rem) auto 0;
  padding-inline: var(--gutter);
}

.facts__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  column-gap: clamp(1.25rem, 3vw, 2rem);
}

.fact {
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 1.15rem);
  padding: clamp(0.95rem, 2.4vw, 1.3rem) 0 clamp(1.05rem, 2.6vw, 1.45rem);
  /* filet doré sous chaque ligne, exactement comme l'affiche */
  border-bottom: 1.5px solid var(--gold-deep);
}

.fact__icon {
  flex: none;
  width: clamp(2.1rem, 5.4vw, 2.6rem);
  height: auto;
  color: var(--ink);
}

.fact__text {
  margin: 0;
  font-family: var(--font-disp);
  font-weight: 500;
  font-size: clamp(1rem, 0.93rem + 0.34vw, 1.18rem);
  line-height: 1.34;
}
.fact__text b { font-weight: 800; }

@media (min-width: 40rem) {
  .facts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 68rem) {
  .facts__list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ============================================================
   TITRES DE SECTION
   ============================================================ */

.section-h {
  margin: 0 0 clamp(1.5rem, 4vw, 2.4rem);
  font-family: var(--font-disp);
  font-weight: 800;
  font-size: var(--t-sm);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
/* le trait qui prolonge le titre jusqu'au bord */
.section-h::after {
  content: "";
  flex: 1;
  height: 3px;
  background: var(--gold-deep);
  clip-path: polygon(
    0 34%, 8% 5%, 19% 38%, 33% 12%, 48% 45%, 63% 8%,
    77% 36%, 91% 4%, 100% 28%, 99% 78%, 86% 62%, 71% 91%,
    56% 57%, 41% 88%, 25% 60%, 11% 94%, 0 72%
  );
  transform: rotate(-0.12deg);
  opacity: 0.5;
}

/* ============================================================
   OÙ ET QUAND
   ============================================================ */

.practical {
  max-width: var(--page);
  margin-inline: auto;
  padding: var(--section-gap-compact) var(--gutter) 0;
}

.practical__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  align-items: start;
}

.place { display: flex; gap: clamp(0.9rem, 2.4vw, 1.4rem); }

.place__pin {
  flex: none;
  width: clamp(2.2rem, 5.5vw, 2.9rem);
  height: auto;
  color: var(--ink);
  margin-top: 0.2rem;
}

.place__intro {
  margin: 0;
  font-size: var(--t-sm);
  color: var(--ink-soft);
}

.place__name {
  margin: 0.15rem 0 0;
  font-family: var(--font-disp);
  font-weight: 800;
  font-size: var(--t-md);
  line-height: 1.18;
}

.place__city {
  margin: 0.2rem 0 0;
  font-family: var(--font-disp);
  font-weight: 800;
  font-size: var(--t-md);
  line-height: 1.18;
  color: var(--gold-text);
}

.place__map {
  position: relative;
  --stroke-angle: 0.24deg;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--space-md);
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--ink-soft);
  text-decoration: none;
  padding-bottom: 2px;
  transition: color 200ms var(--ease-out);
}
.place__map svg { width: 0.85em; height: 0.85em; }
.place__map:hover { color: var(--ink); }

.hours { display: flex; gap: clamp(0.9rem, 2.4vw, 1.4rem); }

.hours__clock {
  flex: none;
  width: clamp(2.2rem, 5.5vw, 2.9rem);
  height: auto;
  color: var(--ink);
  margin-top: 0.2rem;
}

.hours__list { margin: 0; }

.hours__row + .hours__row { margin-top: var(--space-lg); }

.hours__row dt {
  font-family: var(--font-disp);
  font-weight: 800;
  font-size: var(--t-md);
  line-height: 1.2;
}
/* le trait de surlignage doré sous « Lundi », comme sur l'affiche */
.hours__row:first-child dt {
  position: relative;
  display: inline-block;
  padding-bottom: 3px;
}
.hours__row:first-child dt::after {
  content: "";
  position: absolute;
  left: -0.05em;
  right: -0.12em;
  bottom: 0;
  height: 5px;
  background: var(--gold-deep);
  clip-path: polygon(0 28%, 18% 2%, 43% 35%, 68% 0, 100% 24%, 97% 82%, 72% 62%, 46% 100%, 21% 65%, 2% 92%);
  transform: rotate(-0.7deg);
}

.hours__row dd {
  margin: 0.1rem 0 0;
  font-size: var(--t-base);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   PHOTO EN PLEINE LARGEUR
   ============================================================ */

.shot {
  position: relative;
  margin: clamp(2.5rem, 6vw, 4rem) 0 0;
}
.shot img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  clip-path: polygon(0.4% 0.8%, 99.6% 0, 100% 99.2%, 0 99.4%);
}
.shot figcaption {
  position: relative;
  margin: var(--space-md) 0 0;
  padding-top: var(--space-sm);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
}
.shot figcaption::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5rem;
  height: 3px;
  background: var(--gold-deep);
  clip-path: polygon(0 20%, 96% 0, 100% 74%, 4% 100%);
  transform: rotate(-0.8deg);
}

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

.tarifs {
  max-width: var(--page);
  margin-inline: auto;
  padding: var(--section-gap) var(--gutter) 0;
}

.tarifs__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: start;
}

.price { margin: 0; }

.price__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: baseline;
  gap: var(--space-sm) var(--space-lg);
  padding: clamp(1.05rem, 2.6vw, 1.4rem) 0 clamp(0.95rem, 2.4vw, 1.25rem);
  border-top: 1px solid oklch(60.5% 0.124 66 / 0.34);
}
.price__row:last-child { border-bottom: 1px solid oklch(60.5% 0.124 66 / 0.34); }

.price dt {
  font-family: var(--font-disp);
  font-weight: 800;
  font-size: var(--t-base);
}
.price dd {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  flex-wrap: wrap;
}
.price dd b {
  font-family: var(--font-hit);
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem);
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.price dd span {
  font-size: var(--t-sm);
  color: var(--ink-faint);
}
/* La gratuité est l'argument : elle passe en or */
.price__row--free dd b { color: var(--gold-text); }

/* « Sur demande » est une phrase, pas un chiffre : elle garde la police
   de titrage courante plutot que le condense d affiche. */
.price__ask {
  font-family: var(--font-disp) !important;
  font-weight: 800;
  font-size: var(--t-md) !important;
  letter-spacing: 0;
  color: var(--ink);
}

.tarifs__note {
  margin: var(--space-lg) 0 0;
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 46ch;
}

.tarifs__h3 {
  margin: 0 0 var(--space-md);
  font-family: var(--font-disp);
  font-weight: 800;
  font-size: var(--t-md);
  line-height: 1.2;
}

.steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 0 2.6rem;
  margin-bottom: var(--space-md);
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--ink-soft);
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -0.12em;
  font-family: var(--font-hit);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gold-deep);
  opacity: 0.6;
}
.steps b { color: var(--ink); font-weight: 700; }

.tarifs__doc {
  margin: var(--space-lg) 0 0;
  padding-top: var(--space-md);
  border-top: 1px solid oklch(60.5% 0.124 66 / 0.34);
  font-size: var(--t-xs);
  line-height: 1.6;
  color: var(--ink-faint);
}

@media (max-width: 52rem) {
  .tarifs__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   ESSAI GRATUIT — le bloc noir, point d'arrivée de la page
   ============================================================ */

.essai {
  margin: var(--section-gap) 0 0;
  padding: 0 var(--gutter);
}

.essai__inner {
  max-width: 64rem;
  margin-inline: auto;
  background: var(--ink);
  color: var(--paper);
  padding: clamp(2.2rem, 5vw, 3.25rem) clamp(1.5rem, 5vw, 3.25rem)
           clamp(2.35rem, 5vw, 3.5rem);
  position: relative;
  overflow: hidden;
  /* Un coup de brosse compact, plus proche de l'affiche qu'un bandeau. */
  clip-path: polygon(
    0.5% 3%, 9% 1.3%, 22% 3.5%, 37% 0.8%, 54% 2.8%, 70% 0,
    86% 3.2%, 99.4% 1.2%, 100% 95.5%, 88% 98.7%, 73% 96.2%,
    57% 99.5%, 39% 97%, 23% 100%, 8% 96.8%, 0 98.2%
  );
}

.essai__kicker {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
}

.essai__h {
  margin: 0;
  font-family: var(--font-disp);
  font-weight: 800;
  font-size: var(--t-lg);
  line-height: 1.12;
  letter-spacing: -0.012em;
  color: var(--paper);
}

.essai__trial {
  width: fit-content;
  margin: var(--space-xs) 0 0;
  font-family: var(--font-brush);
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.65rem);
  line-height: 1.08;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  color: var(--gold);
  transform: rotate(-0.7deg);
  transform-origin: left center;
}

.essai__lead {
  margin: clamp(1.1rem, 3vw, 1.6rem) 0 0;
  max-width: 58ch;
  /* texte clair sur fond sombre : interlignage augmenté */
  line-height: 1.72;
  color: oklch(88% 0.018 78);
}

.essai__actions {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid oklch(78.5% 0.148 74 / 0.3);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md) clamp(1.5rem, 5vw, 3.5rem);
}

.essai__contact {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 44px;
  color: var(--paper-lift);
  font-family: var(--font-disp);
  text-decoration: none;
  transition: color 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.essai__contact svg {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  color: var(--gold);
}
.essai__contact span,
.essai__contact small,
.essai__contact b { display: block; }
.essai__contact small {
  margin-bottom: 0.05rem;
  color: oklch(78% 0.015 78);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.essai__contact b {
  position: relative;
  padding-bottom: 0.16rem;
  --ink-line: var(--gold);
  font-size: var(--t-sm);
  line-height: 1.3;
}
.essai__contact:nth-of-type(2) b { --stroke-angle: 0.3deg; }
.essai__contact:hover { color: var(--gold); transform: translateY(-1px); }
.essai__contact:active { transform: translateY(1px); transition-duration: 110ms; }

@media (max-width: 52rem) {
  .essai__actions { align-items: flex-start; }
  .essai__contact { flex-basis: 100%; }
}

/* ============================================================
   PIED : LES VALEURS
   ============================================================ */

.footer {
  max-width: var(--page);
  margin-inline: auto;
  padding: clamp(2.75rem, 6vw, 4rem) var(--gutter) max(3rem, env(safe-area-inset-bottom));
  text-align: center;
}

.footer__yy {
  width: clamp(3rem, 8vw, 4rem);
  margin: 0 auto clamp(1.5rem, 4vw, 2.2rem);
}

.values {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem clamp(0.9rem, 3vw, 1.8rem);
  font-family: var(--font-disp);
  font-weight: 800;
  font-size: clamp(0.82rem, 0.75rem + 0.34vw, 1.02rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.values li { display: flex; align-items: center; gap: clamp(0.9rem, 3vw, 1.8rem); }
.values li:not(:last-child)::after {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.6;
}

.footer__contact {
  margin: clamp(1.8rem, 5vw, 2.6rem) 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: var(--t-base);
}
.footer__contact a {
  position: relative;
  text-decoration: none;
  padding-bottom: 2px;
}
.footer__contact a:nth-of-type(2) { --stroke-angle: 0.28deg; }
.footer__contact a:hover { color: var(--gold-text); }
.footer__contact span { color: var(--ink-faint); }

.footer__legal {
  margin: var(--space-sm) 0 0;
  font-size: var(--t-xs);
  color: var(--ink-faint);
  letter-spacing: 0.02em;
}

/* ============================================================
   BARRE D'APPEL FIXE — téléphone uniquement
   ============================================================ */

.sticky-call {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 56px;
  padding: 0.9rem 1rem calc(0.9rem + env(safe-area-inset-bottom));
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-disp);
  font-weight: 800;
  font-size: 0.98rem;
  text-decoration: none;
  transform: translateY(100%);
  transition: transform 420ms var(--ease-out);
}
.sticky-call svg { width: 1.05em; height: 1.05em; color: var(--gold); flex: none; }
.sticky-call.is-visible { transform: none; }

@media (max-width: 44rem) {
  .sticky-call { display: flex; }
  /* le contenu ne passe jamais sous la barre d appel */
  body { padding-bottom: 4.5rem; }
}

/* ============================================================
   CIBLES TACTILES — au moins 44px sur telephone
   ============================================================ */

@media (pointer: coarse) {
  .place__map,
  .footer__contact a,
  .hero__call {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .hero__call { display: inline-block; padding-block: 0.35rem; }
  .hero__scroll { min-height: 44px; display: grid; place-items: center; width: 44px; }
}

/* ============================================================
   RÉVÉLATIONS AU DÉFILEMENT
   ============================================================ */

.reveal { opacity: 1; transform: none; }

/* ============================================================
   FLÈCHE DE DÉFILEMENT
   ============================================================ */

.hero__scroll {
  display: block;
  width: 1.5rem;
  margin: clamp(2rem, 5vw, 3rem) 0 0;
  color: var(--ink-faint);
  transition: color 180ms var(--ease-out), transform 180ms var(--ease-out);
}
.hero__scroll:hover { color: var(--gold-text); transform: translateY(3px); }

/* ============================================================
   TEXTE COURANT
   ============================================================ */

.lede {
  font-family: var(--font-disp);
  font-weight: 500;
  font-size: var(--t-md);
  line-height: 1.44;
  color: var(--ink);
}

.school__lede { max-width: var(--measure); }
.school__lede p + p { margin-top: var(--space-md); }
.school__lede p:not(.lede) { color: var(--ink-soft); }
.school__lede p.school__association {
  margin: 0 0 var(--space-sm);
  max-width: 52ch;
  font-family: var(--font-disp);
  font-size: var(--t-sm);
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: 0.025em;
  color: var(--gold-text);
}

.school__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(18rem, 0.7fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: start;
}

/* ============================================================
   L'ÉCOLE — ce qu'on y travaille
   ============================================================ */

.school {
  max-width: var(--page);
  margin-inline: auto;
  padding: var(--section-gap) var(--gutter) 0;
}

.work {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  column-gap: clamp(2rem, 5vw, 4rem);
}

.work__item {
  display: flex;
  align-items: baseline;
  gap: clamp(0.9rem, 2.4vw, 1.4rem);
  padding: clamp(1.3rem, 3.2vw, 1.75rem) 0 clamp(1.15rem, 2.8vw, 1.5rem);
  border-top: 1px solid oklch(60.5% 0.124 66 / 0.34);
}

/* Le chiffre : grand, doré, en retrait — un repère, pas une décoration */
.work__num {
  flex: none;
  font-family: var(--font-hit);
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.15rem);
  line-height: 1;
  color: var(--gold-text);
  opacity: 0.72;
  font-variant-numeric: tabular-nums;
}

.work__h {
  margin: 0 0 0.2rem;
  font-family: var(--font-disp);
  font-weight: 800;
  font-size: var(--t-base);
  line-height: 1.28;
  letter-spacing: 0.01em;
}
.work__body p {
  margin: 0;
  font-size: var(--t-sm);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 42ch;
}

/* ============================================================
   CITATION — l'état d'esprit
   ============================================================ */

.quote {
  margin: 0;
  padding: 0;
  max-width: 30ch;
}
.quote p {
  margin: 0;
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: clamp(1.45rem, 1.18rem + 1.15vw, 2.05rem);
  line-height: 1.24;
  letter-spacing: -0.006em;
  text-wrap: balance;
}
/* Le guillemet ouvrant, posé comme un coup de pinceau */
.quote p::before {
  content: "\00AB";
  color: var(--gold-text);
  margin-right: 0.24em;
  font-size: 1.1em;
  line-height: 0;
  vertical-align: -0.06em;
}
.quote footer {
  margin-top: var(--space-md);
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ============================================================
   LA LIGNÉE — bloc sombre, la profondeur historique
   ============================================================ */

.lineage {
  margin: var(--section-gap) 0 0;
  background: var(--ink);
  color: oklch(89% 0.016 78);
  padding: var(--section-gap) var(--gutter);
  position: relative;
  overflow: hidden;
}
/* Voile doré très discret : le noir ne doit jamais être plat */
.lineage::after {
  content: "";
  position: absolute;
  inset: -30% -20% auto auto;
  width: 34rem;
  height: 34rem;
  background: radial-gradient(circle, oklch(78.5% 0.148 74 / 0.10), transparent 66%);
  pointer-events: none;
}

.lineage__inner {
  max-width: var(--page);
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

.section-h--dark { color: oklch(72% 0.02 78); }
.section-h--dark::after { background: var(--gold); opacity: 0.42; }

.lineage__grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.75rem);
  grid-template-columns: minmax(0, 1.25fr) minmax(18rem, 0.75fr);
  align-items: start;
}

.lineage__text { max-width: 62ch; }
/* Texte clair sur fond sombre : on ouvre l'interlignage */
.lineage__text p {
  margin: 0 0 var(--space-md);
  line-height: 1.74;
  color: oklch(82% 0.014 78);
}
.lineage__text p:last-child { margin-bottom: 0; }
.lede--light { color: oklch(94% 0.014 80); }
.lineage__text b { color: var(--gold); font-weight: 700; }
.lineage__text sup { font-size: 0.62em; vertical-align: 0.42em; }

.lineage__close {
  padding-top: var(--space-md);
  border-top: 1px solid oklch(78.5% 0.148 74 / 0.28);
}

.lineage__signature {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid oklch(78.5% 0.148 74 / 0.28);
}

.lineage__signature .tsdi {
  flex: none;
  width: 8.5rem;
}

.tsdi__t {
  fill: var(--paper-lift);
  font-family: var(--font-disp);
  font-weight: 800;
  letter-spacing: 0.08em;
}

.tsdi__t--sm {
  fill: var(--gold);
  letter-spacing: 0.045em;
}

.lineage__signature p {
  margin: 0;
  line-height: 1.35;
}

.lineage__signature b,
.lineage__signature span { display: block; }

.lineage__signature b {
  color: var(--gold);
  font-family: var(--font-disp);
  font-size: var(--t-base);
}

.lineage__signature span {
  margin-top: var(--space-2xs);
  color: oklch(78% 0.014 78);
  font-size: var(--t-sm);
}

/* ============================================================
   PHOTO DE LIGNÉE — le document qui atteste la filiation
   ============================================================ */

.lineage__aside {
  position: relative;
  margin: 0;
  align-self: start;
  text-align: center;
  display: flex;
  flex-direction: column;
}

.lineage__photo {
  order: 1;
  width: 100%;
  height: clamp(27rem, 34vw, 31rem);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 16%;
  /* Coins très légèrement irréguliers : un tirage, pas une vignette */
  clip-path: polygon(0.7% 0.8%, 99.5% 0, 100% 99.2%, 0 99.6%);
  filter: saturate(0.92) contrast(1.03);
}

.lineage__aside figcaption {
  order: 2;
  position: relative;
  width: 100%;
  margin: var(--space-md) 0 0;
  padding: var(--space-sm) 0 0;
  font-size: 0.84rem;
  line-height: 1.58;
  text-align: left;
  color: oklch(79% 0.016 78);
}
.lineage__aside figcaption::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5.5rem;
  height: 3px;
  background: var(--gold);
  clip-path: polygon(0 28%, 96% 0, 100% 72%, 4% 100%);
  transform: rotate(-0.8deg);
}
.lineage__aside figcaption b {
  color: var(--gold);
  font-weight: 700;
}
.lineage__aside figcaption sup { font-size: 0.66em; vertical-align: 0.4em; }

@media (max-width: 52rem) {
  .lineage__aside { max-width: 22rem; }
  .lineage__photo { height: min(120vw, 31rem); }
  .school__intro { grid-template-columns: 1fr; gap: var(--space-xl); }
  .quote { max-width: 38ch; }
}

/* ============================================================
   REPLI — le detail reste accessible sans encombrer la lecture
   ============================================================ */

.more { margin: 0 0 var(--space-md); }

.more summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: var(--t-sm);
  color: var(--gold);
  list-style: none;
  transition: color 180ms var(--ease-out);
}
.more summary::-webkit-details-marker { display: none; }
.more summary::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform 240ms var(--ease-out);
}
.more[open] summary::after { transform: rotate(-135deg) translate(-1px, -1px); }
.more summary:hover { color: var(--paper-lift); }
.more > p:first-of-type { margin-top: var(--space-sm); }

/* ============================================================
   LE PROFESSEUR
   ============================================================ */

.teacher {
  max-width: var(--page);
  margin-inline: auto;
  padding: var(--section-gap) var(--gutter) 0;
}

.teacher__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
  align-items: center;
}

.teacher__portrait {
  position: relative;
  margin: 0;
}
.teacher__portrait img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center 22%;
  /* Coins légèrement irréguliers : un tirage papier, pas une vignette */
  clip-path: polygon(0.8% 1.2%, 99.4% 0, 100% 98.8%, 0 99.6%);
  filter: saturate(0.92) contrast(1.04);
}

.teacher__portrait figcaption {
  position: relative;
  width: 100%;
  margin: var(--space-md) 0 0;
  padding: var(--space-sm) 0 0;
  color: var(--ink);
  font-family: var(--font-disp);
  text-align: left;
}
.teacher__portrait figcaption::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5rem;
  height: 3px;
  background: var(--gold-deep);
  clip-path: polygon(0 30%, 97% 0, 100% 70%, 3% 100%);
  transform: rotate(-0.8deg);
}
.teacher__portrait figcaption b,
.teacher__portrait figcaption span { display: block; }
.teacher__portrait figcaption b {
  color: var(--gold-text);
  font-size: var(--t-sm);
  line-height: 1.3;
}
.teacher__portrait figcaption span {
  margin-top: var(--space-2xs);
  color: var(--ink-faint);
  font-size: var(--t-xs);
  line-height: 1.4;
}
.teacher__portrait figcaption sup { font-size: 0.66em; vertical-align: 0.4em; }

/* La ceinture ne paraît qu'en l'absence de photo : elle occupe le cadre. */
.teacher__belt { display: none; }

.teacher__portrait.is-empty {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  background: var(--paper-deep);
  border: 1px solid oklch(60.5% 0.124 66 / 0.4);
  clip-path: polygon(0.8% 1.2%, 99.4% 0, 100% 98.8%, 0 99.6%);
}
.teacher__portrait.is-empty .teacher__belt {
  display: block;
  width: 72%;
}
.teacher__portrait.is-empty figcaption { display: none; }

.teacher__name {
  margin: 0 0 var(--space-md);
  font-family: var(--font-disp);
  font-weight: 800;
  font-size: var(--t-lg);
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--ink);
}
/* Civilité et prénom en or, nom de famille en noir : la hiérarchie de l'affiche */
.teacher__name span,
.teacher__name em { color: var(--gold-text); font-style: normal; }
.teacher__name span { font-weight: 500; }

.teacher__intro {
  margin: 0 0 clamp(1.4rem, 3.5vw, 2rem);
  max-width: 46ch;
  color: var(--ink-soft);
}

.creds { margin: 0; }
.creds__row {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-top: 1px solid oklch(60.5% 0.124 66 / 0.34);
}
.creds__row:last-child { border-bottom: 1px solid oklch(60.5% 0.124 66 / 0.34); }
.creds dt {
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: var(--t-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding-top: 0;
}
.creds dd { margin: 0; font-size: var(--t-base); line-height: 1.45; }
.creds dd b { font-weight: 700; }
.creds sup { font-size: 0.62em; vertical-align: 0.45em; }

@media (max-width: 52rem) {
  .lineage__grid { grid-template-columns: 1fr; }
  .teacher__grid { grid-template-columns: 1fr; }
  .teacher__portrait { max-width: 22rem; }
}

@media (max-width: 34rem) {
  .creds__row { grid-template-columns: 1fr; gap: 0.15rem; }
  .creds dt { padding-top: 0; }
}

/* ============================================================
   ADAPTATIONS
   ============================================================ */

/* Sur téléphone, le tigre reste présent mais s'efface vers la zone de texte. */
@media (max-width: 44rem) {
  .hero {
    min-height: 35rem;
    padding-top: 1.75rem;
  }
  .hero__tiger {
    top: 0.4rem;
    right: -6.25rem;
    width: 22rem;
    opacity: 0.42;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 31%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 31%, #000 100%);
  }
  .hero__eyebrow {
    max-width: 23ch;
    font-size: 0.82rem;
  }
  .hero__title { max-width: 18rem; }
  .hero__karate { font-size: clamp(3.75rem, 18vw, 4.65rem); }
  .hero__place {
    font-size: clamp(2rem, 9.8vw, 2.65rem);
    margin-left: 1.7rem;
  }
  .hero__rule { margin-left: 1.8rem; width: 8.8rem; }
  .hero__cta {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
    width: 100%;
  }
  .brush {
    margin-left: 1.35rem;
    max-width: calc(100vw - 3.9rem);
  }
  .hero__call { margin-left: 1.35rem; }
  .hero__scroll { margin-top: 1.6rem; }
}

@media (max-width: 30rem) {
  .fact { align-items: flex-start; }
  .fact__icon { margin-top: 0.1rem; }
  .teacher__belt { margin-inline: auto; }
}

@media (max-width: 22rem) {
  .subnav ul {
    padding-inline: var(--space-sm);
    gap: var(--space-xs);
  }
  .subnav li:last-child { padding-right: var(--space-sm); }
  .subnav a { letter-spacing: 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;
  }
  .reveal { opacity: 1; transform: none; }
  .sticky-call { transition: none; }
}

@media print {
  body::before, body::after, .sticky-call, .skip { display: none; }
  .essai__inner { background: none; color: var(--ink); }
  .essai__h, .essai__lead, .essai__contact, .essai__contact small { color: var(--ink); }
  .essai__trial { color: var(--gold-text); transform: none; }
  .reveal { opacity: 1; transform: none; }
}