:root, [data-theme="dark"] {
  --surface-000: #08090B;
  --surface-100: #0D0F12;
  --surface-200: #15181D;
  --surface-300: #1C2026;
  --surface-400: #232830;
  --surface-500: #2C323A;
  --surface-inverse: #F5F5F2;
  --border-subtle: #232830;
  --border-strong: #6B727C;
  --ink-000: #F5F5F2;
  --ink-100: #B5B8BE;
  --ink-200: #777C84;
  --ink-inverse: #08090B;
  --accent-500: #B8895A;
  --accent-600: #A3764A;
  --accent-400: #D8B77A;
  --accent-300: #E8D3AD;
  --accent-ink: #D8B77A;
  --accent-wash: #B8895A1f;
  --brand-glow: #3A2A1C;
  --success-500: #5FD29B;
  --warning-500: #E8A33B;
  --danger-500: #FF6B6F;
  --focus-ring: #FFFFFF;
  --chart-1: #B8895A;
  --chart-2: #E8D3AD;
  --chart-3: #5FD29B;
  --chart-4: #B5B8BE;
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.6);
  --shadow-sm: 0 8px 22px rgba(0,0,0,0.6);
  --shadow-md: 0 22px 52px rgba(0,0,0,0.66);
  --shadow-lg: 0 48px 104px rgba(0,0,0,0.72);
}

[data-theme="light"] {
  --surface-000: #FBFAF8;
  --surface-100: #F3F1ED;
  --surface-200: #EAE7E1;
  --surface-300: #DFDBD3;
  --surface-400: #D3CEC4;
  --surface-500: #C6C0B4;
  --surface-inverse: #08090B;
  --border-subtle: #DAD5CB;
  --border-strong: #7C766A;
  --ink-000: #08090B;
  --ink-100: #3C4048;
  --ink-200: #5E626A;
  --ink-inverse: #F5F5F2;
  --accent-500: #B8895A;
  --accent-600: #A3764A;
  --accent-400: #D8B77A;
  --accent-300: #E8D3AD;
  --accent-ink: #7A5424;
  --accent-wash: #B8895A29;
  --brand-glow: #E7D9C6;
  --success-500: #0B6E44;
  --warning-500: #8A5A0C;
  --danger-500: #BC2126;
  --focus-ring: #08090B;
  --chart-1: #B8895A;
  --chart-2: #E8D3AD;
  --chart-3: #0B6E44;
  --chart-4: #3C4048;
  --shadow-xs: 0 1px 2px rgba(8,9,11,0.06);
  --shadow-sm: 0 8px 22px rgba(8,9,11,0.08);
  --shadow-md: 0 22px 52px rgba(8,9,11,0.10);
  --shadow-lg: 0 48px 104px rgba(8,9,11,0.14);
}

: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: 104px;
  --space-10: 144px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --container-max: 1240px;
  --container-narrow: 760px;
  --gutter-mobile: 20px;
  --gutter-tablet: 32px;
  --gutter-desktop: 48px;
  --breakpoint-sm: 480px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1120px;
  --nav-height: 68px;
  --opacity-disabled: 0.45;
  --opacity-muted: 0.7;
  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

.display-xl {
  font-family: var(--font-display);
  font-size: 82px;
  line-height: 0.92;
  font-weight: 800;
  letter-spacing: -0.045em;
}

.display-l {
  font-family: var(--font-display);
  font-size: 58px;
  line-height: 0.98;
  font-weight: 700;
  letter-spacing: -0.035em;
}

.display-m {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -0.028em;
}

.heading-l {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.heading-m {
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.heading-s {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.body-l {
  font-family: var(--font-sans);
  font-size: 19px;
  line-height: 1.58;
  font-weight: 400;
}

.body-m {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.62;
  font-weight: 400;
}

.body-s {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  font-weight: 400;
}

.caption {
  font-family: var(--font-sans);
  font-size: 12.5px;
  line-height: 1.45;
  font-weight: 400;
}

.label {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.mono-s {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  font-weight: 400;
}

/* Workflow Events — bundle.css
   Charge apres tokens.css. Chaque valeur vient d'un jeton ; les seules
   valeurs ecrites en clair ici sont les durees du mouvement, que
   tokens.json ne porte pas. */

:root{
  --dur-1:120ms;            /* micro-interaction: hover, press */
  --dur-2:220ms;            /* state change: menu, tab, accordion */
  --dur-3:420ms;            /* entrance: reveal on scroll */
  --ease-out:cubic-bezier(.22,.8,.28,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --font-fallback:system-ui,-apple-system,"Segoe UI",sans-serif;
}

/* ---------- base ---------- */
.os-root{background:var(--surface-000);color:var(--ink-000);font-family:var(--font-sans,var(--font-fallback));font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
.os-root *,.os-root *::before,.os-root *::after{box-sizing:border-box}
.os-root a{color:inherit;text-decoration:none}
.os-root :focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--radius-xs);
  box-shadow:0 0 0 4px var(--surface-000)}
.os-muted{color:var(--ink-200)}
.os-dim{color:var(--ink-100)}

/* ---------- layout ---------- */
.os-container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--gutter-mobile)}
.os-narrow{max-width:var(--container-narrow)}
.os-section{padding-block:var(--space-8)}
.os-section--flush{padding-block:0}
.os-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-5)}
.os-stack{display:grid;gap:var(--space-4)}
.os-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.os-span-2{grid-column:span 2}.os-span-3{grid-column:span 3}.os-span-4{grid-column:span 4}
.os-span-6{grid-column:span 4}.os-span-8{grid-column:span 4}.os-span-12{grid-column:span 4}
.os-rule{height:1px;background:var(--border-subtle);border:0;margin:0}

@media (min-width:768px){
  .os-container{padding-inline:var(--gutter-tablet)}
  .os-section{padding-block:var(--space-9)}
  .os-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-6)}
  .os-span-6{grid-column:span 6}.os-span-8{grid-column:span 6}.os-span-12{grid-column:span 6}
}
@media (min-width:1120px){
  .os-container{padding-inline:var(--gutter-desktop)}
  .os-section{padding-block:var(--space-10)}
  .os-grid{grid-template-columns:repeat(12,minmax(0,1fr))}
  .os-span-6{grid-column:span 6}.os-span-8{grid-column:span 8}.os-span-12{grid-column:span 12}
}

/* ---------- type helpers ---------- */
.os-display{font-family:var(--font-display,var(--font-fallback));font-weight:700;letter-spacing:-.035em;line-height:.98;text-wrap:balance;margin:0;font-size:clamp(40px,7.4vw,76px)}
.os-display--l{font-size:clamp(32px,5.4vw,56px);letter-spacing:-.03em;line-height:1.02}
.os-display--m{font-size:clamp(26px,3.8vw,40px);font-weight:600;letter-spacing:-.025em;line-height:1.06}
.os-heading{font-family:var(--font-display,var(--font-fallback));font-weight:600;letter-spacing:-.015em;margin:0}
.os-label{font-family:var(--font-mono,monospace);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;line-height:1}
.os-lede{font-size:19px;line-height:1.55;color:var(--ink-100);max-width:62ch;margin:0}
.os-body{font-size:16px;line-height:1.6;color:var(--ink-100);margin:0}
.os-num{font-family:var(--font-mono,monospace);font-variant-numeric:tabular-nums}

/* ---------- button ---------- */
.os-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);font-family:var(--font-sans,var(--font-fallback));font-weight:500;font-size:15px;line-height:1;white-space:nowrap;border:1px solid transparent;border-radius:var(--radius-sm);padding:14px 20px;cursor:pointer;transition:background var(--dur-1) var(--ease-out),border-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out)}
.os-btn:active{transform:translateY(1px)}
.os-btn--primary{background:var(--accent-500);color:var(--ink-inverse)}
.os-btn--primary:hover{background:var(--accent-600)}
.os-btn--secondary{background:transparent;color:var(--ink-000);border-color:var(--border-strong)}
.os-btn--secondary:hover{background:var(--surface-200);border-color:var(--ink-200)}
.os-btn--ghost{background:var(--surface-200);color:var(--ink-000)}
.os-btn--ghost:hover{background:var(--surface-300)}
.os-btn--quiet{background:transparent;color:var(--ink-100);padding-inline:var(--space-2)}
.os-btn--quiet:hover{color:var(--ink-000)}
.os-btn--sm{font-size:13.5px;padding:9px 14px}
.os-btn--lg{font-size:16px;padding:18px 26px}
.os-btn--full{width:100%}
.os-btn[disabled],.os-btn[aria-disabled="true"]{opacity:var(--opacity-disabled);pointer-events:none}
@media (max-width:480px){.os-btn--lg{width:100%}}
.os-btn__icon{width:1em;height:1em;flex:none;transition:transform var(--dur-1) var(--ease-out)}
.os-btn:hover .os-btn__icon{transform:translateX(2px)}

/* ---------- bandeau d'appel a l'action ---------- */
.os-ctaband{display:grid;gap:var(--space-4);align-items:center;padding:var(--space-6);border-radius:var(--radius-md);
  background:linear-gradient(120deg,color-mix(in srgb,var(--brand-glow) 30%,transparent),var(--surface-200) 70%);
  border:1px solid var(--border-subtle)}
@media (min-width:860px){.os-ctaband{grid-template-columns:minmax(0,1fr) auto;gap:var(--space-6)}}
.os-ctaband b{display:block;font-family:var(--font-display,var(--font-fallback));font-weight:600;letter-spacing:-.02em;
  font-size:clamp(19px,2.4vw,26px);line-height:1.2;text-wrap:balance}
.os-ctaband span{display:block;margin-top:8px;font-size:14.5px;color:var(--ink-100);max-width:60ch}
.os-ctaband .os-row{gap:10px}

/* ---------- badge ---------- */
.os-badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono,monospace);font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;padding:5px 9px;border-radius:var(--radius-xs);background:var(--surface-200);color:var(--ink-100);border:1px solid var(--border-subtle)}
.os-badge__dot{width:6px;height:6px;border-radius:var(--radius-pill);background:currentColor;flex:none}
.os-badge--accent{background:var(--accent-wash);color:var(--accent-ink);border-color:transparent}
.os-badge--success{color:var(--success-500)}
.os-badge--warning{color:var(--warning-500)}
.os-badge--danger{color:var(--danger-500)}

/* ---------- card ---------- */
.os-card{display:flex;flex-direction:column;gap:var(--space-3);background:var(--surface-200);border:1px solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-5);transition:border-color var(--dur-2) var(--ease-out),background var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.os-card--bare{background:transparent;border-color:transparent;padding-inline:0}
.os-card--raised{background:var(--surface-200);box-shadow:var(--shadow-xs)}
.os-card--feature{gap:var(--space-4)}
.os-card--link:hover{border-color:var(--border-strong);transform:translateY(-2px)}
.os-card--link:hover .os-card__arrow{transform:translateX(3px)}
.os-card__eyebrow{color:var(--ink-200)}
.os-card__title{font-family:var(--font-display,var(--font-fallback));font-size:20px;font-weight:600;letter-spacing:-.015em;line-height:1.25;margin:0;color:var(--ink-000)}
.os-card__body{font-size:14px;line-height:1.55;color:var(--ink-100);margin:0}
.os-card__icon{width:22px;height:22px;color:var(--accent-ink)}
.os-card__foot{margin-top:auto;padding-top:var(--space-3);display:flex;align-items:center;gap:var(--space-2);color:var(--ink-000);font-size:14px}
.os-card__arrow{transition:transform var(--dur-1) var(--ease-out)}

/* ---------- stat ---------- */
.os-stat{display:flex;flex-direction:column;gap:4px;padding-block:var(--space-4);border-top:1px solid var(--border-subtle)}
.os-stat__value{font-family:var(--font-display,var(--font-fallback));font-size:clamp(32px,4vw,44px);font-weight:700;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink-000)}
.os-stat__label{color:var(--accent-ink)}
.os-stat__note{font-size:13px;color:var(--ink-200)}

/* ---------- section header ---------- */
.os-sechead{display:flex;flex-direction:column;gap:var(--space-4);max-width:var(--container-narrow)}
.os-sechead--center{margin-inline:auto;text-align:center;align-items:center}
.os-sechead__eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--accent-ink)}
.os-sechead__eyebrow::before{content:"";width:22px;height:1px;background:var(--accent-500)}

/* ---------- field ---------- */
.os-field{display:grid;gap:7px}
.os-field__label{color:var(--ink-200)}
.os-field__control{width:100%;font-family:var(--font-sans,var(--font-fallback));font-size:15.5px;line-height:1.4;color:var(--ink-000);background:var(--surface-200);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:13px 14px;transition:border-color var(--dur-1) var(--ease-out),background var(--dur-1) var(--ease-out)}
.os-field__control::placeholder{color:var(--ink-200)}
.os-field__control:hover{border-color:var(--ink-200)}
.os-field__control:focus{outline:2px solid var(--focus-ring);outline-offset:1px;border-color:var(--focus-ring)}
.os-field__control[aria-invalid="true"]{border-color:var(--danger-500)}
.os-field__hint{font-size:12.5px;color:var(--ink-200)}
.os-field__hint--error{color:var(--danger-500)}
textarea.os-field__control{min-height:112px;resize:vertical}

/* ---------- navigation ---------- */
.os-nav{position:sticky;top:0;z-index:60;padding-top:env(safe-area-inset-top,0px);background:var(--surface-000);
  border-bottom:1px solid transparent;transition:border-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),background var(--dur-2) var(--ease-out)}
.os-nav[data-scrolled="true"]{background:color-mix(in srgb,var(--surface-000) 88%,transparent);backdrop-filter:blur(14px);
  border-bottom-color:var(--border-subtle);box-shadow:var(--shadow-sm)}
.os-nav__in{display:flex;align-items:center;gap:var(--space-5);height:var(--nav-height)}
.os-nav__brand{display:flex;align-items:center;flex:none}
.os-nav__logo{height:42px;width:auto;display:block}
.os-nav__wordmark{font-family:var(--font-display,var(--font-fallback));font-weight:700;font-size:19px;letter-spacing:-.02em}
.os-nav__menu{display:none;align-items:center;gap:2px;margin-left:var(--space-3)}
.os-nav__item{position:relative}
.os-nav__link{display:inline-flex;align-items:center;gap:7px;font-size:14.5px;color:var(--ink-100);background:none;border:0;
  font-family:var(--font-sans,var(--font-fallback));padding:9px 12px;border-radius:var(--radius-sm);cursor:pointer;
  transition:color var(--dur-1) var(--ease-out),background var(--dur-1) var(--ease-out)}
.os-nav__link:hover,.os-nav__item[data-open="true"] .os-nav__link{color:var(--ink-000);background:var(--surface-200)}
.os-nav__link[aria-current="page"]{color:var(--ink-000)}
.os-nav__chev{width:9px;height:9px;flex:none;transition:transform var(--dur-2) var(--ease-out);opacity:.75}
.os-nav__item[data-open="true"] .os-nav__chev{transform:rotate(180deg)}
/* passerelle invisible entre l'intitule et le panneau : sans elle, la souris
   quitte l'entree en traversant l'espace, et le menu se referme sous le doigt */
.os-drop::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.os-drop{position:absolute;top:calc(100% + 10px);left:-8px;min-width:300px;padding:10px;border-radius:var(--radius-md);
  background:var(--surface-200);border:1px solid var(--border-subtle);box-shadow:var(--shadow-md);
  opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.os-nav__item[data-open="true"] .os-drop{opacity:1;transform:none;pointer-events:auto}
.os-drop--wide{display:grid;grid-template-columns:repeat(2,minmax(230px,1fr));gap:2px}
.os-drop__title{grid-column:1/-1;font-family:var(--font-mono,monospace);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-200);padding:10px 12px 6px}
.os-drop a{display:grid;gap:2px;padding:11px 12px;border-radius:var(--radius-sm);transition:background var(--dur-1) var(--ease-out)}
.os-drop a:hover{background:var(--surface-300)}
.os-drop b{font-size:14.5px;font-weight:500;color:var(--ink-000)}
.os-drop span{font-size:12.5px;color:var(--ink-200);line-height:1.45}
.os-nav__end{margin-left:auto;display:flex;align-items:center;gap:var(--space-3)}
.os-nav__login{display:none;font-size:14.5px;color:var(--ink-100);padding:9px 6px;transition:color var(--dur-1) var(--ease-out)}
.os-nav__login:hover{color:var(--ink-000)}
.os-nav__cta{display:none}
.os-nav__burger{width:42px;height:42px;display:inline-grid;place-content:center;gap:5px;background:none;border:0;cursor:pointer;padding:0}
.os-nav__burger span{display:block;width:20px;height:2px;border-radius:2px;background:var(--ink-000);
  transition:transform var(--dur-2) var(--ease-out),opacity var(--dur-1) linear}
.os-nav[data-open="true"] .os-nav__burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.os-nav[data-open="true"] .os-nav__burger span:nth-child(2){opacity:0}
.os-nav[data-open="true"] .os-nav__burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* feuille mobile */
.os-sheet{position:fixed;inset:calc(var(--nav-height) + env(safe-area-inset-top,0px)) 0 0 0;z-index:59;background:var(--surface-000);
  border-top:1px solid var(--border-subtle);overflow-y:auto;overscroll-behavior:contain;
  padding:var(--space-4) var(--gutter-mobile) calc(var(--space-8) + env(safe-area-inset-bottom,0px));
  opacity:0;transform:translateY(-10px);pointer-events:none;visibility:hidden;
  transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out),visibility var(--dur-2)}
.os-nav[data-open="true"] + .os-sheet,.os-sheet[data-open="true"]{opacity:1;transform:none;pointer-events:auto;visibility:visible}
.os-sheet__group{border-bottom:1px solid var(--border-subtle)}
.os-sheet__head{width:100%;display:flex;justify-content:space-between;align-items:center;gap:16px;background:none;border:0;cursor:pointer;
  font-family:var(--font-display,var(--font-fallback));font-size:21px;font-weight:600;letter-spacing:-.02em;color:var(--ink-000);
  padding:18px 0;text-align:left}
.os-sheet__head i{font-style:normal;font-family:var(--font-mono,monospace);font-size:19px;color:var(--accent-ink);
  transition:transform var(--dur-2) var(--ease-out)}
.os-sheet__group[data-open="true"] .os-sheet__head i{transform:rotate(45deg)}
.os-sheet__links{display:none;padding-bottom:16px;gap:2px}
.os-sheet__group[data-open="true"] .os-sheet__links{display:grid}
.os-sheet__links a{padding:11px 0;font-size:15.5px;color:var(--ink-100)}
.os-sheet__links a:hover{color:var(--ink-000)}
.os-sheet__foot{display:grid;gap:10px;margin-top:var(--space-6)}
.os-sheet__foot .os-btn{width:100%}
.os-sheet__meta{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:var(--space-5);
  font-family:var(--font-mono,monospace);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-200)}

/* CTA collant mobile */
.os-stickycta{position:fixed;left:0;right:0;bottom:0;z-index:58;display:flex;gap:10px;align-items:center;
  padding:12px var(--gutter-mobile) calc(12px + env(safe-area-inset-bottom,0px));
  background:color-mix(in srgb,var(--surface-000) 92%,transparent);backdrop-filter:blur(14px);border-top:1px solid var(--border-subtle);
  transform:translateY(120%);transition:transform var(--dur-2) var(--ease-out)}
.os-stickycta[data-show="true"]{transform:none}
.os-stickycta .os-btn{flex:1;justify-content:center}
.os-stickycta__note{display:none}
@media (min-width:480px){.os-stickycta__note{display:block;font-size:12.5px;color:var(--ink-200);max-width:42%}}

.os-lang{display:inline-flex;align-items:center;gap:2px;background:var(--surface-200);border:1px solid var(--border-subtle);
  border-radius:var(--radius-pill);padding:3px}
.os-lang button{font-family:var(--font-mono,monospace);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-200);
  background:none;border:0;border-radius:var(--radius-pill);padding:5px 9px;cursor:pointer;
  transition:color var(--dur-1) var(--ease-out),background var(--dur-1) var(--ease-out)}
.os-lang button[aria-pressed="true"]{background:var(--surface-300);color:var(--ink-000)}

@media (min-width:1000px){
  .os-nav__menu{display:flex}
  .os-nav__login,.os-nav__cta{display:inline-flex}
  .os-nav__burger{display:none}
  .os-sheet{display:none}
  .os-stickycta{display:none}
}

/* ---------- footer ---------- */
.os-footer{background:var(--surface-100);border-top:1px solid var(--border-subtle);
  padding-block:var(--space-8) var(--space-5)}
.os-footer__top{display:grid;gap:var(--space-6)}
@media (min-width:768px){.os-footer__top{grid-template-columns:minmax(0,1.3fr) minmax(0,2fr)}}
@media (min-width:1120px){.os-footer__top{grid-template-columns:minmax(0,1.15fr) minmax(0,2.4fr);gap:var(--space-7)}}
.os-footer__brand{display:grid;gap:var(--space-4);align-content:start;max-width:330px}

.os-footer__claim{font-size:14.5px;color:var(--ink-100);line-height:1.6;margin:0}
.os-footer__mails{display:grid;gap:4px}
.os-footer__mails a{font-family:var(--font-mono,monospace);font-size:13px;color:var(--ink-100);transition:color var(--dur-1) var(--ease-out)}
.os-footer__mails a:hover{color:var(--ink-000)}
.os-footer__cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5) var(--space-4)}
@media (min-width:768px){.os-footer__cols{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1120px){.os-footer__cols{grid-template-columns:repeat(5,minmax(0,1fr))}}
.os-footer h3{margin:0 0 14px;font-family:var(--font-mono,monospace);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-200);font-weight:500}
.os-footer__col a{display:block;font-size:14px;color:var(--ink-100);padding-block:5px;transition:color var(--dur-1) var(--ease-out)}
.os-footer__col a:hover{color:var(--ink-000)}
.os-footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--space-4);
  margin-top:var(--space-7);padding-top:var(--space-4);border-top:1px solid var(--border-subtle);font-size:12.5px;color:var(--ink-200)}
.os-footer__legal{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px}
.os-footer__legal a{color:var(--ink-200);transition:color var(--dur-1) var(--ease-out)}
.os-footer__legal a:hover{color:var(--ink-000)}
.os-footer__region{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono,monospace);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase}
.os-footer__region::before{content:"";width:7px;height:7px;border-radius:var(--radius-pill);background:var(--success-500)}
@media (max-width:999px){.os-footer{padding-bottom:calc(var(--space-8) + env(safe-area-inset-bottom,0px))}}

/* ---------- product frame ---------- */
.os-frame{position:relative;background:var(--surface-200);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);overflow:hidden}
.os-frame__bar{display:flex;align-items:center;gap:var(--space-3);padding:10px 14px;border-bottom:1px solid var(--border-subtle);background:var(--surface-300)}
.os-frame__dots{display:flex;gap:6px}
.os-frame__dots i{width:8px;height:8px;border-radius:var(--radius-pill);background:var(--border-strong)}
.os-frame__title{font-family:var(--font-mono,monospace);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-200)}
.os-frame__body{padding:var(--space-4);display:grid;gap:var(--space-3)}
.os-frame--phone{border-radius:28px;max-width:280px}
.os-frame--phone .os-frame__bar{justify-content:center}
.os-frame__glare{position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.05),transparent 38%)}

/* ---------- motion ---------- */
[data-reveal]{opacity:1}
.os-js [data-reveal]{opacity:0;transform:translateY(12px)}
.os-js [data-reveal].is-in{opacity:1;transform:none;transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)}
@media (prefers-reduced-motion:reduce){
  .os-root *,.os-js [data-reveal]{animation:none!important;transition:none!important}
  .os-js [data-reveal]{opacity:1!important;transform:none!important}
}

/* ---------- écran produit : capture réelle dans un cadre premium ---------- */
.os-screen{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-200);
  border:1px solid var(--border-subtle);box-shadow:var(--shadow-md)}
.os-screen__bar{display:flex;align-items:center;gap:var(--space-3);padding:10px 14px;background:var(--surface-300);
  border-bottom:1px solid var(--border-subtle)}
.os-screen__dots{display:flex;gap:6px;flex:none}
.os-screen__dots i{width:8px;height:8px;border-radius:var(--radius-pill);background:var(--border-strong)}
.os-screen__url{flex:1;min-width:0;font-family:var(--font-mono,monospace);font-size:11px;letter-spacing:.04em;color:var(--ink-200);
  background:color-mix(in srgb,var(--surface-000) 45%,transparent);border:1px solid var(--border-subtle);
  border-radius:var(--radius-pill);padding:5px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.os-screen img{display:block;width:100%;height:auto}
.os-screen__glare{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,color-mix(in srgb,var(--ink-000) 7%,transparent),transparent 40%)}
.os-screen__tag{position:absolute;right:14px;top:9px;z-index:3;font-family:var(--font-mono,monospace);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-inverse);background:var(--accent-500);
  border-radius:var(--radius-pill);padding:6px 10px}
.os-stack3{position:relative}
.os-stack3 .os-screen--back{position:absolute;right:-4%;top:-7%;width:62%;opacity:.55;transform:scale(.92);z-index:0;filter:saturate(.9)}
.os-stack3 .os-screen--front{position:relative;z-index:1}
@media (max-width:900px){.os-stack3 .os-screen--back{display:none}}

/* ---------- flux : une information qui traverse des étapes ---------- */
.os-flow{display:grid;gap:10px}
.os-flow__step{position:relative;display:grid;gap:4px;padding:14px 16px;border-radius:var(--radius-sm);
  background:var(--surface-200);border:1px solid var(--border-subtle);
  transition:border-color var(--dur-2) var(--ease-out),background var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.os-flow__step u{text-decoration:none;font-family:var(--font-mono,monospace);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-200)}
.os-flow__step b{font-family:var(--font-display,var(--font-fallback));font-size:15px;font-weight:600}
.os-flow__step small{font-size:12.5px;color:var(--ink-200);line-height:1.45}
.os-flow__step.is-on{border-color:var(--accent-500);background:var(--surface-300);transform:translateY(-2px)}
.os-flow__step.is-on u{color:var(--accent-ink)}
.os-flow--row{grid-auto-flow:row}
@media (min-width:900px){
  .os-flow--row{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0}
  .os-flow--row .os-flow__step{margin-right:22px}
  .os-flow--row .os-flow__step:last-child{margin-right:0}
  .os-flow--row .os-flow__step::after{content:"";position:absolute;top:50%;right:-22px;width:22px;height:2px;background:var(--border-subtle)}
  .os-flow--row .os-flow__step:last-child::after{display:none}
  .os-flow--row .os-flow__step::before{content:"";position:absolute;top:50%;right:-22px;width:7px;height:7px;margin-top:-2.5px;
    border-radius:var(--radius-pill);background:var(--accent-500);opacity:0}
  .os-flow--row .os-flow__step.is-flow::before{animation:os-slide .5s var(--ease-out) forwards}
  .os-flow--row .os-flow__step:last-child::before{display:none}
}
@media (max-width:899px){
  .os-flow__step{padding-left:30px}
  .os-flow__step::after{content:"";position:absolute;left:14px;top:-8px;width:2px;height:8px;background:var(--border-subtle)}
  .os-flow__step:first-child::after{display:none}
}
@keyframes os-slide{from{transform:translateX(0);opacity:1}to{transform:translateX(15px);opacity:0}}

/* ---------- orbite : un événement, tous les acteurs ---------- */
.os-orbit{position:relative;display:grid;place-items:center;width:min(100%,620px);aspect-ratio:1;margin-inline:auto;overflow:hidden}
.os-orbit__ring{position:absolute;inset:6%;border:1px dashed var(--border-subtle);border-radius:50%}
.os-orbit__ring--in{inset:24%}
.os-orbit__core{position:relative;z-index:2;display:grid;place-items:center;gap:6px;text-align:center;
  width:clamp(140px,22vw,190px);aspect-ratio:1;border-radius:50%;background:var(--surface-200);
  border:1px solid var(--accent-500);box-shadow:var(--shadow-md)}
.os-orbit__core b{font-family:var(--font-display,var(--font-fallback));font-size:clamp(15px,2vw,19px);font-weight:700;letter-spacing:-.02em}
.os-orbit__core span{font-family:var(--font-mono,monospace);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink)}
.os-orbit__node{position:absolute;z-index:1;max-width:44%;overflow:hidden;text-overflow:ellipsis;transform:translate(-50%,-50%);font-family:var(--font-mono,monospace);font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-100);background:var(--surface-200);
  border:1px solid var(--border-subtle);border-radius:var(--radius-pill);padding:9px 13px;white-space:nowrap;
  transition:border-color var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out),background var(--dur-2) var(--ease-out)}
.os-orbit__node:hover,.os-orbit__node.is-on{border-color:var(--accent-500);color:var(--accent-ink);background:var(--surface-300)}
.os-orbit svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.os-orbit svg path{fill:none;stroke:var(--border-strong);stroke-width:.35}
.os-orbit svg circle{fill:var(--accent-500);opacity:0}
.os-orbit.is-live svg circle{animation:os-travel 3.2s var(--ease-in-out) infinite}
@keyframes os-travel{0%{opacity:0;offset-distance:0%}10%{opacity:1}90%{opacity:1}100%{opacity:0;offset-distance:100%}}
@media (prefers-reduced-motion:reduce){.os-orbit.is-live svg circle{animation:none;opacity:.6}}

/* ---------- titre de scène ---------- */
.os-scene-title{font-family:var(--font-display,var(--font-fallback));font-weight:800;letter-spacing:-.04em;line-height:.94;
  text-transform:uppercase;margin:0;font-size:clamp(34px,6vw,76px);text-wrap:balance}
.os-scene-title em{font-style:normal;color:var(--accent-500);display:block}

/* ---------- interface dessinée (dans .os-screen) ----------
   Représente un écran de la plateforme sans photographie : tout est
   construit avec les tokens, donc net à toutes les tailles et traduisible. */
.os-ui{background:var(--surface-100);padding:16px;display:grid;gap:12px;font-size:12px;color:var(--ink-000)}
.os-ui__head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.os-ui__head u{text-decoration:none;display:block;font-family:var(--font-mono,monospace);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-200)}
.os-ui__head b{display:block;font-family:var(--font-display,var(--font-fallback));font-size:15px;letter-spacing:-.015em;margin-top:3px}
.os-ui__btn{font-size:11px;border:1px solid var(--border-subtle);border-radius:var(--radius-pill);padding:5px 11px;color:var(--ink-100);white-space:nowrap}
.os-ui__btn--on{background:var(--accent-500);color:var(--ink-inverse);border-color:transparent}
.os-ui__cols{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
.os-ui__card{border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--surface-000);padding:12px 13px;display:grid;gap:9px}
.os-ui__card>u{text-decoration:none;font-family:var(--font-mono,monospace);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-200)}
.os-ui__pair{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:11.5px}
.os-ui__pair i{font-style:normal;color:var(--ink-200)}
.os-ui__note{font-size:10.5px;line-height:1.5;color:var(--ink-200)}
.os-ui__list{display:grid;gap:7px}
.os-ui__line{display:flex;align-items:center;gap:10px;border:1px solid var(--border-subtle);border-radius:var(--radius-xs);
  padding:9px 11px;background:var(--surface-000)}
.os-ui__line em{font-style:normal;flex:1;min-width:0;font-size:11.5px}
.os-ui__line em b{display:block;font-size:12px;margin-bottom:2px}
.os-ui__line em span{display:block;color:var(--ink-200);font-size:10.5px;line-height:1.45}
.os-ui__line s{text-decoration:none;flex:none;font-family:var(--font-mono,monospace);font-size:9px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--success-500);border:1px solid color-mix(in srgb,var(--success-500) 40%,transparent);
  border-radius:var(--radius-pill);padding:3px 8px}
.os-ui__dot{width:24px;height:24px;flex:none;border-radius:var(--radius-pill);display:grid;place-items:center;
  background:var(--accent-wash);color:var(--accent-ink);font-family:var(--font-mono,monospace);font-size:10px;font-weight:500}
@media (max-width:560px){.os-ui__cols{grid-template-columns:minmax(0,1fr)}}

/* écran abstrait, pour l'arrière-plan d'une pile */
.os-mini{background:var(--surface-100);padding:14px 16px;display:grid;gap:10px}
.os-mini u{text-decoration:none;font-family:var(--font-mono,monospace);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-200)}
.os-mini__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.os-mini__grid i{height:30px;border-radius:5px;background:var(--surface-200);border:1px solid var(--border-subtle)}
.os-mini__grid i.is-on{background:var(--accent-wash);border-color:color-mix(in srgb,var(--accent-500) 40%,transparent)}
.os-mini__row{display:flex;align-items:center;gap:8px}
.os-mini__row b{flex:1;height:8px;border-radius:4px;background:var(--surface-300)}
.os-mini__row s{text-decoration:none;width:44px;height:8px;border-radius:4px;background:color-mix(in srgb,var(--accent-500) 45%,transparent)}

/* ======================= ASSISTANT ======================= */
.os-ia__bulle{position:fixed;right:20px;bottom:20px;z-index:60;display:inline-flex;align-items:center;gap:10px;
  border:0;cursor:pointer;border-radius:var(--radius-pill);padding:13px 18px 13px 15px;
  background:var(--accent-500);color:var(--ink-inverse);box-shadow:var(--shadow-lg);
  font-family:var(--font-sans,var(--font-fallback));font-size:14.5px;font-weight:500;
  transition:transform var(--dur-1) var(--ease-out),opacity var(--dur-2) var(--ease-out)}
.os-ia__bulle:hover{transform:translateY(-2px)}
.os-ia__bulle svg{width:19px;height:19px;flex:none}
.os-ia__bulle[data-cache="true"]{opacity:0;pointer-events:none;transform:translateY(12px)}
.os-ia__pastille{position:absolute;top:-4px;right:-4px;width:11px;height:11px;border-radius:var(--radius-pill);
  background:var(--success-500);border:2px solid var(--surface-000)}
@media (max-width:600px){
  .os-ia__bulle{right:14px;bottom:14px;padding:13px;border-radius:var(--radius-pill)}
  .os-ia__bulle span{display:none}
  body:has(.os-stickycta[data-show="true"]) .os-ia__bulle{bottom:82px}
}

.os-ia__voile{position:fixed;inset:0;z-index:61;background:color-mix(in srgb,var(--surface-000) 70%,transparent);
  opacity:0;pointer-events:none;transition:opacity var(--dur-2) var(--ease-out)}
.os-ia__voile[data-ouvert="true"]{opacity:1;pointer-events:auto}
@media (min-width:601px){.os-ia__voile{display:none}}

.os-ia{position:fixed;right:20px;bottom:20px;z-index:62;width:min(400px,calc(100vw - 40px));
  max-height:min(660px,calc(100vh - 40px));display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface-100);border:1px solid var(--border-strong);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transform:translateY(16px) scale(.98);
  transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.os-ia[data-ouvert="true"]{opacity:1;pointer-events:auto;transform:none}
@media (max-width:600px){
  .os-ia{right:0;left:0;bottom:0;width:100%;max-height:88vh;border-radius:var(--radius-lg) var(--radius-lg) 0 0;
    padding-bottom:env(safe-area-inset-bottom,0px)}
}
@media (prefers-reduced-motion:reduce){
  .os-ia,.os-ia__bulle,.os-ia__voile{transition:none}
  .os-ia{transform:none}
}

.os-ia__tete{display:flex;align-items:center;gap:12px;padding:15px 16px;border-bottom:1px solid var(--border-subtle);
  background:var(--surface-200);flex:none}
.os-ia__tete b{display:block;font-family:var(--font-display,var(--font-fallback));font-size:15px;font-weight:600;letter-spacing:-.01em}
.os-ia__tete span{display:block;font-size:12px;color:var(--ink-200);margin-top:1px}
.os-ia__avatar{width:34px;height:34px;flex:none;border-radius:var(--radius-pill);display:grid;place-items:center;
  background:var(--accent-wash);color:var(--accent-ink)}
.os-ia__fermer{margin-left:auto;flex:none;width:32px;height:32px;border-radius:var(--radius-pill);border:0;cursor:pointer;
  background:transparent;color:var(--ink-200);display:grid;place-items:center;transition:background var(--dur-1) var(--ease-out)}
.os-ia__fermer:hover{background:var(--surface-300);color:var(--ink-000)}

.os-ia__fil{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px;display:flex;flex-direction:column;gap:12px}
.os-ia__msg{max-width:88%;font-size:14.5px;line-height:1.55;border-radius:var(--radius-md);padding:11px 14px;white-space:pre-wrap;word-break:break-word}
.os-ia__msg--ia{align-self:flex-start;background:var(--surface-200);border:1px solid var(--border-subtle);color:var(--ink-000)}
.os-ia__msg--moi{align-self:flex-end;background:var(--accent-500);color:var(--ink-inverse);border:1px solid transparent}
.os-ia__msg a{color:var(--accent-ink);text-decoration:underline}
.os-ia__msg--moi a{color:inherit}
.os-ia__msg b{font-weight:600}
.os-ia__points{align-self:flex-start;display:inline-flex;gap:5px;padding:13px 15px;background:var(--surface-200);
  border:1px solid var(--border-subtle);border-radius:var(--radius-md)}
.os-ia__points i{width:6px;height:6px;border-radius:var(--radius-pill);background:var(--ink-200);animation:os-ia-saute 1.1s infinite}
.os-ia__points i:nth-child(2){animation-delay:.16s}
.os-ia__points i:nth-child(3){animation-delay:.32s}
@keyframes os-ia-saute{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.os-ia__points i{animation:none;opacity:.6}}

.os-ia__pistes{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 12px;flex:none}
.os-ia__pistes button{font-size:13px;color:var(--ink-100);background:var(--surface-200);border:1px solid var(--border-subtle);
  border-radius:var(--radius-pill);padding:8px 13px;cursor:pointer;text-align:left;
  transition:border-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
.os-ia__pistes button:hover{border-color:var(--accent-500);color:var(--ink-000)}

.os-ia__actions{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px 12px;flex:none}
.os-ia__actions .os-btn{flex:1;min-width:140px;justify-content:center;font-size:14px;padding:11px 14px}

.os-ia__bas{flex:none;border-top:1px solid var(--border-subtle);background:var(--surface-200);padding:11px 12px;
  display:flex;align-items:flex-end;gap:9px}
.os-ia__bas textarea{flex:1;min-width:0;resize:none;max-height:120px;font-family:inherit;font-size:14.5px;line-height:1.45;
  color:var(--ink-000);background:var(--surface-000);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);
  padding:11px 12px;transition:border-color var(--dur-1) var(--ease-out)}
.os-ia__bas textarea:focus{outline:none;border-color:var(--accent-500)}
.os-ia__envoyer{flex:none;width:40px;height:40px;border-radius:var(--radius-sm);border:0;cursor:pointer;
  background:var(--accent-500);color:var(--ink-inverse);display:grid;place-items:center;
  transition:background var(--dur-1) var(--ease-out),opacity var(--dur-1) var(--ease-out)}
.os-ia__envoyer:hover{background:var(--accent-600)}
.os-ia__envoyer[disabled]{opacity:var(--opacity-disabled);cursor:default}
.os-ia__mention{flex:none;font-size:11px;color:var(--ink-200);text-align:center;padding:0 16px 11px;line-height:1.4}

/* =====================================================================
   TÉLÉPHONE — le même site, pas une version allégée
   ---------------------------------------------------------------------
   Sur un écran étroit, tout se met en une colonne : les cartes se
   ressemblent, les sections se suivent sans respiration et l'ensemble
   s'aplatit. Ces règles rendent au téléphone ce que les colonnes
   donnaient au bureau — de la profondeur, un rythme, des repères — sans
   rien changer au-dessus de 720 px.
   ===================================================================== */
@media (max-width:719px){

  /* --- des cartes qui se détachent du fond ---
     Une lumière rasante venue du haut et un filet un peu plus net : la
     carte cesse d'être un rectangle de la même couleur que le sol. */
  .os-card{
    background:linear-gradient(180deg,color-mix(in srgb,var(--surface-300) 55%,var(--surface-200)) 0%,var(--surface-200) 58%);
    border-color:color-mix(in srgb,var(--border-strong) 32%,var(--border-subtle));
    padding:var(--space-4);
    box-shadow:0 1px 0 color-mix(in srgb,var(--ink-000) 6%,transparent) inset,
               0 12px 24px -20px rgb(0 0 0 / .8)}
  .os-card--bare{background:none;border-color:transparent;box-shadow:none;padding:0}
  .os-card__title{font-size:18px}

  /* --- un repère de section plus affirmé ---
     Le trait doré devient lisible de loin : c'est lui qui annonce
     qu'une nouvelle idée commence. */
  .os-sechead{gap:var(--space-3)}
  .os-sechead__eyebrow::before{width:30px;height:2px;border-radius:2px}

  /* --- du confort de lecture ---
     Un texte d'introduction de 19 px sur 350 px de large fait un mur.
     On descend d'un cran et on aère l'interligne. */
  .os-lede{font-size:17px;line-height:1.62}

  /* --- des cibles que le pouce atteint ---
     Quarante-quatre pixels : la hauteur en dessous de laquelle on rate
     un lien une fois sur trois. */
  /* On ne touche qu'a la hauteur : chaque variante garde ses marges
     internes. Un libelle long se met sur deux lignes plutot que de
     pousser la page hors de l'ecran. */
  .os-btn{min-height:46px;white-space:normal;text-align:center;text-wrap:balance}
  .os-btn--sm{min-height:40px}
  .os-btn--quiet{min-height:44px}
  .os-nav__link,.os-sheet__head,.os-drop a,.os-footer__col a{min-height:44px;display:flex;align-items:center}
  .os-footer__col a{padding-block:2px}
  /* Le choix de la langue et les liens du bas etaient hauts de vingt
     pixels : on les rend atteignables au pouce sans les grossir. */
  .os-lang button{min-height:34px;min-width:42px}
  .os-footer__mails a,.os-footer__legal a{display:inline-flex;align-items:center;min-height:38px}

  /* --- la barre d'appel ne mord plus sur le texte ---
     Un dégradé la précède : la dernière ligne lue s'éteint au lieu de
     passer brutalement sous la barre. */
  .os-stickycta::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:34px;pointer-events:none;
    background:linear-gradient(to top,var(--surface-000),transparent)}
  .os-stickycta{position:fixed}

  /* --- une bande qui défile doit se voir défiler ---
     Le voile à droite dit qu'il reste quelque chose ; il disparaît quand
     on arrive au bout. Appliqué aux bandes d'onglets des pages. */
  .rail__in,.picker__in,.filters__in{
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent);
    padding-right:34px;scroll-snap-type:x proximity}
  .rail__in>*,.picker__in>*,.filters__in>*{scroll-snap-align:start}
  .tablewrap{position:relative}
  .tablewrap::after{content:"";position:absolute;top:0;right:0;bottom:0;width:38px;pointer-events:none;
    background:linear-gradient(to left,var(--surface-000),transparent);border-radius:0 var(--radius-md) var(--radius-md) 0}
}

/* Très petits écrans : on gagne de la largeur utile sur les marges. */
@media (max-width:380px){
  .os-container{padding-inline:16px}
  .os-card{padding:var(--space-3)}
}

/* =====================================================================
   WORKFLOW EVENTS — identité et mouvement
   Ajouté à la refonte. Tout ce qui suit est nouveau ; rien au-dessus
   n'a été supprimé, seul le jeton de fond de marque a été renommé.
   ===================================================================== */

/* ---------- le monogramme ----------
   Cinq nœuds reliés par un trait qui dessine un W : l'information saisie
   une fois (le sommet, plus clair et plus gros) et les étapes qu'elle
   déclenche. Dessin vectoriel : net à toute taille, zéro octet d'image. */
/* ---------- le logo officiel ----------
   Un W metallique, moitie argent moitie bronze. C'est une image : aucun
   trace vectoriel ne rendrait ce metal brosse. Trois declinaisons, toutes
   tirees du meme fichier d'origine.
   La hauteur seule est fixee ; la largeur suit, pour qu'aucune mise a
   l'echelle ne deforme la marque. */
.os-logo{display:block;height:42px;width:auto;flex:none;
  transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)}
.os-logo--v{height:auto;width:min(340px,64vw)}
.os-nav__brand:hover .os-logo{opacity:.86;transform:translateY(-1px)}
.os-footer__logo{height:44px;width:auto}
.os-mark{display:block;flex:none;height:1.62em;width:auto}
@media (max-width:719px){.os-logo{height:36px}}
@media (max-width:420px){.os-logo{height:32px}}

/* ---------- 1. la levée ----------
   Le contenu ne surgit pas : il monte de huit pixels et se clarifie.
   Le décalage entre deux éléments d'une même rangée donne la cadence. */
.os-js [data-reveal]{opacity:0;transform:translateY(14px);filter:blur(6px);
  transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out),filter var(--dur-3) var(--ease-out)}
.os-js [data-reveal].is-in{opacity:1;transform:none;filter:none}

/* ---------- 2. le fil ----------
   Une lueur parcourt le trait qui relie deux étapes : c'est l'information
   qui passe. Le trait existe même à l'arrêt ; seule la lueur bouge. */
.os-fil{position:relative;overflow:hidden;background:var(--surface-400);border-radius:var(--radius-pill)}
.os-fil::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(90deg,transparent,var(--accent-300),transparent);
  transform:translateX(-100%);animation:os-filer 2.4s var(--ease-in-out) infinite}
@keyframes os-filer{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}

/* ---------- 3. le lustre ----------
   Un reflet champagne balaie la carte au survol. Une seule fois, court :
   la lumière effleure, elle ne clignote pas. */
.os-lustre{position:relative;overflow:hidden;isolation:isolate}
.os-lustre::before{content:"";position:absolute;inset:-40% -60%;z-index:0;pointer-events:none;opacity:0;
  background:linear-gradient(104deg,transparent 42%,color-mix(in srgb,var(--accent-300) 22%,transparent) 50%,transparent 58%);
  transform:translateX(-60%);transition:opacity var(--dur-1) linear}
.os-lustre:hover::before{opacity:1;animation:os-lustrer .9s var(--ease-out)}
.os-lustre > *{position:relative;z-index:1}
@keyframes os-lustrer{from{transform:translateX(-60%)}to{transform:translateX(60%)}}

/* ---------- 4. le dépli ----------
   Une maquette produit n'apparaît pas à plat : elle s'ouvre d'un léger
   angle et vient se poser. Cela dit « ceci est un écran », sans légende. */
.os-js [data-deplier]{opacity:0;transform:perspective(1400px) rotateX(9deg) translateY(28px) scale(.975);transform-origin:50% 0;
  transition:opacity .72s var(--ease-out),transform .72s var(--ease-out)}
.os-js [data-deplier].is-in{opacity:1;transform:perspective(1400px) rotateX(0) translateY(0) scale(1)}

/* ---------- 5. le compteur ----------
   Les chiffres se stabilisent au lieu de s'afficher. Le glyphe est en
   chasse fixe pendant la montée, pour que rien ne tressaute. */
.os-compte{font-variant-numeric:tabular-nums}
.os-compte[data-compte]{transition:color var(--dur-2) var(--ease-out)}
.os-compte.is-montant{color:var(--accent-400)}

/* ---------- 6. la bascule de scène ----------
   Entre deux grandes scènes, un filet bronze se déploie depuis la gauche.
   C'est la seule transition entre sections : elle remplace les traits. */
.os-bascule{position:relative;height:1px;border:0;margin:0;background:var(--border-subtle);overflow:visible}
.os-bascule::after{content:"";position:absolute;left:0;top:-1px;height:3px;width:0;border-radius:2px;
  background:linear-gradient(90deg,var(--accent-500),var(--accent-300));
  transition:width 1.1s var(--ease-out)}
.os-bascule.is-in::after{width:min(220px,38%)}

@media (prefers-reduced-motion:reduce){
  .os-js [data-reveal],.os-js [data-deplier]{opacity:1;transform:none;filter:none;transition:none}
  .os-fil::after,.os-lustre:hover::before{animation:none}
  .os-nav__brand:hover .os-logo{transform:none}
  .os-bascule::after{transition:none;width:min(220px,38%)}
}

/* ---------- l'encre discrète s'éclaircit dans une carte ----------
   #777C84 tient 4.6:1 sur le fond de page mais tombe à 4.2:1 sur une
   carte. Plutôt que d'interdire l'usage, on relève la valeur là où le
   fond monte : la règle vit ici, aucune page n'a à y penser. */
.os-card,.os-frame,.os-drop,.os-panneau,[data-surface="200"],[data-surface="300"]{--ink-200:#8E939B}
[data-theme="light"] .os-card,[data-theme="light"] .os-frame,
[data-theme="light"] .os-drop,[data-theme="light"] .os-panneau{--ink-200:#565A62}

/* ---------- signature du pied de page ---------- */
.os-footer__signature{margin:12px 0 0;font-family:var(--font-mono,monospace);font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--accent-400)}
.os-footer__claim{margin-top:10px}

/* ---------- fil d'Ariane ---------- */
.os-ariane{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--ink-200);margin:0 0 var(--space-4)}
.os-ariane a{color:var(--ink-100);border-bottom:1px solid transparent;transition:border-color var(--dur-1) var(--ease-out)}
.os-ariane a:hover{border-bottom-color:var(--accent-400)}
.os-ariane span[aria-current]{color:var(--ink-000)}
.os-ariane i{font-style:normal;opacity:.5}

/* ---------- garde-fou de largeur des maquettes ----------
   Le nom de la marque est plus long qu'avant : la barre de titre d'une
   maquette peut donc pousser l'ecran au-dela du telephone. Le titre se
   coupe, et la maquette ne depasse jamais son conteneur. */
.os-screen,.os-frame{min-width:0;max-width:100%}
.os-screen__bar,.os-frame__bar{min-width:0}
.os-frame__title{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.os-frame__dots{flex:none}

/* ---------- confort de pointage ----------
   Un lien de fin de paragraphe reste un lien en ligne, mais on lui donne
   de quoi etre atteint au doigt sans agrandir le texte. */
.os-ariane a,.mot a,.q p a,.liens a u{display:inline-block}
.mot a,.q p a{padding-block:5px}

/* Un enfant de grille refuse par defaut de descendre sous la largeur
   minimale de son contenu. Une maquette dont la barre de titre porte un
   nom long poussait donc toute la page. On autorise le retrecissement :
   le texte de la barre, lui, sait deja se couper. */
.os-grid > *,.os-stack > *,[class*="__grid"] > *,[class*="-grid"] > *,[class*="__cols"] > *{min-width:0}

/* ---------- curseur ----------
   Un curseur de 16 pixels de haut n'est pas attrapable au doigt. On lui
   donne une hauteur de cible de 44 pixels sans grossir le trait lui-meme. */
input[type="range"]{-webkit-appearance:none;appearance:none;background:transparent;
  width:100%;height:44px;cursor:pointer;margin:0}
input[type="range"]::-webkit-slider-runnable-track{height:5px;border-radius:999px;background:var(--surface-500)}
input[type="range"]::-moz-range-track{height:5px;border-radius:999px;background:var(--surface-500)}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:-8px;
  width:21px;height:21px;border-radius:999px;background:var(--accent-500);border:2px solid var(--surface-000)}
input[type="range"]::-moz-range-thumb{width:21px;height:21px;border:2px solid var(--surface-000);
  border-radius:999px;background:var(--accent-500)}
input[type="range"]:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:999px}

/* Une case a cocher de vingt et un pixels passe sous la cible minimale de
   vingt-quatre. On l'agrandit sans toucher au texte qui l'accompagne. */
input[type="checkbox"],input[type="radio"]{width:20px;height:20px;margin:2px;accent-color:var(--accent-500);flex:none}