/* ========================================================================== Labo — jetons de la piste Deux étages : 1. l'ossature, qui ne change JAMAIS (typo, échelle, grille, encre, achat) ; 2. la peau d'univers, redéfinie par [data-univers] sur ou
. Tout ce qui porte l'univers est préfixé --u-. ========================================================================== */ /* Polices variables auto-hébergées (SIL OFL 1.1, licences dans fonts/). Le préchargement est émis par le shell HTML pour éviter tout saut métrique. */ @font-face { font-family: "Gabarito"; src: url("fonts/gabarito-latin.woff2") format("woff2"); font-style: normal; font-weight: 400 900; font-display: swap; } @font-face { font-family: "Schibsted Grotesk"; src: url("fonts/schibsted-grotesk-latin.woff2") format("woff2"); font-style: normal; font-weight: 400 900; font-display: swap; } :root { color-scheme: light; /* --- Ossature : encre et neutres ------------------------------------- */ --encre: #1C1F1E; /* texte principal ET fond du bouton d'achat */ --encre-2: #5B615E; /* texte secondaire — 6,3:1 sur blanc */ --encre-3: #8A8F8B; /* mentions non essentielles (jamais seul porteur) */ --blanc: #FFFFFF; --filet: #E3E1DB; /* filet neutre */ --filet-fort: #C9C6BE; --voile: #F6F5F1; /* États — mesurés sur blanc et sur les quatre fonds d'univers */ --stock: #14663F; --rupture: #A32B21; --attente: #8A5A12; --nicotine-fond: #F2E7D6; --nicotine-trait: #D8C4A4; /* --- Typographie ------------------------------------------------------ */ --display: "Gabarito", "Trebuchet MS", "Segoe UI", system-ui, sans-serif; --texte: "Schibsted Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif; --mono: "Schibsted Grotesk", "Helvetica Neue", Arial, system-ui, sans-serif; --fs-13: 0.8125rem; --fs-15: 0.9375rem; --fs-17: 1.0625rem; --fs-20: 1.25rem; --fs-24: 1.5rem; --fs-30: 1.875rem; --fs-40: 2.5rem; --fs-56: 3.5rem; --lh-titre: 1.08; --lh-texte: 1.55; /* --- Espacement, grille, rayons --------------------------------------- */ --e-1: 0.25rem; --e-2: 0.5rem; --e-3: 0.75rem; --e-4: 1rem; --e-5: 1.5rem; --e-6: 2rem; --e-7: 3rem; --e-8: 4rem; --e-9: 6rem; --conteneur: 75rem; /* 1200 px */ --lecture: 40rem; --marge-mobile: 1rem; --gouttiere: 1.5rem; --r-cartouche: 14px; --r-petit: 8px; --r-pilule: 999px; /* Aucune ombre sur les cartes : réservées au tiroir, au toast, à l'age gate. */ --ombre-flottant: 0 12px 32px rgb(28 31 30 / 0.18); --duree-courte: 160ms; --duree: 300ms; --courbe: cubic-bezier(0.22, 0.61, 0.36, 1); /* --- Couleurs de famille de saveur ------------------------------------ --fam : couleur pleine (goutte, onglet, filet) — jamais de texte dessus --fam-txt : grade texte, AA sur blanc ET sur la teinte (pastille active) --fam-doux : teinte de fond des étiquettes */ --fam-classic: #C48A2C; --fam-classic-txt: #7A5310; --fam-classic-doux: #F6EEDF; --fam-menthe: #2FB58F; --fam-menthe-txt: #106B52; --fam-menthe-doux: #E4F5EF; --fam-fruite: #E0457B; --fam-fruite-txt: #A5194B; --fam-fruite-doux: #FBE8EF; --fam-gourmand: #B9702F; --fam-gourmand-txt: #7A4515; --fam-gourmand-doux: #F4EAE0; --fam-sels: #7B5CC6; --fam-sels-txt: #543B93; --fam-sels-doux: #EEEAF8; --fam-zero: #6C9A3F; --fam-zero-txt: #476827; --fam-zero-doux: #EDF3E4; /* --- Peau par défaut = Maison ----------------------------------------- */ --u-nom: "maison"; --u-fond: #FFFFFF; --u-fond-2: #F6F5F1; --u-fond-3: #EDEBE4; --u-accent: #22706C; /* structure : liseré, bandeau de fiche, emblème */ --u-accent-plein: #22706C; /* même couleur portant du texte blanc (AA) */ --u-accent-2: #7CC7BF; /* filets, gouttes, puces — décoratif */ --u-texte-accent: #1B5B57; /* liens et titres de bloc — AA sur --u-fond/-2 */ --u-bord: #D3E2E0; --u-motif: linear-gradient(to right, #22706C 1px, transparent 1px), linear-gradient(to bottom, #22706C 1px, transparent 1px); --u-motif-opacite: 0.07; --u-motif-taille: 24px 24px; } /* ========================================================================== Les quatre peaux ========================================================================== */ [data-univers="maison"] { --u-nom: "maison"; --u-fond: #FFFFFF; --u-fond-2: #F6F5F1; --u-fond-3: #EDEBE4; --u-accent: #22706C; --u-accent-plein: #22706C; --u-accent-2: #7CC7BF; --u-texte-accent: #1B5B57; --u-bord: #D3E2E0; --u-motif: linear-gradient(to right, #22706C 1px, transparent 1px), linear-gradient(to bottom, #22706C 1px, transparent 1px); --u-motif-opacite: 0.07; --u-motif-taille: 24px 24px; } [data-univers="atelier"] { --u-nom: "atelier"; --u-fond: #F8F1E6; --u-fond-2: #FFFFFF; --u-fond-3: #F0E5D3; --u-accent: #6B4423; --u-accent-plein: #6B4423; --u-accent-2: #D39A46; --u-laiton: #B8923F; --u-texte-accent: #5A3A1E; --u-bord: #E4D3B9; --u-motif: repeating-linear-gradient(1deg, #6B4423 0 1px, transparent 1px 22px); --u-motif-opacite: 0.06; --u-motif-taille: auto; } [data-univers="liquides"] { --u-nom: "liquides"; --u-fond: #FFFFFF; --u-fond-2: #FAFAFA; --u-fond-3: #F3F1F1; --u-accent: #D8386E; /* liseré et graphiques : jamais de texte dessus */ --u-accent-plein: #C8285C; /* même famille, grade AA pour le texte blanc */ --u-accent-2: #3BBFA0; --u-texte-accent: #B52A5A; --u-bord: #F2D3DE; --u-motif: radial-gradient(circle at 20% 30%, #D8386E 0 3px, transparent 4px), radial-gradient(circle at 72% 68%, #3BBFA0 0 3px, transparent 4px); --u-motif-opacite: 0.12; --u-motif-taille: 96px 96px; } [data-univers="tech"] { --u-nom: "tech"; --u-fond: #EEF3F7; --u-fond-2: #FFFFFF; --u-fond-3: #E1E9F0; --u-accent: #1F5FA8; --u-accent-plein: #1F5FA8; --u-accent-2: #38B6D6; --u-graphite: #2B3238; --u-texte-accent: #194D87; --u-bord: #CBDCEA; --u-motif: linear-gradient(#1F5FA8 1px, transparent 1px), linear-gradient(90deg, #1F5FA8 1px, transparent 1px), radial-gradient(circle, #38B6D6 0 2px, transparent 2px); --u-motif-opacite: 0.08; --u-motif-taille: 32px 32px, 32px 32px, 64px 64px; }