/* Jetons de l'interface, thème suisse : blanc et gris neutres, encre presque noire, angles droits,
   Inter pour le texte et IBM Plex Mono pour les identifiants et les chiffres. L'accent violet se
   pose sur le bouton principal, l'élément courant du rail, l'onglet actif, les liens et le focus.
   Le thème sombre a les mêmes formes, les gris inversés et le violet éclairci.
   Les états ont leurs teintes ci-dessous : rouge pour bloquer (erreur), orange pour regarder
   (avertissement), bleu pour savoir (information), vert pour le succès ; le trait (double, plein,
   tireté, pointillé), la forme et le libellé les disent aussi (base.css, « Gravités »).

   Le thème suit `data-theme` sur <html> : « auto » (le système), « clair » ou « sombre ». Le bloc
   sombre est écrit deux fois, sous la requête média pour Auto et sous `[data-theme="sombre"]` ;
   comptes/tests/test_affichage.py vérifie que les deux sont identiques. La densité suit
   `data-densite` : le corps de la page (font-size de html) et la hauteur d'un contrôle, dont
   dérivent toutes les tailles en rem.

   Les couleurs sont mesurées en APCA (Lc) et au plancher WCAG 2.2 AA. Toute paire de couleurs
   employée, son seuil et son Lc sont dans comptes/tests/test_contrastes_apca.py, qui les relit ici.
   Seuils d'après la table des usages d'APCA (docs/ACCESSIBILITE.md) : texte Lc 75 au moins, 90 pour
   l'encre sur les fonds de lecture ; contour de champ, de bouton et repère Lc 30 ; focus Lc 45.
   Une couleur d'état cherchée en Lc l'est aussi à 4,5:1 (texte) et 3:1 (trait). */

/* Les polices, servies par Pronto (static/vendor/README.md, licence OFL). */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../vendor/InterVariable.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("../vendor/InterVariable-Italic.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../vendor/IBMPlexMono-Regular.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../vendor/IBMPlexMono-Medium.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("../vendor/IBMPlexMono-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("../vendor/IBMPlexMono-Bold.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --e1: .2rem; --e2: .35rem; --e3: .5rem; --e4: .75rem; --e5: 1rem; --e6: 1.5rem; --e7: 2rem;

  --t-mini: .8rem; --t-libelle: .875rem; --t-section: .8rem; --t-corps: 1rem;
  --t-titre: 1.125rem; --t-page: 1.6rem; --t-titre-page: 2.1rem;

  --rayon: 0; --rayon-mini: 0; --rayon-pastille: 0;

  --police-ui: "Inter", "Helvetica Neue", Arial, "Liberation Sans", sans-serif;
  --police-mono: "IBM Plex Mono", ui-monospace, Consolas, "DejaVu Sans Mono", monospace;
  --graisse-titre: 700; --graisse-bouton: 600;
  /* Hauteur de l'en-tête collant, ses deux rangées et leur filet ; les éléments collants dessous et
     le défilement au focus la lisent. Elle tombe à 0 quand l'en-tête redevient statique (base.css). */
  --hauteur-rangee-1: 3.25rem; --hauteur-rangee-2: 2.5rem;
  --hauteur-entete: calc(var(--hauteur-rangee-1) + var(--hauteur-rangee-2) + 1px);
  /* Largeur du rail déplié et replié. */
  --largeur-rail: 16.5rem; --largeur-rail-replie: 4.25rem;
  /* Barre d'un état ou d'un élément courant. */
  --barre: 3px; --barre-onglet: 3px; --barre-notif: 4px;

  --fond: #ffffff;
  --surface: #f6f6f7;
  --surface-2: #ececee;
  --encre: #111114;
  --opacite-livre: .10;
  --encre-2: #45454e;
  --filet: #dcdce0;
  --cadre: #74747e;
  --champ-bord: #74747e;
  --champ-fond: #ffffff;
  --champ-lecture: #f6f6f7;
  --lien: var(--accent-texte);
  --focus: var(--accent-trait);

  --choix-fond: #efeaff;
  --survol: #ececee;
  --sec-fond: #f6f6f7;
  --sec-texte: #45454e;
  --tete-fond: #ffffff;

  --bouton-fond: #ffffff;
  --bouton-bord: #74747e;
  --survol-bouton: #f6f6f7;
  --survol-bord: var(--encre);
  --actif-fond: #111114;
  --actif-texte: #ffffff;
  --primaire: #4a22b5;
  --sur-primaire: #ffffff;
  --primaire-survol: #3b1a93;
  --courant-fond: #efeaff;
  --courant-texte: #111114;
  --courant-barre: #4a22b5;
  --onglet-trait: #4a22b5;
  --ombre: rgb(17 17 20 / 16%);

  /* Les quatre gravités et l'accent : la teinte de la charte (--erreur…), puis ses dérivés.
     -trait borde et souligne, -texte s'écrit sur le fond, la surface et -fond, -fond est la
     teinte pâle d'un message. Chaque dérivé est la teinte de la charte, assombrie ou éclaircie
     jusqu'au seuil (Lc et WCAG). L'accent est violet ; l'information est bleue. */
  --erreur: #d31932;
  --erreur-trait: #d31932;
  --erreur-texte: #8b0019;
  --erreur-fond: #fbe6e8;
  --avertissement: #b8561a;
  --avertissement-trait: #b8561a;
  --avertissement-texte: #793200;
  --avertissement-fond: #f8eee8;
  --succes: #51a66d;
  --succes-trait: #44925e;
  --succes-texte: #1d5230;
  --succes-fond: #e9f5ed;
  --info: #2a62ad;
  --info-trait: #2a62ad;
  --info-texte: #1c4a8a;
  --info-fond: #eaf1fb;
  --accent: #4a22b5;
  --accent-trait: #4a22b5;
  --accent-texte: #4a22b5;
  --accent-fond: #efeaff;
  /* La coccinelle est une illustration, pas un état : elle garde son rouge. */
  --coccinelle: #b3261e;
  /* Le papier de l'éditeur et des cartes de l'éditeur : blanc dans les deux thèmes, comme une
     feuille. Le trait d'un appel de citation s'y pose (Lc 30 au moins sur #ffffff : erreur 74,
     succès 72, avertissement 73), avec les valeurs du thème clair, que le sombre ne redéfinit pas. */
  --papier: #ffffff;
  --papier-fond: #f3f4f6;
  --papier-encre: #16161f;
  --papier-encre-2: #394048;
  --papier-bord: #626973;
  --papier-filet: #bfc4ca;
  --papier-entete: #e6e8ec;
  /* Le violet de l'accent, éclairci pour qu'un texte noir s'y lise : la marque du bloc cliqué. */
  --papier-marque: #d9cffa;
  --papier-erreur: #d31932;
  --papier-succes: #3f8155;
  --papier-avertissement: #b8561a;
  /* Le texte d'avertissement sur le papier (le mot « manquant » d'une carte) : l'orange foncé du thème clair. */
  --papier-avertissement-texte: #793200;
  /* Le corps du texte sur le papier de l'éditeur : celui d'une page, quelle que soit la densité. */
  --t-papier: 15px;
  /* L'éditeur de tableau : le noir des traits de focus et de sélection, les repères et le survol
     d'une cellule, et les teintes du PDF (print.css, section 7) quand la page n'en donne pas. */
  --papier-noir: #000000;
  --papier-repere: #a6a6ae;
  --papier-survol: #6b6b73;
  --tableau-accent-clair: #ededed;
  --tableau-accent-fonce: #4a4a4a;
  --tableau-filet: #8f8f95;
  --tableau-gris-clair: #e6e6e6;
  --tableau-zebre: #f2f2f2;
  /* Le damier derrière une image détourée, qui montre la transparence. */
  --damier-clair: #ffffff;
  --damier-fonce: #dddddd;
  /* Le gris des intitulés sur la feuille imprimée de Vérifier les méta. */
  --impression-gris: #333333;
  /* La couche de l'infobulle du rail : la plus haute de la page, sous les modales (qui sont
     dans la couche supérieure du navigateur). Les autres couches de la page vont jusqu'à 200. */
  --z-infobulle: 500;
  /* Le fond d'une modale. */
  --voile-modale: rgb(17 17 20 / 45%);
  /* Le logo de la barre : la tuile bleu nuit de l'ancien logo, le P et les trois barres. Ces
     couleurs ne changent pas avec le thème ; seul le contour de la tuile suit `--cadre`. */
  --logo-tuile: #202840;
  --logo-p: #f0f0e8;
  --logo-b1: #e85850;
  --logo-b2: #c0c818;
  --logo-b3: #51a66d;
}

/* La densité : Condensé (13 px), Petit (14 px), Normal (16 px, par défaut). Un pourcentage garde
   le réglage de la personne dans son navigateur. Hauteur d'un contrôle : 24 px au moins (WCAG 2.2,
   2.5.8). */
:root, :root[data-densite="normal"] { font-size: 100%; --interligne: 1.5; --h-ctl: 2.5rem; }
:root[data-densite="petit"] { font-size: 87.5%; --interligne: 1.45; --h-ctl: 2.25rem; }
:root[data-densite="condense"] { font-size: 81.25%; --interligne: 1.4; --h-ctl: 1.95rem; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="clair"]) {
    color-scheme: dark;
    --fond: #0e0e10;
    --surface: #17171a;
    --surface-2: #222226;
    --encre: #f3f3f5;
    --opacite-livre: .12;
    --encre-2: #d4d4dc;
    --filet: #2e2e34;
    --cadre: #8a8a94;
    --champ-bord: #8a8a94;
    --champ-fond: #0e0e10;
    --champ-lecture: #17171a;

    --choix-fond: #251c4a;
    --survol: #222226;
    --sec-fond: #17171a;
    --sec-texte: #d4d4dc;
    --tete-fond: #0e0e10;

    --bouton-fond: #0e0e10;
    --bouton-bord: #8a8a94;
    --survol-bouton: #222226;
    --actif-fond: #f3f3f5;
    --actif-texte: #0e0e10;
    --primaire: #d6caff;
    --sur-primaire: #0e0e10;
    --primaire-survol: #e6dfff;
    --courant-fond: #251c4a;
    --courant-texte: #f3f3f5;
    --courant-barre: #8f72f0;
    --onglet-trait: #8f72f0;
    --ombre: rgb(0 0 0 / 55%);

    /* Sur fond sombre le texte de chaque gravité est la teinte éclaircie jusqu'au seuil. */
    --erreur-trait: #df4249;
    --erreur-texte: #ffc3bf;
    --erreur-fond: #3d1f27;
    --avertissement-trait: #c16532;
    --avertissement-texte: #f6c9b3;
    --avertissement-fond: #3a2518;
    --succes-trait: #51a66d;
    --succes-texte: #b7dfc1;
    --succes-fond: #263832;
    --info-trait: #6a9be0;
    --info-texte: #c4d9f7;
    --info-fond: #1b2b44;
    --accent: #8f72f0;
    --accent-trait: #a38bf3;
    --accent-texte: #d6ccff;
    --accent-fond: #251c4a;
    --voile-modale: rgb(0 0 0 / 60%);
  }
}

/* Le thème Sombre choisi : le bloc ci-dessus, recopié tel quel (test_affichage.py le compare). */
:root[data-theme="sombre"] {
    color-scheme: dark;
    --fond: #0e0e10;
    --surface: #17171a;
    --surface-2: #222226;
    --encre: #f3f3f5;
    --opacite-livre: .12;
    --encre-2: #d4d4dc;
    --filet: #2e2e34;
    --cadre: #8a8a94;
    --champ-bord: #8a8a94;
    --champ-fond: #0e0e10;
    --champ-lecture: #17171a;

    --choix-fond: #251c4a;
    --survol: #222226;
    --sec-fond: #17171a;
    --sec-texte: #d4d4dc;
    --tete-fond: #0e0e10;

    --bouton-fond: #0e0e10;
    --bouton-bord: #8a8a94;
    --survol-bouton: #222226;
    --actif-fond: #f3f3f5;
    --actif-texte: #0e0e10;
    --primaire: #d6caff;
    --sur-primaire: #0e0e10;
    --primaire-survol: #e6dfff;
    --courant-fond: #251c4a;
    --courant-texte: #f3f3f5;
    --courant-barre: #8f72f0;
    --onglet-trait: #8f72f0;
    --ombre: rgb(0 0 0 / 55%);

    /* Sur fond sombre le texte de chaque gravité est la teinte éclaircie jusqu'au seuil. */
    --erreur-trait: #df4249;
    --erreur-texte: #ffc3bf;
    --erreur-fond: #3d1f27;
    --avertissement-trait: #c16532;
    --avertissement-texte: #f6c9b3;
    --avertissement-fond: #3a2518;
    --succes-trait: #51a66d;
    --succes-texte: #b7dfc1;
    --succes-fond: #263832;
    --info-trait: #6a9be0;
    --info-texte: #c4d9f7;
    --info-fond: #1b2b44;
    --accent: #8f72f0;
    --accent-trait: #a38bf3;
    --accent-texte: #d6ccff;
    --accent-fond: #251c4a;
    --voile-modale: rgb(0 0 0 / 60%);
}