/* ========================================================================= HAPPIA — Design system « PayFit, vert Happia » (2026-07-08) Source unique : site public + back-office. Injecté en dernier dans via _worker.js → gagne sur les styles inline. ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap'); :root{ --pf-ink:#0C1F4E; /* titres */ --pf-body:#5B6472; /* texte courant */ --pf-muted:#5E6A80; /* 🆕 AA : #5E6A80 → #5E6A80 (~5:1, sûr même sur fond crème) */ --pf-green:#22C08A; /* vert Happia « pâle » = accent / fond léger (pas pour texte ni bouton à texte blanc) */ --pf-green-d:#0E7A52; /* 🆕 AA : vert foncé lisible en TEXTE (~5:1) + fond bouton à texte blanc */ --pf-green-ink:#0B5A40; /* texte sur fond vert pâle */ --pf-pale:#EAF7F1; /* fond de section pastel */ --pf-pale2:#E0F3EA; --pf-line:#E8ECF1; /* filet clair */ --pf-card:#ffffff; --pf-shadow:0 12px 34px rgba(12,31,78,.07); --pf-shadow-sm:0 6px 18px rgba(12,31,78,.06); --pf-r-btn:12px; --pf-r-card:20px; --pf-r-sec:28px; --pf-r-pill:999px; --pf-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --pf-head:"Poppins",-apple-system,sans-serif; /* Remap des variables historiques happia-fun → palette douce (adoucit les pages non refaites) */ --ink:#0C1F4E; --mint:#22C08A; --mint-dark:#0E7A52; /* 🆕 AA : #0E7A52 (3:1) → #0E7A52 (~5:1) pour le vert en texte */ --sunny:#D8F0E4; --coral:#F7B7AC; --lavender:#D8CEFF; --rose:#FBD4DE; --border:#E8ECF1; --radius:20px; --shadow-sm:var(--pf-shadow-sm); --shadow-md:var(--pf-shadow); } /* ---- Base typographie -------------------------------------------------- */ body{ font-family:var(--pf-sans); color:var(--pf-body); -webkit-font-smoothing:antialiased; } h1,h2,h3,h4,.h1,.h2,.h3{ font-family:var(--pf-head); color:var(--pf-ink); letter-spacing:-.01em; line-height:1.14; } /* Titres fins et élégants (500 léger — fini le gras) */ h1,.h1,h2,.h2,h3,.h3,h4{ font-weight:500 !important; } .hero h1,.hero h2,h2.h,.hero h1 .accent,.hero h1 .mint, .article-hero h1,.article-body h2,.article-body h3,.article-body h4,article h2,article h3, .articles-head h2,.article-featured h3,.article-coming h3, .pmods-head h2,.showcase-head h2,.pmod-text h3,.numbers-head h2,.faq-head h2, .app .main h1,.app .main h2,.app .main h3,.app .page-head h1{ font-weight:500 !important; } /* Plafond de TAILLE sur les gros titres (fini les titres énormes) */ .hero h1, .metiers-cloud .title, .contact-wrap h1{ font-size:clamp(28px,3.4vw,42px) !important; line-height:1.14 !important; } .pmods-head h2, .showcase-head h2, .numbers-head h2, .faq-head h2, .final h2, h2.h, .punch h2, .steps-head h2, .try-head h2, .case-card h3, .cta-strip h2, .cta-block h2{ font-size:clamp(24px,3vw,36px) !important; line-height:1.18 !important; } .article-hero h1{ font-size:clamp(26px,3.2vw,38px) !important; line-height:1.15 !important; } .article-body h2, article h2{ font-size:clamp(21px,2.6vw,27px) !important; } .article-body h3, article h3{ font-size:20px !important; } /* Stickers décoratifs de l'ancien style (étoiles, chevrons , triangles, points) → masqués partout */ .hf-sticker, .sticker, .hf-spark, [class*="hf-anim-"].hf-sticker, .hf-hero .hf-s-1, .hf-hero .hf-s-2, .hf-hero .hf-s-3, .hf-hero .hf-s-4, .hf-hero .hf-s-5{ display:none !important; } /* Neutralise les surlignages brutalistes happia-fun sur tout le site */ .hf-hl{ background:transparent !important; box-shadow:none !important; padding:0 !important; color:inherit !important; } /* Mot barré (ex. « SEO », « supposer ») → trait fin sobre, jamais de barre coral/::after */ .hf-strike, .strike{ position:static !important; color:var(--pf-muted) !important; text-decoration:line-through !important; text-decoration-color:#CDD5DF !important; text-decoration-thickness:1px !important; background:none !important; font-weight:inherit !important; } .hf-strike::after, .strike::after{ display:none !important; content:none !important; } /* Mot « souligné » du hero → texte plein sobre (fini le bloc de surlignage) */ .hf-underline{ background:none !important; color:inherit !important; -webkit-text-fill-color:currentColor !important; padding:0 !important; } .hf-underline::after{ display:none !important; } /* Mot « accent » en dégradé (.mint dans les titres) → texte vert plein, jamais un bloc */ h1 .mint, h2 .mint, .hero h1 .mint, h2.h .mint, .h .mint{ background:none !important; background-image:none !important; color:var(--pf-green-d) !important; -webkit-text-fill-color:var(--pf-green-d) !important; -webkit-background-clip:border-box !important; background-clip:border-box !important; } /* IMPORTANT : texte vert plein (surtout PAS un bloc vert plein qui masque le texte) */ .hf-accent{ background:none !important; background-image:none !important; color:var(--pf-green-d) !important; -webkit-text-fill-color:var(--pf-green-d) !important; -webkit-background-clip:border-box !important; background-clip:border-box !important; } /* CTA header historique (.hf-cta) → pilule verte partout (au lieu du bleu marine) */ .hf-cta, .hf-topbar .hf-cta, .topbar .cta, header nav a.cta{ background:var(--pf-green-d) !important; color:#fff !important; border:1.5px solid transparent !important; box-shadow:none !important; border-radius:12px !important; font-family:var(--pf-head) !important; font-weight:600 !important; } .hf-cta:hover, .hf-topbar .hf-cta:hover, .topbar .cta:hover, header nav a.cta:hover{ background:var(--pf-green-d) !important; color:#fff !important; transform:none !important; box-shadow:none !important; } /* ---- Composants PayFit réutilisables ---------------------------------- */ .pf-eyebrow{ font-family:var(--pf-head); font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--pf-green-d); } .pf-btn{ display:inline-flex; align-items:center; gap:8px; font-family:var(--pf-head); font-weight:600; font-size:15px; border-radius:var(--pf-r-btn); padding:13px 22px; text-decoration:none; cursor:pointer; border:1.5px solid transparent; transition:.15s; } .pf-btn-green{ background:var(--pf-green-d); color:#fff; } .pf-btn-green:hover{ background:var(--pf-green-d); } .pf-btn-ghost{ background:#fff; color:var(--pf-ink); border-color:var(--pf-line); } .pf-btn-ghost:hover{ border-color:#cdd4dd; } .pf-btn-white{ background:#fff; color:var(--pf-green-ink); } .pf-pill{ display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:13px; padding:6px 14px; border-radius:var(--pf-r-pill); } .pf-header{ position:sticky; top:14px; z-index:60; max-width:1120px; margin:14px auto 0; background:#fff; border-radius:var(--pf-r-pill); box-shadow:var(--pf-shadow); display:flex; align-items:center; gap:18px; padding:12px 16px 12px 22px; } /* ---- Header flottant UNIFIÉ sur TOUTES les pages (comme l'accueil) ---- */ .topbar, .hf-topbar{ position:sticky !important; top:14px !important; z-index:100 !important; background:transparent !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; border-bottom:none !important; box-shadow:none !important; padding-top:14px !important; } .topbar-row, .hf-topbar-row{ background:#fff !important; border-radius:999px !important; box-shadow:0 12px 34px rgba(12,31,78,.08) !important; border:none !important; padding:12px 22px !important; margin-top:0 !important; } /* liens de nav en Poppins medium, sobres */ .topbar nav a:not(.cta):not(.hf-cta), .hf-topbar nav a:not(.cta):not(.hf-cta){ font-family:var(--pf-head) !important; font-weight:500 !important; } /* ---- Menu déroulant UNIFIÉ (injecté sur toutes les pages) ---- */ header nav{ display:flex !important; align-items:center !important; gap:22px !important; } .pf-nav-drop{ position:relative; } .pf-nav-drop .pf-nav-trigger{ background:transparent; border:none; cursor:pointer; font-family:var(--pf-head); font-size:15px; font-weight:500; color:var(--pf-ink); display:inline-flex; align-items:center; gap:6px; padding:8px 4px; } .pf-nav-drop .pf-nav-trigger svg{ width:13px; height:13px; opacity:.55; transition:transform .2s; } .pf-nav-drop:hover .pf-nav-trigger svg{ transform:rotate(180deg); } .pf-nav-panel{ position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(6px); min-width:280px; background:#fff; border:1px solid var(--pf-line); border-radius:18px; box-shadow:0 18px 44px rgba(12,31,78,.14); padding:10px; opacity:0; visibility:hidden; transition:.18s; z-index:120; } .pf-nav-drop:hover .pf-nav-panel{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); } .pf-nav-panel::before{ content:""; position:absolute; top:-14px; left:0; right:0; height:14px; } .pf-nav-panel a{ display:block !important; padding:11px 14px; border-radius:12px; text-decoration:none; transition:background .12s; } .pf-nav-panel a:hover{ background:var(--pf-pale); } .pf-nav-panel a b{ display:block; font-family:var(--pf-head); font-size:13.5px; font-weight:500; color:var(--pf-ink); } .pf-nav-panel a span{ display:block; font-size:12px; color:var(--pf-muted); margin-top:2px; font-weight:400; } .pf-nav-link{ font-family:var(--pf-head); font-size:15px; font-weight:500; text-decoration:none; color:var(--pf-ink); padding:8px 4px; } .pf-nav-link:hover{ color:var(--pf-green-d); } .pf-nav-cta{ background:var(--pf-green-d) !important; color:#fff !important; padding:12px 22px; border-radius:12px; font-family:var(--pf-head); font-weight:600; font-size:14.5px; text-decoration:none; border:none; } /* 🆕 AA : blanc sur vert foncé ~5:1 */ .pf-nav-cta:hover{ background:var(--pf-green-ink) !important; color:#fff !important; } @media(max-width:860px){ .pf-nav-hide-mobile{ display:none !important; } header nav{ gap:12px !important; } } .pf-hero{ background:var(--pf-pale); border-radius:var(--pf-r-sec); margin:26px 22px 0; padding:66px 22px 60px; text-align:center; } .pf-hero h1{ font-size:clamp(36px,6vw,60px); font-weight:600; margin:16px auto 18px; max-width:820px; } .pf-hero .sub{ font-size:20px; color:var(--pf-body); max-width:640px; margin:0 auto 26px; } .pf-card{ background:var(--pf-card); border:1px solid var(--pf-line); border-radius:var(--pf-r-card); padding:26px; box-shadow:var(--pf-shadow-sm); } .pf-promo{ background:var(--pf-green-d); border-radius:var(--pf-r-sec); margin:0 22px; padding:56px 30px; text-align:center; color:#fff; position:relative; overflow:hidden; } .pf-promo h2{ color:#fff; } .pf-stars{ color:#22C08A; letter-spacing:1px; } /* ---- Adoucissement GLOBAL des pages non encore refaites ---------------- */ /* Boutons brutalistes happia-fun → pilule verte douce */ .btn, .button, .cta, a.btn, button.btn{ border-radius:var(--pf-r-btn) !important; box-shadow:none !important; font-family:var(--pf-head) !important; font-weight:600 !important; } .btn-primary, .btn.primary, .hf-btn{ background:var(--pf-green-d) !important; color:#fff !important; border:1.5px solid transparent !important; box-shadow:none !important; } .btn-primary:hover, .btn.primary:hover, .hf-btn:hover{ background:var(--pf-green-d) !important; transform:none !important; } /* Boutons CTA historiques des cartes (tarifs, blocs) → pilule verte au lieu du marine */ .db-cta, .lb-btn, .bespoke-btn, button.cta, a.cta:not(.topbar .cta), .btn-light{ background:var(--pf-green-d) !important; color:#fff !important; border:1.5px solid transparent !important; box-shadow:none !important; border-radius:12px !important; font-family:var(--pf-head) !important; font-weight:600 !important; } .db-cta:hover, .lb-btn:hover, .bespoke-btn:hover, button.cta:hover, .btn-light:hover{ background:var(--pf-green-d) !important; color:#fff !important; } /* Cartes brutalistes → blanc arrondi ombre douce */ .card, .hf-card, .feature, .box, .panel{ border:1px solid var(--pf-line) !important; border-radius:var(--pf-r-card) !important; box-shadow:var(--pf-shadow-sm) !important; } /* ========================================================================= RESPONSIVE MOBILE / TABLETTE (la majorité des commerçants sont sur mobile) ========================================================================= */ @media (max-width: 900px){ html, body{ overflow-x:hidden !important; max-width:100vw !important; } /* ---- Header flottant public : ne déborde plus, CTA compact ---- */ .topbar, .hf-topbar{ top:8px !important; padding-top:8px !important; } .topbar-row, .hf-topbar-row{ margin:0 10px !important; padding:9px 10px 9px 14px !important; gap:8px !important; max-width:calc(100vw - 20px) !important; box-sizing:border-box !important; } .topbar .brand img, .hf-topbar .hf-brand img{ height:26px !important; } header nav{ gap:8px !important; } /* rubriques déroulantes + liens secondaires masqués sur mobile, on garde le CTA */ .pf-nav-hide-mobile, .hide-mobile, .hf-hide-mobile{ display:none !important; } .pf-nav-cta, .topbar .cta, .hf-topbar .hf-cta, header nav a.cta{ padding:10px 14px !important; font-size:13px !important; white-space:nowrap !important; } .cta-short{ display:inline !important; } /* ---- Hero / sections publiques : padding raisonnable ---- */ .hero, .pf-hero{ margin:16px 12px 0 !important; padding:40px 18px !important; } .showcase, .pmods, .numbers, .metiers-cloud, .case, .big-numbers, .faq, .ask{ padding:44px 0 !important; } .container{ padding-left:16px !important; padding-right:16px !important; } /* ---- Démo produit (iframe back-office) : masquée sur mobile (illisible en cadre fixe), on garde le titre + les CTA « Découvrir le back-office / Tester » ---- */ .sc-demoframe, .sc-demohint{ display:none !important; } .showcase-cta{ margin-top:8px !important; } /* ---- BACK-OFFICE : plus de colonne sidebar réservée, contenu pleine largeur ---- */ .app{ display:block !important; grid-template-columns:1fr !important; max-width:100vw !important; overflow-x:hidden !important; } .app .main, .main{ padding:64px 14px 48px !important; max-width:100vw !important; overflow-x:hidden !important; box-sizing:border-box !important; } /* Widgets gridstack : on casse le positionnement absolu 3 colonnes → empilés pleine largeur */ .grid-stack{ height:auto !important; } .grid-stack > .grid-stack-item{ position:relative !important; left:0 !important; top:0 !important; width:100% !important; height:auto !important; min-height:0 !important; transform:none !important; margin-bottom:12px !important; inset:auto !important; } .grid-stack > .grid-stack-item > .grid-stack-item-content{ position:relative !important; inset:auto !important; height:auto !important; } /* toute grille de cartes multi-colonnes → 1 colonne */ .bo-wgrid, .numbers-grid, .stats-grid, .feat, .cop-sugg, .pmod, .showcase-win, .sc-sugg, .cop-sugg, [style*="grid-template-columns:repeat(3"], [style*="grid-template-columns:repeat(2"]{ grid-template-columns:1fr !important; } .copilot .cop-bar{ max-width:100% !important; } } /* ========================================================================= BACK-OFFICE façon PayFit (scopé .app pour battre modern.css !important) ========================================================================= */ /* Police du back-office alignée sur le site (Inter/Poppins), fini le -apple-system + gras 800 */ .app, .app .main, .app .main *:not(svg):not(path):not(use):not([class*="icon"]){ font-family:var(--pf-sans) !important; } .app .main h1, .app .main h2, .app .main h3, .app .main h4, .app .page-head h1, .app .ch-name, .app .bo-page-h, .app .cal-h, .app .chat-h{ font-family:var(--pf-head) !important; } .app .ch-name, .app .ch-title, .app b, .app strong{ font-weight:600 !important; } .app aside.sidebar{ background:#F7FAF8 !important; border-right:1px solid var(--pf-line) !important; } /* 🆕 2026-07-24 (Christophe) — FIN DU « MENU BLANC » RÉCURRENT. La sidebar payfit est CLAIRE, mais espace-client.css (thème sombre hérité) force le texte en blanc via color ET -webkit-text-fill-color. On force donc les DEUX en foncé ici (payfit = chargé en dernier + sélecteur plus spécifique). ⚠️ -webkit-text-fill-color est INDISPENSABLE : sans lui, changer `color` seul est IGNORÉ car le text-fill blanc l'emporte au rendu. C'est ce qui faisait revenir le bug à chaque fois. */ .app aside.sidebar .brand img{ filter:none !important; } .app aside.sidebar nav a{ border-radius:12px !important; font-family:var(--pf-head) !important; font-size:13.5px !important; padding:9px 12px !important; color:#3A4A63 !important; -webkit-text-fill-color:#3A4A63 !important; } .app aside.sidebar nav a:hover:not(.active){ background:#EEF5F1 !important; color:#0C1F4E !important; -webkit-text-fill-color:#0C1F4E !important; } .app aside.sidebar nav a.active{ background:#E0F3EA !important; color:#0B5A40 !important; -webkit-text-fill-color:#0B5A40 !important; font-weight:600 !important; } .app aside.sidebar nav a svg{ opacity:0.75 !important; } .app aside.sidebar .nav-label{ font-family:var(--pf-head) !important; color:#5E6A80 !important; -webkit-text-fill-color:#5E6A80 !important; } .app aside.sidebar .nav-label.admin{ color:#B23A2C !important; -webkit-text-fill-color:#B23A2C !important; } .app aside.sidebar .footer{ color:#5E6A80 !important; -webkit-text-fill-color:#5E6A80 !important; } /* Cartes du back-office : arrondi + ombre douce (au lieu du flat) */ .app .card, .app .widget, .app .goal-card, .app .next-section, .app .a-card, .app .deliverable, .app .quota-card, .app .info-card, .app .stat-card, .app [class*="-card"], .app .grid-stack > .grid-stack-item > .grid-stack-item-content{ border:1px solid var(--pf-line) !important; border-radius:18px !important; box-shadow:0 6px 18px rgba(12,31,78,.05) !important; } /* Titres back-office en Poppins, fins (600) comme le reste du site */ .app .main h1, .app .page-head h1{ font-family:var(--pf-head) !important; font-weight:500 !important; font-size:clamp(22px,2.6vw,28px) !important; color:var(--pf-ink) !important; letter-spacing:-.01em !important; } .app .main h2, .app .main h3, .app .page-head h2{ font-family:var(--pf-head) !important; font-weight:500 !important; } /* Encart d'accueil / hero de score : léger fond vert pâle façon carte "Bonjour" PayFit */ .app #welcomeHero, .app .greeting, .app .hero-card, .app .welcome-card{ color:var(--pf-ink) !important; } /* Pastilles de statut → vert doux (façon badge "Reçu" PayFit) */ .app .badge, .app .pill, .app .tag, .app .chip, .app .status{ border-radius:999px !important; } .app .badge.ok, .app .pill.ok, .app .status.ok, .app .badge.success, .app .badge.done{ background:#E0F3EA !important; color:#0B5A40 !important; border-color:#CDEEDE !important; } /* Boutons back-office → pilule verte / contour doux */ .app .btn, .app button.btn, .app a.btn{ border-radius:12px !important; box-shadow:none !important; font-family:var(--pf-head) !important; } .app .btn-primary, .app .btn.primary{ background:var(--pf-green-d) !important; color:#fff !important; border:1.5px solid transparent !important; } .app .btn-secondary, .app .btn.ghost, .app .btn-ghost{ background:#fff !important; color:var(--pf-ink) !important; border:1.5px solid var(--pf-line) !important; }