/* ============================================================================ tokens.css — le vocabulaire de couleurs, de tailles et de plans du back-office. POURQUOI CE FICHIER EXISTE Le produit portait 4 436 couleurs écrites en toutes lettres dans ses feuilles et 1 530 dans son TSX, pour 46 variables. Un thème sombre n'est pas un problème de valeurs, c'est un problème de VOCABULAIRE : tant qu'une règle dit « #ffffff », elle dit « blanc » et non « la surface d'une carte », et aucune bascule ne peut la réinterpréter. Ce fichier nomme les rôles ; les feuilles s'y réfèrent ensuite. RÈGLE DE LIVRAISON Les valeurs CLAIRES sont strictement identiques à ce qui était servi avant : poser ce fichier ne change rien à l'écran, donc ne peut rien casser en production. Le bloc sombre est écrit dès maintenant mais ne s'applique qu'une fois `data-theme="dark"` posé sur — ce que personne ne fait encore. OÙ IL EST CHARGÉ Depuis src/app/layout.tsx, JAMAIS depuis extra.css. Douze routes (les écrans d'authentification, /confirm, /agenda/[id]) ne chargent aucune feuille m360 : un jeton défini là leur manquerait en silence. C'est déjà ce qui fait que .pw-meter s'affiche sans style sur /reset et /inscription. NOMMER PAR RÔLE, PAS PAR COULEUR `--fond-carte`, pas `--blanc`. Un nom de couleur ment dès qu'on inverse le thème. ============================================================================ */ :root { /* --- Neutres ------------------------------------------------------------- L'échelle employée par le produit est celle de « slate » : les six valeurs les plus fréquentes des feuilles en font partie (#94a3b8 268 fois, #64748b 221, #e2e8f0 205, #f1f5f9 150, #cbd5e1 141, #1e293b 134). On la garde telle quelle. */ --neutre-50: #f8fafc; --neutre-100: #f1f5f9; --neutre-200: #e2e8f0; --neutre-300: #cbd5e1; --neutre-400: #94a3b8; --neutre-500: #64748b; --neutre-600: #475569; --neutre-700: #334155; --neutre-800: #1e293b; --neutre-900: #0f172a; /* --- Surfaces ------------------------------------------------------------ */ --fond-page: var(--neutre-100); /* le fond derrière tout */ --fond-carte: #ffffff; /* une carte, un panneau, une modale */ --fond-creux: var(--neutre-50); /* un en-tête de tableau, une zone en retrait */ --fond-survol: var(--neutre-100); /* une ligne survolée */ --fond-actif: var(--neutre-200); /* une ligne sélectionnée */ --fond-inverse: var(--neutre-800); /* infobulle, barre latérale sombre */ /* Voile derrière un panneau ou une modale. Jeton À PART, et non dérivé de l'échelle neutre : celle-ci s'INVERSE en thème sombre, si bien qu'un voile construit sur --neutre-900 blanchit l'écran au lieu de l'assombrir. */ --voile: rgba(15, 23, 42, .55); /* --- Coque --------------------------------------------------------------- La barre latérale avait un fond sombre permanent, quel que soit le thème. C'était le langage des back-offices d'il y a dix ans : un bandeau noir qui tranche sur une page blanche. On lui donne des jetons À ELLE, ce qui permet de la faire claire en thème clair et sombre en thème sombre — et, accessoirement, de la retoucher sans ouvrir la moindre règle. */ --coque-fond: var(--fond-carte); --coque-texte: var(--texte-secondaire); --coque-texte-fort: var(--texte); --coque-icone: var(--texte-faible); --coque-bord: var(--bord); --coque-survol: var(--fond-page); --coque-actif-fond: var(--primaire-clair); --coque-actif-texte: var(--primaire); /* Largeur des deux colonnes de navigation. Ensemble (88 + 230), elles restent proches de la colonne unique d'avant (264 px) : le rail rend en lisibilité ce que le panneau prend en largeur. */ --coque-rail: 88px; --coque-sous: 230px; --coque-hauteur-barre: 56px; /* --- Textes -------------------------------------------------------------- Quatre niveaux, pas davantage : au-delà, personne ne sait plus lequel choisir. */ --texte: var(--neutre-900); /* titres, valeurs */ --texte-secondaire: var(--neutre-600); /* corps de texte */ --texte-tertiaire: var(--neutre-500); /* libellés, métadonnées */ --texte-faible: var(--neutre-400); /* mentions, texte d'aide, désactivé */ --texte-inverse: #ffffff; /* sur un fond plein */ /* --- Bordures ------------------------------------------------------------ */ --bord: var(--neutre-200); --bord-fort: var(--neutre-300); --bord-focus: var(--primaire); /* --- Couleur d'action ---------------------------------------------------- UNE primaire, celle de la commune (décision du 2026-09-07). Quatre couleurs d'action se disputaient l'application selon le module — indigo #4f46e5 (93 usages), bleu #2563eb (89), vert #16a34a (75), violet #534AB7 (71) : un agent ne pouvait pas apprendre « la couleur sur laquelle on clique ». `--commune-primary` est injectée par CommuneTheme d'après la configuration de la mairie. Le repli indigo n'est utilisé que par une commune sans couleur choisie — six des sept communes en base aujourd'hui. Les déclinaisons sont DÉRIVÉES, jamais saisies : --commune-primary-tint et --commune-primary-dark étaient lues onze fois dans extra.css sans être écrites nulle part, et retombaient donc sur des replis verts en dur — invisible tant que la seule commune configurée est verte, cassant pour la première mairie en rouge. */ /* La couleur d'action est celle de la MAIRIE (`color_primary` de sa configuration, injectée par CommuneTheme). Une commune sans couleur choisie retombe sur l'indigo, qui était la teinte d'action la plus répandue avant l'unification. Branché le 2026-09-07 : tout le back-office de Saint-Féliu est passé de l'indigo à son vert #52A12E d'un seul coup, et c'est le but — un agent doit reconnaître sa commune dans son outil de travail. */ --primaire: var(--commune-primary, #4f46e5); --primaire-fonce: color-mix(in oklab, var(--primaire) 82%, #000000); --primaire-clair: color-mix(in oklab, var(--primaire) 12%, var(--fond-carte)); --primaire-bord: color-mix(in oklab, var(--primaire) 32%, var(--fond-carte)); --primaire-texte: var(--texte-inverse); /* ce qui s'écrit SUR la primaire */ --primaire-halo: color-mix(in oklab, var(--primaire) 22%, transparent); /* --- États sémantiques --------------------------------------------------- Le fond et la bordure se dérivent de la teinte : une seule valeur à changer, et les trois pièces restent cohérentes dans les deux thèmes. */ --succes: #16a34a; --succes-fond: color-mix(in oklab, var(--succes) 12%, var(--fond-carte)); --succes-bord: color-mix(in oklab, var(--succes) 30%, var(--fond-carte)); --succes-texte: #15803d; --danger: #dc2626; --danger-fond: color-mix(in oklab, var(--danger) 10%, var(--fond-carte)); --danger-bord: color-mix(in oklab, var(--danger) 28%, var(--fond-carte)); --danger-texte: #b91c1c; --alerte: #d97706; --alerte-fond: color-mix(in oklab, var(--alerte) 14%, var(--fond-carte)); --alerte-bord: color-mix(in oklab, var(--alerte) 32%, var(--fond-carte)); --alerte-texte: #92400e; --info: #2563eb; --info-fond: color-mix(in oklab, var(--info) 10%, var(--fond-carte)); --info-bord: color-mix(in oklab, var(--info) 28%, var(--fond-carte)); --info-texte: #1d4ed8; /* --- Typographie --------------------------------------------------------- En rem, et c'est un correctif d'accessibilité autant qu'un choix d'échelle : les 1 563 `font-size` des feuilles étaient TOUTES en px, ce qui rend sans effet le réglage de taille de police du navigateur et du système. Les valeurs reprennent l'échelle déjà employée (13, 14, 15 px…) pour ne rien déplacer à l'écran. */ --txt-xs: 0.75rem; /* 12 px */ --txt-sm: 0.8125rem; /* 13 px — la taille la plus courante du produit */ --txt-md: 0.875rem; /* 14 px */ --txt-lg: 0.9375rem; /* 15 px */ --txt-xl: 1rem; /* 16 px — plancher des CHAMPS, cf. --txt-champ */ --txt-2xl: 1.125rem; /* 18 px */ --txt-3xl: 1.375rem; /* 22 px */ --txt-4xl: 1.75rem; /* 28 px */ /* iOS Safari zoome la page dès qu'un champ sous 16 px reçoit le focus, et la décadre à chaque saisie. En dessous du premier seuil, un champ vaut donc 16 px. */ --txt-champ: var(--txt-md); --police: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Réservée au texte écrit par un habitant : la rupture de police signale d'un coup d'œil que ce passage n'est pas de la machine. */ --police-citoyen: "Spectral", Georgia, serif; --graisse-normale: 400; --graisse-moyenne: 500; --graisse-forte: 600; --graisse-titre: 700; /* --- Espacements (échelle de 4) ----------------------------------------- */ --esp-1: 4px; --esp-2: 8px; --esp-3: 12px; --esp-4: 16px; --esp-5: 20px; --esp-6: 24px; --esp-8: 32px; --esp-10: 40px; --esp-12: 48px; /* Gouttière de page : fluide, parce qu'un padding de 24 px fixe mange 13 % d'un écran de 360 px. clamp() rend cette place au contenu sans toucher au bureau. */ --gouttiere: clamp(12px, 3vw, 28px); /* --- Rayons -------------------------------------------------------------- */ --rayon-sm: 6px; --rayon: 9px; --rayon-lg: 12px; --rayon-xl: 16px; --rayon-plein: 999px; /* --- Ombres -------------------------------------------------------------- Redéfinies en sombre : une ombre noire sur un fond sombre ne se voit pas, c'est la BORDURE qui doit alors porter le relief. */ --ombre-sm: 0 1px 2px rgba(15, 23, 42, .06); --ombre: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04); --ombre-lg: 0 10px 24px rgba(15, 23, 42, .10), 0 2px 6px rgba(15, 23, 42, .06); --ombre-xl: 0 24px 48px rgba(15, 23, 42, .18); /* --- Mouvement ----------------------------------------------------------- */ --transition-rapide: 120ms cubic-bezier(.4, 0, .2, 1); --transition: 180ms cubic-bezier(.4, 0, .2, 1); --transition-lente: 280ms cubic-bezier(.4, 0, .2, 1); /* --- Plans (z-index) ----------------------------------------------------- Vingt-six valeurs distinctes coexistaient, de 1 à 10050. On ne les renumérote pas (le risque dépasse le gain) : on NOMME les paliers en place et on réserve la bande 500-900 à la navigation mobile, aujourd'hui libre. Une variable de z-index n'est utilisable que dans une déclaration, pas dans une media query : ces jetons servent à écrire `z-index: var(--plan-modale)`. */ --plan-contenu: 1; --plan-collant: 100; /* en-têtes de tableau collants */ --plan-topbar: 400; --plan-menu: 600; /* menu utilisateur, listes déroulantes */ --plan-tiroir: 800; /* tiroir de navigation mobile */ --plan-scrim: 9998; /* voile derrière une modale */ --plan-modale: 10000; --plan-recadrage: 10050; /* recadrage d'image : au-dessus de sa modale */ } /* ============================================================================ SEUILS DE RUPTURE — une convention, pas des variables. Une media query ne sait pas lire var(). Ces trois valeurs sont donc à écrire en toutes lettres, mais elles remplacent les 23 seuils distincts choisis un par un qu'on trouvait dans les feuilles (780 et 782 y coexistaient, 767 et 768 aussi). @media (max-width: 640px) → téléphone @media (max-width: 900px) → tablette portrait / petite fenêtre @media (max-width: 1200px) → tablette paysage / portable étroit Le produit n'avait qu'un seul `min-width` dans tout son parc : on continue en « bureau d'abord » pour ne pas réécrire ce qui marche, en descendant par max-width. ============================================================================ */ /* ============================================================================ THÈME SOMBRE Écrit dès maintenant, appliqué seulement quand est posé. `data-fr-theme` est accepté aussi, le temps que le script du DSFR soit remplacé : il pose déjà cet attribut en production, avant la première peinture. Seuls les RÔLES sont redéfinis. Aucune règle des feuilles n'est touchée : c'est le principe même du vocabulaire — le sombre est une réinterprétation, pas une copie. ============================================================================ */ :root[data-theme="dark"], :root[data-fr-theme="dark"] { /* L'échelle neutre est inversée, mais pas symétriquement : un sombre pur (#000) fatigue et fait baver le texte clair. On part d'un bleu-nuit désaturé. */ --neutre-50: #0b1220; --neutre-100: #0f1725; --neutre-200: #1b2537; --neutre-300: #253148; --neutre-400: #6b7a94; --neutre-500: #8c9bb3; --neutre-600: #b3c0d4; --neutre-700: #ccd6e4; --neutre-800: #dde5ef; --neutre-900: #e8edf5; --fond-page: #0b1220; --fond-carte: #131b2c; --fond-creux: #0f1725; --fond-survol: #1a2436; --fond-actif: #22304a; --fond-inverse: #e8edf5; --texte: #e8edf5; --texte-secondaire: #b3c0d4; --texte-tertiaire: #8c9bb3; --texte-faible: #6b7a94; --texte-inverse: #0b1220; --bord: #253148; /* Coque : en thème sombre elle se distingue du contenu en étant PLUS SOMBRE que lui, l'inverse du thème clair. Une barre plus claire que la page attirerait l'œil vers la navigation au lieu du travail. */ --coque-fond: #0d1523; --coque-texte: #b3c0d4; --coque-texte-fort: #e8edf5; --coque-icone: #6b7a94; --coque-bord: #1b2537; --coque-survol: #162032; --coque-actif-fond: color-mix(in oklab, var(--primaire) 18%, #0d1523); --coque-actif-texte: var(--primaire); --bord-fort: #33415c; /* Voile : plus opaque en sombre, l'écran de départ étant déjà foncé. */ --voile: rgba(0, 0, 0, .68); /* La couleur d'une mairie est choisie pour du papier et un site clair : posée telle quelle sur un fond nuit, elle descend souvent sous le contraste lisible. On la remonte en luminance plutôt que de la remplacer — la mairie doit se reconnaître. */ --primaire: color-mix(in oklab, var(--commune-primary, #6366f1) 78%, #ffffff); --primaire-fonce: color-mix(in oklab, var(--commune-primary, #6366f1) 88%, #ffffff); --primaire-clair: color-mix(in oklab, var(--primaire) 16%, var(--fond-carte)); --primaire-bord: color-mix(in oklab, var(--primaire) 38%, var(--fond-carte)); --primaire-texte: #0b1220; --primaire-halo: color-mix(in oklab, var(--primaire) 28%, transparent); /* Les teintes d'état sont éclaircies pour tenir le contraste sur fond nuit ; leurs fonds et bordures suivent tout seuls, puisqu'ils s'en dérivent. */ --succes: #4ade80; --succes-texte: #86efac; --danger: #f87171; --danger-texte: #fca5a5; --alerte: #fbbf24; --alerte-texte: #fcd34d; --info: #60a5fa; --info-texte: #93c5fd; /* Sur fond sombre l'ombre ne se voit plus : le relief passe par un liseré clair. */ --ombre-sm: 0 1px 2px rgba(0, 0, 0, .40); --ombre: 0 1px 3px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .30); --ombre-lg: 0 10px 24px rgba(0, 0, 0, .50), 0 2px 6px rgba(0, 0, 0, .35); --ombre-xl: 0 24px 48px rgba(0, 0, 0, .60); /* Indique au navigateur de peindre en sombre ce qu'on ne style pas : ascenseurs, sélecteurs de date, contrôles natifs. Sans cette ligne, un