/* ============================================================ Bar IA — tokens de la charte (figée le 2026-09-05) Seule source de couleur de l'application : aucune couleur en dur ailleurs. Nuit par défaut ; jour = mode « Sans alcool » ([data-theme="jour"] sur , ou sur un conteneur). Les tokens dérivés sont redéclarés en jour : une variable qui référence une autre variable se fige à l'endroit où elle est déclarée, elle ne suit pas un thème posé sur un conteneur. ============================================================ */ :root { color-scheme: dark; /* Fonds — la profondeur vient des trois tons, jamais d'ombres */ --bar-fond: #1B1916; --bar-carte: #26231F; --bar-puce: #34302B; --bar-bordure: rgba(240, 234, 225, 0.08); --bar-contour: rgba(240, 234, 225, 0.28); /* Textes */ --bar-texte: #F0EAE1; --bar-secondaire: #B7B0A6; --bar-grise: #928C85; /* Action — une seule par écran, texte couleur du fond, jamais blanc */ --bar-action: #2EC4B6; --bar-sur-action: #1B1916; --bar-action-texte: #2EC4B6; /* Notes de famille — remplissages (liquide des silhouettes) */ --bar-note-cocktail: #2EC4B6; --bar-note-soft: #A6DFD0; --bar-note-granite: #8CCBE6; --bar-note-smoothie: #F4A67A; --bar-liquide-neutre: #928C85; /* Teintes des produits (P14b) : le liquide d'une bouteille, d'un jus, d'un fruit dit ce qu'il est ; posées via data-teinte */ --bar-teinte-clair: #CFE3E0; --bar-teinte-paille: #E3D39A; --bar-teinte-ambre: #D9A441; --bar-teinte-brun: #7A4B2A; --bar-teinte-rouge: #C94B45; --bar-teinte-bordeaux: #7D2E4E; --bar-teinte-orange: #EA8A3C; --bar-teinte-jaune: #E8CF5A; --bar-teinte-vert: #7FB56B; --bar-teinte-rose: #E8A3B0; --bar-teinte-blanc: #EFE9E1; --bar-teinte-bleu: #5E8FD6; --bar-teinte-violet: #8E6BC4; /* Attention — ne dit que « attention » */ --bar-attention: #E8B04B; --bar-attention-liquide: #E8B04B; /* Puces de famille (fond / texte) */ --bar-puce-cocktail: #34302B; --bar-puce-cocktail-texte: #2EC4B6; --bar-puce-soft: #34302B; --bar-puce-soft-texte: #A6DFD0; --bar-puce-granite: #34302B; --bar-puce-granite-texte: #8CCBE6; --bar-puce-smoothie: #34302B; --bar-puce-smoothie-texte: #F4A67A; /* Statuts de disponibilité */ --bar-statut-vert: #2EC4B6; --bar-statut-orange: #E8B04B; --bar-statut-gris: #928C85; /* Silhouettes */ --bar-trait: #F0EAE1; --bar-trait-absent: #928C85; /* Mesures */ --bar-colonne: 520px; --bar-cible: 44px; --bar-rayon: 14px; --bar-rayon-puce: 999px; --bar-onglets: 56px; --bar-e1: 4px; --bar-e2: 8px; --bar-e3: 12px; --bar-e4: 16px; --bar-e5: 24px; --bar-e6: 32px; --bar-e7: 48px; /* Typographie — police native, titres 900, sentence case */ --bar-police: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif; --bar-t1: 34px; --bar-t2: 22px; --bar-t3: 17px; --bar-corps: 17px; --bar-second: 15px; --bar-legende: 13px; --bar-mini: 12px; /* Mouvement — transitions 200 ms, une seule animation (600 ms) */ --bar-duree: 200ms; --bar-duree-verre: 600ms; --bar-courbe: cubic-bezier(0.16, 1, 0.3, 1); } /* Nuit forcée sur un conteneur (mode préparation, même en mode jour) : mêmes valeurs que :root. */ [data-theme="nuit"] { color-scheme: dark; --bar-fond: #1B1916; --bar-carte: #26231F; --bar-puce: #34302B; --bar-bordure: rgba(240, 234, 225, 0.08); --bar-contour: rgba(240, 234, 225, 0.28); --bar-texte: #F0EAE1; --bar-secondaire: #B7B0A6; --bar-grise: #928C85; --bar-action: #2EC4B6; --bar-sur-action: #1B1916; --bar-action-texte: #2EC4B6; --bar-liquide-neutre: #928C85; /* Teintes des produits (P14b) : le liquide d'une bouteille, d'un jus, d'un fruit dit ce qu'il est ; posées via data-teinte */ --bar-teinte-clair: #CFE3E0; --bar-teinte-paille: #E3D39A; --bar-teinte-ambre: #D9A441; --bar-teinte-brun: #7A4B2A; --bar-teinte-rouge: #C94B45; --bar-teinte-bordeaux: #7D2E4E; --bar-teinte-orange: #EA8A3C; --bar-teinte-jaune: #E8CF5A; --bar-teinte-vert: #7FB56B; --bar-teinte-rose: #E8A3B0; --bar-teinte-blanc: #EFE9E1; --bar-teinte-bleu: #5E8FD6; --bar-teinte-violet: #8E6BC4; --bar-attention: #E8B04B; --bar-attention-liquide: #E8B04B; --bar-puce-cocktail: #34302B; --bar-puce-cocktail-texte: #2EC4B6; --bar-puce-soft: #34302B; --bar-puce-soft-texte: #A6DFD0; --bar-puce-granite: #34302B; --bar-puce-granite-texte: #8CCBE6; --bar-puce-smoothie: #34302B; --bar-puce-smoothie-texte: #F4A67A; --bar-statut-vert: #2EC4B6; --bar-statut-orange: #E8B04B; --bar-statut-gris: #928C85; --bar-trait: #F0EAE1; --bar-trait-absent: #928C85; } [data-theme="jour"] { color-scheme: light; --bar-fond: #F6EFE6; --bar-carte: #FFFCF8; --bar-puce: #EDE4D8; --bar-bordure: #E3D6C8; --bar-contour: #C9BAA9; --bar-texte: #221610; --bar-secondaire: #6B5A4E; --bar-grise: #76675A; --bar-action: #2EC4B6; --bar-sur-action: #221610; --bar-action-texte: #0F6F67; --bar-liquide-neutre: #C9BDB0; /* Teintes des produits (P14b) : le liquide d'une bouteille, d'un jus, d'un fruit dit ce qu'il est ; posées via data-teinte */ --bar-teinte-clair: #CFE3E0; --bar-teinte-paille: #E3D39A; --bar-teinte-ambre: #D9A441; --bar-teinte-brun: #7A4B2A; --bar-teinte-rouge: #C94B45; --bar-teinte-bordeaux: #7D2E4E; --bar-teinte-orange: #EA8A3C; --bar-teinte-jaune: #E8CF5A; --bar-teinte-vert: #7FB56B; --bar-teinte-rose: #E8A3B0; --bar-teinte-blanc: #EFE9E1; --bar-teinte-bleu: #5E8FD6; --bar-teinte-violet: #8E6BC4; --bar-attention: #8A6108; --bar-attention-liquide: #E8B04B; --bar-puce-cocktail: #D2F2EE; --bar-puce-cocktail-texte: #0F6F67; --bar-puce-soft: #DDF2EC; --bar-puce-soft-texte: #1B5E52; --bar-puce-granite: #D9EDF7; --bar-puce-granite-texte: #0F4C6B; --bar-puce-smoothie: #FBDCC6; --bar-puce-smoothie-texte: #7A3A14; --bar-statut-vert: #0F6F67; --bar-statut-orange: #8A6108; --bar-statut-gris: #76675A; --bar-trait: #221610; --bar-trait-absent: #76675A; }