/* ===================================================================== Felix Gardens — Design Tokens V2 « Vert jardin » POINT DE VÉRITÉ UNIQUE du thème. Modifier ici = re-thémer tout le site. Palette arrêtée le 24/09/2026, piste B sur quatre comparées à l'écran. Elle remplace « Pierre bleue » (01/09), que Quentin a jugée trop sombre : l'aplat d'en-tête, de pied et de bande est passé d'un quasi-noir bleuté à un VERT PROFOND, et le blanc froid à un blanc très légèrement chaud. ⚠️ NOTRE VERT DOIT SE TENIR LOIN DES DEUX AUTRES, et c'est mesuré. Les deux références du métier, relevées le 01/09/2026 : pro-green.be #0B3D2E vert forêt très sombre, sur fond paille jardiflores.be #61CE70 le vert par défaut d'Elementor ICI #3b6b3d entre les deux, et loin des deux C'était l'argument qui avait fait écarter le vert en V1 : un troisième site vert risque de se fondre dans le paysage. Il n'a pas disparu, il a changé de rôle — il dit maintenant où NE PAS aller. Assombrir notre vert le rapprocherait de pro-green, le saturer le rapprocherait du vert Elementor. ⚠️ Vérifier ces deux sites avant de déplacer `--primary`. Ce qui distingue encore, indépendamment de la teinte : le lettrage (Fraunces + Public Sans, voir plus bas) et l'accent laiton, que ni l'un ni l'autre n'emploie. Thème CLAIR uniquement, comme les autres sites de l'écosystème. Convention couleur : OKLCH. Le hex en commentaire est un repère de lecture, jamais une source : c'est l'OKLCH qui fait foi. ⚠️ AUCUNE valeur visuelle ailleurs que dans ce fichier. Ni couleur, ni taille, ni espacement, ni durée, ni `style=` dans le HTML. ===================================================================== */ /* --- Polices auto-hébergées (100 % hors ligne, zéro appel réseau) ----- Deux fichiers par famille : `latin` couvre le français courant, et `latin-ext` n'est téléchargé QUE si la page contient un caractère qui l'exige. La coupure par `unicode-range` est celle de Google Fonts. Fraunces (titres) et Public Sans (texte) sont sous licence SIL OFL. ⚠️ Aucune des deux n'est utilisée par un autre site de l'écosystème ni par un concurrent du panel : le lettrage participe à la distinction. */ @font-face { font-family: "Fraunces"; src: url("../assets/fonts/Fraunces-var-latin.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Fraunces"; src: url("../assets/fonts/Fraunces-var-latin-ext.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Public Sans"; src: url("../assets/fonts/PublicSans-var-latin.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Public Sans"; src: url("../assets/fonts/PublicSans-var-latin-ext.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* =================================================================== COULEURS DE MARQUE ------------------------------------------------------------------- Nommées par leur RÔLE, jamais par leur teinte : `--primary` et non `--olive`. Le jour où l'olive devient autre chose, un seul endroit change et aucun sélecteur ne ment. PALETTE « VERT JARDIN », choisie par Quentin le 24/09/2026 après comparatif de quatre pistes. Elle remplace « Pierre bleue », jugée trop sombre : l'aplat d'en-tête, de pied et de voile est passé d'un quasi-noir bleuté (L 0.283) à un vert profond (L 0.400), et le fond a quitté le blanc froid pour un blanc très légèrement chaud. ⚠️ « Pierre bleue » désigne encore le MATÉRIAU des terrasses dans le contenu du site. Ce n'est plus le nom de la palette. Contrastes recalculés le 24/09/2026 par `tools/verifier_contrastes.py`, qui tourne désormais à CHAQUE génération (WCAG, seuil AA 4,5) : foreground sur background 10,95:1 muted-foreground sur background 5,30:1 primary sur background 5,85:1 accent sur background 4,72:1 card-foreground sur card 11,66:1 muted-foreground sur muted 4,92:1 primary-foreground sur primary 6,23:1 accent-foreground sur accent 5,02:1 stone-foreground sur stone 9,02:1 primary-soft sur stone 5,45:1 ⚠️ `--accent` reste le plus juste, à 4,72:1. Le déplacer d'un cran vers le clair le ferait tomber sous AA. Ce n'est pas une variable à ajuster à l'œil — mais on ne peut plus se tromper en silence : l'outil arrête la génération. =================================================================== */ /* Fond du site : un blanc très légèrement CHAUD, presque neutre. Il réchauffe l'ensemble sans virer au crème, ce qui ferait « bio ». */ --background: oklch(0.978 0.006 110); /* ≈ #f8f8f4 */ --foreground: oklch(0.340 0.020 145); /* ≈ #323b32, pierre bleue */ /* Surfaces posées sur le fond : cartes, formulaires, images. */ /* ⚠️ `--card` et non `--surface` : c'est le nom shadcn, celui qu'emploie tout l'écosystème, et celui que le pop-up commun `ow-popup.css` lit tel quel. Un nom que la communauté emploie déjà est un nom qu'on n'a pas à expliquer. */ --card: oklch(1 0 0); /* blanc pur */ --card-foreground: oklch(0.340 0.020 145); --muted: oklch(0.952 0.010 120); /* ≈ #eef0e9 */ --muted-foreground: oklch(0.512 0.022 140); /* ≈ #606a5e */ /* Vert : titres, aplats, boutons principaux, icônes. */ --primary: oklch(0.482 0.090 145); /* ≈ #3b6b3d */ --primary-foreground: oklch(1 0 0); --primary-strong: oklch(0.410 0.088 145); /* ≈ #28572b, survol */ /* Vert éclairci : lisible SUR FOND SOMBRE uniquement (5,45:1 sur `--stone`). ⚠️ Très faible sur `--background` : jamais de texte vert clair sur le fond du site. L'outil ne teste pas cette paire, parce qu'elle ne doit pas exister. */ --primary-soft: oklch(0.830 0.055 145); /* ≈ #b2d1b2 */ /* Laiton : l'accent. Filets, chiffres, survols, puces. Jamais un aplat de fond : c'est un trait, pas une surface. */ --accent: oklch(0.548 0.095 62); /* ≈ #986331 */ --accent-foreground: oklch(1 0 0); --accent-strong: oklch(0.470 0.085 60); /* ≈ #7d4e24, survol */ /* Vert profond : en-tête plein, pied de page, fond des bandes. C'est le seul aplat sombre du site. ⚠️ Les voiles d'images NE reprennent PAS cette valeur : voir `--overlay` plus bas. Un voile sert à rendre un titre blanc lisible sur une photo qu'on ne choisit pas, il doit rester bien plus sombre que l'aplat. */ --stone: oklch(0.400 0.045 148); /* ≈ #374f3a */ --stone-foreground: oklch(1 0 0); --border: oklch(0.912 0.010 120); /* ≈ #e1e3dc */ --border-strong: oklch(0.848 0.014 120); /* ≈ #cccfc5 */ --input: oklch(0.848 0.014 120); --ring: oklch(0.482 0.090 145); /* --- États --------------------------------------------------------- */ --success: oklch(0.515 0.110 157); --destructive: oklch(0.516 0.157 29); /* ≈ #b0392d */ --destructive-foreground: oklch(1 0 0); /* Boutons WhatsApp PORTANT UN LIBELLÉ : vert assombri, blanc dessus à 5,32:1. Le vert de marque officiel ne passe pas AA sous du texte. */ --whatsapp: oklch(0.515 0.110 157); /* ≈ #1f7a4d */ --whatsapp-foreground: oklch(1 0 0); /* Vert WhatsApp officiel, exactement #25D366. RÉSERVÉ à la pastille flottante, qui n'affiche qu'une icône. ⚠️ NE PAS l'utiliser sous du texte blanc : 1,98:1, échec AA. */ --whatsapp-brand: oklch(0.761 0.201 150); /* Voiles posés sur une photo : c'est ce qui rend un titre lisible sur un chantier ensoleillé. Trois forces, jamais une quatrième. ⚠️ `--overlay-fort` existe parce qu'un dégradé doit garantir la lisibilité SANS CONNAÎTRE LA PHOTO : Félix en changera, et le texte doit tenir sur une façade blanche en plein soleil comme sur une haie à l'ombre. */ --overlay-fort: oklch(0.250 0.028 148 / 0.80); --overlay: oklch(0.250 0.028 148 / 0.62); --overlay-soft: oklch(0.250 0.028 148 / 0.28); /* ⚠️ LE PLANCHER DU VOILE, pas une quatrieme nuance decorative. Un degrade qui finit en `transparent` ne garantit plus rien la ou il finit : le 02/09/2026, une intro plus longue a pousse l'eyebrow au sommet du hero, sur un ciel clair, en blanc sur blanc. Ce token existe pour qu'aucun point du hero ne soit jamais a voile nul. */ --overlay-plancher: oklch(0.250 0.028 148 / 0.16); /* --- Formes / rayons ------------------------------------------------ Rayons SOBRES, volontairement plus fermes que sur les autres sites de l'écosystème : la pierre et le pavé ont des arêtes. */ --radius: 0.5rem; --radius-card: 0.75rem; --radius-pill: 9999px; /* --- Ombres --------------------------------------------------------- */ --shadow-sm: 0 1px 2px oklch(0.283 0.012 223 / 0.07); --shadow-md: 0 8px 24px oklch(0.283 0.012 223 / 0.10); --shadow-lg: 0 20px 50px oklch(0.283 0.012 223 / 0.15); --shadow-focus: 0 0 0 3px color-mix(in oklab, var(--ring) 26%, transparent); /* =================================================================== TYPOGRAPHIE ------------------------------------------------------------------- Fraunces porte l'axe `opsz` : ses formes s'affinent d'elles-mêmes quand le titre grandit, à condition de laisser `font-optical-sizing: auto`. C'est déclaré une fois dans styles.css. =================================================================== */ --font-display: "Fraunces", ui-serif, Georgia, serif; --font-sans: "Public Sans", ui-sans-serif, system-ui, sans-serif; /* ÉCHELLE DE DOCUMENT, fluide : titres et corps de texte. Elle grandit avec l'écran (clamp min .. max). Identique aux autres sites de l'écosystème : c'est le noyau commun, il ne se renomme pas. */ --step--1: clamp(0.84rem, 0.81rem + 0.15vw, 0.92rem); --step-0: clamp(1.00rem, 0.96rem + 0.20vw, 1.10rem); --step-1: clamp(1.20rem, 1.10rem + 0.50vw, 1.45rem); --step-2: clamp(1.50rem, 1.30rem + 0.90vw, 2.00rem); --step-3: clamp(2.05rem, 1.65rem + 1.80vw, 3.10rem); --step-4: clamp(2.45rem, 1.85rem + 2.80vw, 4.00rem); /* hauteur d'écran */ /* ÉCHELLE D'INTERFACE, fixe : libellés, boutons, badges, titres de cartes, notes. Volontairement NON fluide — un bouton ne doit pas grandir avec la largeur de l'écran. N'en ajoute pas une huitième. */ --text-3xs: 0.66rem; --text-2xs: 0.74rem; --text-xs: 0.84rem; --text-sm: 0.92rem; --text-md: 1.05rem; --text-lg: 1.15rem; --text-btn-lg: clamp(1.02rem, 0.97rem + 0.22vw, 1.14rem); /* --- Graisses ------------------------------------------------------- Nommées, parce qu'un `700` écrit dans une règle ne dit pas s'il est un titre ou une étiquette. */ --weight-regular: 400; --weight-medium: 500; --weight-semi: 600; --weight-bold: 700; /* --- Interlignes ---------------------------------------------------- */ --leading-tight: 1.12; /* grands titres */ --leading-snug: 1.28; /* titres de section et de carte */ --leading-body: 1.65; /* texte courant, dans la fourchette 1,5-1,75 */ /* =================================================================== RYTHME D'ESPACEMENT : GRILLE DE 4 PX ------------------------------------------------------------------- Le nombre du token EST le multiple de 4 px : --space-4 vaut 4x4 px, soit 1 rem. Même convention que Tailwind, elle se lit sans documentation. N'ajoute PAS de pas intermédiaire : si une valeur ne tombe pas sur la grille, c'est la maquette qu'il faut corriger. =================================================================== */ --space-0-5: 0.125rem; /* 2 px */ --space-1: 0.25rem; /* 4 px */ --space-2: 0.5rem; /* 8 px */ --space-3: 0.75rem; /* 12 px */ --space-4: 1rem; /* 16 px */ --space-5: 1.25rem; /* 20 px */ --space-6: 1.5rem; /* 24 px */ --space-7: 1.75rem; /* 28 px */ --space-8: 2rem; /* 32 px */ --space-9: 2.25rem; /* 36 px */ --space-10: 2.5rem; /* 40 px */ --space-12: 3rem; /* 48 px */ --space-14: 3.5rem; /* 56 px */ --space-15: 3.75rem; /* 60 px */ --space-16: 4rem; /* 64 px */ --space-18: 4.5rem; /* 72 px */ --space-20: 5rem; /* 80 px */ --space-24: 6rem; /* 96 px */ /* =================================================================== ZONES TACTILES ------------------------------------------------------------------- Le doigt n'a pas la précision de la souris. DEUX planchers, deux rôles, et l'un ne remplace pas l'autre : --tap-target-min 44 px — le plancher (WCAG 2.5.5, Apple HIG) --tap-target-comfort 48 px — ce qu'exige l'audit Lighthouse ⚠️ Lighthouse ne vérifie PLUS les cibles tactiles en accessibilité : un 100 ne dit rien sur ce point. Le contrôle est MANUEL, à 375 px, pointeur tactile. Vécu sur un site voisin : 100 en accessibilité avec 21 cibles sous 44 px, dont le téléphone de la hauteur d'écran à 27 px. ⚠️ Sur CE site le téléphone est le canal principal : un bouton d'appel sous 48 px est un défaut commercial, pas un détail d'accessibilité. =================================================================== */ --tap-target-min: 44px; --tap-target-comfort: 48px; /* --- Mouvement ------------------------------------------------------- Trois vitesses, une seule courbe. Tout le site s'anime au même rythme. ⚠️ Aucune interaction ne dépend du survol : le site est conçu pour le doigt d'abord. Le survol n'ajoute que du confort. */ --duration-fast: 0.15s; /* survols, bascules d'état */ --duration-base: 0.2s; /* déplacements de cartes, ombres */ --duration-slow: 0.5s; /* apparition au défilement */ --ease: ease; /* --- Mise en page ---------------------------------------------------- */ --container: 75rem; --container-text: 46rem; /* la mesure de lecture : 65-75 signes */ --gutter: clamp(1rem, 4vw, 2rem); --section-y: clamp(2.5rem, 6.5vw, 5.25rem); --header-h: 4rem; /* --- Plan de superposition (z-index) -------------------------------- Une échelle nommée, pour qu'aucun `z-index: 9999` ne soit jamais nécessaire. */ --z-base: 1; --z-header: 100; --z-float: 110; /* pile de boutons d'appel */ --z-overlay: 200; /* menu mobile, fenêtres */ }