/* ===================================================================== design-tokens.css — socle visuel de l'application Marquetis. --------------------------------------------------------------------- Chargé par head_commun.php, donc présent sur toutes les pages. ÉTAT ACTUEL : les 16 pages partagent un seul rendu, la classe "fond-pilotage" (plus bas), issue du dashboard. Les 5 fonds et les 2 styles de carte qui coexistaient auparavant ont été supprimés une fois qu'aucune page ne les portait plus — leur définition reste dans l'historique Git si un besoin revient. UNE PAGE NOUVELLE se raccorde en portant, sur son : min-h-screen text-slate-100 font-sans antialiased overflow-x-hidden fond-pilotage et rien d'autre : fond, cartes, champs, en-têtes de tableau et boutons segmentés suivent. Ne pas y recopier de couleur — utiliser les variables déclarées par "fond-pilotage" (--panel-plein, --panel-opaque, --bordure-carte, --entete-tableau). POUR CHANGER LE DESIGN D'ENSEMBLE : une couleur (orange, teal, texte, fond) se change sur une seule ligne du bloc :root ci-dessous, et les 16 pages suivent. ===================================================================== */ :root { color-scheme: dark; /* --- Surfaces --- */ --bg: #16262b; --bg-soft: #101826; --panel: rgba(28, 48, 56, 0.55); /* opacité des cartes .glass */ --panel-strong-top: rgba(28, 48, 56, 0.92); --panel-strong-bottom: rgba(22, 38, 43, 0.88); --border: rgba(148, 163, 184, 0.14); --border-glass: rgba(255, 255, 255, 0.06); /* --- Texte --- */ --text: #e5e9ea; --muted: #94a3b8; /* --- Accents. Les noms Tailwind historiques sont violet / azure / emerald2 — mêmes valeurs, voir head_commun.php. --- */ --accent: #f2622e; --accent-dim: #d94e1a; --accent-2: #0f9c8f; --accent-2-dim: #0c7d73; --accent-3: #10b981; --accent-3-dim: #059669; /* --- États (barèmes de couleur du dashboard) --- */ --succes: #34d399; --alerte: #fbbf24; --danger: #fb7185; /* Teal clair des icônes, badges et messages de confirmation. Écrit en dur (#5eead4) dans une quinzaine d'endroits, y compris depuis du JS qui pose un style inline : en variable, sa contrepartie claire suit partout. */ --teal-vif: #5eead4; /* Textes pastel posés sur une pastille translucide (badges de statut, cellules de charge du planning). La pastille, elle, reste la même dans les deux thèmes : c'est le texte qui doit s'inverser, sinon on obtient du rose pâle sur rose pâle. */ --pastel-vert: #a7f3d0; --pastel-rouge: #fecaca; --pastel-jaune: #fde047; --pastel-bleu: #93c5fd; --pastel-gris: #cbd5e1; --pastel-orange: #fdba74; /* --- Tiroir de navigation (sidebar.php) --- */ --nav: rgba(13, 23, 27, 0.92); --nav-survol: rgba(255, 255, 255, 0.05); --nav-actif: rgba(255, 255, 255, 0.10); --nav-lisere: #fb923c; /* liseré du lien actif */ --nav-texte: #e2e8f0; /* libellés au repos */ --nav-texte-vif: #f1f5f9; /* au survol */ --nav-texte-actif: #ffffff; /* page courante */ --nav-bouton: rgba(28, 48, 56, 0.75); /* pastille ☰ */ --nav-bouton-bordure: rgba(255, 255, 255, 0.1); --scrollbar: rgba(148, 163, 184, 0.25); --scrollbar-survol: rgba(148, 163, 184, 0.4); } /* Thème clair : ne s'active que si l'utilisateur clique le bouton dédié (classe "light" posée sur ). Tant qu'il ne le fait pas, rien de ce bloc ne s'applique et l'apparence sombre reste celle d'origine. */ html.light { color-scheme: light; /* Aligné sur le fond réellement peint par "fond-pilotage" plus bas : c'est --bg que affiche dans le rebond élastique du défilement, et un écart s'y voit comme une bande plus claire en haut ou en bas de page. */ --bg: #edf2f3; --bg-soft: #e4ecee; --panel: rgba(255, 255, 255, 0.9); --panel-strong-top: rgba(255, 255, 255, 0.96); --panel-strong-bottom: rgba(248, 250, 252, 0.94); --border: rgba(15, 23, 42, 0.08); --border-glass: rgba(15, 23, 42, 0.08); --text: #1e293b; --muted: #64748b; /* Les quatre teintes d'état sont calibrées pour un fond sombre : sur blanc, #34d399 tombe à 1,8:1 et #fbbf24 à 1,7:1 — un message « enregistré » ou un avertissement y devient illisible. Mêmes familles, versions foncées. */ --succes: #047857; --alerte: #b45309; --danger: #be123c; --teal-vif: #0d7d73; --pastel-vert: #065f46; --pastel-rouge: #991b1b; --pastel-jaune: #854d0e; --pastel-bleu: #1e40af; --pastel-gris: #475569; --pastel-orange: #9a3412; --nav: rgba(255, 255, 255, 0.96); --nav-survol: rgba(15, 23, 42, 0.04); --nav-actif: rgba(15, 23, 42, 0.07); /* Les trois teintes de libellé étaient les seules variables du tiroir laissées en version sombre : #e2e8f0 / #f1f5f9 / #ffffff, soit du blanc cassé sur le fond blanc ci-dessus. Titres de groupe illisibles, et le lien de la page courante carrément invisible (blanc pur sur gris très clair). C'est ce qui rendait le tiroir inutilisable en thème clair. */ --nav-texte: #334155; --nav-texte-vif: #0f172a; --nav-texte-actif: #0f172a; --nav-lisere: #ea580c; /* #fb923c passe mal sur blanc */ --nav-bouton: rgba(255, 255, 255, 0.92); --nav-bouton-bordure: rgba(15, 23, 42, 0.12); --scrollbar: rgba(15, 23, 42, 0.18); --scrollbar-survol: rgba(15, 23, 42, 0.3); } /* ===================================================================== Base commune à toutes les pages ===================================================================== */ html { background: var(--bg); overflow-x: hidden; min-height: 100%; } body { margin: 0; min-height: 100vh; overflow-x: hidden; font-family: 'Manrope', sans-serif; color: var(--text); background-color: var(--bg); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 8px; } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-survol); } /* La carte de base. Son fond, sa bordure et son absence de flou sont redefinies par "fond-pilotage" plus bas ; ce qui reste ici sert de repli si une page oublie la classe sur son . */ .glass, .glass-strong { background: var(--panel); border: 1px solid var(--border-glass); } /* Coins arrondis par DÉFAUT, pas par recopie. Le rayon vivait dans chaque page : `rounded-2xl` posé sur chaque carte de dashboard_sql.php, une règle `.glass, .glass-strong { border-radius: 22px }` dans le