/* ===================================================================== Ecodesign 5.0 — Variables de la charte graphique (site web) v1.1 — 12/10/2026 (ajouts pour le site v0.2 : nuit, grands formats) Couleurs relevées au pixel sur les logos officiels (dossier « Logos eco design »). Ce fichier est la référence : le site doit l'importer, pas recopier les valeurs. ===================================================================== */ :root { /* ---------- Couleurs de marque (identiques aux logos) ---------- */ --ed-marine: #1A4263; /* rgb(26, 66, 99) — 10.5:1 sur blanc */ --ed-bleu: #1D7399; /* rgb(29, 115, 153) — 5.3:1 sur blanc */ --ed-ciel: #20A3CE; /* rgb(32, 163, 206) — 2.9:1 : décor seulement */ --ed-vert: #5AA13D; /* rgb(90, 161, 61) — 3.2:1 : texte >= 24 px seulement */ /* Dégradé signature (filet sous le logo complet) */ --ed-degrade: linear-gradient(90deg, #1A4263 0%, #20A3CE 50%, #5AA13D 100%); /* Sur fond marine, le dégradé part du bleu clair (le marine s'y confondrait) */ --ed-degrade-sombre: linear-gradient(90deg, #20A3CE 0%, #5AA13D 100%); /* ---------- Variantes fonctionnelles (dérivées, accessibles) ---------- */ --ed-marine-fonce: #123450; /* survol des éléments marine — 12.9:1 */ --ed-nuit: #0D2233; /* fonds les plus sombres (héros, pied de page) — 16.4:1 */ --ed-vert-fonce: #407D24; /* boutons d'action, texte vert — 5.0:1 */ --ed-vert-fonce-2: #32671A; /* survol bouton vert — 6.8:1 */ /* ---------- Teintes claires (fonds d'encadrés, de cartes) ---------- */ --ed-marine-100: #EBEFF2; --ed-marine-200: #D3DBE2; --ed-ciel-50: #F0F8FB; --ed-ciel-100: #DDEFF7; --ed-ciel-texte: #B3E3F4; /* petits textes bleu clair sur fond sombre — 7.6:1 sur marine */ --ed-ciel-clair: #58BADA; /* ciel du logo éclairci : petit texte bien bleu sur fond sombre — 4.7:1 sur marine */ --ed-vert-50: #F2F8F0; --ed-vert-100: #E1EEDD; /* ---------- Neutres (gris teintés de marine) ---------- */ --ed-encre: #243749; /* texte courant — 12.2:1 */ --ed-gris: #566574; /* texte secondaire — 6.0:1 */ --ed-gris-champ: #7D8892; /* bordure des champs de formulaire — 3.6:1 */ --ed-filet: #D8DFE6; /* séparateurs, bordures de cartes */ --ed-surface: #F4F7FB; /* fond de section alterné */ --ed-blanc: #FFFFFF; /* ---------- Couleurs d'état (formulaire) ---------- */ --ed-succes: var(--ed-vert-fonce); --ed-succes-fond: var(--ed-vert-50); --ed-erreur: #B42318; /* 6.6:1 */ --ed-erreur-fond: #FEF3F2; --ed-alerte: #B54708; /* 5.4:1 */ --ed-alerte-fond: #FFFAEB; --ed-info: var(--ed-bleu); --ed-info-fond: var(--ed-ciel-50); /* ---------- Rôles : ce que le site utilise ---------- */ --color-bg: var(--ed-blanc); --color-surface: var(--ed-surface); --color-surface-dark: var(--ed-marine); --color-text: var(--ed-encre); --color-text-muted: var(--ed-gris); --color-text-on-dark: var(--ed-blanc); --color-heading: var(--ed-marine); --color-link: var(--ed-bleu); --color-link-hover: var(--ed-marine); --color-border: var(--ed-filet); --color-border-input: var(--ed-gris-champ); --color-focus: var(--ed-bleu); --color-cta: var(--ed-vert-fonce); --color-cta-hover: var(--ed-vert-fonce-2); --color-primary: var(--ed-marine); --color-primary-hover: var(--ed-marine-fonce); --color-environnement: var(--ed-vert); /* code couleur des schémas */ --color-resilience: var(--ed-ciel); --color-industrie: var(--ed-marine); /* ---------- Typographie ---------- */ --font-titre: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif; --font-texte: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif; /* Tailles fluides : mobile (375 px) → bureau (1280 px) */ --fs-affiche: clamp(2.5rem, 0.9rem + 5vw, 6.25rem); /* 40 → 100, titres d'accueil en capitales */ --fs-geant: clamp(2.25rem, 1rem + 3.4vw, 4.5rem); /* 36 → 72, titres de page */ --fs-chiffre: clamp(2.5rem, 1.6rem + 3.6vw, 4rem); /* 40 → 64 */ --fs-h1: clamp(2.125rem, 1.6rem + 2.2vw, 3rem); /* 34 → 48 */ --fs-h2: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem); /* 28 → 36 */ --fs-h3: clamp(1.3125rem, 1.15rem + 0.6vw, 1.5rem); /* 21 → 24 */ --fs-h4: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem); /* 18 → 20 */ --fs-chapeau: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);/* 19 → 22 */ --fs-texte: clamp(1.0625rem, 1.02rem + 0.2vw, 1.125rem);/* 17 → 18 */ --fs-petit: 0.9375rem; /* 15 */ --fs-legende: 0.8125rem; /* 13 */ --fs-surtitre: 0.8125rem; /* 13, capitales */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --lh-titre: 1.15; --lh-texte: 1.6; --ls-titre: -0.01em; --ls-surtitre: 0.14em; /* capitales espacées, comme la signature du logo */ --mesure: 68ch; /* longueur de ligne maximale du texte courant */ /* ---------- Espacements (base 4 px) ---------- */ --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: 6rem; /* 96 */ /* ---------- Formes ---------- */ --radius-s: 6px; /* boutons, champs */ --radius-m: 12px; /* cartes */ --radius-l: 20px; /* grands panneaux */ --radius-xl: 28px; /* grandes cartes visuelles */ --radius-pill: 999px; --biseau: 12px; /* coin coupé à 45°, repris du D et du 5 du logo */ --shadow-s: 0 1px 2px rgb(26 66 99 / 0.08), 0 1px 3px rgb(26 66 99 / 0.06); --shadow-m: 0 4px 14px rgb(26 66 99 / 0.10); --shadow-l: 0 14px 36px rgb(26 66 99 / 0.14); /* ---------- Mise en page ---------- */ --container: 1200px; --gutter: clamp(1rem, 4vw, 2rem); --container-large: 2200px; /* site : toute la largeur de l'écran, jusqu'à 2200 px */ --gutter-large: clamp(1rem, 3.2vw, 3.5rem); /* ---------- Mouvement ---------- */ --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --duree: 180ms; }