/* ========================================================================== Design tokens — Partenariat de Ouagadougou -------------------------------------------------------------------------- Source : maquette « Partenariat Ouagadougou-11 », direction « organique » (valeur par défaut enregistrée dans l'export), avec les deux arbitrages client de fin de feuille : cartes à angles droits et kickers masqués. Cette feuille ne contient que des variables : elle ne produit aucun style et peut donc être chargée sans risque à côté de l'existant. Les composants de la refonte doivent consommer ces variables plutôt que des valeurs en dur. ========================================================================== */ :root { /* ---- Couleurs de marque -------------------------------------------- */ --po-navy: #21265D; --po-navy-700: #2c3372; --po-navy-900: #161a40; --po-gold: #DCA63F; --po-gold-600: #c8902a; --po-gold-200: #f0d99a; --po-gold-050: #faf2dd; --po-cream: #F6F3EC; --po-paper: #ffffff; --po-ink: #1b1f33; --po-muted: #5a607a; --po-line: rgba(33, 38, 93, 0.12); /* ---- Composantes RGB des couleurs de marque ------------------------- Les voiles, ombres et transparences ont besoin de la couleur ET d'un alpha. Sans ces variables, chaque règle réécrivait le marine à la main — 107 occurrences dans les feuilles de la refonte, autant d'endroits à retrouver le jour où la charte bouge. Elles s'écrivent désormais rgb(var(--po-navy-900-rgb) / .66). */ --po-navy-rgb: 33 38 93; --po-navy-900-rgb: 22 26 64; --po-gold-rgb: 220 166 63; --po-white-rgb: 255 255 255; --po-ink-800-rgb: 26 29 46; /* ---- Nuances complémentaires ---------------------------------------- Elles existaient déjà dans les feuilles, en valeurs isolées : les nommer ici est la condition pour que « la même couleur » veuille dire la même chose d'une page à l'autre. */ --po-white: #ffffff; --po-navy-800: #20254f; /* dégradés marine (carte de contact) */ --po-navy-950: #0f122d; /* ombre portée de l'en-tête */ --po-navy-950-rgb: 15 18 45; --po-navy-050: #e8ecf8; /* pastilles claires sur fond papier */ --po-blue-veil-rgb: 33 55 120; /* voile bleuté des heros, repris de l'accueil */ --po-blue-glow-rgb: 60 88 172; /* halo des heros sans photo */ --po-gold-light: #e7b450; /* survol et fin de dégradé doré */ --po-gold-deep: #b98625; --po-ink-800: #1a1d2e; --po-line-soft: #eceef3; --po-grey-050: #f0f0f2; --po-grey-500: #8b8f9c; /* ---- États ----------------------------------------------------------- */ --po-state-ok-bg: #e7f5ee; --po-state-ok-ink: #1f7a4d; --po-state-error: #a63b3b; --po-state-error-rgb: 190 60 60; /* ---- Typographie ---------------------------------------------------- */ /* Chelsea Market est la police de titrage du site depuis wp_2 et doit le rester. Les maquettes l'emploient pour tout le titrage : titres, chiffres, pastilles, boutons, intitulés d'interface. Les deux variables pointent donc sur elle ; « title » et « display » ne se distinguent plus que par l'usage. */ --po-font-title: "Chelsea Market", "Bricolage Grotesque", system-ui, cursive; --po-font-display: "Chelsea Market", "Bricolage Grotesque", system-ui, cursive; --po-font-body: "Hanken Grotesk", system-ui, sans-serif; --po-font-serif: "Spectral", Georgia, serif; /* Chelsea Market n'existe qu'en 400 : demander plus gras ne ferait que déclencher le faux gras du navigateur. */ --po-display-weight: 400; --po-display-spacing: 0; /* Échelle fluide : le second terme fait varier la taille avec la fenêtre. */ --po-h1: clamp(2.5rem, 1.6rem + 3.6vw, 4.3rem); --po-h2: clamp(1.75rem, 1.3rem + 1.8vw, 2.6rem); --po-h3: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); --po-lede: clamp(1.05rem, 0.98rem + 0.4vw, 1.25rem); --po-body: 1.0625rem; --po-small: 0.875rem; --po-kicker: 0.78rem; --po-leading-title: 1.12; --po-leading-body: 1.6; /* ---- Rythme et gabarit ---------------------------------------------- */ --po-maxw: 1240px; --po-section-y: clamp(4.5rem, 3rem + 6vw, 8rem); --po-gap: clamp(1.5rem, 1rem + 2vw, 3rem); /* ---- Formes --------------------------------------------------------- Les cartes de la maquette finissent à angles droits (arbitrage client). --po-radius reste disponible pour les éléments d'interface : champs, boutons, pastilles. */ --po-radius: 8px; --po-radius-card: 0; --po-radius-pill: 999px; /* ---- Ombres ---------------------------------------------------------- */ --po-shadow-sm: 0 2px 8px rgba(33, 38, 93, 0.06), 0 1px 2px rgba(33, 38, 93, 0.05); --po-shadow-md: 0 12px 32px rgba(33, 38, 93, 0.10), 0 4px 10px rgba(33, 38, 93, 0.06); --po-shadow-lg: 0 30px 70px rgba(22, 26, 64, 0.18); --po-shadow-card: 0 18px 40px rgba(33, 38, 93, 0.08); /* ---- Mouvement ------------------------------------------------------- */ --po-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --po-reveal-y: 30px; --po-duration: 0.3s; /* ---- Motifs de la direction organique ------------------------------- Feuille dorée du kicker et trait de pinceau sous les titres de section. Encodés en data-URI : aucune requête réseau, aucune dépendance externe. */ --po-leaf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23DCA63F'%3E%3Cpath d='M12 22c0-5 0-7.5-2.2-9.7C7.5 10 2.5 10 2.5 10s0 4.2 2.2 6.4C6.9 18.6 9.8 19.5 12 22zm0-3.2c.1-5.4 1-7.8 3.3-10C17.6 6.5 22 7 22 7s-.3 4.4-2.5 6.4c-2 1.9-5 2.4-7.5 5.4z'/%3E%3C/svg%3E"); --po-brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none' fill='%23DCA63F'%3E%3Cpath d='M3 9c34-4 70-6 108-5 24 .6 56 1.4 86 3.4-22 1.8-52 1.6-84 1.4-34-.2-72 .4-104 1.6-4 .2-7-.2-6-1.4z'/%3E%3Cpath d='M18 13c40-2 96-2 150-1-44 2-110 2-150 1z' opacity='.55'/%3E%3C/svg%3E"); --po-brush-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none' fill='%23161a40'%3E%3Cpath d='M3 9c34-4 70-6 108-5 24 .6 56 1.4 86 3.4-22 1.8-52 1.6-84 1.4-34-.2-72 .4-104 1.6-4 .2-7-.2-6-1.4z'/%3E%3C/svg%3E"); /* Flèche des boutons, identique à l'icône « arrow » de function/all/icons.php. Destinée à être posée en masque (mask: var(--po-arrow)) : la couleur vient alors de currentColor, comme pour le SVG inline. Sert aux boutons du corps des articles, qui viennent de l'éditeur et ne peuvent pas porter de SVG. */ --po-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14m-6-7 7 7-7 7'/%3E%3C/svg%3E"); } @media (prefers-reduced-motion: reduce) { :root { --po-reveal-y: 0px; --po-duration: 0s; } }