@charset "UTF-8";
:root {
  --c-encre: #14213D;
  --c-encre-douce: #5A6480;

  --c-bleu-900: #14213D;
  --c-bleu-700: #1F49B6;
  --c-bleu-500: #2F6BE3;
  --c-bleu-100: #DCE8FD;

  --c-soleil-700: #7A4B00;
  --c-soleil-500: #F5B02E;
  --c-soleil-200: #F3D89A;
  --c-soleil-100: #FDF0D3;

  --c-framboise-800: #A82A4D;
  --c-framboise-700: #C4365C;
  --c-framboise-500: #F26D8D;
  --c-framboise-100: #FDE1E8;
  --c-logo-encre: #1F49B6;
  --c-marge: #E8788C;

  --c-vert-700: #1E7A4C;
  --c-vert-500: #34B06E;
  --c-vert-100: #DCF5E8;

  --c-prune-700: #7A2E7E;
  --c-prune-500: #B04FB5;
  --c-prune-100: #F6E2F7;

  --c-papier: #FFFDF8;
  --c-blanc: #FFFFFF;
  --c-trait: #E3E1DA;

  --fond-page: var(--c-papier);
  --fond-carte: var(--c-blanc);
  --fond-sombre: var(--c-bleu-900);
  --fond-doux: var(--c-bleu-100);
  --texte: var(--c-encre);
  --texte-doux: var(--c-encre-douce);
  --texte-inverse: var(--c-blanc);
  --lien: var(--c-bleu-700);
  --accent: var(--c-framboise-500);
  --accent-fonce: var(--c-framboise-700);
  --texte-ferie: var(--c-framboise-800);
  --texte-sous-nav-actif: var(--texte-inverse);
  /* Texte posé sur les fonds pastel -500, qui ne changent pas en mode sombre. */
  --texte-sur-pastel: #14213D;
  --bordure: var(--c-trait);
  --ombre: rgba(20, 33, 61, 0.10);

  --police-titre: "Poppins", "Segoe UI", Helvetica, Arial, sans-serif;
  --police-texte: "Poppins", "Segoe UI", Helvetica, Arial, sans-serif;
  --police-logo: "Saint-Yves Titre", "Brush Script MT", cursive;

  --taille-nano: 0.75rem;
  --taille-micro: 0.8125rem;
  --taille-petit: 0.9375rem;
  --taille-base: 1rem;
  --taille-moyen: 1.25rem;
  --taille-grand: 1.625rem;
  --taille-titre: 2.125rem;
  --taille-hero: 2.75rem;

  --graisse-normale: 400;
  --graisse-moyenne: 500;
  --graisse-forte: 700;

  --interligne-serre: 1.15;
  --interligne-titre: 1.2;
  --interligne-texte: 1.65;

  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;
  --esp-8: 4.5rem;

  --rayon-petit: 6px;
  --rayon: 12px;
  --rayon-grand: 20px;

  --largeur-page: 68rem;
  --largeur-texte: 34rem;

  /* Hauteur de l'en-tête collant, reprise par le menu latéral collant.
     Elle suit la taille du logo, arrondie juste au-dessus pour que
     l'en-tête ait exactement cette hauteur. */
  --hauteur-entete: 6.02rem;

  --duree: 160ms;
  --courbe: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 48rem) {
  :root {
    --taille-titre: clamp(2rem, 3vw, 2.5rem);
    --taille-hero: clamp(2.5rem, 4.4vw, 3.75rem);
  }
}

@media (min-width: 68rem) {
  :root {
    --hauteur-entete: clamp(5.3rem, 1.9rem + 4.6vw, 6.95rem);
  }
}

:root.theme-sombre {
  --c-encre: #E8ECF5;
  --c-encre-douce: #A6B0C8;

  --c-bleu-900: #0A1120;
  --c-bleu-700: #8FB0F5;
  --c-bleu-500: #5B8DEB;
  --c-bleu-100: #1E2D4F;

  --c-soleil-700: #F2C866;
  --c-soleil-100: #3A2E14;

  --c-framboise-700: #FF9DB5;
  --c-framboise-100: #3A1A25;
  --texte-ferie: var(--c-framboise-700);
  --texte-sous-nav-actif: var(--c-bleu-900);

  --c-vert-700: #7ED8A5;
  --c-vert-100: #14301F;

  --c-prune-700: #D9A3DC;
  --c-prune-100: #2F1731;

  --c-trait: #2A3757;

  --fond-page: #0F172A;
  --fond-carte: #16213B;
  --fond-sombre: #0A1120;
  --fond-doux: #1A2A4A;
  --texte: var(--c-encre);
  --texte-doux: var(--c-encre-douce);
  --lien: var(--c-bleu-700);
  --bordure: var(--c-trait);
  --ombre: rgba(0, 0, 0, 0.45);

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not(.theme-clair) {
    --c-encre: #E8ECF5;
    --c-encre-douce: #A6B0C8;

    --c-bleu-900: #0A1120;
    --c-bleu-700: #8FB0F5;
    --c-bleu-500: #5B8DEB;
    --c-bleu-100: #1E2D4F;

    --c-soleil-700: #F2C866;
    --c-soleil-100: #3A2E14;

    --c-framboise-700: #F7998A;
    --c-framboise-100: #3A1C15;
    --texte-ferie: var(--c-framboise-700);
    --texte-sous-nav-actif: var(--c-bleu-900);

    --c-vert-700: #7ED8A5;
    --c-vert-100: #14301F;

    --c-prune-700: #D9A3DC;
    --c-prune-100: #2F1731;

    --c-trait: #2A3757;

    --fond-page: #0F172A;
    --fond-carte: #16213B;
    --fond-sombre: #0A1120;
    --fond-doux: #1A2A4A;
    --texte: var(--c-encre);
    --texte-doux: var(--c-encre-douce);
    --lien: var(--c-bleu-700);
    --bordure: var(--c-trait);
    --ombre: rgba(0, 0, 0, 0.45);

    color-scheme: dark;
  }
}