/* ============================================================================
   tokens.css — design system De Grisogono
   ----------------------------------------------------------------------------
   GÉNÉRÉ AUTOMATIQUEMENT — NE PAS ÉDITER À LA MAIN.
   Source  : Figma "Design System - Grisogono" (Kristina Gromova)
   Export  : 10.08.2026
   Refaire : node scripts/build_tokens.js
   ----------------------------------------------------------------------------
   Mode sombre : appliqué via [data-theme="dark"], et automatiquement suivant la
   préférence système sauf si un thème clair est explicitement demandé.
   ============================================================================ */

/* ── Primitives ─────────────────────────────────────────────────────────── */
:root {
  --color-base-white: #FFFFFF;
  --color-neutral-50: #FAFAFA;
  --color-neutral-alpha-50: #FFFFFFF7;
  --color-neutral-alpha-100: #FFFFFFF5;
  --color-neutral-alpha-200: #FFFFFFE5;
  --color-neutral-alpha-300: #FFFFFFD1;
  --color-neutral-alpha-400: #FFFFFF9E;
  --color-neutral-alpha-500: #FFFFFF6E;
  --color-neutral-alpha-600: #FFFFFF4A;
  --color-neutral-alpha-700: #FFFFFF38;
  --color-neutral-alpha-800: #FFFFFF1F;
  --color-neutral-alpha-900: #FFFFFF0D;
  --color-neutral-alpha-950: #FFFFFF00;
  --color-neutral-100: #F2F2F2;
  --color-neutral-200: #E4E4E4;
  --color-neutral-300: #D4D4D4;
  --color-neutral-400: #A3A3A3;
  --color-neutral-500: #737373;
  --color-neutral-600: #525252;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;
  --color-neutral-950: #0A0A0A;
  --color-base-black: #0A0A0A;
  --color-base-transparent: #FFFFFF00;
  --color-brand-50: #FCF8F0;
  --color-brand-100: #F7EEDC;
  --color-brand-200: #EFDFBE;
  --color-brand-300: #E4CB9C;
  --color-brand-400: #DABD86;
  --color-brand-500: #D0AF71;
  --color-brand-600: #B8903F;
  --color-brand-700: #96721F;
  --color-brand-800: #74580F;
  --color-brand-900: #513D0B;
  --color-brand-950: #322606;
  --color-red-50: #FDECE9;
  --color-red-100: #FAD3CC;
  --color-red-200: #F3A99C;
  --color-red-300: #EA7C69;
  --color-red-400: #DD5540;
  --color-red-500: #C0392B;
  --color-red-600: #A02A1E;
  --color-red-700: #7F1F15;
  --color-red-800: #5E160F;
  --color-red-900: #400E09;
  --color-red-950: #280805;
  --color-amber-50: #FDF3E6;
  --color-amber-100: #FAE3C0;
  --color-amber-200: #F4C68A;
  --color-amber-300: #EBA754;
  --color-amber-400: #DE8B2C;
  --color-amber-500: #C4711A;
  --color-amber-600: #A45B12;
  --color-amber-700: #83470E;
  --color-amber-800: #63350A;
  --color-amber-900: #452407;
  --color-amber-950: #2B1604;
  --color-green-50: #EEF6EC;
  --color-green-100: #D8EBD4;
  --color-green-200: #B0D6AA;
  --color-green-300: #85BE7D;
  --color-green-400: #5CA453;
  --color-green-500: #3B8933;
  --color-green-600: #2F6F29;
  --color-green-700: #255720;
  --color-green-800: #1B4018;
  --color-green-900: #122C10;
  --color-green-950: #0B1C09;
  --color-blue-50: #ECF3FB;
  --color-blue-100: #D0E3F6;
  --color-blue-200: #A0C6EC;
  --color-blue-300: #6BA5DD;
  --color-blue-400: #3E85C8;
  --color-blue-500: #2168AD;
  --color-blue-600: #1A548D;
  --color-blue-700: #14426F;
  --color-blue-800: #0F3153;
  --color-blue-900: #0A2137;
  --color-blue-950: #061523;
  --spacing-0: 0px;
  --spacing-0-5: 2px;
  --spacing-1: 4px;
  --spacing-1-5: 6px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;
  --spacing-32: 128px;
  --spacing-40: 160px;
  --spacing-48: 192px;
  --spacing-56: 224px;
  --spacing-64: 256px;
  --spacing-80: 320px;
  --spacing-96: 384px;
  --spacing-120: 480px;
  --spacing-140: 560px;
  --spacing-160: 640px;
  --spacing-180: 720px;
  --spacing-192: 768px;
  --spacing-256: 1024px;
  --spacing-320: 1280px;
  --spacing-360: 1440px;
  --spacing-400: 1600px;
  --spacing-480: 1920px;
}

/* ── Dimensions, largeurs, conteneurs, typographie ──────────────────────── */
:root {
  /* 2. Radius — Mode 1 */
  --radius-none: 0;
  --radius-xxs: 2px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 20px;
  --radius-4xl: 24px;
  --radius-full: 9999px;

  /* 3. Spacing — Mode 1 */
  --spacing-none: 0;
  --spacing-xxs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 6px;
  --spacing-md: 8px;
  --spacing-lg: 12px;
  --spacing-xl: 16px;
  --spacing-2xl: 20px;
  --spacing-3xl: 24px;
  --spacing-4xl: 32px;
  --spacing-5xl: 40px;
  --spacing-6xl: 48px;
  --spacing-7xl: 64px;
  --spacing-8xl: 80px;
  --spacing-9xl: 96px;
  --spacing-10xl: 128px;
  --spacing-11xl: 160px;

  /* 4. Widths — Mode 1 */
  --width-xxs: 320px;
  --width-xs: 384px;
  --width-sm: 480px;
  --width-md: 560px;
  --width-lg: 640px;
  --width-xl: 768px;
  --width-2xl: 1024px;
  --width-3xl: 1280px;
  --width-4xl: 1440px;
  --width-5xl: 1600px;
  --width-6xl: 1920px;
  --paragraph-max-width: 720px;

  /* 5. Containers — Value */
  --container-padding-mobile: 16px;
  --container-padding-desktop: 32px;
  --container-max-width-desktop: 1280px;

  /* 6. Typography — Value */
  --font-family-display: 'Cormorant Infant', Georgia, serif;
  --font-family-body: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --font-weight-regular: 400;
  --font-weight-regular-italic: 400;
  --font-weight-medium: 500;
  --font-weight-medium-italic: 500;
  --font-weight-semibold: 600;
  --font-weight-semibold-italic: 600;
  --font-weight-bold: 700;
  --font-weight-bold-italic: 700;
  /* 2xs : badges miniatures (HD sur vignette). Ajouté le 28.08.2026 pour
     sortir du barème sauvage (0.55rem) sans donner 12 px à un badge de
     coin de vignette. */
  --font-size-text-2xs: 10px;
  --font-size-text-xs: 12px;
  --font-size-text-sm: 14px;
  --font-size-text-md: 16px;
  --font-size-text-lg: 18px;
  --font-size-text-xl: 20px;
  --font-size-display-xs: 24px;
  --font-size-display-sm: 30px;
  --font-size-display-md: 36px;
  --font-size-display-lg: 48px;
  --font-size-display-xl: 60px;
  --font-size-display-2xl: 72px;
  --line-height-text-2xs: 14px;
  --line-height-text-xs: 18px;
  --line-height-text-sm: 20px;
  --line-height-text-md: 24px;
  --line-height-text-lg: 28px;
  --line-height-text-xl: 30px;
  --line-height-display-xs: 32px;
  --line-height-display-sm: 38px;
  --line-height-display-md: 44px;
  --line-height-display-lg: 60px;
  --line-height-display-xl: 72px;
  --line-height-display-2xl: 90px;
  --line-height-text-xs-tight: 16px;
}

/* ── Couleurs sémantiques — mode clair (défaut) ─────────────────────────── */
/* Le sélecteur d'attribut permet des îlots : un bloc marqué data-theme="light"
   redevient clair même si la page est en sombre. */
:root,
[data-theme="light"] {
  --color-text-primary: var(--color-neutral-900);
  --color-text-primary-on-brand: var(--color-neutral-950);
  --color-text-secondary: var(--color-neutral-700);
  --color-text-secondary-hover: var(--color-neutral-800);
  --color-text-secondary-on-brand: var(--color-neutral-800);
  --color-text-tertiary: var(--color-neutral-600);
  --color-text-tertiary-hover: var(--color-neutral-700);
  --color-text-tertiary-on-brand: var(--color-neutral-700);
  --color-text-quaternary: var(--color-neutral-500);
  --color-text-quaternary-on-brand: var(--color-neutral-600);
  --color-text-white: var(--color-base-white);
  --color-text-placeholder: var(--color-neutral-500);
  --color-text-brand-primary: var(--color-brand-700);
  --color-text-brand-secondary: var(--color-brand-600);
  --color-text-brand-secondary-hover: var(--color-brand-700);
  --color-text-brand-tertiary: var(--color-brand-500);
  --color-text-brand-tertiary-alt: var(--color-brand-600);
  --color-text-error-primary: var(--color-red-600);
  --color-text-error-primary-hover: var(--color-red-700);
  --color-text-warning-primary: var(--color-amber-600);
  --color-text-success-primary: var(--color-green-600);
  --color-border-primary: var(--color-neutral-950);
  --color-border-secondary: var(--color-neutral-300);
  --color-border-secondary-alt: #0000001A;
  --color-border-tertiary: var(--color-neutral-200);
  --color-border-brand: var(--color-brand-500);
  --color-border-brand-alt: var(--color-brand-600);
  --color-border-error: var(--color-red-500);
  --color-border-error-subtle: var(--color-red-300);
  --color-fg-primary: var(--color-neutral-900);
  --color-alpha-white-10: #FFFFFF1A;
  --color-alpha-white-20: #FFFFFF33;
  --color-alpha-white-30: #FFFFFF4D;
  --color-alpha-white-40: #FFFFFF66;
  --color-alpha-white-50: #FFFFFF80;
  --color-alpha-white-60: #FFFFFF99;
  --color-alpha-white-70: #FFFFFFB2;
  --color-alpha-white-80: #FFFFFFCC;
  --color-alpha-white-90: #FFFFFFE5;
  --color-alpha-white-100: #FFFFFF;
  --color-alpha-black-10: #0000001A;
  --color-alpha-black-20: #00000033;
  --color-alpha-black-30: #0000004D;
  --color-alpha-black-40: #00000066;
  --color-alpha-black-50: #00000080;
  --color-alpha-black-60: #00000099;
  --color-alpha-black-70: #000000B2;
  --color-alpha-black-80: #000000CC;
  --color-alpha-black-90: #000000E5;
  --color-alpha-black-100: #000000;
  --color-utility-neutral-50: var(--color-neutral-50);
  --color-utility-neutral-100: var(--color-neutral-100);
  --color-utility-neutral-200: var(--color-neutral-200);
  --color-utility-neutral-300: var(--color-neutral-300);
  --color-utility-neutral-400: var(--color-neutral-400);
  --color-utility-neutral-500: var(--color-neutral-500);
  --color-utility-neutral-600: var(--color-neutral-600);
  --color-utility-neutral-700: var(--color-neutral-700);
  --color-utility-neutral-800: var(--color-neutral-800);
  --color-utility-neutral-900: var(--color-neutral-900);
  --color-utility-brand-50: var(--color-brand-50);
  --color-utility-brand-50-alt: var(--color-brand-50);
  --color-utility-brand-100: var(--color-brand-100);
  --color-utility-brand-100-alt: var(--color-brand-100);
  --color-utility-brand-200: var(--color-brand-200);
  --color-utility-brand-200-alt: var(--color-brand-200);
  --color-utility-brand-300: var(--color-brand-300);
  --color-utility-brand-300-alt: var(--color-brand-300);
  --color-utility-brand-400: var(--color-brand-400);
  --color-utility-brand-400-alt: var(--color-brand-400);
  --color-utility-brand-500: var(--color-brand-500);
  --color-utility-brand-500-alt: var(--color-brand-500);
  --color-utility-brand-600: var(--color-brand-600);
  --color-utility-brand-600-alt: var(--color-brand-600);
  --color-utility-brand-700: var(--color-brand-700);
  --color-utility-brand-700-alt: var(--color-brand-700);
  --color-utility-brand-800: var(--color-brand-800);
  --color-utility-brand-800-alt: var(--color-brand-800);
  --color-utility-brand-900: var(--color-brand-900);
  --color-utility-brand-900-alt: var(--color-brand-900);
  --color-app-store-badges-border: #A6A6A6;
  --color-avatars-styles-bg-neutral: #E0E0E0;
  --color-footers-button-fg: var(--color-brand-200);
  --color-footers-button-fg-hover: var(--color-base-white);
  --color-icons-fg-brand: var(--color-brand-600);
  --color-icons-fg-brand-on: var(--color-neutral-950);
  --color-icons-featured-light-fg-brand: var(--color-brand-600);
  --color-icons-featured-light-fg-gray: var(--color-neutral-500);
  --color-icons-featured-light-fg-error: var(--color-red-600);
  --color-icons-featured-light-fg-warning: var(--color-amber-600);
  --color-icons-featured-light-fg-success: var(--color-green-600);
  --color-mockups-screen-border: var(--color-neutral-900);
  --color-sliders-handle-bg: var(--color-base-white);
  --color-sliders-handle-border: var(--color-brand-600);
  --color-toggles-border: var(--color-neutral-300);
  --color-toggles-slim-border-pressed: var(--color-bg-brand-solid);
  --color-toggles-slim-border-pressed-hover: var(--color-bg-brand-solid-hover);
  --color-tooltips-supporting-text: var(--color-neutral-300);
  --color-text-editor-icon-fg: var(--color-neutral-400);
  --color-text-editor-icon-fg-active: var(--color-neutral-500);
  --color-utility-red-50: var(--color-red-50);
  --color-utility-amber-50: var(--color-amber-50);
  --color-utility-amber-100: var(--color-amber-100);
  --color-utility-amber-200: var(--color-amber-200);
  --color-utility-amber-300: var(--color-amber-300);
  --color-utility-amber-400: var(--color-amber-400);
  --color-utility-amber-500: var(--color-amber-500);
  --color-utility-amber-600: var(--color-amber-600);
  --color-utility-amber-700: var(--color-amber-700);
  --color-utility-red-100: var(--color-red-100);
  --color-utility-red-200: var(--color-red-200);
  --color-utility-red-300: var(--color-red-300);
  --color-utility-red-400: var(--color-red-400);
  --color-utility-red-500: var(--color-red-500);
  --color-utility-red-600: var(--color-red-600);
  --color-utility-red-700: var(--color-red-700);
  --color-utility-green-50: var(--color-green-50);
  --color-utility-green-100: var(--color-green-100);
  --color-utility-green-200: var(--color-green-200);
  --color-utility-green-300: var(--color-green-300);
  --color-utility-green-400: var(--color-green-400);
  --color-utility-green-500: var(--color-green-500);
  --color-utility-green-600: var(--color-green-600);
  --color-utility-green-700: var(--color-green-700);
  --color-utility-blue-50: var(--color-blue-50);
  --color-utility-blue-100: var(--color-blue-100);
  --color-utility-blue-200: var(--color-blue-200);
  --color-utility-blue-300: var(--color-blue-300);
  --color-utility-blue-400: var(--color-blue-400);
  --color-utility-blue-500: var(--color-blue-500);
  --color-utility-blue-600: var(--color-blue-600);
  --color-utility-blue-700: var(--color-blue-700);
  --color-fg-secondary: var(--color-neutral-700);
  --color-fg-secondary-hover: var(--color-neutral-800);
  --color-fg-tertiary: var(--color-neutral-600);
  --color-fg-tertiary-hover: var(--color-neutral-700);
  --color-fg-quaternary: var(--color-neutral-400);
  --color-fg-quaternary-hover: var(--color-neutral-500);
  --color-fg-white: var(--color-base-white);
  --color-fg-brand-primary: var(--color-brand-600);
  --color-fg-brand-primary-alt: var(--color-fg-brand-primary);
  --color-fg-brand-secondary: var(--color-brand-700);
  --color-fg-brand-secondary-alt: var(--color-fg-brand-secondary);
  --color-fg-brand-secondary-hover: var(--color-brand-600);
  --color-fg-error-primary: var(--color-red-600);
  --color-fg-error-secondary: var(--color-red-500);
  --color-fg-warning-primary: var(--color-amber-600);
  --color-fg-warning-secondary: var(--color-amber-500);
  --color-fg-success-primary: var(--color-green-600);
  --color-fg-success-secondary: var(--color-green-500);
  --color-bg-primary: var(--color-base-white);
  --color-effects-focus-rings: var(--color-brand-500);
  --color-effects-focus-rings-error: var(--color-red-500);
  --color-effects-shadows-xs: #0000000D;
  --color-effects-portfolio-mockups-shadow-main-centre-md: #0A0A0A24;
  --color-effects-portfolio-mockups-shadow-main-centre-lg: #0A0A0A2E;
  --color-effects-portfolio-mockups-shadow-overlay-lg: #0A0A0A1F;
  --color-effects-portfolio-mockups-shadow-grid-md: #0A0A0A14;
  --color-effects-shadows-sm-01: #0000001A;
  --color-effects-shadows-sm-02: #0000001A;
  --color-effects-shadows-md-01: #0000001A;
  --color-effects-shadows-md-02: #0000000F;
  --color-effects-shadows-lg-01: #00000014;
  --color-effects-shadows-lg-02: #00000008;
  --color-effects-shadows-lg-03: #0000000A;
  --color-effects-shadows-xl-01: #00000014;
  --color-effects-shadows-xl-02: #00000008;
  --color-effects-shadows-xl-03: #0000000A;
  --color-effects-shadows-2xl-01: #0000002E;
  --color-effects-shadows-2xl-02: #0000000A;
  --color-effects-shadows-3xl-01: #00000024;
  --color-effects-shadows-3xl-02: #0000000A;
  --color-effects-shadows-skeumorphic-inner: #0000000D;
  --color-effects-shadows-skeumorphic-inner-border: #0000002E;
  --color-bg-primary-alt: var(--color-base-white);
  --color-bg-primary-hover: var(--color-neutral-50);
  --color-bg-primary-solid: var(--color-neutral-950);
  --color-bg-secondary: var(--color-neutral-50);
  --color-bg-secondary-alt: var(--color-neutral-50);
  --color-bg-secondary-hover: var(--color-neutral-100);
  --color-bg-secondary-solid: var(--color-neutral-600);
  --color-bg-tertiary: var(--color-neutral-100);
  --color-bg-quaternary: var(--color-neutral-200);
  --color-bg-overlay: var(--color-neutral-950);
  --color-bg-brand-primary: var(--color-brand-50);
  --color-bg-brand-primary-alt: var(--color-brand-50);
  --color-bg-brand-secondary: var(--color-brand-100);
  --color-bg-brand-solid: var(--color-brand-500);
  --color-bg-brand-solid-hover: var(--color-brand-600);
  --color-bg-brand-section: var(--color-neutral-950);
  --color-bg-brand-section-subtle: var(--color-neutral-900);
  --color-bg-error-primary: var(--color-red-50);
  --color-bg-error-secondary: var(--color-red-100);
  --color-bg-error-solid: var(--color-red-600);
  --color-bg-error-solid-hover: var(--color-red-700);
  --color-bg-warning-primary: var(--color-amber-50);
  --color-bg-warning-secondary: var(--color-amber-100);
  --color-bg-warning-solid: var(--color-amber-600);
  --color-bg-success-primary: var(--color-green-50);
  --color-bg-success-secondary: var(--color-green-100);
  --color-bg-success-solid: var(--color-green-600);
  --color-fg-primary-on-brand: var(--color-neutral-950);
  --color-icons-fg-primary: var(--color-neutral-950);
  --color-icons-fg-primary-on-brand: var(--color-base-white);
  --color-icons-fg-quaternary: var(--color-neutral-500);
  --color-toggle-bg-track-on: var(--color-brand-500);
  --color-toggle-bg-thumb: var(--color-base-white);
  --color-toggle-bg-track-off: var(--color-neutral-300);
  --color-border-secondary-on-brand: var(--color-neutral-800);
  --color-border-primary-on-brand: var(--color-neutral-700);

  /* Famille violette, ajoutée pour le statut « shipped » (export du 11.08) */
  --color-purple-50: #f4f0fc;
  --color-purple-100: #e5dbf8;
  --color-purple-200: #cbb6f1;
  --color-purple-300: #ac8ee8;
  --color-purple-400: #8d66de;
  --color-purple-500: #7248c9;
  --color-purple-600: #5c37a6;
  --color-purple-700: #482a82;
  --color-purple-800: #351e5e;
  --color-purple-900: #24153f;
  --color-purple-950: #150c25;

  /* Familles info / shipped / bordures d'état.
     L'export ne contient que le mode sombre ; la valeur claire est dérivée par
     la correspondance de pas vérifiée sur les familles rouge, vert et ambre. */
  --color-text-info-primary: var(--color-blue-600);
  --color-text-shipped-primary: var(--color-purple-600);
  --color-border-warning: var(--color-amber-500);
  --color-border-success: var(--color-green-500);
  --color-border-info: var(--color-blue-500);
  --color-border-shipped: var(--color-purple-500);
  --color-border-cancelled: var(--color-neutral-500);
  --color-bg-info-primary: var(--color-blue-50);
  --color-bg-info-secondary: var(--color-blue-100);
  --color-bg-info-solid: var(--color-blue-600);
  --color-bg-shipped-primary: var(--color-purple-50);
  --color-bg-shipped-secondary: var(--color-purple-100);
  --color-fg-info-primary: var(--color-blue-600);
  --color-fg-info-secondary: var(--color-blue-500);
  --color-fg-shipped-primary: var(--color-purple-600);

  /* Pastilles de statut : une seule déclaration suffit, elles pointent vers des
     tokens qui basculent déjà avec le mode. */
  --color-status-reserved-bg: var(--color-bg-warning-secondary);
  --color-status-reserved-text: var(--color-text-warning-primary);
  --color-status-reserved-border: var(--color-border-warning);
  --color-status-paid-bg: var(--color-bg-success-secondary);
  --color-status-paid-text: var(--color-text-success-primary);
  --color-status-paid-border: var(--color-border-success);
  --color-status-cancelled-bg: var(--color-bg-error-secondary);
  --color-status-cancelled-text: var(--color-text-error-primary);
  --color-status-cancelled-border: var(--color-border-cancelled);
  --color-status-shipped-bg: var(--color-bg-shipped-secondary);
  --color-status-shipped-text: var(--color-text-shipped-primary);
  --color-status-shipped-border: var(--color-border-shipped);
}

/* ── Couleurs sémantiques — mode sombre ─────────────────────────────────── */
/* 182 surcharges sur 210 tokens ; les autres sont identiques au mode clair.
   Volontairement SANS :root — poser data-theme="dark" sur n'importe quel élément
   bascule tout son sous-arbre. C'est ce qui permet le chrome noir de la refonte
   par-dessus des pages de contenu claires. */
[data-theme="dark"] {
  --color-text-primary: var(--color-neutral-50);
  --color-text-primary-on-brand: var(--color-neutral-50);
  --color-text-secondary: var(--color-neutral-300);
  --color-text-secondary-hover: var(--color-neutral-200);
  --color-text-secondary-on-brand: var(--color-neutral-300);
  --color-text-tertiary: var(--color-neutral-400);
  --color-text-tertiary-hover: var(--color-neutral-300);
  --color-text-tertiary-on-brand: var(--color-neutral-400);
  --color-text-quaternary: var(--color-neutral-400);
  --color-text-quaternary-on-brand: var(--color-neutral-400);
  --color-text-brand-primary: var(--color-brand-400);
  --color-text-brand-secondary: var(--color-brand-400);
  --color-text-brand-secondary-hover: var(--color-brand-300);
  --color-text-brand-tertiary: var(--color-brand-400);
  --color-text-brand-tertiary-alt: var(--color-brand-300);
  --color-text-error-primary: var(--color-red-400);
  --color-text-error-primary-hover: var(--color-red-300);
  --color-text-success-primary: var(--color-green-400);
  --color-border-primary: var(--color-neutral-100);
  --color-border-secondary: var(--color-neutral-800);
  --color-border-secondary-alt: var(--color-neutral-800);
  --color-border-tertiary: var(--color-neutral-800);
  --color-border-brand: var(--color-brand-400);
  --color-border-brand-alt: var(--color-neutral-700);
  --color-border-error: var(--color-red-400);
  --color-border-error-subtle: var(--color-red-500);
  --color-fg-primary: var(--color-base-white);
  --color-alpha-white-10: #0A0A0A1A;
  --color-alpha-white-20: #0A0A0A33;
  --color-alpha-white-30: #0A0A0A4D;
  --color-alpha-white-40: #0A0A0A66;
  --color-alpha-white-50: #0A0A0A80;
  --color-alpha-white-60: #0A0A0A99;
  --color-alpha-white-70: #0A0A0AB2;
  --color-alpha-white-80: #0A0A0ACC;
  --color-alpha-white-90: #0A0A0AE5;
  --color-alpha-white-100: var(--color-neutral-950);
  --color-alpha-black-10: #FFFFFF1A;
  --color-alpha-black-20: #FFFFFF33;
  --color-alpha-black-30: #FFFFFF4D;
  --color-alpha-black-40: #FFFFFF66;
  --color-alpha-black-50: #FFFFFF80;
  --color-alpha-black-60: #FFFFFF99;
  --color-alpha-black-70: #FFFFFFB2;
  --color-alpha-black-80: #FFFFFFCC;
  --color-alpha-black-90: #FFFFFFE5;
  --color-alpha-black-100: #FFFFFF;
  --color-utility-neutral-50: var(--color-neutral-900);
  --color-utility-neutral-100: var(--color-neutral-800);
  --color-utility-neutral-200: var(--color-neutral-700);
  --color-utility-neutral-300: var(--color-neutral-700);
  --color-utility-neutral-400: var(--color-neutral-600);
  --color-utility-neutral-600: var(--color-neutral-400);
  --color-utility-neutral-700: var(--color-neutral-300);
  --color-utility-neutral-800: var(--color-neutral-200);
  --color-utility-neutral-900: var(--color-neutral-100);
  --color-utility-brand-50: var(--color-brand-950);
  --color-utility-brand-50-alt: var(--color-utility-neutral-50);
  --color-utility-brand-100: var(--color-brand-900);
  --color-utility-brand-100-alt: var(--color-utility-neutral-100);
  --color-utility-brand-200: var(--color-brand-800);
  --color-utility-brand-200-alt: var(--color-utility-neutral-200);
  --color-utility-brand-300: var(--color-brand-700);
  --color-utility-brand-300-alt: var(--color-utility-neutral-300);
  --color-utility-brand-400: var(--color-brand-600);
  --color-utility-brand-400-alt: var(--color-utility-neutral-400);
  --color-utility-brand-500-alt: var(--color-utility-neutral-500);
  --color-utility-brand-600: var(--color-brand-400);
  --color-utility-brand-600-alt: var(--color-utility-neutral-600);
  --color-utility-brand-700: var(--color-brand-300);
  --color-utility-brand-700-alt: var(--color-utility-neutral-700);
  --color-utility-brand-800: var(--color-brand-200);
  --color-utility-brand-800-alt: var(--color-utility-neutral-800);
  --color-utility-brand-900: var(--color-brand-100);
  --color-utility-brand-900-alt: var(--color-utility-neutral-900);
  --color-app-store-badges-border: var(--color-base-white);
  --color-footers-button-fg: var(--color-neutral-300);
  --color-footers-button-fg-hover: var(--color-neutral-100);
  --color-icons-fg-brand: var(--color-neutral-400);
  --color-icons-fg-brand-on: var(--color-neutral-400);
  --color-icons-featured-light-fg-brand: var(--color-brand-200);
  --color-icons-featured-light-fg-gray: var(--color-neutral-200);
  --color-icons-featured-light-fg-error: var(--color-red-200);
  --color-icons-featured-light-fg-success: var(--color-green-200);
  --color-mockups-screen-border: var(--color-neutral-700);
  --color-sliders-handle-bg: var(--color-fg-brand-primary);
  --color-sliders-handle-border: var(--color-bg-primary);
  --color-toggles-border: var(--color-base-transparent);
  --color-toggles-slim-border-pressed: var(--color-base-transparent);
  --color-toggles-slim-border-pressed-hover: var(--color-base-transparent);
  --color-text-editor-icon-fg-active: var(--color-base-white);
  --color-utility-red-50: var(--color-red-950);
  --color-utility-amber-50: var(--color-amber-950);
  --color-utility-amber-100: var(--color-amber-900);
  --color-utility-amber-200: var(--color-amber-800);
  --color-utility-amber-300: var(--color-amber-700);
  --color-utility-amber-400: var(--color-amber-600);
  --color-utility-amber-600: var(--color-amber-400);
  --color-utility-amber-700: var(--color-amber-300);
  --color-utility-red-100: var(--color-red-900);
  --color-utility-red-200: var(--color-red-800);
  --color-utility-red-300: var(--color-red-700);
  --color-utility-red-400: var(--color-red-600);
  --color-utility-red-600: var(--color-red-400);
  --color-utility-red-700: var(--color-red-300);
  --color-utility-green-50: var(--color-green-950);
  --color-utility-green-100: var(--color-green-900);
  --color-utility-green-200: var(--color-green-800);
  --color-utility-green-300: var(--color-green-700);
  --color-utility-green-400: var(--color-green-600);
  --color-utility-green-600: var(--color-green-400);
  --color-utility-green-700: var(--color-green-300);
  --color-utility-blue-50: var(--color-blue-950);
  --color-utility-blue-100: var(--color-blue-900);
  --color-utility-blue-200: var(--color-blue-800);
  --color-utility-blue-300: var(--color-blue-700);
  --color-utility-blue-400: var(--color-blue-600);
  --color-utility-blue-600: var(--color-blue-400);
  --color-utility-blue-700: var(--color-blue-300);
  --color-fg-secondary: var(--color-neutral-300);
  --color-fg-secondary-hover: var(--color-neutral-200);
  --color-fg-tertiary: var(--color-neutral-400);
  --color-fg-tertiary-hover: var(--color-neutral-300);
  --color-fg-quaternary: var(--color-neutral-500);
  --color-fg-quaternary-hover: var(--color-neutral-400);
  --color-fg-brand-primary: var(--color-brand-500);
  --color-fg-brand-primary-alt: var(--color-neutral-300);
  --color-fg-brand-secondary: var(--color-brand-500);
  --color-fg-brand-secondary-alt: var(--color-neutral-600);
  --color-fg-brand-secondary-hover: var(--color-neutral-500);
  --color-fg-error-primary: var(--color-red-500);
  --color-fg-error-secondary: var(--color-red-400);
  --color-fg-success-primary: var(--color-green-500);
  --color-fg-success-secondary: var(--color-green-400);
  --color-bg-primary: var(--color-neutral-950);
  --color-effects-shadows-xs: var(--color-base-transparent);
  --color-effects-portfolio-mockups-shadow-main-centre-md: var(--color-base-transparent);
  --color-effects-portfolio-mockups-shadow-main-centre-lg: var(--color-base-transparent);
  --color-effects-portfolio-mockups-shadow-overlay-lg: var(--color-base-transparent);
  --color-effects-portfolio-mockups-shadow-grid-md: var(--color-base-transparent);
  --color-effects-shadows-sm-01: var(--color-base-transparent);
  --color-effects-shadows-sm-02: var(--color-base-transparent);
  --color-effects-shadows-md-01: var(--color-base-transparent);
  --color-effects-shadows-md-02: var(--color-base-transparent);
  --color-effects-shadows-lg-01: var(--color-base-transparent);
  --color-effects-shadows-lg-02: var(--color-base-transparent);
  --color-effects-shadows-lg-03: var(--color-base-transparent);
  --color-effects-shadows-xl-01: var(--color-base-transparent);
  --color-effects-shadows-xl-02: var(--color-base-transparent);
  --color-effects-shadows-xl-03: var(--color-base-transparent);
  --color-effects-shadows-2xl-01: var(--color-base-transparent);
  --color-effects-shadows-2xl-02: var(--color-base-transparent);
  --color-effects-shadows-3xl-01: var(--color-base-transparent);
  --color-effects-shadows-3xl-02: var(--color-base-transparent);
  --color-bg-primary-alt: var(--color-bg-secondary);
  --color-bg-primary-hover: var(--color-neutral-900);
  --color-bg-primary-solid: var(--color-bg-tertiary);
  --color-bg-secondary: var(--color-neutral-900);
  --color-bg-secondary-alt: var(--color-bg-primary);
  --color-bg-secondary-hover: var(--color-neutral-800);
  --color-bg-tertiary: var(--color-neutral-800);
  --color-bg-quaternary: var(--color-neutral-700);
  --color-bg-overlay: var(--color-neutral-800);
  --color-bg-brand-primary: var(--color-brand-500);
  --color-bg-brand-primary-alt: var(--color-bg-secondary);
  --color-bg-brand-secondary: var(--color-brand-600);
  --color-bg-brand-solid: var(--color-brand-600);
  --color-bg-brand-solid-hover: var(--color-brand-500);
  --color-bg-brand-section: var(--color-bg-secondary);
  --color-bg-brand-section-subtle: var(--color-bg-primary);
  --color-bg-error-primary: var(--color-red-950);
  --color-bg-error-secondary: var(--color-red-600);
  --color-bg-error-solid-hover: var(--color-red-500);
  --color-bg-success-primary: var(--color-green-950);
  --color-bg-success-secondary: var(--color-green-600);
  --color-icons-fg-primary: var(--color-neutral-400);
  --color-icons-fg-primary-on-brand: var(--color-neutral-400);
  --color-icons-fg-quaternary: var(--color-neutral-300);
  --color-toggle-bg-track-on: var(--color-brand-600);
  --color-toggle-bg-track-off: var(--color-neutral-700);
  --color-border-secondary-on-brand: var(--color-neutral-300);
  --color-border-primary-on-brand: var(--color-neutral-300);

  /* Valeurs sombres livrées par Kristina pour les familles info / shipped */
  --color-text-info-primary: var(--color-blue-400);
  --color-text-shipped-primary: var(--color-purple-400);
  --color-border-warning: var(--color-amber-400);
  --color-border-success: var(--color-green-400);
  --color-border-info: var(--color-blue-400);
  --color-border-shipped: var(--color-purple-400);
  --color-border-cancelled: var(--color-neutral-500);
  --color-bg-info-primary: var(--color-blue-950);
  --color-bg-info-secondary: var(--color-blue-600);
  --color-bg-info-solid: var(--color-blue-600);
  --color-bg-shipped-primary: var(--color-purple-950);
  --color-bg-shipped-secondary: var(--color-purple-600);
  --color-fg-info-primary: var(--color-blue-500);
  --color-fg-info-secondary: var(--color-blue-400);
  --color-fg-shipped-primary: var(--color-purple-500);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-text-primary: var(--color-neutral-50);
    --color-text-primary-on-brand: var(--color-neutral-50);
    --color-text-secondary: var(--color-neutral-300);
    --color-text-secondary-hover: var(--color-neutral-200);
    --color-text-secondary-on-brand: var(--color-neutral-300);
    --color-text-tertiary: var(--color-neutral-400);
    --color-text-tertiary-hover: var(--color-neutral-300);
    --color-text-tertiary-on-brand: var(--color-neutral-400);
    --color-text-quaternary: var(--color-neutral-400);
    --color-text-quaternary-on-brand: var(--color-neutral-400);
    --color-text-brand-primary: var(--color-brand-400);
    --color-text-brand-secondary: var(--color-brand-400);
    --color-text-brand-secondary-hover: var(--color-brand-300);
    --color-text-brand-tertiary: var(--color-brand-400);
    --color-text-brand-tertiary-alt: var(--color-brand-300);
    --color-text-error-primary: var(--color-red-400);
    --color-text-error-primary-hover: var(--color-red-300);
    --color-text-success-primary: var(--color-green-400);
    --color-border-primary: var(--color-neutral-100);
    --color-border-secondary: var(--color-neutral-800);
    --color-border-secondary-alt: var(--color-neutral-800);
    --color-border-tertiary: var(--color-neutral-800);
    --color-border-brand: var(--color-brand-400);
    --color-border-brand-alt: var(--color-neutral-700);
    --color-border-error: var(--color-red-400);
    --color-border-error-subtle: var(--color-red-500);
    --color-fg-primary: var(--color-base-white);
    --color-alpha-white-10: #0A0A0A1A;
    --color-alpha-white-20: #0A0A0A33;
    --color-alpha-white-30: #0A0A0A4D;
    --color-alpha-white-40: #0A0A0A66;
    --color-alpha-white-50: #0A0A0A80;
    --color-alpha-white-60: #0A0A0A99;
    --color-alpha-white-70: #0A0A0AB2;
    --color-alpha-white-80: #0A0A0ACC;
    --color-alpha-white-90: #0A0A0AE5;
    --color-alpha-white-100: var(--color-neutral-950);
    --color-alpha-black-10: #FFFFFF1A;
    --color-alpha-black-20: #FFFFFF33;
    --color-alpha-black-30: #FFFFFF4D;
    --color-alpha-black-40: #FFFFFF66;
    --color-alpha-black-50: #FFFFFF80;
    --color-alpha-black-60: #FFFFFF99;
    --color-alpha-black-70: #FFFFFFB2;
    --color-alpha-black-80: #FFFFFFCC;
    --color-alpha-black-90: #FFFFFFE5;
    --color-alpha-black-100: #FFFFFF;
    --color-utility-neutral-50: var(--color-neutral-900);
    --color-utility-neutral-100: var(--color-neutral-800);
    --color-utility-neutral-200: var(--color-neutral-700);
    --color-utility-neutral-300: var(--color-neutral-700);
    --color-utility-neutral-400: var(--color-neutral-600);
    --color-utility-neutral-600: var(--color-neutral-400);
    --color-utility-neutral-700: var(--color-neutral-300);
    --color-utility-neutral-800: var(--color-neutral-200);
    --color-utility-neutral-900: var(--color-neutral-100);
    --color-utility-brand-50: var(--color-brand-950);
    --color-utility-brand-50-alt: var(--color-utility-neutral-50);
    --color-utility-brand-100: var(--color-brand-900);
    --color-utility-brand-100-alt: var(--color-utility-neutral-100);
    --color-utility-brand-200: var(--color-brand-800);
    --color-utility-brand-200-alt: var(--color-utility-neutral-200);
    --color-utility-brand-300: var(--color-brand-700);
    --color-utility-brand-300-alt: var(--color-utility-neutral-300);
    --color-utility-brand-400: var(--color-brand-600);
    --color-utility-brand-400-alt: var(--color-utility-neutral-400);
    --color-utility-brand-500-alt: var(--color-utility-neutral-500);
    --color-utility-brand-600: var(--color-brand-400);
    --color-utility-brand-600-alt: var(--color-utility-neutral-600);
    --color-utility-brand-700: var(--color-brand-300);
    --color-utility-brand-700-alt: var(--color-utility-neutral-700);
    --color-utility-brand-800: var(--color-brand-200);
    --color-utility-brand-800-alt: var(--color-utility-neutral-800);
    --color-utility-brand-900: var(--color-brand-100);
    --color-utility-brand-900-alt: var(--color-utility-neutral-900);
    --color-app-store-badges-border: var(--color-base-white);
    --color-footers-button-fg: var(--color-neutral-300);
    --color-footers-button-fg-hover: var(--color-neutral-100);
    --color-icons-fg-brand: var(--color-neutral-400);
    --color-icons-fg-brand-on: var(--color-neutral-400);
    --color-icons-featured-light-fg-brand: var(--color-brand-200);
    --color-icons-featured-light-fg-gray: var(--color-neutral-200);
    --color-icons-featured-light-fg-error: var(--color-red-200);
    --color-icons-featured-light-fg-success: var(--color-green-200);
    --color-mockups-screen-border: var(--color-neutral-700);
    --color-sliders-handle-bg: var(--color-fg-brand-primary);
    --color-sliders-handle-border: var(--color-bg-primary);
    --color-toggles-border: var(--color-base-transparent);
    --color-toggles-slim-border-pressed: var(--color-base-transparent);
    --color-toggles-slim-border-pressed-hover: var(--color-base-transparent);
    --color-text-editor-icon-fg-active: var(--color-base-white);
    --color-utility-red-50: var(--color-red-950);
    --color-utility-amber-50: var(--color-amber-950);
    --color-utility-amber-100: var(--color-amber-900);
    --color-utility-amber-200: var(--color-amber-800);
    --color-utility-amber-300: var(--color-amber-700);
    --color-utility-amber-400: var(--color-amber-600);
    --color-utility-amber-600: var(--color-amber-400);
    --color-utility-amber-700: var(--color-amber-300);
    --color-utility-red-100: var(--color-red-900);
    --color-utility-red-200: var(--color-red-800);
    --color-utility-red-300: var(--color-red-700);
    --color-utility-red-400: var(--color-red-600);
    --color-utility-red-600: var(--color-red-400);
    --color-utility-red-700: var(--color-red-300);
    --color-utility-green-50: var(--color-green-950);
    --color-utility-green-100: var(--color-green-900);
    --color-utility-green-200: var(--color-green-800);
    --color-utility-green-300: var(--color-green-700);
    --color-utility-green-400: var(--color-green-600);
    --color-utility-green-600: var(--color-green-400);
    --color-utility-green-700: var(--color-green-300);
    --color-utility-blue-50: var(--color-blue-950);
    --color-utility-blue-100: var(--color-blue-900);
    --color-utility-blue-200: var(--color-blue-800);
    --color-utility-blue-300: var(--color-blue-700);
    --color-utility-blue-400: var(--color-blue-600);
    --color-utility-blue-600: var(--color-blue-400);
    --color-utility-blue-700: var(--color-blue-300);
    --color-fg-secondary: var(--color-neutral-300);
    --color-fg-secondary-hover: var(--color-neutral-200);
    --color-fg-tertiary: var(--color-neutral-400);
    --color-fg-tertiary-hover: var(--color-neutral-300);
    --color-fg-quaternary: var(--color-neutral-500);
    --color-fg-quaternary-hover: var(--color-neutral-400);
    --color-fg-brand-primary: var(--color-brand-500);
    --color-fg-brand-primary-alt: var(--color-neutral-300);
    --color-fg-brand-secondary: var(--color-brand-500);
    --color-fg-brand-secondary-alt: var(--color-neutral-600);
    --color-fg-brand-secondary-hover: var(--color-neutral-500);
    --color-fg-error-primary: var(--color-red-500);
    --color-fg-error-secondary: var(--color-red-400);
    --color-fg-success-primary: var(--color-green-500);
    --color-fg-success-secondary: var(--color-green-400);
    --color-bg-primary: var(--color-neutral-950);
    --color-effects-shadows-xs: var(--color-base-transparent);
    --color-effects-portfolio-mockups-shadow-main-centre-md: var(--color-base-transparent);
    --color-effects-portfolio-mockups-shadow-main-centre-lg: var(--color-base-transparent);
    --color-effects-portfolio-mockups-shadow-overlay-lg: var(--color-base-transparent);
    --color-effects-portfolio-mockups-shadow-grid-md: var(--color-base-transparent);
    --color-effects-shadows-sm-01: var(--color-base-transparent);
    --color-effects-shadows-sm-02: var(--color-base-transparent);
    --color-effects-shadows-md-01: var(--color-base-transparent);
    --color-effects-shadows-md-02: var(--color-base-transparent);
    --color-effects-shadows-lg-01: var(--color-base-transparent);
    --color-effects-shadows-lg-02: var(--color-base-transparent);
    --color-effects-shadows-lg-03: var(--color-base-transparent);
    --color-effects-shadows-xl-01: var(--color-base-transparent);
    --color-effects-shadows-xl-02: var(--color-base-transparent);
    --color-effects-shadows-xl-03: var(--color-base-transparent);
    --color-effects-shadows-2xl-01: var(--color-base-transparent);
    --color-effects-shadows-2xl-02: var(--color-base-transparent);
    --color-effects-shadows-3xl-01: var(--color-base-transparent);
    --color-effects-shadows-3xl-02: var(--color-base-transparent);
    --color-bg-primary-alt: var(--color-bg-secondary);
    --color-bg-primary-hover: var(--color-neutral-900);
    --color-bg-primary-solid: var(--color-bg-tertiary);
    --color-bg-secondary: var(--color-neutral-900);
    --color-bg-secondary-alt: var(--color-bg-primary);
    --color-bg-secondary-hover: var(--color-neutral-800);
    --color-bg-tertiary: var(--color-neutral-800);
    --color-bg-quaternary: var(--color-neutral-700);
    --color-bg-overlay: var(--color-neutral-800);
    --color-bg-brand-primary: var(--color-brand-500);
    --color-bg-brand-primary-alt: var(--color-bg-secondary);
    --color-bg-brand-secondary: var(--color-brand-600);
    --color-bg-brand-solid: var(--color-brand-600);
    --color-bg-brand-solid-hover: var(--color-brand-500);
    --color-bg-brand-section: var(--color-bg-secondary);
    --color-bg-brand-section-subtle: var(--color-bg-primary);
    --color-bg-error-primary: var(--color-red-950);
    --color-bg-error-secondary: var(--color-red-600);
    --color-bg-error-solid-hover: var(--color-red-500);
    --color-bg-success-primary: var(--color-green-950);
    --color-bg-success-secondary: var(--color-green-600);
    --color-icons-fg-primary: var(--color-neutral-400);
    --color-icons-fg-primary-on-brand: var(--color-neutral-400);
    --color-icons-fg-quaternary: var(--color-neutral-300);
    --color-toggle-bg-track-on: var(--color-brand-600);
    --color-toggle-bg-track-off: var(--color-neutral-700);
    --color-border-secondary-on-brand: var(--color-neutral-300);
    --color-border-primary-on-brand: var(--color-neutral-300);
  }
}


/* ── Ombres et voiles — export plugin du 11.08.2026 ─────────────────────── */
:root {
  --color-alpha-gold-10: #b8903f1a;
  --color-alpha-gold-20: #b8903f33;
  --color-alpha-gold-40: #b8903f66;
  --color-alpha-gold-30: #b8903f4d;
  --color-alpha-gold-50: #b8903f80;
  --color-alpha-gold-60: #b8903f99;
  --color-alpha-gold-70: #b8903fb3;
  --color-alpha-gold-80: #b8903fcc;
  --color-alpha-gold-90: #b8903fe6;
  --color-alpha-gold-100: #b8903f;
  --color-overlay-scrim-40: #00000066;
  --color-overlay-scrim-60: #00000099;
  --color-overlay-scrim-80: #000000cc;
  --color-overlay-scrim-10: #0000001a;
  --color-overlay-scrim-20: #00000033;
  --color-overlay-scrim-30: #0000004d;
  --color-overlay-scrim-50: #00000080;
  --color-overlay-scrim-70: #000000b3;
  --color-overlay-scrim-90: #000000e6;
  --color-overlay-scrim-100: #000000;

  --shadow-2xl: 0px 4px 4px -2px #1a111008, 0px 24px 48px -12px #1a11101a;
  --shadow-3xl: 0px 5px 5px -2.5px #1a111008, 0px 32px 64px -12px #1a111017;
  --shadow-avatars.avatar icon: inset 0px 0px 0px 0.5px #00000029, inset 0px 0px 0px 1px #ffffff3d, 0px 0px 0px 1px #ffffff;
  --shadow-avatars.avatar inner shadow: inset 0px 0px 0px 0.5px #00000029, inset 0px 0px 0px 1px #ffffff3d;
  --shadow-lg: 0px 2px 2px -1px #1a111008, 0px 4px 6px -2px #1a111005, 0px 12px 16px -4px #1a11100f;
  --shadow-md: 0px 2px 14px -4px #0000000f, 0px 4px 20px -1px #0000001a;
  --shadow-portfolio mockups.shadow-grid-md: 32px 32px 64px 0px #1a111014;
  --shadow-portfolio mockups.shadow-main-centre-lg: 0px 100px 200px 0px #1a11102e;
  --shadow-portfolio mockups.shadow-main-centre-md: 0px 75px 150px 0px #1a111024;
  --shadow-portfolio mockups.shadow-overlay-left-lg: 100px 100px 150px 0px #1a11101f;
  --shadow-portfolio mockups.shadow-overlay-right-lg: -40px 40px 72px 0px #1a11101f;
  --shadow-sm: 0px 1px 2px -1px #1a11100f, 0px 1px 3px 0px #1a11100f;
  --shadow-xl: 0px 3px 3px -1.5px #1a111008, 0px 8px 8px -4px #1a111005, 0px 20px 24px -4px #1a111012;
  --shadow-xs: 0px 1px 2px 0px #1a11100d;
  --shadow-xs-skeuomorphic: 0px 1px 2px 0px #1a11100d, inset 0px -2px 0px 0px #1a11100d, inset 0px 0px 0px 1px #1a11102e;
}

/* ── Styles typographiques du kit ───────────────────────────────────────── */
/* Une classe par style Figma : .t-<style>, à poser directement sur l'élément. */
.t-display-2xl-regular {
  font-family: 'Cormorant Infant', Georgia, serif;
  font-size: 72px;
  font-weight: 400;
  line-height: 90px;
  letter-spacing: -1.44px;
}
.t-display-2xl-medium {
  font-family: 'Cormorant Infant', Georgia, serif;
  font-size: 72px;
  font-weight: 500;
  line-height: 90px;
  letter-spacing: -1.44px;
}
.t-display-2xl-semibold {
  font-family: 'Cormorant Infant', Georgia, serif;
  font-size: 72px;
  font-weight: 600;
  line-height: 90px;
  letter-spacing: -1.44px;
}
.t-display-2xl-bold {
  font-family: 'Cormorant Infant', Georgia, serif;
  font-size: 72px;
  font-weight: 700;
  line-height: 90px;
  letter-spacing: -1.44px;
}
.t-display-xl-regular {
  font-family: 'Cormorant Infant', Georgia, serif;
  font-size: 60px;
  font-weight: 400;
  line-height: 72px;
  letter-spacing: -1.2px;
}
.t-display-xl-medium {
  font-family: 'Cormorant Infant', Georgia, serif;
  font-size: 60px;
  font-weight: 500;
  line-height: 72px;
  letter-spacing: -1.2px;
}
.t-display-xl-semibold {
  font-family: 'Cormorant Infant', Georgia, serif;
  font-size: 60px;
  font-weight: 600;
  line-height: 72px;
  letter-spacing: -1.2px;
}
.t-display-xl-bold {
  font-family: 'Cormorant Infant', Georgia, serif;
  font-size: 60px;
  font-weight: 700;
  line-height: 72px;
  letter-spacing: -1.2px;
}
.t-display-lg-regular {
  font-family: 'Cormorant Infant', Georgia, serif;
  font-size: 48px;
  font-weight: 400;
  line-height: 60px;
  letter-spacing: -0.96px;
}
.t-display-lg-medium {
  font-family: 'Cormorant Infant', Georgia, serif;
  font-size: 48px;
  font-weight: 500;
  line-height: 60px;
  letter-spacing: -0.96px;
}
.t-display-lg-semibold {
  font-family: 'Cormorant Infant', Georgia, serif;
  font-size: 48px;
  font-weight: 600;
  line-height: 60px;
  letter-spacing: -0.96px;
}
.t-display-lg-bold {
  font-family: 'Cormorant Infant', Georgia, serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 60px;
  letter-spacing: -0.96px;
}
.t-display-2md-product-name-medium {
  font-family: 'Cormorant Infant', Georgia, serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0.96px;
  text-transform: lowercase;
}
.t-display-2md-product-name-regular {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: 0px;
}
.t-display-2md-product-name-semibold {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: 0px;
}
.t-display-2md-product-name-bold {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0px;
}
.t-display-md-regular {
  font-family: 'Cormorant Infant', Georgia, serif;
  font-size: 36px;
  font-weight: 400;
  line-height: 44px;
  letter-spacing: -0.72px;
}
.t-display-md-medium {
  font-family: 'Cormorant Infant', Georgia, serif;
  font-size: 36px;
  font-weight: 500;
  line-height: 44px;
  letter-spacing: -0.72px;
}
.t-display-md-semibold {
  font-family: 'Cormorant Infant', Georgia, serif;
  font-size: 36px;
  font-weight: 600;
  line-height: 44px;
  letter-spacing: -0.72px;
}
.t-display-md-bold {
  font-family: 'Cormorant Infant', Georgia, serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 44px;
  letter-spacing: -0.72px;
}
.t-display-sm-regular {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 30px;
  font-weight: 400;
  line-height: 38px;
  letter-spacing: 0px;
}
.t-display-sm-medium {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 30px;
  font-weight: 500;
  line-height: 38px;
  letter-spacing: 0px;
}
.t-display-sm-semibold {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 38px;
  letter-spacing: 0px;
}
.t-display-sm-bold {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 30px;
  font-weight: 700;
  line-height: 38px;
  letter-spacing: 0px;
}
.t-display-xs-regular {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: 0px;
}
.t-display-xs-medium {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0px;
}
.t-display-xs-semibold {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: 0px;
}
.t-display-xs-bold {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0px;
}
.t-text-xl-regular {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 0px;
}
.t-text-xl-medium {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: 0px;
}
.t-text-xl-semibold {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0px;
}
.t-text-xl-bold {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: 0px;
}
.t-text-lg-regular {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0px;
}
.t-text-lg-medium {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0px;
}
.t-text-lg-semibold {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: 0px;
}
.t-text-lg-bold {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: 0px;
}
.t-text-md-regular {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0px;
}
.t-text-md-medium {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0px;
}
.t-text-md-semibold {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0px;
}
.t-text-md-bold {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 0px;
}
.t-text-sm-regular {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0px;
}
.t-text-sm-medium {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0px;
}
.t-text-sm-semibold {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0px;
}
.t-text-sm-bold {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0px;
}
.t-text-xs-regular {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 0px;
}
.t-text-xs-medium {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0px;
}
.t-text-xs-semibold {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 0px;
}
.t-text-xs-bold {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  letter-spacing: 0px;
}
.t-label-xs-regular {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  letter-spacing: 1.2px;
  text-transform: lowercase;
}
.t-label-xs-medium {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 1.2px;
  text-transform: lowercase;
}
.t-label-xs-semibold {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 1.2px;
  text-transform: lowercase;
}
.t-label-xs-semibold-underline {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 1.2px;
  text-transform: lowercase;
}
.t-label-sm-regular {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: 0.7px;
  text-transform: lowercase;
}
.t-label-sm-medium {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.7px;
  text-transform: lowercase;
}
.t-label-sm-semibold {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.7px;
  text-transform: lowercase;
}
.t-label-sm-semibold-underline {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.7px;
  text-transform: lowercase;
}
.t-label-md-regular {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: 0.8px;
  text-transform: lowercase;
}
.t-label-md-medium {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.8px;
  text-transform: lowercase;
}
.t-label-md-semibold {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0.8px;
  text-transform: lowercase;
}
.t-label-md-semibold-underline {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0.8px;
  text-transform: lowercase;
}
.t-label-lg-regular {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0.45px;
  text-transform: lowercase;
}
.t-label-lg-medium {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0.45px;
  text-transform: lowercase;
}
.t-label-lg-semibold {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: 0.45px;
  text-transform: lowercase;
}
.t-label-xl-regular {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 0.5px;
  text-transform: lowercase;
}
.t-label-xl-medium {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: 0.5px;
  text-transform: lowercase;
}
.t-label-xl-semibold {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: 0.5px;
  text-transform: lowercase;
}
.t-label-2xl-regular {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: 0.6px;
  text-transform: lowercase;
}
.t-label-2xl-medium {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 24px;
  font-weight: 500;
  line-height: 32px;
  letter-spacing: 0.6px;
  text-transform: lowercase;
}
.t-label-2xl-semibold {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  letter-spacing: 0.6px;
  text-transform: lowercase;
}
.t-caption-regular {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  letter-spacing: 0px;
}
.t-caption-medium {
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: 0px;
}