/*
 * Les jetons de l'interface — la seule source de vérité des couleurs,
 * des rayons et des tailles de cible.
 *
 * Trois surfaces se partagent ce fichier : le panneau de pilotage
 * (Filament), le portail du donneur d'ordre (Blade) et l'application
 * agent (Svelte). Chacune redéfinissait les mêmes couleurs de son côté,
 * et elles avaient déjà divergé — le fond valait « #f5f6f8 » au portail
 * et « #f6f7f9 » sur l'agent, le texte « #16191d » ici et « #15191e »
 * là. Personne ne voit la différence sur un écran isolé ; on la voit sur
 * un téléphone posé à côté d'un poste, et l'ensemble a l'air bricolé.
 *
 * Elles n'en partagent plus que les couleurs. Depuis le 16 septembre
 * 2026, chacune a sa propre forme : le portail est une pièce qu'on relit
 * (public/css/portail.css), le pilotage un poste de travail dense
 * (public/css/pilotage.css). Les rayons et les tailles ci-dessous restent
 * la valeur par défaut, qu'une surface redéfinit chez elle quand son
 * usage l'exige — jamais les couleurs, qui se décident ici.
 *
 * Le fichier est servi tel quel depuis public/ plutôt que compilé : il
 * n'a besoin d'aucun outil, il est lisible en production, et l'app agent
 * l'incorpore à la construction pour rester utilisable hors réseau.
 *
 * Les noms restent ceux déjà employés dans le portail et l'app agent
 * (« --fond », « --attenue »…), en français comme le reste du domaine.
 */
:root {
  /* --- Les surfaces ------------------------------------------------ */
  --fond:    #f5f6f8;  /* le papier sur lequel tout est posé */
  --carte:   #ffffff;  /* le motif unique : tout ce qui se lit est une carte */
  --texte:   #16191d;
  --attenue: #5f6b76;  /* légendes, unités, tout ce qui accompagne sans porter */
  --bord:    #e2e6eb;

  /* --- L'accent -----------------------------------------------------
   * Rare par construction : liens, onglet actif, bouton primaire. Il ne
   * sert jamais de décor. Le bleu passe le niveau AA sur blanc (5,18:1)
   * aussi bien en texte qu'en fond de bouton — ce que l'ambre de
   * Filament ne faisait ni l'un ni l'autre.
   */
  --accent:      #2f6fb5;
  --accent-vif:  #245a95;  /* survol et appui */
  --accent-fond: #eef4fb;  /* aplat très clair, jamais du texte dessus en gris */

  /* --- Les trois états ----------------------------------------------
   * La couleur porte l'information d'état, et rien d'autre. C'est la
   * raison pour laquelle l'accent n'est pas ambre : l'ambre dit déjà
   * « en attente », et un bouton ambre deviendrait indécidable.
   */
  --succes:  #2f9e6b;
  --attente: #c08a2e;
  /* Décalé du brique-orange (#c9553d) vers un carmin plus franc : les deux
   * teintes convergeaient l'une vers l'autre sous deutéranopie (distance
   * simulée quasi nulle sur le couple d'encres réellement affiché dans les
   * pastilles), alors que le bleu ne bouge pas sur cet axe de confusion. Le
   * contraste AA s'améliore au passage (4,33:1 → 5,08:1 sur blanc). */
  --alerte:  #c23b6b;

  /* Ce qui s'écrit PAR-DESSUS un aplat saturé — un bouton plein, une
   * pastille de comptage. Le blanc ne convient pas partout : sur l'ambre
   * il tombe à 2,9:1 et devient illisible au soleil, sur un téléphone
   * tenu à bout de bras. Chaque état porte donc son encre.
   */
  --sur-accent:  #ffffff;
  --sur-succes:  #ffffff;
  --sur-attente: #2a2213;
  --sur-alerte:  #ffffff;

  /* Les encres d'état.
   *
   * Les trois couleurs ci-dessus sont faites pour être des APLATS : un
   * bouton plein, une pastille, un liseré. En texte sur fond clair elles
   * échouent au niveau AA — le vert tombe à 3,37:1 et l'ambre à 3,04:1,
   * pour un seuil de 4,5. C'est exactement ce qui se lisait sur les
   * montants de rentabilité et les compteurs de manquements, c'est-à-dire
   * sur les chiffres qu'on recopie dans un courriel.
   *
   * Ces encres-ci passent partout : 6,2:1 pour le vert, 6,6:1 pour le
   * rouge, 6,4:1 pour l'ambre, sur blanc comme sur leur propre aplat.
   * Toute couleur portant du TEXTE se prend donc ici, jamais au-dessus.
   */
  --ok-fond:      #eef7f2;  --ok-texte:      #0f6e56;
  --attente-fond: #fdf3e3;  --attente-texte: #7a5a12;
  --alerte-fond:  #fdeaf1;  --alerte-texte:  #a32854;
  --neutre-fond:  #f1f3f5;  --neutre-texte:  #5f6b76;

  /* --- Le dimensionnement -------------------------------------------
   * Rien de cliquable en dessous de 44 pixels. Un agent porte des gants,
   * il est debout, parfois dans la pénombre d'une cage ; un gardien lit
   * le portail sur son téléphone devant l'immeuble. La règle vaut donc
   * sur les trois surfaces, pas seulement sur l'application terrain.
   */
  --cible:       44px;
  --rayon:       14px;  /* les cartes */
  --rayon-petit:  8px;  /* pastilles, vignettes, champs */
  --ombre:       0 1px 2px rgba(16, 24, 40, .05);

  color-scheme: light dark;
}

/*
 * Le sombre ne se contente pas d'inverser : les aplats d'état sont
 * assombris à part, sinon un « #eef7f2 » sur fond noir vire au néon et
 * capte l'œil plus fort que l'alerte à côté.
 *
 * Les valeurs sont écrites deux fois, et c'est voulu. Le portail et
 * l'application agent suivent la préférence du système ; le panneau de
 * pilotage, lui, laisse Filament décider et pose « class=dark » sur
 * <html>. Sans le « :not(.fi) », un utilisateur qui choisit le thème
 * clair dans Filament alors que son système est en sombre obtiendrait un
 * panneau clair aux couleurs sombres. CSS ne sait pas partager un bloc
 * entre une requête média et un sélecteur de classe.
 *
 * « screen and » n'est pas décoratif : une requête média de préférence
 * s'applique aussi à l'impression. Le rapport mensuel se range sur
 * papier, et un navigateur en thème sombre l'imprimait en encre claire
 * sur du blanc — les aplats de fond ne s'impriment pas, le texte si.
 * La feuille sortait vide. Le papier prend donc toujours les valeurs
 * claires.
 */
@media screen and (prefers-color-scheme: dark) {
  :root:not(.fi) {
    --fond:    #14171a;
    --carte:   #1c2126;
    --texte:   #e8ebee;
    --attenue: #9aa4ae;
    --bord:    #2a3038;

    --accent:      #6ea8e4;
    --accent-vif:  #8cbcec;
    --accent-fond: #1b2836;

    --succes:  #4cbc88;
    --attente: #d9a84a;
    --alerte:  #e45c8c;

    /* Les aplats s'éclaircissent en sombre : leur encre s'assombrit. */
    --sur-accent:  #0f1721;
    --sur-succes:  #06140d;
    --sur-attente: #211a08;
    --sur-alerte:  #2a0915;

    --ok-fond:      #16281f;  --ok-texte:      #7fd7ab;
    --attente-fond: #2a2213;  --attente-texte: #e0bd6d;
    --alerte-fond:  #2c171e;  --alerte-texte:  #f08caf;
    --neutre-fond:  #22272d;  --neutre-texte:  #9aa4ae;

    --ombre: 0 1px 2px rgba(0, 0, 0, .4);
  }
}

html.dark {
    --fond:    #14171a;
    --carte:   #1c2126;
    --texte:   #e8ebee;
    --attenue: #9aa4ae;
    --bord:    #2a3038;

    --accent:      #6ea8e4;
    --accent-vif:  #8cbcec;
    --accent-fond: #1b2836;

    --succes:  #4cbc88;
    --attente: #d9a84a;
    --alerte:  #e45c8c;

    /* Les aplats s'éclaircissent en sombre : leur encre s'assombrit. */
    --sur-accent:  #0f1721;
    --sur-succes:  #06140d;
    --sur-attente: #211a08;
    --sur-alerte:  #2a0915;

    --ok-fond:      #16281f;  --ok-texte:      #7fd7ab;
    --attente-fond: #2a2213;  --attente-texte: #e0bd6d;
    --alerte-fond:  #2c171e;  --alerte-texte:  #f08caf;
    --neutre-fond:  #22272d;  --neutre-texte:  #9aa4ae;

    --ombre: 0 1px 2px rgba(0, 0, 0, .4);
}