/* * ========================================================= * EDEN BOREAL — Design System · Palette E (Cyan nordique) * ========================================================= * Fichier centralisé des tokens de design. * Toutes les variables CSS de marque sont définies ici. * Ne jamais écrire de couleurs, tailles ou espaces "en dur" * dans les autres fichiers : toujours référencer ces variables. * * Mode sombre : * • Détection automatique via prefers-color-scheme: dark * • Toggle manuel via data-theme="dark|light" sur * • Préférence sauvegardée dans localStorage (clé : eb-theme) * • Script d'init dans (functions.php) pour éviter le flash * ========================================================= */ /* ═══════════════════════════════════════════════════════ * TOKENS MODE JOUR (défaut) * ═══════════════════════════════════════════════════════ */ :root { /* ------------------------------------------------------- * COULEURS — Fond & texte * ------------------------------------------------------- */ --eb-bg: #f2f8f8; /* Fond principal */ --eb-bg-secondary: #e0eff0; /* Fond secondaire (cartes, sections alternées) */ /* Accent — couleur principale de marque */ --eb-accent: #1a8a8a; /* Cyan profond */ --eb-accent-light: #a8dede; /* Cyan clair (fonds, hover) */ /* Texte */ --eb-text: #0a1a1c; /* Texte principal */ --eb-text-muted: #5a7a80; /* Texte secondaire, métadonnées */ /* Utilitaires */ --eb-border: #d8eaec; /* Bordures, séparateurs */ /* Blocs sombres (footer, hero dark, bannières) */ --eb-dark: #0a1a1c; --eb-dark-secondary: #0f2a2e; /* ------------------------------------------------------- * TYPOGRAPHIE * ------------------------------------------------------- */ --eb-font: 'Inter', sans-serif; --eb-font-size-base: 16px; --eb-line-height: 1.7; --eb-letter-spacing-wide: 0.12em; /* Labels, catégories, eyebrows */ /* ------------------------------------------------------- * ESPACEMENTS & FORMES * ------------------------------------------------------- */ --eb-radius: 8px; /* Bordures arrondies standard */ --eb-radius-lg: 14px; /* Cartes, modales, sections */ --eb-spacing-sm: 8px; --eb-spacing-md: 16px; --eb-spacing-lg: 32px; } /* ═══════════════════════════════════════════════════════ * TOKENS MODE SOMBRE — DÉSACTIVÉ v1 * (décommenter pour réactiver le dark mode) * ═══════════════════════════════════════════════════════ */ /* @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --eb-bg: #0a1a1c; --eb-bg-secondary: #0f2a2e; --eb-text: #e2ead8; --eb-text-muted: #a8bfba; --eb-border: #1e4448; } } [data-theme="dark"] { --eb-bg: #0a1a1c; --eb-bg-secondary: #0f2a2e; --eb-text: #e2ead8; --eb-text-muted: #a8bfba; --eb-border: #1e4448; } */ /* ═══════════════════════════════════════════════════════ * BOUTON TOGGLE JOUR/NUIT — #eb-theme-toggle * ═══════════════════════════════════════════════════════ */ #eb-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: none; border-radius: 50%; background: transparent; color: var(--eb-text); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; flex-shrink: 0; } #eb-theme-toggle:hover { background: var(--eb-bg-secondary); color: var(--eb-accent); } #eb-theme-toggle:focus-visible { outline: 2px solid var(--eb-accent); outline-offset: 2px; } /* Icône lune : visible en mode jour */ #eb-theme-toggle .eb-theme-icon--moon { display: block; } #eb-theme-toggle .eb-theme-icon--sun { display: none; } /* Icône soleil : visible en mode nuit — DÉSACTIVÉ v1 [data-theme="dark"] #eb-theme-toggle .eb-theme-icon--moon { display: none; } [data-theme="dark"] #eb-theme-toggle .eb-theme-icon--sun { display: block; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #eb-theme-toggle .eb-theme-icon--moon { display: none; } :root:not([data-theme="light"]) #eb-theme-toggle .eb-theme-icon--sun { display: block; } } */ /* ── Variante inline (dans la navigation) ── */ #eb-theme-toggle.eb-theme-toggle--inline { /* s'intègre dans le flux de la navigation */ margin-left: 4px; } /* ── Variante fixe (fallback Kadence sans container détecté) ── */ #eb-theme-toggle.eb-theme-toggle--fixed { position: fixed; top: 16px; right: 16px; z-index: 9999; background: var(--eb-bg-secondary); box-shadow: 0 2px 8px rgba(0,0,0,.2); border: 1px solid var(--eb-border); } /* ═══════════════════════════════════════════════════════ * TRANSITIONS GLOBALES JOUR/NUIT * Évite les changements brusques sur background et color. * ═══════════════════════════════════════════════════════ */ html { transition: background-color 0.25s ease, color 0.25s ease; } body { background-color: var(--eb-bg); color: var(--eb-text); } /* ═══════════════════════════════════════════════════════ * LOGOS — commutation jour / nuit * .eb-logo--light : visible en mode jour, masqué en mode nuit * .eb-logo--dark : masqué en mode jour, visible en mode nuit * ═══════════════════════════════════════════════════════ */ .eb-logo { display: block; height: auto; } /* Logo — taille initiale + transition shrink on scroll */ .eb-logo-link img { max-height: 120px; width: auto; display: block; transition: max-height 0.3s ease, opacity 0.3s ease; } /* Logo réduit après 60px de scroll */ .eb-sitenav.is-scrolled .eb-logo-link img { max-height: 72px; } /* Header — transition padding/ombre au scroll */ .eb-sitenav { transition: padding 0.3s ease, box-shadow 0.3s ease; } .eb-sitenav.is-scrolled { padding-top: 8px; padding-bottom: 8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); } /* Dark mode ombre sitenav — DÉSACTIVÉ v1 [data-theme="dark"] .eb-sitenav.is-scrolled { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .eb-sitenav.is-scrolled { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); } } */ /* Mode jour — logo cyan visible, logo blanc caché !important nécessaire : .eb-logo-link img (spécificité 0,1,1) prendrait le dessus */ .eb-logo--dark { display: none !important; } .eb-logo--light { display: block !important; } /* Mode nuit logos — DÉSACTIVÉ v1 [data-theme="dark"] .eb-logo--light { display: none !important; } [data-theme="dark"] .eb-logo--dark { display: block !important; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .eb-logo--light { display: none !important; } :root:not([data-theme="light"]) .eb-logo--dark { display: block !important; } } */