@font-face{font-family:'Archivo';src:url(fonts/archivo.woff2) format('woff2');font-weight:100 900;font-stretch:62% 125%;font-display:swap}@font-face{font-family:'Instrument Sans';src:url(fonts/instrument-400.woff2) format('woff2');font-weight:400;font-display:swap}@font-face{font-family:'Instrument Sans';src:url(fonts/instrument-500.woff2) format('woff2');font-weight:500;font-display:swap}@font-face{font-family:'Instrument Sans';src:url(fonts/instrument-600.woff2) format('woff2');font-weight:600;font-display:swap}@font-face{font-family:'Instrument Sans';src:url(fonts/instrument-700.woff2) format('woff2');font-weight:700;font-display:swap}
/* NSA Football v2 : agence sportive internationale.
   Concept : le terrain vu d'en haut. Un vert-sarcelle profond tiré du logo pour l'ouverture et la clôture,
   des lignes de craie fines (ligne médiane, rond central), une typographie large et athlétique (Archivo étendue),
   et un seul moment vivant : l'heure réelle des quatre bureaux. */
:root {
  --deep: #05272C;
  --deep-2: #0A3A40;
  --chalk: rgba(232, 246, 245, .16);
  --on-deep: #EAF4F3;
  --on-deep-2: #A9C3C2;
  --paper: #F2F5F4;
  --panel: #FFFFFF;
  --ink: #0A1C1F;
  --muted: #56696B;
  --line: #D5DEDD;
  --teal: #0B7684;
  --signal: #1BB6C8;
  --on-teal: #FFFFFF;
  --ok: #2F9E6B;
  --warn: #9A5B00;
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body: 'Instrument Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --maxw: 1200px;
  --gut: max(20px, env(safe-area-inset-left, 0px));
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #071417; --panel: #0C1D20; --ink: #E6F0EF; --muted: #9DB1B2; --line: #1D3236; --teal: #3CC9D8; --on-teal: #031417; --warn: #F2C25E; color-scheme: dark; } }
:root[data-theme="dark"] { --paper: #071417; --panel: #0C1D20; --ink: #E6F0EF; --muted: #9DB1B2; --line: #1D3236; --teal: #3CC9D8; --on-teal: #031417; --warn: #F2C25E; color-scheme: dark; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.62 var(--body); -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--deep); }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: var(--panel); padding: 10px 14px; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gut); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
main [id], section[id] { scroll-margin-top: 96px; }
.band { padding-block: clamp(64px, 9vw, 128px); }
.band.panel { background: var(--panel); border-block: 1px solid var(--line); }

h1, h2, h3 { font-family: var(--display); margin: 0; text-wrap: balance; font-stretch: 112%; }
h1 { font-weight: 800; font-size: clamp(40px, 6.4vw, 88px); line-height: .98; letter-spacing: -.025em; }
h2 { font-weight: 750; font-size: clamp(30px, 3.9vw, 52px); line-height: 1.03; letter-spacing: -.02em; }
h3 { font-weight: 700; font-size: clamp(19px, 1.7vw, 22px); line-height: 1.2; letter-spacing: -.01em; font-stretch: 104%; }
p { margin: 0; }
.lede { font-size: clamp(18px, 1.6vw, 20.5px); line-height: 1.55; color: var(--muted); max-width: 58ch; }
.muted { color: var(--muted); }
.small { font-size: 14.5px; }
.kicker { font: 600 14px/1.3 var(--body); color: var(--teal); letter-spacing: .01em; }
.stack { display: flex; flex-direction: column; gap: 18px; }
.stack.lg { gap: 40px; }
.tbc { color: var(--warn); font-weight: 600; }
.head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 18px clamp(28px, 6vw, 96px); align-items: end; }
.head .lede { justify-self: start; }
.head h1 { font-size: clamp(40px, 5.6vw, 76px); }

/* ---------- en-tête ---------- */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: color-mix(in srgb, var(--deep) 96%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--on-deep); border-bottom: 1px solid var(--chalk); }
.top .wrap { display: flex; align-items: center; gap: 18px; min-height: 76px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.brand .tile { background: #FFFFFF; border-radius: 9px; padding: 3px; display: flex; }
.brand img { height: 46px; width: auto; }
.brand .wm { display: flex; flex-direction: column; font: 800 17px/1 var(--display); font-stretch: 118%; letter-spacing: -.01em; }
.brand .wm small { font: 500 12px/1.3 var(--body); color: var(--on-deep-2); letter-spacing: 0; margin-top: 4px; font-stretch: 100%; }
.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav > a { text-decoration: none; font: 500 15.5px/1 var(--body); padding: 10px 12px; color: var(--on-deep-2); position: relative; }
.nav > a:hover, .nav > a[aria-current="page"] { color: var(--on-deep); }
.nav > a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; background: var(--signal); }
.nav > a.goal { margin-left: 6px; }
.lang { display: flex; gap: 0; margin-left: 10px; padding-left: 12px; border-left: 1px solid var(--chalk); font: 600 13px/1 var(--body); }
.lang a { text-decoration: none; padding: 9px 7px; color: var(--on-deep-2); }
.lang a[aria-current="true"] { color: var(--on-deep); box-shadow: inset 0 -2px 0 var(--signal); }
.top .btn { margin-left: 10px; }
.menu-btn { display: none; margin-left: auto; width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--chalk); background: transparent; color: var(--on-deep); align-items: center; justify-content: center; cursor: pointer; }
.menu-btn svg { width: 22px; height: 22px; }

/* ---------- boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: 999px; font: 650 16px/1 var(--body); text-decoration: none; cursor: pointer; border: 1.5px solid transparent; transition: background .18s ease, color .18s ease, border-color .18s ease; white-space: nowrap; }
.btn.solid { background: var(--ink); color: var(--paper); }
.btn.solid:hover { background: var(--teal); color: var(--on-teal); }
.btn.signal { background: var(--signal); color: #031417; }
.btn.signal:hover { background: #FFFFFF; }
.btn.line { border-color: var(--line); color: var(--ink); background: transparent; }
.btn.line:hover { border-color: var(--ink); }
.btn.ghost { border-color: var(--chalk); color: var(--on-deep); }
.btn.ghost:hover { border-color: var(--on-deep); }
.btn.small { min-height: 42px; padding: 0 18px; font-size: 14.5px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.tlink { font-weight: 650; color: var(--teal); text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 1px; }
.tlink:hover { color: var(--ink); }

/* ---------- ouverture (accueil) ---------- */
.hero { background: var(--deep); color: var(--on-deep); position: relative; overflow: hidden; isolation: isolate; }
.hero .field { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.hero .field * { fill: none; stroke: var(--chalk); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 40px clamp(32px, 5vw, 80px); align-items: end; padding-block: clamp(72px, 10vw, 140px) clamp(56px, 7vw, 96px); }
.hero .kicker { color: var(--signal); }
.hero h1 { margin-top: 22px; }
.hero h1 span { display: block; }
.hero .lede { color: var(--on-deep-2); margin-top: 26px; }
.hero .ctas { margin-top: 36px; }
.clock { border-top: 1px solid var(--chalk); }
.clock h2 { font: 600 14px/1.3 var(--body); color: var(--on-deep-2); padding: 16px 0 6px; font-stretch: 100%; letter-spacing: 0; }
.clock ul { list-style: none; margin: 0; padding: 0; }
.clock li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--chalk); }
.clock .city { font: 700 19px/1.1 var(--display); font-stretch: 112%; }
.clock .time { font: 600 22px/1 var(--display); font-variant-numeric: tabular-nums; font-stretch: 100%; }
.clock .st { font: 600 12.5px/1 var(--body); color: var(--on-deep-2); display: inline-flex; align-items: center; gap: 6px; min-width: 64px; justify-content: flex-end; }
.clock .st::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--on-deep-2); opacity: .5; }
.clock .st.on { color: var(--on-deep); }
.clock .st.on::before { background: #5BD6A0; opacity: 1; box-shadow: 0 0 0 4px rgba(91, 214, 160, .15); }
.clock .eu { padding-top: 12px; font-size: 14px; color: var(--on-deep-2); }

/* preuves */
.proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.proof div { padding: 26px 22px 28px 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.proof div + div { padding-left: 22px; border-left: 1px solid var(--line); }
.proof b { font: 750 17px/1.25 var(--display); font-stretch: 110%; }
.proof span { font-size: 14.5px; color: var(--muted); line-height: 1.45; }

/* parcours par public : onglets */
.paths { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.tabs { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.tabs button { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--line); font: 750 clamp(22px, 2.4vw, 30px)/1.1 var(--display); font-stretch: 114%; letter-spacing: -.015em; color: var(--muted); transition: color .18s ease; }
.tabs button::after { content: ""; width: 12px; height: 12px; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); opacity: 0; transition: opacity .18s ease, transform .18s ease; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--ink); }
.tabs button[aria-selected="true"]::after { opacity: 1; color: var(--teal); }
.tabs button:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
.tabpanel { display: flex; flex-direction: column; gap: 22px; padding: clamp(24px, 3.2vw, 40px); background: var(--panel); border: 1px solid var(--line); border-radius: 22px; }
.tabpanel.on { animation: pane .35s cubic-bezier(.2, .7, .2, 1); }
@keyframes pane { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tabpanel h3 { font-size: clamp(22px, 2.3vw, 28px); font-stretch: 108%; }
.ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ticks li { padding: 13px 0 13px 30px; border-top: 1px solid var(--line); position: relative; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 20px; width: 12px; height: 6px; border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(-45deg); }

/* méthode : vraie séquence, sur une ligne de touche */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; counter-reset: s; }
.steps li { position: relative; padding: 34px 26px 0 0; display: flex; flex-direction: column; gap: 10px; counter-increment: s; }
.steps li::before { content: counter(s); position: absolute; top: -17px; left: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--teal); color: var(--teal); display: grid; place-items: center; font: 700 15px/1 var(--display); }
.steps { border-top: 1.5px solid var(--line); margin-top: 17px; }
.band.panel .steps li::before { background: var(--panel); }

/* GOAL Mobility */
.goalband { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px clamp(24px, 4vw, 56px); align-items: center; padding: clamp(24px, 3.4vw, 44px); border-radius: 22px; background: var(--deep-2); color: var(--on-deep); }
.goalband img { height: 72px; width: auto; background: #FFFFFF; border-radius: 12px; padding: 6px 10px; }
.goalband .kicker { color: var(--signal); }
.goalband p.muted { color: var(--on-deep-2); max-width: 60ch; }

/* protection */
.prot { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.prot .lede { color: var(--ink); }

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 28px; gap: 16px; align-items: center; padding: 22px 0; font: 700 clamp(18px, 1.6vw, 21px)/1.3 var(--display); font-stretch: 104%; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; justify-self: end; width: 16px; height: 16px; background: linear-gradient(var(--teal), var(--teal)) center / 16px 2px no-repeat, linear-gradient(var(--teal), var(--teal)) center / 2px 16px no-repeat; transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 44px 24px 0; color: var(--muted); max-width: 70ch; }

/* services */
.pole { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 5vw, 72px); padding-block: 48px; border-top: 1px solid var(--line); scroll-margin-top: 96px; }
.pole:last-child { border-bottom: 1px solid var(--line); }
.pole .idx { font: 700 15px/1 var(--display); color: var(--teal); }
.pole .cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.pole .cols h3 { font-size: 18px; }
.pole ul { margin: 12px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.pole li { padding: 10px 0 10px 22px; position: relative; color: var(--muted); border-top: 1px solid var(--line); }
.pole li::before { content: ""; position: absolute; left: 0; top: 1.25em; width: 10px; height: 1.5px; background: var(--signal); }
.note { border-left: 2px solid var(--signal); padding: 4px 0 4px 16px; color: var(--muted); font-size: 15.5px; max-width: 75ch; }

/* agence */
.values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.values div { display: flex; flex-direction: column; gap: 10px; border-top: 2px solid var(--ink); padding-top: 18px; }
.path { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1.5px solid var(--line); }
.path li { padding: 22px 22px 0 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; position: relative; }
.path li::before { content: ""; position: absolute; top: -6px; left: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--signal); }
.path b { font: 800 26px/1 var(--display); font-stretch: 112%; color: var(--teal); }
.quote { font: 600 clamp(22px, 2.5vw, 31px)/1.36 var(--display); font-stretch: 102%; letter-spacing: -.01em; max-width: 32ch; margin: 0; }
.team-group { display: flex; flex-direction: column; gap: 16px; }
.team-group h3 { font: 600 15px/1.3 var(--body); color: var(--muted); font-stretch: 100%; }
.team { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.member { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 16px; align-items: start; padding: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; }
.member .ini { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--deep); color: var(--on-deep); font: 750 17px/1 var(--display); font-stretch: 115%; }
.member b { font: 750 17px/1.3 var(--display); font-stretch: 106%; display: block; }
.member span { font-size: 14.5px; color: var(--muted); line-height: 1.5; display: block; margin-top: 4px; }

/* formulaires */
form { display: flex; flex-direction: column; gap: 18px; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.f { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.f.full { grid-column: 1 / -1; }
label, .lab { font: 600 14.5px/1.3 var(--body); }
input, select, textarea { font: 400 16px/1.4 var(--body); color: var(--ink); background: var(--panel); border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; width: 100%; min-height: 50px; }
textarea { min-height: 130px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 18%, transparent); }
.check { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font: 400 15px/1.45 var(--body); }
.check input { min-height: 0; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--teal); }
.msg { font-size: 15px; font-weight: 600; }
.msg.bad { color: var(--warn); } .msg.ok { color: var(--teal); }
.msg a { margin-left: 4px; }
.formcard { background: var(--panel); border: 1px solid var(--line); border-radius: 22px; padding: clamp(22px, 3vw, 36px); }

/* prise de rendez-vous */
.book { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.bstep { padding-block: 26px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 16px; }
.bstep > .lab { display: flex; align-items: center; gap: 12px; font: 750 19px/1.2 var(--display); font-stretch: 108%; }
.bstep > .lab i { font-style: normal; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--teal); color: var(--teal); display: grid; place-items: center; font: 700 13px/1 var(--display); flex-shrink: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { all: unset; box-sizing: border-box; cursor: pointer; padding: 11px 16px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--panel); font: 600 15px/1.2 var(--body); }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
.days { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.day { all: unset; box-sizing: border-box; cursor: pointer; padding: 12px 8px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--panel); text-align: center; display: flex; flex-direction: column; gap: 4px; }
.day small { font: 600 12.5px/1 var(--body); color: var(--muted); text-transform: capitalize; }
.day b { font: 800 24px/1 var(--display); font-stretch: 110%; }
.day span { font: 500 12.5px/1 var(--body); color: var(--muted); text-transform: capitalize; }
.day:hover { border-color: var(--ink); }
.day[aria-pressed="true"] { background: var(--deep); border-color: var(--deep); color: var(--on-deep); }
.day[aria-pressed="true"] small, .day[aria-pressed="true"] span { color: var(--on-deep-2); }
.day[disabled] { opacity: .35; cursor: not-allowed; }
.day:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
.daynav { display: flex; justify-content: space-between; gap: 12px; }
.daynav button { all: unset; cursor: pointer; font: 600 14px/1 var(--body); color: var(--teal); padding: 6px 0; }
.daynav button[disabled] { color: var(--muted); opacity: .4; cursor: default; }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.slot { all: unset; box-sizing: border-box; cursor: pointer; padding: 12px 6px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--panel); text-align: center; font: 650 16px/1 var(--body); font-variant-numeric: tabular-nums; }
.slot:hover { border-color: var(--teal); color: var(--teal); }
.slot[aria-pressed="true"] { background: var(--teal); border-color: var(--teal); color: var(--on-teal); }
.slot:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
.summary { position: sticky; top: 100px; background: var(--deep); color: var(--on-deep); border-radius: 22px; padding: clamp(22px, 3vw, 32px); display: flex; flex-direction: column; gap: 18px; }
.summary h2 { font-size: 24px; font-stretch: 110%; }
.summary dl { margin: 0; display: flex; flex-direction: column; }
.summary dl div { display: flex; flex-direction: column; gap: 3px; padding: 12px 0; border-top: 1px solid var(--chalk); }
.summary dt { color: var(--on-deep-2); font-size: 13.5px; }
.summary dd { margin: 0; font-weight: 600; }
.summary .empty { color: var(--on-deep-2); font-size: 15px; }
.summary .done { display: flex; flex-direction: column; gap: 12px; }
.summary .done b { font: 750 20px/1.2 var(--display); }
.summary .done .links { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.summary .msg.ok, .summary .msg a { color: var(--signal); }

/* contact */
.contact-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 6vw, 96px); align-items: start; }
.mail { font: 700 clamp(19px, 2vw, 24px)/1.2 var(--display); font-stretch: 104%; text-decoration: none; border-bottom: 2px solid var(--signal); align-self: flex-start; overflow-wrap: anywhere; }
.offices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1.5px solid var(--line); }
.offices > div { padding: 24px 22px 0 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.offices > div + div { padding-left: 22px; border-left: 1px solid var(--line); }
.offices b { font: 800 26px/1.05 var(--display); font-stretch: 112%; }
.offices .cty { font-size: 14px; color: var(--muted); }
.tel { font: 650 16.5px/1.4 var(--body); font-variant-numeric: tabular-nums; text-decoration: none; margin-top: 8px; }
.tel:hover { color: var(--teal); }
.offices .acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.copybtn { border: 1px solid var(--line); background: transparent; color: var(--muted); border-radius: 999px; padding: 7px 13px; font: 600 12.5px/1 var(--body); cursor: pointer; }
.copybtn:hover { color: var(--ink); border-color: var(--ink); }

/* pages légales */
.prose { display: flex; flex-direction: column; gap: 14px; max-width: 70ch; }
.prose h2 { font-size: 22px; margin-top: 14px; }

/* ---------- pied de page ---------- */
.foot { background: var(--deep); color: var(--on-deep); position: relative; overflow: hidden; isolation: isolate; }
.foot .field { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.foot .field * { fill: none; stroke: rgba(232, 246, 245, .08); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.foot-cta { display: grid; grid-template-columns: minmax(0, 7fr) auto; gap: 28px 48px; align-items: end; padding-block: clamp(64px, 8vw, 112px) clamp(48px, 6vw, 72px); border-bottom: 1px solid var(--chalk); }
.foot-cta h2 { font-size: clamp(36px, 5.4vw, 72px); font-weight: 800; letter-spacing: -.025em; }
.foot-cta p { color: var(--on-deep-2); margin-top: 16px; max-width: 52ch; font-size: 18px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); gap: 36px; padding-block: 52px 44px; }
.foot-grid h3 { font: 600 14px/1.3 var(--body); color: var(--on-deep-2); margin-bottom: 14px; font-stretch: 100%; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.foot-grid a { text-decoration: none; color: var(--on-deep); font-size: 15.5px; }
.foot-grid a:hover { color: var(--signal); }
.foot-brand { display: flex; flex-direction: column; gap: 18px; }
.foot-brand .tile { background: #FFFFFF; border-radius: 10px; padding: 4px; align-self: flex-start; }
.foot-brand img { height: 58px; width: auto; }
.foot-brand p { color: var(--on-deep-2); font-size: 15px; max-width: 34ch; }
.foot-brand .mail { color: var(--on-deep); font-size: 17px; }
.foot-off li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.foot-off li span { color: var(--on-deep-2); font-size: 14px; }
.foot-off a { font-variant-numeric: tabular-nums; font-size: 15px; }
.foot-social { display: flex; flex-direction: column; gap: 10px; }
.foot-social a { display: inline-flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--chalk); }
.foot-social a::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; align-self: center; transform: rotate(45deg); opacity: .6; }
.foot-bottom { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; padding-block: 22px calc(26px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--chalk); font-size: 13.5px; color: var(--on-deep-2); }
.foot-bottom nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot-bottom a { color: var(--on-deep-2); text-decoration: none; }
.foot-bottom a:hover { color: var(--on-deep); }
.foot-bottom .lang { border: 0; margin: 0; padding: 0; }

.wa:hover { background: var(--ink); color: var(--paper); }

/* un seul moment d'ouverture : la page d'accueil se lève */
.rise { animation: rise .8s cubic-bezier(.2, .7, .2, 1) both; }
.rise.d2 { animation-delay: .08s; } .rise.d3 { animation-delay: .18s; } .rise.d4 { animation-delay: .3s; }
@keyframes rise { from { transform: translateY(14px); opacity: .001; } to { transform: none; opacity: 1; } }

/* ---------- adaptations ---------- */
@media (max-width: 1180px) { .top .btn { display: none; } }
@media (max-width: 1020px) {
  .menu-btn { display: inline-flex; }
  .nav { display: none; position: fixed; inset: calc(77px + env(safe-area-inset-top, 0px)) 0 0 0; background: var(--deep); flex-direction: column; align-items: stretch; gap: 0; padding: 12px max(20px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) var(--gut); overflow-y: auto; }
  .nav.open { display: flex; }
  .nav > a { font: 750 28px/1.2 var(--display); font-stretch: 112%; padding: 16px 0; border-bottom: 1px solid var(--chalk); color: var(--on-deep); }
  .nav > a[aria-current="page"] { color: var(--signal); }
  .nav > a[aria-current="page"]::after { display: none; }
  .nav > a.goal { margin: 0; }
  .nav .lang { margin: 18px 0 0; padding: 0; border: 0; }
  .nav .lang a { font-size: 16px; padding: 10px 12px; }
  .top .nav .btn.mob { display: inline-flex; margin: 22px 0 0; }
  .hero .wrap, .paths, .prot, .contact-grid, .book, .head, .pole, .foot-cta { grid-template-columns: minmax(0, 1fr); }
  .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proof div:nth-child(3) { padding-left: 0; border-left: 0; }
  .proof div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; border-top: 0; margin-top: 0; }
  .steps li { border-top: 1.5px solid var(--line); }
  .offices, .path { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 26px; }
  .offices > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .summary { position: static; }
  .goalband { grid-template-columns: minmax(0, 1fr); }
}
.nav .btn.mob { display: none; }
@media (max-width: 680px) {
  body { font-size: 16.5px; }
  .brand .wm small { display: none; }
  .proof, .values, .pole .cols, .fields, .steps, .offices, .path, .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .proof div, .proof div + div { padding: 18px 0; border-left: 0; border-top: 1px solid var(--line); }
  .proof div:first-child { border-top: 0; }
  .offices > div, .offices > div + div { padding: 20px 0 0; border-left: 0; }
  .days { grid-template-columns: repeat(5, minmax(56px, 1fr)); overflow-x: auto; gap: 8px; }
  .day b { font-size: 20px; }
  .brand img { height: 40px; }
  .hero .ctas .btn, .foot-cta .btn { width: 100%; }
  .foot-bottom { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }  .faq details p { padding-right: 0; }
}
/* tablette à l'horizontale et petit portable : le bouton de rendez-vous reste dans la navigation */
@media (min-width: 1021px) and (max-width: 1180px) {
  .top .nav .btn.mob { display: inline-flex; min-height: 40px; padding: 0 14px; font-size: 14px; margin-left: 8px; }
  .nav > a { padding: 10px 9px; font-size: 15px; }
  .lang { margin-left: 6px; padding-left: 8px; }
  .brand .wm small { display: none; }
}
/* mobile : pas de flou sur l'en-tête, sinon le menu plein écran (position fixe) serait enfermé dans l'en-tête */
@media (max-width: 1020px) {
  .top { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--deep); }
}

/* Bouton WhatsApp adaptatif : taille fluide, bords de l'iPhone, étiquette au survol, retrait quand le clavier est ouvert */
.wa { position: fixed; right: calc(clamp(12px, 2vw, 22px) + env(safe-area-inset-right, 0px)); bottom: calc(clamp(12px, 2vw, 22px) + env(safe-area-inset-bottom, 0px)); z-index: 40;
  height: clamp(50px, 3.2vw + 30px, 60px); min-width: clamp(50px, 3.2vw + 30px, 60px); padding: 0; border-radius: 999px; background: var(--signal); color: #031417;
  display: inline-flex; align-items: center; justify-content: center; gap: 0; text-decoration: none; box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .06) inset;
  transform: translateY(0) scale(1); opacity: 1; transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .25s ease, background .2s ease, padding .3s ease, gap .3s ease; }
.wa svg { width: 46%; max-width: 28px; min-width: 23px; height: auto; fill: currentColor; flex: none; }
.wa .wa-lab { max-width: 0; overflow: hidden; white-space: nowrap; font: 650 15px/1 var(--body, inherit); letter-spacing: .01em; transition: max-width .35s ease; }
.wa::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(27, 182, 200, .45); pointer-events: none; }
.wa.wa-in::after { animation: waPulse 1.6s ease-out 2; }
.wa.wa-off { transform: translateY(140%) scale(.8); opacity: 0; pointer-events: none; }
.wa.wa-lift { bottom: calc(clamp(12px, 2vw, 22px) + env(safe-area-inset-bottom, 0px) + var(--wa-lift, 0px)); }
@media (hover: hover) and (min-width: 900px) {
  .wa:hover, .wa:focus-visible { padding: 0 22px 0 18px; gap: 10px; transform: translateY(-2px); }
  .wa:hover .wa-lab, .wa:focus-visible .wa-lab { max-width: 240px; }
}
.wa:focus-visible { outline: 3px solid rgba(27, 182, 200, .45); outline-offset: 3px; }
@keyframes waPulse { 0% { box-shadow: 0 0 0 0 rgba(27, 182, 200, .45); } 100% { box-shadow: 0 0 0 18px transparent; } }
@media (prefers-reduced-motion: reduce) { .wa, .wa .wa-lab { transition: none; } .wa.wa-in::after { animation: none; } }
@media print { .wa { display: none; } }

/* ---------- finitions visuelles (revue du 9 novembre) ---------- */
.pole h2 { font-size: clamp(30px, 2.8vw, 42px); overflow-wrap: break-word; hyphens: manual; }
.top { transition: box-shadow .25s ease, background .25s ease; }
.top.scrolled { box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .7); }
.hero .clock { padding: 6px 22px 18px; border-radius: 20px; background: color-mix(in srgb, var(--deep-2) 72%, transparent); border: 1px solid var(--chalk); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero .clock li:last-child { border-bottom: 0; }
.tabpanel, .member, .goalband, .offices > div { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.tabpanel:hover, .member:hover { transform: translateY(-3px); box-shadow: 0 22px 40px -28px rgba(5, 39, 44, .45); border-color: color-mix(in srgb, var(--teal) 35%, var(--line)); }
.goalband { position: relative; overflow: hidden; }
.goalband::after { content: ''; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; border: 1px solid var(--chalk); pointer-events: none; }
.goalband:hover { transform: translateY(-2px); box-shadow: 0 26px 50px -30px rgba(0, 0, 0, .6); }
.steps li h3 { transition: color .2s ease; } .steps li:hover h3 { color: var(--teal); }
.prot-card { margin-top: clamp(40px, 6vw, 80px); padding: clamp(26px, 4vw, 52px); border-radius: 24px; background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--teal); }
.prot-card .shield { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--teal) 12%, transparent); color: var(--teal); }
.prot-card .shield svg { width: 26px; height: 26px; fill: currentColor; }
.prot-facts { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.prot-facts li { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); }
.prot-facts b { font: 700 16px/1.2 var(--display); } .prot-facts span { color: var(--muted); font-size: 14.5px; }
@media (max-width: 640px) { .prot-facts { grid-template-columns: minmax(0, 1fr); } .hero .clock { padding: 4px 16px 14px; } }
/* apparition douce au défilement (sans script, tout reste visible) */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } .tabpanel:hover, .member:hover, .goalband:hover { transform: none; } }

/* ISBA et marques du groupe */
.isbaband img { height: 72px; padding: 10px 14px; }
.foot-brands { padding-block: 8px 40px; border-top: 1px solid var(--chalk); }
.foot-brands h3 { font: 600 14px/1.3 var(--body); color: var(--on-deep-2); margin: 32px 0 16px; font-stretch: 100%; }
.foot-brands ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.foot-brands a { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid var(--chalk); border-radius: 16px; text-decoration: none; color: var(--on-deep); transition: border-color .2s, background-color .2s, transform .2s; }
.foot-brands a:hover, .foot-brands a:focus-visible { border-color: var(--signal); background: rgba(255, 255, 255, .04); transform: translateY(-1px); }
.foot-brands .bt { flex: none; width: 124px; height: 64px; background: #FFFFFF; border-radius: 12px; display: grid; place-items: center; padding: 6px 10px; }
.foot-brands .bt img { max-height: 52px; max-width: 104px; width: auto; height: auto; }
.foot-brands .bx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.foot-brands .bx b { font: 700 16px/1.2 var(--display); }
.foot-brands .bx small { color: var(--on-deep-2); font-size: 13.5px; line-height: 1.4; }
@media (max-width: 900px) { .foot-brands ul { grid-template-columns: minmax(0, 1fr); } }
.clock li.eu-h { display: block; padding: 14px 0 2px; border-bottom: 0; font: 600 12px/1.2 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--signal); }
.clock li.eu-row .city { font-size: 17px; }
.clock li.eu-row .time { font-size: 19px; }
.clock .st.none::before { display: none; }

/* Couverture photographique */
.hero.has-cover { background: #031C20; }
.hero .cover { position: absolute; inset: 0; z-index: -2; }
.hero .cover img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 58%; filter: saturate(1.08) contrast(1.04); }
.hero.has-cover::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(90deg, rgba(3, 28, 32, .94) 0%, rgba(3, 28, 32, .84) 34%, rgba(3, 28, 32, .42) 62%, rgba(3, 28, 32, .58) 100%),
  linear-gradient(0deg, rgba(3, 28, 32, .88) 0%, rgba(3, 28, 32, 0) 42%),
  linear-gradient(180deg, rgba(3, 28, 32, .55) 0%, rgba(3, 28, 32, 0) 22%); }
.hero.has-cover .wrap { min-height: min(86vh, 860px); }
.hero.has-cover h1, .hero.has-cover .lede { text-shadow: 0 2px 24px rgba(0, 0, 0, .35); }
.hero.has-cover .lede { color: #E3EEED; }
.hero .credit { position: absolute; left: 16px; bottom: 10px; margin: 0; font-size: 11px; color: rgba(232, 246, 245, .55); }
@media (max-width: 900px) {
  .hero .cover img { object-position: 58% 40%; }
  .hero.has-cover::before { background: linear-gradient(180deg, rgba(3, 28, 32, .55) 0%, rgba(3, 28, 32, .78) 38%, rgba(3, 28, 32, .95) 70%, #031C20 100%); }
  .hero.has-cover .wrap { min-height: 0; }
}