/* ============================================================
   BOBOCHIC PARIS — Design Tokens
   Miroir exact du fichier Figma "Styles – Bobochic"
   ============================================================
   Fonts (locales + Google) — injectés par le design system.
   ============================================================ */



/* ============================================================
   Structure :
     1. Primitifs (couleurs brutes, tailles, devices)
     2. Couleurs sémantiques (surface, background, border, foreground)
     3. Spacing sémantique (margin, gap, height, width)
     4. Radius
     5. Line-stroke
     6. Elevation
     7. Typographie (familles, graisses, tailles, tokens composés)
   ============================================================ */


:root {

  /* ==========================================================
     1. PRIMITIFS — COULEURS
     Collection "Primitives" · Mode 1
     ========================================================== */

  /* Neutral */
  --color-neutral-0:    #ffffff;
  --color-neutral-50:   #f9f9f9;
  --color-neutral-100:  #f2f2f2;
  --color-neutral-150:  #e6e6e6;
  --color-neutral-200:  #d9d9d9;
  --color-neutral-250:  #cccccc;
  --color-neutral-300:  #bfbfbf;
  --color-neutral-350:  #b3b3b3;
  --color-neutral-400:  #a6a6a6;
  --color-neutral-450:  #8c8c8c;
  --color-neutral-500:  #808080;
  --color-neutral-550:  #737373;
  --color-neutral-600:  #666666;
  --color-neutral-650:  #595959;
  --color-neutral-700:  #4d4d4d;
  --color-neutral-750:  #404040;
  --color-neutral-800:  #333333;
  --color-neutral-850:  #262626;
  --color-neutral-900:  #1a1a1a;
  --color-neutral-950:  #0b0b0c;
  --color-neutral-1000: #000000;

  /* Red */
  --color-red-100: #fef2f2;
  --color-red-200: #fde1e1;
  --color-red-300: #fbbebe;
  --color-red-400: #f99393;
  --color-red-500: #f75556;
  --color-red-600: #e80206;
  --color-red-700: #c90205;
  --color-red-800: #a40104;
  --color-red-900: #740103;

  /* Green */
  --color-green-100: #f2fef2;
  --color-green-200: #e1fde1;
  --color-green-300: #bffbbe;
  --color-green-400: #95f893;
  --color-green-500: #58f655;
  --color-green-600: #17e702;
  --color-green-700: #14c802;
  --color-green-800: #10a301;
  --color-green-900: #0b7301;

  /* Orange */
  --color-orange-100: #fef6f2;
  --color-orange-200: #fdebe1;
  --color-orange-300: #fbd4be;
  --color-orange-400: #f8bb93;
  --color-orange-500: #f69e55;
  --color-orange-600: #e78502;
  --color-orange-700: #c87302;
  --color-orange-800: #a35e01;
  --color-orange-900: #734201;

  /* Yellow */
  --color-yellow-100: #fefbf2;
  --color-yellow-200: #fdf6e1;
  --color-yellow-300: #fbecbe;
  --color-yellow-400: #f8e293;
  --color-yellow-500: #f6d855;
  --color-yellow-600: #e7c602;
  --color-yellow-700: #c8ab02;
  --color-yellow-800: #a38c01;
  --color-yellow-900: #736301;


  /* ==========================================================
     1. PRIMITIFS — TAILLES
     ========================================================== */

  --size-0:  0;
  --size-1:  2px;
  --size-2:  4px;
  --size-3:  8px;
  --size-4:  16px;
  --size-5:  24px;
  --size-6:  32px;
  --size-7:  40px;
  --size-8:  48px;
  --size-9:  56px;
  --size-10: 64px;
  --size-11: 80px;
  --size-12: 96px;
  --size-13: 120px;
  --size-14: 144px;
  --size-15: 200px;
  --size-16: 256px;


  /* ==========================================================
     1. PRIMITIFS — DEVICES
     ========================================================== */

  --device-mobile-width:  393px;
  --device-mobile-height: 852px;
  --device-tablet-width:  834px;
  --device-tablet-height: 1194px;
  --device-desktop-width:  1536px;
  --device-desktop-height: 864px;


  /* ==========================================================
     2. COULEURS SÉMANTIQUES
     Collection "Color" · Mode "Value"
     ========================================================== */

  /* --- $surface --- */
  --color-surface-0:  var(--color-neutral-0);
  --color-surface-1:  var(--color-neutral-50);
  --color-surface-2:  var(--color-neutral-100);
  --color-surface-3:  var(--color-neutral-150);
  --color-surface-4:  var(--color-neutral-200);
  --color-surface-5:  var(--color-neutral-350);
  --color-surface-6:  var(--color-neutral-550);
  --color-surface-7:  var(--color-neutral-800);
  --color-surface-8:  var(--color-neutral-850);
  --color-surface-9:  var(--color-neutral-900);
  --color-surface-10: var(--color-neutral-950);

  /* --- $background --- */
  --color-background-neutral-0:  var(--color-neutral-0);
  --color-background-neutral-1:  var(--color-neutral-50);
  --color-background-neutral-2:  var(--color-neutral-100);
  --color-background-neutral-3:  var(--color-neutral-150);
  --color-background-neutral-4:  var(--color-neutral-200);
  --color-background-neutral-5:  var(--color-neutral-350);
  --color-background-neutral-6:  var(--color-neutral-550);
  --color-background-neutral-7:  var(--color-neutral-800);
  --color-background-neutral-8:  var(--color-neutral-850);
  --color-background-neutral-9:  var(--color-neutral-900);
  --color-background-neutral-10: var(--color-neutral-950);
  --color-background-red-light:    var(--color-red-200);
  --color-background-red-dark:     var(--color-red-800);
  --color-background-green-light:  var(--color-green-200);
  --color-background-green-dark:   var(--color-green-900);
  --color-background-orange-light: var(--color-orange-200);
  --color-background-orange-dark:  var(--color-orange-700);
  --color-background-yellow-light: var(--color-yellow-200);
  --color-background-yellow-dark:  var(--color-yellow-600);

  /* --- $border --- */
  --color-border-neutral-0:  var(--color-neutral-0);
  --color-border-neutral-1:  var(--color-neutral-50);
  --color-border-neutral-2:  var(--color-neutral-100);
  --color-border-neutral-3:  var(--color-neutral-150);
  --color-border-neutral-4:  var(--color-neutral-200);
  --color-border-neutral-5:  var(--color-neutral-350);
  --color-border-neutral-6:  var(--color-neutral-550);
  --color-border-neutral-7:  var(--color-neutral-800);
  --color-border-neutral-8:  var(--color-neutral-850);
  --color-border-neutral-9:  var(--color-neutral-900);
  --color-border-neutral-10: var(--color-neutral-950);
  --color-border-red-light:    var(--color-red-200);
  --color-border-red-dark:     var(--color-red-800);
  --color-border-green-light:  var(--color-green-200);
  --color-border-green-dark:   var(--color-green-900);
  --color-border-orange-light: var(--color-orange-200);
  --color-border-orange-dark:  var(--color-orange-700);
  --color-border-yellow-light: var(--color-yellow-200);
  --color-border-yellow-dark:  var(--color-yellow-600);

  /* --- $foreground --- */
  --color-foreground-neutral-0:  var(--color-neutral-0);
  --color-foreground-neutral-1:  var(--color-neutral-50);
  --color-foreground-neutral-2:  var(--color-neutral-100);
  --color-foreground-neutral-3:  var(--color-neutral-150);
  --color-foreground-neutral-4:  var(--color-neutral-200);
  --color-foreground-neutral-5:  var(--color-neutral-350);
  --color-foreground-neutral-6:  var(--color-neutral-550);
  --color-foreground-neutral-7:  var(--color-neutral-800);
  --color-foreground-neutral-8:  var(--color-neutral-850);
  --color-foreground-neutral-9:  var(--color-neutral-900);
  --color-foreground-neutral-10: var(--color-neutral-950);
  --color-foreground-red-light:    var(--color-red-200);
  --color-foreground-red-dark:     var(--color-red-800);
  --color-foreground-green-light:  var(--color-green-200);
  --color-foreground-green-dark:   var(--color-green-900);
  --color-foreground-orange-light: var(--color-orange-200);
  --color-foreground-orange-dark:  var(--color-orange-700);
  --color-foreground-yellow-light: var(--color-yellow-200);
  --color-foreground-yellow-dark:  var(--color-yellow-600);


  /* ==========================================================
     3. SPACING SÉMANTIQUE
     Collection "Number" · Mode "Value"
     ========================================================== */

  /* Margins — Mobile */
  --spacing-margin-mobile-sm: var(--size-3);   /*  8px */
  --spacing-margin-mobile-md: var(--size-4);   /* 16px */
  --spacing-margin-mobile-lg: var(--size-5);   /* 24px */

  /* Margins — Tablet */
  --spacing-margin-tablet-sm: var(--size-7);   /* 40px */
  --spacing-margin-tablet-md: var(--size-10);  /* 64px */
  --spacing-margin-tablet-lg: var(--size-13);  /* 120px */

  /* Margins — Desktop */
  --spacing-margin-desktop-sm: var(--size-10); /* 64px */
  --spacing-margin-desktop-md: var(--size-14); /* 144px */
  --spacing-margin-desktop-lg: var(--size-16); /* 256px */

  /* Gap */
  --spacing-gap-none: var(--size-0);
  --spacing-gap-xs:   var(--size-1);   /*  2px */
  --spacing-gap-sm:   var(--size-2);   /*  4px */
  --spacing-gap-md:   var(--size-3);   /*  8px */
  --spacing-gap-lg:   var(--size-4);   /* 16px */
  --spacing-gap-xl:   var(--size-5);   /* 24px */
  --spacing-gap-2xl:  var(--size-6);   /* 32px */
  --spacing-gap-3xl:  var(--size-7);   /* 40px */
  --spacing-gap-4xl:  var(--size-8);   /* 48px */
  --spacing-gap-5xl:  var(--size-9);   /* 56px */
  --spacing-gap-6xl:  var(--size-10);  /* 64px */

  /* Height (padding vertical) */
  --spacing-height-none: var(--size-0);
  --spacing-height-xs:   var(--size-1);   /*  2px */
  --spacing-height-sm:   var(--size-2);   /*  4px */
  --spacing-height-md:   var(--size-3);   /*  8px */
  --spacing-height-lg:   var(--size-4);   /* 16px */
  --spacing-height-xl:   var(--size-5);   /* 24px */
  --spacing-height-2xl:  var(--size-6);   /* 32px */
  --spacing-height-3xl:  var(--size-7);   /* 40px */
  --spacing-height-4xl:  var(--size-9);   /* 56px */
  --spacing-height-5xl:  var(--size-10);  /* 64px */

  /* Width (padding horizontal) */
  --spacing-width-none: var(--size-0);
  --spacing-width-xs:   var(--size-1);    /*  2px */
  --spacing-width-sm:   var(--size-2);    /*  4px */
  --spacing-width-md:   var(--size-3);    /*  8px */
  --spacing-width-lg:   var(--size-4);    /* 16px */
  --spacing-width-xl:   var(--size-5);    /* 24px */
  --spacing-width-2xl:  var(--size-6);    /* 32px */
  --spacing-width-3xl:  var(--size-7);    /* 40px */
  --spacing-width-4xl:  var(--size-10);   /* 64px */
  --spacing-width-5xl:  var(--size-11);   /* 80px */


  /* ==========================================================
     4. RADIUS
     ========================================================== */

  --radius-none:   var(--size-0);    /*   0 */
  --radius-sm:     var(--size-2);    /*   4px */
  --radius-md:     var(--size-3);    /*   8px */
  --radius-lg:     var(--size-4);    /*  16px */
  --radius-xl:     var(--size-6);    /*  32px */
  --radius-full:   var(--size-16);   /* 256px */
  --radius-badge:  var(--size-0);    /*   0 — badges & flags */
  --radius-button: var(--size-0);    /*   0 */


  /* ==========================================================
     5. LINE-STROKE
     ========================================================== */

  --line-stroke-base: 1px;
  --line-stroke-bold: 2px;


  /* ==========================================================
     6. ELEVATION
     ========================================================== */

  --elevation-sm: 0px 0px 25px rgba(12, 12, 13, 0.05);
  --elevation-md: 0px 0px 25px rgba(12, 12, 13, 0.10);
  --elevation-lg: 0px 0px 25px rgba(12, 12, 13, 0.15);


  /* ==========================================================
     7. TYPOGRAPHIE — PRIMITIFS
     Collection "Typography" · Mode 1
     ========================================================== */

  /* Familles */
  --font-family-text:     "Hanken Grotesk", sans-serif;
  --font-family-heading:  "Hanken Grotesk", sans-serif;
  --font-family-display:  "Hanken Grotesk", sans-serif;
  --font-family-subtitle: "Hanken Grotesk", sans-serif;
  --font-family-utility:  "Hanken Grotesk", sans-serif;
  --font-family-product:  "Hanken Grotesk", sans-serif;
  --font-family-code:     "Hanken Grotesk", sans-serif;

  /* Graisses */
  --font-weight-base:      400;  /* Regular */
  --font-weight-medium:    600;  /* SemiBold */
  --font-weight-strong:    700;  /* Bold */
  --font-weight-stronger:  800;  /* ExtraBold */
  --font-weight-strongest: 900;  /* Black */

  /* Tailles */
  --font-size-xs:  10px;
  --font-size-sm:  12px;
  --font-size-md:  14px;
  --font-size-lg:  18px;
  --font-size-xl:  25px;
  --font-size-2xl: 31px;
  --font-size-3xl: 39px;
  --font-size-4xl: 49px;
  --font-size-5xl: 61px;
  --font-size-6xl: 76px;
  --font-size-7xl: 95px;
  --font-size-8xl: 119px;

  /* Interlignages */
  --line-height-xs:   12px;
  --line-height-flag: 14px;
  --line-height-sm:   16px;
  --line-height-md:   20px;
  --line-height-lg:   24px;
  --line-height-xl:   28px;
  --line-height-2xl:  35px;
  --line-height-3xl:  48px;
  --line-height-4xl:  64px;
  --line-height-5xl:  76px;
  --line-height-6xl:  100px;
  --line-height-7xl:  125px;
  --line-height-8xl:  150px;

  /* Échelle serrée — interlignes des display et des titres. Le texte courant
     et les styles utilitaires gardent l'échelle générale ci-dessus. */
  --line-height-tight-7xl: 100px;
  --line-height-tight-6xl: 80px;
  --line-height-tight-5xl: 64px;
  --line-height-tight-4xl: 52px;
  --line-height-tight-3xl: 42px;
  --line-height-tight-2xl: 34px;
  --line-height-tight-xl:  28px;
  --line-height-tight-lg:  22px;
  --line-height-tight-md:  18px;
  --line-height-tight-sm:  16px;

  /* Interlettrages */
  --letter-spacing-default: -0.16px;
  --letter-spacing-caps:     0.48px;
  --letter-spacing-display: -1.5px;
}


/* ============================================================
   7. TYPOGRAPHIE — TOKENS COMPOSÉS
   Classes utilitaires calquées sur la structure Figma
   ============================================================ */

/* --- Display --- */

.display-xl-strong   { font-family: var(--font-family-display); font-weight: var(--font-weight-stronger);  font-size: var(--font-size-7xl); line-height: var(--line-height-tight-7xl); letter-spacing: var(--letter-spacing-display); }
.display-xl          { font-family: var(--font-family-display); font-weight: var(--font-weight-base);      font-size: var(--font-size-7xl); line-height: var(--line-height-tight-7xl); letter-spacing: var(--letter-spacing-display); }
.display-lg-strong   { font-family: var(--font-family-display); font-weight: var(--font-weight-stronger);  font-size: var(--font-size-6xl); line-height: var(--line-height-tight-6xl); letter-spacing: var(--letter-spacing-display); }
.display-lg          { font-family: var(--font-family-display); font-weight: var(--font-weight-base);      font-size: var(--font-size-6xl); line-height: var(--line-height-tight-6xl); letter-spacing: var(--letter-spacing-display); }
.display-md-strong   { font-family: var(--font-family-display); font-weight: var(--font-weight-stronger);  font-size: var(--font-size-5xl); line-height: var(--line-height-tight-5xl); letter-spacing: var(--letter-spacing-display); }
.display-md          { font-family: var(--font-family-display); font-weight: var(--font-weight-base);      font-size: var(--font-size-5xl); line-height: var(--line-height-tight-5xl); letter-spacing: var(--letter-spacing-display); }
.display-sm-strong   { font-family: var(--font-family-display); font-weight: var(--font-weight-stronger);  font-size: var(--font-size-4xl); line-height: var(--line-height-tight-4xl); letter-spacing: var(--letter-spacing-display); }
.display-sm          { font-family: var(--font-family-display); font-weight: var(--font-weight-base);      font-size: var(--font-size-4xl); line-height: var(--line-height-tight-4xl); letter-spacing: var(--letter-spacing-display); }
.display-xs-strong   { font-family: var(--font-family-display); font-weight: var(--font-weight-stronger);  font-size: var(--font-size-3xl); line-height: var(--line-height-tight-3xl); letter-spacing: var(--letter-spacing-display); }
.display-xs          { font-family: var(--font-family-display); font-weight: var(--font-weight-base);      font-size: var(--font-size-3xl); line-height: var(--line-height-tight-3xl); letter-spacing: var(--letter-spacing-display); }
.display-xxs-strong  { font-family: var(--font-family-display); font-weight: var(--font-weight-stronger);  font-size: var(--font-size-2xl); line-height: var(--line-height-tight-2xl); letter-spacing: var(--letter-spacing-display); }
.display-xxs         { font-family: var(--font-family-display); font-weight: var(--font-weight-base);      font-size: var(--font-size-2xl); line-height: var(--line-height-tight-2xl); letter-spacing: var(--letter-spacing-display); }

/* --- Heading / Title --- */

.heading-title-xxl-strong   { font-family: var(--font-family-heading); font-weight: var(--font-weight-strongest); font-size: var(--font-size-4xl); line-height: var(--line-height-tight-4xl); letter-spacing: var(--letter-spacing-default); }
.heading-title-xxl          { font-family: var(--font-family-heading); font-weight: var(--font-weight-base); font-size: var(--font-size-4xl); line-height: var(--line-height-tight-4xl); letter-spacing: var(--letter-spacing-default); }
.heading-title-xl-strong    { font-family: var(--font-family-heading); font-weight: var(--font-weight-stronger); font-size: var(--font-size-3xl); line-height: var(--line-height-tight-3xl); letter-spacing: var(--letter-spacing-default); }
.heading-title-xl           { font-family: var(--font-family-heading); font-weight: var(--font-weight-base); font-size: var(--font-size-3xl); line-height: var(--line-height-tight-3xl); letter-spacing: var(--letter-spacing-default); }
.heading-title-lg-strong    { font-family: var(--font-family-heading); font-weight: var(--font-weight-strong); font-size: var(--font-size-2xl); line-height: var(--line-height-tight-2xl); letter-spacing: var(--letter-spacing-default); }
.heading-title-lg           { font-family: var(--font-family-heading); font-weight: var(--font-weight-base); font-size: var(--font-size-2xl); line-height: var(--line-height-tight-2xl); letter-spacing: var(--letter-spacing-default); }
.heading-title-md-strong    { font-family: var(--font-family-heading); font-weight: var(--font-weight-medium); font-size: var(--font-size-xl); line-height: var(--line-height-tight-xl); letter-spacing: var(--letter-spacing-default); }
.heading-title-md           { font-family: var(--font-family-heading); font-weight: var(--font-weight-base); font-size: var(--font-size-xl); line-height: var(--line-height-tight-xl); letter-spacing: var(--letter-spacing-default); }
.heading-title-sm-strong    { font-family: var(--font-family-heading); font-weight: var(--font-weight-medium); font-size: var(--font-size-lg); line-height: var(--line-height-tight-lg); letter-spacing: var(--letter-spacing-default); }
.heading-title-sm           { font-family: var(--font-family-heading); font-weight: var(--font-weight-base); font-size: var(--font-size-lg); line-height: var(--line-height-tight-lg); letter-spacing: var(--letter-spacing-default); }

/* --- Heading / Subtitle --- */

.heading-subtitle-md { font-family: var(--font-family-subtitle); font-weight: var(--font-weight-medium); font-size: var(--font-size-md); line-height: var(--line-height-tight-md); letter-spacing: var(--letter-spacing-caps); text-transform: uppercase; }
.heading-subtitle-sm { font-family: var(--font-family-subtitle); font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); line-height: var(--line-height-tight-sm); letter-spacing: var(--letter-spacing-caps); text-transform: uppercase; }

/* --- Text --- */

.text-lg-regular { font-family: var(--font-family-text); font-weight: var(--font-weight-base);   font-size: var(--font-size-lg); line-height: var(--line-height-lg); letter-spacing: var(--letter-spacing-default); }
.text-lg-strong  { font-family: var(--font-family-text); font-weight: var(--font-weight-strong); font-size: var(--font-size-lg); line-height: var(--line-height-lg); letter-spacing: var(--letter-spacing-default); }
.text-lg-italic  { font-family: var(--font-family-text); font-weight: var(--font-weight-base);   font-size: var(--font-size-lg); line-height: var(--line-height-lg); letter-spacing: var(--letter-spacing-default); font-style: italic; }
.text-lg-strike  { font-family: var(--font-family-text); font-weight: var(--font-weight-base);   font-size: var(--font-size-lg); line-height: var(--line-height-lg); letter-spacing: var(--letter-spacing-default); text-decoration: line-through; }
.text-lg-link    { font-family: var(--font-family-text); font-weight: var(--font-weight-base);   font-size: var(--font-size-lg); line-height: var(--line-height-lg); letter-spacing: var(--letter-spacing-default); text-decoration: underline; }

.text-md-regular { font-family: var(--font-family-text); font-weight: var(--font-weight-base);   font-size: var(--font-size-md); line-height: var(--line-height-md); letter-spacing: var(--letter-spacing-default); }
.text-md-strong  { font-family: var(--font-family-text); font-weight: var(--font-weight-strong); font-size: var(--font-size-md); line-height: var(--line-height-md); letter-spacing: var(--letter-spacing-default); }
.text-md-italic  { font-family: var(--font-family-text); font-weight: var(--font-weight-base);   font-size: var(--font-size-md); line-height: var(--line-height-md); letter-spacing: var(--letter-spacing-default); font-style: italic; }
.text-md-strike  { font-family: var(--font-family-text); font-weight: var(--font-weight-base);   font-size: var(--font-size-md); line-height: var(--line-height-md); letter-spacing: var(--letter-spacing-default); text-decoration: line-through; }
.text-md-link    { font-family: var(--font-family-text); font-weight: var(--font-weight-base);   font-size: var(--font-size-md); line-height: var(--line-height-md); letter-spacing: var(--letter-spacing-default); text-decoration: underline; }

.text-sm-regular { font-family: var(--font-family-text); font-weight: var(--font-weight-base);   font-size: var(--font-size-sm); line-height: var(--line-height-sm); letter-spacing: var(--letter-spacing-default); }
.text-sm-strong  { font-family: var(--font-family-text); font-weight: var(--font-weight-strong); font-size: var(--font-size-sm); line-height: var(--line-height-sm); letter-spacing: var(--letter-spacing-default); }
.text-sm-italic  { font-family: var(--font-family-text); font-weight: var(--font-weight-base);   font-size: var(--font-size-sm); line-height: var(--line-height-sm); letter-spacing: var(--letter-spacing-default); font-style: italic; }
.text-sm-strike  { font-family: var(--font-family-text); font-weight: var(--font-weight-base);   font-size: var(--font-size-sm); line-height: var(--line-height-sm); letter-spacing: var(--letter-spacing-default); text-decoration: line-through; }
.text-sm-link    { font-family: var(--font-family-text); font-weight: var(--font-weight-base);   font-size: var(--font-size-sm); line-height: var(--line-height-sm); letter-spacing: var(--letter-spacing-default); text-decoration: underline; }

.text-xs-regular { font-family: var(--font-family-text); font-weight: var(--font-weight-base);   font-size: var(--font-size-xs); line-height: var(--line-height-xs); letter-spacing: var(--letter-spacing-default); }
.text-xs-strong  { font-family: var(--font-family-text); font-weight: var(--font-weight-strong); font-size: var(--font-size-xs); line-height: var(--line-height-xs); letter-spacing: var(--letter-spacing-default); }
.text-xs-italic  { font-family: var(--font-family-text); font-weight: var(--font-weight-base);   font-size: var(--font-size-xs); line-height: var(--line-height-xs); letter-spacing: var(--letter-spacing-default); font-style: italic; }
.text-xs-strike  { font-family: var(--font-family-text); font-weight: var(--font-weight-base);   font-size: var(--font-size-xs); line-height: var(--line-height-xs); letter-spacing: var(--letter-spacing-default); text-decoration: line-through; }
.text-xs-link    { font-family: var(--font-family-text); font-weight: var(--font-weight-base);   font-size: var(--font-size-xs); line-height: var(--line-height-xs); letter-spacing: var(--letter-spacing-default); text-decoration: underline; }

/* --- Utility --- */

.utility-label       { font-family: var(--font-family-utility); font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); line-height: var(--line-height-sm);   letter-spacing: var(--letter-spacing-default); }
.utility-helpertext  { font-family: var(--font-family-utility); font-weight: var(--font-weight-base);   font-size: var(--font-size-sm); line-height: var(--line-height-sm);   letter-spacing: var(--letter-spacing-default); }
.utility-breadcrumbs { font-family: var(--font-family-utility); font-weight: var(--font-weight-base);   font-size: var(--font-size-sm); line-height: var(--line-height-sm);   letter-spacing: var(--letter-spacing-default); }
.utility-button-sm   { font-family: var(--font-family-utility); font-weight: var(--font-weight-base);   font-size: var(--font-size-sm); line-height: var(--line-height-sm);   letter-spacing: var(--letter-spacing-default); }
.utility-button-md   { font-family: var(--font-family-utility); font-weight: var(--font-weight-medium); font-size: var(--font-size-md); line-height: var(--line-height-md);   letter-spacing: var(--letter-spacing-default); }
.utility-badge      { font-family: var(--font-family-utility); font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); line-height: var(--line-height-flag); letter-spacing: var(--letter-spacing-default); }
.utility-code-md     { font-family: var(--font-family-code);    font-weight: var(--font-weight-base);   font-size: var(--font-size-md); line-height: var(--line-height-md);   letter-spacing: 0; }

/* --- Utility / Product (prix, noms produit — uppercase + caps spacing) --- */

.utility-product-md  { font-family: var(--font-family-product); font-weight: var(--font-weight-medium); font-size: var(--font-size-xl); line-height: var(--line-height-xl);   letter-spacing: var(--letter-spacing-caps); text-transform: uppercase; }
.utility-product-sm  { font-family: var(--font-family-product); font-weight: var(--font-weight-medium); font-size: var(--font-size-lg); line-height: var(--line-height-md);   letter-spacing: var(--letter-spacing-caps); text-transform: uppercase; }
.utility-product-xs  { font-family: var(--font-family-product); font-weight: var(--font-weight-medium); font-size: var(--font-size-md); line-height: var(--line-height-sm);   letter-spacing: var(--letter-spacing-caps); text-transform: uppercase; }
.utility-product-xxs { font-family: var(--font-family-product); font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); line-height: var(--line-height-flag); letter-spacing: var(--letter-spacing-caps); text-transform: uppercase; }


/* ==========================================================================
   HP Ticket Gagnant - page publique
   Design system Meridian : toute valeur visuelle vient des tokens Meridian ci-dessus (inclus dans ce fichier).
   Couleurs : tokens sémantiques uniquement. Police : Hanken Grotesk. Coins vifs.
   Cible : navigateurs desktop et mobiles, écrans tactiles de borne.
   ========================================================================== */

.hptg-body {
  margin: 0;
  background: var(--color-surface-0);
}

.hptg,
.hptg * {
  box-sizing: border-box;
}

.hptg {
  --hptg-touch: var(--spacing-height-3xl);   /* 40px : hauteur des champs et boutons Meridian */

  display: flex;
  flex-direction: column;
  background: transparent;
  color: var(--color-foreground-neutral-10);
  font-family: var(--font-family-text);
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

.hptg--standalone { min-height: 100vh; }

/* ------------------------------------------------------------------ Bandeau */
.hptg-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-gap-lg);
  padding: var(--spacing-height-xl) var(--spacing-margin-tablet-sm);
  border-bottom: var(--line-stroke-base) solid var(--color-border-neutral-3);
}
.hptg-logo {
  display: block;
  height: 37px;
  width: auto;
  color: var(--color-foreground-neutral-10);
}

/* ------------------------------------------------------------------ Contenu */
.hptg-main {
  flex: 1;
  width: 100%;
  max-width: 1408px;
  margin: 0 auto;
  padding: 84px var(--spacing-margin-mobile-md) var(--spacing-height-4xl);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--spacing-gap-3xl);
  align-items: center;
}
.hptg-panel { display: flex; flex-direction: column; gap: var(--spacing-gap-xl); width: 100%; max-width: 640px; }
/* Quand la mise en page passe sur une colonne (tablette, mobile) : les blocs sont centrés */
@media (max-width: 1099px) { .hptg-panel { margin-right: auto; margin-left: auto; } }
/* Bloc blanc : uniquement pour le formulaire et l'écran « déjà participé » */
.hptg-screen--card { box-sizing: border-box; background: var(--color-surface-0); color: var(--color-foreground-neutral-10); padding: var(--spacing-height-4xl) var(--spacing-width-4xl); }
@media (max-width: 767px) { .hptg-screen--card { padding: var(--spacing-height-xl) var(--spacing-width-xl); } }
.hptg-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hptg-screen {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gap-xl);
  animation: hptg-enter 300ms ease both;
}
.hptg-screen[hidden] { display: none; }

.hptg-title { margin: 0; outline: none; }
.hptg-lead { margin: 0; color: var(--color-foreground-neutral-10); }
.hptg-prizes { margin: 0; }

/* ----------------------------------------------------------------- Formulaire */
.hptg-form { display: flex; flex-direction: column; gap: var(--spacing-gap-xl); }
.hptg-field { display: flex; flex-direction: column; gap: var(--spacing-gap-sm); }

.hptg-label {
  font-family: var(--font-family-utility);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  color: var(--color-foreground-neutral-10);
}
.hptg-req { color: var(--color-foreground-red-dark); }   /* astérisque rouge : champ obligatoire */

/* Champ : reprise du composant « Form inputs » de Meridian (taille tactile pour la borne). */
.hptg-input-shell {
  display: flex;
  align-items: stretch;
  height: var(--hptg-touch);
  border: var(--line-stroke-base) solid var(--color-border-neutral-4);
  background: var(--color-surface-0);
  transition: border-color 120ms ease-out, box-shadow 150ms cubic-bezier(.16, .84, .44, 1);
}
.hptg-input-shell:focus-within {
  border-color: var(--color-border-neutral-5);
  box-shadow: 0 0 0 3px var(--color-border-neutral-4);
}
.hptg-input-shell.is-error { border-color: var(--color-border-red-dark); }
.hptg-input-shell.is-error:focus-within { box-shadow: 0 0 0 3px var(--color-border-red-light); }

.hptg-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0 var(--spacing-width-md);
  font-family: var(--font-family-text);
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  color: var(--color-foreground-neutral-10);
  border-radius: var(--radius-none);
}
.hptg-input::placeholder { color: var(--color-foreground-neutral-5); }

.hptg-help {
  margin: 0;
  font-family: var(--font-family-utility);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  color: var(--color-foreground-neutral-10);
}
.hptg-help.is-error { color: var(--color-foreground-red-dark); }

/* Checkbox : reprise du composant « Checkbox & Radio » de Meridian (24 x 24, coins vifs, coche 1,5 px). */
.m-control {
  --control-size: 24px;
  --control-fill: var(--color-surface-0);
  --control-border: var(--color-border-neutral-3);
  --control-border-width: var(--line-stroke-base);

  display: inline-flex;
  align-items: flex-start;
  gap: var(--spacing-gap-md);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}
.m-control input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.m-control__box {
  position: relative;
  flex-shrink: 0;
  width: var(--control-size);
  height: var(--control-size);
  background: var(--control-fill);
  border: var(--control-border-width) solid var(--control-border);
  transition: background-color 150ms ease, border-color 150ms ease, border-width 150ms ease, box-shadow 150ms ease;
}
.m-control__label {
  font-weight: var(--font-weight-base, 400);
  font-family: var(--font-family-text);
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  color: var(--color-foreground-neutral-10);
}
.m-control:hover input:not(:disabled) ~ .m-control__box {
  border-color: var(--color-border-neutral-6);
  border-width: var(--line-stroke-bold);
}
.m-control input:focus-visible ~ .m-control__box {
  box-shadow: 0 0 0 var(--line-stroke-bold) var(--color-border-neutral-4);
}
.m-control input:checked ~ .m-control__box {
  background: var(--color-surface-10);
  border-color: var(--color-border-neutral-10);
  border-width: var(--line-stroke-base);
}
.m-checkbox .m-control__box { border-radius: var(--radius-none); }
.m-checkbox .m-control__box::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'><path d='M5 12.5 L10 17.5 L19 7.5' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='square' stroke-linejoin='miter'/></svg>");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 150ms ease, transform 150ms cubic-bezier(.2, .8, .2, 1);
}
.m-checkbox input:checked ~ .m-control__box::before { opacity: 1; transform: scale(1); }
.m-control.is-error .m-control__box { border-color: var(--color-border-red-dark); }

.hptg-consent { align-self: flex-start; }

.hptg-rules {
  margin-top: var(--spacing-gap-md);
  padding: var(--spacing-height-md) var(--spacing-width-lg);
  border: var(--line-stroke-base) solid var(--color-border-neutral-4);
  background: transparent;
}
.hptg-rules summary { cursor: pointer; font-weight: var(--font-weight-medium); min-height: 32px; display: flex; align-items: center; }
.hptg-rules-link { display: inline-flex; align-items: center; min-height: 32px; color: inherit; }
.hptg-help:empty { display: none; }
.hptg-link { color: var(--color-foreground-neutral-10); text-decoration: underline; text-underline-offset: 3px; }

/* Message de retour (composant « Feedback », ton erreur, rendu Light) */
.hptg-feedback {
  padding: var(--spacing-height-lg) var(--spacing-width-lg);
  background: var(--color-background-red-light);
  border: var(--line-stroke-base) solid var(--color-border-red-dark);
  color: var(--color-foreground-red-dark);
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
}
.hptg-feedback[hidden] { display: none; }

/* ------------------------------------------------------------------- Boutons */
/* Reprise du composant « Buttons » de Meridian (primary / outline / ghost, coins vifs). */
.hptg-actions { display: flex; flex-direction: column; gap: var(--spacing-gap-lg); }
.hptg-actions[hidden] { display: none; }

.hptg-btn {
  font-family: var(--font-family-utility);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  letter-spacing: var(--letter-spacing-default);
  border-radius: var(--radius-button);
  height: var(--hptg-touch);
  padding: 0 var(--spacing-width-lg);
  border: var(--line-stroke-base) solid transparent;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-gap-md);
  cursor: pointer;
  white-space: nowrap;
  width: 100%;
  touch-action: manipulation;
}
.hptg-btn[hidden] { display: none; }
.hptg-btn:focus-visible { outline: var(--line-stroke-bold) solid var(--color-border-neutral-10); outline-offset: 2px; }

/* Bloc blanc : bouton Primary de Meridian (noir) */
.hptg-btn--primary { background: var(--color-surface-10); color: var(--color-foreground-neutral-0); }
.hptg-btn--primary:hover { background: var(--color-surface-8); }
.hptg-btn--primary:active { background: var(--color-surface-7); }
.hptg-btn--primary[disabled] { background: var(--color-background-neutral-4); color: var(--color-foreground-neutral-5); cursor: not-allowed; }

.hptg-btn--ghost {
  background: transparent;
  color: var(--color-foreground-neutral-10);
  padding: 0;
  height: auto;
  width: auto;
  min-height: 40px;
}
.hptg-btn--ghost:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Le thème stylise tous les liens (bleu, souligné, au survol) : on garde les couleurs Meridian dans tous les états. */
#hptg a.hptg-btn, #hptg a.hptg-btn:link, #hptg a.hptg-btn:visited, #hptg a.hptg-btn:hover, #hptg a.hptg-btn:focus, #hptg a.hptg-btn:active { text-decoration: none !important; }
#hptg a.hptg-btn--primary, #hptg a.hptg-btn--primary:link, #hptg a.hptg-btn--primary:visited, #hptg a.hptg-btn--primary:hover, #hptg a.hptg-btn--primary:focus, #hptg a.hptg-btn--primary:active { color: var(--color-foreground-neutral-0) !important; }
#hptg a.hptg-btn--ghost, #hptg a.hptg-btn--ghost:link, #hptg a.hptg-btn--ghost:visited, #hptg a.hptg-btn--ghost:hover, #hptg a.hptg-btn--ghost:focus, #hptg a.hptg-btn--ghost:active { color: var(--color-foreground-neutral-10) !important; }
#hptg a.hptg-btn--ghost:hover { text-decoration: underline; text-underline-offset: 3px; }
#hptg a.hptg-rules-link, #hptg a.hptg-rules-link:link, #hptg a.hptg-rules-link:visited, #hptg a.hptg-rules-link:hover, #hptg a.hptg-rules-link:focus, #hptg a.hptg-rules-link:active { color: var(--color-foreground-neutral-10) !important; text-decoration: underline; text-underline-offset: 3px; }

/* ----------------------------------------------------------- Distributeur de tickets
   Le fond de section est la photo de bois, la machine fait partie de la photo.
   Le calque .hptg-machine porte la photo à une échelle fixe par breakpoint (--s) : 1 "u" = 1 px de la photo d'origine x --s.
   La zone de sortie du ticket est donc exprimée en u et reste calée sur la fente à toutes les tailles. */
.hptg-section {
  --s: .95;
  --u: calc(var(--s) * 1px);          /* unité du ticket et des textes de la scène */
  --pu: calc(var(--s) * .682px);       /* px d'affichage par pixel de la photo : la machine garde la même taille à l'écran */
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;               /* pleine hauteur d'écran, comme le hero */
  overflow: hidden;
  isolation: isolate;
  /* Teinte du bois (couleur produit réelle, visible seulement si l'image tarde à charger) */
  background-color: #3b1d0f;
  color: var(--color-foreground-neutral-10);
}
.hptg-section .hptg { width: 100%; }
/* Calque photo : placé dans .hptg-stage, le haut de la machine = le haut de la zone. 1em = 1 px de la photo x --s.
   La photo est prolongée en haut, en bas et à droite (miroir du bois) pour couvrir toute la section. */
.hptg-machine, .hptg-pull {
  position: absolute;
  font-size: var(--pu);                          /* 1em = 1 pixel de la photo */
  width: 6046em;
  height: 3378em;
  top: -1458em;                                   /* haut de la machine = haut de la zone */
  left: 50%;
  margin-left: -3046em;                          /* centre de la machine sous le centre de la zone */
  pointer-events: none;
}
.hptg-machine {
  z-index: -1;
  background-color: #3b1d0f;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("../../../img/home/ticket/bois-large.jpg");
  background-image: image-set(url("../../../img/home/ticket/bois-large.webp") type("image/webp"), url("../../../img/home/ticket/bois-large.jpg") type("image/jpeg"));
}
/* Calque du ticket : au-dessus du texte, pour que le ticket puisse se promener dans toute la section */
.hptg-pull { z-index: 5; }
/* Réserve la place de la machine et du ticket dans la grille */
.hptg-stage { position: relative; width: 100%; height: calc(484 * var(--pu)); }   /* = hauteur de la machine : le texte se centre sur elle */

/* Ancre de sortie : l'ouverture de la fente (y = 402 sur la photo d'origine). Tant que le ticket est dans la machine, tout ce qui
   dépasse au-dessus de l'ancre est masqué ; une fois le ticket sorti (.is-free), il n'est plus rogné. */
/* Ancre de sortie : la fenêtre de la fente (centre y = 600 sur la photo d'origine) */
.hptg-exit {
  position: absolute;
  top: 1900em;
  left: 2981em;
  width: 130em;
  height: 640em;
  overflow: hidden;
}
.hptg-exit.is-free { overflow: visible; }
/* Ombre portée par le bord de la fente : passe au-dessus du ticket tant qu'il est dans la machine */
.hptg-exit::after { content: ''; position: absolute; top: 0; right: 0; left: 0; height: 24em; pointer-events: none; z-index: 3; box-shadow: inset 0 8em 8em -6em color-mix(in srgb, var(--color-background-neutral-10, #0b0b0c) 75%, transparent); }
.hptg-exit.is-free::after { display: none; }

/* Ticket à tirer : le déplacement et la rotation sont pilotés par ticket.js (transform) */
.hptg-puller {
  position: absolute;
  top: 0; left: 0;
  font-size: var(--u);
  width: 66em;
  margin: 0;
  padding: 0;
  transform-origin: 0 0;
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  outline: none;
  will-change: transform;
}
.hptg-puller[hidden] { display: none; }
/* Zone de saisie élargie autour de la pointe visible, pour le doigt */
.hptg-puller::after { content: ''; position: absolute; top: -4em; right: -10em; bottom: -26em; left: -10em; }
.hptg-puller.is-grab { cursor: grabbing; }
.hptg-puller:focus-visible .hptg-ticket { outline: var(--line-stroke-bold) solid var(--color-border-neutral-0, #ffffff); outline-offset: 2px; }
/* Ombre portée : sur le conteneur, car le ticket lui-même est découpé (clip-path) */
.hptg-puller.is-free { filter: drop-shadow(0 calc(5 * var(--u)) calc(9 * var(--u)) color-mix(in srgb, var(--color-background-neutral-10, #0b0b0c) 55%, transparent)); }
.hptg-puller.is-nudge { animation: hptg-nudge 1.6s ease-in-out 600ms infinite; }
@keyframes hptg-nudge { 0%, 70%, 100% { margin-top: 0; } 82% { margin-top: calc(5 * var(--u)); } 92% { margin-top: calc(1 * var(--u)); } }

/* Ticket : reprise du ticket papier (angles arrondis, pointe, barre noire, numéro, triangle rouge) */
.hptg-ticket { position: relative; width: 100%; color: var(--color-foreground-neutral-10, #0b0b0c); text-align: center; }
.hptg-ticket__shape { display: block; width: 100%; height: auto; overflow: visible; }
.hptg-ticket__paper { fill: var(--color-surface-0, #ffffff); stroke: var(--color-border-neutral-3, #e6e6e6); stroke-width: .5; }
.hptg-ticket__bar { fill: var(--color-foreground-neutral-10, #0b0b0c); }
.hptg-ticket__tri { fill: var(--color-background-red-dark, #a40104); }
.hptg-ticket__number { position: absolute; left: 0; right: 0; top: 40%; transform: translateY(-50%); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hptg-puller .hptg-ticket__number { font-size: calc(22 * var(--u)); line-height: calc(26 * var(--u)); letter-spacing: 0; }
.hptg-ticket--static { width: 196px; margin: 0; }
.hptg-ticket--static .hptg-ticket__number { font-size: var(--font-size-3xl, 39px); line-height: 1.1; }

/* Message d'aide : icône Meridian (doigt) + consigne */
.hptg-hint { position: absolute; left: 0; right: 0; top: calc(484 * var(--pu) + 64 * var(--u)); margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--spacing-gap-lg); text-align: center; color: var(--color-foreground-neutral-0, #ffffff); pointer-events: none; }
.hptg-hint[hidden] { display: none; }
.hptg-hint__hand { width: 40px; height: 40px; flex-shrink: 0; animation: hptg-hand 2.4s cubic-bezier(.45, 0, .25, 1) infinite; }
@keyframes hptg-hand {
  0% { transform: translateY(0); opacity: 0; }
  10% { transform: translateY(0); opacity: 1; }
  70% { transform: translateY(40px); opacity: 1; }
  82% { transform: translateY(40px); opacity: 0; }
  100% { transform: translateY(40px); opacity: 0; }
}

/* Résultat */
.hptg-result { display: flex; flex-direction: column; gap: var(--spacing-gap-lg); animation: hptg-enter 400ms ease both; }
.hptg-result[hidden] { display: none; }
.hptg-result__title { margin: 0; outline: none; }
.hptg-result p { margin: 0; }
.hptg-result__offer { margin: 0; color: var(--color-foreground-neutral-10); }
/* Séparateur : trait gris de 1 px (token de bordure légère Meridian) */
.hptg-sep { width: 100%; height: 0; margin: var(--spacing-gap-sm) 0; padding: 0; border: 0; border-top: var(--line-stroke-base) solid var(--color-border-neutral-3); }
.hptg-result__big { margin: 0; font-family: var(--font-family-display, "Hanken Grotesk", sans-serif); font-weight: var(--font-weight-strongest, 900); font-size: var(--font-size-6xl, 76px); line-height: 1; letter-spacing: var(--letter-spacing-display, -1.5px); font-variant-numeric: tabular-nums; color: var(--color-foreground-neutral-10); }
.hptg-result__number {
  font-weight: var(--font-weight-strongest);
  letter-spacing: 2px;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- Animations */
@keyframes hptg-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------ Tablette et mobile (photo étroite, centrée) */
@media (max-width: 1099px) {
  .hptg-section { --s: 1; }
  .hptg-machine, .hptg-pull { width: 3012em; height: 3428em; top: -758em; margin-left: -1506em; }
  .hptg-machine {
    background-image: url("../../../img/home/ticket/bois-etroit.jpg");
    background-image: image-set(url("../../../img/home/ticket/bois-etroit.webp") type("image/webp"), url("../../../img/home/ticket/bois-etroit.jpg") type("image/jpeg"));
  }
  .hptg-exit { top: 1200em; left: 1441em; }
  .hptg-stage { height: calc(484 * var(--pu) + 160 * var(--u)); }
  .hptg-main { padding-top: 84px; }
}
@media (max-width: 767px) {
  .hptg-section { --s: .72; }
  .hptg-main { padding-top: 76px; }
  /* Mobile : tokens Meridian plus petits */
  .hptg-screen--card { padding: var(--spacing-height-lg) var(--spacing-width-lg); }
  .hptg-title, .hptg-title.display-sm-strong, .hptg-title.display-xxs-strong, .hptg-result__title.display-xxs-strong { font-size: var(--font-size-xl); line-height: var(--line-height-xl); }
  .hptg-lead.text-lg-regular, .hptg-result__offer.text-lg-regular, .hptg-prizes.text-lg-strong, .hptg-result .text-lg-regular, .hptg-result p:not(.hptg-result__big) { font-size: var(--font-size-md); line-height: var(--line-height-md); }
  .hptg-result__big { font-size: var(--font-size-3xl, 39px); line-height: 1; }
  .hptg-ticket--static .hptg-ticket__number { font-size: var(--font-size-2xl, 31px); }
  .hptg-screen, .hptg-result, .hptg-form { gap: var(--spacing-gap-md); }
  /* Mobile : pendant que l'on tire le ticket, pas de bloc blanc ; il réapparaît avec l'écran de félicitations */
  #hptg-screen-machine:not(.has-result) { display: none; }
}

/* ------------------------------------------------------------ Grands écrans */
@media (min-width: 900px) {
  .hptg-main { padding: 84px var(--spacing-margin-desktop-sm) var(--spacing-height-5xl); }
  .hptg-title.display-sm-strong { font-size: var(--font-size-5xl); line-height: var(--line-height-5xl); }
  .hptg-actions { flex-direction: row; }
  .hptg-btn { width: auto; }
}

@media (min-width: 1100px) {
  .hptg-main { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--spacing-gap-6xl); align-items: center; }
}

@media (max-width: 520px) {
  .hptg-main { padding-right: var(--spacing-margin-mobile-md); padding-left: var(--spacing-margin-mobile-md); padding-bottom: var(--spacing-height-3xl); }
}

/* Accessibilité : mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  .hptg-hint__hand { animation: none; }
  .hptg-screen, .hptg-result { animation: none; }
  
}

/* Bandeau du mode test */
.hptg-test-banner { margin: 0; padding: var(--spacing-height-sm) var(--spacing-width-lg); text-align: center; background: var(--color-surface-2); color: var(--color-foreground-neutral-10); font-family: var(--font-family-utility); font-size: var(--font-size-sm); line-height: var(--line-height-sm); }