/* ============================================================ WAPIX — TYPOGRAPHIE GLOBALE UNIFIÉE Override des styles Elementor inline pour cohérence sur tout le site. Chargé en dernier dans avec !important pour gagner contre Elementor. ============================================================ */ /* ---- SCALE TYPOGRAPHIQUE FLUIDE ---- */ :root { --wapix-font-heading: 'Bricolage Grotesque', system-ui, sans-serif !important; --wapix-font-body: 'DM Sans', system-ui, sans-serif !important; --wapix-font-serif: 'Fraunces', Georgia, serif !important; --wapix-font-mono: 'DM Mono', ui-monospace, monospace !important; /* override des variables de police des sections WP clonées (titres → Bricolage) */ --fd: 'Bricolage Grotesque', sans-serif !important; --wax-fd: 'Bricolage Grotesque', sans-serif !important; --font-heading: 'Bricolage Grotesque', sans-serif !important; /* ── 3 TIERS UNIFORMES (titre / sous-titre / paragraphe) ── */ --wx-title: clamp(2rem, 4.2vw, 3.4rem) !important; /* 32 → 54 px : TOUS les titres de section */ --wx-subtitle: clamp(1.3rem, 1.8vw, 1.7rem) !important; /* 21 → 27 px : titres de cartes */ --wx-para: 1.0625rem !important; /* 17 px : tous les paragraphes */ --wx-title-lh: 1.04 !important; --wx-sub-lh: 1.18 !important; --wapix-fs-h1: clamp(2.5rem, 4vw + 1rem, 4rem); /* 40 → 64 px */ --wapix-fs-h2: clamp(2rem, 3vw + 0.75rem, 3rem); /* 32 → 48 px */ --wapix-fs-h3: clamp(1.5rem, 2vw + 0.5rem, 2rem); /* 24 → 32 px */ --wapix-fs-h4: clamp(1.25rem, 1.5vw + 0.5rem, 1.5rem); /* 20 → 24 px */ --wapix-fs-h5: clamp(1.125rem, 1vw + 0.5rem, 1.25rem); /* 18 → 20 px */ --wapix-fs-h6: 1rem; /* 16 px */ --wapix-fs-p: clamp(1rem, 0.4vw + 0.85rem, 1.125rem); /* 16 → 18 px */ --wapix-fs-small: 0.875rem; /* 14 px */ --wapix-lh-tight: 1.1; --wapix-lh-snug: 1.3; --wapix-lh-base: 1.65; --wapix-tracking-tight: -0.03em; } /* ---- BODY : police par défaut ---- */ body, .elementor-widget-text-editor, .elementor-widget-cmsmasters-blog, .elementor-widget-html { font-family: var(--wapix-font-body) !important; font-size: var(--wapix-fs-p) !important; line-height: var(--wapix-lh-base) !important; } /* ---- TITRES : Barlow uniforme + tailles fluides ---- */ h1, h2, h3, h4, h5, h6, .elementor-heading-title, .cmsmasters-widget-title__heading, .cmsmasters-widget-advanced-title__heading, .cmsmasters-widget-blog__entry-title, .cmsmasters-widget-blog__entry-title a { font-family: var(--wapix-font-heading) !important; line-height: var(--wapix-lh-tight) !important; letter-spacing: var(--wapix-tracking-tight) !important; } /* TITRES (h1, h2) → taille unique --wx-title */ h1, h2, .elementor-element h1, .elementor-element h2, h1.elementor-heading-title, h2.elementor-heading-title, .cmsmasters-widget-title__heading.cmsmasters-tag-h1, .cmsmasters-widget-title__heading.cmsmasters-tag-h2 { font-size: var(--wx-title) !important; font-weight: 700 !important; line-height: var(--wx-title-lh) !important; } /* SOUS-TITRES (h3, h4, h5) → taille unique --wx-subtitle */ h3, h4, h5, .elementor-element h3, .elementor-element h4, .elementor-element h5, h3.elementor-heading-title, h4.elementor-heading-title, h5.elementor-heading-title, .cmsmasters-widget-title__heading.cmsmasters-tag-h3, .cmsmasters-widget-title__heading.cmsmasters-tag-h4, .cmsmasters-widget-title__heading.cmsmasters-tag-h5 { font-size: var(--wx-subtitle) !important; font-weight: 600 !important; line-height: var(--wx-sub-lh) !important; } h6, .elementor-element h6, h6.elementor-heading-title, .cmsmasters-widget-title__heading.cmsmasters-tag-h6 { font-size: var(--wapix-fs-h6) !important; font-weight: 600 !important; letter-spacing: 0.05em !important; text-transform: uppercase !important; } /* ---- PARAGRAPHES → taille unique --wx-para ---- */ p, li, .elementor-widget-text-editor p, .elementor-widget-text-editor li { font-family: var(--wapix-font-body) !important; font-size: var(--wx-para) !important; line-height: 1.65 !important; } /* ---- BOUTONS : DM Sans cohérent ---- */ .elementor-button, .btn, button, a.elementor-button, .btn-y, .btn-d, .btn-w, .elementor-widget-button a, .elementor-widget-cmsmasters-swap-button a { font-family: var(--wapix-font-body) !important; font-weight: 600 !important; letter-spacing: 0.01em !important; } /* ---- EXCEPTIONS : ne pas écraser les éléments décoratifs ---- */ /* Lettres géantes décoratives (founder C/S, etc.) */ .founder-letter, .elementor-icon-list-icon, .cmsmasters-icons-default, .eicon, i, em.elementor-icon, .cmsmasters-icon { font-size: inherit !important; } /* Eyebrows / labels en majuscules → DM Mono (style "studio") */ .ey, .ey-dark, .ey-d, .ey-y, .ey-light, .eyebrow, .cmsmasters-widget-advanced-title__before-title, .cmsmasters-widget-advanced-title__after-title, [class*="eyebrow"], [class*="kicker"], [class*="-lbl"], [class*="-eyebrow"] { font-family: var(--wapix-font-mono) !important; font-size: 0.75rem !important; font-weight: 500 !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; line-height: 1.4 !important; } /* Compteurs / gros nombres stats : on garde leur taille pour le visuel */ .elementor-counter-number, .elementor-widget-counter, [class*="stat-number"], [class*="counter-number"], [class*="hero-stat"] strong, .proc-num, .method-num, .hero-num { font-family: var(--wapix-font-heading) !important; /* Pas de override de taille — gardé par les styles Elementor */ } /* Liens dans le texte (paragraphes uniquement, PAS dans le menu/nav) */ p a:not([class*="btn"]):not([class*="button"]), .elementor-widget-text-editor a:not([class*="btn"]):not([class*="button"]) { color: var(--y, #F0B200) !important; } /* ---- COHÉRENCE FOOTER ---- */ footer p, footer li, footer a { font-family: var(--wapix-font-body) !important; } /* ---- FIX ITALIQUE : / dans titres = Fraunces italique jaune ---- */ h1 em, h2 em, h3 em, h4 em, h5 em, h6 em, h1 i, h2 i, h3 i, h4 i, .elementor-heading-title em, .elementor-heading-title i, .cmsmasters-widget-title__heading em, .cmsmasters-widget-title__heading i, [class*="-title"] em, [class*="-h"] em, [class*="-ttl"] em { font-style: italic !important; font-weight: 400 !important; color: var(--y, #F0B200) !important; font-family: var(--wapix-font-serif) !important; letter-spacing: -0.01em !important; } /* ============================================================ FIX TAILLES TROP PETITES — interdit < 14px sauf eyebrows ============================================================ */ /* ---------------------------------------------------------------- CARTES "PUCE JAUNE + TITRE + DESCRIPTION" Cartes certifications (Google Partner, Meta, GEO, etc.) + similaires Titre : 0.9rem (14.4px) — Description : 0.8rem (12.8px) ---------------------------------------------------------------- */ .cert-label strong, .cert-card strong, [class*="cert-"] strong, .certif-card strong, .proof-card strong, .proof-item strong, .badge-card strong, [class*="hub-card"] strong, [class*="trust-"] strong, [class*="-cert"] strong { font-size: 0.9rem !important; /* 14.4px (titre) */ line-height: 1.4 !important; margin-bottom: 6px !important; font-weight: 600 !important; } .cert-label span, .cert-card span, [class*="cert-"] span:not(.cert-dot):not(.cert-flag), .certif-card p, .certif-card span, .proof-card span:not([class*="dot"]), .proof-item span:not([class*="dot"]), .badge-card span, [class*="hub-card"] span:not([class*="dot"]), [class*="trust-"] span:not([class*="dot"]), [class*="-cert"] span:not([class*="dot"]) { font-size: 0.8rem !important; /* 12.8px (description) */ line-height: 1.55 !important; color: rgba(255,255,255,0.65) !important; } /* Section "01 Résultat / 02 Transparence / 03 Engagement" — labels numérotés */ .conv-n, [class*="conv-"] [data-n], [class*="-num-label"], [class*="step-label"] { font-size: 0.9375rem !important; /* 15px (au lieu de 10px) */ letter-spacing: 0.12em !important; margin-bottom: 20px !important; line-height: 1.4 !important; } /* Titres conv-h (Résultat, Transparence...) */ .conv-h { font-size: clamp(1.375rem, 2vw + 0.5rem, 1.75rem) !important; /* 22 → 28px */ line-height: 1.25 !important; } /* Description conv-p */ .conv-p { font-size: 1.0625rem !important; /* 17px */ line-height: 1.7 !important; } /* RÈGLE GLOBALE : interdire taille < 14px sauf exceptions explicites */ .elementor-element :not(.eyebrow):not(.ey):not(.ey-d):not(.ey-dark):not(.ey-light):not([class*="badge"]):not(.text-xs):not(small):not(.cms-icon):not(.elementor-counter-number)[style*="font-size:1"][style*="px"] { /* Cibler les styles inline font-size:1Xpx où X=0,1,2,3 */ } /* Approche pratique : override généralisé pour les tailles 10-13px (sauf eyebrows et small décorations connus) */ *:not(.eyebrow):not(.ey):not(.ey-d):not(.ey-dark):not([class*="eyebrow"]):not([class*="kicker"]):not(.badge):not([class*="badge"]):not(small):not(.text-xs):not([class*="-icon"]):not([class*="footer-tva"]):not([class*="staging"]):not(.cmsmasters-widget-advanced-title__before-title):not(.cmsmasters-widget-advanced-title__after-title) { /* Si Elementor a posé font-size: 10/11/12/13px, on remonte à 14px minimum */ } /* Cible spécifique : élements avec style inline font-size très petits */ [style*="font-size:10px"]:not(.eyebrow):not(.ey):not(.ey-d):not([class*="badge"]):not(small), [style*="font-size: 10px"]:not(.eyebrow):not(.ey):not(.ey-d):not([class*="badge"]):not(small), [style*="font-size:11px"]:not(.eyebrow):not(.ey):not(.ey-d):not([class*="badge"]):not(small), [style*="font-size: 11px"]:not(.eyebrow):not(.ey):not(.ey-d):not([class*="badge"]):not(small), [style*="font-size:12px"]:not(.eyebrow):not(.ey):not(.ey-d):not([class*="badge"]):not(small), [style*="font-size: 12px"]:not(.eyebrow):not(.ey):not(.ey-d):not([class*="badge"]):not(small), [style*="font-size:13px"]:not(.eyebrow):not(.ey):not(.ey-d):not([class*="badge"]):not(small), [style*="font-size: 13px"]:not(.eyebrow):not(.ey):not(.ey-d):not([class*="badge"]):not(small) { font-size: 0.9375rem !important; /* 15px */ } /* Pour le footer : pas en dessous de 14px */ footer p:not(.text-xs):not([class*="staging"]), footer li, footer a, footer span:not([class*="badge"]) { font-size: 0.9375rem !important; /* 15px */ line-height: 1.6 !important; } /* ============================================================ FIX ELEMENTOR-INVISIBLE — les éléments masqués par Elementor en attendant leur animation JS (qui n'est jamais déclenchée sans le init complet) ============================================================ */ .elementor-invisible { visibility: visible !important; opacity: 1 !important; transform: none !important; } /* Garder les animations CSS qui marchent sans dépendre du JS Elementor */ .elementor-invisible.animated { animation: none !important; } /* ============================================================ PHOTOS FONDATEURS — Charly & Salim sur /bureau/ Format circulaire forcé (override Elementor / pixel-craft) ============================================================ */ .founder-photo, img.founder-photo, .founder-card img.founder-photo { display: block !important; width: 140px !important; height: 140px !important; aspect-ratio: 1 / 1 !important; border-radius: 50% !important; object-fit: cover !important; object-position: center top !important; margin: 0 0 28px 0 !important; border: 3px solid rgba(240, 178, 0, 0.5) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important; background: #f7f6f3 !important; max-width: 140px !important; } @media (min-width: 1024px) { .founder-photo, img.founder-photo { width: 160px !important; height: 160px !important; max-width: 160px !important; } } /* ============================================================ FIX CHIFFRES DE STEP/MÉTHODE — uniformisation visibilité Couleur jaune pleine (pas de transparence) pour éviter l'effet outline ============================================================ */ .method-n, .proc-n, .step-n, .m-num, [class*="-step"] [class*="-n"]:not([class*="-name"]):not([class*="-num-label"]) { color: #d4a000 !important; /* jaune plein un peu plus sombre pour cohabiter avec fond clair */ opacity: 0.85 !important; } .method-item:hover .method-n, .proc-step:hover .proc-n, .method-item:focus-within .method-n { color: #F0B200 !important; opacity: 1 !important; } /* ============================================================ SECTION MAP : supprimer l'espace entre les stats et la map (stats KEEP, juste compresser le gap) ============================================================ */ .monde-kpis, #w2monde .monde-kpis { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 44px !important; margin: 16px 0 0 !important; padding: 0 !important; align-items: flex-start !important; } .monde-map-wrap, .monde-map-wrap.fu, #w2monde .monde-map-wrap { margin-top: 40px !important; padding-top: 0 !important; } #wmap-root { padding-top: 20px !important; } /* Cacher le bloc des chips pays (Belgique, France, Maroc, etc.) sous la map */ .monde-pays, #w2pays { display: none !important; } /* Ajouter un contour noir en bas de la mini Google Map (bloc contact) */ .ct-map-img { border-bottom: 20px solid #0a0a0a !important; box-sizing: border-box !important; } /* ============================================================ CONTACT — Barre jaune "Pas encore convaincu" full-width ============================================================ */ .cta-band { width: 100vw !important; max-width: 100vw !important; position: relative !important; left: 50% !important; right: 50% !important; margin-left: -50vw !important; margin-right: -50vw !important; border-radius: 0 !important; padding-left: max(24px, 5vw) !important; padding-right: max(24px, 5vw) !important; } /* Barre jaune collée à la section "fondateurs" (pas d'espace dessous) */ #wpc .c-canaux { padding-bottom: 0 !important; border-bottom: none !important; } /* ============================================================ HEADER — Sous-menu "Réalisations" : titres plus petits + pas de dupliqué ============================================================ */ /* Les items du méga-menu ont des titres énormes ("Site Internet" en H2). On les réduit. */ .elementor-widget-cmsmasters-nav-menu .sub-menu .menu-item a, .cmsmasters-nav-menu__sub-menu a, .cmsmasters-nav-menu__sub-menu .menu-item-link, .elementor-widget-cmsmasters-nav-menu__sub-menu a { font-size: 0.9rem !important; font-weight: 500 !important; padding: 8px 16px !important; line-height: 1.4 !important; } /* Si certains sous-menus utilisent un widget featured-box avec gros titres : réduire */ .cmsmasters-nav-menu__sub-menu .elementor-widget-cmsmasters-featured-box__title, .dropdown-menu .elementor-widget-cmsmasters-featured-box__title, .sub-menu .elementor-widget-cmsmasters-featured-box__title, header .elementor-widget-cmsmasters-featured-box__title { font-size: 1rem !important; font-weight: 600 !important; line-height: 1.2 !important; margin-bottom: 4px !important; } /* Masquer le doublé de titre (le "Site Internet" affiché 2x dans certains sous-menus Elementor) */ .elementor-widget-cmsmasters-featured-box__title + .elementor-widget-cmsmasters-featured-box__title { display: none !important; } /* ============================================================ BUREAU — Chiffres méthode 01-05 : style uniforme (le 01 comme les autres) Le H1 dans Barlow 800 grand rend "01" différent visuellement. Solution : forcer même opacity / weight / size sur les 5 chiffres. ============================================================ */ .method-n, .method-step .method-n { font-family: 'Barlow', sans-serif !important; font-weight: 800 !important; font-size: 54px !important; letter-spacing: -0.04em !important; line-height: 0.9 !important; color: #d4a000 !important; opacity: 1 !important; -webkit-text-fill-color: #d4a000 !important; -webkit-text-stroke: 0 !important; filter: none !important; } @media (max-width: 768px) { .method-n, .method-step .method-n { font-size: 42px !important; } } /* Container parent : pas de gap entre stats et map */ #w2monde .monde-inner, #w2monde .wrap > div { gap: 0 !important; } /* Sous-titre : pas de marge en bas */ .monde-sub { margin-bottom: 0 !important; } /* Section #w2monde : padding global réduit */ #w2monde { padding-top: 64px !important; padding-bottom: 48px !important; } /* ============================================================ MAP MONDE — Agrandissement (Wapix Présence internationale) ============================================================ */ .monde-map-wrap, #wp2 .monde-map-wrap, [class*="monde-map"] { min-height: auto !important; width: 100% !important; } .monde-map-wrap svg, #wp2 .monde-map-wrap svg { width: 100% !important; height: auto !important; min-height: 0 !important; display: block !important; } #wmap-root { min-height: auto !important; } /* Container parent : libérer la largeur si limité */ [class*="monde-"][class*="-section"], #wp2 .wrap:has(.monde-map-wrap) { max-width: 1600px !important; } /* ════════════════════════════════════════════════════════════ UNIFORMISATION TYPOGRAPHIQUE — 3 tiers identiques sur tout le site Titre / Sous-titre / Paragraphe : même police, même taille partout. (Les chiffres-stats, boutons, eyebrows et icônes sont exclus.) ════════════════════════════════════════════════════════════ */ /* ── TIER 1 · TITRES DE SECTION (taille unique --wx-title) ── */ .hero-h, .h1-grey, .h1-white, .w1l1, .w1l2, .pr-title, .conv-title, .ct-title, .cta-h, .equipe-ttl, .ex-title, .faq-h, .faq-title, .founders-title, .geo-h, .loc-h, .monde-title, .proc-title, .proj-ttl, .still-h, .ticket-h, .tl-big, .urgent-h, .canaux-h, .canaux-title, .real-title, .hub-title, .sol-title, .serv-title, .cmsmasters-widget-title__heading { font-family: var(--wapix-font-heading) !important; font-size: var(--wx-title) !important; font-weight: 700 !important; line-height: var(--wx-title-lh) !important; letter-spacing: -0.03em !important; } /* ── TIER 2 · SOUS-TITRES / TITRES DE CARTES (taille unique --wx-subtitle) ── */ .conv-h, .canal-h, .method-card-h, .method-h, .proc-h, .eq-name, .ex-name, .founder-name, .wapix-team-member__name, .cta-card-h, .faq-section-h, .hub-card-h, .serv-card-h, .real-card-h, .feature-h, .sol-card-h, .ticket-card-h, .cert-card-h, .step-h, .value-h { font-family: var(--wapix-font-heading) !important; font-size: var(--wx-subtitle) !important; font-weight: 600 !important; line-height: var(--wx-sub-lh) !important; letter-spacing: -0.02em !important; } /* ── TIER 3 · PARAGRAPHES / DESCRIPTIONS (taille unique --wx-para) ── */ .conv-p, .conv-sub, .ct-sub, .cta-body, .canaux-sub, .ai-desc, .proc-p, .pr-lead, .pr-sub, .faq-body, .ex-desc, .method-p, .method-card-p, .loc-p, .geo-p, .still-p, .ticket-p, .urgent-p, .monde-sub, .real-p, .hero-sub, .hub-card-p, .serv-card-p, .feature-p, .sol-card-p, .value-p, .step-p, .canal-desc, .cta-sub, .founders-sub, .equipe-sub, .section-lead, .lead { font-family: var(--wapix-font-body) !important; font-size: var(--wx-para) !important; font-weight: 400 !important; line-height: 1.65 !important; letter-spacing: 0 !important; } /* ── / dans les titres unifiés = Fraunces italique jaune ── */ .hero-h em, .pr-title em, .conv-title em, .ct-title em, .cta-h em, .equipe-ttl em, .ex-title em, .faq-h em, .faq-title em, .founders-title em, .monde-title em, .proc-title em, .tl-big em, .canaux-h em, .real-title em, .w1l2 em, .cmsmasters-widget-title__heading em { font-family: var(--wapix-font-serif) !important; font-style: italic !important; font-weight: 400 !important; color: var(--y, #F0B200) !important; letter-spacing: -0.01em !important; } /* ── Stats / chiffres décoratifs : NE PAS uniformiser (gardent leur taille) ── */ .num-val, .pr-sv, .tl-sv, .method-n, .proc-n, .monde-kv, .founder-letter, .w1pnum, .hs-v, .hs-val, .avis-num, .proof-val, .tt-projects, .conv-n, .ex-sv, .stat__n { /* on conserve la taille définie par la page (gros chiffres) */ font-family: var(--wapix-font-heading) !important; } /* ════════════════════════════════════════════════════════════ FORCE BRICOLAGE — identique à la page accueil2 font-family directe (pas via variable) + optical-sizing + poids 600 pour que le caractère distinctif de Bricolage ressorte partout. ════════════════════════════════════════════════════════════ */ h1, h2, h3, h4, h5, h6, .elementor-heading-title, .cmsmasters-widget-title__heading, .cmsmasters-widget-title__heading *, .hero-h, .hero-h *, .h1-grey, .h1-white, .w1l1, .w1l2, .pr-title, .conv-title, .conv-h, .ct-title, .cta-h, .equipe-ttl, .ex-title, .ex-name, .faq-h, .faq-title, .founders-title, .founder-name, .geo-h, .loc-h, .monde-title, .proc-title, .proj-ttl, .still-h, .ticket-h, .tl-big, .urgent-h, .canaux-h, .canal-h, .canaux-title, .method-card-h, .method-h, .proc-h, .eq-name, .wapix-team-member__name, .real-title, .hub-title, .sol-title, .serv-title, .cta-card-h, [class*="-title"], [class*="-ttl"] { font-family: 'Bricolage Grotesque', system-ui, sans-serif !important; font-optical-sizing: auto !important; } /* Poids uniforme 600 sur les gros titres (look accueil2) */ h1, h2, .elementor-heading-title, .cmsmasters-widget-title__heading, .hero-h, .hero-h .h1-grey, .hero-h .h1-white, .w1l1, .w1l2, .pr-title, .conv-title, .ct-title, .cta-h, .equipe-ttl, .ex-title, .faq-h, .faq-title, .founders-title, .geo-h, .loc-h, .monde-title, .proc-title, .proj-ttl, .still-h, .ticket-h, .tl-big, .urgent-h, .canaux-h, .canaux-title, .real-title { font-weight: 600 !important; letter-spacing: -0.035em !important; } /* Les accent restent en Fraunces italique (poids 400) */ h1 em, h2 em, .hero-h em, .pr-title em, .conv-title em, .ct-title em, .cta-h em, .monde-title em, .faq-h em, .tl-big em, .w1l2 em, .cmsmasters-widget-title__heading em, [class*="-title"] em { font-family: 'Fraunces', Georgia, serif !important; font-weight: 400 !important; }