:root {
  /* ---- Base: cool gray neutrals ---- */
  --gray-950: #0B1320;
  --gray-900: #16202B;
  --gray-800: #243240;
  --gray-700: #3A4754;
  --gray-600: #566270;
  --gray-500: #727E8C;
  --gray-400: #98A2AE;
  --gray-300: #C2C9D1;
  --gray-200: #DDE2E8;
  --gray-150: #E7EBEF;
  --gray-100: #EFF2F5;
  --gray-75:  #F1F4F7;
  --gray-50:  #F5F7FA;   /* the production page background */
  --white:    #FFFFFF;

  /* ---- Brand: Surgery Hub green ---- */
  --green-900: #144D38;
  --green-800: #1F6B4F;
  --green-700: #2C7D5F;
  --green-600: #338F6E;
  --green-500: #42A882;   /* primary brand */
  --green-400: #63C9A3;   /* light brand / gradients */
  --green-300: #8FDABF;
  --green-200: #BCE9D6;
  --green-100: #DDF4EA;
  --green-50:  #EFFAF5;

  /* ---- Semantic: Warning (amber) ---- */
  --amber-700: #B7791F;
  --amber-600: #D9920B;
  --amber-500: #F0A91B;
  --amber-100: #FBEACB;
  --amber-50:  #FEF6E7;

  /* ---- Semantic: Error / decline (red) ---- */
  --red-700: #C62F36;
  --red-600: #E5484D;
  --red-500: #F0676B;
  --red-100: #FAD7D8;
  --red-50:  #FDEEEE;

  /* ---- Semantic: Info (blue) ---- */
  --blue-700: #1B5FD0;
  --blue-600: #2D7FF9;
  --blue-500: #5598FB;
  --blue-100: #D6E6FE;
  --blue-50:  #EDF4FF;

  /* ============================================================
     SEMANTIC ALIASES — reach for these in product code
     ============================================================ */

  /* Surfaces */
  --surface-page:     var(--gray-50);
  --surface-card:     var(--white);
  --surface-raised:   var(--white);
  --surface-sunken:   var(--gray-75);
  --surface-inverse:  var(--gray-900);
  --surface-hover:    var(--gray-75);
  --surface-active:   var(--gray-100);
  --surface-selected: var(--green-50);
  --surface-brand-soft: var(--green-50);

  /* Text */
  --text-strong:   var(--gray-900);
  --text-body:     var(--gray-700);
  --text-muted:    var(--gray-500);
  --text-subtle:   var(--gray-400);
  --text-inverse:  var(--white);
  --text-link:     var(--green-700);
  --text-on-brand: var(--white);

  /* Borders */
  --border-subtle:  var(--gray-150);
  --border-default: var(--gray-200);
  --border-strong:  var(--gray-300);
  --border-focus:   var(--green-500);

  /* Brand / interactive */
  --brand:         var(--green-500);
  --brand-hover:   var(--green-600);
  --brand-active:  var(--green-700);
  --brand-light:   var(--green-400);
  --brand-subtle:  var(--green-50);
  --brand-on:      var(--white);

  /* Secondary accent (info blue) — for non-brand emphasis */
  --accent:        var(--blue-600);
  --accent-hover:  var(--blue-700);
  --accent-subtle: var(--blue-50);

  /* Status — foreground / surface pairs (mission state) */
  --status-ok-fg:        var(--green-700);   /* confirmed / done */
  --status-ok-surface:   var(--green-50);
  --status-warn-fg:      var(--amber-700);   /* à encoder / pending */
  --status-warn-surface: var(--amber-50);
  --status-crit-fg:      var(--red-700);     /* declined / cancelled */
  --status-crit-surface: var(--red-50);
  --status-info-fg:      var(--blue-700);    /* upcoming / offered */
  --status-info-surface: var(--blue-50);

  /* Focus ring */
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--green-500) 32%, transparent);
}
:root {
  /* ---- Families ---- */
  --font-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-data:    'Inter', system-ui, sans-serif;          /* use with tabular-nums */
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace; /* code only */

  /* ---- Font sizes (rem-based, 16px root) — mobile scale ---- */
  --text-2xs:  0.6875rem; /* 11px — micro meta, badges */
  --text-xs:   0.75rem;   /* 12px — captions */
  --text-sm:   0.8125rem; /* 13px — secondary text */
  --text-base: 0.9375rem; /* 15px — default mobile body */
  --text-md:   1rem;      /* 16px — comfortable body / inputs */
  --text-lg:   1.125rem;  /* 18px — list titles, card titles */
  --text-xl:   1.3125rem; /* 21px — section / screen subtitles */
  --text-2xl:  1.625rem;  /* 26px — screen titles ("Bonjour, Thomas !") */
  --text-3xl:  2rem;      /* 32px — big numbers / emphasis */
  --text-4xl:  2.5rem;    /* 40px — splash / large display */

  /* ---- Weights ---- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;

  /* ---- Line heights ---- */
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ---- Letter spacing ---- */
  --tracking-tight:   -0.02em;
  --tracking-snug:    -0.01em;
  --tracking-normal:  0em;
  --tracking-wide:    0.02em;
  --tracking-caps:    0.06em;  /* uppercase eyebrows / labels */

  /* ---- Semantic roles ---- */
  --type-eyebrow-size:  var(--text-xs);
  --type-eyebrow-track: var(--tracking-caps);
}
:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0:   0;
  --space-1:   0.25rem;  /* 4  */
  --space-2:   0.5rem;   /* 8  */
  --space-3:   0.75rem;  /* 12 */
  --space-4:   1rem;     /* 16 */
  --space-5:   1.25rem;  /* 20 */
  --space-6:   1.5rem;   /* 24 */
  --space-8:   2rem;     /* 32 */
  --space-10:  2.5rem;   /* 40 */
  --space-12:  3rem;     /* 48 */
  --space-16:  4rem;     /* 64 */
  --space-20:  5rem;     /* 80 */
  --space-24:  6rem;     /* 96 */

  /* ---- Mobile layout primitives ---- */
  --screen-max:     440px;   /* design width cap for the app */
  --screen-gutter:  20px;    /* left/right padding inside screens */
  --appbar-height:  56px;
  --bottomnav-height: 64px;

  /* ---- Touch targets (OR conditions: gloves, quick taps) ---- */
  --tap-min:    48px;        /* minimum touch target */
  --control-h-sm: 40px;
  --control-h-md: 48px;      /* default mobile control height */
  --control-h-lg: 56px;      /* primary CTAs */
  --control-pad-x: var(--space-4);
}
:root {
  /* ---- Corner radius (12px is the brand default) ---- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;   /* brand default — cards, inputs, buttons */
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-pill: 999px;
  --radius-card: var(--radius-md);

  /* ---- Border widths ---- */
  --border-hairline: 1px;
  --border-thick:    1.5px;

  /* ---- Elevation (soft, green-neutral tinted) ---- */
  --shadow-xs:  0 1px 2px rgba(22, 32, 43, 0.05);
  --shadow-sm:  0 1px 2px rgba(22, 32, 43, 0.05), 0 2px 6px rgba(22, 32, 43, 0.06);
  --shadow-md:  0 2px 6px rgba(22, 32, 43, 0.06), 0 8px 20px rgba(22, 32, 43, 0.08);
  --shadow-lg:  0 6px 16px rgba(22, 32, 43, 0.08), 0 16px 40px rgba(22, 32, 43, 0.12);
  --shadow-xl:  0 10px 24px rgba(22, 32, 43, 0.10), 0 28px 60px rgba(22, 32, 43, 0.16);
  --shadow-nav: 0 -2px 12px rgba(22, 32, 43, 0.08);   /* bottom navigation */
  --shadow-focus: var(--focus-ring);

  /* ---- Motion ---- */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);   /* @kind other */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);   /* @kind other */
  --dur-fast:   120ms;  /* @kind other */
  --dur-base:   200ms;  /* @kind other */
  --dur-slow:   300ms;  /* @kind other */
  --transition-base: all var(--dur-base) var(--ease-out);  /* @kind other */

  /* ---- Z-index scale ---- */
  --z-base:     0;     /* @kind other */
  --z-sticky:   100;   /* @kind other */
  --z-nav:      200;   /* @kind other */
  --z-dropdown: 400;   /* @kind other */
  --z-overlay:  800;   /* @kind other */
  --z-sheet:    900;   /* @kind other */
  --z-toast:    1000;  /* @kind other */
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("inter-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("inter-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("inter-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("inter-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("inter-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
body.minimal{background:#f5f7fa;font-family:Inter,Arial,sans-serif;color:#374151}.minimal main{padding-left:0;padding-right:0}.minimal header{border-bottom:1px solid #e2e6eb;padding-left:max(24px,calc((100vw - 1112px)/2));padding-right:max(24px,calc((100vw - 1112px)/2))}.minimal .brand{font-family:Inter,Arial,sans-serif;font-size:22px;color:#0b1320}.minimal .brand .mark{background:#0b1320;color:#fff;border-radius:8px;width:40px;height:40px;display:grid;place-items:center}.reference-hero{text-align:left}.reference-hero h1{max-width:none}.reference-hero h2{line-height:1.3}.reference-hero p{max-width:none}.reference-hero a{color:#0b1320;text-decoration:none}.reference-hero a:hover{text-decoration:underline}.reference-hero .primary,.nav-start{background:#0b1320;color:#fff;border-radius:8px;padding:17px 22px;font-weight:600;font-family:inherit;font-size:16px}.reference-hero .primary:hover,.nav-start:hover{background:#2c7d5f}.nav-start{padding:10px 16px;font-size:14px}.reference-hero svg{vertical-align:middle}.reference-hero #etapes{scroll-margin-top:100px}.about-us,.minimal-faq,.medical-reading{max-width:700px;width:calc(100% - 48px)}.reference-hero strong{font-weight:600} @media(max-width:650px){.minimal .brand .mark{display:none}.minimal .top-nav{gap:14px}.nav-start{display:none}.reference-hero>section:first-child{padding-top:32px!important}.reference-hero h1{font-size:34px!important}.reference-hero #etapes>div:first-child{padding:22px!important}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.minimal h1,.minimal h2,.minimal h3{color:#17365d}.minimal .primary,.minimal .reference-hero .primary,.minimal .nav-start{background:#17365d;color:#fff}.minimal .primary:hover,.minimal .reference-hero .primary:hover,.minimal .nav-start:hover{background:#244d7c}
/* Responsive reading and touch controls */
.reference-hero h1,.reference-hero h2{font-family:Inter,Arial,sans-serif}
.reference-hero :is(div,p,h1,h2,a),.minimal-faq summary,.medical-reading summary{min-width:0;overflow-wrap:break-word}
input,select,textarea{max-width:100%;min-width:0;font-size:16px}
dialog{max-height:calc(100dvh - 24px);overscroll-behavior:contain}
.icon{min-width:44px;min-height:44px}
.option{min-height:52px;white-space:normal}
summary>span{flex-shrink:0}
@media(max-width:760px){
 .reference-hero>section:first-child>div{grid-template-columns:minmax(0,1fr)!important;gap:30px!important}
 .reference-hero>section:first-child>div>div:first-child{max-width:none!important}
 .reference-hero>section{padding-left:20px!important;padding-right:20px!important}
 .reference-hero>section:last-child>div{grid-template-columns:minmax(0,1fr)!important;gap:22px!important;padding:24px!important}
 .reference-hero>section:last-child>div>div:last-child{border-left:0!important;border-top:1px solid var(--border-subtle);padding-left:0!important;padding-top:20px}
 .reference-hero h1{font-size:clamp(1.875rem,7vw,2.5rem)!important;line-height:1.15!important;letter-spacing:-.035em!important}
 .reference-hero h2{font-size:1.5rem!important}
 .reference-hero p{font-size:1rem!important;line-height:1.65!important}
 .reference-hero .primary{width:100%;min-height:52px;justify-content:center;text-align:center;white-space:normal}
 .reference-hero a[href="#etapes"]{min-height:44px}
 .about-us,.minimal-faq,.medical-reading{width:calc(100% - 40px)}
 .minimal-faq details p,.medical-reading details p,.about-us p{font-size:16px}
 .minimal header{padding:0 16px;gap:10px}
 .minimal .brand{font-size:19px}
 .minimal .top-nav{gap:12px;font-size:13px}
 .minimal .top-nav a{display:flex;align-items:center;min-height:44px;padding:8px 0}
 .minimal .brand .mark,.minimal .nav-start{display:none}
 dialog{width:calc(100% - 20px);padding:20px;border-radius:12px;max-height:calc(100dvh - 20px)}
 dialog h2{font-size:24px;line-height:1.3}
 dialog .primary{width:100%;justify-content:center;min-height:50px;white-space:normal}
 .form-row input,.form-row select{min-height:48px}
 .back{min-height:44px}
 .dialog-top{gap:12px}
 .dialog-top>span{font-size:14px}
 .minimal footer{padding-bottom:max(24px,env(safe-area-inset-bottom))}
}
@media(max-width:360px){
 .minimal header{padding:0 10px;gap:8px}
 .minimal .brand{font-size:17px}
 .minimal .top-nav{gap:10px;font-size:12px}
 .reference-hero>section{padding-left:16px!important;padding-right:16px!important}
 .reference-hero #etapes>div{padding:18px!important}
}
#qui-sommes-nous{scroll-margin-top:100px}
@media(max-width:760px){.minimal header{height:auto;min-height:72px;flex-wrap:wrap;padding-top:10px;padding-bottom:6px;gap:2px}.minimal .top-nav{width:100%;justify-content:space-between;gap:12px;margin-left:0}.minimal .top-nav a{font-size:13px}.reference-hero #etapes,#qui-sommes-nous,#faq,#lesions-genou{scroll-margin-top:120px}}
@media(max-width:360px){.minimal .top-nav{gap:8px}.minimal .top-nav a{font-size:12px}}

.injury-links{display:block;font-size:15px;line-height:2;margin:16px 0}.injury-links a{text-decoration:underline;text-underline-offset:3px;color:#17365d}.lesion[id]{scroll-margin-top:125px}

/* Simple wordmark, shared by all pages. */
.minimal .brand{color:#17365d;background:transparent}.minimal .brand .sos-word{color:#b8323b}.minimal .brand .mark{display:none}