/* Facteur Femmes : jetons du design system
   Source : source/tokens.json (importé du design system, lecture seule).
   Thème clair par défaut. Thème foncé : seulement si forcé avec data-theme="dark" sur <html>
   (plus automatique selon le système depuis le 27 oct. 2026).
   Dans les pages, utilise les jetons de rôle (fond, texte, accent, action...),
   pas la palette brute. */

:root {
  /* Palette brute */
  --silkcream: #f7efe4;
  --rosebeige: #e9cfc6;
  --mauvetaupe: #5b3a5a;
  --Bordeaunoir: #a8203f;
  --blackplum: #170c13;

  /* Jetons de rôle */
  --fond: var(--silkcream);
  --fond-secondaire: var(--rosebeige);
  --texte: var(--blackplum);
  --texte-doux: var(--mauvetaupe);
  --accent: var(--Bordeaunoir);
  --filet: var(--mauvetaupe);
  --action: #0f6b66;
  --sur-action: var(--silkcream);

  /* Espacement, rayon, ombre */
  --Carton: 20px;
  --Corner: 10px;
  --shadow: -5px 5px 3px 1px #170c1133;
  color-scheme: light;

  /* Familles */
  --font-arial: 'Arial', 'Helvetica', sans-serif;
  --font-georgia: 'Georgia', 'Times New Roman', serif;

  /* Styles de texte (la taille et l'interligne; l'espacement des lettres est dans les classes) */
  --text-H1: 700 40px/1.2 var(--font-georgia);
  --text-H2: 700 32px/1.25 var(--font-georgia);
  --text-H3: 700 24px/1.3 var(--font-georgia);
  --text-Normal: 400 20px/1.6 var(--font-arial);
  --text-Petit: 400 16px/1.5 var(--font-arial);
  --text-Etiquette: 700 14px/1.4 var(--font-arial);
  --text-Bouton: 700 17px/1 var(--font-arial);
}

/* 27 oct. 2026 : plus de thème foncé automatique. Le site reste clair même quand le cellulaire est en mode sombre. */

/* Thème foncé forcé */
:root[data-theme="dark"] {
  --rosebeige: #d9a99c;
  --mauvetaupe: #4a2d48;
  --fond: var(--blackplum);
  --fond-secondaire: var(--mauvetaupe);
  --texte: var(--silkcream);
  --texte-doux: var(--rosebeige);
  --accent: var(--rosebeige);
  --filet: var(--rosebeige);
  --action: #3dbdb0;
  --sur-action: var(--blackplum);
  --shadow: -5px 5px 3px 1px #00000066;
}

/* Classes de texte */
.H1 { font: var(--text-H1); letter-spacing: -0.01em; }
.H2 { font: var(--text-H2); letter-spacing: 0; }
.H3 { font: var(--text-H3); letter-spacing: 0; }
.Normal { font: var(--text-Normal); max-width: 70ch; }
.Petit { font: var(--text-Petit); }
.Etiquette { font: var(--text-Etiquette); letter-spacing: 0.16em; text-transform: uppercase; }
.Bouton { font: var(--text-Bouton); letter-spacing: 0.02em; }

/* Titres plus petits sous 640px de large */
@media (max-width: 640px) {
  :root {
    --text-H1: 700 32px/1.2 var(--font-georgia);
    --text-H2: 700 26px/1.25 var(--font-georgia);
    --text-H3: 700 22px/1.3 var(--font-georgia);
  }
}

/* Police de secours pour les chiffres (cellulaires tactiles seulement, 8 nov. 2026).
   Certains téléphones affichent des chiffres manquants avec Arial/Georgia. On force les chiffres (0 à 9)
   à venir d'une police du téléphone; si aucune n'existe, on retombe sur Arial/Georgia comme avant. Le bureau ne change pas. */
@font-face { font-family: 'ff-chiffres-sans'; src: local('Roboto'), local('Segoe UI'), local('Helvetica Neue'), local('Noto Sans'), local('Droid Sans'), local('SF Pro Text'); unicode-range: U+0030-0039; }
@font-face { font-family: 'ff-chiffres-serif'; src: local('Noto Serif'), local('Droid Serif'), local('Roboto Serif'); unicode-range: U+0030-0039; }
@media (pointer: coarse) {
  :root { --font-arial: 'ff-chiffres-sans', 'Arial', 'Helvetica', sans-serif; --font-georgia: 'ff-chiffres-serif', 'Georgia', 'Times New Roman', serif; }
}