/* ============================================================
   VARIABLES CSS RECONSTRUITES
   ------------------------------------------------------------
   Ce fichier n'existait pas dans ce que tu m'as envoyé. Sans lui,
   toutes les déclarations utilisant var(--xxx) dans styles.css
   étaient invalides et donc ignorées par le navigateur — c'est
   ce qui expliquait l'absence totale de styles.

   Les couleurs --color-steelblue, --color-orangered,
   --color-darkslateblue, --color-goldenrod, --color-royalblue,
   --color-dodgerblue et --color-lightpink correspondent à des
   noms de couleurs CSS standard : j'ai repris leur valeur exacte,
   ce n'est pas une supposition.

   Les échelles linen-100/200/300/400 et gray-100/200/300, ainsi
   que les tailles/espacements (--fs-*, --gap-*, --padding-*,
   --height-*, --width-*, --br-*, --lh-*), sont en revanche des
   valeurs raisonnables que j'ai choisies à partir de l'usage réel
   de chaque variable dans ton CSS. Si tu retrouves le fichier
   d'origine de ton export, remplace simplement ce fichier par le
   tien — tout le reste continuera de fonctionner à l'identique.
   ============================================================ */

:root {
  /* ---------- Couleurs : noms CSS standard (valeurs exactes) ---------- */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-steelblue: steelblue;
  --color-orangered: orangered;
  --color-darkslateblue: darkslateblue;
  --color-goldenrod: goldenrod;
  --color-royalblue: royalblue;
  --color-dodgerblue: dodgerblue;
  --color-lightpink: lightpink;

  /* ---------- Échelle "linen" (tons crème/lin clairs) ---------- */
  /* Fond général du site + texte clair sur le footer sombre */
  --color-linen-100: #faf6ef;
  /* Texte des boutons sur fond foncé (légèrement différent de linen-100) */
  --color-linen-200: #f3ece1;
  /* Ligne de séparation discrète dans le footer sombre */
  --color-linen-300: #8a7f70;
  /* Fond du champ email dans le footer (doit ressortir sur fond sombre) */
  --color-linen-400: #efe4d4;

  /* ---------- Échelle "gray" (du plus foncé au plus clair) ---------- */
  /* Texte principal + fond du footer */
  --color-gray-100: #262626;
  /* Sous-titres sur fond clair */
  --color-gray-200: #4d4d4d;
  /* Texte secondaire / placeholder sur la photo du hero */
  --color-gray-300: #9c9c9c;

  /* ---------- Polices ---------- */
  --font-roboto: "Roboto", sans-serif;
  --font-poppins: "Poppins", sans-serif;
  --font-baloo-2: "Baloo 2", sans-serif;
  /* "Clash Display Variable" n'est PAS disponible sur Google Fonts
     (c'est une police Fontshare, voir note en bas de fichier) :
     on prévoit un repli propre en attendant. */
  --font-clash-display-variable: "Clash Display Variable", "Poppins",
    sans-serif;

  /* ---------- Tailles de police ---------- */
  --fs-48: 48px;
  --fs-36: 36px;
  --fs-32: 32px;
  --fs-24: 24px;
  --fs-20: 20px;
  --fs-16: 16px;
  --fs-11: 11px;
  --fs-10: 10px;

  /* ---------- Espacements (gap) ---------- */
  --gap-3: 3px;
  --gap-10: 10px;
  --gap-13: 13px;
  --gap-15: 15px;
  --gap-16: 16px;
  --gap-18: 18px;
  --gap-20: 20px;
  --gap-24: 24px;
  --gap-30: 30px;
  --gap-32: 32px;

  /* ---------- Paddings ---------- */
  --padding-0: 0px;
  --padding-01: 0px;
  --padding-5: 5px;
  --padding-6: 6px;
  --padding-7: 7px;
  --padding-10: 10px;
  --padding-16: 16px;
  --padding-18: 18px;
  --padding-20: 20px;
  --padding-28: 28px;
  --padding-100: 100px;

  /* ---------- Hauteurs ---------- */
  --height-1: 1px;
  --height-11: 11px;
  --height-17: 17px;
  --height-18: 18px;
  --height-24: 24px;
  --height-32: 32px;
  --height-44: 44px;
  --height-60: 60px;
  --height-361: 361px;
  --height-482: 482px;
  --height-700: 700px;

  /* ---------- Largeurs ---------- */
  --width-11: 11px;
  --width-24: 24px;
  --width-192: 192px;
  --width-400: 400px;
  --width-1728: 1728px;

  /* ---------- Rayons de bordure ---------- */
  --br-0: 0px;
  --br-5: 5px;
  --br-6: 6px;
  --br-8: 8px;

  /* ---------- Hauteur de ligne ---------- */
  --lh-26: 26px;
}

/* ============================================================
   NOTE — police "Clash Display Variable"
   ------------------------------------------------------------
   Cette police n'existe pas sur Google Fonts : le lien
   <link href="https://fonts.googleapis.com/css2?family=Clash+Display+Variable...">
   ne chargera jamais rien, variables CSS ou pas. C'est la police
   "Clash Display" de l'Indian Type Foundry, distribuée gratuitement
   via Fontshare. Pour vraiment la charger, remplace ce lien Google
   Fonts par :

   <link rel="stylesheet" href="https://api.fontshare.com/v2/css?f[]=clash-display@400,500,600&display=swap">

   En attendant, --font-clash-display-variable retombe proprement
   sur Poppins puis sur la police système.
   ============================================================ */