/*
 * tokens.css — le vocabulaire visuel de la refonte.
 *
 * POURQUOI CE FICHIER. Les trois interfaces n'ont aucun systeme de modules et, jusqu'ici, aucun
 * systeme de couleurs partage non plus : style.css porte les variables Material 3 mais n'est
 * charge QUE par index.html ; hub.html et comptoir.html ecrivent leurs couleurs en dur, dans
 * leur propre balise <style>. Une teinte changee a un endroit ne bouge pas aux deux autres.
 *
 * Ce fichier est donc volontairement autonome et sans dependance : il ne suppose ni Tailwind ni
 * style.css, et s'ajoute a n'importe quelle page par un seul <link>. Il ne contient presque
 * AUCUN selecteur qui peint quoi que ce soit — uniquement des declarations de variables, plus
 * une remise a zero de trois regles. Il ne peut donc rien casser sur une page existante.
 *
 * REGISTRE RETENU : neutre profond, accent minimal. L'encre porte l'information, le papier se
 * tait, et une seule couleur — un bleu sombre — signale ce sur quoi on peut agir. C'est le
 * registre de maquettes/planning-hebdo/direction-a-registre.html, et le vocabulaire des
 * variables y est identique (encre / papier / trait / voile) pour que les deux chantiers se
 * rejoignent sans traduction.
 *
 * ECART ASSUME avec CHARTE_GRAPHIQUE.md : la charte prescrit des rayons de 24 a 32 px et du
 * glassmorphism. Ici les rayons plafonnent a 20 px et il n'y a aucun flou d'arriere-plan. Un
 * outil de travail consulte huit heures par jour ne gagne rien a des coins tres arrondis : ils
 * mangent de la surface utile et signent l'esthetique « page vitrine ». A arbitrer si la
 * refonte s'etend a toute l'application.
 *
 * MODE SOMBRE : meme mecanique que le reste de l'application — la classe `.dark` sur <html>,
 * posee au chargement depuis localStorage['theme']. Pas d'attribut data, pas de media query :
 * l'existant decide, ce fichier suit.
 */

:root {
    color-scheme: light;

    /* --- Encre : tout ce qui porte du texte ------------------------------------------- */
    /* Jamais de noir pur : #000 sur blanc vibre a la lecture longue. */
    --encre-forte:     #0B0F13;  /* titres */
    --encre:           #14181D;  /* corps de texte — 16,2:1 sur --papier */
    --encre-attenuee:  #4B5661;  /* texte secondaire — 7,6:1 */
    --encre-faible:    #6B7782;  /* legendes, mentions — 4,9:1, le plancher AA */

    /* --- Papier : les surfaces --------------------------------------------------------- */
    --voile:           #F4F5F7;  /* fond de page */
    --papier:          #FFFFFF;  /* carte, champ, surface haute */
    --papier-enfonce:  #EDEFF2;  /* surface basse : champ inactif, piste de barre */

    /* --- Traits ------------------------------------------------------------------------ */
    --trait:           #DFE2E6;  /* bordure ordinaire */
    --trait-fort:      #C3C9D0;  /* bordure au survol, separateur appuye */

    /* --- Accent : une seule couleur, reservee a l'action --------------------------------
     * Si tout est accentue, rien ne l'est. Ce bleu ne sert qu'au bouton principal, aux liens
     * et a l'anneau de focus. Il n'habille jamais une surface decorative. */
    --accent:           #1F3D7A;  /* 10,4:1 sur --papier, et autant pour le blanc pose dessus */
    --accent-fort:      #16305F;  /* survol / actif */
    --accent-voile:     #E9EEF8;  /* aplat tres clair : puce, etat selectionne */
    --accent-contraste: #FFFFFF;  /* ce qu'on ecrit SUR l'accent */

    /* --- Etats ------------------------------------------------------------------------- */
    --alerte:          #96231F;  /* 7,4:1 sur --papier : un message d'erreur doit se lire */
    --alerte-voile:    #FBECEB;
    --succes:          #17603F;
    --succes-voile:    #E8F3ED;

    /* --- Espacement : une seule echelle, pas de valeur au hasard -----------------------
     * Multiples de 4. Les composants n'ecrivent jamais de pixels : ils piochent ici, ce qui
     * rend la densite d'un ecran modifiable en un seul endroit. */
    --espace-1:  4px;
    --espace-2:  8px;
    --espace-3:  12px;
    --espace-4:  16px;
    --espace-5:  20px;
    --espace-6:  24px;
    --espace-8:  32px;
    --espace-10: 40px;
    --espace-12: 48px;
    --espace-16: 64px;
    --espace-20: 80px;

    /* --- Rayons ------------------------------------------------------------------------ */
    --rayon-xs:    4px;   /* puce, badge */
    --rayon-sm:    8px;   /* champ, bouton */
    --rayon-md:    12px;  /* carte interne */
    --rayon-lg:    16px;  /* carte, panneau */
    --rayon-xl:    20px;  /* conteneur de premier niveau */
    --rayon-plein: 999px; /* pastille, avatar */

    /* --- Ombres : portees courtes et peu opaques --------------------------------------
     * Une ombre dit « ceci flotte au-dessus ». Trois niveaux suffisent ; au-dela, on ne sait
     * plus lequel est au-dessus de quoi. */
    --ombre-1: 0 1px 2px rgba(11, 15, 19, .06);
    --ombre-2: 0 2px 8px -2px rgba(11, 15, 19, .10), 0 1px 2px rgba(11, 15, 19, .05);
    --ombre-3: 0 16px 40px -16px rgba(11, 15, 19, .22), 0 2px 6px rgba(11, 15, 19, .05);

    /* L'ombre de survol n'est pas un quatrieme niveau : c'est le niveau du dessus, pris un
     * instant. Une carte qui passe de --ombre-1 a --ombre-survol se souleve de deux pixels et
     * revient. Separee des trois autres pour qu'on ne la confonde pas avec une elevation
     * permanente. */
    --ombre-survol: 0 6px 16px -6px rgba(11, 15, 19, .16), 0 2px 4px rgba(11, 15, 19, .06);

    /* La lueur qui suit le pointeur. Tres faible : a 6 % elle se devine, a 15 % elle devient un
     * effet, et on retombe dans le registre qu'on cherche a fuir. */
    --spot: rgba(31, 61, 122, .06);

    /* La barre d'actions flottante. Opaque et non translucide : `backdrop-filter` coute une
     * couche de composition a chaque defilement, pour un rendu qui depend de ce qui passe
     * dessous — donc imprevisible. */
    --surface-flottante: rgba(255, 255, 255, .92);

    /* La trame de fond en canvas (grille-formes.js). Volontairement a la limite du visible :
     * elle donne une matiere au fond, elle ne doit pas se lire comme un quadrillage. */
    --grille-trait:  rgba(20, 24, 29, .032);
    --grille-survol: rgba(31, 61, 122, .06);

    /* --- Une teinte par destination du portail -----------------------------------------
     * LES SIX PAIRES DU COMPOSANT D ORIGINE, reprises telles quelles : saturation 90 %,
     * luminosite 50 % (40 % pour le vert, qui vire au fluo au-dessus), et un ECART DE TEINTE
     * de quinze degres entre les deux butees du degrade.
     *
     * C est cet ecart qui fait la plaque : les deux butees ont la MEME luminosite, donc le
     * degrade ne s eclaircit pas, il glisse d une teinte a l autre. Une premiere version avait
     * eclairci la butee haute avec du blanc — le resultat etait terne, exactement ce qu on ne
     * voulait pas.
     *
     * ELLES NE CHANGENT PAS ENTRE LES DEUX THEMES. A 90 % de saturation elles tiennent sur le
     * papier comme sur le fond sombre, et la face de verre posee dessus fait le reste.
     *
     * Le reste de l ecran — texte, bordures, surfaces — reste monochrome. La couleur ne vit que
     * sur ces six plaques de 52 px. */
    --app-planning:         hsl(223, 90%, 50%);   /* bleu */
    --app-planning-2:       hsl(208, 90%, 50%);
    --app-comptoir:         hsl(43, 90%, 50%);    /* orange */
    --app-comptoir-2:       hsl(28, 90%, 50%);
    --app-carioca:          hsl(3, 90%, 50%);     /* rouge */
    --app-carioca-2:        hsl(348, 90%, 50%);
    --app-clients:          hsl(123, 90%, 40%);   /* vert */
    --app-clients-2:        hsl(108, 90%, 40%);
    --app-collaborateurs:   hsl(283, 90%, 50%);   /* violet */
    --app-collaborateurs-2: hsl(268, 90%, 50%);
    --app-outils:           hsl(253, 90%, 50%);   /* indigo */
    --app-outils-2:         hsl(238, 90%, 50%);

    /* --- Typographie -------------------------------------------------------------------
     * Les deux familles sont deja embarquees dans public/vendor/fonts/ : rien ne sort du
     * domaine pour afficher du texte (section Conformite de CLAUDE.md). */
    --police-texte:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --police-chiffres: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

    --taille-xs:   12px;
    --taille-sm:   13px;
    --taille-base: 15px;
    --taille-md:   17px;
    --taille-lg:   20px;
    --taille-xl:   26px;
    --taille-2xl:  32px;

    --hauteur-serree: 1.2;   /* titres */
    --hauteur-texte:  1.55;  /* paragraphes */

    --graisse-normale: 400;
    --graisse-moyenne: 500;
    --graisse-appuyee: 600;
    --graisse-forte:   700;

    /* Les titres se resserrent, le petit texte s'ouvre : c'est ce qui rend une typographie
     * « posee » plutot que laissee par defaut. */
    --interlettre-titre: -.02em;
    --interlettre-menu:  .04em;

    /* --- Mouvement --------------------------------------------------------------------- */
    --duree-courte: 120ms;
    --duree:        200ms;
    --duree-longue: 360ms;
    --courbe: cubic-bezier(.2, 0, .2, 1);

    /* --- Focus -------------------------------------------------------------------------
     * Un seul anneau pour toute l'application. Il doit rester visible sur le papier comme sur
     * l'accent, d'ou une couleur dediee plutot que la reutilisation de --accent. */
    --focus:           #1A56B0;
    --focus-epaisseur: 2px;
    --focus-ecart:     2px;

    /* --- Surface vitrine ----------------------------------------------------------------
     * Le panneau visuel de l'ecran de connexion, et tout panneau du meme genre a venir.
     *
     * CES JETONS NE SONT PAS REDEFINIS PAR `.dark`, ET C'EST VOULU. Le panneau reste sombre
     * dans les deux themes : ce n'est pas une surface de travail mais un decor, et lui donner
     * le meme papier que le formulaire ferait disparaitre la partition en deux, qui est tout
     * l'interet de la mise en page. Les noms sont prefixes pour qu'on ne les confonde pas avec
     * les jetons de surface ordinaires, qui, eux, suivent le theme.
     *
     * Contraste verifie sur --vitrine-fond : --vitrine-encre 15,4:1, --vitrine-encre-attenuee
     * 6,8:1. Les deux depassent le seuil AA, y compris pour le second qui ne porte que des
     * mentions secondaires. */
    --vitrine-fond:           #0A0E12;
    --vitrine-encre:          #E9ECF0;
    --vitrine-encre-attenuee: #98A3AF;
    --vitrine-trait:          rgba(255, 255, 255, .12);
    --vitrine-relief:         rgba(255, 255, 255, .07);
    --vitrine-trame:          rgba(255, 255, 255, .10);
    --vitrine-etincelle:      rgba(226, 238, 255, .95);
    --vitrine-lueur:          rgba(120, 160, 235, .16);
    --vitrine-lueur-2:        rgba(90, 190, 190, .10);
}

.dark {
    color-scheme: dark;

    --encre-forte:     #F7F9FB;
    --encre:           #E4E8ED;  /* 13,1:1 sur --papier sombre */
    --encre-attenuee:  #9BA6B2;  /* 6,9:1 */
    --encre-faible:    #7C8792;  /* 4,6:1 */

    --voile:           #0E1115;
    --papier:          #171B20;
    --papier-enfonce:  #1F242B;

    --trait:           #2B323A;
    --trait-fort:      #3C454F;

    /* L'accent s'eclaircit : un bleu sombre sur fond sombre ne se voit pas, et surtout ne
     * passe aucun contraste. Ce qu'on ecrit dessus s'inverse donc aussi. */
    --accent:           #8CB0F2;
    --accent-fort:      #AFC9F8;
    --accent-voile:     #17233A;
    --accent-contraste: #0B1220;

    --alerte:          #F1918D;
    --alerte-voile:    #3A1F1E;
    --succes:          #6FD3A6;
    --succes-voile:    #12261E;

    /* Sur fond sombre une ombre noire ne se voit pas : on la fonce et on l'etale davantage. */
    --ombre-1: 0 1px 2px rgba(0, 0, 0, .40);
    --ombre-2: 0 2px 10px -2px rgba(0, 0, 0, .55);
    --ombre-3: 0 18px 48px -18px rgba(0, 0, 0, .75);
    --ombre-survol: 0 8px 20px -8px rgba(0, 0, 0, .65), 0 2px 4px rgba(0, 0, 0, .35);

    /* Sur fond sombre une ombre ne se voit presque pas : c'est la bordure qui porte l'elevation.
     * La lueur, elle, s'eclaircit — un bleu sombre sur du #0E1115 n'existe pas. */
    --spot: rgba(140, 176, 242, .07);

    --surface-flottante: rgba(23, 27, 32, .92);

    --grille-trait:  rgba(255, 255, 255, .03);
    --grille-survol: rgba(140, 176, 242, .07);


    --focus: #7FB0FF;
}

/*
 * Remise a zero minimale. Volontairement reduite a trois regles : ce fichier est destine a
 * cohabiter avec Tailwind et avec style.css, et une remise a zero bavarde se battrait avec eux.
 */
*, *::before, *::after { box-sizing: border-box; }

/* `[hidden]` doit gagner, toujours.
 *
 * La feuille du navigateur pose `[hidden] { display: none }`, mais c'est une regle d'AGENT : la
 * moindre declaration d'auteur la bat, y compris un `display: flex` pose sur une classe. Un
 * formulaire cache par `hidden` restait donc affiche — defaut constate sur l'ecran de connexion,
 * ou les deux formulaires se suivaient a l'ecran. Le `!important` est ici le comportement
 * attendu et non un contournement : `hidden` veut dire cache, sans discussion. */
[hidden] { display: none !important; }

/* `:focus-visible` et non `:focus` : le second dessine un anneau au clic a la souris, ce qui
 * pousse invariablement quelqu'un a ecrire `outline: none` et a supprimer du meme coup
 * l'accessibilite au clavier. */
:focus-visible {
    outline: var(--focus-epaisseur) solid var(--focus);
    outline-offset: var(--focus-ecart);
    border-radius: var(--rayon-xs);
}

/* Les chiffres s'alignent en colonne : meme chasse, meme largeur. C'est la raison d'etre du
 * monospace ici, pas un effet de style — et c'est ce dont le planning aura besoin. */
.chiffres {
    font-family: var(--police-chiffres);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}
