:root{--contact-navy:#001937;--contact-blue:#1f92f0;--contact-paper:#faf8f4;--contact-sand:#ffe9b8;--contact-line:#d7dee5;--contact-muted:#5e6b78}
*{box-sizing:border-box}
body{margin:0;background:var(--contact-paper);color:var(--contact-navy);font-family:Geometria,Arial,sans-serif}
a{color:inherit;text-decoration:none}
.contact-shell{min-height:calc(100vh - 84px)}
[hidden]{display:none!important}

/* Center menu (contact-center.js swaps in the center page's header): no flash of the generic links meanwhile. */
.center-menu-pending body>.site-nav>*,.center-menu-pending body>.mobile-header-actions{visibility:hidden}

/* Hero: one title + the subjects (4 columns; 5 with the French Riviera school subjects). Once a subject is chosen it shrinks so the form comes up fast. */
.contact-hero{position:relative;overflow:hidden;padding:64px max(32px,6vw) 40px;background:var(--contact-blue)}
.contact-hero:after{content:"";position:absolute;right:-5%;top:-30%;width:38%;height:160%;background:url("uploads/brand/level-white.svg") right center/contain no-repeat;opacity:.14;pointer-events:none}
.contact-kicker{position:relative;z-index:1;margin:0 0 14px;font-size:11px;font-weight:900;letter-spacing:.16em}
.contact-hero h1{position:relative;z-index:1;max-width:1050px;margin:0;font:900 clamp(48px,6vw,92px)/.9 Geometria,Arial,sans-serif!important;letter-spacing:-.03em;text-transform:uppercase;transition:font-size .25s ease}
.contact-hero-lead{position:relative;z-index:1;max-width:640px;margin:18px 0 0;color:#fff;font-size:16px;line-height:1.6}
.contact-hero.has-choice{padding-top:44px;padding-bottom:28px}
.contact-hero.has-choice h1{font-size:clamp(40px,4.4vw,64px)}

.request-options{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:30px;max-width:1180px}
.request-option{display:flex;flex-direction:column;gap:6px;min-height:118px;padding:18px 18px 16px;border:1px solid rgba(255,255,255,.55);border-radius:14px;background:rgba(255,255,255,.12);color:#fff;transition:background .2s,border-color .2s,transform .2s}
.request-option:hover{background:rgba(255,255,255,.22);transform:translateY(-2px)}
.request-option-num{font-size:10px;font-weight:900;letter-spacing:.13em;opacity:.8}
.request-option strong{font-size:20px;line-height:1.1}
.request-option small{font-size:12px;line-height:1.4;opacity:.9}
.request-option[aria-current]{background:#fff;border-color:#fff;color:var(--contact-navy)}
.request-option[aria-current] .request-option-num{color:var(--contact-blue);opacity:1}
.has-choice .request-option{min-height:0;padding:14px 16px}
.has-choice .request-option small{display:none}
.request-options:has(>:nth-child(5)){grid-template-columns:repeat(5,minmax(0,1fr))}
/* 5 subjects on narrower screens: booking request on its own row, the other 4 below. */
@media(max-width:1180px){
  .request-options:has(>:nth-child(5)){grid-template-columns:repeat(4,minmax(0,1fr))}
  .request-options:has(>:nth-child(5))>:first-child{grid-column:1/-1}
}

/* Form + center card */
.contact-layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr);gap:28px;align-items:start;padding:36px max(32px,6vw) 90px}
.contact-form-panel{scroll-margin-top:96px;padding:32px;border:1px solid var(--contact-line);border-radius:16px;background:#fff}
.form-empty{display:grid;gap:8px;padding:6px 0}
.form-empty strong{font-size:22px}
.form-empty span{color:var(--contact-muted);line-height:1.6}
.form-head{margin-bottom:18px}
.form-head .contact-kicker{margin:0;color:var(--contact-blue)}
.form-about{display:inline-block;margin:10px 0 0;padding:8px 12px;border-radius:999px;background:var(--contact-paper);font-size:13px;font-weight:700}
.lead-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.lead-form label{display:flex;flex-direction:column;gap:7px;font-size:12px;font-weight:700}
.lead-form input,.lead-form select,.lead-form textarea{width:100%;min-height:50px;padding:13px 14px;border:1px solid #bfc9d2;border-radius:10px;background:#fff;color:var(--contact-navy);font:400 16px Geometria,Arial,sans-serif}
.lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{outline:2px solid var(--contact-blue);outline-offset:1px;border-color:var(--contact-blue)}
.lead-form textarea{min-height:96px;resize:vertical}
.lead-form .full,.lead-form fieldset{grid-column:1/-1}
.lead-form fieldset{margin:0;padding:0;border:0}
.lead-form legend{margin-bottom:10px;font-size:12px;font-weight:700}
.choice-row{display:flex;flex-wrap:wrap;gap:8px}
.choice-row label{display:block}
.choice-row input{position:absolute;opacity:0;width:1px;height:1px;min-height:0}
.choice-row span{display:block;padding:11px 15px;border:1px solid #bfc9d2;border-radius:999px;background:#fff;font-size:13px;font-weight:400;cursor:pointer}
.choice-row input:checked+span{border-color:var(--contact-navy);background:var(--contact-navy);color:#fff}
.choice-row input:focus-visible+span{outline:2px solid var(--contact-blue);outline-offset:2px}
.consent{grid-column:1/-1;display:grid!important;grid-template-columns:20px 1fr;align-items:start;gap:10px!important;font-size:11px!important;font-weight:400!important;line-height:1.5;color:var(--contact-muted)}
.consent input{width:18px;min-height:18px;margin:1px 0}
.submit-lead{grid-column:1/-1;min-height:54px;border:0;border-radius:999px;background:var(--contact-navy);color:#fff;font:900 12px Geometria,Arial,sans-serif;letter-spacing:.12em;cursor:pointer}
.submit-lead:hover{background:var(--contact-blue)}
.form-status{grid-column:1/-1;margin:0;padding:16px;border-radius:10px;background:#e9f7ef;color:#155d35;line-height:1.5}

/* Center card, Google Business style */
.center-card{position:sticky;top:104px;overflow:hidden;border:1px solid var(--contact-line);border-radius:16px;background:#fff}
.center-card-head{display:flex;gap:14px;align-items:center;padding:22px 22px 18px;background:var(--contact-navy);color:#fff}
.center-card-head img{flex:none;width:auto;max-width:120px;height:40px;object-fit:contain;object-position:left center;filter:brightness(0) invert(1)}
.center-card-head h2{margin:0;font:900 22px/1.1 Geometria,Arial,sans-serif!important;letter-spacing:-.01em;text-transform:none}
.center-card-type{margin:4px 0 0;font-size:12px;opacity:.85}
.center-card-place{margin:2px 0 0;font-size:12px;opacity:.7}
.center-card-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:14px 12px;border-bottom:1px solid #e0e5e9}
.center-card-actions a{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 2px;border-radius:10px;color:var(--contact-blue);font-size:11px;font-weight:700;text-align:center}
.center-card-actions a:hover{background:var(--contact-paper)}
.center-card-actions span{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--contact-line);border-radius:50%;font-size:16px;color:var(--contact-navy)}
.center-card-rows{margin:0;padding:4px 22px}
.center-card-rows>div{display:grid;grid-template-columns:86px 1fr;gap:10px;padding:13px 0;border-bottom:1px solid #eef1f4}
.center-card-rows>div:last-child{border-bottom:0}
.center-card-rows dt{color:var(--contact-muted);font-size:12px}
.center-card-rows dd{margin:0;font-size:14px;line-height:1.45;overflow-wrap:anywhere}
.center-card-rows a{color:var(--contact-blue);font-weight:700}
.center-card-map{display:block;width:100%;height:220px;border:0;border-top:1px solid #e0e5e9}

@media(max-width:980px){
  .contact-layout{grid-template-columns:1fr}
  .center-card{position:static}
}
@media(max-width:600px){
  .contact-hero{padding:40px 16px 22px}
  .contact-hero h1{font-size:52px}
  .contact-hero-lead{font-size:14px;margin-top:12px}
  .contact-hero.has-choice{padding-top:26px;padding-bottom:16px}
  .contact-hero.has-choice h1{font-size:36px}
  .request-options,.request-options:has(>:nth-child(5)){grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:20px}
  .request-option{min-height:92px;padding:13px 12px}
  .request-option strong{font-size:16px}
  .request-option small{font-size:11px}
  .has-choice .request-option{padding:11px 12px}
  .contact-layout{gap:18px;padding:18px 16px 60px}
  .contact-form-panel{padding:22px 16px;scroll-margin-top:112px}
  .lead-form{grid-template-columns:1fr;gap:14px}
  .lead-form>*{grid-column:1!important}
}

/* UX audit 2026-09: keep a visible error state on fields the visitor left invalid (the native bubble only shows one at a time) */
.lead-form :is(input,select,textarea):user-invalid{border-color:#c62828;box-shadow:inset 0 0 0 1px #c62828}
.lead-form .consent input:user-invalid{outline:2px solid #c62828;outline-offset:2px}