:root {
  /* ==========================================================================
     Palette Graphique V2 Via-ludos (Inspirée de la maquette du 13 octobre 2026)
     ========================================================================== */
  
  /* Couleurs dominantes */
  --vl-color-primary: #c43e20;         /* Corail / orange terracotta dynamique conforme WCAG AA (5.2:1) */
  --vl-color-primary-hover: #a83318;   /* Corail profond hover */
  --vl-color-primary-light: #fdf2ef;   /* Corail pastel fond badge */
  --vl-color-primary-dark: #9e2c14;    /* Terracotta textuel haute lisibilité */
  
  --vl-color-secondary: #264f58;       /* Bleu pétrole profond */
  --vl-color-secondary-hover: #1c3d44; /* Bleu pétrole foncé hover */
  --vl-color-secondary-light: #e2eded; /* Bleu très pâle / givré (bande services) */
  
  --vl-color-accent: #264f58;          /* Accent pétrole élégant */
  --vl-color-dark: #1b383f;            /* Bleu pétrole sombre */
  
  /* Fonds et surfaces */
  --vl-color-bg: #f9f8f6;              /* Fond de page blanc lumineux chaleureux */
  --vl-color-surface: #ffffff;         /* Surface blanche pure */
  --vl-color-surface-soft: #f4f3ef;    /* Surface secondaire douce */
  --vl-color-pale-blue: #e2eded;       /* Bleu très pâle de la maquette */
  
  /* Textes et encres */
  --vl-color-text: #1c2826;            /* Gris-bleu très sombre, lisible et doux */
  --vl-color-text-muted: #536265;      /* Gris minéral pour textes secondaires */
  --vl-color-text-light: #7b8b8e;      /* Texte d'aide ou tertiaire */
  
  /* Bordures et séparateurs doux */
  --vl-color-border: #e2e8f0;          /* Bordure fine discrète */
  --vl-color-border-subtle: #edf2f4;   /* Séparateur ultra-doux */
  --vl-color-border-strong: #cbd5e1;   /* Bordure interactive */

  /* Alertes et états */
  --vl-color-warning: #d97706;         /* Ambre chaud */
  --vl-color-error: #dc2626;           /* Rouge accessible */
  --vl-color-info: #0284c7;            /* Bleu info */
  --vl-color-success: #16a34a;         /* Vert confirmation */

  /* Typographie */
  --vl-font-sans: 'Archivo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --vl-font-serif: "Newsreader", "Playfair Display", "Charter", "Bitstream Charter", "Iowan Old Style", "Cambria", Georgia, "DejaVu Serif", "Liberation Serif", "Times New Roman", serif;
  --vl-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  
  --vl-font-size-xs: 0.75rem;
  --vl-font-size-sm: 0.875rem;
  --vl-font-size-base: 1rem;
  --vl-font-size-lg: 1.125rem;
  --vl-font-size-xl: 1.25rem;
  --vl-font-size-2xl: 1.5rem;
  --vl-font-size-3xl: 2.125rem;
  --vl-font-size-4xl: 2.75rem;
  --vl-font-size-5xl: 3.5rem;

  --vl-line-height-tight: 1.15;
  --vl-line-height-snug: 1.3;
  --vl-line-height-normal: 1.6;
  --vl-line-height-relaxed: 1.75;

  /* Espacements */
  --vl-space-1: 0.25rem;
  --vl-space-2: 0.5rem;
  --vl-space-3: 0.75rem;
  --vl-space-4: 1rem;
  --vl-space-5: 1.25rem;
  --vl-space-6: 1.5rem;
  --vl-space-8: 2rem;
  --vl-space-10: 2.5rem;
  --vl-space-12: 3rem;
  --vl-space-16: 4rem;
  --vl-space-20: 5rem;

  /* Bordures fines V2 */
  --vl-border-width: 1px;
  --vl-border-width-thin: 1px;
  --vl-border-style: solid;
  --vl-border: 1px solid var(--vl-color-border);
  --vl-border-thin: 1px solid var(--vl-color-border);
  
  /* Arrondis harmonieux */
  --vl-radius-sm: 6px;
  --vl-radius: 10px;
  --vl-radius-lg: 16px;
  --vl-radius-full: 9999px;

  /* Ombres douces et naturelles (remplace les ombres dures néo-brutalistes) */
  --vl-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --vl-shadow: 0 4px 14px rgba(28, 40, 38, 0.06);
  --vl-shadow-lg: 0 12px 30px rgba(28, 40, 38, 0.08);
  --vl-shadow-hover: 0 10px 24px rgba(28, 40, 38, 0.12);
  --vl-shadow-active: 0 2px 6px rgba(28, 40, 38, 0.08);

  /* Largeurs et conteneurs V2 : Rendu aéré 88-92% sur desktop (1360px max) */
  --vl-container-max: 1360px;
  --vl-container-padding: 1.75rem;

  /* Breakpoints nominatifs */
  --vl-bp-mobile: 360px;
  --vl-bp-tablet: 768px;
  --vl-bp-desktop: 1024px;
  --vl-bp-wide: 1440px;

  /* Transitions fluides */
  --vl-transition-fast: 0.15s ease-out;
  --vl-transition-normal: 0.25s ease-out;
}

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 100%;
  font-display: swap;
  src: url('../fonts/archivo-latin-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/newsreader-latin-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/newsreader-italic-latin-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}