/* =========================================================================
   ACB JUDO — Design System
   Minimalisme japonais · blanc dominant · encre sumi · rouge hinomaru
   ========================================================================= */

/* ---- Fonts (auto-hébergées : sous-ensemble latin ; les kanji passent en fallback système JP) ---- */
@font-face{font-family:'Shippori Mincho';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/shippori-mincho-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Shippori Mincho';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/shippori-mincho-600.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Shippori Mincho';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/shippori-mincho-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Shippori Mincho';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/shippori-mincho-800.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Zen Kaku Gothic New';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/zen-kaku-gothic-new-300.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Zen Kaku Gothic New';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/zen-kaku-gothic-new-400.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Zen Kaku Gothic New';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/zen-kaku-gothic-new-500.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Zen Kaku Gothic New';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/zen-kaku-gothic-new-700.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ---- Tokens ---- */
:root{
  /* ink / paper */
  --paper:        #f4ecdf;   /* crème chaud, fond dominant */
  --paper-hi:     #f6f4ed;   /* crème clair — header collant & status bar (forehead iOS) */
  --paper-pure:   #fffdf8;
  --paper-deep:   #ece1ce;   /* panneaux discrets */
  --ink:          #21243d;   /* encre bleu-nuit, texte & titres */
  --ink-2:        #4c5068;   /* texte secondaire */
  --ink-3:        #888ca0;   /* tertiaire / légendes */
  --line:         #e7dece;   /* filets */
  --line-soft:    #f0e8da;

  /* accent — ambre / or (façon kintsugi) */
  --red:          #cf8f2e;
  --red-deep:     #ab7220;
  --red-wash:     #f4e7cf;

  /* bleu ACB pour les sections sombres */
  --night:        #1b2472;
  --night-2:      #232c82;
  --night-deep:   #121852;   /* indigo profond du voile hero & status bar accueil */
  --logo-navy:    #121c64;   /* marine du logo — fond du footer (raccord parfait) */

  /* type */
  --serif: 'Shippori Mincho', 'Hiragino Mincho ProN', 'Yu Mincho', 'Noto Serif JP', Georgia, serif;
  --sans:  'Zen Kaku Gothic New', system-ui, -apple-system, 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
  --mono:  ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

  /* rhythm */
  --maxw: 1240px;
  --gut: clamp(20px, 5vw, 64px);
  --section-y: clamp(72px, 11vw, 160px);

  --ease: cubic-bezier(.22,.61,.36,1);
  --bounce: cubic-bezier(.34,1.56,.64,1);
  --r-sm:10px; --r:16px; --r-lg:26px;
  --gold:#c98a2e; --gold-deep:#a86f1e; --gold-wash:#f4e8d4;
}

/* ---- Reset ---- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
h1,h2,h3,h4{ margin:0; font-family:var(--serif); font-weight:600; line-height:1.08; letter-spacing:-.01em; }
p{ margin:0; text-wrap:pretty; }
::selection{ background:var(--red); color:#fff; }

/* ---- Layout helpers ---- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); }
.wrap-wide{ max-width:1480px; margin:0 auto; padding-inline:var(--gut); }
.section{ padding-block:var(--section-y); }
.grid{ display:grid; gap:clamp(20px,3vw,40px); }
.flow > * + *{ margin-top:1.1em; }
.center{ text-align:center; }

/* ---- Type scale ---- */
.display{ font-size:clamp(2.6rem,6vw,5.3rem); font-weight:600; line-height:1.04; letter-spacing:-.02em; }
.h1{ font-size:clamp(2rem,4.6vw,3.6rem); }
.h2{ font-size:clamp(1.7rem,3.4vw,2.7rem); }
.h3{ font-size:clamp(1.25rem,2vw,1.6rem); }
.lead{ font-size:clamp(1.05rem,1.5vw,1.3rem); line-height:1.6; color:var(--ink-2); }
.small{ font-size:.85rem; }
.muted{ color:var(--ink-3); }

/* section label : « 01 — Intitulé » + filet rouge */
.label{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--mono); font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-3); font-weight:500;
}
.label .num{ color:var(--red); }
.label::before{ content:""; width:26px; height:1px; background:var(--red); display:inline-block; }

.kanji{ font-family:var(--serif); }

/* ---- Buttons ---- */
.btn{
  --bg:var(--ink); --fg:#fff; --bd:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:.92em 1.7em; min-height:52px;
  font-family:var(--sans); font-weight:500; font-size:.95rem; letter-spacing:.01em;
  background:var(--bg); color:var(--fg); border:1px solid var(--bd);
  border-radius:100px; cursor:pointer; position:relative; overflow:hidden;
  transition:background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .2s var(--ease);
}
.btn .arw{ transition:transform .35s var(--ease); }
.btn:hover .arw{ transform:translateX(4px); }
.btn:active{ transform:translateY(1px); }
.btn:hover{ transform:translateY(-2px); }
.btn-gold{ --bg:var(--gold); --fg:var(--night); --bd:var(--gold); }
.btn-gold:hover{ --bg:var(--gold-deep); --bd:var(--gold-deep); }
.btn-red{ --bg:var(--red); --fg:var(--night); --bd:var(--red); }
.btn-red:hover{ --bg:var(--red-deep); --bd:var(--red-deep); }
.btn-dark:hover{ --bg:#000; --bd:#000; }
.btn-ghost{ --bg:transparent; --fg:var(--ink); --bd:var(--line); }
.btn-ghost:hover{ --bg:var(--ink); --fg:#fff; --bd:var(--ink); }
.btn-sm{ min-height:44px; padding:.6em 1.1em; font-size:.85rem; }

/* text link with red underline grow */
.tlink{
  display:inline-flex; align-items:center; gap:.5em;
  font-weight:500; position:relative; padding-bottom:2px;
}
.tlink::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); }
.tlink:hover::after{ transform:scaleX(1); }
.tlink .arw{ color:var(--red); transition:transform .35s var(--ease); }
.tlink:hover .arw{ transform:translateX(4px); }

/* ============================ HEADER / NAV ============================ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:calc(18px + env(safe-area-inset-top, 0px)) calc(var(--gut) + env(safe-area-inset-right, 0px)) 18px calc(var(--gut) + env(safe-area-inset-left, 0px));
  transition:background .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease);
}
.site-header.solid{
  background:var(--paper-hi);
  box-shadow:0 1px 0 var(--line);
  padding-top:calc(12px + env(safe-area-inset-top, 0px)); padding-bottom:12px;
}
.brand{ display:flex; align-items:center; gap:12px; z-index:2; }
.brand svg{ display:block; }
.nav{ display:flex; align-items:center; gap:clamp(14px,2vw,30px); }
.nav a.navlink{
  font-size:.92rem; font-weight:500; color:var(--ink-2); position:relative; padding:6px 2px; white-space:nowrap;
  transition:color .3s var(--ease);
}
.nav a.navlink::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--red); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease); }
.nav a.navlink:hover{ color:var(--ink); }
.nav a.navlink:hover::after,.nav a.navlink.active::after{ transform:scaleX(1); }
.nav a.navlink.active{ color:var(--ink); }

.nav-cta{ margin-left:6px; }
.burger{ display:none; width:46px; height:46px; border:1px solid var(--line); background:var(--paper-pure);
  align-items:center; justify-content:center; cursor:pointer; }
.burger span{ display:block; width:20px; height:1.5px; background:var(--ink); position:relative; }
.burger span::before,.burger span::after{ content:""; position:absolute; left:0; width:20px; height:1.5px; background:var(--ink);
  transition:transform .3s var(--ease), top .3s var(--ease); }
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }

/* mobile overlay menu */
.mobile-menu{
  position:fixed; inset:0; z-index:55; background:var(--paper);
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--gut) + env(safe-area-inset-top, 0px)) calc(var(--gut) + env(safe-area-inset-right, 0px)) calc(var(--gut) + env(safe-area-inset-bottom, 0px)) calc(var(--gut) + env(safe-area-inset-left, 0px));
  transform:translateY(-100%); transition:transform .5s var(--ease); visibility:hidden;
}
.mobile-menu.open{ transform:translateY(0); visibility:visible; }
.mobile-menu a{ font-family:var(--serif); font-size:clamp(1.8rem,8vw,2.6rem); color:var(--ink);
  padding:.18em 0; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }
.mobile-menu a .idx{ font-family:var(--mono); font-size:.8rem; color:var(--ink-3); }
.mobile-menu a:hover{ color:var(--red); }

/* ============================ HERO ============================ */
.hero{ position:relative; min-height:100svh; display:flex; align-items:center; padding-top:clamp(110px,15vh,150px); padding-bottom:clamp(64px,9vh,104px); overflow:hidden; }
.hero-watermark{
  position:absolute; right:-2%; top:8%; font-family:var(--serif); font-weight:700;
  font-size:min(46vw,720px); line-height:.8; color:var(--ink); opacity:.05; pointer-events:none; user-select:none;
  letter-spacing:-.05em; opacity:.04;
}
.eyebrow-jp{ font-family:var(--serif); color:var(--red); letter-spacing:.1em; }

/* ============================ STATS BAND ============================ */
.stats{ display:grid; grid-template-columns:repeat(4,1fr); border-block:1px solid var(--line); }
.stat{ padding:clamp(22px,3vw,40px) clamp(14px,2vw,28px); border-right:1px solid var(--line); }
.stat:last-child{ border-right:0; }
.stat .v{ font-family:var(--serif); font-size:clamp(1.5rem,2.6vw,2.3rem); font-weight:600; line-height:1; }
.stat .v .u{ color:var(--red); }
.stat .k{ margin-top:.5em; font-size:.82rem; color:var(--ink-3); letter-spacing:.02em; }

/* ============================ CARDS — COURS ============================ */
.cours-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line); }
.card-cours{
  position:relative; padding:clamp(24px,2.4vw,38px); border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  background:var(--paper); transition:background .4s var(--ease); min-height:240px; display:flex; flex-direction:column;
}
.card-cours:hover{ background:var(--paper-pure); }
.card-cours .cnum{ font-family:var(--mono); font-size:.74rem; color:var(--ink-3); letter-spacing:.18em; }
.card-cours h3{ margin-top:auto; font-size:1.5rem; }
.card-cours .age{ margin-top:.5em; font-family:var(--mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--red); }
.card-cours .desc{ margin-top:.9em; font-size:.92rem; color:var(--ink-2); }
.card-cours .corner{ position:absolute; top:clamp(24px,2.4vw,38px); right:clamp(24px,2.4vw,38px); width:8px; height:8px; background:var(--red); opacity:0; transform:scale(.4); transition:.4s var(--ease); }
.card-cours:hover .corner{ opacity:1; transform:scale(1); }

/* ============================ CARDS — PROF ============================ */
.profs{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2vw,28px); }
.card-prof figure{ margin:0; }
.card-prof .ph{ aspect-ratio:3/4; }
.card-prof h3{ margin-top:1em; font-size:1.15rem; }
.card-prof .role{ margin-top:.2em; font-size:.85rem; color:var(--ink-3); }
.card-prof .grade{ display:inline-block; margin-top:.5em; font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--red); }

/* ============================ PLACEHOLDER IMAGE ============================ */
.ph{
  position:relative; width:100%; border-radius:var(--r); background:
    repeating-linear-gradient(135deg, #e9e5dd 0 2px, transparent 2px 11px), var(--paper-deep);
  display:flex; align-items:center; justify-content:center; overflow:hidden; color:var(--ink-3);
  border:1px solid var(--line);
}
.ph::after{ content:attr(data-label); font-family:var(--mono); font-size:.7rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); text-align:center; padding:1em; max-width:80%; }
.ph .tick{ position:absolute; top:10px; left:10px; width:7px; height:7px; background:var(--red); }
.ph.dark{ background:repeating-linear-gradient(135deg,#232c82 0 2px,transparent 2px 11px), var(--night); color:#6b675f; border-color:#2b3486; }

/* ============================ INSCRIPTION (dark) ============================ */
.band-dark{ background:var(--night); color:#efece6; }
.band-dark .label{ color:#9b968c; }
.band-dark h2{ color:#fff; }
.band-dark .lead{ color:#bdb8ac; }
.pieces{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#2b3486; border:1px solid #2b3486; }
.pieces .pc{ background:var(--night); padding:clamp(20px,2.4vw,32px); }
.pieces .pc .pn{ font-family:var(--mono); color:var(--red); font-size:.8rem; }
.pieces .pc h4{ font-family:var(--serif); font-size:1.15rem; margin-top:.6em; color:#fff; }
.pieces .pc p{ margin-top:.4em; color:#a8a399; font-size:.9rem; }

/* ============================ ENSŌ / MOTIFS ============================ */
.enso{ display:inline-block; }
.brush{ height:14px; }

/* code moral list */
.moral{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); border-top:1px solid var(--line); }
.moral .m{ padding:clamp(22px,2.5vw,36px) 8px; border-bottom:1px solid var(--line); border-right:1px solid var(--line); text-align:center; transition:background .4s var(--ease); }
.moral .m:hover{ background:var(--paper-pure); }
.moral .m .jp{ font-family:var(--serif); font-size:1.7rem; color:var(--red); }
.moral .m .fr{ margin-top:.5em; font-size:.92rem; font-weight:500; }

/* ============================ FOOTER ============================ */
.site-footer{ background:var(--night); color:#cfcabf; padding-top:clamp(56px,7vw,96px); }
.footer-logo{ display:block; width:min(290px,82%); height:auto; margin-bottom:1.3em; }
.site-footer a{ color:#cfcabf; }
.site-footer a:hover{ color:#fff; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:clamp(28px,4vw,56px); padding-bottom:clamp(40px,5vw,72px); border-bottom:1px solid #2b3486; }
.footer-col h4{ font-family:var(--mono); font-weight:500; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:#7d7a72; }
.footer-col ul{ list-style:none; margin:1.2em 0 0; padding:0; display:flex; flex-direction:column; gap:.7em; font-size:.92rem; }
.footer-col address{ font-style:normal; font-size:.9rem; line-height:1.7; color:#a8a399; margin-top:1.2em; }
.footer-brand .kx{ font-family:var(--serif); font-size:2.6rem; color:#fff; line-height:1; }
.footer-brand p{ margin-top:1em; color:#a8a399; font-size:.92rem; max-width:30ch; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; padding-block:24px; font-size:.78rem; color:#7d7a72; }
.footer-bottom .ffj{ font-family:var(--mono); letter-spacing:.1em; }

/* ============================ SCROLL REVEAL ============================ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
/* safety: snaps content visible in environments where CSS transitions are frozen (offscreen iframes) */
.reveal.shown{ opacity:1 !important; transform:none !important; transition:none !important; }
.reveal.d1{ transition-delay:.08s; } .reveal.d2{ transition-delay:.16s; } .reveal.d3{ transition-delay:.24s; } .reveal.d4{ transition-delay:.32s; }
@media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } html{ scroll-behavior:auto; } }

/* ============================ SUBPAGE HEADER ============================ */
.page-hero{ padding-top:clamp(118px,16vh,180px); padding-bottom:clamp(34px,5vw,64px); position:relative; }
.page-hero .ttl{ font-size:clamp(2.2rem,5.4vw,4.1rem); margin-top:.34em; max-width:16ch; }
.page-hero .intro{ margin-top:1.1em; max-width:52ch; }
.page-hero.with-line{ border-bottom:1px solid var(--line); }
/* shared textured brush underline (used on page titles) */
.brush-word{ position:relative; white-space:nowrap; }
.ttl .ubrush{ position:absolute; left:-4%; bottom:-.2em; width:108%; height:.42em; pointer-events:none; display:block; }

/* ============================ TARIF CARDS ============================ */
.tarifs{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.tcard{ padding:clamp(26px,2.6vw,40px); border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; position:relative; transition:background .4s var(--ease); }
.tcard:hover{ background:var(--paper-pure); }
.tcard .tname{ font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--red); }
.tcard .tage{ font-family:var(--serif); font-size:1.35rem; font-weight:600; margin-top:.5em; }
.tcard .tprice{ font-family:var(--serif); font-size:clamp(2.4rem,3.6vw,3.3rem); font-weight:600; line-height:1; margin-top:.55em; }
.tcard .tprice .cur{ color:var(--red); font-size:.42em; vertical-align:super; margin-left:.1em; }
.tcard .tper{ margin-top:.7em; font-size:.82rem; color:var(--ink-3); }

/* ============================ STEPS ============================ */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px); counter-reset:step; }
.step{ border-top:2px solid var(--ink); padding-top:1.1em; }
.step .sn{ font-family:var(--mono); font-size:.78rem; letter-spacing:.14em; color:var(--red); }
.step h4{ font-family:var(--serif); font-size:1.25rem; margin-top:.5em; }
.step p{ margin-top:.5em; color:var(--ink-2); font-size:.95rem; }

/* ============================ GALLERY ============================ */
.gallery{ columns:3; column-gap:clamp(14px,1.6vw,22px); }
.gallery .gitem{ break-inside:avoid; margin-bottom:clamp(14px,1.6vw,22px); }
.gallery .gitem .ph{ width:100%; }
.gallery .gitem figcaption{ margin-top:.5em; font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
@media (max-width:860px){ .gallery{ columns:2; } .steps{ grid-template-columns:1fr; gap:24px; } .tarifs{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .gallery{ columns:1; } .tarifs{ grid-template-columns:1fr; } }

/* ============================ NEWS ============================ */
.news{ border-top:1px solid var(--line); }
.news-item{ display:grid; grid-template-columns:140px 1fr auto; gap:clamp(16px,3vw,40px); align-items:baseline; padding:clamp(22px,3vw,34px) 0; border-bottom:1px solid var(--line); transition:padding-left .35s var(--ease); }
.news-item:hover{ padding-left:10px; }
.news-item .nd{ font-family:var(--mono); font-size:.76rem; letter-spacing:.06em; color:var(--ink-3); }
.news-item h3{ font-size:1.35rem; }
.news-item .nx{ margin-top:.4em; color:var(--ink-2); font-size:.95rem; max-width:54ch; }
.news-item .ntag{ font-family:var(--mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--red); white-space:nowrap; }
@media (max-width:680px){ .news-item{ grid-template-columns:1fr; gap:.6em; } }

/* ============================ CONTACT ============================ */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,72px); }
.field{ display:flex; flex-direction:column; gap:.5em; margin-bottom:1.1em; }
.field label{ font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.field input,.field textarea{ font-family:var(--sans); font-size:1rem; color:var(--ink); background:var(--paper-pure); border:1px solid var(--line); padding:.8em 1em; border-radius:12px; transition:border-color .25s var(--ease); }
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--red); }
.field textarea{ resize:vertical; min-height:130px; }
.form-ok{ background:var(--red-wash); border:1px solid var(--red); color:var(--red-deep); padding:1em 1.2em; font-size:.95rem; }
.place-item{ padding:clamp(20px,2.4vw,30px) 0; border-bottom:1px solid var(--line); }
.place-item:first-child{ border-top:1px solid var(--line); }
.place-item h4{ font-family:var(--serif); font-size:1.2rem; display:flex; align-items:center; gap:10px; }
.place-item address{ font-style:normal; color:var(--ink-2); font-size:.95rem; margin-top:.4em; line-height:1.6; }
@media (max-width:760px){ .contact-grid{ grid-template-columns:1fr; } }

/* ============================ UTIL ============================ */
.hr{ height:1px; background:var(--line); border:0; }
.tag{ display:inline-flex; align-items:center; gap:.4em; font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); border:1px solid var(--line); padding:.5em .9em; border-radius:100px; }
.pill{ display:inline-block; padding:.4em .9em; font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; border:1px solid var(--line); color:var(--ink-2); border-radius:100px; }

/* ============================ LOGO LOCKUP ============================ */
.brand{ --logo-ink:var(--ink); }
.brand .logo-mark{ width:40px; height:40px; flex:0 0 auto; }
.brand .logo-mark svg{ width:100%; height:100%; }
.brand .logo-word{ display:flex; flex-direction:column; line-height:.92; }
.brand .lw-1{ font-family:var(--serif); font-weight:700; font-size:1.18rem; letter-spacing:.02em; color:var(--logo-ink); }
.brand .lw-2{ display:flex; align-items:center; gap:.28em; font-family:var(--mono); font-size:.6rem; letter-spacing:.42em; text-transform:uppercase; color:var(--logo-ink); margin-top:2px; }
.brand .lw-2 .dot{ width:4px; height:4px; background:var(--red); border-radius:50%; }
/* dark hero: transparent header gets a light treatment */
body[data-hero-dark] .site-header:not(.solid) .brand.on-hero{ --logo-ink:#fff; }
body[data-hero-dark] .site-header:not(.solid) .brand.on-hero .lw-2{ color:#e7e3da; }
body[data-hero-dark] .site-header:not(.solid) .nav a.navlink{ color:rgba(255,255,255,.82); }
body[data-hero-dark] .site-header:not(.solid) .nav a.navlink:hover,
body[data-hero-dark] .site-header:not(.solid) .nav a.navlink.active{ color:#fff; }
body[data-hero-dark] .site-header:not(.solid) .burger{ background:transparent; border-color:rgba(255,255,255,.45); }
body[data-hero-dark] .site-header:not(.solid) .burger span,
body[data-hero-dark] .site-header:not(.solid) .burger span::before,
body[data-hero-dark] .site-header:not(.solid) .burger span::after{ background:#fff; }

/* ============================ RESPONSIVE ============================ */
@media (max-width:1024px){
  .footer-top{ grid-template-columns:1fr 1fr; }
  .cours-grid{ grid-template-columns:repeat(2,1fr); }
  .profs{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:760px){
  body{ font-size:16px; }
  .nav{ display:none; }
  .nav-cta.desktop{ display:none; }
  .burger{ display:flex; }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(2){ border-right:0; } .stat:nth-child(1),.stat:nth-child(2){ border-bottom:1px solid var(--line); }
  .cours-grid{ grid-template-columns:1fr; }
  .profs{ grid-template-columns:repeat(2,1fr); }
  .pieces{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .footer-brand{ grid-column:1/-1; }
}
@media (max-width:460px){
  .profs{ grid-template-columns:1fr; }
  .footer-top{ grid-template-columns:1fr; }
}