/* ===================================================================== Only Way Déménagement — Design Tokens "Bleu Logistique" POINT DE VÉRITÉ UNIQUE du thème. Modifier ici = re-thémer tout le site. Structure IDENTIQUE à celle de web_garden (mêmes noms de tokens, mêmes deux échelles typographiques, même grille de 4 px, mêmes trois vitesses) : un développeur qui connaît un site connaît l'autre. SEULES LES COULEURS CHANGENT : bleu nuit + bleu moyen + accent ambre, au lieu du vert et du lime du jardin. Une seule différence de nomenclature, volontaire : le jardin appelait `--lime` son accent vif. Un nom de couleur ne survit pas à un changement de palette. Ici le token porte son RÔLE : `--highlight`, l'accent vif posé sur fond sombre. Idem pour `--shadow-highlight`. Thème clair uniquement. Convention couleur : OKLCH. Contrastes vérifiés : texte courant 14,3:1 (AAA), texte secondaire 6,0:1, liens et boutons 6,3:1, ambre sur bleu nuit 7,7:1. Aucun couple sous AA. ===================================================================== */ /* --- Polices auto-hébergées (100% hors-ligne) ------------------------ */ /* Mêmes familles que le jardin : c'est la signature typographique de la marque, elle ne change pas d'une activité à l'autre. */ @font-face { font-family: "Bricolage Grotesque"; src: url("../assets/fonts/Bricolage-var.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; } @font-face { font-family: "Hanken Grotesk"; src: url("../assets/fonts/Hanken-var.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } :root { /* --- Couleurs de marque ------------------------------------------- */ /* Bleu nuit profond : titres, aplats, header. Le code du secteur. */ --primary: oklch(0.30 0.075 258); /* ≈ #142d53 */ --primary-foreground: oklch(0.985 0.006 250); /* Bleu moyen : boutons, liens, icônes (AA sur fond clair ET sur carte) */ --primary-mid: oklch(0.47 0.13 255); /* ≈ #1e5ba1 */ /* Bleu-gris clair : détails discrets */ --primary-soft: oklch(0.62 0.045 252); /* ≈ #7388a1 */ /* CTA principal sur fond clair = bleu moyen (jamais l'ambre : sur fond clair l'ambre ne tient pas le contraste d'un texte). */ --accent: oklch(0.47 0.13 255); --accent-foreground: oklch(0.985 0.006 250); /* Accent ambre : highlights sur fond bleu nuit UNIQUEMENT. C'est l'équivalent structurel du `--lime` du jardin. */ --highlight: oklch(0.82 0.15 75); /* ≈ #fcb442 */ /* Boutons WhatsApp (vert WhatsApp assombri pour lisibilité AA) */ --whatsapp: oklch(0.52 0.15 150); --whatsapp-foreground: oklch(0.99 0.005 150); /* --- Neutres : BLANC FROID ---------------------------------------- */ /* Le jardin est sur un crème chaleureux. Le déménagement est sur un blanc légèrement bleuté : registre propre, net, logistique. */ --background: oklch(0.972 0.008 250); /* ≈ #f2f6fb */ --foreground: oklch(0.26 0.03 258); /* bleu-anthracite */ --card: oklch(1 0 0); /* cartes blanches */ --card-foreground: oklch(0.26 0.03 258); --muted: oklch(0.945 0.012 250); /* ≈ #e7eef5 */ --muted-foreground: oklch(0.48 0.028 255); --border: oklch(0.89 0.013 250); --input: oklch(0.87 0.015 250); --ring: oklch(0.47 0.13 255); /* --- États -------------------------------------------------------- */ --success: oklch(0.55 0.12 150); --destructive: oklch(0.55 0.20 27); /* Voiles : fenêtres de services, calques posés sur une image */ --overlay: oklch(0.2 0.04 258 / 0.6); --overlay-soft: color-mix(in oklab, oklch(0 0 0) 20%, transparent); /* --- Formes / rayons --------------------------------------------- */ --radius: 0.75rem; --radius-card: 1.25rem; --radius-pill: 9999px; /* --- Ombres douces ------------------------------------------------ */ --shadow-sm: 0 1px 2px oklch(0.26 0.03 258 / 0.06); --shadow-md: 0 8px 24px oklch(0.26 0.03 258 / 0.09); --shadow-lg: 0 20px 50px oklch(0.26 0.03 258 / 0.13); /* Ombre teintée du bouton d'envoi, et anneau de focus des champs */ --shadow-highlight: 0 6px 16px color-mix(in oklab, var(--highlight) 42%, transparent); --shadow-highlight-hover: 0 9px 22px color-mix(in oklab, var(--highlight) 55%, transparent); --shadow-focus: 0 0 0 3px color-mix(in oklab, var(--ring) 22%, transparent); /* --- Typographie -------------------------------------------------- */ --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif; /* ÉCHELLE DE DOCUMENT, fluide : titres et corps de texte. Elle grandit avec l'écran (clamp min .. max). */ --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); /* hero */ /* ÉCHELLE D'INTERFACE, fixe : libellés, boutons, badges, titres de cartes, notes. Volontairement NON fluide : un bouton ou une étiquette ne doit pas grandir avec la largeur de l'écran. Sept valeurs, pas huit. N'en ajoute pas sans raison. */ --text-3xs: 0.66rem; /* petites capitales du logo */ --text-2xs: 0.74rem; /* badges, pastilles, barre mobile */ --text-xs: 0.84rem; /* mentions de bas de page */ --text-sm: 0.92rem; /* texte secondaire, libellés, contrôles compacts */ --text-md: 1.05rem; /* texte secondaire appuyé, marque */ --text-lg: 1.15rem; /* titres de cartes */ --text-xl: 1.40rem; /* gros chiffres (numéros d'étapes) */ /* Le seul texte d'interface fluide : les grands CTA. */ --text-btn-lg: clamp(1.02rem, 0.97rem + 0.22vw, 1.14rem); /* --- 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 et la plupart des design systems, elle se lit sans documentation. N'ajoute PAS de pas intermédiaire. Si une valeur ne tombe pas sur la grille, c'est presque toujours la maquette qu'il faut corriger, pas la grille qu'il faut élargir. */ --space-0-5: 0.125rem; /* 2 px, interlignes de listes serrées */ --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-10: 2.5rem; /* 40 px */ /* ⚠️ L'ECHELLE S'ARRETAIT A 2.5rem, et les trois sites avaient besoin de plus haut : des espacements etaient ecrits en dur alors qu'ils tombaient PILE sur la grille de 4 px. Ce n'etait pas une faute dans les feuilles, c'etait un trou dans l'echelle. Le nom suit la meme regle : N = valeur / 0.25rem. */ --space-9: 2.25rem; /* 36 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 */ /* --- 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). Liens de texte, champs, cases, boutons secondaires, sélecteur de langue. --tap-target-comfort 48 px — ce qu'exige l'audit Lighthouse « tap targets ». Boutons principaux et résumés de FAQ. Le SEO 100 en dépend. ⚠️ Lighthouse ne vérifie PLUS les cibles tactiles dans la catégorie accessibilité : un 100 ne dit rien sur ce point. Mesuré sur ce site le 12/08/2026, à 375 px, AVANT correction : 12 cibles sous 44 px, dont le téléphone du hero (27 px) et 10 liens de pied (19 px). */ --tap-target-min: 44px; --tap-target-comfort: 48px; /* --- Mouvement ----------------------------------------------------- Trois vitesses, une seule courbe. Tout le site s'anime au même rythme. */ --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; /* Délai de grâce des menus déroulants : le temps laissé à la souris pour descendre du bouton vers le sous-menu sans qu'il se referme. Ramené de 0,3 s à 0,18 s le 28/07 : le pont invisible sous le bouton couvre déjà le trajet, et à 0,3 s la fermeture se voyait, le menu semblait coller au curseur. */ --delay-hover-grace: 0.18s; /* --- Mise en page ------------------------------------------------- */ --container: 75rem; --gutter: clamp(1rem, 4vw, 2rem); /* Rythme vertical des sections. Resserre le 28/07 : la valeur precedente, clamp(2.5rem, 6.5vw, 5.25rem), donnait 84 px en haut ET en bas, soit 168 px entre deux sections sur un ecran de bureau. La page respirait surtout du vide. 60 px de chaque cote suffisent a separer deux blocs quand l'un des deux porte deja un fond `--muted`. */ --section-y: clamp(2rem, 4.5vw, 3.75rem); --header-h: 4rem; /* --- Plan de superposition (z-index) ------------------------------ */ --z-header: 100; --z-mobilebar: 110; --z-overlay: 200; }