/** * E4Y — Design tokens * Extrait des maquettes Figma (E4Y_Website) et rationalisé. * Aucune valeur en dur ailleurs dans le thème : tout passe par ces variables. */ :root { /* ============================================================ 1. COULEURS DE MARQUE ============================================================ */ --e4y-green: #35726A; /* vert sauge, couleur structurante */ --e4y-orange: #C55F1A; /* orange terre, accent chaud */ --e4y-amber: #FFB000; /* jaune ambre, accent vif */ --e4y-gold: #C18B4C; /* or caramel */ --e4y-sand: #E0C5A5; /* beige moyen */ --e4y-bronze: #B38146; /* or assombri, lisible sur le sable */ --e4y-taupe: #AC9D90; /* gris chaud, 5e pastille du parcours */ --e4y-cream: #F7F0E2; /* beige clair, fond de page */ --e4y-off-white: #FAFAFA; /* blanc cassé */ --e4y-white: #FFFFFF; --e4y-grey-100: #F4F4F6; /* gris très clair */ --e4y-grey-300: #D9D9D9; /* gris séparateur */ /* Overlays */ --e4y-overlay-dark: rgba(0, 0, 0, 0.70); /* lisibilité des hero */ --e4y-overlay-light: rgba(235, 235, 235, 0.25); /* ============================================================ 2. COULEURS SÉMANTIQUES Utiliser celles-ci dans les composants, jamais celles du bloc 1. ============================================================ */ --color-bg: var(--e4y-cream); --color-bg-alt: var(--e4y-white); --color-bg-inverse: var(--e4y-green); /* Fond très pâle des sections « Nos actions » et FAQ : Figma n'introduit pas de teinte nouvelle, c'est le vert de marque posé à 10 % sur du blanc. */ --color-bg-tint: color-mix(in srgb, var(--e4y-green) 10%, transparent); /* Les pages pays appuient la même teinte : l'ellipse du coup de cœur et des animations (node 51:348) est mesurée à 20 % du vert sur du blanc. */ --color-bg-tint-fort: color-mix(in srgb, var(--e4y-green) 20%, transparent); /* Même couleur que --color-bg-tint posée sur du blanc, mais opaque : il faut un aplat quand la teinte doit recouvrir autre chose que le fond de page, par exemple la photo de la FAQ en mobile. */ --color-bg-tint-plein: color-mix(in srgb, var(--e4y-green) 10%, var(--e4y-white)); --color-surface: var(--e4y-white); --color-surface-warm: var(--e4y-sand); --color-text: var(--e4y-green); --color-text-body: #2B2B2B; --color-text-muted: #6B6B6B; --color-text-inverse: var(--e4y-off-white); --color-accent: var(--e4y-orange); --color-accent-alt: var(--e4y-amber); --color-border: var(--e4y-grey-300); /* Champs de saisie posés sur un aplat de couleur : Figma n'introduit pas de teinte nouvelle, c'est du blanc à 50 % qui laisse passer le fond. */ --color-champ-sur-aplat: color-mix(in srgb, var(--e4y-white) 50%, transparent); /* Variantes de carte : le composant card accepte ces déclinaisons */ --card-orange-bg: var(--e4y-orange); --card-amber-bg: var(--e4y-amber); --card-gold-bg: var(--e4y-gold); --card-sand-bg: var(--e4y-sand); --card-taupe-bg: var(--e4y-taupe); --card-green-bg: var(--e4y-green); /* ============================================================ 3. TYPOGRAPHIE ATTENTION — familles à confirmer avec la direction artistique. HomepageBaukasten est la police interne de Figma : sa présence dans les maquettes indique une substitution automatique, pas un choix de design. Les fichiers webfont sous licence sont à obtenir avant intégration définitive. ÉTAT AU 05/08/2026, vérifié sur les fichiers de assets/fonts/ : Eigerdals complète et branchée sur --font-display. Regular, Medium et Bold, 406 glyphes chacune, capitales et accentuées françaises ; fût du « I » à 95, 124 et 153 pour 1000 d'em. À savoir en lisant la maquette : le poste du designer a la même démo tronquée. Figma y substitue HomepageBaukasten lettre par lettre — « A LA UNE » y est composé en Eigerdals sauf le L, le N et le E. Toute mention de HomepageBaukasten dans le fichier Figma est donc une rustine, pas un choix. Gotham complet (637 glyphes). Figma s'en sert pour les titres des cartes Actions ; --font-numeric n'est encore utilisé nulle part, à brancher une fois la charte tranchée. Nunito Sans variable et complète (939 glyphes, axes wght/wdth/opsz). HomepageBaukasten complet pour le français (223 glyphes), mais c'est la substitution de Figma, pas une police de marque. ============================================================ */ --font-display: 'Eigerdals', 'HomepageBaukasten', system-ui, sans-serif; /* titres */ --font-body: 'HomepageBaukasten', system-ui, sans-serif; /* corps */ --font-ui: 'Nunito Sans', system-ui, sans-serif; /* nav, boutons */ --font-accent: 'Eigerdals', 'Nunito Sans', sans-serif; /* titres de cartes */ --font-numeric: 'Gotham', 'Nunito Sans', sans-serif; /* chiffres clés */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 900; /* Échelle fluide : la valeur s'adapte entre 375px et 1440px de viewport. Évite d'avoir à redéclarer chaque taille dans les media queries. */ --fs-hero: clamp(2.25rem, 1.20rem + 4.50vw, 4.00rem); /* 36 → 64 */ --fs-h1: clamp(1.88rem, 1.10rem + 3.30vw, 3.00rem); /* 30 → 48 */ --fs-h2: clamp(1.50rem, 1.00rem + 2.15vw, 2.25rem); /* 24 → 36 */ --fs-h3: clamp(1.25rem, 1.00rem + 1.05vw, 1.50rem); /* 20 → 24 */ --fs-lead: clamp(1.06rem, 0.95rem + 0.50vw, 1.25rem); /* 17 → 20 */ --fs-body: 1rem; /* 16 */ --fs-small: 0.875rem; /* 14 */ --fs-caption: 0.75rem; /* 12 */ /* Chiffres clés : très gros, mais doivent rester lisibles en colonne */ --fs-stat: clamp(1.75rem, 1.10rem + 2.80vw, 2.75rem); /* 28 → 44 */ --lh-tight: 1.10; /* hero, grands titres */ --lh-heading: 1.25; /* titres de section et de carte */ --lh-body: 1.55; /* paragraphes */ --ls-tight: -0.01em; --ls-normal: 0; --ls-wide: 0.08em; /* titres de section en capitales */ --ls-button: 0.02em; /* ============================================================ 4. ESPACEMENTS — base 4px ============================================================ */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 5rem; /* 80 */ --space-10: 6rem; /* 96 */ --space-11: 8rem; /* 128 */ /* Rythme vertical des sections, fluide */ --section-gap: clamp(3rem, 2rem + 4vw, 6rem); --section-gap-lg: clamp(4rem, 2.5rem + 6vw, 8rem); /* ============================================================ 5. MISE EN PAGE ============================================================ */ --container-max: 1430px; /* 1440 moins 2 × 104 de marge */ --container-narrow: 880px; /* blocs de texte, citations */ /* Sous-titres de section. Figma les coupe sur une largeur mesurée à 899 px, mais avec sa propre police ; HomepageBaukasten — notre substitution — rend environ 4,5 % plus large et repoussait une ligne de trop. 940 px rétablit le découpage de la maquette sur les trois textes concernés. */ --container-soustitre: 940px; --container-citation: 1315px; /* Figma : bloc de citation centré */ /* 6,94vw = les 100 px que Figma laisse à 1440, sur toutes ses pages : logo à 110, titres de section à 97-100, cartes à 101. À 3,5vw la marge n'en faisait que 58 et tout le contenu était 84 px trop large. */ --gutter: clamp(1.25rem, 6.94vw, 6.5rem); /* 20 → 104, 100 à 1440 */ --grid-gap: clamp(1rem, 0.5rem + 1.5vw, 2rem); --header-height: 148px; /* Figma : bandeau de 148 px */ --header-height-mob: 64px; /* Hauteur réduite une fois la page défilée : à 148 px, un header collant mangerait un sixième de l'écran en permanence. */ --header-height-scrolled: 88px; /* Courbe qui ferme la zone crème. Figma pose une ellipse de 2427 × 2383 px sur une page de 1440 : on n'en voit que la portion centrale du bas, d'où une courbe encore douce sur les bords. La reproduire suppose un élément plus large que la page (168.5 %) que l'on rogne ensuite. Flèche au centre ≈ 19,5 % du rayon vertical, soit ~232 px à 1440 px. */ --courbe-largeur: 168.5%; --courbe-rayon: clamp(300px, 82.7vw, 1240px); /* Sur un écran étroit, ce rayon creuse la courbe de 65 px sur les bords et la zone teintée prend l'allure d'un dôme. Figma 01_MOB n'en creuse qu'une trentaine : d'où un rayon propre au mobile. */ --courbe-rayon-mob: 145px; /* Flèche de cet arc au bord de l'écran, c'est-à-dire de combien son sommet domine ses extrémités. Elle ne dépend pas de la largeur du viewport : le rapport entre le demi-écran et le demi-grand-axe vaut toujours 0,5 / 0,8425, d'où une flèche constante de 145 × (1 − √(1 − 0,3522)). Sert à faire chevaucher deux blocs pour qu'aucun croissant blanc ne s'ouvre entre une bordure droite et l'arc qui la suit. */ --courbe-fleche-mob: calc(var(--courbe-rayon-mob) * 0.195); /* ============================================================ 6. RAYONS ============================================================ */ --radius-sm: 5px; /* boutons, tags */ --radius-md: 8px; --radius-lg: 13px; /* cartes, valeur dominante */ --radius-xl: 20px; /* grandes cartes */ --radius-xxl: 27px; /* photos du coup de cœur et de la mosaïque animations */ --radius-full: 9999px; /* pastilles, médaillons circulaires */ /* Anneau segmenté — épaisseur du trait, en unités viewBox (viewBox = 0 0 100 100). Cette valeur est aussi utilisée par le PHP de template-parts/components/anneau.php : modifier les deux fichiers ensemble. */ --ring-stroke: 4; /* Blanc entre le trait et le contenu central — mesuré sur l'anneau Figma (16:455) : trait 4 u, blanc 4.9 u, soit un retrait total de 8.9 % du diamètre. */ --ring-gap: 4.9; /* ============================================================ 7. OMBRES ET TRANSITIONS ============================================================ */ --shadow-sm: 0 1px 3px rgba(53, 114, 106, 0.08); --shadow-md: 0 4px 16px rgba(53, 114, 106, 0.12); --shadow-lg: 0 8px 32px rgba(53, 114, 106, 0.16); --ease: cubic-bezier(0.4, 0, 0.2, 1); --duration: 240ms; /* Révélations au défilement : décélération franche puis arrêt très doux, qui donne un mouvement posé là où --ease paraîtrait mécanique. */ --ease-sortie: cubic-bezier(0.16, 1, 0.3, 1); --duration-lente: 700ms; --anim-decalage: 90ms; /* écart entre deux éléments d'un même groupe */ /* Temps mort avant les animations d'ouverture : sans lui, elles se jouent pendant que la page peint encore et personne ne les voit. */ --anim-attente: 250ms; /* Décompte des chiffres clés. Plus long que --duration-lente : un nombre qui défile doit se lire pendant qu'il monte, sinon le geste passe pour un scintillement. Lu par main.js, qui ne connaît aucune durée en propre. */ --anim-compteur: 1400ms; /* ============================================================ 8. DIVERS ============================================================ */ --z-header: 100; --z-overlay: 200; --z-modal: 300; --focus-ring: 2px solid var(--e4y-orange); } /* ============================================================== POINTS DE RUPTURE (pour mémoire, à utiliser dans les composants) -------------------------------------------------------------- Mobile : jusqu'à 767px (référence : 01_MOB_E4Y_Accueil) Tablette : 768px à 1199px Desktop : 1200px et plus (référence : 01_WEB_E4Y_Accueil) Les custom properties ne fonctionnent pas dans les media queries, d'où ce simple rappel en commentaire. ============================================================== */ /* Respect des préférences système */ @media (prefers-reduced-motion: reduce) { :root { --duration: 0ms; } }