/* Les jetons du design system Elio, copiés de design/_ds/.../tokens/.
   Cette copie est volontaire : `design/` est le miroir de Claude Design, il ne
   se modifie pas à la main et il ne part pas en ligne. Quand le design system
   change, on recopie. */

/* ---------- Polices ---------- */
/* Hébergées avec le site (assets/polices/), pas appelées chez Google : la page
   de confidentialité promet que rien ne part chez un tiers, et un appel à
   fonts.googleapis.com à chaque page la démentirait. Ce sont les versions
   variables, d'où le `font-weight` en intervalle : un seul fichier couvre
   toutes les graisses. */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../polices/baloo2-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../polices/baloo2-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../polices/lora-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../polices/lora-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../polices/lora-italique-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('../polices/lora-italique-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ---------- Socle ---------- */
  --noir: #131313; --bordeaux: #77170A; --blanc: #F2F2F2;
  /* Échelle bordeaux */
  --bordeaux-900: #3E0C05; --bordeaux-800: #571007; --bordeaux-700: #77170A;
  --bordeaux-600: #8F2110; --bordeaux-500: #A82A15; --bordeaux-300: #C96A52; --bordeaux-100: #EFD9D3;
  /* Neutres chauds */
  --noir-900: #0D0D0C; --noir-800: #131313; --noir-700: #1C1B1A; --noir-600: #262423; --noir-500: #3A3735;
  --gris-400: #6E6862; --gris-300: #8F8983; --gris-200: #B5AFA9; --gris-100: #DAD5D0;
  --blanc-50: #F2F2F2; --blanc-0: #FBFAF9;
  /* Surfaces */
  --surface-page: var(--noir-800); --surface-elevee: var(--noir-700); --surface-carte: var(--noir-700);
  --surface-bordeaux: var(--bordeaux-700);
  /* Texte */
  --text-primaire: var(--blanc-50); --text-secondaire: var(--gris-200); --text-tertiaire: var(--gris-300);
  --text-accent: var(--bordeaux-500); --text-accent-sur-sombre: #E8A896;
  /* Interactif */
  --action-primaire: var(--bordeaux-700); --action-primaire-hover: var(--bordeaux-600);
  --action-primaire-press: var(--bordeaux-800); --focus-ring: rgba(168, 42, 21, .45);
  /* Bordures */
  --bordure-sombre: rgba(242, 242, 242, .10); --bordure-sombre-forte: rgba(242, 242, 242, .18);
  --bordure-bordeaux: rgba(201, 106, 82, .28);
  /* États système */
  --ok: #5B9A6B; --attention: #C79A3B; --erreur: var(--bordeaux-500);

  /* ---------- Typographie ---------- */
  --font-display: 'Baloo 2', system-ui, sans-serif;
  --font-body: 'Lora', Georgia, serif;
  --tracking-eyebrow: .18em;

  /* ---------- Effets ---------- */
  --ombre-flottante: 0 12px 40px rgba(13, 13, 12, .35);
  --degrade-bordeaux: radial-gradient(120% 140% at 20% 0%, #8F2110 0%, #77170A 45%, #4A0E06 100%);

  /* ---------- Mouvement ---------- */
  --duree-rapide: 150ms; --duree-normale: 280ms; --duree-lente: 600ms;
  --ease-sortie: cubic-bezier(.22, .8, .32, 1); --ease-douce: cubic-bezier(.45, .05, .35, .95);

  /* ---------- Orbe (couleurs internes du composant) ---------- */
  --orbe-px: 190px;
  --orbe-nuage-1: #C41616; --orbe-nuage-2: #8F0D0D; --orbe-nuage-3: #E32222; --orbe-nuage-4: #5C0808;
  --orbe-sphere-centre: #380606; --orbe-sphere-bord: #140202;
  --orbe-bloom: rgba(196, 22, 22, .5);
  --orbe-arc-vif: rgba(227, 34, 34, .95); --orbe-arc-doux: rgba(143, 13, 13, .9);
  --orbe-reflet: rgba(255, 70, 70, .32);
}