/* © 2026 TechnoLibre (http://www.technolibre.ca)
   License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl) */

/* Jetons de l'interface, un seul fichier (§ 13.3) : couleurs, polices,
   échelle typographique, espacements, rayons, ombres. Les composants ne lisent
   que ces jetons ; aucune couleur n'est écrite ailleurs.

   Deux thèmes, posés par l'attribut data-theme de <html>, que l'application
   règle (§ 19.2) : :root[data-theme='clair'] et :root[data-theme='sombre']
   définissent les mêmes jetons de couleur ; sans attribut, le clair
   s'applique, son bloc portant aussi le sélecteur :root. Le sélecteur du
   sombre est plus spécifique que :root seul : posé, il l'emporte. La feuille
   ne lit pas la préférence du système.

   La palette se valide par calcul (§ 12.7, § 14.5) : marques.js nomme, pour
   chaque marque porteuse d'information et chaque texte, le jeton qui la peint
   et ceux sur lesquels elle se peint ; palette.js mesure 3:1 pour une marque,
   4,5:1 pour un texte, dans les deux thèmes, en couleurs d'origine puis sous
   les trois dichromaties. Aucun jeton de texte ou de marque n'a de canal
   alpha : la couleur relue dans le style calculé est alors la couleur peinte.

   Trois teintes sont réservées aux conflits (§ 7.5, § 12.7), une par règle
   que le plan localise : --couleur-conflit-appartenance (séparer les
   appartenances), --couleur-conflit-voisins (nouveaux voisins) et
   --couleur-conflit-table (nouvelle table). Chacune ne peint que la trame de
   sa règle ; tout autre jeton chromatique se tient à 30° au moins de chacune,
   et aucun ne porte la valeur de l'une. Elles se distinguent entre elles et
   des autres marques du plan sous les trois dichromaties (SEPARATIONS,
   marques.js), et tiennent 3:1 sur le fond du plateau, qui borde leurs
   traits. Le contour épaissi d'une table en conflit, commun aux trois, est
   de l'encre forte du plan, --couleur-contour-fort.

   La hachure d'une place à pourvoir peint des traits --couleur-hachure sur le
   fond de la chaise, --couleur-chaise-fond : ce sont ses deux couleurs.

   Le papier est clair quel que soit le thème (§ 11.7) : le bloc du clair
   porte aussi le sélecteur [data-impression], et le document imprimé de
   l'aperçu redéclare sur lui-même chaque jeton du clair, à l'écran comme
   sur la page. Le fond d'une feuille, --couleur-papier, et le contour du
   filigrane BROUILLON, --couleur-filigrane, ne se peignent que sur ce
   document : chacun garde la même valeur dans les deux thèmes.

   La police de l'interface est la police embarquée, Noto Sans (§ 11.1,
   § 19.4) : deux faces, 400 et 700, dont les fichiers sont ceux de
   src/polices, que la production de la planche embarque aussi. La
   construction les émet en fichiers à côté de la feuille, que la page lit
   sous file:// comme sous http://. Les replis du système ne servent qu'à une
   face qui ne se charge pas : src/main.js attend les deux faces avant de
   monter l'application (attendrePolices, src/polices/chargement.js).

   Le corps porte la police (App) ; les contrôles de formulaire — button,
   input, select, textarea — n'en héritent pas d'eux-mêmes : le moteur leur
   donne sa propre police, de son propre corps. La règle sous les faces les
   fait hériter de leur parent, police, corps et interligne ; le style d'un
   composant, plus spécifique, règle ensuite le corps qu'il veut.

   L'interligne du texte courant est fixé, --police-interligne, et non
   laissé à « normal », que chaque police calcule de ses propres métriques :
   celui de Noto Sans vaut 1,362 corps, et une police de repli en donnerait
   un autre. Fixé, il rend les mêmes hauteurs de ligne quelle que soit la
   face rendue. À 1,3, une ligne de Noto Sans s'étend de 1,038 corps
   au-dessus de sa ligne de base à 0,262 au-dessous : les capitales
   accentuées (0,944) et les jambages (0,244) du latin y tiennent ; seules
   les capitales à deux diacritiques superposés (jusqu'à 1,059) en
   débordent.

   Les familles de l'interface, en plus de la page, du bandeau, du plan et
   du papier : la carte — son fond, son fond sourd, qui porte une bande ou
   un en-tête de tableau, son filet, son ombre, le filet léger entre deux
   lignes d'un tableau — ; l'action principale — son fond, son texte, sa
   teinte claire et son encre, celle d'un lien — ; les quatre états du plan,
   le neutre et les appartenances, chacun un fond teinté et une marque, que
   lisent les pastilles ; la bande de mode, un fond et un filet par mode, sa
   marque étant la teinte du cadre de mode ; les messages — avis, refus,
   information —, chacun son encre, un fond, un filet et une marque.

   Le texte d'une pastille ou de la bande de mode garde l'encre de la page
   (§ 12.7) : la teinte se porte par le fond et la marque. Les marques des
   pastilles, des messages et de la bande se valident par calcul (SIGNES,
   marques.js).

   Les teintes d'appartenance ne vont que sur les listes, jamais sur le
   plan : six teintes au plus, catégorielles, chacune à 30° au moins des
   teintes de conflit, distinctes deux à deux sous les trois dichromaties et,
   deux teintes voisines, en clarté (TEINTES_APPARTENANCE, marques.js). */

@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../polices/NotoSans-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../polices/NotoSans-Bold.ttf') format('truetype');
}

button,
input,
select,
textarea {
  font: inherit;
}

:root {
  --police-interface: 'Noto Sans', system-ui, sans-serif;
  --police-interligne: 1.3;

  /* Échelle typographique, du plus petit au plus grand ; l'intertitre en
     petites capitales prend --interlettre-capitales. */
  --taille-intertitre: 0.75rem;
  --taille-texte-petit: 0.8125rem;
  --taille-texte-bandeau: 0.9375rem;
  --taille-texte: 1rem;
  --taille-titre-carte: 1.125rem;
  --taille-titre: 1.25rem;
  --taille-titre-grand: 1.5rem;
  --taille-titre-page: 1.875rem;
  --interlettre-capitales: 0.05em;

  --espace-1: 0.25rem;
  --espace-2: 0.5rem;
  --espace-3: 0.75rem;
  --espace-4: 1rem;
  --espace-5: 1.5rem;
  --espace-6: 2rem;

  /* Rayons : celui d'un contrôle, d'un bouton, d'une carte, d'une pilule. */
  --rayon-1: 0.25rem;
  --rayon-2: 0.5rem;
  --rayon-3: 0.75rem;
  --rayon-pilule: 62.5rem;

  /* La hauteur d'une cible principale (44 px), et la largeur au-delà de
     laquelle le contenu d'un écran se centre. */
  --hauteur-cible: 2.75rem;
  --largeur-page: 87rem;

  /* Ombres : une couleur opaque par thème, --couleur-ombre ; celle d'une
     carte, plus légère, --couleur-carte-ombre. */
  --ombre-1: 0 1px 2px var(--couleur-ombre);
  --ombre-2: 0 2px 6px var(--couleur-ombre);
  --ombre-carte: 0 1px 2px var(--couleur-carte-ombre);
}

:root,
:root[data-theme='clair'],
[data-impression] {
  color-scheme: light;

  /* Page. */
  --couleur-page-fond: #f3f5f8;
  --couleur-page-texte: #18212f;
  --couleur-page-texte-secondaire: #586374;
  --couleur-page-filet: #c3cbd6;
  --couleur-ombre: #b4bcc6;

  /* Carte. */
  --couleur-carte-fond: #ffffff;
  --couleur-carte-fond-sourd: #f8fafc;
  --couleur-carte-filet: #dce1e8;
  --couleur-carte-ombre: #e1e5eb;
  --couleur-ligne-filet: #edf0f4;

  /* Bandeau d'application. */
  --couleur-bandeau-fond: #13223a;
  --couleur-bandeau-texte: #ffffff;
  --couleur-bandeau-texte-secondaire: #b9c4d6;
  --couleur-bandeau-filet: #4a6185;
  --couleur-bandeau-marque: #7fb0f0;

  /* Action principale. */
  --couleur-action-fond: #1f5fbf;
  --couleur-action-texte: #ffffff;
  --couleur-action-teinte: #e8f0fb;
  --couleur-action-encre: #184c99;

  /* États du plan (§ 9), le neutre et les appartenances : fond teinté et
     marque. */
  --couleur-neutre-fond: #eef1f5;
  --couleur-neutre-marque: #5e6b7a;
  --couleur-etat-brouillon-fond: var(--couleur-neutre-fond);
  --couleur-etat-brouillon-marque: var(--couleur-neutre-marque);
  --couleur-etat-propose-fond: #fbf0de;
  --couleur-etat-propose-marque: #9a6500;
  --couleur-etat-retenu-fond: #e1f3ec;
  --couleur-etat-retenu-marque: #1a8566;
  --couleur-etat-bloque-fond: #ece9fa;
  --couleur-etat-bloque-marque: #6a55c8;
  --couleur-appartenance-1-fond: #e4eff4;
  --couleur-appartenance-1-marque: #185a72;
  --couleur-appartenance-2-fond: #f7f1e3;
  --couleur-appartenance-2-marque: #a17317;
  --couleur-appartenance-3-fond: #f1eafc;
  --couleur-appartenance-3-marque: #7c24e0;
  --couleur-appartenance-4-fond: #e4f2ef;
  --couleur-appartenance-4-marque: #32857a;
  --couleur-appartenance-5-fond: #f2ede3;
  --couleur-appartenance-5-marque: #6b4d0f;
  --couleur-appartenance-6-fond: #f3f0fc;
  --couleur-appartenance-6-marque: #8f6dd5;

  /* Cadre de mode (§ 8.4), et bande de mode : fond et filet ; sa marque est
     la teinte du cadre. */
  --couleur-cadre-lecture: #5c6878;
  --couleur-cadre-ecriture: #2e7d32;
  --couleur-cadre-bloque: #7b3fa0;
  --couleur-mode-lecture-fond: #e9edf3;
  --couleur-mode-lecture-filet: #c3cbd6;
  --couleur-mode-ecriture-fond: #e3f4e8;
  --couleur-mode-ecriture-filet: #a9d8b8;
  --couleur-mode-bloque-fond: #f1eaf7;
  --couleur-mode-bloque-filet: #cfb5e3;

  /* Messages : encre, fond, filet, marque. */
  --couleur-refus: #6a1b9a;
  --couleur-refus-fond: #f6effb;
  --couleur-refus-filet: #cfb3e6;
  --couleur-refus-marque: var(--couleur-refus);
  --couleur-avis: #7a5000;
  --couleur-avis-fond: #fff6e5;
  --couleur-avis-filet: #f0c77a;
  --couleur-avis-marque: var(--couleur-avis);
  --couleur-information: #1d5bb8;
  --couleur-information-fond: #e8f0fb;
  --couleur-information-filet: #b7cef0;
  --couleur-information-marque: var(--couleur-information);

  /* Désignation. Le focus, la sélection, la mise en évidence et le fantôme
     passent sur une chaise vide comme sur une chaise pleine : leur clarté se
     tient entre le fond et le plein de la chaise, à 3:1 de chacun. */
  --couleur-focus: #8269e1;
  --couleur-selection: #1a66f0;
  --couleur-mise-en-evidence: #00897b;

  /* Plan : sol, mobilier, marques. */
  --couleur-sol: #eceef1;
  --couleur-table-fond: #ffffff;
  --couleur-table-trait: #4a5059;
  --couleur-chaise-fond: #ffffff;
  --couleur-chaise-trait: #4a5059;
  --couleur-chaise-pleine: #1f1f1f;
  --couleur-hachure: #1f1f1f;
  --couleur-marque: #767676;
  --couleur-contour-fort: #2b2f36;
  --couleur-conflit-appartenance: #8f1d14;
  --couleur-conflit-voisins: #c0189f;
  --couleur-conflit-table: #6a9400;
  --couleur-pastille-fond: #2b2f36;
  --couleur-pastille-texte: #ffffff;
  --couleur-poignee: #4a5059;
  --couleur-gel: #1565c0;
  --couleur-liste-texte: #1c2128;
  --couleur-echelle: #1c2128;
  --couleur-fantome: #b040f0;

  /* Le document imprimé : le papier, et le contour du filigrane. */
  --couleur-papier: #ffffff;
  --couleur-filigrane: #6e6e6e;
}

:root[data-theme='sombre'] {
  color-scheme: dark;

  --couleur-page-fond: #121519;
  --couleur-page-texte: #e3e6ea;
  --couleur-page-texte-secondaire: #a3acb8;
  --couleur-page-filet: #3a414b;
  --couleur-ombre: #000000;

  --couleur-carte-fond: #1b1f25;
  --couleur-carte-fond-sourd: #20252c;
  --couleur-carte-filet: #2e353f;
  --couleur-carte-ombre: #0b0d10;
  --couleur-ligne-filet: #262c34;

  --couleur-bandeau-fond: #1d2c3f;
  --couleur-bandeau-texte: #f2f4f7;
  --couleur-bandeau-texte-secondaire: #b3bfd0;
  --couleur-bandeau-filet: #5b7fa6;
  --couleur-bandeau-marque: #8fbaf2;

  --couleur-action-fond: #8ab4f8;
  --couleur-action-texte: #0b1730;
  --couleur-action-teinte: #1a2b45;
  --couleur-action-encre: #a8c7fa;

  --couleur-neutre-fond: #272d36;
  --couleur-neutre-marque: #9aa5b4;
  --couleur-etat-brouillon-fond: var(--couleur-neutre-fond);
  --couleur-etat-brouillon-marque: var(--couleur-neutre-marque);
  --couleur-etat-propose-fond: #352a15;
  --couleur-etat-propose-marque: #e0a54a;
  --couleur-etat-retenu-fond: #15322a;
  --couleur-etat-retenu-marque: #4cc3a0;
  --couleur-etat-bloque-fond: #29254a;
  --couleur-etat-bloque-marque: #a99af0;
  --couleur-appartenance-1-fond: #1f2335;
  --couleur-appartenance-1-marque: #96a1e9;
  --couleur-appartenance-2-fond: #2b2416;
  --couleur-appartenance-2-marque: #c98f1d;
  --couleur-appartenance-3-fond: #251d34;
  --couleur-appartenance-3-marque: #9c5ae7;
  --couleur-appartenance-4-fond: #162b2a;
  --couleur-appartenance-4-marque: #70e1d2;
  --couleur-appartenance-5-fond: #2a2717;
  --couleur-appartenance-5-marque: #e7cb5a;
  --couleur-appartenance-6-fond: #152826;
  --couleur-appartenance-6-marque: #298e88;

  --couleur-cadre-lecture: #9aa5b4;
  --couleur-cadre-ecriture: #81c784;
  --couleur-cadre-bloque: #ce93d8;
  --couleur-mode-lecture-fond: #1f252d;
  --couleur-mode-lecture-filet: #3a434f;
  --couleur-mode-ecriture-fond: #16291c;
  --couleur-mode-ecriture-filet: #2f5e3c;
  --couleur-mode-bloque-fond: #271e33;
  --couleur-mode-bloque-filet: #56407a;

  --couleur-refus: #d7a6f0;
  --couleur-refus-fond: #261d31;
  --couleur-refus-filet: #5d4677;
  --couleur-refus-marque: var(--couleur-refus);
  --couleur-avis: #f0c060;
  --couleur-avis-fond: #2e2513;
  --couleur-avis-filet: #6b5424;
  --couleur-avis-marque: var(--couleur-avis);
  --couleur-information: #9cc2f5;
  --couleur-information-fond: #172338;
  --couleur-information-filet: #34507a;
  --couleur-information-marque: var(--couleur-information);

  --couleur-focus: #8764e1;
  --couleur-selection: #4070f0;
  --couleur-mise-en-evidence: #00897b;

  --couleur-sol: #1a1d21;
  --couleur-table-fond: #262b31;
  --couleur-table-trait: #9aa3ae;
  --couleur-chaise-fond: #15181c;
  --couleur-chaise-trait: #b0b8c2;
  --couleur-chaise-pleine: #e8e8e8;
  --couleur-hachure: #ededed;
  --couleur-marque: #7a7a7a;
  --couleur-contour-fort: #e6e8eb;
  --couleur-conflit-appartenance: #fc9890;
  --couleur-conflit-voisins: #c0689c;
  --couleur-conflit-table: #549c00;
  --couleur-pastille-fond: #e6e8eb;
  --couleur-pastille-texte: #15181c;
  --couleur-poignee: #c5ccd6;
  --couleur-gel: #90caf9;
  --couleur-liste-texte: #e3e6ea;
  --couleur-echelle: #e3e6ea;
  --couleur-fantome: #b040f0;

  --couleur-papier: #ffffff;
  --couleur-filigrane: #6e6e6e;
}