/* Design system Athletik — tokens regroupes a plat pour Cloudflare. */
/* --- fonts --- */
/* Athletik webfonts — served from Google Fonts.
   SUBSTITUTION: no brand font binaries were provided. The ATHLETIK wordmark is a
   squarish geometric sans with cut/chamfered terminals; Poppins is the closest
   widely-available match and is already the cabinet's social-media font.
   Replace the @font-face src values with real binaries if the brand font exists. */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap");

/* --- colors --- */
:root{
  /* --- Brand navy (from the AK logo) --- */
  --navy-900:#0E1B3A;
  --navy-800:#152850;
  --navy-700:#1E3674; /* CORE BRAND NAVY */
  --navy-600:#2A4790;
  --navy-500:#3D5EB0;
  --navy-300:#8DA0CE;
  --navy-100:#DCE3F1;
  --navy-050:#EEF2F9;

  /* --- Neutrals: warm stone, matching the Haussmann facade + pale floors --- */
  --stone-000:#FFFFFF;
  --stone-050:#FAF9F7;
  --stone-100:#F2F1EE;
  --stone-200:#E6E4DF;
  --stone-300:#D2CFC8;
  --stone-400:#A8A49B;
  --stone-500:#7A766D;
  --stone-600:#544F47;
  --stone-800:#2A2721;

  /* --- Single accent: "orange terrain", from the treatment-room seating --- */
  --accent-600:#C7411D;
  --accent-500:#E4572E;
  --accent-100:#FBE3DA;

  /* --- Zones du corps: a categorical palette, used ONLY to colour-code
     joints/regions in the pathologies section. All four sit at a similar
     lightness and chroma to the brand navy so they read as one family. --- */
  --zone-genou:#2A6BB0;
  --zone-genou-tint:#E7EFF9;
  --zone-rachis:#5B54A6;
  --zone-rachis-tint:#ECEAF7;
  --zone-membre:#C7411D;
  --zone-membre-tint:#FBE3DA;
  --zone-cheville:#17857A;
  --zone-cheville-tint:#E0F1EF;

  /* --- Semantic: status only, never decorative --- */
  --green-500:#2F7D5B;
  --green-100:#DDEDE4;
  --amber-500:#B47A15;
  --amber-100:#F7ECD5;
  --red-500:#B4291F;
  --red-100:#F7DEDB;

  /* ================= SEMANTIC ALIASES ================= */
  --text-strong:var(--navy-900);
  --text-body:var(--stone-800);
  --text-muted:var(--stone-500);
  --text-on-dark:var(--stone-000);
  --text-on-dark-muted:var(--navy-300);
  --text-brand:var(--navy-700);
  --text-accent:var(--accent-600);

  --surface-page:var(--stone-050);
  --surface-card:var(--stone-000);
  --surface-sunken:var(--stone-100);
  --surface-brand:var(--navy-700);
  --surface-brand-deep:var(--navy-900);
  --surface-brand-tint:var(--navy-050);
  --surface-accent-tint:var(--accent-100);

  --border-hairline:var(--stone-200);
  --border-strong:var(--stone-300);
  --border-brand:var(--navy-100);
  --border-on-dark:rgba(255,255,255,.18);

  --action-primary-bg:var(--navy-700);
  --action-primary-bg-hover:var(--navy-800);
  --action-primary-bg-active:var(--navy-900);
  --action-primary-fg:var(--stone-000);
  --action-secondary-fg:var(--navy-700);
  --action-secondary-border:var(--navy-100);
  --action-secondary-bg-hover:var(--navy-050);
  --action-accent-bg:var(--accent-500);
  --action-accent-bg-hover:var(--accent-600);

  --focus-ring:0 0 0 3px rgba(30,54,116,.28);
  --scrim-photo:linear-gradient(180deg,rgba(14,27,58,0) 0%,rgba(14,27,58,.10) 45%,rgba(14,27,58,.72) 100%); /* @kind other */
  /* Hero protection: content is left-aligned, so the scrim runs left-to-right and
     stays >=.78 alpha across the whole text column. --scrim-photo is too weak for
     a bright daylight photograph. */
  --scrim-hero:linear-gradient(90deg,rgba(14,27,58,.90) 0%,rgba(14,27,58,.82) 44%,rgba(14,27,58,.42) 70%,rgba(14,27,58,.24) 100%); /* @kind other */
  --scrim-photo-flat:rgba(14,27,58,.42);
}

/* --- typography --- */
:root{
  --font-core:"Poppins","Helvetica Neue",Arial,sans-serif;
  --font-body:var(--font-core);
  --font-display:var(--font-core);

  --weight-light:300;
  --weight-regular:400;
  --weight-medium:500;
  --weight-semibold:600;
  --weight-bold:700;

  /* Display / hero — always uppercase, tight, wide-tracked like the wordmark */
  --size-display-xl:clamp(44px,6.2vw,84px);
  --size-display-lg:clamp(34px,4.4vw,58px);
  --size-display-md:clamp(28px,3.2vw,40px);

  --size-heading-lg:28px;
  --size-heading-md:22px;
  --size-heading-sm:18px;

  --size-body-lg:19px;
  --size-body-md:17px;
  --size-body-sm:15px;
  --size-caption:13px;
  --size-eyebrow:12px;

  --leading-tight:1.04;
  --leading-snug:1.18;
  --leading-heading:1.28;
  --leading-body:1.62;
  --leading-loose:1.75;

  --tracking-display:0.02em;   /* wordmark-like openness */
  --tracking-eyebrow:0.18em;   /* section eyebrows, uppercase */
  --tracking-body:0em;
  --tracking-tight:-0.01em;
}

/* --- spacing --- */
:root{
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;
  --space-10:128px;
  --space-11:160px;

  /* Layout: generous air is the brand's defining trait */
  --gutter:24px;
  --container-max:1240px;
  --container-narrow:760px;
  --section-py:var(--space-10);
  --section-py-tight:var(--space-9);
  --header-h:76px;
}

/* --- radius --- */
:root{
  --radius-none:0px;
  --radius-sm:4px;
  --radius-md:8px;   /* default: cards, inputs, images */
  --radius-lg:14px;
  --radius-pill:999px;
  --radius-circle:50%;
  --border-width:1px;
  --border-width-strong:2px;
}

/* --- elevation --- */
:root{
  /* Shadows are cool navy-tinted and low — the brand reads flat and clinical */
  --shadow-none:none;
  --shadow-hairline:0 0 0 1px var(--border-hairline);
  --shadow-sm:0 1px 2px rgba(14,27,58,.06);
  --shadow-md:0 4px 16px rgba(14,27,58,.08);
  --shadow-lg:0 16px 44px rgba(14,27,58,.12);
  --shadow-sticky:0 1px 0 rgba(14,27,58,.08);
  --blur-glass:saturate(1.4) blur(14px); /* @kind other */
  --glass-bg:rgba(255,255,255,.82);
}

/* --- motion --- */
:root{
  --ease-out:cubic-bezier(.22,.61,.36,1); /* @kind other */
  --ease-in-out:cubic-bezier(.4,0,.2,1); /* @kind other */
  --dur-fast:120ms; /* @kind other */
  --dur-base:220ms; /* @kind other */
  --dur-slow:420ms; /* @kind other */
  --dur-reveal:700ms; /* @kind other */
  --transition-ui:color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out);
}

/* --- base --- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);font-size:var(--size-body-md);line-height:var(--leading-body);color:var(--text-body);background:var(--surface-page);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);color:var(--text-strong);line-height:var(--leading-heading);font-weight:var(--weight-semibold)}
p{margin:0}
img{max-width:100%;display:block}
a{color:var(--text-brand);text-decoration:none;border-bottom:1px solid var(--navy-100);transition:var(--transition-ui)}
a:hover{color:var(--navy-900);border-bottom-color:var(--navy-700)}
:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.ak-eyebrow{font-size:var(--size-eyebrow);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);font-weight:var(--weight-semibold);color:var(--text-brand)}
.ak-container{max-width:var(--container-max);margin-inline:auto;padding-inline:var(--gutter)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}