/* ═══════════════════════════════════════════════════════════
   Golf with Pinta
   Design system extracted from the Claude Design handoff
   ═══════════════════════════════════════════════════════════ */

:root{
  --turf:#0F2419;--turf-2:#16311F;--turf-3:#1E4028;--fairway:#2F5E3A;
  --sand:#E7DCC6;--sand-2:#DCCFB4;--sand-3:#CFC0A0;--chalk:#F8F5ED;
  --flag:#C2402F;--flag-2:#A83526;
  --ink:#12211A;--ink-2:#3E4F44;--ink-3:#6B7A70;
  --on-turf:#F1EDE1;--on-turf-2:rgba(241,237,225,.62);--on-turf-3:rgba(241,237,225,.34);
  --rule:rgba(18,33,26,.16);--rule-2:rgba(18,33,26,.08);--rule-turf:rgba(241,237,225,.14);
  --display:'Lora',Georgia,'Times New Roman',serif;
  --ui:'Archivo',-apple-system,system-ui,sans-serif;
  --num:'Space Mono',ui-monospace,monospace;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:120px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--sand);color:var(--ink);font-family:var(--ui);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
a:hover{color:var(--flag)}
img{max-width:100%;display:block}
::selection{background:var(--flag);color:var(--chalk)}
::-webkit-scrollbar{width:12px}
::-webkit-scrollbar-track{background:var(--sand-2)}
::-webkit-scrollbar-thumb{background:var(--turf-3);border:3px solid var(--sand-2);border-radius:8px;background-clip:padding-box}

/* keyboard focus — the prototype had none; a real site needs it */
:focus-visible{outline:2px solid var(--flag);outline-offset:3px}
.on-turf-focus :focus-visible,.hero :focus-visible,.sheet :focus-visible,footer :focus-visible{outline-color:var(--sand-3)}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--flag);color:var(--chalk);
  padding:14px 22px;font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.skip:focus{left:0;color:var(--chalk)}

.wrap{max-width:1280px;margin:0 auto;padding:0 44px}
.pad{padding:104px 0}
.num{font-family:var(--num);font-variant-numeric:tabular-nums}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* labels — section eyebrows */
.label{display:flex;align-items:baseline;font-family:var(--ui);font-size:10.5px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-3)}
.label.on-turf{color:var(--on-turf-3)}

h1,h2,h3,h4{font-family:var(--display);font-weight:500;margin:0;letter-spacing:-.012em}
h2{font-size:clamp(33px,4.1vw,54px);line-height:1.08}
.h-sub{font-size:16.5px;line-height:1.62;color:var(--ink-2);max-width:56ch;margin:20px 0 0}

/* buttons — squared, signage-like */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;font-family:var(--ui);font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;padding:16px 26px;border:none;cursor:pointer;border-radius:2px;transition:background .18s,color .18s,box-shadow .18s;text-align:center}
.btn svg{width:14px;height:14px;flex-shrink:0}
.btn-flag{background:var(--flag);color:var(--chalk)}
.btn-flag:hover{background:var(--flag-2);color:var(--chalk)}
.btn-turf{background:var(--turf);color:var(--on-turf)}
.btn-turf:hover{background:var(--turf-3);color:var(--on-turf)}
.btn-line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--rule)}
.btn-line:hover{background:var(--ink);color:var(--sand);box-shadow:none}
.btn-line-turf{background:transparent;color:var(--on-turf);box-shadow:inset 0 0 0 1px var(--rule-turf)}
.btn-line-turf:hover{background:var(--on-turf);color:var(--turf);box-shadow:none}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* topographic contour backdrop */
.topo{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.topo svg{position:absolute;width:140%;height:140%;top:-20%;left:-20%}

/* crop marks — printed-card feel */
.tick{position:absolute;width:9px;height:9px;border-color:var(--rule);border-style:solid;border-width:0}
.tick.tl{top:0;left:0;border-top-width:1px;border-left-width:1px}
.tick.tr{top:0;right:0;border-top-width:1px;border-right-width:1px}
.tick.bl{bottom:0;left:0;border-bottom-width:1px;border-left-width:1px}
.tick.br{bottom:0;right:0;border-bottom-width:1px;border-right-width:1px}

/* ══ photo frames (replaces the prototype's <image-slot>) ══
   A styled on-brand placeholder shows until a real photo is dropped into
   assets/images/. See assets/images/README.md for filenames. */
.photo{margin:0;position:relative;overflow:hidden;background:var(--turf-2);display:block}
.photo::before{content:'';position:absolute;inset:0;
  background-image:
    radial-gradient(120% 90% at 20% 0%,rgba(47,94,58,.55) 0%,transparent 62%),
    repeating-linear-gradient(114deg,rgba(241,237,225,.05) 0 1px,transparent 1px 22px),
    repeating-linear-gradient(66deg,rgba(241,237,225,.035) 0 1px,transparent 1px 34px)}
.photo::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 0 1px var(--rule-turf)}
.photo .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:22px;text-align:center}
.photo .ph svg{opacity:.5}
.photo .ph span{font-family:var(--num);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-turf-3);line-height:1.7;max-width:26ch}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.photo.sand{background:var(--sand-2)}
.photo.sand::before{background-image:
    radial-gradient(120% 90% at 20% 0%,rgba(207,192,160,.7) 0%,transparent 62%),
    repeating-linear-gradient(114deg,rgba(18,33,26,.05) 0 1px,transparent 1px 22px),
    repeating-linear-gradient(66deg,rgba(18,33,26,.035) 0 1px,transparent 1px 34px)}
.photo.sand::after{box-shadow:inset 0 0 0 1px var(--rule)}
.photo.sand .ph span{color:var(--ink-3)}
.photo.sand .ph svg{color:var(--ink-3)}

/* ══ conditions strip ══ */
.cond{background:var(--turf);color:var(--on-turf-2);font-family:var(--num);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--rule-turf);position:fixed;top:0;left:0;right:0;z-index:101}
.cond-in{max-width:1280px;margin:0 auto;padding:9px 44px;display:flex;gap:30px;align-items:center;flex-wrap:wrap}
.cond i{color:var(--sand-3);font-style:normal}
.cond .sp{margin-left:auto}

/* ══ nav ══
   --cond-h is measured from the conditions strip by main.js. The prototype
   hard-coded 33px, which the strip outgrows when it wraps on narrow screens —
   that pushed the strip over the nav and made the burger unclickable. */
header.nav{position:fixed;top:var(--cond-h,33px);left:0;right:0;z-index:102;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
header.nav.on{background:rgba(15,36,25,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom-color:var(--rule-turf)}
.nav-in{max-width:1280px;margin:0 auto;padding:20px 44px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:flex;align-items:center;gap:13px}
.brand:hover{color:inherit}
/* the lockup is a transparent PNG of the wordmark — white + green artwork
   keyed off its black plate, so it sits straight on the turf with no box */
.brand .logo{height:40px;width:auto;display:block;flex-shrink:0}
.nav-links{display:flex;gap:34px}
.nav-links a{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--on-turf-2);padding:5px 0;position:relative;transition:color .18s}
.nav-links a:hover{color:var(--on-turf)}
.nav-links a.act{color:var(--sand-3)}
.nav-links a.act::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--flag)}

/* burger + mobile drawer — the prototype simply hid the nav on small screens */
.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;color:var(--on-turf);padding:0}
.burger span{display:block;width:20px;height:1.5px;background:currentColor;position:relative;transition:transform .22s,background .22s}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:20px;height:1.5px;background:currentColor;transition:transform .22s,top .22s}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
.drawer{display:none;position:fixed;inset:0;z-index:99;background:var(--turf);
  padding:150px 22px calc(40px + env(safe-area-inset-bottom));flex-direction:column;gap:2px;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.drawer.open{display:flex}
.drawer a{font-family:var(--display);font-size:28px;color:var(--on-turf);padding:16px 0;border-bottom:1px solid var(--rule-turf)}
.drawer a:hover{color:var(--sand-3)}
/* the link rule above out-specifies .btn — restore the button's own scale */
.drawer a.btn{font-family:var(--ui);font-size:11.5px;padding:18px 26px;border-bottom:none;margin-top:28px}
body.locked{overflow:hidden}

/* ══ hero ══ */
.hero{position:relative;background:var(--turf);color:var(--on-turf);
  padding:calc(var(--cond-h,33px) + 150px) 0 150px;overflow:hidden}
.hero-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none;
  background:var(--turf) url(video/hero-poster.jpg) center/cover no-repeat}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
/* darkening scrim: turf-tinted wash + a heavier gradient behind the copy */
.hero-scrim{position:absolute;inset:0;
  background:
    linear-gradient(to bottom,rgba(15,36,25,.55) 0%,rgba(15,36,25,.62) 55%,rgba(15,36,25,.86) 100%),
    linear-gradient(to right,rgba(15,36,25,.72) 0%,rgba(15,36,25,.44) 62%,rgba(15,36,25,.34) 100%)}
@media (prefers-reduced-motion:reduce){.hero-video{display:none}}
.hero-in{position:relative;z-index:2;max-width:1280px;margin:0 auto;padding:0 44px;display:grid;grid-template-columns:1.12fr .88fr;gap:0}
.hero-copy{padding-right:56px;align-self:center}
.hero h1{font-size:clamp(41px,5.6vw,78px);line-height:1.03;letter-spacing:-.022em;margin:26px 0 0;color:var(--on-turf)}
.hero h1 em{font-style:italic;color:var(--sand-3)}
.hero .lede{font-size:17px;line-height:1.62;color:var(--on-turf-2);max-width:46ch;margin:28px 0 0}
/* les trois portes d'entrée du site remplacent la paire de boutons : une
   rangée par offre, libellé et ligne d'explication à gauche, l'accès à droite.
   Celle de l'académie porte une entrée par ville ouverte. */
.hero-cta{display:flex;flex-direction:column;gap:8px;margin:36px 0 0;max-width:540px}
.hcta{display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:14px 18px;border-radius:3px;background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px var(--rule-turf);color:var(--on-turf);text-decoration:none;
  transition:background .18s,box-shadow .18s}
a.hcta:hover,a.hcta:focus-visible{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px var(--sand-3)}
.hcta-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.hcta-t{font-family:var(--ui);font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;line-height:1.3}
.hcta-d{font-size:13px;line-height:1.4;color:var(--on-turf-2)}
.hcta-go{width:15px;height:15px;flex-shrink:0;color:var(--sand-3);transition:transform .18s}
a.hcta:hover .hcta-go{transform:translateX(3px)}
.hcta-cities{display:flex;gap:7px;flex-shrink:0}
.hcta-cities a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 13px;border-radius:2px;
  background:var(--flag);color:var(--chalk);text-decoration:none;font-family:var(--ui);font-size:10px;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;transition:background .18s}
.hcta-cities a:hover,.hcta-cities a:focus-visible{background:var(--flag-2)}
.hcta-cities svg{width:12px;height:12px;flex-shrink:0}
.plates{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:56px 0 0;
  border-top:1px solid var(--rule-turf);max-width:460px}
.plate{padding:20px 18px 0;border-right:1px solid var(--rule-turf);text-align:center}
.plate:last-child{border-right:none}
.plate .v{font-family:var(--num);font-size:30px;font-weight:700;color:var(--sand-3);line-height:1}
.plate .k{font-family:var(--ui);font-size:9.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--on-turf-3);margin-top:9px}
/* la photo garde ses propres proportions (540×590) : étirée sur toute la
   hauteur de la colonne de texte, elle devenait une bande étroite qui coupait
   le coach. La colonne la centre face au texte. */
.hero-vis{position:relative;border-left:1px solid var(--rule-turf);padding:0 0 0 44px;display:flex;flex-direction:column;justify-content:center}
.hero-vis .photo{width:100%;aspect-ratio:540/590}
.hero-plate{border-top:1px solid var(--rule-turf);display:grid;grid-template-columns:repeat(3,1fr);align-items:stretch;gap:0}
.hero-plate div{padding:16px 10px;border-right:1px solid var(--rule-turf);display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;font-family:var(--num);font-size:clamp(9px,1.05vw,11px);letter-spacing:.06em;text-transform:uppercase;color:var(--on-turf-2)}
.hero-plate div:last-child{border-right:none}
.hero-plate b{color:var(--sand-3);font-weight:700}

/* ══ à propos ══ */
.about{background:var(--sand);position:relative}
.about-in{display:grid;grid-template-columns:.82fr 1.18fr;gap:0}
.about-vis{position:relative;padding-right:52px}
.about-vis .photo{width:100%;height:540px}
.about-vis .sig{margin-top:0;border-top:1px solid var(--rule);padding:18px 0 0;display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.about-vis .sig .n{font-family:var(--display);font-size:24px;line-height:1}
.about-vis .sig .t{font-family:var(--ui);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);text-align:right}
.about-txt{border-left:1px solid var(--rule);padding-left:52px}
.about-txt p{font-size:15.5px;line-height:1.72;color:var(--ink-2);margin:0 0 18px;max-width:58ch}
.about-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.about-txt p.about-lead{font-family:var(--display);font-size:clamp(21px,2.1vw,27px);line-height:1.5;margin:24px 0 22px;color:var(--ink);max-width:none}
.about-txt p.about-lead::first-letter{initial-letter:2;-webkit-initial-letter:2;color:var(--flag);font-weight:500;margin-right:10px}
.feat{margin:34px 0 34px}
.feat-row{display:grid;grid-template-columns:34px 1fr;gap:20px;padding:18px 0;border-top:1px solid var(--rule-2)}
.feat-row:last-child{border-bottom:1px solid var(--rule-2)}
.feat-row .n{font-family:var(--num);font-size:11px;font-weight:700;color:var(--flag);padding-top:5px}
.feat-row h4{font-size:21px;line-height:1.2}
.feat-row p{font-size:13.5px;line-height:1.55;color:var(--ink-3);margin:5px 0 0;max-width:52ch}

/* ══ scorecard ══ */
.score{background:var(--chalk);position:relative}
.card-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-bottom:44px}
/* deux actions côte à côte sans que space-between ne les écarte */
.card-head-cta{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* ══ course logo strip ══
   The four partner marks sit between the section heading and the scorecard,
   in the same order as the rows below. They are drawn in their own black and
   tartan, so they get generous air and hairline rules rather than any tint. */
.crs-logos{list-style:none;margin:0 0 44px;padding:16px 0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:2px 14px;align-items:center;
  border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2)}
.crs-logos li{display:flex;min-width:0}
/* Each mark links to that course's own site, like the arrow on its scorecard
   row below. The hover fill is the same #fff the scorecard rows use, so the
   two read as one behaviour. */
.crs-logo{display:flex;align-items:center;justify-content:center;width:100%;
  padding:14px 10px;transition:background .18s}
.crs-logo:hover{background:#fff}
.crs-logos img{width:100%;max-width:250px;height:auto;display:block}

.sc{border:1px solid var(--rule);background:var(--sand);position:relative}
.sc-top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 22px;border-bottom:1px solid var(--rule);background:var(--turf);color:var(--on-turf)}
.sc-top .t{font-family:var(--display);font-size:19px;letter-spacing:.01em}
.sc-top .r{font-family:var(--num);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-turf-3)}
.sc-row{display:grid;grid-template-columns:2.1fr 1fr 74px 74px 106px 118px 44px;align-items:center;border-bottom:1px solid var(--rule-2);transition:background .18s;position:relative}
.sc-row.hd{background:var(--sand-2);border-bottom:1px solid var(--rule)}
.sc-row:not(.hd):hover{background:#fff}
.sc-row:last-child{border-bottom:none}
.sc-row>*{padding:0 12px}
.sc-row.hd>*{padding:11px 12px;font-family:var(--ui);font-size:9px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.sc-row:not(.hd)>*{padding-top:16px;padding-bottom:16px}
a.sc-row:hover{color:inherit}
/* The arrow cell holds the link to the course's own site; its ::after is
   stretched over the whole row, so clicking anywhere on the row opens it.
   The booking link sits above that on z-index so it is not swallowed. */
.sc-go .sc-ext{display:inline-flex;color:var(--flag)}
.sc-go .sc-ext::after{content:'';position:absolute;inset:0;z-index:1}
.sc-name{border-left:1px solid var(--rule-2)}
.sc-name .n{font-family:var(--display);font-size:21px;line-height:1.18}
.sc-name .s{font-family:var(--ui);font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);margin-top:5px}
.sc-city{font-family:var(--ui);font-size:13.5px;font-weight:500;color:var(--ink-2)}
.sc-fig{font-family:var(--num);font-size:19px;font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.sc-len{font-family:var(--num);font-size:14px;text-align:right;color:var(--ink-2)}
.sc-tees{display:flex;gap:5px;justify-content:flex-start}
.tee{width:11px;height:11px;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(18,33,26,.28);display:inline-block}
.tee.k{background:#1A1A1A}.tee.b{background:#2F5C9E}.tee.w{background:#FBFAF6}.tee.y{background:#E3B93F}.tee.r{background:#C2402F}
.sc-go{text-align:right;color:var(--flag)}
.sc-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 22px;border-top:1px solid var(--rule);font-family:var(--num);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);flex-wrap:wrap}
.legend{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.legend span{display:inline-flex;align-items:center;gap:6px}

/* ══ tee sheet (programme) ══ */
.sheet{background:var(--turf);color:var(--on-turf);position:relative;overflow:hidden}
/* Photo backdrop. The section's text is light-on-dark, so the image carries a
   heavy scrim — a flat wash plus a top-down gradient — to hold contrast over
   the bright sky in the upper half of the shot. */
.sheet-bg{position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(180deg,rgba(15,36,25,.90) 0%,rgba(15,36,25,.86) 45%,rgba(15,36,25,.93) 100%),
    url('images/events_pic.jpg');
  background-size:cover;background-position:center 42%;background-repeat:no-repeat}
.sheet .wrap{position:relative;z-index:1}
.sheet h2{color:var(--on-turf)}
.sheet .h-sub{color:var(--on-turf-2)}
.tee-sheet{position:relative;border-top:1px solid var(--rule-turf);margin-top:46px}
.tee-row{display:grid;grid-template-columns:120px 100px 1fr auto;gap:28px;align-items:center;padding:26px 0;border-bottom:1px solid var(--rule-turf);transition:padding-left .22s,background .22s}
.tee-row:hover{padding-left:14px;background:rgba(241,237,225,.03)}
.tee-time{font-family:var(--num);font-size:26px;font-weight:700;color:var(--sand-3);line-height:1}
.tee-time span{display:block;font-family:var(--ui);font-size:9.5px;font-weight:600;letter-spacing:.2em;color:var(--on-turf-3);margin-top:8px}
.tee-date{font-family:var(--num);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-turf-2);line-height:1.6}
.tee-info h3{font-size:25px;color:var(--on-turf);line-height:1.15}
.tee-info .m{display:flex;gap:22px;flex-wrap:wrap;margin-top:9px;font-family:var(--ui);font-size:12.5px;color:var(--on-turf-2)}
.tee-info .m span{display:inline-flex;align-items:center;gap:7px}
.tee-info .m svg{opacity:.6;flex-shrink:0}
.tee-empty{padding:46px 0 44px;border-bottom:1px solid var(--rule-turf);text-align:center;color:var(--on-turf-3)}
.tee-empty svg{opacity:.5;margin:0 auto 16px;display:block}
.tee-empty .t{font-family:var(--display);font-size:22px;color:var(--on-turf);line-height:1.3}
.tee-empty .s{font-size:13px;color:var(--on-turf-2);margin-top:8px;max-width:46ch;margin-inline:auto}
.notice{margin-top:38px;border:1px solid var(--rule-turf);padding:24px 26px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;position:relative}
.notice .fl{flex-shrink:0}
.notice .tx{flex:1;min-width:240px}
.notice .tx .t{font-family:var(--display);font-size:22px;color:var(--on-turf);line-height:1.3}
.notice .tx .s{font-size:13px;color:var(--on-turf-2);margin-top:5px}

/* ══ témoignages ══ */
.words{background:var(--sand)}
.pull{display:grid;grid-template-columns:1fr 300px;gap:56px;align-items:end;padding-bottom:44px;border-bottom:1px solid var(--rule)}
.pull q{quotes:none}
.pull .big{font-family:var(--display);font-style:italic;font-size:clamp(24px,3vw,40px);line-height:1.32;letter-spacing:-.01em;display:block}
.pull .att{border-left:1px solid var(--rule);padding-left:26px}
.pull .att .st{color:var(--flag);font-family:var(--num);font-size:12px;letter-spacing:3px}
.pull .att .nm{font-family:var(--display);font-size:24px;margin-top:12px}
.pull .att .dt{font-family:var(--num);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-top:6px}
.words-list{display:grid;grid-template-columns:1fr 1fr;gap:0}
.wl{padding:30px 0;border-bottom:1px solid var(--rule-2)}
.wl:first-child{border-right:1px solid var(--rule-2);padding-right:44px}
.wl:last-child{padding-left:44px}
.wl q{font-family:var(--display);font-size:19px;line-height:1.5;quotes:none;display:block;color:var(--ink)}
.wl .who{display:flex;align-items:baseline;gap:12px;margin-top:16px;font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}
.wl .who b{color:var(--flag);font-family:var(--num);letter-spacing:2px}

/* ══ contact ══ */
.contact{background:var(--chalk)}
.c-in{display:grid;grid-template-columns:1.05fr .95fr;gap:0}
.c-form{padding-right:56px}
.c-side{border-left:1px solid var(--rule);padding-left:56px}
.fld{padding:0 0 4px;border-bottom:1px solid var(--rule);margin-bottom:26px;display:grid;grid-template-columns:150px 1fr;align-items:end;gap:16px;transition:border-color .18s}
.fld:focus-within{border-color:var(--flag)}
.fld label{font-family:var(--ui);font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);padding-bottom:9px}
.fld input,.fld textarea,.fld select{width:100%;border:none;background:transparent;outline:none;font-family:var(--display);font-size:18px;color:var(--ink);padding:6px 0 8px;resize:none}
.fld select{cursor:pointer;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%236B7A70' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 2px center;background-size:15px;padding-right:26px}
.fld textarea{min-height:76px;font-size:17px;line-height:1.5}
/* a bottom-aligned label reads as belonging to the wrong row beside a
   multi-line textarea — align it to the first line instead */
.fld-area{align-items:start}
.fld-area label{padding-top:14px;padding-bottom:0}
.fld input::placeholder,.fld textarea::placeholder{color:var(--ink-3);opacity:.5}
.fld:focus-within label{color:var(--flag)}
.fld.err{border-color:var(--flag)}
.fld-err{font-family:var(--ui);font-size:10.5px;font-weight:600;letter-spacing:.08em;color:var(--flag);margin:-18px 0 26px;display:none}
.fld.err+.fld-err{display:block}
.form-note{font-size:12px;line-height:1.6;color:var(--ink-3);margin:16px 0 24px}
.ok{display:none;align-items:flex-start;gap:10px;margin-top:18px;color:var(--flag);font-size:12.5px;font-weight:600;letter-spacing:.06em;line-height:1.6}
.ok.show{display:flex}
.ok svg{flex-shrink:0;margin-top:2px}
.c-rows .r{display:grid;grid-template-columns:130px 1fr;gap:20px;align-items:baseline;padding:20px 0;border-bottom:1px solid var(--rule-2)}
.c-rows .r:first-child{border-top:1px solid var(--rule-2)}
.c-rows .k{font-family:var(--ui);font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.c-rows .v{font-family:var(--display);font-size:20px;line-height:1.35;overflow-wrap:anywhere}
.c-rows .v small{display:block;font-family:var(--ui);font-size:13px;color:var(--ink-2);margin-top:5px}
.c-rows .v.mono{font-family:var(--num);font-size:17px;letter-spacing:.02em}

/* ══ footer ══ */
footer{background:var(--turf);color:var(--on-turf);padding:72px 0 28px;position:relative;overflow:hidden}
footer .topo svg path{fill:none;stroke:rgba(241,237,225,.045);stroke-width:1}
.f-top{position:relative;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:52px;padding-bottom:44px;border-bottom:1px solid var(--rule-turf)}
.f-brand .logo{height:46px;width:auto;display:block}
.f-brand p{font-size:14px;line-height:1.65;color:var(--on-turf-2);margin:18px 0 26px;max-width:36ch}
.f-soc{display:flex;gap:8px}
.f-soc a{width:38px;height:38px;display:flex;align-items:center;justify-content:center;color:var(--on-turf-2);box-shadow:inset 0 0 0 1px var(--rule-turf);transition:all .18s}
.f-soc a:hover{color:var(--turf);background:var(--sand-3);box-shadow:none}
.f-col h5{font-family:var(--ui);font-size:9.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--sand-3);margin:0 0 16px}
.f-col a{display:block;font-size:13.5px;color:var(--on-turf-2);padding:7px 0;transition:color .18s}
.f-col a:hover{color:var(--on-turf)}
.f-bot{position:relative;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:24px;flex-wrap:wrap;font-family:var(--num);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-turf-3)}
.f-bot .lg{display:flex;gap:22px;flex-wrap:wrap}
.f-bot a:hover{color:var(--on-turf-2)}

/* floating WhatsApp — a real booking site wants a persistent path to book */
.wa{position:fixed;right:max(24px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));
  z-index:98;width:54px;height:54px;border-radius:50%;
  background:var(--flag);color:var(--chalk);display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 24px rgba(18,33,26,.28);transition:background .18s,transform .18s}
.wa:hover{background:var(--flag-2);color:var(--chalk);transform:translateY(-2px)}

/* reveal */
@media (prefers-reduced-motion:no-preference){
  .rv{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
  .rv.in{opacity:1;transform:none}
}

@media (max-width:1080px){
  .sc-row{grid-template-columns:1.8fr 1fr 62px 62px 96px 100px 40px}
  .sc-row>.sc-len,.sc-row.hd>.h-len{display:none}
}
@media (max-width:960px){
  .hero-in,.about-in,.c-in,.pull{grid-template-columns:1fr}
  .hero-copy{padding-right:0}
  .hero-vis{display:none}
  .about-vis{padding-right:0;margin-bottom:44px}
  .about-txt,.c-side{border-left:none;padding-left:0}
  .c-form{padding-right:0;margin-bottom:52px}
  /* la bordure de section et le filet du premier contact se doublaient
     une fois la colonne passée sous le formulaire : on n'en garde qu'un */
  .c-side{border-top:1px solid var(--rule);padding-top:0}
  .c-side .c-rows .r:first-child{border-top:none}
  .pull .att{border-left:none;border-top:1px solid var(--rule);padding-left:0;padding-top:22px}
  .words-list{grid-template-columns:1fr}
  .wl:first-child{border-right:none;padding-right:0}
  .wl:last-child{padding-left:0}
  .nav-links{display:none}
  .burger{display:flex}
  .nav-in .btn-flag{display:none}
  .f-top{grid-template-columns:1fr 1fr}
  .f-col a{display:flex;align-items:center;min-height:44px;padding:4px 0}
  .f-soc a{width:44px;height:44px}
}
@media (max-width:760px){
  .wrap,.nav-in,.hero-in,.cond-in{padding-left:22px;padding-right:22px}
  .pad{padding:68px 0}
  .hero{padding-top:calc(var(--cond-h,33px) + 120px)}
  /* les rangées d'entrée prennent toute la largeur, et l'académie passe ses
     deux villes sous son libellé pour garder des cibles franches au pouce */
  .hero-cta{max-width:none}
  .hcta-split{flex-direction:column;align-items:stretch;gap:12px}
  .hcta-cities a{flex:1 1 0;justify-content:space-between;min-height:44px}
  .sc-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .sc{min-width:620px}
  /* the prototype dropped the date and the booking button here; on a phone
     that is exactly the information a visitor came for, so stack instead */
  .tee-row{grid-template-columns:1fr;gap:14px;padding:24px 0}
  .tee-row:hover{padding-left:0}
  .tee-time{display:flex;align-items:baseline;gap:12px;font-size:23px}
  .tee-time span{margin-top:0}
  .tee-date{font-size:11.5px}
  .tee-info h3{font-size:22px}
  .tee-row .btn{width:100%}
  /* la citation mise en avant lisait comme un autre composant sur mobile :
     même taille de texte et même ligne d'attribution que les deux avis suivants */
  .pull{gap:16px;padding-bottom:30px}
  .pull .big{font-style:normal;font-size:19px;line-height:1.5}
  .pull .att{display:flex;align-items:baseline;flex-wrap:wrap;
    border-top:none;padding-top:16px;
    font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.18em;
    text-transform:uppercase;color:var(--ink-3)}
  .pull .att .st{font-size:11px;letter-spacing:2px;margin-right:12px}
  .pull .att .nm{font:inherit;letter-spacing:inherit;margin-top:0}
  .pull .att .nm::after{content:" \2014"}
  .pull .att .dt{font:inherit;letter-spacing:inherit;font-size:11px;margin-top:0}
  .pull .att .dt::before{content:"\00a0"}
  .notice{flex-direction:column;align-items:flex-start;gap:16px;padding:22px 20px}
  .notice .tx{min-width:0}
  .fld{grid-template-columns:1fr;gap:0}
  .fld label{padding-bottom:0}
  .f-top{grid-template-columns:1fr}
  /* keep the strip to a single line so it never grows into the nav */
  .cond-in{gap:16px;flex-wrap:nowrap;overflow:hidden}
  .cond{font-size:9.5px}
  .cond .sp{display:none}
  .wa{right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom))}

  /* ── finger-sized targets ──
     Everything tappable gets to ~44px without changing how it looks. */
  .brand{min-height:44px}
  .brand .logo{height:32px}
  .fld input,.fld select{padding:11px 0 13px}
  .fld select{padding-right:26px}
  .fld textarea{min-height:88px}
  .c-rows a.v{display:flex;align-items:center;min-height:44px}
  .f-bot .lg a{display:inline-flex;align-items:center;min-height:44px}
  .sc-go .sc-ext{width:44px;height:44px;align-items:center;justify-content:center;margin:-14px -14px 0 0}
}

@media (max-width:900px){
  .crs-logos{grid-template-columns:repeat(2,1fr);gap:6px 16px;margin-bottom:38px}
}
@media (max-width:560px){
  /* les quatre marques restent en quadrant : empilées, elles repoussaient la
     carte de score d'un écran entier, et le max-width de 230px laissait
     chaque mark au tiers de la largeur disponible. En 2×2 chaque colonne
     remplit sa part, donc le plafond de largeur saute et le rembourrage
     latéral se resserre. */
  .crs-logos{grid-template-columns:repeat(2,1fr);gap:4px 10px;padding:10px 0;margin-bottom:32px}
  .crs-logo{padding:10px 4px}
  .crs-logos img{max-width:none}
}

/* ══ scorecard → stacked cards on phones ══
   Below 700px the seven-column card only fits behind a horizontal scroll,
   which hides par, longueur, départs and the course link off-screen with no
   affordance. Each row becomes a self-contained card instead; the column
   headings are replaced by the per-cell data-k labels. */
@media (max-width:700px){
  .sc-wrap{overflow:visible}
  .sc{min-width:0}
  .sc-top{padding:14px 18px;flex-wrap:wrap;gap:6px 16px}
  .sc-top .t{font-size:16px;line-height:1.25}
  .sc-row.hd{display:none}
  /* les quatre chiffres tiennent sur une seule ligne : en 2 colonnes la carte
     faisait quatre bandes et ~250px de haut, soit un écran entier pour les
     quatre parcours. Les colonnes sont pondérées — Ville et Longueur portent
     du texte, Trous et Par deux chiffres. */
  .sc-row:not(.hd){grid-template-columns:1.5fr .62fr .62fr 1.15fr;gap:0 10px;
    padding:15px 18px 14px;align-items:start}
  .sc-row:not(.hd)>*{padding:0}
  .sc-name{grid-column:1/-1;border-left:none}
  .sc-row:not(.hd) [data-k]{margin-top:12px;text-align:left}
  /* one shared value size + line box: the labels above them already match, so
     top-aligned cells put every label and every value on the same baseline */
  .sc-row:not(.hd) .sc-city,
  .sc-row:not(.hd) .sc-fig,
  .sc-row:not(.hd) .sc-len{font-size:15.5px;line-height:1.3}
  .sc-row:not(.hd) [data-k]::before{content:attr(data-k);display:block;margin-bottom:5px;
    font-family:var(--ui);font-size:9px;font-weight:700;letter-spacing:.2em;
    text-transform:uppercase;color:var(--ink-3)}
  .sc-row:not(.hd)>.sc-len,.sc-row.hd>.h-len{display:block}
  /* départs : pastille et légende sur la même ligne plutôt qu'empilées —
     l'étiquette seule occupait une bande pour cinq carrés de 9px. */
  .sc-tees{grid-column:1/-1;display:flex;align-items:center;gap:9px}
  .sc-tees::before{margin-bottom:0}
  .sc-tees .tee{margin-right:5px}
  .sc-go{position:absolute;top:16px;right:18px;padding:0}
  .sc-foot{padding:12px 18px}
}

@media (max-width:560px){
  /* label above value — a 130px label column leaves the e-mail nowhere to go
     and pushes the whole document wider than the viewport */
  .c-rows .r{grid-template-columns:1fr;gap:7px;align-items:start}
  .c-rows .v.mono{font-size:15px}
  .about-cta .btn{flex:1 1 100%}
  .hcta-cities{flex-wrap:wrap}
  .hcta-cities a{flex:1 1 100%}
  .card-head .btn{width:100%}
  .card-head-cta{width:100%}
}

/* landscape phones: the fixed header stack eats most of a 380px-tall viewport */
@media (max-height:520px) and (max-width:960px){
  .drawer{padding-top:120px}
  .drawer a{font-size:22px;padding:11px 0}
  .hero{padding-top:calc(var(--cond-h,33px) + 100px)}
  .cdlg{padding:10px}
  .cdlg-box{padding:24px 20px}
}

@media print{
  .cond,header.nav,.drawer,.wa,.topo,.sheet-bg,.hero-bg,.hero-cta,.btn{display:none!important}
  body{background:#fff}
  .hero,.sheet,footer{background:#fff;color:#000}
  .rv{opacity:1;transform:none}
}

/* ══ legal / document pages ══ */
.doc{background:var(--sand);padding:190px 0 96px}
.doc .lead{font-family:var(--display);font-size:clamp(20px,2.1vw,26px);line-height:1.45;color:var(--ink);margin:26px 0 0;max-width:62ch}
.doc h3{font-size:26px;margin:48px 0 0}
.doc h3+p{margin-top:12px}
.doc p,.doc li{font-size:15px;line-height:1.75;color:var(--ink-2);max-width:70ch}
.doc p{margin:16px 0 0}
.doc ul{margin:14px 0 0;padding-left:20px}
.doc li{margin:8px 0}
.doc a{color:var(--flag);text-decoration:underline;text-underline-offset:3px}
.doc .todo{border-left:2px solid var(--flag);background:rgba(194,64,47,.05);padding:16px 20px;margin:20px 0 0;max-width:70ch}
.doc .todo p{margin:0;font-size:13.5px;color:var(--ink-2)}
.doc .todo b{font-family:var(--ui);font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--flag);display:block;margin-bottom:6px}
.doc .back{margin-top:56px}
@media (max-width:760px){.doc{padding:150px 0 68px}}

/* ═══════════════════════════════════════════════════════════
   Coaches page — grid of portraits + profile dialog
   ═══════════════════════════════════════════════════════════ */

.coaches-hero{background:var(--turf);color:var(--on-turf);position:relative;overflow:hidden;padding:170px 0 76px;min-height:66vh;display:flex;align-items:flex-end}
/* la photo n'est pas assombrie : la barre de nav garde donc son fond turf en
   haut de page, sinon les liens crème passent sur le ciel clair */
.coaches-page header.nav{background:rgba(15,36,25,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom-color:var(--rule-turf)}
/* photo de groupe des coachs : voile turf très léger (8%) — juste assez pour
   asseoir le texte, sans éteindre la photo. Le cadrage part du haut (le ciel)
   pour garder les visages dans une bande moins haute. */
.coaches-hero .ch-bg{position:absolute;inset:0;pointer-events:none;
  background:var(--turf) url('images/coaches-group.jpg') center 46%/cover no-repeat}
.coaches-hero .ch-scrim{position:absolute;inset:0;pointer-events:none;
  background:rgba(15,36,25,.08)}
.coaches-hero .wrap{position:relative;width:100%;text-shadow:0 2px 22px rgba(15,36,25,.7),0 1px 4px rgba(15,36,25,.55)}
.coaches-hero h1{font-size:clamp(38px,5vw,68px);line-height:1.05;margin:24px 0 0;color:var(--on-turf)}
.coaches-hero h1 em{font-style:italic;color:var(--sand-3)}
.coaches-hero .lede{font-size:17px;line-height:1.62;color:var(--on-turf);max-width:52ch;margin:24px 0 0}
.coaches-hero .label.on-turf{color:var(--on-turf)}

.coaches{background:var(--sand);padding:88px 0 104px}

/* ── filtre ville ──
   Une barre au-dessus de la grille : un libellé, quatre pastilles, le compte.
   Les cartes portent data-cities ; le script se contente de masquer. */
.coach-filter{display:flex;align-items:center;flex-wrap:wrap;gap:14px 18px;
  margin:0 0 44px;padding-bottom:22px;border-bottom:1px solid var(--rule)}
.cf-label{font-family:var(--num);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3)}
.cf-btns{display:flex;flex-wrap:wrap;gap:8px}
.cf{font-family:var(--ui);font-size:13px;font-weight:500;letter-spacing:.01em;color:var(--ink-2);
  background:transparent;border:1px solid var(--rule);border-radius:999px;padding:9px 18px;
  cursor:pointer;transition:background .18s,border-color .18s,color .18s}
.cf:hover{border-color:var(--turf-3);color:var(--ink)}
.cf[aria-pressed="true"]{background:var(--turf);border-color:var(--turf);color:var(--on-turf)}
.cf-count{margin:0 0 0 auto;font-family:var(--num);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
/* .coach est en display:flex : sans cette règle, [hidden] ne masquerait rien */
.coach[hidden]{display:none}
.coach-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 34px}

/* la carte de Mustapha Pinta est un <button> : toute la tuile ouvre la fiche.
   Les autres coachs sont des .coach-static — même mise en page, sans profil. */
.coach{display:flex;flex-direction:column;height:100%;width:100%;text-align:left;
  background:none;border:none;padding:0;margin:0;
  font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.coach .photo{aspect-ratio:4/5;width:100%;flex:none;transition:box-shadow .2s}
.coach .photo::after{box-shadow:inset 0 0 0 1px var(--rule-turf);transition:box-shadow .2s}
.coach:hover .photo::after,.coach[aria-expanded="true"] .photo::after{box-shadow:inset 0 0 0 2px var(--flag)}
.coach .photo img{transition:transform .5s ease}
.coach:hover .photo img{transform:scale(1.035)}
/* fiches sans profil : carte photo simple, aucun affordance de clic */
.coach-static{cursor:default}
.coach-static:hover .photo::after{box-shadow:inset 0 0 0 1px var(--rule-turf)}
.coach-static:hover .photo img{transform:none}

/* the name block absorbs the leftover height, so a two-line name (« Abdellah
   Mantrach (Babel) ») pushes nothing out of line: the rule and the CTA below
   stay level across every card in the row. */
.coach-id{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  flex:1 1 auto;margin-top:16px;padding-bottom:12px;border-bottom:1px solid var(--rule)}
.coach-id .n{font-family:var(--display);font-size:22px;line-height:1.2;letter-spacing:-.012em}
.coach-id .c{font-family:var(--num);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap}
.coach-more{display:flex;align-items:center;gap:9px;margin-top:12px;flex:none;
  font-family:var(--ui);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-3);transition:color .18s}
.coach-more svg{width:13px;height:13px;flex-shrink:0}
.coach:hover .coach-more{color:var(--flag)}

/* ── profile dialog ── */
.cdlg{position:fixed;inset:0;z-index:220;display:none;align-items:center;justify-content:center;padding:24px}
.cdlg.open{display:flex}
.cdlg-back{position:absolute;inset:0;background:rgba(15,36,25,.72);backdrop-filter:blur(3px)}
.cdlg-box{position:relative;width:100%;max-width:520px;max-height:calc(100vh - 48px);
  max-height:calc(100dvh - 48px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--chalk);color:var(--ink);padding:38px 40px 40px;border-radius:2px;
  box-shadow:0 30px 70px rgba(15,36,25,.4);animation:cdlgIn .22s ease}
@keyframes cdlgIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.cdlg-x{position:absolute;top:10px;right:10px;width:44px;height:44px;display:flex;align-items:center;
  justify-content:center;background:none;border:none;cursor:pointer;color:var(--ink-3);border-radius:2px}
.cdlg-x:hover{color:var(--flag);background:var(--sand-2)}
.cdlg-role{font-family:var(--ui);font-size:9.5px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--flag)}
.cdlg-box h2{font-size:34px;line-height:1.12;margin:12px 0 0}
.cdlg-city{font-family:var(--num);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-3);margin-top:10px}
.cdlg-rule{height:1px;background:var(--rule);margin:22px 0}
.cdlg-bio p{font-size:15px;line-height:1.75;color:var(--ink-2);margin:0 0 14px}
.cdlg-bio p:last-child{margin-bottom:0}
.cdlg-box .btn{width:100%;margin-top:26px}
@media (prefers-reduced-motion:reduce){.cdlg-box{animation:none}.coach:hover .photo img{transform:none}}

@media (max-width:960px){
  .coach-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 26px}
  .coaches-hero{padding:150px 0 72px;min-height:58vh}
}
/* sur téléphone, le cadrage « cover » coupait les deux coachs des extrémités.
   La photo cesse donc d'être un fond : elle devient une bande à son propre
   format (1800×1355), l'équipe entière tient dans l'écran, et le titre passe
   dessous sur le fond turf — donc plus besoin du voile ni de l'ombre portée
   qui servaient à décoller le texte de l'image. */
@media (max-width:760px){
  .coaches-hero{display:block;min-height:0;padding:calc(var(--cond-h,40px) + 86px) 0 56px}
  .coaches-hero .ch-bg{position:relative;inset:auto;width:100%;aspect-ratio:1800/1355;
    background:var(--turf) url('images/coaches-group.jpg') center/contain no-repeat}
  .coaches-hero .ch-scrim{display:none}
  .coaches-hero .wrap{text-shadow:none;padding-top:34px}
  .coaches-hero h1{margin-top:18px}
  .coaches-hero .lede{font-size:16px;margin-top:18px;color:var(--on-turf-2)}
}
@media (max-width:560px){
  /* two portraits still read at this width, and six full-bleed 4:5 cards
     would otherwise make the page a 3000px scroll */
  .coach-grid{gap:26px 16px}
  .coach-filter{gap:12px;margin-bottom:32px}
  .cf-count{margin-left:0;width:100%}
  .cf{font-size:12.5px;padding:8px 15px}
  .coach-id{flex-direction:column;align-items:flex-start;gap:4px}
  .coach-id .n{font-size:19px}
  .coach-id .c{white-space:normal}
  .cdlg{padding:14px}
  .cdlg-box{padding:32px 24px 30px}
  .cdlg-box h2{font-size:28px}
}
@media (max-width:359px){
  .coach-grid{grid-template-columns:minmax(0,1fr);gap:30px}
  .coach-id{flex-direction:row;align-items:baseline}
  .coach-id .n{font-size:22px}
}

/* ═══════════════════════════════════════════════════════════
   Tarifs page — price grid, coach/tier table, sites, conditions
   ═══════════════════════════════════════════════════════════ */

.tarifs-hero{background:var(--turf);color:var(--on-turf);position:relative;overflow:hidden;padding:180px 0 76px}
.tarifs-hero .topo svg path{fill:none;stroke:rgba(241,237,225,.055);stroke-width:1}
.tarifs-hero .wrap{position:relative}
.tarifs-hero h1{font-size:clamp(38px,5vw,68px);line-height:1.05;margin:24px 0 0;color:var(--on-turf)}
.tarifs-hero h1 em{font-style:italic;color:var(--sand-3)}
.tarifs-hero .lede{font-size:17px;line-height:1.62;color:var(--on-turf-2);max-width:54ch;margin:24px 0 0}
.tarifs-hero .plates{max-width:520px;margin-top:48px;border-top:1px solid var(--rule-turf);padding-top:4px}
.tarifs-hero .plate .v small{font-size:16px;font-weight:400}

/* ── segmented controls ──
   Real radios, visually replaced: the keyboard behaviour of a radio group
   (arrow keys, one tab stop) is exactly what this needs. */
.pricing{background:var(--sand)}
.pctl{display:flex;align-items:flex-end;gap:34px;flex-wrap:wrap;margin-bottom:34px}
.seg{border:none;margin:0;padding:0;min-width:0}
.seg legend{font-family:var(--ui);font-size:9px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3);padding:0 0 10px}
.seg-in{display:flex;box-shadow:inset 0 0 0 1px var(--rule);border-radius:2px;overflow:hidden;background:var(--chalk)}
.seg-in input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.seg-in label{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 22px;
  font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);cursor:pointer;transition:background .18s,color .18s;white-space:nowrap}
.seg-in label+input+label,.seg-in input+label~input+label{box-shadow:inset 1px 0 0 var(--rule)}
.seg-in label:hover{color:var(--ink)}
.seg-in input:checked+label{background:var(--turf);color:var(--on-turf)}
.seg-in input:focus-visible+label{outline:2px solid var(--flag);outline-offset:-2px}
.pctl-note{font-family:var(--num);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 14px}

.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
/* une seule carte (Marrakech) : elle garde la largeur qu'elle avait à deux */
.price-grid.solo{grid-template-columns:minmax(0,calc(50% - 13px))}
/* align-self : une carte plus courte que sa voisine s'arrête sur sa
   dernière ligne au lieu d'être étirée à la hauteur de la rangée */
.pcard{border:1px solid var(--rule);background:var(--chalk);position:relative;align-self:start}
.pcard-top{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:18px 24px;background:var(--turf);color:var(--on-turf)}
.pcard-top .t{font-family:var(--display);font-size:22px;line-height:1.2}
.pcard-top .s{font-family:var(--ui);font-size:11px;color:var(--on-turf-3);margin-top:6px;line-height:1.5}
.pcard-top .r{font-family:var(--num);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sand-3);white-space:nowrap;padding-top:5px}

.prow{display:grid;grid-template-columns:84px 1fr auto;align-items:center;gap:14px;
  padding:16px 24px;border-bottom:1px solid var(--rule-2);transition:background .18s}
.prow:not(.hd):hover{background:var(--sand)}
.prow:last-child{border-bottom:none}
.prow.hd{background:var(--sand-2);border-bottom:1px solid var(--rule);padding-top:11px;padding-bottom:11px}
.prow.hd>*{font-family:var(--ui);font-size:9px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3)}
.prow .dur{font-family:var(--num);font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--ink)}
.prow .grp{font-family:var(--ui);font-size:13.5px;color:var(--ink-2)}
.prow .amtc{text-align:right}
.prow .amt{font-family:var(--num);font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.prow .cur{font-family:var(--ui);font-size:10px;font-weight:600;font-style:normal;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3)}
.prow .per{display:block;font-family:var(--num);font-size:10px;letter-spacing:.06em;
  color:var(--ink-3);margin-top:5px;min-height:1em}
.prow .per:empty{display:none}
.pcard-foot{padding:14px 24px;border-top:1px solid var(--rule);background:var(--sand-2);
  font-family:var(--num);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.price-legend{font-size:13.5px;line-height:1.7;color:var(--ink-3);margin:26px 0 0;max-width:78ch}
.price-legend b{color:var(--ink-2)}

/* ── grille groupée par parcours (Marrakech) ──
   Un parcours = un titre et sa propre grille. Le groupe porte data-cities et
   le reveal ; les cartes qu'il contient ne sont plus filtrées une à une. */
.pgroup{grid-column:1/-1}
.pgroup+.pgroup{margin-top:14px}
.pgroup-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--rule);padding-top:14px;margin-bottom:20px}
.pgroup-head h3{font-family:var(--display);font-size:25px;line-height:1.2;margin:0;color:var(--ink)}
.pgroup-head p{font-family:var(--num);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);margin:0}
/* une seule carte dans un groupe : elle garde la demi-largeur des autres */
.pgroup-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.pgroup-dots{display:none}

/* ── coach → tier ── */
.team-rates{background:var(--chalk)}
.tr-tbl{border:1px solid var(--rule);background:var(--sand)}
.tr-row{display:grid;grid-template-columns:1.6fr 150px 190px;align-items:center;
  border-bottom:1px solid var(--rule-2);transition:background .18s}
.tr-row:last-child{border-bottom:none}
.tr-row:not(.hd):hover{background:#fff}
.tr-row>*{padding:15px 18px;min-width:0}
.tr-row.hd{background:var(--sand-2);border-bottom:1px solid var(--rule)}
.tr-row.hd>*{padding-top:11px;padding-bottom:11px;font-family:var(--ui);font-size:9px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.tr-row .nm{font-family:var(--display);font-size:19px;line-height:1.25}
.tr-row .lk{font-size:13.5px;overflow-wrap:anywhere}
.tr-row .lk a{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--rule)}
.tr-row .lk a:hover{color:var(--flag);text-decoration-color:currentColor}
.tr-row .num a{font-family:var(--num);font-size:13px;letter-spacing:.02em;white-space:nowrap}
.tag{display:inline-flex;align-items:center;font-family:var(--ui);font-size:9px;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;padding:6px 10px;border-radius:2px;
  color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--rule);white-space:nowrap}
.tag-head{background:var(--flag);color:var(--chalk);box-shadow:none}

/* ── sites ── */
.places{background:var(--sand)}
.places h2{margin-top:22px}
.place-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:44px;
  border-top:1px solid var(--rule)}
.place{padding:26px 24px 26px 0;border-right:1px solid var(--rule-2)}
.place:last-child{border-right:none}
.place:not(:first-child){padding-left:24px}
.pn{font-family:var(--display);font-size:22px;line-height:1.2}
.pc{font-family:var(--num);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--flag);margin-top:8px}
.pa{font-size:13.5px;line-height:1.6;color:var(--ink-3);margin-top:14px}

/* ── conditions ── */
.cond-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:46px 0 0;
  border-top:1px solid var(--rule-turf)}
.cnd{padding:28px 26px 28px 0;border-right:1px solid var(--rule-turf)}
.cnd:last-child{border-right:none}
.cnd:not(:first-child){padding-left:26px}
.cn{font-family:var(--num);font-size:30px;font-weight:700;color:var(--sand-3);line-height:1}
.ck{font-family:var(--ui);font-size:9.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--on-turf-3);margin-top:10px}
.cnd p{font-size:14px;line-height:1.65;color:var(--on-turf-2);margin:16px 0 0}

@media (max-width:1080px){
  .tr-row{grid-template-columns:1.4fr 130px 170px}
}
@media (max-width:960px){
  .price-grid,.price-grid.solo,.pgroup-grid{grid-template-columns:1fr}
  .place-grid{grid-template-columns:1fr 1fr}
  .place{border-bottom:1px solid var(--rule-2)}
  .place:nth-child(2n){border-right:none}
  .place:nth-child(2n+1){padding-left:0}
  .place:nth-child(2n){padding-left:24px}
  .cond-grid{grid-template-columns:1fr}
  .cnd,.cnd:not(:first-child){border-right:none;border-bottom:1px solid var(--rule-turf);
    padding:26px 0}
  .cnd:last-child{border-bottom:none}
  .tarifs-hero{padding:150px 0 60px}
}
@media (max-width:760px){
  .pctl{gap:22px}
  .pctl-note{width:100%;margin-bottom:0}
  .seg-in label{padding:0 16px;font-size:10.5px;letter-spacing:.14em}
  /* ── diaporama d'un parcours ──
     Deux grilles empilées font défiler un écran entier avant d'arriver à la
     seconde. Sous 760px, un groupe marqué data-rail devient donc un
     diaporama : une carte par écran, aimantée, qu'on fait glisser du pouce,
     avec des puces sous le rail (construites par main.js). Un groupe sans
     data-rail — le Montgomerie, une seule grille — reste empilé. */
  .pgroup+.pgroup{margin-top:6px}
  .pgroup-head{margin-bottom:16px}
  .pgroup-head h3{font-size:22px}
  .pgroup-grid[data-rail]{display:flex;gap:16px;overflow-x:auto;
    overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin:0 -22px;padding:2px 22px 4px;scroll-padding:0 22px}
  .pgroup-grid[data-rail]::-webkit-scrollbar{display:none}
  .pgroup-grid[data-rail] .pcard{flex:0 0 min(86%,340px);scroll-snap-align:start}
  /* le rail défile à l'horizontale : le reveal ne verrait jamais passer la
     carte voisine, elle resterait blanche */
  .pgroup-grid[data-rail] .pcard.rv{opacity:1;transform:none}
  .pgroup-dots{display:flex;justify-content:center;gap:9px;margin-top:14px}
  /* puce de 8px, cible tactile de 24px */
  .pgroup-dots button{width:24px;height:24px;padding:0;border:0;background:transparent;
    cursor:pointer;position:relative}
  .pgroup-dots button::before{content:"";position:absolute;inset:8px;border-radius:50%;
    border:1px solid var(--rule-2);background:var(--sand-2);transition:background .2s,border-color .2s}
  .pgroup-dots button[aria-current="true"]::before{background:var(--turf);border-color:var(--turf)}
  .pgroup-dots button:focus-visible{outline:2px solid var(--flag);outline-offset:-4px}

  .prow{grid-template-columns:70px 1fr auto;padding:14px 18px;gap:10px}
  .prow .grp{font-size:12.5px}
  .prow .amt{font-size:19px}
  .pcard-top,.pcard-foot{padding-left:18px;padding-right:18px}

  /* the directory needs a horizontal scroll below this width; one card per
     coach keeps the phone number a tap away instead. Two lines per coach —
     name, then grade and number side by side: the stacked version spent a
     third of a screen on each of the nine coaches. The tag and the number
     say what they are, so the column labels stay hidden with the header. */
  .tr-row.hd{display:none}
  .tr-row:not(.hd){display:flex;flex-wrap:wrap;align-items:center;
    gap:2px 14px;padding:12px 18px}
  .tr-row:not(.hd)>*{padding:0}
  .tr-row:not(.hd) .nm{flex:1 0 100%;font-size:17px}
  .tr-row [data-k]:not(.nm)::before{display:none}
  /* the grade sets the second line's height so a coach without a number
     keeps the same card rhythm as one with a tappable link */
  .tr-row:not(.hd) [data-k]:not(.nm){display:flex;align-items:center;min-height:40px}
  .tr-row .lk a{display:inline-flex;align-items:center;min-height:40px}
  .tr-row .lk:empty{display:none}
}
@media (max-width:560px){
  .place-grid{grid-template-columns:1fr}
  .place,.place:nth-child(2n){padding-left:0;padding-right:0;border-right:none}
  .tarifs-hero .plates{margin-top:38px}
}

/* ═══════════════════════════════════════════════════════════
   Groupes & offsite page — offers, gallery, enquiry
   ═══════════════════════════════════════════════════════════ */

.grp-hero{background:var(--turf);color:var(--on-turf);position:relative;overflow:hidden;padding:180px 0 76px}
/* pas de courbes de niveau ici : elles texturent un aplat turf, mais sur la
   photo elles se lisaient comme des rayures. L'en-tête n'a donc pas de .topo. */
/* photo d'un offsite entreprise en fond d'en-tête. Le cadrage descend sous
   l'horizon (center 62%), mais le haut de l'image reste du ciel clair : un
   voile uniforme à 20 % y laissait le titre crème à peine lisible. Le voile
   est donc dégradé — dense en haut, là où se posent l'intitulé, le titre et
   le chapô, puis levé sur la pelouse pour ne pas éteindre la photo. La
   seconde couche, latérale, tient le côté gauche où commence chaque ligne. */
.grp-hero .gh-bg{position:absolute;inset:0;pointer-events:none;
  background:var(--turf) url('images/offsite-hero.jpg') center 62%/cover no-repeat}
.grp-hero .gh-scrim{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(15,36,25,.9) 0%,rgba(15,36,25,.86) 42%,
      rgba(15,36,25,.6) 72%,rgba(15,36,25,.36) 100%),
    linear-gradient(90deg,rgba(15,36,25,.44) 0%,rgba(15,36,25,0) 72%)}
/* le fond turf de la nav est conservé en haut de page : les liens crème
   passeraient sinon sur la photo (même logique que .coaches-page) */
.groupes-page header.nav{background:rgba(15,36,25,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom-color:var(--rule-turf)}
.grp-hero .wrap{position:relative;text-shadow:0 2px 22px rgba(15,36,25,.7),0 1px 4px rgba(15,36,25,.55)}
.grp-hero h1{font-size:clamp(38px,5vw,68px);line-height:1.05;margin:24px 0 0;color:var(--on-turf)}
.grp-hero h1 em{font-style:italic;color:var(--sand-3)}
.grp-hero .lede{font-size:17px;line-height:1.62;color:var(--on-turf);max-width:56ch;margin:24px 0 0}
.grp-hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.grp-hero .plates{grid-template-columns:repeat(2,1fr);max-width:380px;margin-top:48px;border-top:1px solid var(--rule-turf);padding-top:4px}
.grp-hero .plate .v small{font-size:16px;font-weight:400}
/* sur la photo, l'intitulé des cartouches à 34 % d'opacité décrochait */
.grp-hero .plate .k{color:var(--on-turf-2)}

/* ── the two audiences ──
   One card per offer. Everything a card says lives in its own markup, so a
   package is edited here alone — no JS, no build step. */
.offers{background:var(--sand)}
.offer-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:44px}
.offer{border:1px solid var(--rule);background:var(--chalk);display:flex;flex-direction:column}
.offer-top{padding:22px 26px;background:var(--turf);color:var(--on-turf)}
.offer-top .r{font-family:var(--num);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--sand-3)}
.offer-top .t{font-family:var(--display);font-size:27px;line-height:1.15;margin-top:10px}
.offer-top .s{font-size:13px;line-height:1.6;color:var(--on-turf-2);margin-top:9px;max-width:40ch}
.offer-body{padding:24px 26px 8px;flex:1}
/* Trois chiffres sur une ligne, centrés, sans filet vertical entre eux.
   Le sélecteur vise les cellules (> div) et non tous les div : en frappant
   aussi .v et .k, il leur donnait le padding de la cellule et un filet à
   droite — d'où le vide et les traits verticaux collés aux chiffres.
   Les line-height sont explicites : laissés à « normal », Space Mono et
   Archivo réservent bien plus que leur corps. */
.offer-facts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;border-top:1px solid var(--rule-2);
  border-bottom:1px solid var(--rule-2);margin-bottom:22px;text-align:center}
.offer-facts>div{padding:13px 10px}
.offer-facts .v{font-family:var(--num);font-size:17px;line-height:1.15;font-weight:700;color:var(--ink)}
.offer-facts .k{font-family:var(--ui);font-size:8.5px;line-height:1.3;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-3);margin-top:6px}
.offer ul{list-style:none;margin:0;padding:0}
.offer li{position:relative;padding:0 0 0 26px;margin:0 0 13px;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.offer li::before{content:"";position:absolute;left:2px;top:8px;width:9px;height:9px;
  background:var(--flag);clip-path:polygon(0 0,100% 45%,0 90%)}
.offer li b{color:var(--ink);font-weight:600}
.offer-foot{padding:18px 26px 22px;border-top:1px solid var(--rule);background:var(--sand-2)}
.offer-foot .btn{width:100%}
.offer-note{font-family:var(--num);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 12px}

/* ── what every booking carries ── */
.incl{background:var(--chalk)}
.incl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:44px;border-top:1px solid var(--rule)}
.inc{padding:26px 24px 26px 0;border-right:1px solid var(--rule-2)}
.inc:last-child{border-right:none}
.inc:not(:first-child){padding-left:24px}
.inc svg{color:var(--flag);margin-bottom:16px}
.inc .t{font-family:var(--display);font-size:20px;line-height:1.25}
.inc p{font-size:13.5px;line-height:1.65;color:var(--ink-3);margin:12px 0 0}

/* ── how a day runs ── */
.steps{background:var(--sand)}
.step-list{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:44px;border-top:1px solid var(--rule)}
.step{padding:26px 24px 26px 0;border-right:1px solid var(--rule-2)}
.step:last-child{border-right:none}
.step:not(:first-child){padding-left:24px}
.step .n{font-family:var(--num);font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--flag)}
.step .t{font-family:var(--display);font-size:21px;line-height:1.25;margin-top:14px}
.step p{font-size:13.5px;line-height:1.65;color:var(--ink-2);margin:12px 0 0}

/* ── galerie ──
   Crossfading photo strip. Each slide names its file in data-src and the
   file is swapped in only once it loads, so a missing group-0N.jpg leaves
   the on-brand placeholder in place and the section never renders empty. */
.gallery{background:var(--turf);color:var(--on-turf);position:relative;overflow:hidden}
.gallery .topo svg path{fill:none;stroke:rgba(241,237,225,.05);stroke-width:1}
.gallery .wrap{position:relative}
.gal{margin-top:44px;position:relative}
.gal-view{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--turf-2);
  border:1px solid var(--rule-turf)}
.gs{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;pointer-events:none}
.gs.is-on{opacity:1;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.gs{transition:none}}
.gs-bg{position:absolute;inset:0;background-size:cover;background-position:center;
  background-image:linear-gradient(135deg,var(--turf-3),var(--turf-2))}
/* placeholder texture — visible only while no photo has loaded */
.gs-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:12px;color:var(--on-turf-3);text-align:center;padding:24px}
.gs-ph svg{opacity:.55}
.gs-ph span{font-family:var(--num);font-size:10px;letter-spacing:.18em;text-transform:uppercase}
.gs.has-img .gs-ph{display:none}
.gs-cap{position:absolute;left:0;right:0;bottom:0;padding:56px 26px 22px;
  background:linear-gradient(to top,rgba(15,36,25,.86),rgba(15,36,25,0));
  font-family:var(--display);font-size:clamp(17px,2vw,23px);line-height:1.3;color:var(--on-turf)}
.gal-bar{display:flex;align-items:center;gap:18px;margin-top:20px;flex-wrap:wrap}
.gal-arw{width:46px;height:46px;flex-shrink:0;background:transparent;cursor:pointer;color:var(--on-turf);
  box-shadow:inset 0 0 0 1px var(--rule-turf);border:none;border-radius:2px;
  display:flex;align-items:center;justify-content:center;transition:background .18s,color .18s}
.gal-arw:hover{background:var(--sand-3);color:var(--turf)}
.gal-dots{display:flex;gap:8px;flex:1;min-width:120px}
.gal-dot{flex:1;max-width:64px;height:3px;padding:0;border:none;cursor:pointer;background:var(--rule-turf);
  border-radius:2px;transition:background .18s}
.gal-dot[aria-selected="true"]{background:var(--sand-3)}
.gal-count{font-family:var(--num);font-size:11px;letter-spacing:.14em;color:var(--on-turf-3)}

/* ══ shots — the home page's photo grid ══
   Static 2×2 on the .gallery ground rather than a slideshow: with four frames
   nothing gains from being hidden behind an arrow, and groupes.html already
   carries the full carousel. The photos are wide phone shots, so they run as
   2.17/1 bands — that ratio matches the files and needs no further crop.
   Rows are spaced wider than columns so each caption reads with its own photo
   rather than with the one below it. */
.shots{margin-top:44px;display:grid;grid-template-columns:1fr 1fr;gap:44px 34px}
.shot{margin:0}
.shot-ph{aspect-ratio:1280/590}
.shot-cap{font-size:14px;line-height:1.6;color:var(--on-turf-2);margin-top:14px}
.shots-more{display:inline-flex;align-items:center;gap:10px;margin-top:38px;
  font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sand-3);border-bottom:1px solid var(--rule-turf);padding-bottom:6px;transition:color .18s,border-color .18s}
.shots-more:hover{color:var(--on-turf);border-color:var(--sand-3)}
.shots-more svg{width:14px;height:14px}

@media (max-width:760px){
  .shots{grid-template-columns:1fr;gap:26px}
}


/* ── formulaire de demande ── */
.enquiry{background:var(--chalk)}
.enq-in{display:grid;grid-template-columns:1.05fr .95fr;gap:0}
.enq-form{padding-right:56px}
.enq-side{border-left:1px solid var(--rule);padding-left:56px}
.enq-side h3{font-size:24px;line-height:1.25}
.enq-side p{font-size:14px;line-height:1.7;color:var(--ink-2);margin:16px 0 0;max-width:40ch}
.fld-2{display:grid;grid-template-columns:1fr 1fr;gap:0 26px}
.fld-2>.fld{grid-column:auto}

@media (max-width:1080px){
  .incl-grid,.step-list{grid-template-columns:1fr 1fr}
  .inc:nth-child(2n),.step:nth-child(2n){border-right:none}
  .inc:nth-child(2n+1),.step:nth-child(2n+1){padding-left:0}
  .inc:nth-child(2n),.step:nth-child(2n){padding-left:24px}
  .inc,.step{border-bottom:1px solid var(--rule-2)}
}
@media (max-width:960px){
  .grp-hero{padding:150px 0 60px}
  .offer-grid{grid-template-columns:1fr}
  .enq-in{grid-template-columns:1fr}
  .enq-form{padding-right:0}
  .enq-side{border-left:none;border-top:1px solid var(--rule);padding-left:0;padding-top:44px;margin-top:48px}
}
@media (max-width:760px){
  .offer-top,.offer-body,.offer-foot{padding-left:20px;padding-right:20px}
  .gal-view{aspect-ratio:4/3}
  .gs-cap{padding:44px 18px 18px}
  .fld-2{grid-template-columns:1fr;gap:0}
}
@media (max-width:560px){
  .incl-grid,.step-list{grid-template-columns:1fr}
  .inc,.step,.inc:nth-child(2n),.step:nth-child(2n){padding-left:0;padding-right:0;border-right:none}
  /* les trois chiffres restent côte à côte : empilés, ils étiraient la carte
     sur trois rangées presque vides */
  .offer-facts>div{padding:11px 5px}
  .offer-facts .v{font-size:15px}
  .offer-facts .k{letter-spacing:.1em}
  .grp-hero .plates{margin-top:38px}
}

/* ══ nav : menu déroulant Académie ══
   Le déclencheur est un <button> : il reste focusable au clavier et ne
   promet pas une destination qu'il n'a pas. Le panneau s'ouvre au survol,
   au focus (focus-within) et au clic (classe .open posée par main.js).
   .nav-drop-m porte un padding-top transparent qui sert de pont : sans lui,
   le curseur traverse un vide entre le bouton et le panneau et le referme. */
.nav-links{align-items:center}
.nav-drop{position:relative;display:flex;align-items:center}
.nav-drop-t{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--on-turf-2);padding:5px 0;background:none;border:none;
  cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:color .18s}
.nav-drop-t:hover,.nav-drop:hover .nav-drop-t,.nav-drop.open .nav-drop-t{color:var(--on-turf)}
.nav-drop-t.act{color:var(--sand-3)}
.nav-drop-t svg{width:9px;height:9px;flex-shrink:0;transition:transform .2s;margin-top:1px}
.nav-drop:hover .nav-drop-t svg,.nav-drop:focus-within .nav-drop-t svg,
.nav-drop.open .nav-drop-t svg{transform:rotate(180deg)}
.nav-drop-m{position:absolute;top:100%;left:-20px;padding-top:20px;min-width:268px;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s}
.nav-drop:hover .nav-drop-m,.nav-drop:focus-within .nav-drop-m,.nav-drop.open .nav-drop-m{
  opacity:1;visibility:visible;transform:none}
.nav-drop-in{background:rgba(15,36,25,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--rule-turf);border-radius:2px;padding:8px;
  box-shadow:0 22px 48px rgba(15,36,25,.4)}
.nav-links .nav-drop-in a{display:block;padding:12px 14px;font-size:10.5px;letter-spacing:.16em;
  color:var(--on-turf-2);border-radius:2px;transition:background .16s,color .16s}
.nav-links .nav-drop-in a:hover{background:var(--turf-3);color:var(--on-turf)}
.nav-links .nav-drop-in a.act{color:var(--sand-3)}
.nav-links .nav-drop-in a.act::after{display:none}
.nav-drop-in a .d{display:block;font-family:var(--ui);font-size:11px;font-weight:400;
  letter-spacing:.02em;text-transform:none;color:var(--on-turf-3);margin-top:5px}
.nav-drop-in .sep{height:1px;background:var(--rule-turf);margin:6px 10px}

/* volet mobile : le groupe Académie se replie sous son intitulé.
   L'intitulé est un bouton qui se lit comme les autres entrées du volet ;
   le chevron pivote à l'ouverture. Les villes ne portent plus de tiret :
   un filet vertical les rattache à leur titre, ce qui dit la même chose
   sans meubler le début de chaque ligne. */
.drawer-group{border-bottom:1px solid var(--rule-turf)}
.drawer .drawer-h{display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;padding:16px 0;background:none;border:none;text-align:left;cursor:pointer;
  font-family:var(--display);font-size:28px;color:var(--on-turf)}
.drawer .drawer-h svg{width:20px;height:20px;flex-shrink:0;color:var(--on-turf-3);
  transition:transform .24s cubic-bezier(.2,.7,.3,1)}
.drawer-group.open .drawer-h svg{transform:rotate(180deg)}
/* replié par défaut ; l'ouverture se joue sur la hauteur pour rester animable */
.drawer-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .26s cubic-bezier(.2,.7,.3,1)}
.drawer-sub>*{overflow:hidden}
.drawer-group.open .drawer-sub{grid-template-rows:1fr}
.drawer-sub-in{display:flex;flex-direction:column;margin-left:2px;padding-left:18px;
  border-left:1px solid var(--rule-turf)}
.drawer-group .drawer-sub a{display:block;font-size:19px;padding:10px 0;border-bottom:none;
  color:var(--on-turf-2)}
.drawer-group .drawer-sub a:last-child{padding-bottom:16px}
.drawer-group .drawer-sub a[aria-current]{color:var(--sand-3)}
@media (prefers-reduced-motion:reduce){
  .drawer-sub,.drawer .drawer-h svg{transition:none}
}
@media (max-height:520px) and (max-width:960px){
  .drawer .drawer-h{font-size:22px;padding:11px 0}
  .drawer-group .drawer-sub a{font-size:17px;padding:7px 0}
}

/* ══ pages académie ══ */
.acad-hero{background:var(--turf);color:var(--on-turf);position:relative;overflow:hidden;padding:180px 0 76px}
/* photo des juniors au practice en fond d'en-tête. Le haut de l'image est un
   ciel très clair : le voile est donc dégradé comme sur l'en-tête groupes —
   dense là où se posent l'intitulé, le titre et le chapô, levé sur la pelouse.
   Le cadrage descend sous l'horizon (center 66%) pour garder les joueurs dans
   le bloc, et l'en-tête n'a pas de courbes de niveau : sur une photo elles se
   liraient comme des rayures. */
.acad-hero .ah-bg{position:absolute;inset:0;pointer-events:none;
  background:var(--turf) url('images/academie-hero.jpg') center 66%/cover no-repeat}
.acad-hero .ah-scrim{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(15,36,25,.9) 0%,rgba(15,36,25,.86) 52%,
      rgba(15,36,25,.66) 78%,rgba(15,36,25,.4) 100%),
    linear-gradient(90deg,rgba(15,36,25,.46) 0%,rgba(15,36,25,0) 72%)}
/* le texte prend l'ombre portée des autres en-têtes photo : elle rattrape les
   pixels clairs qui subsistent sous le voile (la nav, elle, a déjà son fond
   turf plein via .acad-page) */
.acad-hero .wrap{position:relative;text-shadow:0 2px 22px rgba(15,36,25,.7),0 1px 4px rgba(15,36,25,.55)}
.acad-hero h1{font-size:clamp(38px,5vw,68px);line-height:1.05;margin:24px 0 0;color:var(--on-turf)}
.acad-hero h1 em{font-style:italic;color:var(--sand-3)}
.acad-hero .lede{font-size:17px;line-height:1.62;color:var(--on-turf);max-width:56ch;margin:24px 0 0}
.acad-hero .cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.acad-hero .plates{max-width:560px;margin-top:48px;border-top:1px solid var(--rule-turf);padding-top:4px}
.acad-hero .plate .v small{font-size:16px;font-weight:400}
/* sur la photo, l'intitulé des cartouches à 34 % d'opacité décrochait */
.acad-hero .plate .k{color:var(--on-turf-2)}

/* ── cartouches adultes : deux prix, un « ou » ──
   Le pack et la séance à l'unité sont une alternative : le filet qui les
   sépare cède la place au mot, comme dans le tableau plus bas. La colonne
   du « ou » ne prend que sa largeur, les trois autres se partagent le reste. */
.plates.plates-or{grid-template-columns:1fr 1fr auto 1fr}
.plates-or .plate.no-rule{border-right:none}
.plates-or .p-or{display:flex;align-items:center;justify-content:center;padding:20px 14px 0;
  font-family:var(--num);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--on-turf-2);align-self:center}
.acad-page header.nav{background:rgba(15,36,25,.94);backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);border-bottom-color:var(--rule-turf)}

/* ── bascule adultes / enfants (pages académie) ──
   Sous la bannière : deux pastilles rouges qui disent quelle moitié de
   l'offre on regarde. Les sections portent data-aud ; main.js masque
   l'autre moitié. Rouge assumé — c'est le premier choix de la page. */
.audbar{background:var(--chalk);border-bottom:1px solid var(--rule);padding:26px 0}
.audbar .wrap{display:flex;align-items:center;justify-content:center;gap:12px 26px;flex-wrap:wrap}
.audbar-l{margin:0;font-family:var(--ui);font-size:10.5px;font-weight:700;letter-spacing:.3em;
  text-transform:uppercase;color:var(--flag)}
.audbar-btns{display:flex;gap:10px;flex-wrap:wrap}
.audb{font-family:var(--ui);font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  padding:15px 38px;border:2px solid var(--flag);border-radius:2px;background:transparent;color:var(--flag);
  cursor:pointer;transition:background .18s,color .18s}
.audb:hover{background:rgba(194,64,47,.09)}
.audb[aria-pressed="true"]{background:var(--flag);color:var(--chalk)}
.audb[aria-pressed="true"]:hover{background:var(--flag-2)}
/* les blocs masqués portent leur propre display (grid, flex…) : [hidden]
   seul ne suffirait pas à les faire disparaître */
[data-aud][hidden]{display:none}
/* la barre partage le fond crème de la section qui la suit : ses 26 px et
   les 104 px de la section s'additionnent en un vide de 130 px avant le
   premier titre. La première section visible se rapproche donc de la barre
   — les [hidden] intercalés sont les sections de l'autre public, pour que
   la vue enfants démarre comme la vue adultes. */
.audbar + .pad,
.audbar + [hidden] + .pad,
.audbar + [hidden] + [hidden] + .pad{padding-top:56px}

/* offre adulte — une carte large, chiffre à gauche, faits à droite */
.adult{background:var(--chalk)}
.adult-card{display:grid;grid-template-columns:minmax(0,340px) 1fr;gap:0;margin-top:44px;
  border:1px solid var(--rule);background:var(--sand)}
.adult-price{background:var(--turf);color:var(--on-turf);padding:38px 34px;display:flex;flex-direction:column}
.adult-price .r{font-family:var(--num);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--sand-3)}
.adult-price .v{font-family:var(--num);font-size:clamp(44px,5.4vw,62px);font-weight:700;line-height:1;margin-top:20px}
.adult-price .v small{font-family:var(--ui);font-size:17px;font-weight:600;letter-spacing:.1em;margin-left:8px}
.adult-price .u{font-size:13.5px;line-height:1.6;color:var(--on-turf-2);margin-top:14px;max-width:26ch}
.adult-price .sig{margin-top:auto;padding-top:28px;font-family:var(--display);font-style:italic;
  font-size:19px;line-height:1.4;color:var(--sand-3)}
.adult-facts{padding:34px 34px 30px}
.adult-facts .row{display:grid;grid-template-columns:44px 1fr;gap:18px;padding:20px 0;
  border-bottom:1px solid var(--rule-2)}
.adult-facts .row:first-child{padding-top:0}
.adult-facts .row:last-child{border-bottom:none;padding-bottom:0}
.adult-facts .ic{width:44px;height:44px;border-radius:50%;background:var(--turf);color:var(--sand-3);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.adult-facts .ic svg{width:20px;height:20px}
.adult-facts .k{font-family:var(--ui);font-size:9.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-3)}
.adult-facts .v{font-family:var(--display);font-size:24px;line-height:1.25;color:var(--ink);margin-top:7px}
.adult-facts .v b{font-weight:500;font-style:italic;color:var(--fairway)}
.adult-facts .s{font-size:14px;line-height:1.6;color:var(--ink-2);margin-top:7px}

/* ── les deux formules, côte à côte ──
   Le pack et la séance à l'unité sont un choix, pas une liste : deux colonnes
   de même poids, coupées par un « ou ». Le nombre de séances compte autant
   que le prix, il est donc composé en gros, sous le chiffre. */
.adult-card.duo{grid-template-columns:1fr}
.price-duo{display:grid;grid-template-columns:1fr auto 1fr;background:var(--turf);color:var(--on-turf)}
.pd-cell{padding:34px}
.pd-cell .r{font-family:var(--num);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sand-3)}
.pd-cell .v{font-family:var(--num);font-size:clamp(42px,4.9vw,62px);font-weight:700;line-height:1;
  margin-top:15px;font-variant-numeric:tabular-nums}
.pd-cell .v small{font-family:var(--ui);font-size:16px;font-weight:600;letter-spacing:.1em;margin-left:9px}
.pd-cell .q{font-family:var(--display);font-size:clamp(20px,2.1vw,26px);line-height:1.22;margin-top:11px}
.pd-cell .q b{font-weight:500;font-style:italic;color:var(--sand-3)}
.pd-cell .u{font-size:13.5px;line-height:1.6;color:var(--on-turf-2);margin:14px 0 0;max-width:32ch}
/* le mot s'assoit sur le filet et le coupe : son fond est celui du bloc */
.pd-or{position:relative;display:flex;align-items:center;justify-content:center;width:86px}
.pd-or::before{content:'';position:absolute;top:34px;bottom:34px;left:50%;width:1px;
  background:var(--rule-turf)}
.pd-or span{position:relative;background:var(--turf);padding:12px 0;font-family:var(--num);
  font-size:13px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--on-turf)}
.pd-sig{grid-column:1/-1;border-top:1px solid var(--rule-turf);padding:19px 34px;margin:0;
  font-family:var(--display);font-style:italic;font-size:17px;color:var(--sand-3)}
/* côte à côte, chaque formule flotte dans une colonne bien plus large que son
   texte : on la centre sur son axe, de part et d'autre du « ou ». Empilées
   (voir plus bas), elles reprennent le fil à gauche du reste de la page. */
@media (min-width:701px){
  .pd-cell{text-align:center}
  .pd-cell .u{margin-inline:auto}
  .pd-sig{text-align:center}
}
/* le renvoi qui suit la carte : « plutôt en individuel ? » */
.adult-alt{display:flex;align-items:center;justify-content:space-between;gap:20px 30px;flex-wrap:wrap;
  margin-top:26px;padding:26px 34px;border:1px solid var(--rule);background:var(--sand)}
.adult-alt p{margin:0;font-size:15.5px;line-height:1.62;color:var(--ink-2);max-width:60ch}
.adult-alt b{font-weight:600;color:var(--ink)}

/* un bloc « ça arrive » : même grammaire que les cartes, en pointillé */
.soonbox{margin-top:44px;padding:56px 34px;text-align:center;
  border:1px dashed rgba(18,33,26,.28);background:var(--chalk)}
.soonbox .soon-tag{display:inline-block;font-family:var(--num);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--flag)}
.soonbox .t{font-family:var(--display);font-size:clamp(26px,3.2vw,36px);line-height:1.15;margin:14px 0 0}
.soonbox p{font-size:15.5px;line-height:1.62;color:var(--ink-2);max-width:54ch;margin:16px auto 0}
.soonbox .btn{margin-top:28px}

/* académie juniors — quatre niveaux, une carte par niveau */
.lvl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px}
.lvl{border:1px solid rgba(18,33,26,.3);background:var(--chalk);display:flex;flex-direction:column;
  border-top:3px solid var(--c,var(--fairway))}
.lvl-top{padding:24px 22px 20px;border-bottom:1px solid rgba(18,33,26,.3)}
.lvl-top .r{font-family:var(--num);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.lvl-top .t{font-family:var(--display);font-size:27px;line-height:1.15;margin-top:9px;color:var(--c,var(--fairway))}
.lvl-top .s{font-size:13.5px;line-height:1.6;color:var(--ink-2);margin-top:10px;min-height:4.8em}
/* le bandeau prix reprend le bloc sombre de l'offre adulte : le tarif est
   la même information et se lit du même geste, quel que soit le niveau */
.lvl-cost{padding:20px 22px;background:var(--turf-3);border-bottom:1px solid rgba(18,33,26,.3)}
.lvl-cost .v{font-family:var(--num);font-size:29px;font-weight:700;color:var(--on-turf);line-height:1}
.lvl-cost .v small{font-family:var(--ui);font-size:13px;font-weight:600;letter-spacing:.08em;
  margin-left:6px;color:var(--sand-3)}
.lvl-cost .k{font-family:var(--ui);font-size:9.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--on-turf-3);margin-top:9px}
.lvl ul{list-style:none;margin:0;padding:22px;flex:1}
.lvl li{position:relative;padding:0 0 0 22px;margin:0 0 13px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.lvl li:last-child{margin-bottom:0}
.lvl li::before{content:'';position:absolute;left:0;top:8px;width:7px;height:7px;
  background:var(--c,var(--fairway));border-radius:1px}
.lvl li b{color:var(--ink);font-weight:600}
/* le bandeau tient sur une ou deux lignes selon le niveau ; la hauteur de
   deux lignes est réservée dans tous les cas pour que les quatre bandeaux
   commencent à la même hauteur — visible dès que deux cartes sont côte à
   côte, et sur le rail où la carte voisine dépasse */
.lvl-foot{margin:0 22px 22px;padding:14px 16px;min-height:calc(3em + 28px);
  background:var(--c,var(--fairway));color:var(--chalk);
  font-family:var(--ui);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  line-height:1.5;border-radius:2px;display:flex;align-items:center;gap:10px}
.lvl-foot svg{width:15px;height:15px;flex-shrink:0}
.lvl-note{font-size:14.5px;line-height:1.7;color:var(--ink-2);margin:34px 0 0;max-width:78ch}
.lvl-note b{color:var(--ink)}

/* les quatre niveaux au doigt — sur téléphone, quatre cartes empilées font
   quatre écrans de défilement avant la suite de la page. La grille devient
   donc un rail que l'on fait glisser : une carte par écran, la suivante qui
   dépasse pour dire qu'il y en a d'autres, et des puces sous le rail qui
   situent la lecture et servent de raccourci. Le rail déborde jusqu'aux
   bords de l'écran ; le calage (scroll-padding) remet la carte dans la marge
   du texte. Tout tient dans le CSS : sans JS, il reste un rail glissable. */
.lvl-dots{display:none}
@media (max-width:760px){
  .lvl-grid{display:flex;grid-template-columns:none;gap:14px;margin-top:34px;
    padding:2px 22px 4px;margin-left:-22px;margin-right:-22px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;
    scroll-padding-left:22px;scrollbar-width:none}
  .lvl-grid::-webkit-scrollbar{display:none}
  /* chaque carte prend la hauteur de son contenu : côte à côte les quatre
     s'alignaient, sur le rail l'alignement ne se voit plus et n'ajoutait
     qu'un vide sous les listes courtes */
  .lvl-grid{align-items:flex-start}
  .lvl{flex:0 0 calc(100% - 62px);scroll-snap-align:start;scroll-snap-stop:always}
  /* le rail masque ce qui n'est pas à l'écran : l'apparition au défilement
     ne se déclencherait jamais pour les cartes 2 à 4 */
  .lvl-grid .lvl{opacity:1;transform:none}
  .lvl-dots{display:flex;gap:8px;align-items:center;margin-top:12px}
  /* le trait fait 3px, la cible du doigt 24 : le bouton porte la hauteur,
     le trait est peint dedans */
  .lvl-dot{flex:1;max-width:70px;height:24px;padding:0;border:none;background:none;
    cursor:pointer;display:flex;align-items:center}
  .lvl-dot::before{content:'';display:block;width:100%;height:3px;
    background:var(--rule);transition:background .25s}
  .lvl-dot[aria-selected="true"]::before{background:var(--fairway)}
  .lvl-note{margin-top:26px}
  /* une carte = un écran : sur téléphone la carte doit se lire d'un seul
     regard, sans défilement vertical au milieu du rail. Les marges, les
     corps et les réserves de hauteur sont donc resserrés — même carte,
     même ordre de lecture, simplement plus compacte. */
  .lvl-top{padding:18px 18px 15px}
  .lvl-top .t{font-size:23px;margin-top:7px}
  .lvl-top .s{font-size:12.5px;line-height:1.5;margin-top:8px;min-height:3em}
  .lvl-cost{padding:14px 18px}
  .lvl-cost .v{font-size:24px}
  .lvl-cost .v small{font-size:12px}
  .lvl-cost .k{margin-top:7px}
  .lvl ul{padding:16px 18px}
  .lvl li{font-size:13.5px;margin-bottom:9px;padding-left:19px}
  .lvl li::before{top:7px;width:6px;height:6px}
  .lvl-foot{margin:0 18px 18px;padding:11px 13px;min-height:0;font-size:9.5px;letter-spacing:.14em}
}
/* petits téléphones — la carte gagne la place que prenait le voisin qui
   dépasse : moins de lignes dans la liste, donc une carte qui tient encore
   dans l'écran même pour les niveaux les plus fournis */
@media (max-width:400px){
  .lvl{flex:0 0 calc(100% - 46px)}
  .lvl-top{padding:15px 16px 13px}
  .lvl-top .s{min-height:0}
  .lvl-cost{padding:12px 16px}
  .lvl ul{padding:13px 16px}
  .lvl li{margin-bottom:7px}
  .lvl-foot{margin:0 16px 14px;padding:10px 12px}
}

/* planning — un bloc par niveau, une ligne par créneau */
.plan{background:var(--turf);color:var(--on-turf);position:relative;overflow:hidden}
.plan .wrap{position:relative}
.plan h2{color:var(--on-turf)}
.plan .h-sub{color:var(--on-turf-2)}
/* Un panneau par niveau plutôt que quatre colonnes séparées par un filet :
   sur fond sombre, un aplat se lit de loin là où un trait de 1px disparaît. */
.plan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:44px;align-items:start}
.plan-col{background:rgba(241,237,225,.06);border:1px solid rgba(241,237,225,.2);
  border-top:3px solid var(--c,var(--sand-3));border-radius:2px;padding:24px 22px 26px}
.plan-col .t{font-family:var(--display);font-size:24px;color:var(--c,var(--sand-3))}
.plan-col .d{font-family:var(--ui);font-size:9.5px;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(241,237,225,.55);margin-top:9px}
.plan-slot{margin-top:18px;padding-top:16px;border-top:1px solid rgba(241,237,225,.2)}
.plan-slot .day{font-family:var(--ui);font-size:12.5px;font-weight:600;
  color:rgba(241,237,225,.78);line-height:1.5}
.plan-slot .hr{font-family:var(--num);font-size:19px;font-weight:700;color:var(--on-turf);margin-top:6px}
.plan-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-top:44px;padding-top:32px;border-top:1px solid var(--rule-turf)}
.plan-foot p{font-family:var(--display);font-style:italic;font-size:22px;color:var(--sand-3);margin:0}

/* page « bientôt » — Rabat, Marrakech */
.soon{background:var(--chalk);text-align:center}
.soon .wrap{max-width:760px}
.soon h2{margin-top:18px}
.soon .h-sub{margin-left:auto;margin-right:auto}
.soon-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:38px}
.soon-list{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;margin-top:56px;text-align:left;
  border-top:1px solid var(--rule)}
.soon-list div{padding:26px 22px 0 0;border-right:1px solid var(--rule-2)}
.soon-list div:last-child{border-right:none}
.soon-list div:not(:first-child){padding-left:22px}
.soon-list .t{font-family:var(--display);font-size:20px;color:var(--ink)}
.soon-list p{font-size:14px;line-height:1.6;color:var(--ink-2);margin:10px 0 0}

@media (max-width:1080px){
  .lvl-grid{grid-template-columns:1fr 1fr}
  .plan-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:960px){
  .acad-hero{padding:150px 0 60px}
  .adult-card{grid-template-columns:1fr}
  /* empilés, les blocs n'ont plus de colonne voisine : le retrait de 22px
     qui séparait les colonnes doit tomber avec elles. Il est repris sur le
     même sélecteur qu'en large, sinon le :not() l'emporte et seul le premier
     bloc revient à la marge. */
  .soon-list{grid-template-columns:1fr}
  .soon-list div,.soon-list div:not(:first-child){border-right:none;
    border-bottom:1px solid var(--rule-2);padding:22px 0}
  .soon-list div:last-child{border-bottom:none}
}
@media (max-width:760px){
  .plan-grid{grid-template-columns:1fr}
  .adult-price,.adult-facts{padding-left:22px;padding-right:22px}
  .acad-hero .plates{margin-top:38px}
  /* quatre colonnes ne tiennent pas : le « ou » garde sa place, les plaques
     se resserrent et le libellé passe sous le chiffre sans déborder */
  .plates.plates-or{grid-template-columns:1fr 1fr auto 1fr}
  .plates-or .plate{padding-left:8px;padding-right:8px}
  .plates-or .p-or{padding:20px 6px 0;font-size:9.5px;letter-spacing:.14em}
  .audbar{padding:20px 0}
  .audbar + .pad,
  .audbar + [hidden] + .pad,
  .audbar + [hidden] + [hidden] + .pad{padding-top:40px}
  .audbar-btns{width:100%}
  /* les deux pastilles se partagent la largeur plutôt que de passer l'une
     sous l'autre : le choix reste lisible d'un coup d'œil */
  .audb{flex:1 1 0;padding:15px 12px;letter-spacing:.14em}
  .adult-alt{padding:22px;justify-content:flex-start}
  .soonbox{padding:40px 22px}
}

/* ══ pack adultes : resserrer la carte sur téléphone ══
   Empilée, la carte occupait près de deux écrans. Le prix garde sa taille de
   repère, mais les rembourrages dessinés pour deux colonnes hautes n'ont plus
   de raison d'être une fois le bloc seul dans sa rangée. */
@media (max-width:700px){
  /* empilées, les deux formules faisaient deux écrans à elles seules : on
     descend d'un cran pour que le pack, le « ou » et la séance à l'unité
     tiennent ensemble sous les yeux */
  .price-duo{grid-template-columns:1fr}
  .pd-cell{padding:22px}
  .pd-cell .v{font-size:44px;margin-top:8px}
  .pd-cell .v small{font-size:15px;margin-left:7px}
  .pd-cell .q{font-size:20px;margin-top:6px}
  .pd-cell .u{font-size:13px;line-height:1.55;margin-top:9px;max-width:none}
  .pd-or{width:auto;height:42px}
  .pd-or::before{top:50%;bottom:auto;left:22px;right:22px;width:auto;height:1px}
  .pd-or span{padding:8px 0;font-size:12px}
  .pd-sig{padding:15px 22px;font-size:15px}
  .adult-price{padding-top:26px;padding-bottom:26px}
  .adult-price .v{font-size:40px;margin-top:14px}
  .adult-price .u{margin-top:11px;max-width:none}
  /* margin-top:auto collait la signature au bas d'une colonne aussi haute que
     les faits d'à côté ; empilée, la colonne n'a plus ce voisin et l'auto ne
     produisait qu'un vide. */
  .adult-price .sig{margin-top:0;padding-top:18px}
  .adult-facts{padding-top:22px;padding-bottom:20px}
  .adult-facts .row{grid-template-columns:34px 1fr;gap:13px;padding:15px 0}
  .adult-facts .ic{width:34px;height:34px}
  .adult-facts .ic svg{width:16px;height:16px}
  .adult-facts .v{font-size:19px;margin-top:5px}
  /* les créneaux se cassaient entre l'heure de début et celle de fin */
  .adult-facts .v b{white-space:nowrap}
  .adult-facts .s{font-size:13.5px;line-height:1.55;margin-top:5px}
}

/* ═══════════════════════════════════════════════════════════
   Search — keyword eyebrow inside the h1, language switch,
   beginner guide and FAQ (academie-casablanca)
   ═══════════════════════════════════════════════════════════ */

/* The eyebrow that used to sit above each hero title as a .label now lives
   inside the h1, so the heading Google reads carries the search words
   ("Académie de golf à Casablanca") while the slogan keeps its place. It is
   drawn exactly like .label.on-turf; the h1 loses its top margin because the
   eyebrow now provides the gap. */
h1 .h1-k{display:block;margin:0 0 24px;font-family:var(--ui);font-size:10.5px;font-weight:600;
  line-height:1.7;letter-spacing:.3em;text-transform:uppercase;font-style:normal;color:var(--on-turf-3)}
.hero h1.kick,.acad-hero h1.kick,.coaches-hero h1.kick,.tarifs-hero h1.kick,.grp-hero h1.kick{margin-top:0}
/* Laissée libre, la ligne casse au milieu de la liste (« CASABLANCA, RABAT, »
   puis « MARRAKECH ») — sur téléphone comme sur la colonne étroite du héros en
   grand écran. Les villes forment donc toujours leur propre ligne, et le point
   médian qui les séparait disparaît avec elle. L'espace qui le précède reste
   dans le texte : c'est lui qui sépare les deux groupes de mots pour Google. */
h1 .h1-k .k-loc{display:block}
h1 .h1-k .k-sep{display:none}

/* language switch — rides in the conditions strip so the full nav keeps its
   width, and stays visible above the open mobile drawer */
.cond .lang{margin-left:30px;padding:4px 0;color:var(--sand-3);text-decoration:underline;text-underline-offset:3px}
.cond .lang:hover{color:var(--on-turf)}
@media (max-width:760px){.cond .lang{margin-left:auto}}

.guide{background:var(--sand)}
.guide-in{display:grid;grid-template-columns:.8fr 1.2fr;gap:0}
.guide-head{padding-right:52px}
/* the column is narrow: at the full h2 size "Apprendre le golf" breaks after "le" */
.guide-head h2{margin-top:16px;font-size:clamp(30px,3.3vw,44px)}
.guide-body{border-left:1px solid var(--rule);padding-left:52px}
.guide-body h3{font-size:24px;line-height:1.2;margin:36px 0 0}
.guide-body h3:first-child{margin-top:0}
.guide-body p{font-size:15.5px;line-height:1.72;color:var(--ink-2);margin:12px 0 0;max-width:62ch}
.guide a,.faq a{color:var(--flag);text-decoration:underline;text-underline-offset:3px}
.faq{margin-top:104px}
.faq h2{margin-top:16px}
.faq-list{margin-top:40px;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{font-size:clamp(19px,1.9vw,23px);line-height:1.3;color:var(--ink);transition:color .18s}
.faq summary:hover h3{color:var(--flag)}
.faq summary::after{content:'+';flex-shrink:0;font-family:var(--num);font-size:22px;line-height:1;color:var(--flag);transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{font-size:15px;line-height:1.72;color:var(--ink-2);margin:0 0 24px;max-width:70ch}
@media (max-width:960px){
  .guide-in{grid-template-columns:1fr}
  .guide-head{padding-right:0;margin-bottom:36px}
  .guide-body{border-left:none;padding-left:0;border-top:1px solid var(--rule);padding-top:36px}
}
@media (max-width:760px){
  .faq{margin-top:68px}
  .faq summary{padding:18px 0}
}