/* Généré depuis le design system Bonjour Lama, version 1791800986-b35d, le 2026-10-12. Ne pas modifier à la main.
   Source : design-system/tokens.json. Pour resynchroniser : voir CLAUDE.md.
   Tailles de texte en rem (1rem = 16 px) ; les tailles fluides vont de leur
   valeur -mobile (400 px de large) à leur valeur ordinateur (1200 px). */

@font-face { font-family: "Luciole"; src: url("fonts/Luciole-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Luciole"; src: url("fonts/Luciole-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Luciole"; src: url("fonts/Luciole-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Luciole"; src: url("fonts/Luciole-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }

:root {
  /* Couleurs, thème Clair */
  --marque-nuit: #1b2232;
  --marque-soleil: #eda33a;
  --marque-soleil-coeur: #ffd98a;
  --marque-neige: #ffffff;
  --marque-ciel: #d5e3ec;
  --marque-aube: #f7e2c8;
  --marque-laine: #f1e7da;
  --marque-glacier: #9ccbea;
  --fond: #f5f7f7;
  --fond-doux: #ebf0f2;
  --fond-carte: #ffffff;
  --fond-nuit: var(--marque-nuit);
  --fond-aube: var(--marque-aube);
  --fond-laine: var(--marque-laine);
  --ciel-haut: var(--marque-ciel);
  --ciel-bas: var(--marque-aube);
  --halo: rgba(237, 163, 58, 0.32);
  --soleil: var(--marque-soleil);
  --soleil-coeur: var(--marque-soleil-coeur);
  --crete-loin: #bacad7;
  --crete-milieu: #91a6b9;
  --crete-pres: #627990;
  --etoile: var(--marque-nuit);
  --texte: var(--marque-nuit);
  --texte-doux: #4e5767;
  --texte-soleil: #8f530a;
  --texte-sur-nuit: #ffffff;
  --texte-sur-nuit-doux: #c9d3e6;
  --trait: #d8dfe4;
  --trait-ciel: rgba(27, 34, 50, 0.2);
  --lien: var(--marque-nuit);
  --bouton-fond: var(--marque-nuit);
  --bouton-texte: #f5f7f7;
  --focus: var(--texte-soleil);

  /* Polices */
  --font-titre: Luciole, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-texte: Luciole, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Styles de texte */
  --accroche-police: var(--font-titre);
  --accroche-taille: clamp(2.375rem, 1.1875rem + 4.75vw, 4.75rem);
  --accroche-interligne: 1.04;
  --accroche-graisse: 700;
  --accroche-lettrage: -0.025em;
  --titre-section-police: var(--font-titre);
  --titre-section-taille: clamp(1.6875rem, 1.2812rem + 1.625vw, 2.5rem);
  --titre-section-interligne: 1.12;
  --titre-section-graisse: 700;
  --titre-section-lettrage: -0.015em;
  --titre-final-police: var(--font-titre);
  --titre-final-taille: clamp(2.1875rem, 1.2812rem + 3.625vw, 4rem);
  --titre-final-interligne: 1.05;
  --titre-final-graisse: 700;
  --titre-final-lettrage: -0.025em;
  --bonjour-police: var(--font-titre);
  --bonjour-taille: 2.5rem;
  --bonjour-interligne: 1.1;
  --bonjour-graisse: 700;
  --bonjour-lettrage: -0.02em;
  --rubrique-police: var(--font-titre);
  --rubrique-taille: 1.5rem;
  --rubrique-interligne: 1.1667;
  --rubrique-graisse: 700;
  --rubrique-lettrage: -0.01em;
  --titre-info-police: var(--font-titre);
  --titre-info-taille: 1.25rem;
  --titre-info-interligne: 1.3;
  --titre-info-graisse: 700;
  --titre-info-lettrage: 0em;
  --etiquette-police: var(--font-titre);
  --etiquette-taille: 0.875rem;
  --etiquette-interligne: 1.4286;
  --etiquette-graisse: 700;
  --etiquette-lettrage: 0.06em;
  --bouton-police: var(--font-titre);
  --bouton-taille: 0.9375rem;
  --bouton-interligne: 1.2;
  --bouton-graisse: 700;
  --legende-police: var(--font-titre);
  --legende-taille: 0.875rem;
  --legende-interligne: 1.4286;
  --legende-graisse: 400;
  --chapo-police: var(--font-texte);
  --chapo-taille: clamp(1.1875rem, 1.0312rem + 0.625vw, 1.5rem);
  --chapo-interligne: 1.45;
  --chapo-graisse: 400;
  --courant-police: var(--font-texte);
  --courant-taille: 1.1875rem;
  --courant-interligne: 1.6;
  --courant-graisse: 400;
  --petit-police: var(--font-texte);
  --petit-taille: 0.9375rem;
  --petit-interligne: 1.5;
  --petit-graisse: 400;
  --lama-police: var(--font-texte);
  --lama-taille: clamp(2.375rem, 1.1875rem + 4.75vw, 4.75rem);
  --lama-interligne: 1.04;
  --lama-graisse: 400;
  --lama-style: italic;
  --lama-lettrage: -0.02em;
  --citation-police: var(--font-texte);
  --citation-taille: clamp(1.375rem, 1.125rem + 1vw, 1.875rem);
  --citation-interligne: 1.35;
  --citation-graisse: 400;
  --citation-style: italic;
  --citation-lettrage: 0em;
  --aparte-police: var(--font-texte);
  --aparte-taille: 1.1875rem;
  --aparte-interligne: 1.6;
  --aparte-graisse: 400;
  --aparte-style: italic;

  /* Espacements */
  --espace-1: 4px;
  --espace-2: 8px;
  --espace-3: 12px;
  --espace-4: 16px;
  --espace-5: 24px;
  --espace-6: 32px;
  --espace-7: 48px;
  --espace-8: 112px;

  /* Rayons */
  --rayon-s: 6px;
  --rayon-m: 12px;
  --rayon-l: 14px;
  --rayon-pilule: 999px;
  --rayon-rond: 50%;

  /* Tailles sur mobile */
  --accroche-mobile: 38px;
  --lama-mobile: 38px;
  --titre-section-mobile: 27px;
  --titre-final-mobile: 35px;
  --chapo-mobile: 19px;
  --citation-mobile: 22px;
  --espace-8-mobile: 56px;
}

/* Couleurs, thème Sombre */
@media (prefers-color-scheme: dark) {
  :root {
    --fond: #0f1420;
    --fond-doux: #131a27;
    --fond-carte: #182030;
    --fond-nuit: #070b16;
    --fond-aube: #2e2536;
    --fond-laine: #2b2a35;
    --ciel-haut: #070b16;
    --ciel-bas: #2e2536;
    --halo: rgba(242, 174, 72, 0.22);
    --soleil: #f2ae48;
    --soleil-coeur: #ffdfa0;
    --crete-loin: #2b3346;
    --crete-milieu: #1f2738;
    --crete-pres: #171e2d;
    --etoile: #e9edf2;
    --texte: #e9edf2;
    --texte-doux: #a5afbe;
    --texte-soleil: #f4bc66;
    --trait: #263042;
    --trait-ciel: rgba(233, 237, 242, 0.22);
    --lien: #e9edf2;
    --bouton-fond: #e9edf2;
    --bouton-texte: #0f1420;
    --focus: #f2ae48;
  }
}