/* ============================================================================= Charte Kolia — tokens web (référence : design/charte/CHARTE-KOLIA.md) Source unique des couleurs, typographies, rayons et ombres pour TOUTES les interfaces web : espace commerçant, livreur web, Ops, partenaires, vitrine, page publique de suivi. Chaque interface copie ce fichier tel quel ; on ne redéfinit jamais une couleur localement. Thème : suit le réglage du système ; un attribut data-theme="light|dark" sur force l'un ou l'autre. Contrastes vérifiés par design/charte/verifier-contrastes.mjs (WCAG AA). ============================================================================= */ :root { color-scheme: light dark; /* --- Marque : identiques dans les deux thèmes ---------------------------- */ --k-aubergine: #241932; /* en-têtes, bandeaux, barre de navigation */ --k-menthe: #6df4cb; /* bouton principal, accents sur aubergine */ --k-menthe-survol: #89ffdc; --k-sur-menthe: #153d31; /* texte posé sur la menthe */ --k-icone-action: #193e33; /* carré sombre à droite du bouton principal */ --k-sur-aubergine: #ffffff; --k-sur-aubergine-doux: #c6bed1; /* paragraphes sur aubergine */ --k-surtitre-aubergine: #d5ccdf; /* libellés en capitales sur aubergine */ --k-nav-inactif: #bfb6cb; --k-nav-actif-fond: rgba(255, 255, 255, 0.035); --k-pastille-aubergine: #393144; /* puce « En ligne », champ de recherche */ --k-avatar-fond: #40344e; --k-avatar-bord: #62546c; --k-avatar-texte: #f6eeff; --k-focus: #008f78; /* --- Thème clair ----------------------------------------------------------- */ --k-fond: #f4f6f5; --k-carte: #ffffff; --k-encre: #24202f; --k-attenue: #6a6a76; /* prototype #71717d : 4,44:1 sur le fond, corrigé */ --k-filet: #e8ebea; --k-doux: #e9f7f3; /* fond des puces, alertes douces, offre */ --k-teal: #007d6c; /* accent en texte sur fond clair (jamais la menthe) */ --k-erreur: #ad3030; /* États : texte + fond doux. La couleur ne porte jamais seule le statut. */ --k-succes: var(--k-teal); --k-succes-fond: var(--k-doux); --k-attente: #8a5a00; --k-attente-fond: #fdf3dc; --k-echec: #ad3030; --k-echec-fond: #fbeaea; --k-info: #2f5fa8; --k-info-fond: #e8f0fb; --k-neutre: #5d5d69; --k-neutre-fond: #eceeed; /* --- Typographie ------------------------------------------------------------ */ --k-police: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --k-graisse-corps: 500; --k-graisse-titre: 800; /* --- Rayons -------------------------------------------------------------------- */ --k-r-puce: 7px; --k-r-pastille: 10px; --k-r-champ: 13px; --k-r-bouton-aux: 14px; --k-r-adresse: 15px; --k-r-bouton: 17px; --k-r-carte: 22px; --k-r-offre: 24px; --k-r-appareil: 34px; --k-r-rond: 999px; /* --- Ombres : très discrètes, teintées aubergine ----------------------------- */ --k-ombre-carte: 0 8px 24px rgba(21, 41, 33, 0.024); --k-ombre-nav: 0 8px 20px rgba(23, 16, 36, 0.086); --k-ombre-flottante: 0 24px 60px rgba(19, 12, 37, 0.094); /* --- Mouvement ------------------------------------------------------------------ */ --k-duree: 180ms; --k-courbe: cubic-bezier(0.22, 1, 0.36, 1); } /* Thème sombre : système, sauf choix explicite du clair */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --k-fond: #141819; --k-carte: #202627; --k-encre: #f1f5f4; --k-attenue: #a8b3b2; --k-filet: #333d3c; --k-doux: #193c35; --k-teal: #62dfc5; --k-erreur: #ffada9; --k-attente: #f2c46d; --k-attente-fond: #3a2e15; --k-echec: #ffada9; --k-echec-fond: #3d1d1f; --k-info: #9cc3ff; --k-info-fond: #1b2a3f; --k-neutre: #c3cbca; --k-neutre-fond: #2a3132; } } :root[data-theme='dark'] { --k-fond: #141819; --k-carte: #202627; --k-encre: #f1f5f4; --k-attenue: #a8b3b2; --k-filet: #333d3c; --k-doux: #193c35; --k-teal: #62dfc5; --k-erreur: #ffada9; --k-attente: #f2c46d; --k-attente-fond: #3a2e15; --k-echec: #ffada9; --k-echec-fond: #3d1d1f; --k-info: #9cc3ff; --k-info-fond: #1b2a3f; --k-neutre: #c3cbca; --k-neutre-fond: #2a3132; } /* Socle commun : police, rendu des chiffres, focus visible, mouvement réduit */ html { font-family: var(--k-police); font-weight: var(--k-graisse-corps); background: var(--k-fond); color: var(--k-encre); -webkit-text-size-adjust: 100%; } .k-chiffres { font-variant-numeric: tabular-nums; } :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--k-focus); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } }