/* ========================================================================= UCP — 01 · JETONS DE DESIGN (design tokens) ------------------------------------------------------------------------- La seule source de vérité pour les couleurs, la typo et les espacements. Si vous voulez changer le vert de la marque partout sur le site, c'est ici, sur une seule ligne. Nulle part ailleurs. ========================================================================= */ :root { /* --------------------------------------------------------------------- 1. PALETTE BRUTE Les valeurs telles quelles. On ne les utilise presque jamais directement dans les composants : on passe par les jetons sémantiques de la section 2. --------------------------------------------------------------------- */ /* Crèmes et sables — les fonds clairs */ --ucp-cream: #F4EFE7; /* fond principal du site */ --ucp-white: #FFFFFF; /* fond des cartes et sections alternées */ --ucp-sand-200: #E3DBCC; /* bordures et filets discrets */ --ucp-sand-300: #C9BFA8; /* bordures de champs de formulaire */ --ucp-sand-400: #A99B7E; /* placeholders, texte désactivé */ /* Encres et nuits — les fonds sombres */ --ucp-ink: #1A1A1A; /* texte courant */ --ucp-night: #1E1E20; /* sections sombres, hero, CTA */ --ucp-night-800: #26262A; --ucp-night-700: #3C3C42; /* Vert forêt — la couleur de marque */ --ucp-forest: #1F4332; --ucp-forest-600: #2A5A43; /* survol */ --ucp-forest-900: #1A2118; /* fond du pied de page */ /* Or — l'accent, jamais pour du texte courant */ --ucp-gold: #D4AF37; --ucp-gold-200: #EBD08A; /* or clair, sur fond vert foncé */ /* Brun terre — les sur-titres et les détails chauds */ --ucp-bark: #7A4E2E; /* Taupes — les textes secondaires */ --ucp-taupe: #5C5147; /* Ardoise — variante froide (voir .ucp-theme-slate en section 4) */ --ucp-slate-600: #2E2E33; --ucp-slate-400: #5A5A62; /* --------------------------------------------------------------------- 2. JETONS SÉMANTIQUES Ce que les composants consomment réellement. Un composant ne demande jamais « du #1F4332 », il demande « la couleur de marque ». --------------------------------------------------------------------- */ --ucp-bg: var(--ucp-cream); --ucp-bg-alt: var(--ucp-white); --ucp-bg-dark: var(--ucp-night); --ucp-bg-brand: var(--ucp-forest); --ucp-bg-footer: var(--ucp-forest-900); --ucp-text: var(--ucp-ink); --ucp-text-muted: var(--ucp-taupe); --ucp-text-invert: var(--ucp-cream); --ucp-text-invert-dim: rgba(244, 239, 231, 0.72); --ucp-brand: var(--ucp-forest); --ucp-brand-hover: var(--ucp-forest-600); --ucp-accent: var(--ucp-gold); --ucp-accent-soft: var(--ucp-gold-200); --ucp-accent-warm: var(--ucp-bark); /* sur-titres, petits labels */ --ucp-border: var(--ucp-sand-200); --ucp-border-strong: var(--ucp-sand-300); --ucp-border-invert: rgba(212, 175, 55, 0.25); /* Halo doré radial présent sur toutes les sections sombres. */ --ucp-glow: radial-gradient(circle, rgba(212, 175, 55, 0.15) 0%, transparent 62%); /* --------------------------------------------------------------------- 3. TYPOGRAPHIE Deux familles seulement : une sans-serif neutre pour le corps, une serif italique pour les accents. Les tailles sont fluides (clamp) : elles se réduisent toutes seules sur mobile, sans media query. --------------------------------------------------------------------- */ --ucp-font-sans: 'Helvetica Neue', Helvetica, Arial, 'Segoe UI', Roboto, system-ui, sans-serif; --ucp-font-serif: Georgia, 'Times New Roman', Times, serif; /* Échelle fluide — les bornes correspondent aux maquettes desktop. */ --ucp-fs-hero: clamp(2.25rem, 1.15rem + 4.6vw, 4.25rem); /* 36 → 68 px */ --ucp-fs-h1: clamp(2rem, 1.15rem + 3.5vw, 3.5rem); /* 32 → 56 px */ --ucp-fs-h2: clamp(1.75rem, 1.20rem + 2.3vw, 2.75rem); /* 28 → 44 px */ --ucp-fs-h3: clamp(1.375rem,1.10rem + 1.1vw, 1.75rem); /* 22 → 28 px */ --ucp-fs-h4: clamp(1.125rem,1.00rem + 0.5vw, 1.5rem); /* 18 → 24 px */ --ucp-fs-h5: 1.1875rem; /* 19 px */ --ucp-fs-lead: clamp(1rem, 0.93rem + 0.35vw, 1.1875rem); /* 16 → 19 px */ --ucp-fs-body: 0.9375rem; /* 15 px */ --ucp-fs-sm: 0.8125rem; /* 13 px */ --ucp-fs-xs: 0.75rem; /* 12 px */ --ucp-fs-eyebrow: 0.6875rem; /* 11 px */ --ucp-fs-micro: 0.625rem; /* 10 px */ --ucp-lh-tight: 1.05; /* titres hero */ --ucp-lh-heading: 1.18; /* h2 / h3 */ --ucp-lh-body: 1.65; /* paragraphes */ --ucp-lh-loose: 1.75; /* listes du pied de page */ --ucp-ls-hero: -0.03em; --ucp-ls-heading: -0.02em; --ucp-ls-eyebrow: 0.28em; /* les sur-titres très espacés de la maquette */ --ucp-ls-label: 0.15em; --ucp-fw-normal: 400; --ucp-fw-medium: 500; --ucp-fw-semi: 600; --ucp-fw-bold: 700; --ucp-fw-black: 800; /* --------------------------------------------------------------------- 4. ESPACEMENTS ET GABARIT --------------------------------------------------------------------- */ --ucp-space-2: 0.5rem; /* 8 px */ --ucp-space-3: 0.75rem; /* 12 px */ --ucp-space-4: 1rem; /* 16 px */ --ucp-space-5: 1.25rem; /* 20 px */ --ucp-space-6: 1.5rem; /* 24 px */ --ucp-space-8: 2rem; /* 32 px */ --ucp-space-10: 2.75rem; /* 44 px */ --ucp-space-12: 3rem; /* 48 px */ /* Rythme vertical des sections et marge latérale : fluides eux aussi. */ --ucp-section-y: clamp(3.5rem, 7vw, 6rem); /* 56 → 96 px */ --ucp-gutter: clamp(1.25rem, 4vw, 2.5rem);/* 20 → 40 px */ /* Rembourrage intérieur des encadrés : liste d'atouts, programme jour par jour, colonnes inclus et non inclus. Fluide, et pour une raison précise. Ce rembourrage s'ajoute à la marge de la page : 24 px de cadre derrière 20 px de marge, et le texte d'un encadré rentre de 44 px quand le paragraphe voisin est à 20. Sur un écran de téléphone, deux alignements différents dans la même colonne se voient immédiatement. À 16 px sur téléphone et 24 sur grand écran, les encadrés restent des encadrés sans décrocher du reste du texte. En variable et non en media query : une valeur fluide ne peut pas être oubliée dans un point de rupture, et n'a pas à batailler de spécificité avec les règles de Divi qui ciblent ces listes par identifiant. */ --ucp-card-pad: clamp(1rem, 3vw, 1.5rem); /* 16 → 24 px */ --ucp-max: 1280px; /* grilles catalogue, pied de page */ --ucp-max-narrow: 880px; /* formulaire, étapes de méthode */ --ucp-max-text: 760px; /* blocs de texte centrés, lisibilité */ /* --------------------------------------------------------------------- 5. TRAITS, OMBRES, MOUVEMENT L'identité UCP est à angles vifs : le rayon par défaut est 0. --------------------------------------------------------------------- */ --ucp-radius: 0; --ucp-radius-pill: 40px; /* uniquement la barre de recherche */ --ucp-shadow-card: 0 12px 28px rgba(30, 30, 32, 0.14); --ucp-shadow-lift: 0 12px 28px rgba(30, 30, 32, 0.12); --ucp-transition: 0.18s ease; --ucp-transition-slow: 0.42s cubic-bezier(0.4, 0, 0.2, 1); /* Le filet doré qui ouvre chaque hero et chaque sur-titre. */ --ucp-rule-w: 50px; --ucp-rule-h: 3px; } /* ========================================================================= VARIANTE ARDOISE ------------------------------------------------------------------------- Les maquettes du Carnet (blog) utilisent une déclinaison froide : gris ardoise au lieu du vert forêt et du brun. Plutôt que de dupliquer tout le CSS, on redéfinit les jetons sémantiques sur un conteneur. Usage dans Divi : mettre `ucp-theme-slate` dans le champ « Classe CSS » d'une Section (onglet Avancé). Tous les composants à l'intérieur basculent. Tant que la question « le blog reste-t-il gris ou passe-t-il au vert ? » n'est pas tranchée, cette classe permet de tester les deux en une seconde. ========================================================================= */ .ucp-theme-slate { --ucp-brand: var(--ucp-slate-600); --ucp-brand-hover: #45454C; --ucp-bg-brand: var(--ucp-slate-600); --ucp-accent-warm: var(--ucp-slate-400); }