/**
 * MyFinAssure - CSS Global Unifié
 * ================================
 *
 * FICHIER UNIQUE pour toutes les personnalisations CSS du site.
 * Chargé sur toutes les pages frontend (via mu-plugin mfa-performance.php).
 * Fonctionne en local (MAMP) et en production (LWS) sans modification.
 *
 * Les styles Elementor par page sont gérés par Elementor lui-même.
 * Ce fichier contient les OVERRIDES globaux et la charte graphique.
 */

/* ===========================================
   1. VARIABLES CSS - Charte MyFinAssure
   (synchronisées avec Elementor Global Colors)
   =========================================== */
:root {
    /* --- Couleurs Elementor Global --- */
    --e-global-color-primary:   #111827;   /* Texte foncé principal */
    --e-global-color-secondary: #F7F5F2;   /* Fond crème */
    --e-global-color-text:      #666666;   /* Texte courant */
    --e-global-color-accent:    #1F6C69;   /* Vert/teal - couleur signature */
    --e-global-color-2eda113:   #F97316;   /* Orange - CTA / accents */
    --e-global-color-bf876d3:   #FFFFFF;   /* Blanc */

    /* --- Couleurs MyFinAssure internes --- */
    --mfa-green:      #001d39;     /* Bleu marine profond */
    --mfa-orange:     #b86d28;     /* Orange chaud */
    --mfa-teal:       #1F6C69;     /* Vert teal signature */
    --mfa-teal-dark:  #175450;     /* Vert teal foncé (hover) */
    --mfa-orange-cta: #F97316;     /* Orange vif (boutons CTA) */
    --mfa-orange-dark:#E56304;     /* Orange foncé (hover) */
    --mfa-flash-ok:   #00E676;     /* Validation */
    --mfa-flash-no:   #FF1744;     /* Erreur */
    --mfa-text:       #0f172a;     /* Texte principal */
    --mfa-text-muted: #64748b;     /* Texte secondaire */
    --mfa-border:     #e2e8f0;     /* Bordures */
    --mfa-bg:         #F7F5F2;     /* Fond crème */
    --mfa-bg-white:   #FFFFFF;
    --mfa-bg-dark:    #111827;     /* Fond sombre (header/footer) */

    /* --- Typographie --- */
    --mfa-font-body:    'Segoe UI', system-ui, -apple-system, sans-serif;
    --mfa-font-heading: 'Montserrat', sans-serif;

    /* --- Espacement --- */
    --mfa-radius:    0px;
    --mfa-radius-lg: 0px;
    --mfa-shadow:    0 2px 8px rgba(0,0,0,0.08);
    --mfa-shadow-lg: 0 4px 16px rgba(0,0,0,0.12);
    --mfa-transition: all 0.3s ease;
}

/* ===========================================
   2. BASE & RESET
   =========================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
}

body {
    font-family: var(--mfa-font-body);
    color: var(--mfa-text);
    background-color: var(--mfa-bg-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--mfa-teal);
    text-decoration: none;
    transition: var(--mfa-transition);
}

a:hover,
a:focus {
    color: var(--mfa-teal-dark);
}

/* ===========================================
   3. TYPOGRAPHIE
   =========================================== */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
    font-family: var(--mfa-font-heading);
    font-weight: 700;
    line-height: 1.25;
    color: var(--mfa-teal);
}

h1, .elementor-size-xxl { font-size: clamp(1.8rem, 4vw, 2.5rem); }
h2, .elementor-size-xl  { font-size: clamp(1.5rem, 3vw, 2rem); }
h3, .elementor-size-lg  { font-size: clamp(1.25rem, 2.5vw, 1.6rem); }
h4, .elementor-size-md  { font-size: clamp(1.1rem, 2vw, 1.3rem); }

p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--mfa-text);
}

/* ===========================================
   3b. LAYOUT GLOBAL — Conteneur principal
   =========================================== */

/* Empecher tout debordement horizontal */
.site-main,
.page-content,
.entry-content,
main {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Cacher le titre WP par defaut quand le contenu a son propre hero */
.page .entry-header,
.page .page-header,
body.page .entry-title {
    display: none !important;
}

/* ===========================================
   4. NAVIGATION & HEADER — Custom MFA Header
   =========================================== */

/* --- Header Container --- */
.mfa-header {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    z-index: 999999;
    background: #fff;
    border-bottom: 1px solid var(--mfa-border);
    transition: box-shadow 0.3s ease, background 0.3s ease;
}

.mfa-header.is-sticky {
    box-shadow: 0 2px 16px rgba(0,0,0,0.1);
}

/* Admin bar offset — !important pour battre .mfa-header { top: 0 !important } */
.admin-bar .mfa-header {
    top: 32px !important;
}
@media (max-width: 768px) {
    .admin-bar .mfa-header { top: 46px !important; }
}

/* WordPress admin bar doit rester au-dessus du header custom */
#wpadminbar {
    z-index: 1000000 !important;
}

/* Push page content below fixed header */
body {
    padding-top: 80px !important;
}
.admin-bar body {
    padding-top: 112px !important;
}

.mfa-header__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    height: 80px;
    gap: 32px;
}

/* --- Logo --- */
.mfa-header__logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.mfa-header__logo img {
    height: 50px;
    width: auto;
    display: block;
}

/* --- Desktop Navigation --- */
.mfa-nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

.mfa-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.mfa-nav__list li {
    position: relative;
}

.mfa-nav__list > li > a {
    display: block;
    padding: 10px 16px;
    font-family: var(--mfa-font-heading);
    font-size: 15px;
    font-weight: 500;
    color: var(--mfa-text);
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.mfa-nav__list > li > a:hover,
.mfa-nav__list > li.current-menu-item > a,
.mfa-nav__list > li.current-menu-ancestor > a {
    color: var(--mfa-teal);
    background: rgba(31,108,105,0.06);
}

/* Dropdown arrow for parent items */
.mfa-nav__list > li.menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 6px;
    vertical-align: middle;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    opacity: 0.5;
    transition: transform 0.2s ease;
}

/* --- Sub-menus (Desktop) --- */
.mfa-nav__list .sub-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 220px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    border: 1px solid var(--mfa-border);
    list-style: none;
    margin: 0;
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 100;
}

.mfa-nav__list li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.mfa-nav__list .sub-menu li a {
    display: block;
    /* MFA responsive : touch target 48px = max(iOS 44, Android Material 48) */
    padding: 12px 16px;
    min-height: 48px;
    box-sizing: border-box;
    font-family: var(--mfa-font-heading);
    font-size: 14px;
    font-weight: 400;
    color: var(--mfa-text);
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.mfa-nav__list .sub-menu li a:hover {
    color: var(--mfa-teal);
    background: rgba(31,108,105,0.06);
}

.mfa-nav__list .sub-menu li.current-menu-item a {
    color: var(--mfa-teal);
    font-weight: 500;
}

/* --- Header CTA "Devis gratuit" : style ghost/icone (sans fond) --- */
.mfa-header__cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    background: transparent;
    color: var(--mfa-orange-cta) !important;
    font-family: var(--mfa-font-heading);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease;
    white-space: nowrap;
    line-height: 1;
}

.mfa-header__cta::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/><line x1='9' y1='14' x2='15' y2='14'/><line x1='9' y1='18' x2='15' y2='18'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/><line x1='9' y1='14' x2='15' y2='14'/><line x1='9' y1='18' x2='15' y2='18'/></svg>") no-repeat center / contain;
}

.mfa-header__cta:hover {
    background: rgba(249, 115, 22, 0.08);
    color: var(--mfa-orange-dark) !important;
    transform: none;
    box-shadow: none;
}

/* --- Header Actions Container --- */
.mfa-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* --- Account Button (Mon Espace / Connexion) : style ghost/icone --- */
.mfa-header__account {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    background: transparent;
    color: var(--mfa-teal) !important;
    font-family: var(--mfa-font-heading);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease;
    white-space: nowrap;
    line-height: 1;
}

.mfa-header__account svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    stroke-width: 2.2;
}

.mfa-header__account:hover {
    background: rgba(31, 108, 105, 0.08);
    color: #165451 !important;
    transform: none;
    box-shadow: none;
}

/* --- Mobile Toggle (Hamburger) --- */
.mfa-header__toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
    transition: background 0.2s ease;
}

.mfa-header__toggle:hover {
    background: rgba(0,0,0,0.05);
}

.mfa-header__toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--mfa-text);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.mfa-header__toggle.is-active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.mfa-header__toggle.is-active span:nth-child(2) {
    opacity: 0;
}
.mfa-header__toggle.is-active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* --- Mobile Menu Panel --- */
.mfa-mobile-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid var(--mfa-border);
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.mfa-mobile-menu.is-open {
    /* MFA responsive : viewport - header (64px) pour eviter contenu coupe sur petits ecrans */
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.mfa-mobile-menu__list {
    list-style: none;
    margin: 0;
    padding: 12px 24px;
}

.mfa-mobile-menu__list li {
    border-bottom: 1px solid var(--mfa-border);
}

.mfa-mobile-menu__list li:last-child {
    border-bottom: none;
}

.mfa-mobile-menu__list > li > a {
    display: block;
    padding: 14px 0;
    font-family: var(--mfa-font-heading);
    font-size: 16px;
    font-weight: 500;
    color: var(--mfa-text);
    text-decoration: none;
}

.mfa-mobile-menu__list > li.menu-item-has-children > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mfa-mobile-menu__list > li.menu-item-has-children > a::after {
    content: '';
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--mfa-text-muted);
    border-bottom: 2px solid var(--mfa-text-muted);
    transform: rotate(45deg);
    transition: transform 0.3s;
    flex-shrink: 0;
    margin-left: 12px;
}

.mfa-mobile-menu__list > li.menu-item-has-children.sub-open > a::after {
    transform: rotate(-135deg);
}

.mfa-mobile-menu__list > li.menu-item-has-children.sub-open > a {
    color: var(--mfa-teal);
}

.mfa-mobile-menu__list > li > a:hover {
    color: var(--mfa-teal);
}

/* Mobile sub-menus */
.mfa-mobile-menu__list .sub-menu {
    list-style: none;
    padding: 0 0 8px 16px;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.mfa-mobile-menu__list li.sub-open > .sub-menu {
    max-height: 500px;
}

.mfa-mobile-menu__list .sub-menu li {
    border-bottom: none;
}

.mfa-mobile-menu__list .sub-menu li a {
    display: block;
    padding: 10px 0;
    font-size: 14px;
    color: var(--mfa-text-muted);
    text-decoration: none;
}

.mfa-mobile-menu__list .sub-menu li a:hover {
    color: var(--mfa-teal);
}

/* Mobile Account link */
.mfa-mobile-menu__account {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 24px 0;
    padding: 14px 24px;
    background: var(--mfa-teal);
    color: #fff !important;
    font-family: var(--mfa-font-heading);
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
    justify-content: center;
}

.mfa-mobile-menu__account:hover {
    background: #165451;
    color: #fff !important;
}

/* Mobile CTA */
.mfa-mobile-menu__cta {
    display: block;
    margin: 8px 24px 20px;
    padding: 14px 24px;
    background: var(--mfa-orange-cta);
    color: #fff !important;
    font-family: var(--mfa-font-heading);
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border-radius: 8px;
}

/* Prevent body scroll when menu is open */
body.mfa-menu-open {
    overflow: hidden;
}

/* Override Devis CTA in nav (we have the header CTA button instead) */
.mfa-header .mfa-menu-cta > a,
.mfa-header li.mfa-menu-cta > a {
    background-color: transparent !important;
    color: var(--mfa-text) !important;
    padding: 10px 16px !important;
}
.mfa-header .mfa-menu-cta > a:hover,
.mfa-header li.mfa-menu-cta > a:hover {
    background-color: rgba(31,108,105,0.06) !important;
    color: var(--mfa-teal) !important;
    transform: none !important;
}

/* Le header utilise maintenant la classe .mfa-header directement */

/* --- Responsive: Tablet & Mobile --- */
@media (max-width: 1024px) {
    .mfa-nav,
    .mfa-header__actions {
        display: none;
    }

    .mfa-header__toggle {
        display: flex;
    }

    .mfa-mobile-menu {
        display: block;
    }

    .mfa-header__inner {
        justify-content: space-between;
        height: 70px;
    }

    .mfa-header__logo img {
        height: 42px;
    }

    body {
        padding-top: 70px !important;
    }
    .admin-bar body {
        padding-top: 102px !important;
    }
}

@media (max-width: 480px) {
    .mfa-header__inner {
        padding: 0 16px;
        height: 64px;
    }

    .mfa-header__logo img {
        height: 36px;
    }

    body {
        padding-top: 64px !important;
    }
    .admin-bar body {
        padding-top: 96px !important;
    }
}

/* Legacy Elementor nav styles — keep for sub-pages using Elementor */
.elementor-nav-menu .elementor-item {
    font-family: var(--mfa-font-heading);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: 0.02em;
    transition: var(--mfa-transition);
}

.elementor-nav-menu .elementor-item:hover,
.elementor-nav-menu .elementor-item.elementor-item-active {
    color: var(--mfa-teal) !important;
}

.elementor-nav-menu--dropdown .elementor-item {
    font-size: 14px;
    padding: 8px 16px;
}

.elementor-widget-divider .elementor-divider-separator {
    transition: var(--mfa-transition);
}

/* ===========================================
   5. BOUTONS & CTA
   =========================================== */

/* Base boutons Elementor */
.elementor-button {
    border-radius: var(--mfa-radius) !important;
    font-family: var(--mfa-font-heading) !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em;
    transition: var(--mfa-transition) !important;
    text-transform: none;
}

.elementor-button:hover {
    transform: translateY(-2px);
    box-shadow: var(--mfa-shadow-lg);
}

.elementor-button:active {
    transform: translateY(0);
}

/* Bouton orange (CTA principal) */
.elementor-button[style*="F97316"],
.elementor-widget-button .elementor-button {
    border-radius: var(--mfa-radius) !important;
}

/* ===========================================
   6. SECTIONS & CONTAINERS ELEMENTOR
   =========================================== */

/* Scroll smooth vers les ancres */
html {
    scroll-behavior: smooth;
}

.elementor-section,
.e-con {
    scroll-margin-top: 80px;
}

/* Cards / Encadrés */
.elementor-widget-icon-box .elementor-icon-box-wrapper {
    transition: var(--mfa-transition);
}

.elementor-widget-icon-box:hover .elementor-icon-box-wrapper {
    transform: translateY(-3px);
    box-shadow: var(--mfa-shadow);
}

/* Image boxes */
.elementor-widget-image-box .elementor-image-box-wrapper {
    transition: var(--mfa-transition);
}

/* ===========================================
   7. FORMULAIRES
   =========================================== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="url"],
input[type="search"],
input[type="date"],
textarea,
select,
.elementor-field-textual {
    border: 1px solid var(--mfa-border) !important;
    border-radius: var(--mfa-radius) !important;
    padding: 10px 14px !important;
    font-family: var(--mfa-font-body) !important;
    font-size: 14px !important;
    transition: var(--mfa-transition) !important;
    background-color: var(--mfa-bg-white);
}

input:focus,
textarea:focus,
select:focus,
.elementor-field-textual:focus {
    outline: none !important;
    border-color: var(--mfa-teal) !important;
    box-shadow: 0 0 0 3px rgba(31, 108, 105, 0.15) !important;
}

/* Bouton submit formulaires */
.elementor-button[type="submit"],
.elementor-form .elementor-button {
    background-color: var(--mfa-teal) !important;
    color: var(--mfa-bg-white) !important;
}

.elementor-button[type="submit"]:hover,
.elementor-form .elementor-button:hover {
    background-color: var(--mfa-teal-dark) !important;
}

/* ===========================================
   8. WOOCOMMERCE
   =========================================== */

/* Boutons WooCommerce */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    background-color: var(--mfa-teal) !important;
    color: var(--mfa-bg-white) !important;
    border-radius: var(--mfa-radius) !important;
    font-family: var(--mfa-font-heading);
    font-weight: 600;
    transition: var(--mfa-transition);
    border: none !important;
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
    background-color: var(--mfa-teal-dark) !important;
    transform: translateY(-1px);
    box-shadow: var(--mfa-shadow);
}

/* Bouton alt (orange) */
.woocommerce .button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
    background-color: var(--mfa-orange-cta) !important;
}

.woocommerce .button.alt:hover {
    background-color: var(--mfa-orange-dark) !important;
}

/* Prix */
.woocommerce .price .amount,
.woocommerce-Price-amount {
    color: var(--mfa-teal);
    font-weight: 700;
}

/* Badges */
.woocommerce .onsale {
    background-color: var(--mfa-orange-cta);
    border-radius: var(--mfa-radius);
}

/* Messages */
.woocommerce-message,
.woocommerce-info {
    border-top-color: var(--mfa-teal);
}

.woocommerce-error {
    border-top-color: var(--mfa-flash-no);
}

/* ===========================================
   8b. WOOCOMMERCE — SINGLE PRODUCT PREMIUM
   =========================================== */

/* ── Page wrapper ── */
.single-product .site-main,
.single-product .page-content,
.single-product .elementor-widget-theme-post-content > .elementor-widget-container {
    padding: 0 !important;
    max-width: 100% !important;
}

.single-product .woocommerce {
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* ── Breadcrumb ── */
.single-product .woocommerce-breadcrumb {
    max-width: 1140px;
    margin: 0 auto;
    padding: 16px 24px;
    font-size: 13px;
    color: var(--mfa-text-muted);
    font-family: var(--mfa-font-body);
}

.single-product .woocommerce-breadcrumb a {
    color: var(--mfa-teal);
    text-decoration: none;
    transition: var(--mfa-transition);
}

.single-product .woocommerce-breadcrumb a:hover {
    color: var(--mfa-orange-cta);
}

/* ── Product hero wrapper ── */
.single-product div.product {
    max-width: 1140px !important;
    margin: 0 auto !important;
    padding: 40px 24px 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 48px !important;
    align-items: start !important;
}

/* ── Image gallery ── */
.single-product div.product div.images {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    position: sticky;
    top: 24px;
}

.single-product .woocommerce-product-gallery {
    overflow: hidden;
    position: relative;
    background: #f1f5f9;
    border: 1px solid var(--mfa-border);
}

/* Teal accent bar at top of image */
.single-product .woocommerce-product-gallery::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, #1F6C69, #2a9d8f);
    z-index: 2;
}

.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image {
    position: relative;
    padding: 20px;
    background: #f1f5f9;
}

.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image img {
    width: 100% !important;
    height: auto !important;
    display: block;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.12);
}

/* Hide the zoom icon for a cleaner look */
.single-product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
    display: none !important;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding: 0;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs li {
    list-style: none;
    flex: 0 0 72px;
    border: 1px solid var(--mfa-border);
    transition: var(--mfa-transition);
    cursor: pointer;
}

.single-product .woocommerce-product-gallery .flex-control-thumbs li:hover,
.single-product .woocommerce-product-gallery .flex-control-thumbs li .flex-active {
    border-color: var(--mfa-teal);
}

/* ── Sale badge ── */
.single-product .onsale {
    position: absolute !important;
    top: 16px !important;
    left: 16px !important;
    right: auto !important;
    z-index: 2;
    background: var(--mfa-orange-cta) !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 6px 14px !important;
    min-height: auto !important;
    min-width: auto !important;
    line-height: 1.4 !important;
    border-radius: 0 !important;
}

/* ── Summary ── */
.single-product div.product div.summary {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Titre produit */
.single-product .product_title.entry-title {
    font-family: var(--mfa-font-body) !important;
    font-size: clamp(26px, 3vw, 34px) !important;
    font-weight: 800 !important;
    color: var(--mfa-text) !important;
    letter-spacing: -0.02em;
    line-height: 1.2 !important;
    margin: 0 0 20px !important;
}

/* Prix */
.single-product div.product p.price {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: rgba(31, 108, 105, 0.06);
    padding: 12px 20px;
    margin: 0 0 24px !important;
    border-left: 3px solid var(--mfa-teal);
}

.single-product div.product p.price .woocommerce-Price-amount {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: var(--mfa-teal) !important;
}

.single-product div.product p.price del .woocommerce-Price-amount {
    font-size: 18px !important;
    font-weight: 400 !important;
    color: var(--mfa-text-muted) !important;
}

.single-product div.product p.price ins {
    text-decoration: none;
}

/* Description courte */
.single-product .woocommerce-product-details__short-description {
    font-size: 15px;
    line-height: 1.8;
    color: #475569;
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--mfa-border);
}

.single-product .woocommerce-product-details__short-description ul {
    list-style: none;
    padding: 0;
    margin: 16px 0;
}

.single-product .woocommerce-product-details__short-description li {
    position: relative;
    padding-left: 24px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.6;
}

.single-product .woocommerce-product-details__short-description li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 8px;
    height: 8px;
    background: var(--mfa-teal);
}

/* ── Add to cart ── */
.single-product .cart {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 24px 0 16px !important;
    padding: 0 !important;
    border: none !important;
}

.single-product .cart .quantity {
    width: auto !important;
}

.single-product .cart .quantity .qty {
    width: 60px !important;
    height: 50px !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border: 1px solid var(--mfa-border) !important;
    background: #fff !important;
    color: var(--mfa-text) !important;
    padding: 0 !important;
}

.single-product .cart .single_add_to_cart_button {
    flex: 1 !important;
    height: 50px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    background: var(--mfa-orange-cta) !important;
    color: #fff !important;
    border: none !important;
    cursor: pointer;
    transition: var(--mfa-transition) !important;
}

.single-product .cart .single_add_to_cart_button:hover {
    background: var(--mfa-orange-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(249, 115, 22, 0.3) !important;
}

/* ── Product meta (catégories, étiquettes) ── */
.single-product .product_meta {
    margin-top: 24px !important;
    padding-top: 0 !important;
    font-size: 13px;
    color: var(--mfa-text-muted);
    line-height: 2;
}

.single-product .product_meta > span {
    display: block;
}

.single-product .product_meta a {
    color: var(--mfa-teal);
    text-decoration: none;
    transition: var(--mfa-transition);
}

.single-product .product_meta a:hover {
    color: var(--mfa-orange-cta);
}

/* ── Tabs ── */
.single-product .woocommerce-tabs {
    grid-column: 1 / -1 !important;
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    margin-top: 48px !important;
    padding: 0 !important;
    background: #f8fafc;
    border-top: 1px solid var(--mfa-border);
    max-width: none !important;
}

.single-product .woocommerce-tabs ul.tabs {
    display: flex !important;
    gap: 0 !important;
    padding: 0 24px !important;
    margin: 0 auto !important;
    max-width: 1200px !important;
    border-bottom: 2px solid var(--mfa-border) !important;
    list-style: none !important;
    background: transparent;
}

.single-product .woocommerce-tabs ul.tabs::before {
    display: none !important;
}

.single-product .woocommerce-tabs ul.tabs li {
    background: none !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

.single-product .woocommerce-tabs ul.tabs li::before,
.single-product .woocommerce-tabs ul.tabs li::after {
    display: none !important;
}

.single-product .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 14px 28px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mfa-text-muted) !important;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: var(--mfa-transition);
    text-decoration: none !important;
}

.single-product .woocommerce-tabs ul.tabs li.active a {
    color: var(--mfa-teal) !important;
    border-bottom-color: var(--mfa-teal) !important;
}

.single-product .woocommerce-tabs ul.tabs li a:hover {
    color: var(--mfa-text) !important;
}

/* Tab content */
.single-product .woocommerce-tabs .panel {
    padding: 48px 24px 56px !important;
    margin: 0 auto !important;
    max-width: 1200px !important;
    font-size: 15px;
    line-height: 1.8;
    color: var(--mfa-text);
    overflow: visible !important;
}

.single-product .woocommerce-tabs .panel > h2:first-child {
    display: none !important;
}

.single-product .woocommerce-tabs .panel h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--mfa-text);
    margin: 32px 0 12px;
}

.single-product .woocommerce-tabs .panel p {
    margin-bottom: 16px;
}

/* Default list styles — override for custom components */
.single-product .woocommerce-tabs .panel ul:not(.mfa-docs-list),
.single-product .woocommerce-tabs .panel ol:not(.mfa-steps) {
    padding-left: 20px;
    margin-bottom: 20px;
}

.single-product .woocommerce-tabs .panel ol.mfa-steps {
    padding-left: 0 !important;
    margin-bottom: 0 !important;
}

.single-product .woocommerce-tabs .panel ul.mfa-docs-list {
    padding-left: 0 !important;
}

.single-product .woocommerce-tabs .panel li {
    margin-bottom: 8px;
    line-height: 1.7;
}

/* ── Related products ── */
.single-product .related.products,
.single-product .upsells.products,
.single-product section.related.products,
.single-product section.upsells.products {
    grid-column: 1 / -1 !important;
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    margin-left: -50vw !important;
    max-width: none !important;
    padding: 56px 24px 64px !important;
    border-top: 1px solid var(--mfa-border);
    background: #f8fafc !important;
    clear: both !important;
    box-sizing: border-box !important;
}

.single-product .related.products > h2,
.single-product .related.products > ul.products,
.single-product .upsells.products > h2,
.single-product .upsells.products > ul.products {
    max-width: 1200px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.single-product .related.products > h2,
.single-product .upsells.products > h2,
.single-product section.related.products > h2 {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: var(--mfa-text) !important;
    letter-spacing: -0.03em;
    margin: 0 auto 36px !important;
    text-align: center !important;
    max-width: 1200px;
}

/* Grid: override WooCommerce columns-4 float layout with CSS Grid */
.single-product .related.products ul.products,
.single-product .upsells.products ul.products,
.woocommerce .single-product .related.products ul.products[class*="columns-"],
.woocommerce .single-product .upsells.products ul.products[class*="columns-"] {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
    max-width: 1200px;
}

/* Override WooCommerce columns-4 li width/margin/float */
.single-product .related.products ul.products li.product,
.single-product .upsells.products ul.products li.product,
.woocommerce .single-product .related.products ul.products[class*="columns-"] li.product,
.woocommerce .single-product .upsells.products ul.products[class*="columns-"] li.product {
    width: 100% !important;
    margin: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    border: 1px solid var(--mfa-border);
    background: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    float: none !important;
    overflow: hidden;
    position: relative;
    display: flex !important;
    flex-direction: column !important;
}

/* Animated teal top line on hover */
.single-product .related.products ul.products li.product::before,
.single-product .upsells.products ul.products li.product::before {
    content: '' !important;
    position: absolute;
    top: 0; left: 0;
    width: 0; height: 3px;
    background: var(--mfa-teal);
    transition: width 0.35s ease;
    z-index: 1;
}

.single-product .related.products ul.products li.product:hover::before,
.single-product .upsells.products ul.products li.product:hover::before {
    width: 100%;
}

.single-product .related.products ul.products li.product:hover,
.single-product .upsells.products ul.products li.product:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -20px rgba(15, 23, 42, 0.18);
}

/* Consistent image sizing */
.single-product .related.products ul.products li.product a img,
.single-product .upsells.products ul.products li.product a img {
    margin: 0 !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

.single-product .related.products ul.products li.product .woocommerce-loop-product__title,
.single-product .upsells.products ul.products li.product .woocommerce-loop-product__title {
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 16px 20px 6px !important;
    color: var(--mfa-text);
    line-height: 1.4 !important;
}

.single-product .related.products ul.products li.product .price,
.single-product .upsells.products ul.products li.product .price {
    padding: 0 20px 12px !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    color: var(--mfa-teal) !important;
}

.single-product .related.products ul.products li.product .button,
.single-product .upsells.products ul.products li.product .button {
    width: calc(100% - 40px) !important;
    margin: auto 20px 20px !important;
    text-align: center !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 12px !important;
    background: var(--mfa-teal) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 0 !important;
    transition: background 0.3s ease !important;
}

.single-product .related.products ul.products li.product .button:hover,
.single-product .upsells.products ul.products li.product .button:hover {
    background: var(--mfa-orange-cta) !important;
}

/* ── Responsive produit ── */
@media (max-width: 768px) {
    .single-product div.product {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        padding: 20px 16px 32px !important;
    }

    .single-product .product_title.entry-title {
        font-size: 24px !important;
    }

    .single-product div.product p.price .woocommerce-Price-amount {
        font-size: 24px !important;
    }

    .single-product .cart {
        flex-wrap: wrap !important;
    }

    .single-product .cart .single_add_to_cart_button {
        width: 100% !important;
    }

    .single-product .woocommerce-tabs ul.tabs li a {
        padding: 12px 16px !important;
        font-size: 12px !important;
    }

    .single-product .related.products ul.products,
    .single-product .upsells.products ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .single-product .woocommerce-tabs ul.tabs {
        flex-wrap: wrap;
    }

    .single-product .related.products ul.products,
    .single-product .upsells.products ul.products {
        grid-template-columns: 1fr !important;
    }
}

/* ===========================================
   9. PLUGINS MYFINASSURE (simulateurs, devis, etc.)
   =========================================== */

/* Style commun à tous les formulaires de simulateur/devis */
.mfa-form-wrapper,
.mfa-simulator,
.fiscal-sim-container,
.mfa-devis-container,
[class*="myfinassure-"] {
    font-family: var(--mfa-font-body);
}

[class*="myfinassure-"] input,
[class*="myfinassure-"] select,
[class*="myfinassure-"] textarea,
.fiscal-sim-container input,
.fiscal-sim-container select {
    border: 1px solid var(--mfa-border);
    border-radius: var(--mfa-radius);
    padding: 10px 14px;
    font-size: 14px;
    transition: var(--mfa-transition);
}

[class*="myfinassure-"] input:focus,
[class*="myfinassure-"] select:focus,
.fiscal-sim-container input:focus,
.fiscal-sim-container select:focus {
    border-color: var(--mfa-teal);
    box-shadow: 0 0 0 3px rgba(31, 108, 105, 0.15);
    outline: none;
}

/* Boutons des plugins MFA */
[class*="myfinassure-"] button,
[class*="myfinassure-"] .btn,
[class*="myfinassure-"] input[type="submit"],
.fiscal-sim-container button {
    background-color: var(--mfa-teal);
    color: white;
    border: none;
    border-radius: var(--mfa-radius);
    padding: 10px 20px;
    font-family: var(--mfa-font-heading);
    font-weight: 600;
    cursor: pointer;
    transition: var(--mfa-transition);
}

[class*="myfinassure-"] button:hover,
[class*="myfinassure-"] .btn:hover,
.fiscal-sim-container button:hover {
    background-color: var(--mfa-teal-dark);
    transform: translateY(-1px);
    box-shadow: var(--mfa-shadow);
}

/* Résultats des simulateurs */
[class*="myfinassure-"] .result,
[class*="myfinassure-"] .mfa-result,
.fiscal-sim-container .result {
    background-color: var(--mfa-bg);
    border: 1px solid var(--mfa-border);
    border-radius: var(--mfa-radius-lg);
    padding: 20px;
}

/* Flash messages / notifications */
.mfa-flash-ok,
.mfa-success {
    color: var(--mfa-flash-ok);
    border-color: var(--mfa-flash-ok);
}

.mfa-flash-no,
.mfa-error {
    color: var(--mfa-flash-no);
    border-color: var(--mfa-flash-no);
}

/* ===========================================
   10. FOOTER
   =========================================== */
footer .elementor-heading-title,
footer h1, footer h2, footer h3, footer h4 {
    color: var(--mfa-bg-white);
}

footer a {
    color: rgba(255,255,255,0.8);
    transition: var(--mfa-transition);
}

footer a:hover {
    color: var(--mfa-bg-white);
}

footer p {
    color: rgba(255,255,255,0.7);
}

/* ===========================================
   11. WHATSAPP BUTTON
   =========================================== */
.cht-btn {
    transition: var(--mfa-transition) !important;
}

.cht-btn:hover {
    transform: scale(1.1) !important;
}

/* ===========================================
   12. COOKIE BANNER (CookieAdmin)
   =========================================== */
.cookieadmin-banner {
    font-family: var(--mfa-font-body) !important;
    border-radius: var(--mfa-radius-lg) !important;
}

.cookieadmin-banner .cookieadmin-btn-accept {
    background-color: var(--mfa-teal) !important;
    border-radius: var(--mfa-radius) !important;
    font-weight: 600;
}

/* ===========================================
   13. UTILITAIRES
   =========================================== */

/* Visually hidden mais accessible */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    border: 0;
}

/* Animations d'entrée légères */
.elementor-widget {
    animation-duration: 0.4s;
}

/* Texte tronqué */
.mfa-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===========================================
   14. RESPONSIVE
   =========================================== */
@media (max-width: 1024px) {
    h1, .elementor-size-xxl { font-size: 1.8rem; }
    h2, .elementor-size-xl  { font-size: 1.5rem; }
}

@media (max-width: 768px) {
    h1, .elementor-size-xxl { font-size: 1.5rem; }
    h2, .elementor-size-xl  { font-size: 1.3rem; }
    h3, .elementor-size-lg  { font-size: 1.15rem; }

    .elementor-button {
        width: 100%;
        text-align: center;
    }

    /* Formulaires full-width mobile */
    input, textarea, select,
    .elementor-field-textual {
        width: 100% !important;
    }
}

/* ===========================================
   OVERRIDE GLOBAL — ZERO coins arrondis
   =========================================== */
*,
*::before,
*::after {
    border-radius: 0 !important;
}

/* ===========================================
   PERSONNALISATIONS FUTURES
   Ajoutez vos styles ci-dessous.
   Utilisez les variables --mfa-* pour la cohérence.
   =========================================== */


/* Menu CTA Button - Devis */
.mfa-menu-cta > a,
li.mfa-menu-cta > a {
    background-color: #F97316 !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    padding: 8px 20px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}
.mfa-menu-cta > a:hover,
li.mfa-menu-cta > a:hover {
    background-color: #ea580c !important;
    transform: translateY(-1px) !important;
}

/* ===========================================
   15. HERO BANNER V2 — Composant partagé
   =========================================== */

/* --- Base hero --- */
.mfa-hero-v2 {
    background: linear-gradient(135deg, #001d39 0%, #1a5c59 100%);
    padding: 0;
    margin: 0;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    position: relative;
}
.mfa-hero-v2__inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 48px 40px;
}

/* --- Titre & texte --- */
.mfa-hero-v2__title {
    color: #fff !important;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 12px;
    letter-spacing: -0.02em;
}
.mfa-hero-v2__subtitle {
    color: rgba(255,255,255,0.75) !important;
    font-size: 16px;
    line-height: 1.55;
    margin: 0 0 20px;
    max-width: 560px;
}
.mfa-hero-v2__subtitle strong { color: #F97316; }
.mfa-hero-v2__highlight {
    color: #F97316 !important;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0 0 8px;
}
.mfa-hero-v2__trust {
    color: rgba(255,255,255,0.45) !important;
    font-size: 13px;
    margin: 12px 0 0;
}

/* --- Badge --- */
.mfa-hero-v2__badge {
    display: inline-block;
    background: #F97316;
    color: #fff;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 12px;
}

/* --- Breadcrumb --- */
.mfa-hero-v2__breadcrumb {
    display: inline-block;
    color: rgba(255,255,255,0.5) !important;
    font-size: 13px;
    text-decoration: none;
    margin-bottom: 8px;
    transition: color 0.2s;
}
.mfa-hero-v2__breadcrumb:hover { color: #fff !important; }

/* --- CTA bouton --- */
.mfa-hero-v2__cta {
    display: inline-block;
    background: #F97316;
    color: #fff !important;
    padding: 12px 32px;
    border-radius: 8px;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 15px;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(249,115,22,0.3);
}
.mfa-hero-v2__cta:hover {
    background: #ea580c;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(249,115,22,0.4);
}

/* --- Variant: HOME (2 colonnes) --- */
.mfa-hero--home .mfa-hero-v2__inner {
    display: flex;
    align-items: center;
    gap: 48px;
    padding: 56px 40px;
}
.mfa-hero--home .mfa-hero-v2__text {
    flex: 1.1;
    min-width: 320px;
}
.mfa-hero--home .mfa-hero-v2__title {
    font-size: 38px;
}
.mfa-hero--home .mfa-hero-v2__stats {
    flex: 0.9;
    min-width: 280px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.mfa-hero-v2__stat {
    text-align: center;
    background: rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 20px 12px;
    border: 1px solid rgba(255,255,255,0.08);
}
.mfa-hero-v2__stat-num {
    display: block;
    font-size: 38px;             /* etait 30px : agrandi pour impact */
    font-weight: 900;            /* etait 800 : plus epais */
    color: #F97316;
    line-height: 1;
    letter-spacing: -0.02em;     /* serre les chiffres pour un look plus pro */
}
.mfa-hero-v2__stat-label {
    display: block;
    font-size: 12.5px;
    color: rgba(255,255,255,0.7); /* legerement plus lisible */
    margin-top: 6px;
    font-weight: 500;
}

/* --- Variant: STANDARD (sous-pages) --- */
.mfa-hero--standard .mfa-hero-v2__inner {
    text-align: center;
    padding: 40px 40px;
}
.mfa-hero--standard .mfa-hero-v2__subtitle {
    margin-left: auto;
    margin-right: auto;
}

/* --- Variant: ACCENT (fiscalité / frontalier) --- */
.mfa-hero--accent {
    background: linear-gradient(135deg, #001d39 0%, #0d3d3b 100%);
}
.mfa-hero--accent .mfa-hero-v2__inner {
    text-align: center;
    padding: 40px 40px;
}
.mfa-hero--accent .mfa-hero-v2__subtitle {
    margin-left: auto;
    margin-right: auto;
}

/* --- Variant: COMPACT (contact, etc.) --- */
.mfa-hero--compact .mfa-hero-v2__inner {
    text-align: center;
    padding: 32px 40px;
}
.mfa-hero--compact .mfa-hero-v2__title {
    font-size: 28px;
    margin-bottom: 6px;
}

/* --- Hero V2 Responsive --- */
@media (max-width: 768px) {
    .mfa-hero-v2__inner { padding: 28px 18px; }
    .mfa-hero-v2__title { font-size: 24px; }
    .mfa-hero-v2__subtitle { font-size: 14px; margin-bottom: 14px; }
    .mfa-hero-v2__highlight { font-size: 12px; margin-bottom: 6px; }
    .mfa-hero-v2__cta { padding: 10px 24px; font-size: 14px; }
    .mfa-hero--home .mfa-hero-v2__inner {
        flex-direction: column;
        gap: 18px;
        padding: 30px 18px;
    }
    .mfa-hero--home .mfa-hero-v2__text { min-width: unset; }
    .mfa-hero--home .mfa-hero-v2__title { font-size: 26px; }
    .mfa-hero--home .mfa-hero-v2__stats { gap: 10px; }
    .mfa-hero-v2__stat { padding: 14px 10px; }
    .mfa-hero-v2__stat-num { font-size: 30px; line-height: 1; }   /* etait 22px */
    .mfa-hero-v2__stat-label { font-size: 11.5px; margin-top: 5px; }
    .mfa-hero--standard .mfa-hero-v2__inner { padding: 28px 18px; }
    .mfa-hero--accent .mfa-hero-v2__inner { padding: 28px 18px; }
    .mfa-hero--compact .mfa-hero-v2__inner { padding: 22px 18px; }
    .mfa-hero--compact .mfa-hero-v2__title { font-size: 22px; }
}
@media (max-width: 480px) {
    .mfa-hero-v2__inner { padding: 20px 14px; }
    .mfa-hero-v2__title { font-size: 21px; line-height: 1.2; }
    .mfa-hero-v2__subtitle { font-size: 13px; line-height: 1.45; margin-bottom: 12px; }
    .mfa-hero-v2__cta { padding: 10px 20px; font-size: 13px; width: 100%; text-align: center; }
    .mfa-hero-v2__trust { font-size: 11px; }
    .mfa-hero--home .mfa-hero-v2__inner {
        gap: 14px;
        padding: 22px 14px;
    }
    .mfa-hero--home .mfa-hero-v2__title { font-size: 23px; }
    .mfa-hero--home .mfa-hero-v2__stats { grid-template-columns: 1fr 1fr; gap: 8px; }
    .mfa-hero-v2__stat { padding: 12px 8px; border-radius: 8px; }
    .mfa-hero-v2__stat-num { font-size: 26px; line-height: 1; }   /* etait 20px */
    .mfa-hero-v2__stat-label { font-size: 10.5px; margin-top: 4px; }
    .mfa-hero--standard .mfa-hero-v2__inner { padding: 20px 14px; }
    .mfa-hero--accent .mfa-hero-v2__inner { padding: 20px 14px; }
    .mfa-hero--compact .mfa-hero-v2__inner { padding: 16px 14px; }
    .mfa-hero--compact .mfa-hero-v2__title { font-size: 20px; }
}

/* ===========================================
   16. PAGE SECTIONS (contenu sous le hero)
   =========================================== */

/* CTA Button */
.mfa-btn {
    display: inline-block;
    background: #F97316;
    color: #fff !important;
    padding: 16px 40px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 18px;
    transition: all 0.3s ease;
}
.mfa-btn:hover {
    background: #ea580c;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(249,115,22,0.4);
}
.mfa-btn-outline {
    display: inline-block;
    background: transparent;
    color: #fff !important;
    padding: 14px 30px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    border: 2px solid rgba(255,255,255,0.4);
    transition: all 0.3s ease;
}
.mfa-btn-outline:hover {
    border-color: #fff;
    color: #fff !important;
}

/* Poles Section */
.mfa-poles {
    padding: 60px 30px;
    background: #fff;
}
.mfa-poles-inner {
    max-width: 1100px;
    margin: 0 auto;
}
.mfa-section-title {
    text-align: center;
    color: #001d39 !important;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 10px;
}
.mfa-section-subtitle {
    text-align: center;
    color: #666 !important;
    font-size: 16px;
    max-width: 600px;
    margin: 0 auto 40px;
}
.mfa-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.mfa-card {
    background: #f8fafa;
    border-radius: 16px;
    padding: 35px 25px;
    text-align: center;
    border-top: 4px solid #1F6C69;
    box-shadow: 0 2px 15px rgba(0,0,0,0.06);
    transition: transform 0.3s ease;
}
.mfa-card:hover { transform: translateY(-5px); }
.mfa-card-icon {
    width: 56px;
    height: 56px;
    background: #1F6C69;
    border-radius: 50%;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0; /* hide emojis if any remain */
}
.mfa-card-icon svg {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: #fff;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.mfa-card h3 {
    color: #001d39 !important;
    font-size: 22px;
    margin-bottom: 12px;
    font-weight: 700;
}
.mfa-card p {
    color: #555 !important;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 20px;
}
.mfa-card-link {
    color: #F97316 !important;
    font-weight: 600;
    text-decoration: none;
    font-size: 15px;
}
.mfa-card-link:hover { color: #ea580c !important; }

/* Méthode */
.mfa-methode {
    padding: 60px 30px;
    background: #f0f7f7;
}
.mfa-methode-inner {
    max-width: 1000px;
    margin: 0 auto;
}
.mfa-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 40px;
}
.mfa-step { text-align: center; padding: 20px; }
.mfa-step-num {
    width: 48px;
    height: 48px;
    background: #F97316;
    border-radius: 50%;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    font-weight: 800;
}
.mfa-step h4 {
    color: #001d39 !important;
    font-size: 18px;
    margin-bottom: 8px;
    font-weight: 700;
}
.mfa-step p { color: #555 !important; font-size: 14px; line-height: 1.5; }

/* Frontalier section */
.mfa-frontalier {
    background: #001d39;
    padding: 60px 40px;
}
.mfa-frontalier-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    align-items: center;
}
.mfa-frontalier-text { flex: 1.4; min-width: 300px; }
.mfa-frontalier-list { flex: 1; min-width: 280px; }
.mfa-badge {
    display: inline-block;
    background: #F97316;
    color: #fff;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 15px;
}
.mfa-frontalier h2 {
    color: #fff !important;
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 15px;
}
.mfa-frontalier-desc {
    color: #c0d8d6 !important;
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 25px;
}
.mfa-frontalier-btns {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}
.mfa-checklist {
    background: rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 25px;
}
.mfa-check-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    color: #e0e0e0;
    font-size: 15px;
}
.mfa-check-item:last-child { border-bottom: none; }
.mfa-check-mark {
    color: #F97316;
    font-size: 20px;
    margin-right: 12px;
    flex-shrink: 0;
}

/* Réassurance bar */
.mfa-reassurance {
    padding: 40px 30px;
    background: #fff;
}
.mfa-reassurance-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    flex-wrap: wrap;
}
.mfa-reassurance-item { text-align: center; }
.mfa-reassurance-title { font-size: 14px; color: #1F6C69; font-weight: 600; }
.mfa-reassurance-sub { font-size: 12px; color: #888; }
.mfa-reassurance-sep { width: 1px; height: 40px; background: #ddd; }

/* CTA Final */
.mfa-cta-final {
    background: #1F6C69;
    padding: 50px 30px;
    text-align: center;
}
.mfa-cta-final h2 {
    color: #fff !important;
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 10px;
}
.mfa-cta-final p {
    color: rgba(255,255,255,0.85) !important;
    font-size: 16px;
    max-width: 550px;
    margin: 0 auto 25px;
}

/* Footer Homepage */
.mfa-footer {
    background: #001d39;
    padding: 50px 40px 30px;
}
.mfa-footer-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}
.mfa-footer h4 {
    color: #F97316 !important;
    font-size: 16px;
    margin-bottom: 15px;
    font-weight: 700;
}
.mfa-footer p,
.mfa-footer a {
    color: #a0b8c0 !important;
    font-size: 13px;
    line-height: 1.6;
    text-decoration: none;
}
.mfa-footer a:hover { color: #fff !important; }
.mfa-footer-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mfa-copyright {
    background: #00152b;
    padding: 15px 30px;
    text-align: center;
}
.mfa-copyright p {
    color: #667 !important;
    font-size: 12px;
}
.mfa-copyright a { color: #889 !important; text-decoration: none; }

/* Contact page layout */
.mfa-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 30px;
}
.mfa-contact-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.mfa-contact-form label {
    display: block;
    font-size: 14px;
    color: #555;
    margin-bottom: 5px;
}
.mfa-contact-form input,
.mfa-contact-form textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
}
.mfa-contact-form textarea {
    resize: vertical;
}
.mfa-contact-form button {
    border: none;
    cursor: pointer;
    text-align: center;
}
.mfa-contact-info h4 {
    color: #1F6C69;
    margin-bottom: 5px;
}
.mfa-contact-orias {
    background: #f0f7f7;
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
    font-size: 14px;
    color: #555;
}
.mfa-contact-orias strong {
    color: #1F6C69;
}

/* Devis cards 2x2 grid */
.mfa-devis-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 30px;
}
.mfa-devis-grid .mfa-card {
    text-decoration: none;
    cursor: pointer;
}

/* ===========================================
   RESPONSIVE — TABLET (max 1024px)
   =========================================== */
@media (max-width: 1024px) {
    .mfa-cards-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .mfa-poles { padding: 40px 20px; }
    .mfa-methode { padding: 40px 20px; }
    .mfa-frontalier { padding: 40px 24px; }
    .mfa-cta-final { padding: 40px 20px; }
    .mfa-contact-grid { gap: 30px; padding: 30px 20px; }
    .mfa-section-title { font-size: 26px; }
    .mfa-cta-final h2 { font-size: 24px; }
}

/* ===========================================
   RESPONSIVE — MOBILE (max 768px)
   =========================================== */
@media (max-width: 768px) {
    /* Cards: stack 1 col */
    .mfa-cards-grid,
    .mfa-steps-grid { grid-template-columns: 1fr; gap: 16px; }

    /* Card smaller padding */
    .mfa-card { padding: 24px 20px; border-radius: 12px; }
    .mfa-card h3 { font-size: 18px; }
    .mfa-card p { font-size: 14px; margin-bottom: 14px; }
    .mfa-card-icon { width: 48px; height: 48px; margin-bottom: 14px; }
    .mfa-card-icon svg { width: 22px; height: 22px; }

    /* Steps */
    .mfa-step { padding: 12px 0; }
    .mfa-step-num { width: 40px; height: 40px; font-size: 18px; }
    .mfa-step h4 { font-size: 16px; }

    /* Section titles */
    .mfa-section-title { font-size: 22px; }
    .mfa-section-subtitle { font-size: 14px; }

    /* Frontalier */
    .mfa-frontalier { padding: 40px 20px; }
    .mfa-frontalier-inner { flex-direction: column; gap: 24px; }
    .mfa-frontalier h2 { font-size: 24px; }
    .mfa-frontalier-desc { font-size: 14px; }
    .mfa-frontalier-btns { flex-direction: column; gap: 10px; }
    .mfa-frontalier-btns .mfa-btn,
    .mfa-frontalier-btns .mfa-btn-outline {
        text-align: center;
        width: 100%;
    }

    /* CTA */
    .mfa-cta-final { padding: 36px 20px; }
    .mfa-cta-final h2 { font-size: 22px; }
    .mfa-cta-final p { font-size: 14px; }
    .mfa-btn { padding: 14px 28px; font-size: 16px; width: 100%; text-align: center; }

    /* Reassurance */
    .mfa-reassurance { padding: 24px 16px; }
    .mfa-reassurance-inner { flex-direction: column; gap: 16px; }
    .mfa-reassurance-sep { display: none; }

    /* Contact */
    .mfa-contact-grid { grid-template-columns: 1fr; gap: 30px; padding: 24px 16px; }

    /* Devis */
    .mfa-devis-grid { grid-template-columns: 1fr; gap: 16px; padding: 24px 16px; }

    /* Footer */
    .mfa-footer { padding: 30px 20px 20px; }
    .mfa-footer-grid { grid-template-columns: 1fr; gap: 24px; }

    /* Poles */
    .mfa-poles { padding: 32px 16px; }
    .mfa-methode { padding: 32px 16px; }

    /* Checklist */
    .mfa-checklist { padding: 16px; }
    .mfa-check-item { font-size: 14px; padding: 10px 0; }
}

/* ===========================================
   RESPONSIVE — SMALL MOBILE (max 480px)
   =========================================== */
@media (max-width: 480px) {
    .mfa-section-title { font-size: 20px; }
    .mfa-cta-final h2 { font-size: 20px; }
    .mfa-frontalier h2 { font-size: 22px; }
    .mfa-card { padding: 20px 16px; }
    .mfa-btn { padding: 12px 20px; font-size: 15px; }
}

/* ===========================================
   17. FOOTER — Branded MFA Footer
   =========================================== */

.mfa-footer {
    background: var(--mfa-bg-dark, #111827);
    color: rgba(255,255,255,0.8);
    padding: 0;
    margin: 0;
    font-family: var(--mfa-font-body);
}

.mfa-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 48px 24px 32px;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 40px;
}

.mfa-footer__brand img {
    height: 44px;
    width: auto;
    margin-bottom: 16px;
    filter: brightness(0) invert(1);
}

.mfa-footer__brand p {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255,255,255,0.65);
    margin: 0 0 8px;
}

.mfa-footer__orias {
    font-size: 12px !important;
    color: rgba(255,255,255,0.4) !important;
    font-weight: 500;
}

.mfa-footer__col h4 {
    color: #fff;
    font-family: var(--mfa-font-heading);
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 16px;
    letter-spacing: 0.02em;
}

.mfa-footer__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mfa-footer__col ul li {
    margin-bottom: 10px;
}

.mfa-footer__col ul li a {
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
}

.mfa-footer__col ul li a:hover {
    color: #fff;
}

.mfa-footer__contact li {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mfa-footer__contact li svg {
    flex-shrink: 0;
    color: var(--mfa-orange-cta, #F97316);
}

.mfa-footer__contact li a,
.mfa-footer__contact li span {
    color: rgba(255,255,255,0.65);
    text-decoration: none;
    font-size: 14px;
}

.mfa-footer__contact li a:hover {
    color: #fff;
}

.mfa-footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 20px 24px;
    text-align: center;
}

.mfa-footer__bottom p {
    margin: 0;
    font-size: 13px;
    color: rgba(255,255,255,0.4);
}

/* Footer responsive */
@media (max-width: 1024px) {
    .mfa-footer__inner {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }
}

@media (max-width: 768px) {
    .mfa-footer__inner {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 36px 20px 24px;
    }
    .mfa-footer__brand {
        text-align: center;
    }
    .mfa-footer__brand img {
        margin: 0 auto 16px;
        display: block;
    }
    .mfa-footer__col h4 {
        margin-bottom: 12px;
    }
}
}