/* ============================================================ MP Harmony — feuille d'harmonisation front-office Portée : mp-portage.ch (Helix Ultimate + SP Page Builder) Objectif : finition professionnelle sans refonte — boutons cohérents, palette resserrée, espacements réguliers, typographie plus nette. Chaque bloc est piloté par une classe sur (.mph-buttons / .mph-spacing / .mph-type) afin de pouvoir être désactivé depuis les paramètres du plugin. Variables (--mph-*) injectées inline par le plugin. ============================================================ */ /* ------------------------------------------------------------ 1. BOUTONS (.mph-buttons) Uniformise tous les CTA : même rayon, même graisse, mêmes états hover/focus. Corrige le "blanc sur blanc" au survol. Couvre les boutons Helix, SP Page Builder et Joomla core. ------------------------------------------------------------ */ .mph-buttons .btn, .mph-buttons a.btn, .mph-buttons .sppb-btn, .mph-buttons a.sppb-btn, .mph-buttons button.sppb-btn, .mph-buttons .sp-megamenu-parent > li > a.btn, .mph-buttons input[type="submit"], .mph-buttons button[type="submit"] { border-radius: var(--mph-radius, 8px) !important; font-weight: 600 !important; letter-spacing: .01em; text-decoration: none !important; transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .05s ease !important; padding: .7em 1.5em; line-height: 1.3; border-width: 1px; border-style: solid; } /* Bouton primaire / d'accent (CTA principaux type "Nous contacter") */ .mph-buttons .btn-primary, .mph-buttons .sppb-btn-primary, .mph-buttons .sppb-btn-accent, .mph-buttons input[type="submit"], .mph-buttons button[type="submit"] { background-color: var(--mph-accent, #c62828) !important; border-color: var(--mph-accent, #c62828) !important; color: #fff !important; } .mph-buttons .btn-primary:hover, .mph-buttons .btn-primary:focus, .mph-buttons .sppb-btn-primary:hover, .mph-buttons .sppb-btn-primary:focus, .mph-buttons .sppb-btn-accent:hover, .mph-buttons .sppb-btn-accent:focus, .mph-buttons input[type="submit"]:hover, .mph-buttons button[type="submit"]:hover { background-color: var(--mph-accent-dark, #a51e1e) !important; border-color: var(--mph-accent-dark, #a51e1e) !important; color: #fff !important; /* fini le blanc sur blanc */ box-shadow: 0 4px 14px rgba(0,0,0,.14); } /* Bouton secondaire / marine */ .mph-buttons .btn-secondary, .mph-buttons .sppb-btn-dark, .mph-buttons .btn-dark { background-color: var(--mph-primary, #1e2a44) !important; border-color: var(--mph-primary, #1e2a44) !important; color: #fff !important; } .mph-buttons .btn-secondary:hover, .mph-buttons .sppb-btn-dark:hover, .mph-buttons .btn-dark:hover { background-color: var(--mph-primary-dark, #16233c) !important; border-color: var(--mph-primary-dark, #16233c) !important; color: #fff !important; } /* Bouton contour → se remplit au survol (jamais de texte invisible) */ .mph-buttons .btn-outline-primary, .mph-buttons .sppb-btn-outline-primary, .mph-buttons .btn-outline { background-color: transparent !important; border-color: var(--mph-primary, #1e2a44) !important; color: var(--mph-primary, #1e2a44) !important; } .mph-buttons .btn-outline-primary:hover, .mph-buttons .sppb-btn-outline-primary:hover, .mph-buttons .btn-outline:hover { background-color: var(--mph-primary, #1e2a44) !important; color: #fff !important; } /* Micro-interaction discrète à l'appui */ .mph-buttons .btn:active, .mph-buttons .sppb-btn:active { transform: translateY(1px); } /* Focus clavier visible (accessibilité) */ .mph-buttons .btn:focus-visible, .mph-buttons .sppb-btn:focus-visible, .mph-buttons a:focus-visible { outline: 3px solid color-mix(in srgb, var(--mph-accent, #c62828) 45%, transparent); outline-offset: 2px; } /* ------------------------------------------------------------ 2. ESPACEMENTS (.mph-spacing) Rend les rythmes verticaux plus réguliers entre sections SP Page Builder, et resserre les excès. Prudent : n'agit que sur les conteneurs de section, pas sur le contenu interne. ------------------------------------------------------------ */ .mph-spacing .sppb-section { padding-top: clamp(2.5rem, 5vw, 4.5rem); padding-bottom: clamp(2.5rem, 5vw, 4.5rem); } /* Évite le double-espace quand deux sections se suivent sans fond */ .mph-spacing .sppb-section + .sppb-section { padding-top: 0; } .mph-spacing .sppb-row { align-items: stretch; } /* Cartes (actualités, piliers) : hauteurs homogènes */ .mph-spacing .sppb-addon-articles .sppb-article, .mph-spacing .sppb-addon.sppb-addon-feature { height: 100%; } /* Marges de titres plus régulières */ .mph-spacing .sppb-addon-title { margin-bottom: .75em; } /* ------------------------------------------------------------ 3. TYPOGRAPHIE (.mph-type) Améliore lisibilité et hiérarchie sans changer les polices du template : interlignage, épaisseur des titres, largeur de lecture, rendu net. ------------------------------------------------------------ */ .mph-type body, .mph-type .sppb-addon-text, .mph-type p { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .mph-type p { line-height: 1.7; } .mph-type h1, .mph-type h2, .mph-type h3, .mph-type .sppb-addon-title, .mph-type .sppb-section-title { line-height: 1.2; letter-spacing: -.01em; } /* Titres de section un cran plus affirmés */ .mph-type .sppb-addon-title { font-weight: 700; } /* Largeur de lecture confortable pour les gros blocs de texte (articles d'actualité, FAQ) — n'affecte pas les grilles. */ .mph-type .com-content-article__body p, .mph-type .article-intro p { max-width: 72ch; } /* Liens de contenu : soulignés cohérents à l'accent */ .mph-type .sppb-addon-text a:not(.btn):not(.sppb-btn), .mph-type .com-content-article__body a:not(.btn) { color: var(--mph-accent, #c62828); text-underline-offset: .15em; } /* ------------------------------------------------------------ 4. FINITIONS GLOBALES (toujours actives, très prudentes) Détails qui "professionnalisent" sans risque. ------------------------------------------------------------ */ /* Champs de formulaire homogènes (contact, newsletter, simulateur) */ .mph-buttons input[type="text"], .mph-buttons input[type="email"], .mph-buttons input[type="tel"], .mph-buttons select, .mph-buttons textarea { border-radius: var(--mph-radius, 8px); } /* Images de cartes : coins arrondis cohérents avec les boutons */ .mph-spacing .sppb-addon-articles img, .mph-spacing .sppb-addon-single-image img { border-radius: var(--mph-radius, 8px); } /* Respect de prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { .mph-buttons .btn, .mph-buttons .sppb-btn { transition: none !important; } .mph-buttons .btn:active { transform: none; } }