/* Theme Name: Maroc Clusters Child Theme URI: https://maroc-clusters.com Description: Thème enfant de Hello Elementor pour le site institutionnel de la fédération nationale des clusters industriels marocains. Porte le design system Marco (tokens bordeaux/vert/or, typographies Manrope/Inter/JetBrains Mono) et prépare le support multilingue FR/EN/AR (Wave 5). Author: Fédération Maroc Clusters Author URI: https://maroc-clusters.com Template: hello-elementor Version: 1.0.0 Tested up to: 6.9 Requires PHP: 8.1 License: GNU General Public License v3 or later License URI: https://www.gnu.org/licenses/gpl-3.0.html Text Domain: maroc-clusters-child Tags: elementor, institutional, multilingual, rtl-language-support, accessibility-ready */ /* DESIGN TOKENS — source : BRIEF_JAKE_WAVE_1.md §07.2 + design_1.md §1.2-1.3 */ :root { /* Couleurs */ --mc-bordeaux: #8B2C30; --mc-bordeaux-deep: #6E1F23; --mc-bordeaux-50: #F7E8E9; --mc-vert: #00755E; --mc-vert-deep: #00574A; --mc-vert-50: #E0F0EB; --mc-or: #C9A84C; --mc-ink: #14110F; --mc-ink-2: #3A3530; --mc-ink-3: #767168; --mc-bg: #FAFAF7; --mc-bg-alt: #F2EFE7; --mc-bg-card: #FFFFFF; --mc-line: #E5E0D6; --mc-line-strong: #C9C2B3; /* Typographies — Latin via Elementor Custom Fonts, Arabe via functions.php */ --mc-font-display: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --mc-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --mc-font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; --mc-font-display-ar: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", sans-serif; --mc-font-body-ar: "Noto Sans Arabic", "IBM Plex Sans Arabic", "Segoe UI", sans-serif; /* Échelle desktop ≥ 1440 (design_1.md §1.3) */ --mc-h1: 72px; --mc-h2: 56px; --mc-h3: 40px; --mc-h4: 28px; --mc-h5: 22px; --mc-body-l: 20px; --mc-body-m: 16px; --mc-body-s: 14px; --mc-eyebrow: 11px; --mc-meta: 12px; /* Layout */ --mc-container-max: 1320px; --mc-pad-x-desktop: 32px; --mc-pad-x-mobile: 20px; --mc-section-y-desktop: 96px; --mc-section-y-tablet: 64px; --mc-section-y-mobile: 48px; /* Focus a11y WCAG 2.2 AA */ --mc-focus-color: var(--mc-bordeaux); --mc-focus-width: 2px; --mc-focus-offset: 2px; } /* DARK MODE — palette complète WCAG 2.2 calculée (design_1.md §1.2 + DESIGN-TOKENS.md §5bis) */ /* Activation : JS ajoute data-theme="dark" sur . Toggle UI prévu Wave 3. */ /* Test DevTools : sélectionner , ajouter attribut data-theme="dark" dans Elements panel. */ [data-theme="dark"] { /* Neutrals — reconstitution, pas inversion */ --mc-ink: #FAFAF7; /* L=0.9583 — 17.98:1 sur bg-dark (AAA) */ --mc-ink-2: #D8D3CC; /* L=0.6556 — 12.76:1 sur bg-dark (AAA) */ --mc-ink-3: #9A958C; /* L=0.3026 — 6.38:1 sur bg-dark (AA) */ /* Surfaces — 3 niveaux d'élévation par lightness, jamais pur noir */ --mc-bg: #14110F; /* L=0.005309 — fond principal dark brun chaud */ --mc-bg-alt: #1C1815; /* L=0.007480 — section alternée, +1 step */ --mc-bg-card: #211D1A; /* L=0.008997 — card/modal/formulaire, +2 steps */ /* Bordures dark — séparation par delta lightness, pas par couleur vive */ --mc-line: #2E2925; /* L=0.02293 — bordure subtle */ --mc-line-strong: #4A433D; /* L~0.055 — bordure appuyée (valeur scaffold conservée) */ /* Brand — bordeaux et vert conservés pleine saturation (Marco §1.2) */ /* Usage bouton CTA : fond bordeaux + texte blanc = 8.39:1 AAA — conforme */ /* Usage texte/lien/eyebrow : voir --mc-bordeaux-text-dark ci-dessous */ --mc-bordeaux: #8B2C30; /* inchangé — fond CTA, icônes, séparateurs */ --mc-bordeaux-deep: #6E1F23; /* inchangé — hover CTA */ --mc-bordeaux-50: #2A1315; /* inversé dark — surface tag bordeaux */ --mc-vert: #00755E; /* inchangé — accent UI, tags, icônes statut */ --mc-vert-deep: #00574A; /* inchangé — hover vert */ --mc-vert-50: #0D2620; /* inversé dark — surface tag vert */ --mc-or: #C9A84C; /* inchangé — 8.31:1 AAA sur bg-dark */ /* Tokens texte dark-only — bordeaux/vert éclairés pour usage texte/lien/eyebrow sur fond dark */ --mc-bordeaux-text-dark: #D4606A; /* L=0.23398 — 5.13:1 AA sur bg-dark */ --mc-vert-text-dark: #2FB89A; /* L=0.37230 — 7.64:1 AAA sur bg-dark */ /* Focus a11y dark — bordeaux-text-dark remplace bordeaux raw sur fond dark */ /* bordeaux #8B2C30 sur bg-dark #14110F = 2.26:1 insuffisant */ /* bordeaux-text-dark #D4606A sur bg-dark = 5.13:1 AA conforme WCAG 2.2 */ --mc-focus-color: var(--mc-bordeaux-text-dark); } /* ============================================================ ELEMENTOR DARK OVERRIDES — System Colors Force les --e-global-color-* en dark pour que les widgets Elementor héritent des bonnes couleurs sans surcharge manuelle par widget. ============================================================ */ [data-theme="dark"] { --e-global-color-primary: var(--mc-bordeaux); /* fond CTA — texte blanc dessus AAA */ --e-global-color-secondary: var(--mc-bordeaux-deep); --e-global-color-text: var(--mc-ink); /* #FAFAF7 en dark */ --e-global-color-accent: var(--mc-vert); /* accent UI */ } /* ============================================================ FOCUS-VISIBLE DARK — ring bordeaux-text-dark (WCAG 2.2 AA) ============================================================ */ [data-theme="dark"] *:focus-visible { outline-color: var(--mc-bordeaux-text-dark); } [data-theme="dark"] input:focus-visible, [data-theme="dark"] textarea:focus-visible, [data-theme="dark"] select:focus-visible { border-color: var(--mc-bordeaux-text-dark) !important; box-shadow: 0 0 0 3px rgba(212, 96, 106, 0.22); } /* ============================================================ ZELLIGE DARK — opacité 0.08 vs 0.05 light Le vert #00755E sur fond sombre est moins perceptible ; 0.08 maintient le caractère subliminal sans franchir le seuil illustratif. ============================================================ */ [data-theme="dark"] .mc-zellige-bg::before { opacity: 0.08; } @media (prefers-reduced-motion: reduce) { [data-theme="dark"] .mc-zellige-bg::before { opacity: 0.05; } } /* ============================================================ SÉLECTION DARK — signature bordeaux préservée ============================================================ */ [data-theme="dark"] ::selection { background-color: var(--mc-bordeaux); color: #FFFFFF; } /* ============================================================ TRANSITION BODY — infrastructure Wave 1, activation Wave 3 Laissée commentée pour ne pas introduire de transition avant le toggle. ============================================================ */ /* body { transition: background-color 0.3s var(--mc-ease-snap, ease-out), color 0.3s var(--mc-ease-snap, ease-out); } @media (prefers-reduced-motion: reduce) { body { transition: none; } } */ /* ============================================================ ELEMENTOR SYSTEM OVERRIDE — Stratégie B (filet de sécurité) Le MCP `update-global-colors/typography` écrit dans Custom Colors/Typography, pas dans System. On force ici les CSS vars System Elementor à pointer sur les tokens Marco, indépendamment de l'état effectif du Kit ID=12. Source : Atlas validation 2026-05-12 — Règle gravée "voie SAFE par défaut". ============================================================ */ :root { /* System Colors Elementor → tokens Marco */ --e-global-color-primary: var(--mc-bordeaux); --e-global-color-secondary: var(--mc-bordeaux-deep); --e-global-color-text: var(--mc-ink); --e-global-color-accent: var(--mc-vert); /* System Typography Elementor → familles Marco Les chaînes "manrope-700", "manrope-600", "inter-400", "jetbrains-mono" sont les slugs Custom Fonts Elementor uploadés par Chef. */ --e-global-typography-primary-font-family: "manrope-700", "Manrope", system-ui, sans-serif; --e-global-typography-primary-font-weight: 700; --e-global-typography-secondary-font-family: "manrope-600", "Manrope", system-ui, sans-serif; --e-global-typography-secondary-font-weight: 600; --e-global-typography-text-font-family: "inter-400", "Inter", system-ui, sans-serif; --e-global-typography-text-font-weight: 400; --e-global-typography-accent-font-family: "jetbrains-mono", ui-monospace, monospace; --e-global-typography-accent-font-weight: 500; } /* Container max-width — couvre layouts legacy ET atomic v4. Page ID=17 utilise template elementor_canvas (full-bleed) donc non affectée. */ .elementor-section.elementor-section-boxed > .elementor-container, .e-con.e-con-boxed > .e-con-inner { max-width: var(--mc-container-max); } /* WPForms button — alignement Marco (bouton Suivant ID=26 reste sinon en bleu défaut). Cible : bouton submit + nav next/prev WPForms multi-step. */ .wpforms-form button[type="submit"], .wpforms-form .wpforms-page-button, .wpforms-submit { background-color: var(--mc-bordeaux) !important; border-color: var(--mc-bordeaux) !important; color: #FFFFFF !important; font-family: var(--mc-font-body) !important; font-weight: 500 !important; letter-spacing: 0.01em; transition: background-color 0.2s var(--mc-ease-snap, ease-out); } .wpforms-form button[type="submit"]:hover, .wpforms-form .wpforms-page-button:hover, .wpforms-submit:hover { background-color: var(--mc-bordeaux-deep) !important; border-color: var(--mc-bordeaux-deep) !important; } /* RESET MINIMAL — respecte Hello Elementor */ body { background-color: var(--mc-bg); color: var(--mc-ink); } h1, h2, h3, h4, h5, h6, p { text-wrap: pretty; } ::selection { background-color: var(--mc-bordeaux); color: #FFFFFF; }