/* ============================================================= COLORS — lancepierres.fr "Outdoor Moderne" Doctrine trois-couleurs — trois couleurs, trois métiers : terracotta (--accent) = ce qu'on FAIT — CTA, prix, hover, action vert forêt (--brand) = ce qu'on EST — logo, made-in, identité jaune latex (--latex) = ce qu'on PROUVE — mesures du banc uniquement Jamais de blanc pur — le fond clair est toujours cream. ============================================================= */ :root { /* --- Noir (fonds sombres) --- */ --noir-950: #050505; /* fond sombre dominant — header, footer, sections dark */ --noir-900: #0A0A0A; /* cartes dark (packshots : voir --ecrin) */ /* --- Écrin packshot (zones photo produit) --- Sur fond de page clair, toute zone qui accueille un packshot (card produit, galerie PDP, vignette panier, îlot MT-Sling) prend cet écrin noir #050505–#0C0C0B, en continuité EXACTE avec le fond des photos studio : aucune bordure visible entre la photo et son écrin. C'est là que le produit claque. */ --ecrin: #070707; --noir-800: #1A1A1A; /* bordures sur dark */ --noir-700: #2A2A2A; --noir-500: #3A3A3A; --noir-300: #5C5C5C; /* --- Cream (fonds clairs — jamais de blanc pur) --- */ --cream-50: #FDFCF8; --cream-100: #FAF7EE; /* fond clair dominant */ --cream-200: #F2EDDA; /* texte lede on-dark */ --cream-300: #E5DDC1; /* petits textes on-dark */ /* --- Terracotta (ACTION) --- */ --accent-300: #E08A5A; --accent-400: #CD6D38; --accent-500: #B8541E; /* CTA, prix, hover */ --accent-600: #93421A; /* hover CTA */ /* --- Vert forêt (IDENTITÉ) --- */ --brand-400: #819967; /* stock dispo, dégradés */ --brand-500: #5A7544; --brand-600: #365322; /* logo, made-in-France */ /* --- Latex yellow (LA MESURE — ce qu'on PROUVE) --- Réservé aux données réellement mesurées au banc : MeasureBadge, aiguille de jauge, impacts de dispersion, métadonnées de relevé. UNIQUEMENT sur fond noir (contraste AA). Jamais en texte sur cream. Jamais décoratif : si l'élément jaune ne porte pas une mesure, il n'a pas le droit d'être jaune. */ --latex-yellow: #E8D547; --latex: var(--latex-yellow); /* alias court — usage composants */ --measure: var(--latex-yellow); /* alias sémantique */ /* --- Gris (texte & bordures sur clair) --- */ --gray-100: #F0F0EC; --gray-200: #DCDCD4; /* bordures sur clair */ --gray-300: #C7C7BD; --gray-400: #A5A59B; --gray-500: #6B6B62; --gray-600: #5C5C52; /* texte secondaire */ --gray-700: #3F3F36; --gray-800: #2C2C24; /* texte principal */ --gray-900: #1A1A14; /* --- Aliases sémantiques --- */ --identity: var(--brand-600); --action: var(--accent-500); --surface-dark: var(--noir-950); --surface-card-dark: var(--noir-900); --surface-light: var(--cream-100); --surface-card: var(--cream-100); --surface-inset: var(--cream-50); --text-strong: var(--gray-800); --text-body: var(--gray-600); --text-on-dark: var(--cream-100); --text-lede-dark: var(--cream-200); --border-light: var(--gray-200); --border-dark: var(--noir-800); /* Un prix est une donnée, pas une action : mono + gris-900 (jamais terracotta) */ --price: var(--gray-900); --stock-ok: var(--brand-400); /* --- Role tokens (pilotés par data-palette) --- */ --eyebrow-c: var(--accent-500); --line-c: var(--brand-600); --nav-underline: var(--accent-500); --hero-eyebrow-bar: var(--accent-500); --made-fr: var(--brand-600); } /* ============================================================= 4 PALETTES CUSTOMIZER — pose data-palette sur balanced (défaut, ci-dessus) · forest · heritage · terra (LEGACY) ============================================================= */ [data-palette="forest"] { --eyebrow-c: var(--brand-600); --nav-underline: var(--brand-600); --hero-eyebrow-bar: var(--brand-600); --line-c: var(--brand-600); } [data-palette="heritage"] { --eyebrow-c: var(--accent-500); --line-c: var(--latex-yellow); --nav-underline: var(--latex-yellow); --hero-eyebrow-bar: var(--latex-yellow); --made-fr: var(--brand-600); } /* LEGACY — rollback V7 « tout terracotta ». Rompt la doctrine trois-couleurs (identité = action). Conservée pour compatibilité uniquement — ne pas la choisir par goût ; préférer balanced / forest / heritage. */ [data-palette="terra"] { --identity: var(--accent-500); --eyebrow-c: var(--accent-500); --line-c: var(--accent-500); --nav-underline: var(--accent-500); --hero-eyebrow-bar: var(--accent-500); --made-fr: var(--accent-500); }