/* ============================================================ Vistempos — les variables de l'espace web, reliées au thème unique ============================================================ Repris de l'ancien `site-admin/styles/theme.css` (368 lignes). L'ancien posait ses propres couleurs ; ici, AUCUNE valeur de couleur, de police ni de rayon n'est écrite : chaque variable de l'ancien est RELIÉE à un jeton généré de `partage/theme/genere/theme.css` (thème « Pro sobre », plan §2.8, décision de Jibril du 29/09), chargé AVANT ce fichier. Les feuilles des pages gardent les noms de l'ancien : elles n'ont pas eu à être réécrites. Seul renommage : l'ancien `--couleur-fond` (le fond de la page) s'appelle `--fond-page`, parce que `--couleur-fond` est un jeton généré (le blanc). ⚑ LES STATUTS : l'ancien les peignait en vert et en orange. La décision de Jibril du 29/09 (plan §2.8) ne garde qu'UNE couleur vive, le rouge, réservé à ce qui alerte ou engage : « succès » et « attention » passent à l'encre et au gris. ⚑ LE MODE SOMBRE : l'ancien en avait un ; le thème unique n'a pas de palette sombre. La palette sombre est DÉRIVÉE des jetons (fond encre, texte clair, gris obtenus par mélange), sans aucune couleur nouvelle : décision de Jibril du 04/10 (QB1-1). ============================================================ */ *, *::before, *::after { box-sizing: border-box; } /* Les liens prennent l'encre du thème, jamais le bleu par défaut du navigateur : le rouge reste la SEULE couleur vive (style « Pro sobre »). Un lien qui a sa propre classe garde la sienne. */ a { color: var(--couleur-principale); } /* La gouttière de défilement est toujours réservée : sinon le cadre saute de 16 px en passant d'une page qui défile à une page qui ne défile pas. */ html { scrollbar-gutter: stable; } body { margin: 0; font-family: var(--police); font-size: var(--taille-texte); color: var(--couleur-texte); background: var(--fond-page); } :root { /* --- Couleurs (reliées aux jetons « Pro sobre ») --- */ --couleur-principale: var(--couleur-encre); --couleur-principale-texte: var(--couleur-inverse); --fond-page: var(--couleur-fond-doux); --couleur-surface: var(--couleur-fond); --couleur-texte: var(--couleur-encre); --couleur-texte-secondaire: var(--couleur-encre-douce); --couleur-bordure: var(--couleur-bord); /* Statuts : gris ; le rouge alerte (règle du 29/09, confirmée le 04/10, QB1-1). */ --couleur-succes: var(--couleur-encre); --couleur-attention: var(--couleur-encre-douce); --couleur-alerte: var(--couleur-vif); --fond-succes: var(--couleur-fond-gris); --fond-attention: var(--couleur-fond-gris); --fond-alerte: var(--couleur-vif-fond); --bordure-alerte: color-mix(in srgb, var(--couleur-alerte) 45%, var(--couleur-bordure)); --fond-principale-doux: color-mix(in srgb, var(--couleur-principale) 8%, var(--couleur-surface)); --couleur-bordure-carte: color-mix(in srgb, var(--couleur-principale) 22%, var(--couleur-surface)); /* --- LE ROUGE VISTEMPOS (style « Pro sobre », maquette du 29/09, section B ; Jibril, 05/10) : la seule couleur vive. Il sert au LOGO (le mot « Vistempos » en Inter gras, rouge sur fond clair, blanc là où le fond est foncé), aux ALERTES (`--couleur-alerte`), et à la BARRE DU MOIS EN COURS du tableau de bord. Nulle part ailleurs. --- */ --logo-couleur: var(--couleur-vif); --logo-graisse: 700; --logo-espacement: -0.03em; --barre-mois-en-cours: var(--couleur-vif); /* --- Le cadre : le bandeau en haut, la barre de gauche claire --- */ --entete-fond: var(--couleur-principale); --entete-texte: var(--couleur-inverse); --entete-bordure: var(--couleur-encre); --entete-contour: color-mix(in srgb, var(--entete-texte) 26%, transparent); --entete-survol: color-mix(in srgb, var(--entete-texte) 12%, transparent); --rail-fond: var(--couleur-surface); --rail-texte: var(--couleur-texte-secondaire); --rail-fort: var(--couleur-texte); --rail-survol: var(--fond-principale-doux); --rail-actif-fond: var(--couleur-principale); --rail-actif-texte: var(--couleur-principale-texte); --rail-bordure: var(--couleur-bordure); --fond-creux: color-mix(in srgb, var(--couleur-texte-secondaire) 12%, var(--couleur-surface)); /* --- La bulle de mission (accueil) --- */ --bulle-survol-bordure: color-mix(in srgb, var(--couleur-principale) 40%, var(--couleur-bordure)); --pastille-active-fond: color-mix(in srgb, var(--couleur-principale-texte) 22%, transparent); /* --- Ombres et voile, tirés de l'encre --- */ --ombre-carte: 0 1px 2px color-mix(in srgb, var(--couleur-encre) 6%, transparent), 0 1px 3px color-mix(in srgb, var(--couleur-encre) 4%, transparent); --ombre-flottante: 0 4px 12px color-mix(in srgb, var(--couleur-encre) 10%, transparent); --ombre-survol: 0 4px 14px color-mix(in srgb, var(--couleur-encre) 10%, transparent), 0 1px 4px color-mix(in srgb, var(--couleur-encre) 6%, transparent); --voile: color-mix(in srgb, var(--couleur-encre) 45%, transparent); /* --- Formes : les rayons du thème (8 px ; 4 px pour les badges) --- */ --rayon: var(--rayon-normal); --rayon-bulle: var(--rayon-normal); /* Une forme ronde (pastille, point, barre de progression) : une géométrie de l'ancien (`999px`), pas un angle du thème. */ --rayon-rond: 999px; /* --- Typographie (DEC-016) --- */ --police: var(--police-texte); --taille-titre: 1.375rem; --taille-sous-titre: 1.0625rem; --taille-texte: 0.9375rem; --taille-petit: 0.8125rem; --taille-etiquette: 0.6875rem; --graisse-normale: 400; --graisse-moyenne: 500; --graisse-forte: 600; /* La police des CODES (« ABC-1234 ») : à chasse fixe dans l'ancien, pour qu'un 0 ne se lise pas O. Gardée par décision de Jibril du 04/10 (QB1-1). */ --police-code: ui-monospace, SFMono-Regular, Menlo, monospace; /* Les chiffres s'alignent en colonne, et un 0 ne ressemble jamais à un O. */ --chiffres: 'tnum' 1, 'zero' 1; /* --- Espacements --- */ --espace-1: 4px; --espace-2: 8px; --espace-3: 12px; --espace-4: 16px; --espace-5: 24px; --espace-6: 32px; /* --- Densité (DEC-015) : 20 à 30 missions sans défiler --- */ --hauteur-ligne-tableau: 40px; --hauteur-controle: 36px; --hauteur-cible-tactile: 48px; --largeur-barre-laterale: 236px; --hauteur-entete: 64px; /* Les colonnes d'une carte de mission : un seul endroit pour aligner toutes les cartes, quelle que soit la longueur des textes. */ --colonne-etat: 138px; --colonne-fin: 304px; --transition: 120ms ease-out; color-scheme: light; } /* ============================================================ Le mode sombre : le réglage du système tant que personne n'a rien choisi, puis le choix explicite (`partage/web/theme.js`), qui l'emporte toujours. Les deux blocs portent les MÊMES valeurs ; toutes viennent des jetons (décision QB1-1). ============================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --couleur-principale: var(--couleur-bord); --couleur-principale-texte: var(--couleur-encre); --fond-page: var(--couleur-encre); --couleur-surface: color-mix(in srgb, var(--couleur-encre) 86%, var(--couleur-fond)); --couleur-texte: var(--couleur-fond-gris); --couleur-texte-secondaire: var(--couleur-bord-fort); --couleur-bordure: color-mix(in srgb, var(--couleur-encre) 68%, var(--couleur-fond)); --couleur-succes: var(--couleur-fond-gris); --couleur-attention: var(--couleur-bord-fort); --couleur-alerte: color-mix(in srgb, var(--couleur-vif) 70%, var(--couleur-fond)); --fond-succes: color-mix(in srgb, var(--couleur-fond) 10%, var(--couleur-surface)); --fond-attention: color-mix(in srgb, var(--couleur-fond) 10%, var(--couleur-surface)); --fond-alerte: color-mix(in srgb, var(--couleur-vif) 22%, var(--couleur-surface)); --entete-fond: color-mix(in srgb, var(--couleur-encre) 76%, var(--couleur-fond)); --entete-bordure: var(--couleur-encre); --rail-survol: var(--couleur-bordure); --ombre-carte: 0 1px 2px color-mix(in srgb, var(--couleur-encre) 70%, transparent), 0 1px 3px color-mix(in srgb, var(--couleur-encre) 50%, transparent); --ombre-flottante: 0 4px 12px color-mix(in srgb, var(--couleur-encre) 80%, transparent); --ombre-survol: 0 4px 14px color-mix(in srgb, var(--couleur-encre) 85%, transparent), 0 1px 4px color-mix(in srgb, var(--couleur-encre) 60%, transparent); --voile: color-mix(in srgb, var(--couleur-encre) 70%, transparent); --logo-couleur: var(--couleur-inverse); color-scheme: dark; } } :root[data-theme='sombre'] { --couleur-principale: var(--couleur-bord); --couleur-principale-texte: var(--couleur-encre); --fond-page: var(--couleur-encre); --couleur-surface: color-mix(in srgb, var(--couleur-encre) 86%, var(--couleur-fond)); --couleur-texte: var(--couleur-fond-gris); --couleur-texte-secondaire: var(--couleur-bord-fort); --couleur-bordure: color-mix(in srgb, var(--couleur-encre) 68%, var(--couleur-fond)); --couleur-succes: var(--couleur-fond-gris); --couleur-attention: var(--couleur-bord-fort); --couleur-alerte: color-mix(in srgb, var(--couleur-vif) 70%, var(--couleur-fond)); --fond-succes: color-mix(in srgb, var(--couleur-fond) 10%, var(--couleur-surface)); --fond-attention: color-mix(in srgb, var(--couleur-fond) 10%, var(--couleur-surface)); --fond-alerte: color-mix(in srgb, var(--couleur-vif) 22%, var(--couleur-surface)); --entete-fond: color-mix(in srgb, var(--couleur-encre) 76%, var(--couleur-fond)); --entete-bordure: var(--couleur-encre); --rail-survol: var(--couleur-bordure); --ombre-carte: 0 1px 2px color-mix(in srgb, var(--couleur-encre) 70%, transparent), 0 1px 3px color-mix(in srgb, var(--couleur-encre) 50%, transparent); --ombre-flottante: 0 4px 12px color-mix(in srgb, var(--couleur-encre) 80%, transparent); --ombre-survol: 0 4px 14px color-mix(in srgb, var(--couleur-encre) 85%, transparent), 0 1px 4px color-mix(in srgb, var(--couleur-encre) 60%, transparent); --voile: color-mix(in srgb, var(--couleur-encre) 70%, transparent); --logo-couleur: var(--couleur-inverse); color-scheme: dark; } :root[data-theme='clair'] { color-scheme: light; } @media (prefers-reduced-motion: reduce) { :root { --transition: 0ms; } }