/* ========================================================================= MOMA — Tokens de design Palette officielle fournie par la cliente (D-29) : vert #3D5A4A, ocre #F7A825, creme #F6F3E4. La rampe de verts est recentree sur la TEINTE et la SATURATION exactes de la cliente (H 146,9 deg, S 0,322) en conservant les VALEURS (luminosite) de l'ancienne rampe : utiliser #3D5A4A tel quel comme fond sombre aurait fait tomber l'ocre a 3,83:1 et le bois a 3,03:1 (echec AA petit texte). Le ton exact de la cliente est conserve comme token a part entiere, --c-green-sage, pour le texte secondaire et les accents decoratifs sur fond clair. Les ratios de contraste indiques sont calcules (WCAG 2.x) et font foi. Ne pas introduire de nouvelle association couleur sans la recalculer. ========================================================================= */ :root { /* --- Verts de fond ---------------------------------------------------- */ --c-green: #23332A; --c-green-deep: #1F2E26; --c-green-darkest: #1B2821; /* Ton exact fourni par la cliente. Reserve au texte secondaire et aux accents sur fond CLAIR uniquement (7,39/6,83/6,14:1 sur header/page/ histoire) : sur --c-green (fond sombre) il ne fait que 1,75:1, tres en dessous du seuil 3:1 non textuel — jamais pose sur fond sombre. */ --c-green-sage: #3D5A4A; /* --- Clairs ----------------------------------------------------------- */ --c-cream: #F1EAD5; --c-cream-warm: #F6F3E4; /* Surface chaude, proche en valeur du creme (memes ecarts qu'avant) : ne JAMAIS l'utiliser en aplat non borde sur --c-cream / --bg-page, le bord ne se verrait pas. Toujours accompagnee d'un filet (--line-dark) ou d'une ombre. Reservee aux encadres, jamais au fond de page. */ --c-sand: #EAE3C6; /* --- Accents ---------------------------------------------------------- */ --c-ocre: #F7A825; /* jaune-orange du parasol, ton exact cliente (D-29) */ /* Ocre eclairci, meme teinte (33,7 deg) mais saturation pleine et luminance relative portee de 0,388 a 0,582. Usage UNIQUE : le surtitre du hero sur telephone, pose sur la photographie (D-27). Pourquoi il existe : mesure sur le rendu compose reel, l'ocre plein ne depasse jamais 3,95:1 sur cette photo, et il lui faudrait un fond a 0,048 de luminance au plus pour tenir les 4,5:1 exiges d'un petit texte — c'est-a-dire un voile si dense qu'il effacerait la table, les chaises et la terrasse que la composition doit justement montrer. La D-26 y parvenait avec un cache local derriere le surtitre ; ce cache est precisement ce que le proprietaire a rejete. Eclaircir la couleur resout le meme probleme sans toucher a la photographie. Mesure : 5,2-6,0:1 sur le fond compose reel (voir DECISIONS.md D-27). */ --c-ocre-bright: #FFBC66; --c-wood: #C89B6C; /* bois du comptoir */ --c-olive: #7C8B5A; /* vert des chaises de terrasse */ --c-terracotta: #8A4A17; /* orange du carrelage, assombri pour le texte */ /* --- Roles : fonds ---------------------------------------------------- */ --bg-page: var(--c-cream-warm); --bg-dark: var(--c-green); /* Separation en-tete / contenu (D-24, valeurs recalculees en D-29 sur la nouvelle palette cliente). Gradation descendante en trois valeurs, du plus clair au plus chaud — en-tete (ivoire) > page/hero (creme) > Philosophie (creme chaud) — memes ecarts qu'avant : en-tete vs page ........ 1,08 page vs Philosophie .... 1,11 en-tete vs Philosophie . 1,20 <- l'ecart reellement percu Contrastes de texte recalcules sur chaque fond (tous AA, la plupart AAA, revue accessibility-lead D-29) : --ink : 12,92 / 11,95 / 10,74:1 --ink-soft : 7,39 / 6,83 / 6,14:1 --ink-accent : 6,64 / 6,14 / 5,52:1 L'en-tete conserve par ailleurs son filet bas (--line-dark), qui porte la separation lorsque l'ecart de valeur seul ne suffirait pas. */ --bg-header: #FFFCED; --bg-histoire: #ECE7D4; /* Fonds chauds clairs (refonte v3, D-17) : Epicerie et Traiteur adoptent desormais l'ocre et le bois en grand aplat, texte fonce dessus — plus editorial, distinct de l'alternance clair/sombre du reste de la page. Contrastes recalcules sur la palette D-29 : --ink-on-warm sur --bg-epicerie = 7,71:1, sur --bg-traiteur = 6,09:1. Remplace l'ancien fond sombre terracotta du Traiteur (D-16, abandonne). */ --bg-epicerie: var(--c-ocre); /* Fond Traiteur repasse en creme uni (#F6F3E4, demande explicite du proprietaire) : ne descend pas le contraste, --ink-on-warm (tres fonce) y est meme plus lisible que sur le bois. Texte, boutons et bordures de la section inchanges. */ --bg-traiteur: #F6F3E4; --ink-on-warm: var(--c-green-darkest); /* --- Roles : texte ---------------------------------------------------- Ratios recalcules pour la palette D-29 (revue accessibility-lead) : Sur fond clair (--bg-page #F6F3E4) : --ink #23332A ................. 11,95:1 AA + AAA --ink-soft #3D5A4A (plein, D-29) ..... 6,83:1 AA --ink-accent #8A4A17 .................. 6,14:1 AA Sur fond sombre (--bg-dark #23332A) : --on-dark #F1EAD5 ............. 11,07:1 AA + AAA --on-dark-soft creme a 78 % ......... 7,40:1 AA --on-dark-accent #F7A825 .............. 6,70:1 AA --c-wood #C89B6C .............. 5,30:1 AA ------------------------------------------------------------------- */ --ink: var(--c-green); /* Couleur pleine depuis D-29 (etait un alpha vert) : verifie par la revue accessibility-lead sur tous les usages actuels (en-tete, pied de page, cartes de plats, pages legales — tous des fonds pleins opaques, jamais une photo ni un dégradé), aucune regression, marge de contraste accrue partout. --c-green-sage est strictement identique a cette valeur. */ --ink-soft: var(--c-green-sage); --ink-accent: var(--c-terracotta); --on-dark: var(--c-cream); --on-dark-soft: rgba(241, 234, 213, 0.78); --on-dark-accent: var(--c-ocre); /* A PROSCRIRE pour du texte (contraste insuffisant) : --c-ocre sur creme .......... 1.78:1 --c-wood sur creme .......... 2.1:1 --c-cream sur --c-wood ....... 2.1:1 --c-olive sur creme .......... 3.1:1 (non textuel uniquement) --c-wood sur --c-sand ....... 1.9:1 (non textuel uniquement) --c-green-sage sur --c-green . 1.75:1 (non textuel uniquement : jamais d'accent decoratif en --c-green-sage sur un fond sombre) Sur fond clair, l'ocre et le bois ne servent que d'aplat, de filet ou de fond de bouton (avec texte --c-green-darkest, 7.71:1) — jamais de texte. --c-sand (surface chaude, D-29) : --ink sur sand ...... 10,33:1 AA + AAA --ink-accent sur sand ...... 5,31:1 AA Toujours avec une bordure (--line-dark) ou une ombre : sa valeur est trop proche du creme pour se distinguer par la seule couleur. --bg-epicerie / --bg-traiteur (fonds chauds clairs, D-17) : --ink-on-warm (#1B2821) sur --bg-epicerie (ocre) ... 7,71:1 AA + AAA --ink-on-warm sur --bg-traiteur (bois) .............. 6,09:1 AA + AAA Texte uniquement en --ink-on-warm sur ces deux fonds : --ink-soft (78 %) y descend a 3.1:1, insuffisant pour du texte de lecture — jamais utilise ici. L'anneau de focus par defaut (--c-ocre) se confondrait avec --bg-epicerie : ces deux sections utilisent un anneau fonce dedie, voir `.is-warm :focus-visible` dans base.css. */ /* --- Bordures et filets ----------------------------------------------- */ --line-dark: rgba(35, 51, 42, 0.16); --line-light: rgba(241, 234, 213, 0.20); /* --- Typographie ------------------------------------------------------ Titres (--font-display) : pile serif systeme, INCHANGEE (D-29) — hero, surtitres et titres de section restent la direction artistique deja validee au pixel (D-27). Corps de texte (--font-body) : Alegreya Sans (D-29, css/fonts.css), auto-hebergee en woff2 sous-ensemble, avec repli metrique sans decalage de mise en page avant les piles systeme. Voir DECISIONS.md D-29 pour le choix et le calcul du repli. */ --font-display: ui-serif, "New York", Georgia, "Times New Roman", serif; --font-body: "Alegreya Sans", "Alegreya Sans Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* --font-carte-display (D-31) : Sugo Display, auto-hebergee (css/fonts.css), reservee aux noms/ingredients des plats de la Carte (.dish__name/.dish__desc dans components.css) uniquement. Ne remplace pas --font-display, qui reste la police des titres partout ailleurs. Une seule graisse existe dans le fichier fourni (300, Light) : ne jamais demander un autre font-weight sur ces deux classes, sous peine de gras synthetique. */ --font-carte-display: "Sugo Display", "Sugo Display Fallback", var(--font-display); /* Echelle fluide : mobile 360px -> desktop 1440px. --t-xs/--t-sm/--t-base releves de ~13,5 % en D-29 (facteur 1,135) pour compenser la hauteur d'x d'Alegreya Sans (0,458) plus basse que celle de la pile systeme precedente (~0,52) : a taille nominale identique le texte aurait paru visiblement plus petit. Calcul et plancher (jamais sous 0,85rem sur --t-xs, qui porte notamment horaires et mentions legales) valides par la revue accessibility-lead. --t-md et au-dessus restent inchanges : deja assez grands pour absorber l'ecart de perception sans regression de lisibilite. */ --t-xs: 0.9rem; --t-sm: 0.95rem; --t-base: clamp(1.125rem, 1.09rem + 0.16vw, 1.2rem); --t-md: clamp(1.09rem, 1.03rem + 0.28vw, 1.25rem); --t-lg: clamp(1.32rem, 1.19rem + 0.58vw, 1.65rem); --t-xl: clamp(1.6rem, 1.38rem + 1vw, 2.15rem); --t-2xl: clamp(1.9rem, 1.55rem + 1.6vw, 2.75rem); --t-3xl: clamp(2.15rem, 1.7rem + 2.4vw, 3.6rem); --lh-tight: 1.08; --lh-title: 1.18; --lh-body: 1.62; --ls-tight: -0.02em; --ls-wide: 0.02em; --ls-eyebrow: 0.16em; /* --- Espacements ------------------------------------------------------ */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; /* Rythme vertical des sections, resserre sur mobile */ --section-y: clamp(3.5rem, 2.4rem + 4.6vw, 6.5rem); /* --- Grille ----------------------------------------------------------- */ --wrap: 76rem; /* conteneur large */ --wrap-narrow: 42rem; /* largeur de lecture confortable */ --gutter: clamp(1.15rem, 0.8rem + 1.6vw, 2.5rem); /* --- Rayons ----------------------------------------------------------- */ --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --r-full: 999px; /* --- Ombres (discretes) ----------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(27, 40, 33, 0.06), 0 2px 8px rgba(27, 40, 33, 0.05); --shadow-md: 0 2px 6px rgba(27, 40, 33, 0.07), 0 10px 28px rgba(27, 40, 33, 0.09); --shadow-lg: 0 4px 12px rgba(27, 40, 33, 0.08), 0 20px 50px rgba(27, 40, 33, 0.13); /* --- Mouvement -------------------------------------------------------- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 0.18s; --dur: 0.28s; --dur-slow: 0.55s; /* --- Z-index ---------------------------------------------------------- */ --z-base: 0; --z-raised: 10; --z-header: 100; --z-overlay: 200; /* --- Divers ----------------------------------------------------------- */ --header-h: 3.75rem; --focus-w: 3px; } @media (min-width: 48em) { :root { --header-h: 4.5rem; } }