/* ========================================================================== DarDZ — jetons de couleur (socle 2.1) -------------------------------------------------------------------------- Les valeurs viennent du logo envoye par Lamine : le bleu nuit du fond, l'orange du « DZ » et de la volute, le cyan du monogramme. REGLE DU SOCLE, INCHANGEE : aucune couleur ecrite en dur ailleurs. Les noms --orange* sont des noms de ROLE, pas de teinte — une centaine de regles les appellent. Ils portent ici l'orange DarDZ. L'APLAT DE MARQUE NE SUIT PAS LE THEME. --signal (le cyan) et --bande (le bleu nuit) gardent leur teinte en clair comme en sombre : une signature qui change de couleur quand on bascule le theme n'est plus une signature. L'accent, lui, s'assombrit en clair pour tenir 4,5:1 sur le papier. ========================================================================== */ :root{ color-scheme:dark; /* ---- Roles : fonds ---------------------------------------------------- */ --fond-0:#070E18; /* la page */ --fond-1:#0D1724; /* les bandes, l'en-tete */ --fond-2:#13202F; /* les cartes, les champs */ /* ---- Roles : textes --------------------------------------------------- */ --texte-0:#FFFFFF; /* titres */ --texte-1:#F2F2F2; /* texte fort */ --texte-2:#D2D2D2; /* texte courant */ --texte-3:#9A9A9A; /* texte secondaire */ --texte-4:#777777; /* mentions legales */ --texte-champ:#7E7E7E; /* placeholder */ /* ---- Roles : traits et ombres ----------------------------------------- */ --ligne:rgba(255,255,255,.12); --shadow:0 10px 30px rgba(0,0,0,.55); --ombre-carte:0 12px 24px rgba(0,0,0,.6); --ombre-flottant:0 6px 18px rgba(0,0,0,.5); --ombre-image:0 24px 46px rgba(0,0,0,.6); --ombre-douce:none; /* le relief des cartes en clair */ --voile-entete:rgba(7,14,24,.86); --voile-barre:rgba(7,14,24,.94); --opacite-fond:.30; /* ---- Accent : l'encre -------------------------------------------------- * * --orange l'aplat des boutons * --sur-orange ce qui s'ecrit dessus — il INVERSE avec le theme, parce que * l'aplat passe du blanc au noir d'un theme a l'autre. C'est * la seule paire du socle qui se croise ainsi : une boutique * dont l'accent est une couleur garde le meme aplat partout. * --orange-vif l'accent en TEXTE. Il doit rester a 4,5:1 sur son fond : * blanc pur sur le noir, encre pleine sur le blanc. * ---------------------------------------------------------------------- */ /* SOCLE 2.1 — LA MEME TERRE CUITE QU'EN CLAIR, ECLAIRCIE POUR LE SOMBRE. Un accent qui change de teinte entre les deux themes n'est plus une signature : la visiteuse qui bascule le theme croirait changer de site. Seule la LUMINOSITE bouge, parce que #A8432A sur du presque-noir tombe sous 3:1 et devient illisible. */ --orange:#F2792B; --orange-vif:#FF9A52; --orange-sombre:#C85F1C; --sur-orange:#0B1220; --voile-orange-fort:rgba(242,121,43,.22); --voile-orange:rgba(242,121,43,.16); --voile-orange-doux:rgba(242,121,43,.10); --shadow-accent:0 10px 28px -8px rgba(242,121,43,.55); /* La couleur de surprise, inchangee : un aplat de marque garde sa teinte d'un theme a l'autre. L'encre par-dessus reste l'encre. */ --signal:#22D3EE; --signal-encre:#06202A; --voile-signal:rgba(34,211,238,.18); /* ---- La bande d'engagements ------------------------------------------- * * LA SEULE COULEUR DE LA BOUTIQUE, ET C'EST UN CHOIX DE LA CLIENTE. * Elle a demande la bande moutarde d'un visuel de reference ; la valeur est * relevee au pixel dessus, pas approchee a l'oeil (#C9A84B). * * Elle NE SUIT PAS LE THEME. Un aplat de marque garde sa teinte en sombre * comme en clair — sinon la bande change de couleur quand la visiteuse * bascule le theme, et ce n'est plus une signature. * * L'ECRITURE EST A L'ENCRE, PAS EN BLANC. Du blanc sur ce moutarde donne * 2,29:1, tres loin des 4,5:1 exiges pour du texte de 12 px : sur un * telephone en plein soleil, la bande devient une barre doree illisible. * L'encre y est a 8,26:1. Pour ecrire en blanc, il faudrait descendre le * fond vers #8A6D1F — ce ne serait plus la couleur du visuel. * ---------------------------------------------------------------------- */ /* SOCLE 2.1 — LA BANDE PASSE A L'ENCRE. Elle etait moutarde : la couleur relevee sur le visuel de reference de la cliente dont la 1.4 est extraite. Sur le papier creme et le cobalt de la 2.1, un moutarde fait un troisieme jaune qui ne s'accorde ni a l'un ni a l'autre. A l'encre, elle devient ce dont la page claire manquait : un aplat sombre en travers, qui donne son rythme a la vitrine et separe le header du catalogue. Un magasin qui a une couleur de marque la pose ici. */ --bande:#0D1724; --sur-bande:#F2F5F8; /* Le dore eclairci du survol. Il existe parce que les boutons d'achat de la page Pack portent desormais la couleur de la bande : sans variante, un bouton dore n'aurait aucune reaction au survol. 10,68:1 sur l'encre. */ --bande-vif:#22D3EE; /* ---- Signalisation ----------------------------------------------------- * * Vert, ambre et WhatsApp ne suivent pas la marque : ce sont des codes que * tout le monde lit de la meme facon. Les repeindre en noir et blanc ferait * disparaitre l'information qu'ils portent. * ---------------------------------------------------------------------- */ --vert:#34D399; --voile-vert:rgba(52,211,153,.14); --ambre:#F5A524; --voile-ambre:rgba(245,165,36,.14); --whatsapp:#25D366; /* Le logo WhatsApp en source d'image, pour servir de masque a une icone coloree par --whatsapp (css/styles.css, .lien-wa). Le meme trace que le du bouton flottant ; ici il faut une URL, pas une balise. */ --icone-wa:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.297-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z'/%3E%3C/svg%3E"); /* ---- SOCLE 2.1 — LA SIGNATURE DE FORME ------------------------------- Trois rayons, et chacun dit ce qu'est l'element. C'est une grammaire : appliquee partout sans exception, elle se lit comme une intention ; melangee, elle n'est qu'un reglage oublie. --radius ce qu'on MANIPULE : boutons, champs, petits blocs. --radius-bloc ce qui CONTIENT : cartes, tuiles, panneaux, le cadre du header anime. --radius-pilule ce qui ETIQUETTE : puces de filtre, pastilles, badges. La 1.4 livrait 4 px — des angles presque nets, choisis pour une boutique de mode. Sur une charte claire et premium, cette valeur-la donne un air de tableau de bord administratif. On monte a 12 et 20. */ --radius:12px; --radius-bloc:20px; --radius-pilule:999px; /* ---- Statuts de commande — DASHBOARD UNIQUEMENT ------------------------ * * Ambre, bleu, violet, vert, rouge, sarcelle et gris : un jeu que l'oeil * distingue d'un coup. CES COULEURS NE SUIVENT PAS LA MARQUE — les * repeindre en gris rendrait les sept statuts indiscernables. * ---------------------------------------------------------------------- */ --st-attente:#F5A524; --st-injoignable:#2DD4BF; --st-confirmee:#4C9AFF; --st-livraison:#A78BFA; --st-livree:#34D399; --st-annulee:#F87171; --st-retour:#94A3B8; --alerte:#F87171; --voile-alerte:rgba(248,113,113,.14); /* Voiles d'accent : l'encre de la marque, tres diluee. */ --voile-accent-fort:rgba(242,121,43,.26); --voile-accent-moyen:rgba(242,121,43,.14); --voile-accent-doux:rgba(242,121,43,.09); --voile-accent-tres-doux:rgba(242,121,43,.05); --voile-whatsapp-fort:rgba(37,211,102,.28); --voile-whatsapp:rgba(37,211,102,.14); /* La vignette qui montre a quoi ressemble l'AUTRE theme, dans l'Editeur. Ses couleurs ne suivent pas le theme courant — c'est une illustration — mais elles suivent la MARQUE. */ --apercu-sombre-fond:#070E18; --apercu-sombre-trait:#F2F5F8; --apercu-clair-fond:#F4F6F9; --apercu-clair-trait:#15161A; --pulse-vert-plein:rgba(52,211,153,.55); --pulse-vert-vide:rgba(52,211,153,0); /* ---- Alias historiques : ne portent plus de couleur en propre ---------- */ --noir:var(--fond-0); --graphite:var(--fond-1); --graphite-clair:var(--fond-2); --blanc-pur:var(--texte-0); --blanc:var(--texte-1); --argent:var(--texte-2); --gris:var(--texte-3); --gris-sourd:var(--texte-4); --gris-champ:var(--texte-champ); } /* ========================================================================== SOCLE 2.1 — LE THEME CLAIR EST LA CHARTE LIVREE, ET C'EST UNE VRAIE CHARTE CE QUI CHANGE PAR RAPPORT A LA 1.4, ET POURQUOI La 1.4 livrait du blanc, du noir et les gris entre les deux : le defaut le plus sur, et le plus anonyme. C'etait juste pour une boutique qui vend des PHOTOS de produits detoures — toute couleur autour d'elles leur fait concurrence. La 2.1 ne vend pas des photos : elle vend des references, et elle est la version superieure. Elle doit se reconnaitre en une seconde. LES TROIS DECISIONS DE CETTE CHARTE 1. LE FOND N'EST PAS BLANC, IL EST CHAUD. #F7F4EF au lieu de #FFFFFF. C'est le changement le plus discret du fichier et celui qui se voit le plus : le blanc pur et le gris bleute (#F9FAFB) sont la signature de tous les gabarits du monde. Un papier legerement creme donne une page qui a l'air imprimee, et il fait exister les cartes BLANCHES posees dessus sans leur dessiner un trait autour. 2. L'ACTION EST TERRE CUITE, PAS NOIRE NI BLEUE. Un bouton noir sur fond clair, c'est elegant — et c'est exactement ce que fait la 1.4. Le cobalt a ete essaye ensuite : il tranchait bien, mais c'est la couleur de toutes les interfaces, et il refroidissait un papier qu'on avait rechauffe expres. La terre cuite est l'accord naturel du papier sable : c'est la meme famille chaude, en plus dense. Elle tient 5,3:1 sur le papier, elle ne ressemble a aucune couleur de signalisation — le vert dit « c'est bon », l'ambre « attention », le rose d'alerte « non » — et elle a le ton d'un atelier plutot que celui d'un tableau de bord. POUR EN CHANGER : les quatre valeurs --orange* ci-dessous, et rien d'autre. Tout le socle les lit. 3. UNE SEULE COULEUR DE SURPRISE, ET ELLE SERT DEUX FOIS. Le citron acide (--signal) n'apparait que sur l'etiquette du tarif reparateur et sur la pastille d'un modele nouveau. Rare, donc remarquee. Repandue, elle deviendrait criarde — c'est la seule couleur du socle qu'il ne faut PAS reutiliser ailleurs. ========================================================================== */ :root[data-theme="light"]{ color-scheme:light; /* PAPIER SABLE, PAS CREME. La premiere version de cette charte posait #F7F4EF — un blanc a peine tiede. A l'ecran, personne ne voyait la difference avec du blanc : on avait change la valeur sans changer l'impression, ce qui est le pire des deux mondes. #EFE9DE est franchement sable : on voit QUE c'est un papier, et les cartes blanches posees dessus prennent un vrai relief sans qu'on leur dessine un trait. C'est aussi ce qui distingue la 2.1 de la 1.4 au premier coup d'oeil, et c'est le but : la 1.4 est blanche. */ --fond-0:#F4F6F9; --fond-1:#E7ECF2; --fond-2:#FFFFFF; /* Une encre chaude, jamais #000000 : le noir pur sur papier creme vibre et fatigue, et il n'existe sur aucun imprime. */ --texte-0:#15161A; --texte-1:#1D1F24; --texte-2:#45474E; --texte-3:#73757D; --texte-4:#9A9BA2; --texte-champ:#A8A9AF; /* Le trait est chaud lui aussi, et tres clair : sur cette charte, ce sont les ombres douces qui separent les blocs, pas les traits. */ --ligne:#D6DEE8; --shadow:0 18px 40px rgba(21,22,26,.10); --ombre-carte:0 1px 2px rgba(21,22,26,.04),0 12px 28px -10px rgba(21,22,26,.14); --ombre-flottant:0 8px 24px rgba(21,22,26,.18); --ombre-image:0 24px 48px -16px rgba(21,22,26,.22); --ombre-douce:0 1px 2px rgba(21,22,26,.04),0 8px 20px -12px rgba(21,22,26,.12); --voile-entete:rgba(244,246,249,.86); --voile-barre:rgba(244,246,249,.95); --opacite-fond:.14; /* ---- L'accent : le cobalt -------------------------------------------- --orange l'aplat des boutons (le nom est un role du socle, pas une couleur : une centaine de regles l'appellent) --orange-vif l'accent EN TEXTE — il doit tenir 4,5:1 sur le papier. #1F33C4 y est a 7,1:1 ; le cobalt plein n'y serait qu'a 5,4:1, ce qui passe mais fatigue sur les petites tailles. --sur-orange ce qui s'ecrit sur l'aplat : blanc, 8,2:1 sur le cobalt. */ --orange:#A84B10; --orange-vif:#8F3F0B; --orange-sombre:#8A3D0A; --sur-orange:#FFFFFF; --voile-orange-fort:rgba(168,75,16,.16); --voile-orange:rgba(168,75,16,.10); --voile-orange-doux:rgba(168,75,16,.06); --shadow-accent:0 10px 24px -8px rgba(168,75,16,.40); /* ---- La couleur de surprise ------------------------------------------ Voir la decision n°3 en tete de bloc. Deux usages, pas trois. L'encre par-dessus, parce que du blanc sur ce citron donne 1,4:1 — illisible. */ --signal:#22D3EE; --signal-encre:#06202A; --voile-signal:rgba(34,211,238,.26); --vert:#047857; --voile-vert:rgba(4,120,87,.10); --ambre:#B7791F; --voile-ambre:rgba(183,121,31,.12); /* L'ALERTE A VIRE AU ROSE PROFOND, ET C'EST A CAUSE DE L'ACCENT. Elle etait un rouge franc. A cote d'une terre cuite, deux rouges voisins se confondaient : on ne savait plus si un bouton etait une action ou un danger. Le rose garde la charge d'alarme sans entrer dans la famille de l'accent. */ --st-attente:#B7791F; --st-injoignable:#0F766E; --st-confirmee:#1D4ED8; --st-livraison:#6D28D9; --st-livree:#047857; --st-annulee:#B91C1C; --st-retour:#64748B; --alerte:#C2185B; --voile-alerte:rgba(194,24,91,.10); --voile-accent-fort:rgba(168,75,16,.20); --voile-accent-moyen:rgba(168,75,16,.12); --voile-accent-doux:rgba(168,75,16,.07); --voile-accent-tres-doux:rgba(168,75,16,.04); --voile-whatsapp-fort:rgba(21,128,61,.20); --voile-whatsapp:rgba(21,128,61,.10); --pulse-vert-plein:rgba(4,120,87,.45); --pulse-vert-vide:rgba(4,120,87,0); /* WHATSAPP NE SUIT PAS LE THEME, ET C'EST POUR CA QU'IL EST ICI. Le rond vert et son glyphe blanc sont ceux de WhatsApp : les repeindre aux couleurs de la boutique ferait disparaitre ce que le bouton signifie. Ils ne sont donc PAS redefinis dans le bloc clair — mais ils vivent dans ce fichier comme toutes les autres couleurs, sans quoi ils echapperaient au prochain changement d'identite sans que personne ne les retrouve. */ --wa-vert:#25D366; --wa-encre:#FFFFFF; /* Les deux blancs du theme clair. Ce ne sont pas --fond-1 : l'un est le haut d'un degrade, l'autre le fond des champs, tous deux legerement plus chauds que la page pour que les bords se voient sans trait. */ --blanc-degrade:#FFFFFF; --blanc-chaud:#FBF8F4; --blanc-champ:#FBFAF8; }