/* ---------------------------------------------------------------------------
   Le socle : tout ce dont les deux mondes de l'application héritent.

   La page publique et les trois panneaux chargent ce fichier. Sans lui, leurs
   verts, leurs espacements et leurs polices dériveraient l'un de l'autre au
   premier retouchage — c'est déjà arrivé une fois.

   LE MONDE VISUEL : la signalétique de chantier.

   Ce n'est pas un thème plaqué sur un sujet. La signalétique de sécurité
   existe pour être lue vite, de loin, dans de mauvaises conditions : c'est le
   cahier des charges d'un tableau de bord. Et son code couleur est déjà celui
   des états de l'application — vert d'évacuation, jaune de danger, rouge
   d'interdiction, bleu d'obligation — ce qui remplace un choix arbitraire par
   un choix que le métier reconnaît sans qu'on le lui explique.
   --------------------------------------------------------------------------- */

:root {
    /* --- Couleur -----------------------------------------------------------

       Chaque état porte DEUX valeurs, et ce n'est pas un luxe :

       - « -aplat » est la couleur du panneau, celle qu'on remplit ;
       - « -encre » est la même teinte assombrie jusqu'à passer 4,5:1 sur un
         fond clair.

       Le jaune de danger le montre : #D89614 ne donne que 2,4:1 en texte sur
       blanc. L'écrire quand même serait illisible pour qui lit de loin ou de
       biais — c'est-à-dire pour l'usage même auquel il est destiné. */

    --vert-porteo: #0b6b56;
    --vert-porteo-clair: #e6f2ee;

    --conforme-aplat: #1e7a4b;
    --conforme-encre: #15613b;
    --conforme-fond: #e8f4ed;

    --vigilance-aplat: #d89614;
    --vigilance-encre: #8a5a00;
    --vigilance-fond: #fdf4e1;

    --ecart-aplat: #c0392b;
    --ecart-encre: #9a2419;
    --ecart-fond: #fceceb;

    --obligation-aplat: #1f5c8b;
    --obligation-encre: #17466a;
    --obligation-fond: #e9f1f7;

    /* Les neutres sont teintés vers le vert de la marque plutôt que gris purs :
       un gris neutre à côté d'un vert saturé paraît violacé, et l'interface
       semble alors appartenir à deux palettes. */
    --neutre-000: #ffffff;
    --neutre-050: #f5f8f6;
    --neutre-100: #e9efec;
    --neutre-200: #d5dedb;
    --neutre-300: #b4c2bd;
    --neutre-400: #859891;
    --neutre-500: #64756f;
    --neutre-600: #4a5b55;
    --neutre-700: #33423d;
    --neutre-800: #22302b;
    --neutre-900: #16241f;

    /* --- Typographie -------------------------------------------------------

       Échelle FIXE, en rem, et non fluide. Une interface de travail se regarde
       à distance constante ; un titre en « clamp » qui rétrécit dans une
       colonne étroite est moins lisible, pas plus. Le rapport entre deux pas
       est serré — environ 1,15 — parce qu'un écran de pilotage porte beaucoup
       plus de niveaux qu'une page de marque, et qu'un contraste exagéré y
       fabrique du bruit. */

    --texte-famille: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --affichage-famille: "Archivo Narrow", Inter, ui-sans-serif, system-ui, sans-serif;
    --donnee-famille: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --taille-2xs: 0.6875rem;  /* 11px — mentions légales, unités */
    --taille-xs: 0.75rem;     /* 12px — intitulés de tuiles, badges */
    --taille-sm: 0.8125rem;   /* 13px — texte secondaire, aides */
    --taille-md: 0.875rem;    /* 14px — le corps des panneaux */
    --taille-lg: 1rem;        /* 16px — le corps de la page publique */
    --taille-xl: 1.125rem;    /* 18px */
    --taille-2xl: 1.375rem;   /* 22px */
    --taille-3xl: 1.75rem;    /* 28px — le chiffre d'une tuile */
    --taille-4xl: 2.25rem;    /* 36px */
    --taille-5xl: 3.25rem;    /* 52px — page publique seulement */

    /* L'interlettrage se resserre à mesure que le corps grandit. Le plancher
       est -0,04em ; au-delà les lettres se touchent. */
    --lettrage-serre: -0.03em;
    --lettrage-tres-serre: -0.04em;
    --lettrage-large: 0.06em;

    --interligne-compact: 1.25;
    --interligne-normal: 1.5;
    --interligne-lecture: 1.65;

    /* --- Espacement --------------------------------------------------------
       Base de 4 px. Règle qui vaut plus que l'échelle : les groupes serrés,
       les séparations généreuses, et toujours plus d'air au-dessus d'un titre
       qu'en dessous. */

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

    /* --- Formes ------------------------------------------------------------
       Les contrôles restent petits et sobres ; les cartes prennent un rayon
       franc. Les pilules sont réservées aux petits contrôles — un bloc de
       contenu en pilule flotte. */

    --rayon-controle: 0.375rem;
    --rayon-carte: 0.875rem;
    --rayon-pilule: 999px;

    /* --- Élévation ---------------------------------------------------------
       Une seule fois : bordure OU ombre, jamais les deux. Une bordure d'un
       pixel sous une ombre large donne la « carte fantôme ». Chaque ombre
       porte un décalage et un flou ; un halo coloré sans décalage n'est qu'une
       décoration. */

    --ombre-posee: 0 1px 2px rgb(22 36 31 / 6%), 0 2px 8px rgb(22 36 31 / 6%);
    --ombre-levee: 0 4px 8px rgb(22 36 31 / 8%), 0 12px 28px rgb(22 36 31 / 10%);

    /* --- Mouvement ---------------------------------------------------------
       De 150 à 250 ms : l'utilisateur est dans une tâche, il ne doit pas
       attendre une chorégraphie. La courbe part vite et finit doucement, ce
       qui se lit comme une réponse et non comme une animation. */

    --duree-immediate: 120ms;
    --duree-normale: 180ms;
    --duree-ample: 240ms;
    --courbe-sortie: cubic-bezier(0.16, 1, 0.3, 1);
}

/*
 * Le mouvement est une commodité, jamais une information : quand le système
 * demande qu'on s'en passe, tout doit rester utilisable et rien ne doit
 * disparaître.
 */
@media (prefers-reduced-motion: reduce) {
    :root {
        --duree-immediate: 0ms;
        --duree-normale: 0ms;
        --duree-ample: 0ms;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------------
   Les surfaces du navigateur.

   Sélection, curseur de saisie, barres de défilement, soulignement des liens :
   ce qu'on ne dessine pas porte quand même le design. Laissées par défaut,
   elles appartiennent à Chrome, pas à l'application — et c'est le signe le
   plus visible qu'une interface a été assemblée plutôt que construite.
   --------------------------------------------------------------------------- */

::selection {
    color: var(--neutre-000);
    background: var(--vert-porteo);
}

:root {
    accent-color: var(--vert-porteo);
    caret-color: var(--vert-porteo);
    scrollbar-color: var(--neutre-300) transparent;
    scrollbar-width: thin;
}

a {
    text-underline-offset: 0.18em;
    text-decoration-thickness: 0.08em;
}

/*
 * Un anneau de focus unique pour toute l'application, et VISIBLE. Il n'en
 * existait qu'un seul jusqu'ici, sur les champs de connexion : quiconque
 * navigue au clavier traversait le reste à l'aveugle.
 *
 * `:focus-visible` et non `:focus` : le clic à la souris ne doit pas allumer
 * l'anneau, sans quoi on l'enlève au bout d'une semaine.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--vert-porteo);
    outline-offset: 2px;
    border-radius: var(--rayon-controle);
}